@moni-labs/moni-ui 0.3.0 → 0.3.2

package/src/components/moni-button.ts

@@ -13,59 +13,64 @@ import './moni-icon.js';
 import './moni-progress.js';
 
 /**
- * Material Design 3 Button component.
+ * Componente Material Design 3 Button.
  *
- * Buttons allow users to take actions and make choices with a single tap.
- * This component provides all M3 button variants, sizes, and shape morphing
- * capabilities (e.g. morphing to a pill shape on press or toggle).
+ * Los botones permiten a los usuarios realizar acciones y hacer elecciones con un solo toque.
+ * Este componente proporciona todas las variantes de botones de M3, tamaños y capacidades
+ * de transformación de formas (ej. cambiar a una forma de píldora al presionar o alternar).
  *
- * **M3 spec reference:** `m3-docs/components/buttons/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/buttons/specs.md`
  *
- * **Variants:**
- * - `filled` (default) — High emphasis. Use for primary actions.
- * - `tonal` — Medium emphasis. Secondary actions that still need to stand out.
- * - `elevated` — Medium emphasis with shadow. Used when sitting on patterned backgrounds.
- * - `outlined` — Medium emphasis, no fill. Secondary or tertiary actions.
- * - `text` — Low emphasis. Tertiary actions (e.g. dialog cancel button).
+ * **Variantes:**
+ * - `filled` (por defecto) — Énfasis alto. Úsalo para acciones principales.
+ * - `tonal` — Énfasis medio. Acciones secundarias que aún necesitan destacar.
+ * - `elevated` — Énfasis medio con sombra. Úsalo al sentarse sobre fondos con patrones.
+ * - `outlined` — Énfasis medio, sin relleno. Acciones secundarias o terciarias.
+ * - `text` — Énfasis bajo. Acciones terciarias (ej. botón de cancelar diálogo).
  *
- * **Shape morphing (M3 Expressive feature):**
- * - On press (active state): Round and square buttons morph to a slightly squarer
- *   "pressed" shape with specific M3 corner radii (e.g. XS/S 8dp, M 12dp).
- * - On toggle (`active` attribute): The resting shape flips (e.g. round ↔ square).
+ * **Transformación de forma (Característica M3 Expressive):**
+ * - Al presionar (estado activo): Los botones redondos y cuadrados se transforman a una forma
+ *   "presionada" ligeramente más cuadrada con radios de esquina específicos de M3 (ej. XS/S 8dp, M 12dp).
+ * - Al alternar (atributo `active`): La forma de reposo se invierte (ej. redondo ↔ cuadrado).
  *
- * **Rendering as a link:**
- * When the `href` attribute is provided, the component internally renders as
- * an `<a>` element instead of a `<button>`, allowing native routing and
- * middle-click (open in new tab) behaviors while maintaining button visuals.
+ * **Renderizando como un enlace:**
+ * Cuando se proporciona el atributo `href`, el componente se renderiza internamente como
+ * un elemento `<a>` en lugar de un `<button>`, permitiendo enrutamiento nativo y comportamientos
+ * de clic central (abrir en nueva pestaña) mientras mantiene los visuales del botón.
  *
  * @example
  * ```html
- * <!-- Primary filled button -->
- * <moni-button icon="add">Create new</moni-button>
+ * <!-- Botón primario relleno -->
+ * <moni-button icon="add">Crear nuevo</moni-button>
  *
- * <!-- Outlined button -->
- * <moni-button variant="outlined">Cancel</moni-button>
+ * <!-- Botón contorneado -->
+ * <moni-button variant="outlined">Cancelar</moni-button>
  *
- * <!-- Toggle button (toggles active state on click) -->
- * <moni-button icon="favorite" active>Like</moni-button>
+ * <!-- Botón de alternar (alterna estado activo al hacer clic) -->
+ * <moni-button icon="favorite" active>Me gusta</moni-button>
  *
- * <!-- Link button -->
- * <moni-button href="/settings" icon="settings">Settings</moni-button>
+ * <!-- Botón enlace -->
+ * <moni-button href="/settings" icon="settings">Ajustes</moni-button>
  * ```
  *
- * @slot default       - The button label text.
- * @slot icon          - Optional override for the leading icon.
- * @slot icon-trailing - Optional override for the trailing icon.
+ * @slot default       - El texto de la etiqueta del botón.
+ * @slot icon          - Sobrescritura opcional para el icono inicial (leading).
+ * @slot icon-trailing - Sobrescritura opcional para el icono final (trailing).
  *
- * @csspart button     - The inner `<button>` or `<a>` element.
- * @csspart icon       - The leading icon container.
- * @csspart label      - The label container.
- * @csspart trailing-icon - The trailing icon container.
+ * @csspart button     - El elemento interno `<button>` o `<a>`.
+ * @csspart icon       - El contenedor del icono inicial.
+ * @csspart label      - El contenedor de la etiqueta.
+ * @csspart trailing-icon - El contenedor del icono final.
  */
 @customElement('moni-button')
 export class MoniButton extends MoniElement {
 	private static _deprecationWarned = false;
 
+	/**
+	 * Variante visual del botón.
+	 * @type {'filled' | 'tonal' | 'outlined' | 'text' | 'fill' | 'elevated'}
+	 * @default 'filled'
+	 */
 	@property({ reflect: true })
 	variant:
 		| 'filled'
@@ -73,14 +78,24 @@ export class MoniButton extends MoniElement {
 		| 'outlined'
 		| 'text'
 		| 'fill'
-		| 'elevated' = 'filled';
+		| 'elevated'
+		| 'error' = 'filled';
+
 	/**
-	 * M3 Expressive sizes: xsmall, small, medium, large, xlarge.
-	 * `extra` is a Moni legacy alias for `xlarge`, deprecated in v0.3.1; will
-	 * be removed in v1.0. See `m3-docs/components/buttons/overview.md` § Sizes.
+	 * Tamaños de M3 Expressive: xsmall, small, medium, large, xlarge.
+	 * `extra` es un alias heredado de Moni para `xlarge`, obsoleto en v0.3.1; se
+	 * eliminará en v1.0. Ver `m3-docs/components/buttons/overview.md` § Sizes.
+	 * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+	 * @default 'medium'
 	 */
 	@property({ reflect: true })
 	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
+
+	/**
+	 * Forma de las esquinas del botón.
+	 * @type {'round' | 'no-round' | 'square' | 'circle' | 'left-round' | 'right-round' | 'top-round' | 'bottom-round' | 'left-round-flat' | 'right-round-flat' | 'top-round-flat' | 'bottom-round-flat' | 'inner-round'}
+	 * @default 'round'
+	 */
 	@property({ reflect: true })
 	shape:
 		| 'round'
@@ -96,14 +111,55 @@ export class MoniButton extends MoniElement {
 		| 'top-round-flat'
 		| 'bottom-round-flat'
 		| 'inner-round' = 'round';
+
+	/**
+	 * Deshabilita el botón.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true }) disabled = false;
+
+	/**
+	 * Si es verdadero, muestra un indicador de carga y deshabilita el botón.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true }) loading = false;
+
+	/**
+	 * Si es verdadero, establece el botón a un estado activo/seleccionado.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true }) active = false;
+
+	/**
+	 * Nombre del icono inicial (Material Symbols).
+	 * @type {string}
+	 */
 	@property({ reflect: true }) icon = '';
+
+	/**
+	 * Nombre del icono final (Material Symbols).
+	 * @type {string}
+	 */
 	@property({ reflect: true, attribute: 'icon-trailing' }) iconTrailing = '';
+
+	/**
+	 * Tipo nativo del botón (cuando se renderiza como un `<button>`).
+	 * @type {'button' | 'submit' | 'reset'}
+	 * @default 'button'
+	 */
 	@property({ reflect: true })
 	type: 'button' | 'submit' | 'reset' = 'button';
+
+	/**
+	 * Si está establecido, renderiza el botón como un elemento `<a>` con esta URL.
+	 * @type {string}
+	 */
 	@property({ reflect: true }) href = '';
+
+	/**
+	 * Atributo target para los botones tipo enlace.
+	 * @type {string}
+	 */
 	@property({ reflect: true }) target = '';
 
 	override connectedCallback(): void {
@@ -198,7 +254,7 @@ export class MoniButton extends MoniElement {
 			/* Square keeps horizontal padding (like a normal button) but
 			   drops border-radius. Only the circle removes all padding. */
 			.button.circle {
-				padding: 0;
+				padding: 0 !important;
 				border-radius: 50%;
 				inline-size: 2.5rem;
 				aspect-ratio: 1;
@@ -529,6 +585,16 @@ export class MoniButton extends MoniElement {
 				color: var(--primary);
 				box-shadow: var(--elevate1);
 			}
+			.button.error {
+				background-color: var(--error);
+				color: var(--on-error);
+			}
+			.button.error:hover:not(:disabled) {
+				background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 8%, transparent));
+			}
+			.button.error:focus-visible {
+				outline-color: var(--error);
+			}
 
 			/* Disabled / active */
 			.button:disabled,
@@ -630,6 +696,11 @@ export class MoniButton extends MoniElement {
 		`
 	];
 
+	/**
+	 * Intercepta los clicks en botones tipo enlace (`href="..."`).
+	 * Si el botón está desactivado (`disabled`), previene agresivamente
+	 * tanto la navegación por defecto del navegador como la burbuja de eventos.
+	 */
 	private handleLinkClick(e: Event) {
 		if (this.disabled) {
 			e.preventDefault();
@@ -637,12 +708,41 @@ export class MoniButton extends MoniElement {
 		}
 	}
 
+	/**
+	 * Assembles the button's Shadow DOM structure for each Lit render cycle.
+	 *
+	 * **Variant → CSS class mapping:**
+	 * | `variant`    | CSS class     | Visual result               |
+	 * |--------------|---------------|-----------------------------|
+	 * | `'filled'`   | `''` (empty)  | Primary filled button       |
+	 * | `'outlined'` | `'border'`    | Outlined/stroked button     |
+	 * | `'tonal'`    | `'fill'`      | Secondary container fill    |
+	 * | `'text'`     | `'transparent'` | Ghost/text button         |
+	 * | `'elevated'` | `'elevated'`  | Tonal surface + shadow      |
+	 *
+	 * **Shape morphing:**
+	 * When `active=true`, the button inverts its corner-radius shape to create
+	 * a micro-animation where clicking "morphs" the shape (round → square, etc.).
+	 * This is used in toggle-button patterns (e.g., a nav-item that morphs to
+	 * indicate the current page).
+	 *
+	 * **Icon resolution priority:**
+	 * 1. `loading=true` → renders a `<moni-progress>` spinner (hides label at 50% opacity).
+	 * 2. `icon` attribute → renders a `<moni-icon>` in the leading icon slot.
+	 * 3. Otherwise → renders the `icon` named slot for slotted content.
+	 *
+	 * **Link vs. button:**
+	 * When `href` is set, the root element is an `<a>` tag (with disabled click
+	 * guard) for proper browser navigation semantics. Otherwise it's a `<button>`
+	 * with `type="button"` to prevent accidental form submission.
+	 */
 	override render() {
 		let variantClass = '';
 		if (this.variant === 'outlined') variantClass = 'border';
 		else if (this.variant === 'tonal' || this.variant === 'fill') variantClass = 'fill';
 		else if (this.variant === 'text') variantClass = 'transparent';
 		else if (this.variant === 'elevated') variantClass = 'elevated';
+		else if (this.variant === 'error') variantClass = 'error';
 
 		let activeShape: string = this.shape;
 		if (this.active) {

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

@@ -14,7 +14,7 @@ describe('moni-card (P4.4 — recreated)', () => {
 		el.remove();
 	});
 
-	it('renders the three M3 variants: elevated (default), filled, outlined', async () => {
+	it('renderiza las tres variantes M3: elevated (por defecto), filled, outlined', async () => {
 		expect(el.variant).toBe('elevated');
 		await el.updateComplete;
 		expect(el.getAttribute('variant')).toBe('elevated');
@@ -28,7 +28,7 @@ describe('moni-card (P4.4 — recreated)', () => {
 		expect(el.getAttribute('variant')).toBe('outlined');
 	});
 
-	it('renders media, body, and actions slots', async () => {
+	it('renderiza los slots media, body y actions', async () => {
 		await el.updateComplete;
 		const media = el.shadowRoot?.querySelector('[part="media"]');
 		const body = el.shadowRoot?.querySelector('[part="body"]');
@@ -38,7 +38,7 @@ describe('moni-card (P4.4 — recreated)', () => {
 		expect(actions).toBeTruthy();
 	});
 
-	it('reflects clickable, draggable, and disabled attributes', async () => {
+	it('refleja los atributos clickable, draggable y disabled', async () => {
 		el.clickable = true;
 		await el.updateComplete;
 		expect(el.hasAttribute('clickable')).toBe(true);
@@ -52,7 +52,7 @@ describe('moni-card (P4.4 — recreated)', () => {
 		expect(el.hasAttribute('disabled')).toBe(true);
 	});
 
-	it('supports slotted headings via the headline slot', async () => {
+	it('soporta encabezados insertados vía el slot headline', async () => {
 		const heading = document.createElement('h3');
 		heading.setAttribute('slot', 'headline');
 		heading.textContent = 'Card title';
@@ -68,10 +68,10 @@ describe('moni-card (P4.4 — recreated)', () => {
 		expect(text).toBe('Card title');
 	});
 
-	it('supports the default slot for primary content', async () => {
+	it('soporta el slot por defecto para el contenido primario', async () => {
 		el.textContent = 'Body content';
 		await el.updateComplete;
-		// The default slot is inside the headline slot wrapper.
+		// El slot por defecto está dentro del contenedor del slot headline.
 		const defaultSlot = el.shadowRoot?.querySelector(
 			'slot:not([name])'
 		) as HTMLSlotElement | null;

package/src/components/moni-card.ts

@@ -10,67 +10,67 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
- * Material Design 3 Card component.
+ * Componente Material Design 3 Card.
  *
- * Cards display content and actions about a single subject. They are
- * container surfaces that group related information together, making it
- * easy for users to scan and interact with collections of related data.
+ * Las tarjetas muestran contenido y acciones sobre un solo sujeto. Son
+ * superficies contenedoras que agrupan información relacionada junta, haciendo
+ * fácil para los usuarios escanear e interactuar con colecciones de datos relacionados.
  *
- * **M3 spec reference:** `m3-docs/components/cards/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/cards/specs.md`
  *
- * **Variants:**
- * - `elevated` (default) — `surface-container-low` background + `--elevate1` shadow.
- *   Best for collections where the card needs visual separation from a
- *   patterned or colored background. Gains shadow on hover/drag.
- * - `filled` — `surface-container-highest` background, no shadow.
- *   Lowest emphasis; use when cards sit directly on the main background surface.
- * - `outlined` — `surface` background + 1dp `outline-variant` stroke.
- *   Highest structural emphasis without casting a shadow. Best on solid backgrounds.
+ * **Variantes:**
+ * - `elevated` (por defecto) — Fondo `surface-container-low` + sombra `--elevate1`.
+ *   Mejor para colecciones donde la tarjeta necesita separación visual de un
+ *   fondo con patrones o de color. Gana sombra al pasar el ratón/arrastrar.
+ * - `filled` — Fondo `surface-container-highest`, sin sombra.
+ *   Énfasis más bajo; úsalo cuando las tarjetas se asientan directamente sobre la superficie del fondo principal.
+ * - `outlined` — Fondo `surface` + trazo `outline-variant` 1dp.
+ *   Énfasis estructural más alto sin proyectar una sombra. Mejor en fondos sólidos.
  *
- * **M3 measurements:**
- * - Container corner radius: 12dp.
- * - Horizontal content padding: 16dp.
- * - Gap between cards in a collection: max 8dp.
- * - Headline text alignment: start.
+ * **Medidas M3:**
+ * - Radio de esquina del contenedor: 12dp.
+ * - Relleno de contenido horizontal: 16dp.
+ * - Espacio entre tarjetas en una colección: máx. 8dp.
+ * - Alineación de texto del titular: inicio.
  *
- * **Interactive cards:**
- * When `clickable=true`, the card renders M3 state layer overlays on hover,
- * focus, and press via the `::before` pseudo-element. The consumer must handle
- * the `click` event to implement navigation or selection logic.
+ * **Tarjetas interactivas:**
+ * Cuando `clickable=true`, la tarjeta renderiza capas de estado M3 (hover,
+ * focus, press) a través del pseudo-elemento `::before`. El consumidor debe manejar
+ * el evento `click` para implementar la lógica de navegación o selección.
  *
  * @example
  * ```html
  * <moni-card variant="outlined" clickable>
- *   <img slot="media" src="photo.jpg" alt="Card image" />
- *   <h3 slot="headline">Card Title</h3>
- *   <p slot="supporting">Supporting text that describes the card topic.</p>
+ *   <img slot="media" src="photo.jpg" alt="Imagen de la tarjeta" />
+ *   <h3 slot="headline">Título de Tarjeta</h3>
+ *   <p slot="supporting">Texto de soporte que describe el tema de la tarjeta.</p>
  *   <div slot="actions">
- *     <moni-button variant="text">Cancel</moni-button>
- *     <moni-button>Confirm</moni-button>
+ *     <moni-button variant="text">Cancelar</moni-button>
+ *     <moni-button>Confirmar</moni-button>
  *   </div>
  * </moni-card>
  * ```
  *
- * @slot media      - An image, video, or icon at the top of the card.
- * @slot default    - Primary body content (replaces all named slots if used).
- * @slot headline   - H3-equivalent title text.
- * @slot subhead    - Secondary title below the headline.
- * @slot supporting - Descriptive supporting body text.
- * @slot actions    - Action buttons row at the bottom of the card.
+ * @slot media      - Una imagen, video, o icono en la parte superior de la tarjeta.
+ * @slot default    - Contenido del cuerpo principal (reemplaza todos los slots con nombre si se usa).
+ * @slot headline   - Texto de título equivalente a H3.
+ * @slot subhead    - Título secundario debajo del titular.
+ * @slot supporting - Texto de soporte descriptivo del cuerpo.
+ * @slot actions    - Fila de botones de acción en la parte inferior de la tarjeta.
  *
- * @csspart card    - The outer card container.
- * @csspart media   - The media area wrapper.
- * @csspart content - The content wrapper.
- * @csspart actions - The actions row wrapper.
+ * @csspart card    - El contenedor exterior de la tarjeta.
+ * @csspart media   - El contenedor del área de medios.
+ * @csspart content - El contenedor de contenido.
+ * @csspart actions - El contenedor de la fila de acciones.
  */
 @customElement('moni-card')
 export class MoniCard extends MoniElement {
 	/**
-	 * Visual variant of the card.
+	 * Variante visual de la tarjeta.
 	 *
-	 * - `'elevated'` (default) — Surface-low background + elevation shadow.
-	 * - `'filled'` — Surface-highest background, no shadow.
-	 * - `'outlined'` — Surface background + outline-variant stroke.
+	 * - `'elevated'` (por defecto) — Fondo Surface-low + sombra de elevación.
+	 * - `'filled'` — Fondo Surface-highest, sin sombra.
+	 * - `'outlined'` — Fondo Surface + trazo outline-variant.
 	 *
 	 * @default 'elevated'
 	 */
@@ -78,34 +78,36 @@ export class MoniCard extends MoniElement {
 	variant: 'elevated' | 'filled' | 'outlined' = 'elevated';
 
 	/**
-	 * When `true`, applies M3 state layer overlays (hover, focus, pressed)
-	 * to communicate interactivity. The card background shifts slightly on hover.
+	 * Cuando es `true`, aplica capas de estado M3 (hover, focus, pressed)
+	 * para comunicar interactividad. El fondo de la tarjeta cambia ligeramente en hover.
 	 *
-	 * Use when the card itself is a clickable navigation or selection target.
+	 * Úsalo cuando la tarjeta en sí es un objetivo de navegación o selección clicable.
 	 *
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true }) clickable = false;
 
 	/**
-	 * When `true`, applies `--elevate3` box-shadow to simulate the M3 "dragged"
-	 * state as specified in the M3 card interaction spec.
+	 * Cuando es `true`, aplica box-shadow `--elevate3` para simular el estado "arrastrado"
+	 * M3 según lo especificado en la especificación de interacción de tarjetas M3.
 	 *
-	 * Consumers should toggle this attribute based on the drag state of the card
-	 * (e.g. via a drag-and-drop library callback).
+	 * Los consumidores deben alternar este atributo basado en el estado de arrastre de la tarjeta
+	 * (ej. a través de un callback de biblioteca drag-and-drop).
 	 *
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true }) draggable = false;
 
 	/**
-	 * When `true`, the card renders at 50% opacity with `cursor: not-allowed`,
-	 * signaling that the card and its actions are unavailable.
+	 * Cuando es `true`, la tarjeta se renderiza con opacidad del 50% con `cursor: not-allowed`,
+	 * indicando que la tarjeta y sus acciones no están disponibles.
 	 *
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true }) disabled = false;
 
+
+
 	static override styles = [
 		sharedStyles,
 		css`
@@ -239,6 +241,24 @@ export class MoniCard extends MoniElement {
 		`
 	];
 
+	/**
+	 * Renderiza el contenedor de la tarjeta como un `<section>` con envoltorio interactivo opcional.
+	 *
+	 * **¿Por qué `<section>`?**
+	 * Las tarjetas representan una unidad distintiva y cohesiva de contenido. Usar `<section>` da
+	 * a los lectores de pantalla un punto de referencia ARIA implícito para que puedan navegar entre tarjetas.
+	 *
+	 * **Tarjetas interactivas (`clickable=true`):**
+	 * Cuando es `clickable`, toda la superficie de la tarjeta se convierte en un `<button>` que envuelve
+	 * all slots, giving the card keyboard focus and `click` semantics. A
+	 * `<moni-ripple>` is rendered as the first child to provide the M3 touch feedback.
+	 *
+	 * **Slot zones:**
+	 * - `[slot="media"]` — image or video area at the card's leading edge.
+	 * - `[slot="header"]` — title and supporting text row.
+	 * - Default slot — the card's main content body.
+	 * - `[slot="footer"]` — action buttons row at the trailing edge.
+	 */
 	override render() {
 		return html`
 			<div class="media" part="media">

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 
-// Mock ResizeObserver globally for jsdom environment before component imports
+// Simular ResizeObserver globalmente para el entorno jsdom antes de las importaciones de componentes
 globalThis.ResizeObserver = class {
 	observe = vi.fn();
 	unobserve = vi.fn();
@@ -29,7 +29,7 @@ describe('moni-carousel', () => {
 		el.remove();
 	});
 
-	it('renders container, viewport and scroll-container', async () => {
+	it('renderiza el container, viewport y scroll-container', async () => {
 		await el.updateComplete;
 		const container = el.shadowRoot?.querySelector('.carousel-container');
 		const viewport = el.shadowRoot?.querySelector('.carousel-viewport');
@@ -40,7 +40,7 @@ describe('moni-carousel', () => {
 		expect(scrollContainer).toBeTruthy();
 	});
 
-	it('renders the correct number of cards and snap-items', async () => {
+	it('renderiza el número correcto de cards y snap-items', async () => {
 		await el.updateComplete;
 		const cards = el.shadowRoot?.querySelectorAll('.card');
 		const snapItems = el.shadowRoot?.querySelectorAll('.snap-item');
@@ -49,7 +49,7 @@ describe('moni-carousel', () => {
 		expect(snapItems?.length).toBe(3);
 	});
 
-	it('renders the header title and show-all button when set', async () => {
+	it('renderiza el título del header y el botón show-all cuando se establecen', async () => {
 		el.headerText = 'Recent Highlights';
 		el.showAll = true;
 		el.showAllText = 'View All';
@@ -64,7 +64,7 @@ describe('moni-carousel', () => {
 		expect(showAllLink?.textContent?.trim()).toBe('View All');
 	});
 
-	it('renders card links when href is specified in items', async () => {
+	it('renderiza enlaces en las cards cuando href está especificado en los items', async () => {
 		const testEl = document.createElement('moni-carousel') as MoniCarousel;
 		testEl.items = [
 			{ title: 'Link Item', img: 'https://picsum.photos/200', href: 'https://moni.com', target: '_blank' }
@@ -82,7 +82,7 @@ describe('moni-carousel', () => {
 		testEl.remove();
 	});
 
-	it('dispatches item-click event when card is clicked', async () => {
+	it('despacha el evento item-click cuando se hace clic en una card', async () => {
 		await el.updateComplete;
 		const card = el.shadowRoot?.querySelector('.card') as HTMLElement;
 		expect(card).toBeTruthy();
@@ -98,7 +98,7 @@ describe('moni-carousel', () => {
 		expect(eventDetail.item.title).toBe('Item 1');
 	});
 
-	it('dispatches show-all-click event when show-all link is clicked', async () => {
+	it('despacha el evento show-all-click cuando se hace clic en el enlace show-all', async () => {
 		el.showAll = true;
 		await el.updateComplete;
 		const showAllLink = el.shadowRoot?.querySelector('.show-all-link') as HTMLElement;
@@ -112,7 +112,7 @@ describe('moni-carousel', () => {
 		expect(clickSpy).toHaveBeenCalledOnce();
 	});
 
-	it('updates snap padding based on layout type', async () => {
+	it('actualiza el relleno de ajuste (snap padding) basándose en el tipo de diseño (layout)', async () => {
 		el.layout = 'hero';
 		await el.updateComplete;
 		let containerStyle = el.shadowRoot?.querySelector('.carousel-container')?.getAttribute('style');
@@ -124,7 +124,7 @@ describe('moni-carousel', () => {
 		expect(containerStyle?.includes('--carousel-right-padding')).toBe(true);
 	});
 
-	it('renders slotted images as items', async () => {
+	it('renderiza las imágenes insertadas como items', async () => {
 		const testEl = document.createElement('moni-carousel') as MoniCarousel;
 		const img1 = document.createElement('img');
 		img1.src = 'https://picsum.photos/200?1';
@@ -152,7 +152,7 @@ describe('moni-carousel', () => {
 		testEl.remove();
 	});
 
-	it('renders slotted show-all button and dispatches click event', async () => {
+	it('renderiza el botón show-all insertado y despacha el evento click', async () => {
 		const testEl = document.createElement('moni-carousel') as MoniCarousel;
 		const btn = document.createElement('button');
 		btn.setAttribute('slot', 'show-all');
@@ -180,7 +180,7 @@ describe('moni-carousel', () => {
 		testEl.remove();
 	});
 
-	it('hides navigation buttons when hideNav is true', async () => {
+	it('oculta los botones de navegación cuando hideNav es true', async () => {
 		const testEl = document.createElement('moni-carousel') as MoniCarousel;
 		testEl.hideNav = true;
 		document.body.appendChild(testEl);
@@ -195,7 +195,7 @@ describe('moni-carousel', () => {
 		testEl.remove();
 	});
 
-	it('provides enough scroll width to reach the last item (Firefox regression)', async () => {
+	it('proporciona suficiente ancho de desplazamiento para alcanzar el último elemento (regresión de Firefox)', async () => {
 		const testEl = document.createElement('moni-carousel') as MoniCarousel;
 		testEl.items = Array.from({ length: 10 }, (_, i) => ({
 			title: `Item ${i}`,