@moni-labs/moni-ui 0.3.0 → 0.3.2

package/src/components/moni-fab-menu.ts

@@ -13,41 +13,41 @@ import './moni-icon.js';
 import type { MoniFab } from './moni-fab.js';
 
 /**
- * Material Design 3 FAB Menu component.
+ * Componente Material Design 3 FAB Menu (Menú FAB).
  *
- * A specialized container that combines a main `<moni-fab>` trigger with a
- * `<menu>` of secondary FABs. It allows multiple actions to be tucked away
- * behind a single primary Floating Action Button, reducing screen clutter.
+ * Un contenedor especializado que combina un disparador principal `<moni-fab>` con un
+ * `<menu>` de FABs secundarios. Permite ocultar múltiples acciones
+ * detrás de un solo Botón de Acción Flotante primario, reduciendo el desorden en la pantalla.
  *
- * **M3 spec reference:** `m3-docs/components/floating-action-buttons/specs.md` (FAB menus)
+ * **Referencia de la especificación M3:** `m3-docs/components/floating-action-buttons/specs.md` (Menús FAB)
  *
- * **Trigger and animation:**
- * The component wires the primary trigger FAB's `click` event to toggle its
- * internal `open` state. When `open=true`, the nested secondary FABs scale up
- * and fade in via CSS transitions. Consumers can also control the `open` state
- * programmatically by setting the attribute.
+ * **Disparador y animación:**
+ * El componente enlaza el evento `click` del FAB disparador principal para alternar su
+ * estado interno `open`. Cuando `open=true`, los FABs secundarios anidados se escalan
+ * y aparecen mediante transiciones CSS. Los consumidores también pueden controlar el estado `open`
+ * programáticamente estableciendo el atributo.
  *
- * **Focus management (Accessibility):**
- * - When the menu opens, focus automatically moves to the first focusable
- *   secondary item (or remains on the trigger if empty).
- * - While open, the `Tab` key cycles focus strictly within the menu items to
- *   prevent keyboard focus from escaping (focus trap).
- * - Pressing `Escape` or clicking anywhere outside the menu closes it and
- *   returns focus to the primary trigger FAB.
+ * **Gestión del foco (Accesibilidad):**
+ * - Cuando el menú se abre, el foco se mueve automáticamente al primer elemento secundario
+ *   enfocable (o permanece en el disparador si está vacío).
+ * - Mientras está abierto, la tecla `Tab` cicla el foco estrictamente dentro de los elementos del menú para
+ *   evitar que el foco del teclado escape (trampa de foco).
+ * - Presionar `Escape` o hacer clic en cualquier lugar fuera del menú lo cierra y
+ *   devuelve el foco al FAB disparador primario.
  *
  * @example
  * ```html
- * <!-- Bottom-trailing FAB menu opening upwards -->
+ * <!-- Menú FAB en la parte inferior derecha que se abre hacia arriba -->
  * <moni-fab-menu icon="add" color="tertiary" direction="up">
- *   <moni-fab size="small" icon="edit" label="Draft"></moni-fab>
- *   <moni-fab size="small" icon="photo_camera" label="Camera"></moni-fab>
+ *   <moni-fab size="small" icon="edit" label="Borrador"></moni-fab>
+ *   <moni-fab size="small" icon="photo_camera" label="Cámara"></moni-fab>
  * </moni-fab-menu>
  * ```
  *
- * @slot default - The secondary `<moni-fab>` elements that appear when open.
+ * @slot default - Los elementos `<moni-fab>` secundarios que aparecen cuando está abierto.
  *
- * @csspart trigger - The primary `<moni-fab>` trigger element.
- * @csspart menu    - The `<menu>` container holding the secondary items.
+ * @csspart trigger - El elemento disparador `<moni-fab>` primario.
+ * @csspart menu    - El contenedor `<menu>` que contiene los elementos secundarios.
  */
 @customElement('moni-fab-menu')
 export class MoniFabMenu extends MoniElement {
@@ -72,17 +72,35 @@ export class MoniFabMenu extends MoniElement {
 	@query('.fab-menu') private _menu!: HTMLElement;
 
 	private _previouslyFocused: HTMLElement | null = null;
+	/**
+	 * Wrapper estático para el manejador de clics globales.
+	 * Conserva el contexto léxico `this` al ser inyectado/removido en `document`.
+	 */
 	private _onDocClick = (e: MouseEvent) => this._handleDocClick(e);
+	/**
+	 * Wrapper estático para el manejador de teclado global.
+	 * Facilita la limpieza del listener de Escape/Navegación al desmontar el componente.
+	 */
 	private _onDocKeydown = (e: KeyboardEvent) => this._handleDocKeydown(e);
 
+	/**
+	 * Hook del ciclo de vida (Lit). Se ejecuta una sola vez tras el primer renderizado.
+	 * Espera a que el Shadow DOM se materialice por completo y enlaza el evento nativo
+	 * `click` directamente sobre el FAB (Floating Action Button) principal que acciona el menú.
+	 */
 	override async firstUpdated() {
-		// Wait for all children to finish rendering before wiring listeners
+		// Esperar a que todos los hijos terminen de renderizarse antes de enlazar los detectores
 		await this.updateComplete;
 		if (this._trigger) {
 			this._trigger.addEventListener('click', this._onTriggerClick);
 		}
 	}
 
+	/**
+	 * Limpieza rigurosa de memoria (Garbage Collection).
+	 * Remueve absolutamente todos los listeners asíncronos (document y trigger local)
+	 * para evitar colisiones de eventos fantasma y pérdidas de rendimiento (memory leaks).
+	 */
 	override disconnectedCallback() {
 		super.disconnectedCallback();
 		this._trigger?.removeEventListener('click', this._onTriggerClick);
@@ -97,28 +115,32 @@ export class MoniFabMenu extends MoniElement {
 		}
 	}
 
+	/**
+	 * Alterna explícitamente el estado `open` del menú. 
+	 * Se dispara exclusivamente al interactuar física o focalmente con el FAB principal.
+	 */
 	private _onTriggerClick = () => {
 		this.open = !this.open;
 	};
 
 	private _syncOpenState(): void {
 		if (this.open) {
-			// Save current focus so we can restore it on close.
+			// Guarda el foco actual para poder restaurarlo al cerrar.
 			this._previouslyFocused = (this.getRootNode() as unknown as DocumentOrShadowRoot)
 				.activeElement as HTMLElement | null;
-			// Move focus to the first focusable item in the menu, or the
-			// trigger as a fallback (per WAI-ARIA menu pattern).
+			// Mueve el foco al primer elemento enfocable en el menú, o al
+			// disparador como respaldo (según el patrón de menú WAI-ARIA).
 			const first = this._firstFocusableMenuItem();
 			if (first) {
 				first.focus();
 			} else {
 				this._trigger?.focus();
 			}
-			// Install document listeners for click-outside and Escape.
+			// Instala detectores en el documento para clic fuera y Escape.
 			document.addEventListener('click', this._onDocClick, true);
 			document.addEventListener('keydown', this._onDocKeydown, true);
 		} else {
-			// Restore focus to the trigger (or the previously focused element).
+			// Restaura el foco al disparador (o al elemento previamente enfocado).
 			const restore = this._previouslyFocused ?? this._trigger;
 			restore?.focus();
 			this._previouslyFocused = null;
@@ -206,7 +228,7 @@ export class MoniFabMenu extends MoniElement {
 				transform: scale(1);
 			}
 
-			/* Directional placement relative to the trigger */
+			/* Colocación direccional relativa al disparador */
 			:host([direction='up']) .fab-menu {
 				inset: auto auto calc(100% + 0.5rem) 0;
 				flex-direction: column-reverse;
@@ -231,9 +253,25 @@ export class MoniFabMenu extends MoniElement {
 		`
 	];
 
+	/**
+	 * Renderiza el speed-dial FAB como un FAB disparador + menú colapsable de FABs de acción.
+	 *
+	 * **Patrón Speed-dial:**
+	 * El FAB disparador siempre es visible. Cuando `open=true`, los elementos de acción en
+	 * el slot por defecto se revelan con una animación en cascada. Los elementos se colapsan
+	 * de nuevo con una cascada invertida.
+	 *
+	 * **Dirección de cascada:**
+	 * Cuando `placement='bottom'`, los elementos se expanden hacia arriba (índice 0 en la parte inferior).
+	 * Cuando `placement='top'`, los elementos se expanden hacia abajo.
+	 *
+	 * **`aria-expanded`:**
+	 * Se establece en el botón disparador para comunicar el estado abierto/cerrado a los lectores de pantalla.
+	 * Cada FAB de acción en el slot lleva `aria-label` que el consumidor debe proporcionar.
+	 */
 	override render() {
 		return html`<div class="wrap">
-			<!-- div role=menu allows any slotted content (not just <li>) -->
+			<!-- div role=menu permite cualquier contenido en el slot (no solo <li>) -->
 			<div class="fab-menu" role="menu" part="menu">
 				<slot></slot>
 			</div>

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

@@ -14,7 +14,7 @@ describe('moni-fab', () => {
 		el.remove();
 	});
 
-	it('renders a <button> with default icon "add"', async () => {
+	it('renderiza un <button> con el icono por defecto "add"', async () => {
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
 		const icon = el.shadowRoot?.querySelector('moni-icon');
@@ -22,21 +22,21 @@ describe('moni-fab', () => {
 		expect(icon?.getAttribute('name')).toBe('add');
 	});
 
-	it('uses the provided icon name', async () => {
+	it('usa el nombre del icono proporcionado', async () => {
 		el.icon = 'edit';
 		await el.updateComplete;
 		const icon = el.shadowRoot?.querySelector('moni-icon');
 		expect(icon?.getAttribute('name')).toBe('edit');
 	});
 
-	it('renders the label text when label is set (visible by default, no extended required)', async () => {
+	it('renderiza el texto del label cuando se establece (visible por defecto, no requiere extended)', async () => {
 		el.label = 'Create';
 		await el.updateComplete;
 		const label = el.shadowRoot?.querySelector('.label');
 		expect(label?.textContent).toBe('Create');
 	});
 
-	it('does not require extended/expanded for the label to be visible', async () => {
+	it('no requiere extended/expanded para que el label sea visible', async () => {
 		el.label = 'Send';
 		await el.updateComplete;
 		expect(el.hasAttribute('extended')).toBe(false);
@@ -45,20 +45,20 @@ describe('moni-fab', () => {
 		expect(label?.textContent).toBe('Send');
 	});
 
-	it('hides the label visually when no label is set (empty span + display:none)', async () => {
+	it('oculta el label visualmente cuando no se establece (span vacío + display:none)', async () => {
 		await el.updateComplete;
 		const label = el.shadowRoot?.querySelector('.label');
 		expect(label?.textContent).toBe('');
 	});
 
-	it('applies shape=circle class', async () => {
+	it('aplica la clase shape=circle', async () => {
 		el.shape = 'circle';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
 		expect(button?.classList.contains('circle')).toBe(true);
 	});
 
-	it('applies color classes (secondary/tertiary/surface)', async () => {
+	it('aplica las clases de color (secondary/tertiary/surface)', async () => {
 		el.color = 'secondary';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
@@ -73,7 +73,7 @@ describe('moni-fab', () => {
 		expect(button?.classList.contains('surface')).toBe(true);
 	});
 
-	it('applies size classes (small/large)', async () => {
+	it('aplica las clases de tamaño (small/large)', async () => {
 		el.size = 'small';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
@@ -84,13 +84,13 @@ describe('moni-fab', () => {
 		expect(button?.classList.contains('large')).toBe(true);
 	});
 
-	it('reflects the position attribute', async () => {
+	it('refleja el atributo position', async () => {
 		el.position = 'top-leading';
 		await el.updateComplete;
 		expect(el.getAttribute('position')).toBe('top-leading');
 	});
 
-	it('reflects extended and expanded attributes', async () => {
+	it('refleja los atributos extended y expanded', async () => {
 		el.extended = true;
 		await el.updateComplete;
 		expect(el.hasAttribute('extended')).toBe(true);
@@ -100,7 +100,7 @@ describe('moni-fab', () => {
 		expect(el.hasAttribute('expanded')).toBe(true);
 	});
 
-	it('forwards disabled to the button', async () => {
+	it('reenvía disabled al botón', async () => {
 		el.disabled = true;
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector(
@@ -109,11 +109,11 @@ describe('moni-fab', () => {
 		expect(button.disabled).toBe(true);
 	});
 
-	it('logs a deprecation warning when size="small" is used (M3 Expressive deprecates FAB small)', async () => {
+	it('registra una advertencia de obsolescencia cuando se usa size="small" (M3 Expressive deprecia el FAB pequeño)', async () => {
 		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-		// Detach and re-attach to re-run connectedCallback with the
-		// deprecated size already set. The component reads the attribute
-		// from the element during connect.
+		// Desmontar y volver a montar para ejecutar de nuevo connectedCallback con el
+		// tamaño obsoleto ya establecido. El componente lee el atributo
+		// del elemento durante la conexión.
 		el.remove();
 		el.size = 'small';
 		document.body.appendChild(el);
@@ -122,7 +122,7 @@ describe('moni-fab', () => {
 			String(c[0]).includes('[moni-ui]') &&
 			String(c[0]).includes('size="small"')
 		);
-		expect(call, 'expected a deprecation warning to mention size="small"').toBeTruthy();
+		expect(call, 'se esperaba que una advertencia de obsolescencia mencionara size="small"').toBeTruthy();
 		warnSpy.mockRestore();
 	});
 });

package/src/components/moni-fab.ts

@@ -11,64 +11,116 @@ import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 
 /**
- * Material Design 3 Floating Action Button (FAB) component.
+ * Componente Material Design 3 Floating Action Button (FAB).
  *
- * FABs represent the primary, or most common, action on a screen. They appear
- * in front of all screen content, typically as a circular shape with an icon in
- * its center.
+ * Los FABs representan la acción principal, o más común, en una pantalla. Aparecen
+ * frente a todo el contenido de la pantalla, típicamente como una forma circular con un icono en
+ * su centro.
  *
- * **M3 spec reference:** `m3-docs/components/floating-action-buttons/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/floating-action-buttons/specs.md`
  *
- * **M3 Expressive Updates & Deprecations (May 2025):**
- * - `size="small"` is **no longer recommended** by M3. Use `medium` (40dp or 56dp)
- *   or `large` (96dp). Deprecated in v0.3.1; will be removed in v1.0.
- * - `shape="circle"` is **not part of M3**. M3 FABs use a `rounded` shape with a
- *   16dp corner radius (which morphs to a `full` radius on hover/focus).
- *   Deprecated in v0.3.1; will be removed in v1.0.
- * - `color="surface"` is **no longer recommended**. Use `primary`, `secondary`,
- *   or `tertiary` to ensure proper color mapping to the M3 theme.
+ * **Actualizaciones y Deprecaciones de M3 Expressive (Mayo 2025):**
+ * - `size="small"` **ya no es recomendado** por M3. Use `medium` (40dp o 56dp)
+ *   o `large` (96dp). Deprecado en v0.3.1; se eliminará en v1.0.
+ * - `shape="circle"` **no es parte de M3**. Los FABs M3 usan una forma `rounded` (redondeada) con un
+ *   radio de esquina de 16dp (que se transforma a un radio `full` al pasar el cursor/enfocar).
+ *   Deprecado en v0.3.1; se eliminará en v1.0.
+ * - `color="surface"` **ya no es recomendado**. Use `primary`, `secondary`,
+ *   o `tertiary` para asegurar un mapeo de color adecuado al tema M3.
  *
- * **Extended FABs:**
- * When `extended` is true, the FAB displays a text label next to the icon.
- * Extended FABs are wider and are typically used when the action needs explicit
- * text to be clear. The `expanded` attribute forces the FAB to its full extended
- * width, useful for animating between standard and extended states on scroll.
+ * **FABs Extendidos:**
+ * Cuando `extended` es true, el FAB muestra una etiqueta de texto junto al icono.
+ * Los FABs extendidos son más anchos y se usan típicamente cuando la acción necesita texto explícito
+ * para ser clara. El atributo `expanded` fuerza al FAB a su ancho extendido completo,
+ * útil para animar entre los estados estándar y extendido al desplazarse.
  *
- * **Positioning:**
- * The `position` attribute applies predefined absolute/fixed positioning
- * (e.g. `bottom-trailing`), snapping the FAB to standard screen corners.
+ * **Posicionamiento:**
+ * El atributo `position` aplica un posicionamiento absoluto/fijo predefinido
+ * (ej. `bottom-trailing`), encajando el FAB en las esquinas estándar de la pantalla.
  *
  * @example
  * ```html
- * <!-- Standard primary FAB -->
+ * <!-- FAB primario estándar -->
  * <moni-fab icon="edit"></moni-fab>
  *
- * <!-- Extended tertiary FAB -->
- * <moni-fab color="tertiary" extended icon="add" label="New task"></moni-fab>
+ * <!-- FAB terciario extendido -->
+ * <moni-fab color="tertiary" extended icon="add" label="Nueva tarea"></moni-fab>
  *
- * <!-- Positioned FAB -->
+ * <!-- FAB posicionado -->
  * <moni-fab position="bottom-trailing" icon="navigation"></moni-fab>
  * ```
  *
- * @csspart button - The internal `<button>` element.
- * @csspart icon   - The container for the icon.
- * @csspart label  - The text label (only visible when extended).
+ * @csspart button - El elemento `<button>` interno.
+ * @csspart icon   - El contenedor para el icono.
+ * @csspart label  - La etiqueta de texto (solo visible cuando está extendido).
  */
 @customElement('moni-fab')
 export class MoniFab extends MoniElement {
 	private static _deprecationWarned = false;
 
+	/**
+	 * Define las dimensiones del FAB.
+	 * `small` está deprecado en M3 Expressive.
+	 * @type {'small' | 'medium' | 'large'}
+	 * @default 'medium'
+	 */
 	@property({ reflect: true })
 	size: 'small' | 'medium' | 'large' = 'medium';
+
+	/**
+	 * Mapeo de color semántico del FAB.
+	 * `surface` está deprecado en M3.
+	 * @type {'primary' | 'secondary' | 'tertiary' | 'surface'}
+	 * @default 'primary'
+	 */
 	@property({ reflect: true })
 	color: 'primary' | 'secondary' | 'tertiary' | 'surface' = 'primary';
+
+	/**
+	 * Forma de las esquinas del FAB.
+	 * `circle` está deprecado en M3 (los FABs deben ser cuadrados redondeados).
+	 * @type {'rounded' | 'circle'}
+	 * @default 'rounded'
+	 */
 	@property({ reflect: true })
 	shape: 'rounded' | 'circle' = 'rounded';
+
+	/**
+	 * Alias heredado de `expanded`. Indica si el FAB muestra una etiqueta de texto.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true }) extended = false;
+
+	/**
+	 * Si es true, expande el FAB para mostrar su etiqueta de texto junto al icono.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true }) expanded = false;
+
+	/**
+	 * Deshabilita el FAB.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true }) disabled = false;
+
+	/**
+	 * Nombre del icono (Material Symbols) mostrado dentro del FAB.
+	 * @type {string}
+	 * @default 'add'
+	 */
 	@property({ reflect: true }) icon = 'add';
+
+	/**
+	 * Etiqueta de texto mostrada cuando el FAB se expande/extiende.
+	 * @type {string}
+	 */
 	@property({ reflect: true }) label = '';
+
+	/**
+	 * Fija la posición del FAB relativa a los bordes de la pantalla.
+	 * @type {'bottom-trailing' | 'bottom-leading' | 'top-trailing' | 'top-leading'}
+	 * @default 'bottom-trailing'
+	 */
 	@property({ reflect: true })
 	position:
 		| 'bottom-trailing'
@@ -128,7 +180,7 @@ export class MoniFab extends MoniElement {
 				font-size: 1rem;
 				font-weight: 500;
 				color: var(--on-primary);
-				/* Default: no padding so icon is centered; padding added when label exists */
+				/* Por defecto: sin relleno para que el icono se centre; el relleno se añade cuando existe etiqueta */
 				padding: 0 1.5rem;
 				background-color: var(--primary);
 				border: 0.0625rem solid transparent;
@@ -158,7 +210,7 @@ export class MoniFab extends MoniElement {
 				box-shadow: var(--elevate1);
 			}
 
-			/* When no label: icon-only, remove horizontal padding so icon centers */
+			/* Cuando no hay etiqueta: solo icono, eliminar relleno horizontal para que el icono se centre */
 			.button:not(:has(> .label:not(:empty))) {
 				padding-inline: 0;
 			}
@@ -227,8 +279,8 @@ export class MoniFab extends MoniElement {
 				color: inherit;
 			}
 
-			/* Label is always rendered but empty string hides via overflow.
-			   When label prop is set, it appears. */
+			/* La etiqueta siempre se renderiza pero la cadena vacía se oculta mediante overflow.
+			   Cuando se establece la propiedad label, aparece. */
 			.label {
 				white-space: nowrap;
 				max-inline-size: 16rem;
@@ -241,18 +293,32 @@ export class MoniFab extends MoniElement {
 				display: none;
 			}
 
-			/* Circle shape: hide label completely */
+			/* Forma circular: ocultar etiqueta completamente */
 			:host([shape='circle']) .label,
 			:host([shape='circle']) slot {
 				display: none !important;
 			}
-			/* Circle: remove padding, make it a perfect circle */
+			/* Círculo: eliminar relleno, hacerlo un círculo perfecto */
 			:host([shape='circle']) .button {
 				padding: 0 !important;
 			}
 		`
 	];
 
+	/**
+	 * Renderiza el botón FAB con su icono, etiqueta extendida opcional, y estado de carga.
+	 *
+	 * **Composición de clases:**
+	 * - `'fab'` — estilos base del FAB (redondo, 56dp, elevado).
+	 * - `this.size` (`'small'` = 40dp, `'large'` = 96dp, por defecto = 56dp).
+	 * - `this.variant` — esquema de color (`'primary'`, `'secondary'`, `'tertiary'`, `'surface'`).
+	 * - `'extended'` — se añade cuando se establece `label`; ensancha el FAB en forma de píldora
+	 *   y revela el texto de la etiqueta con una transición CSS `max-width`.
+	 *
+	 * **Estado de carga:**
+	 * Cuando `loading=true`, un spinner `<moni-progress>` reemplaza el icono. La etiqueta
+	 * permanece visible para mantener el ancho del FAB extendido y prevenir saltos de diseño.
+	 */
 	override render() {
 		const classes = [
 			'button',

package/src/components/moni-file-field.test.ts

@@ -14,7 +14,7 @@ describe('moni-file-field', () => {
 		el.remove();
 	});
 
-	it('renders a text input and a file input', async () => {
+	it('renderiza un input de texto y un input de archivo', async () => {
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector('input[type="text"]');
 		const file = el.shadowRoot?.querySelector('input[type="file"]');
@@ -22,7 +22,7 @@ describe('moni-file-field', () => {
 		expect(file).toBeTruthy();
 	});
 
-	it('keeps the text input readonly', async () => {
+	it('mantiene el input de texto en solo lectura (readonly)', async () => {
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector(
 			'input[type="text"]'
@@ -30,7 +30,7 @@ describe('moni-file-field', () => {
 		expect(text.hasAttribute('readonly')).toBe(true);
 	});
 
-	it('places the label between the text input and the file input for label-lift', async () => {
+	it('coloca el label entre el input de texto y el input de archivo para la elevación del label', async () => {
 		el.label = 'Upload';
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector('input[type="text"]');
@@ -40,14 +40,14 @@ describe('moni-file-field', () => {
 		expect(label?.nextElementSibling).toBe(file);
 	});
 
-	it('adds active class to text input when value is set', async () => {
+	it('agrega la clase active al input de texto cuando se establece el valor', async () => {
 		el.value = 'report.pdf';
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector('input[type="text"]');
 		expect(text?.classList.contains('active')).toBe(true);
 	});
 
-	it('forwards accept attribute to the file input', async () => {
+	it('reenvía el atributo accept al input de archivo', async () => {
 		el.accept = 'image/*';
 		await el.updateComplete;
 		const file = el.shadowRoot?.querySelector(
@@ -56,7 +56,7 @@ describe('moni-file-field', () => {
 		expect(file.accept).toBe('image/*');
 	});
 
-	it('forwards multiple attribute to the file input', async () => {
+	it('reenvía el atributo multiple al input de archivo', async () => {
 		el.multiple = true;
 		await el.updateComplete;
 		const file = el.shadowRoot?.querySelector(
@@ -65,13 +65,13 @@ describe('moni-file-field', () => {
 		expect(file.multiple).toBe(true);
 	});
 
-	it('shows a trailing folder icon by default', async () => {
+	it('muestra un icono de carpeta (trailing folder icon) por defecto', async () => {
 		await el.updateComplete;
 		const trailing = el.shadowRoot?.querySelector('.trailing-icon');
 		expect(trailing).toBeTruthy();
 	});
 
-	it('uses button-label as placeholder when no value', async () => {
+	it('usa button-label como placeholder cuando no hay valor', async () => {
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector(
 			'input[type="text"]'