@moni-labs/moni-ui 0.3.0 → 0.3.2

package/src/components/moni-dialog.ts

@@ -8,87 +8,88 @@
 import { html, css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
+import { emitMoniEvent } from '../utils/event-emitter.js';
 
 /**
- * Material Design 3 Dialog component.
+ * Componente Material Design 3 Dialog (Diálogo).
  *
- * Dialogs inform users about a task and can contain critical information,
- * require decisions, or involve multiple tasks. They interrupt the user's
- * workflow and should be used sparingly.
+ * Los diálogos informan a los usuarios sobre una tarea y pueden contener información crítica,
+ * requerir decisiones o implicar múltiples tareas. Interrumpen el flujo de trabajo del
+ * usuario y deben usarse con moderación.
  *
- * **M3 spec reference:** `m3-docs/components/dialogs/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/dialogs/specs.md`
  *
- * **Implementation note — native `<dialog>` element:**
- * This component wraps the native `<dialog>` HTML element. Opening and closing
- * are controlled via the `open` attribute (and its JS property). The component
- * syncs `open` changes to the native `<dialog>` in `updated()`:
- * - `modal=true` → calls `dialog.showModal()` (blocks focus, adds backdrop).
- * - `modal=false` → calls `dialog.show()` (non-blocking, no backdrop).
- * - `open=false` → calls `dialog.close()`.
+ * **Nota de implementación — elemento nativo `<dialog>`:**
+ * Este componente envuelve el elemento HTML nativo `<dialog>`. La apertura y cierre
+ * se controlan mediante el atributo `open` (y su propiedad JS). El componente
+ * sincroniza los cambios de `open` al `<dialog>` nativo en `updated()`:
+ * - `modal=true` → llama a `dialog.showModal()` (bloquea el foco, añade fondo oscuro).
+ * - `modal=false` → llama a `dialog.show()` (no bloquea, sin fondo oscuro).
+ * - `open=false` → llama a `dialog.close()`.
  *
- * **Placement (`side` attribute):**
- * - `center` (default) — Centered in the viewport. Standard M3 dialog.
- * - `top`, `right`, `bottom`, `left` — Edge-anchored panels (side sheet pattern).
- * - `max` — Full-screen dialog for complex flows.
+ * **Colocación (atributo `side`):**
+ * - `center` (por defecto) — Centrado en la ventana gráfica. Diálogo M3 estándar.
+ * - `top`, `right`, `bottom`, `left` — Paneles anclados a los bordes (patrón side sheet).
+ * - `max` — Diálogo a pantalla completa para flujos complejos.
  *
  * @example
  * ```html
- * <!-- Basic modal dialog -->
- * <moni-dialog open modal title="Delete item?" size="small">
- *   <p>This action cannot be undone.</p>
+ * <!-- Diálogo modal básico -->
+ * <moni-dialog open modal title="Eliminar elemento?" size="small">
+ *   <p>Esta acción no se puede deshacer.</p>
  *   <div slot="footer">
- *     <moni-button variant="text">Cancel</moni-button>
- *     <moni-button>Delete</moni-button>
+ *     <moni-button variant="text">Cancelar</moni-button>
+ *     <moni-button>Eliminar</moni-button>
  *   </div>
  * </moni-dialog>
  * ```
  *
- * @slot default - The dialog body content.
- * @slot header  - Custom header content (overrides `title` attribute).
- * @slot footer  - Action buttons row at the bottom of the dialog.
+ * @slot default - El contenido del cuerpo del diálogo.
+ * @slot header  - Contenido personalizado del encabezado (sobrescribe el atributo `title`).
+ * @slot footer  - Fila de botones de acción en la parte inferior del diálogo.
  *
- * @csspart dialog - The native `<dialog>` element.
- * @csspart header - The header container.
- * @csspart body   - The body content wrapper.
- * @csspart footer - The footer actions wrapper.
+ * @csspart dialog - El elemento `<dialog>` nativo.
+ * @csspart header - El contenedor del encabezado.
+ * @csspart body   - El envoltorio del contenido del cuerpo.
+ * @csspart footer - El envoltorio de acciones del pie de página.
  */
 @customElement('moni-dialog')
 export class MoniDialog extends MoniElement {
 	/**
-	 * Controls the open/closed state of the dialog.
+	 * Controla el estado abierto/cerrado del diálogo.
 	 *
-	 * When set to `true`, the component calls `dialog.showModal()` (if `modal`)
-	 * or `dialog.show()`. When set to `false`, calls `dialog.close()`.
-	 * Reflected as an HTML attribute for CSS and external state readers.
+	 * Cuando se establece en `true`, el componente llama a `dialog.showModal()` (si `modal`)
+	 * o `dialog.show()`. Cuando se establece en `false`, llama a `dialog.close()`.
+	 * Reflejado como un atributo HTML para CSS y lectores de estado externos.
 	 *
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true }) open = false;
 
 	/**
-	 * When `true`, opens the dialog as a modal using `<dialog>.showModal()`.
+	 * Cuando es `true`, abre el diálogo como un modal usando `<dialog>.showModal()`.
 	 *
-	 * Modal dialogs:
-	 * - Block keyboard focus from leaving the dialog.
-	 * - Render a `::backdrop` scrim over the rest of the page.
-	 * - Can be closed by pressing `Escape` (native browser behavior).
+	 * Diálogos modales:
+	 * - Bloquean que el foco del teclado salga del diálogo.
+	 * - Renderizan una capa `::backdrop` sobre el resto de la página.
+	 * - Se pueden cerrar presionando `Escape` (comportamiento nativo del navegador).
 	 *
-	 * When `false`, uses `<dialog>.show()` which is non-blocking (no focus trap
-	 * and no backdrop).
+	 * Cuando es `false`, usa `<dialog>.show()` que no es bloqueante (sin trampa de foco
+	 * y sin capa de fondo).
 	 *
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true }) modal = false;
 
 	/**
-	 * Placement of the dialog within the viewport.
+	 * Colocación del diálogo dentro de la ventana gráfica.
 	 *
-	 * - `'center'` (default) — Centered. Standard M3 dialog placement.
-	 * - `'top'`    — Anchored to the top edge (drawer from top).
-	 * - `'right'`  — Anchored to the right edge (side sheet pattern).
-	 * - `'bottom'` — Anchored to the bottom edge (bottom sheet alternative).
-	 * - `'left'`   — Anchored to the left edge (navigation drawer pattern).
-	 * - `'max'`    — Full-screen (covers the entire viewport).
+	 * - `'center'` (por defecto) — Centrado. Colocación de diálogo M3 estándar.
+	 * - `'top'`    — Anclado al borde superior (cajón desde arriba).
+	 * - `'right'`  — Anclado al borde derecho (patrón de hoja lateral).
+	 * - `'bottom'` — Anclado al borde inferior (alternativa de hoja inferior).
+	 * - `'left'`   — Anclado al borde izquierdo (patrón de cajón de navegación).
+	 * - `'max'`    — Pantalla completa (cubre toda la ventana gráfica).
 	 *
 	 * @default 'center'
 	 */
@@ -96,11 +97,11 @@ export class MoniDialog extends MoniElement {
 	side: 'center' | 'top' | 'right' | 'bottom' | 'left' | 'max' = 'center';
 
 	/**
-	 * Size of the dialog container.
+	 * Tamaño del contenedor del diálogo.
 	 *
-	 * - `'small'`  — Narrow dialog; ideal for simple confirmations.
-	 * - `'medium'` — Standard dialog width (default).
-	 * - `'large'`  — Wide dialog; for forms or complex content.
+	 * - `'small'`  — Diálogo estrecho; ideal para confirmaciones simples.
+	 * - `'medium'` — Ancho de diálogo estándar (por defecto).
+	 * - `'large'`  — Diálogo ancho; para formularios o contenido complejo.
 	 *
 	 * @default 'medium'
 	 */
@@ -108,30 +109,47 @@ export class MoniDialog extends MoniElement {
 	size: 'small' | 'medium' | 'large' = 'medium';
 
 	/**
-	 * Text displayed in the dialog header area.
+	 * Texto mostrado en el área del encabezado del diálogo.
 	 *
-	 * When non-empty, renders as a styled heading inside the header container.
-	 * The `header` slot takes precedence over this attribute when both are present.
+	 * Cuando no está vacío, se renderiza como un encabezado estilizado dentro del contenedor del encabezado.
+	 * El slot `header` tiene prioridad sobre este atributo cuando ambos están presentes.
 	 *
 	 * @default ''
 	 */
 	@property({ reflect: true }) title = '';
 
-	/** Direct reference to the native `<dialog>` element for programmatic access. */
+	/** Referencia directa al elemento `<dialog>` nativo para acceso programático. */
 	@query('dialog') private _dialog!: HTMLDialogElement;
 
+	override willUpdate(changed: Map<string, unknown>) {
+		if (changed.has('open') && this.open !== changed.get('open')) {
+			const isOpening = this.open;
+			const eventName = isOpening ? 'moni-request-open' : 'moni-request-close';
+			const allowed = emitMoniEvent(this, eventName, { cancelable: true });
+			
+			if (!allowed) {
+				this.open = !isOpening;
+			}
+		}
+	}
+
 	/**
-	 * Syncs the `open` and `modal` state to the native `<dialog>` element.
+	 * Hook de ciclo de vida de Lit. Sincroniza el estado declarativo (`open`, `modal`)
+	 * con la API imperativa del elemento `<dialog>` nativo de HTML5.
 	 *
-	 * Called by Lit after every render cycle where tracked properties change.
-	 * Avoids calling `showModal()` or `show()` if the dialog is already open
-	 * (prevents the `InvalidStateError` DOMException).
+	 * - `showModal()`: Bloquea el resto del DOM (Inert), atrapa el foco del teclado (Focus Trap)
+	 *   y renderiza el seudoelemento `::backdrop`.
+	 * - `show()`: Permite interacción con el fondo (Non-modal).
 	 *
-	 * @param changed - Map of changed property names to their previous values.
+	 * IMPORTANTE: Previene la excepción `InvalidStateError` validando si el
+	 * diálogo ya está abierto antes de llamar a `show()` o `showModal()`.
+	 *
+	 * @param changed - Mapa de propiedades reactivas modificadas.
 	 */
 	override updated(changed: Map<string, unknown>) {
 		if (changed.has('open') && this._dialog) {
 			if (this.open) {
+				emitMoniEvent(this, 'moni-open');
 				if (this.modal) {
 					if (!this._dialog.open) {
 						this._dialog.showModal();
@@ -142,6 +160,7 @@ export class MoniDialog extends MoniElement {
 					}
 				}
 			} else {
+				emitMoniEvent(this, 'moni-close');
 				if (this._dialog.open) {
 					this._dialog.close();
 				}
@@ -149,6 +168,16 @@ export class MoniDialog extends MoniElement {
 		}
 	}
 
+	private _onTransitionEnd(e: TransitionEvent) {
+		if (e.target === this._dialog && e.propertyName === 'transform') {
+			if (this.open) {
+				emitMoniEvent(this, 'moni-opened');
+			} else {
+				emitMoniEvent(this, 'moni-closed');
+			}
+		}
+	}
+
 	static override styles = [
 		sharedStyles,
 		css`
@@ -311,6 +340,25 @@ export class MoniDialog extends MoniElement {
 		`
 	];
 
+	/**
+	 * Renderiza el elemento `<dialog>` nativo con la estructura semántica de slots del diálogo.
+	 *
+	 * **¿Por qué `<dialog>`?**
+	 * El elemento nativo `<dialog>` proporciona captura de foco, renderizado de fondo (backdrop)
+	 * y semántica modal accesible sin JavaScript. El enlace `?open` de Lit
+	 * alterna el atributo de forma imperativa, mientras que `updated()` llama a `.show()` /
+	 * `.showModal()` / `.close()` para conducir la pila de abrir/cerrar nativa del navegador.
+	 *
+	 * **Estructura de slots:**
+	 * - `[slot="header"]` — se repliega al valor del atributo `title`.
+	 * - Slot por defecto — la región de contenido principal del diálogo.
+	 * - `[slot="footer"]` — botones de acción (típicamente elementos `<moni-button>`).
+	 *
+	 * **Composición de `classes`:**
+	 * `side`, `size`, y `modal` (si `modal=true`) se unen como clases CSS.
+	 * `side` posiciona el diálogo en `start`, `end`, `top`, o `bottom`; usado
+	 * para diálogos de panel lateral. `size` controla max-width/height.
+	 */
 	override render() {
 		const classes = [this.side, this.size, this.modal ? 'modal' : '']
 			.filter(Boolean)
@@ -318,6 +366,7 @@ export class MoniDialog extends MoniElement {
 		return html`<dialog
 			part="dialog"
 			class=${classes}
+			@transitionend=${this._onTransitionEnd}
 		>
 			<header part="header">
 				<slot name="header">${this.title}</slot>

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

@@ -14,13 +14,13 @@ describe('moni-divider (P5.1 — recreated)', () => {
 		el.remove();
 	});
 
-	it('defaults to inset=leading', async () => {
+	it('por defecto es inset=leading', async () => {
 		await el.updateComplete;
 		expect(el.inset).toBe('leading');
 		expect(el.getAttribute('inset')).toBe('leading');
 	});
 
-	it('reflects all three M3 insets: leading / middle / none', async () => {
+	it('refleja las tres inserciones M3: leading / middle / none', async () => {
 		for (const inset of ['leading', 'middle', 'none'] as const) {
 			el.inset = inset;
 			await el.updateComplete;
@@ -28,13 +28,13 @@ describe('moni-divider (P5.1 — recreated)', () => {
 		}
 	});
 
-	it('renders an empty default slot for inline content', async () => {
+	it('renderiza un slot por defecto vacío para contenido en línea', async () => {
 		await el.updateComplete;
 		const slot = el.shadowRoot?.querySelector('slot');
 		expect(slot).toBeTruthy();
 	});
 
-	it('reflects the vertical attribute', async () => {
+	it('refleja el atributo vertical', async () => {
 		el.setAttribute('vertical', '');
 		await el.updateComplete;
 		expect(el.hasAttribute('vertical')).toBe(true);

package/src/components/moni-divider.ts

@@ -10,53 +10,53 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
- * Material Design 3 Divider component.
+ * Componente Material Design 3 Divider (Separador).
  *
- * A thin horizontal (or vertical) rule used to visually separate content
- * sections within lists, layouts, and cards.
+ * Una regla delgada horizontal (o vertical) utilizada para separar visualmente secciones
+ * de contenido dentro de listas, diseños y tarjetas.
  *
- * **M3 spec reference:** `m3-docs/components/divider/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/divider/specs.md`
  *
- * **M3 measurements:**
- * - Thickness: 1dp (`0.0625rem`).
- * - Color: `outline-variant` — subtle on all surface backgrounds.
- * - Inset variants align the line with list content:
- *   - `leading` — 16dp margin from the leading edge (aligns with icon text).
- *   - `middle`  — 16dp margin on both edges.
- *   - `none`    — full-bleed (no margin).
+ * **Medidas M3:**
+ * - Grosor: 1dp (`0.0625rem`).
+ * - Color: `outline-variant` — sutil en todos los fondos de superficie.
+ * - Las variantes insertadas (inset) alinean la línea con el contenido de la lista:
+ *   - `leading` — margen de 16dp desde el borde inicial (se alinea con el texto del icono).
+ *   - `middle`  — margen de 16dp en ambos bordes.
+ *   - `none`    — sangría completa (sin margen).
  *
- * **Vertical usage:**
- * While not yet exposed as an attribute, the `[vertical]` CSS attribute selector
- * is supported. Set `vertical` as an HTML attribute to render a 1dp-wide
- * vertical divider that stretches to match its flex container's cross-axis.
+ * **Uso vertical:**
+ * Aunque todavía no se expone como un atributo, el selector de atributos CSS `[vertical]`
+ * está soportado. Establezca `vertical` como un atributo HTML para renderizar un separador
+ * vertical de 1dp de ancho que se estira para coincidir con el eje transversal de su contenedor flex.
  *
  * @example
  * ```html
- * <!-- Full-bleed divider between sections -->
+ * <!-- Separador de sangría completa entre secciones -->
  * <moni-divider inset="none"></moni-divider>
  *
- * <!-- Leading-inset divider in a list (aligns with list item text) -->
+ * <!-- Separador de inserción inicial en una lista (se alinea con el texto del elemento de lista) -->
  * <moni-divider></moni-divider>
  *
- * <!-- Vertical divider inside a flex container -->
+ * <!-- Separador vertical dentro de un contenedor flex -->
  * <div style="display:flex; height: 3rem; align-items:center; gap: 1rem;">
- *   <span>Section A</span>
+ *   <span>Sección A</span>
  *   <moni-divider vertical></moni-divider>
- *   <span>Section B</span>
+ *   <span>Sección B</span>
  * </div>
  * ```
  */
 @customElement('moni-divider')
 export class MoniDivider extends MoniElement {
 	/**
-	 * Controls the horizontal margin on the divider line.
+	 * Controla el margen horizontal en la línea del separador.
 	 *
-	 * - `'leading'` (default) — 16dp margin from the leading (start) edge only.
-	 *   Use in lists to align the divider with the primary text of list items.
-	 * - `'middle'`  — 16dp margin on both the leading and trailing edges.
-	 *   Use to separate sections where full-bleed would be too visually heavy.
-	 * - `'none'`    — No margin; the line spans the full parent width.
-	 *   Use as a section separator or between cards.
+	 * - `'leading'` (por defecto) — Margen de 16dp solo desde el borde inicial (inicio).
+	 *   Usar en listas para alinear el separador con el texto principal de los elementos de la lista.
+	 * - `'middle'`  — Margen de 16dp tanto en el borde inicial como en el final.
+	 *   Usar para separar secciones donde una sangría completa sería visualmente demasiado pesada.
+	 * - `'none'`    — Sin margen; la línea abarca todo el ancho del padre.
+	 *   Usar como separador de secciones o entre tarjetas.
 	 *
 	 * @default 'leading'
 	 */
@@ -69,7 +69,7 @@ export class MoniDivider extends MoniElement {
 			:host {
 				display: block;
 				font-family: var(--font);
-				/* M3 spec: 1dp thick, on-surface-variant for subtle separation. */
+				/* Especificación M3: grosor de 1dp, on-surface-variant para una separación sutil. */
 				block-size: 0.0625rem;
 				min-inline-size: 0;
 				background-color: var(--outline-variant);
@@ -77,7 +77,7 @@ export class MoniDivider extends MoniElement {
 				margin: 0;
 			}
 
-			/* Inset variants. M3 spec: 16dp from the leading edge. */
+			/* Variantes de inserción. Especificación M3: 16dp desde el borde inicial. */
 			:host([inset='leading']) {
 				margin-inline-start: 1rem;
 				margin-inline-end: 0;
@@ -89,7 +89,7 @@ export class MoniDivider extends MoniElement {
 				margin-inline: 0;
 			}
 
-			/* Vertical divider (M3 spec also defines vertical usage). */
+			/* Separador vertical (la especificación M3 también define el uso vertical). */
 			:host([vertical]) {
 				inline-size: 0.0625rem;
 				block-size: auto;
@@ -99,6 +99,18 @@ export class MoniDivider extends MoniElement {
 		`
 	];
 
+	/**
+	 * Renderiza un paso a través de slot transparente.
+	 *
+	 * `moni-divider` es un componente impulsado puramente por CSS — la línea visual es
+	 * renderizada por el elemento `:host` en sí (a través de `background-color` y
+	 * `block-size: 0.0625rem`). No se necesitan elementos internos.
+	 *
+	 * El `<slot>` vacío se incluye para que los consumidores puedan insertar etiquetas de texto
+	 * o iconos entre secciones (ej. `<moni-divider>O</moni-divider>`).
+	 * El contenido renderizado en el slot no tiene estilo visual de este componente; el consumidor
+	 * debe aplicar estilo a los elementos del slot directamente.
+	 */
 	override render() {
 		return html`<slot></slot>`;
 	}

package/src/components/moni-expansion.ts

@@ -10,45 +10,45 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
- * Material Design 3 Expansion panel component.
+ * Componente Material Design 3 Expansion panel (Panel de expansión).
  *
- * A lightweight wrapper around the native HTML `<details>` and `<summary>`
- * elements, styled according to M3 surface and elevation guidelines.
- * Expansion panels contain creation flows and allow lightweight editing of an element.
+ * Un envoltorio ligero alrededor de los elementos HTML nativos `<details>` y `<summary>`,
+ * estilizado de acuerdo con las pautas de superficie y elevación de M3.
+ * Los paneles de expansión contienen flujos de creación y permiten la edición ligera de un elemento.
  *
- * **Visual architecture:**
- * The component renders a `<details>` element with a `<summary>` that acts
- * as the expandable header. The default slot content is placed inside the
- * `<details>` tag (but outside the `<summary>`), naturally hiding and showing
- * based on the native behavior. An M3 `expand_more` icon is added via a CSS
- * `::after` pseudo-element and rotates when the panel is open.
+ * **Arquitectura visual:**
+ * El componente renderiza un elemento `<details>` con un `<summary>` que actúa
+ * como el encabezado expandible. El contenido del slot por defecto se coloca dentro de la
+ * etiqueta `<details>` (pero fuera del `<summary>`), ocultándose y mostrándose naturalmente
+ * según el comportamiento nativo. Se añade un icono `expand_more` de M3 mediante un
+ * pseudo-elemento CSS `::after` que rota cuando el panel está abierto.
  *
- * **Usage:**
- * Set the `title` attribute for a simple text header, or use the `summary`
- * slot to project custom rich content (like icons or secondary text) into the
- * header area.
+ * **Uso:**
+ * Establezca el atributo `title` para un encabezado de texto simple, o use el slot `summary`
+ * para proyectar contenido enriquecido personalizado (como iconos o texto secundario) en el
+ * área del encabezado.
  *
  * @example
  * ```html
- * <!-- Simple text title -->
- * <moni-expansion title="Advanced Settings">
- *   <p>Enable developer mode features here.</p>
+ * <!-- Título de texto simple -->
+ * <moni-expansion title="Configuración Avanzada">
+ *   <p>Habilite las características del modo de desarrollador aquí.</p>
  * </moni-expansion>
  *
- * <!-- Rich summary content via slot -->
+ * <!-- Contenido de resumen enriquecido a través de slot -->
  * <moni-expansion open>
  *   <div slot="summary" style="display: flex; gap: 8px;">
  *     <moni-icon>person</moni-icon>
- *     <span>Personal Information</span>
+ *     <span>Información Personal</span>
  *   </div>
  *   <form>
- *     <moni-text-field label="Name"></moni-text-field>
+ *     <moni-text-field label="Nombre"></moni-text-field>
  *   </form>
  * </moni-expansion>
  * ```
  *
- * @slot default - The content of the expansion panel body.
- * @slot summary - Custom header content (overrides the `title` attribute).
+ * @slot default - El contenido del cuerpo del panel de expansión.
+ * @slot summary - Contenido personalizado del encabezado (sobrescribe el atributo `title`).
  */
 @customElement('moni-expansion')
 export class MoniExpansion extends MoniElement {
@@ -102,6 +102,16 @@ export class MoniExpansion extends MoniElement {
 		`
 	];
 
+	/**
+	 * Renderiza el panel de expansión utilizando el elemento nativo `<details>`.
+	 *
+	 * El atributo `open` en
+	 * `:host` impulsa la rotación de la flecha indicadora CSS (`::after` en `summary`).
+	 *
+	 * **Estructura de slots:**
+	 * - `[slot="summary"]` — la fila de encabezado siempre visible (título, iconos).
+	 * - Slot por defecto — la región de contenido colapsable.
+	 */
 	override render() {
 		return html`<details ?open=${this.open} part="expansion">
 			<summary part="summary">

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

@@ -15,7 +15,7 @@ describe('moni-fab-menu', () => {
 		el.remove();
 	});
 
-	it('renders a .fab-menu and a <moni-fab> trigger', async () => {
+	it('renderiza un .fab-menu y un <moni-fab> como activador', async () => {
 		await el.updateComplete;
 		const menu = el.shadowRoot?.querySelector('.fab-menu');
 		const trigger = el.shadowRoot?.querySelector('moni-fab');
@@ -23,7 +23,7 @@ describe('moni-fab-menu', () => {
 		expect(trigger).toBeTruthy();
 	});
 
-	it('passes icon, size, color, shape, position to the trigger', async () => {
+	it('pasa icon, size, color, shape, position al activador', async () => {
 		el.icon = 'menu';
 		el.size = 'large';
 		el.color = 'secondary';
@@ -36,7 +36,7 @@ describe('moni-fab-menu', () => {
 		expect(trigger?.getAttribute('shape')).toBe('circle');
 	});
 
-	it('reflects the open attribute', async () => {
+	it('refleja el atributo open', async () => {
 		el.open = true;
 		await el.updateComplete;
 		expect(el.hasAttribute('open')).toBe(true);
@@ -46,13 +46,13 @@ describe('moni-fab-menu', () => {
 		expect(el.hasAttribute('open')).toBe(false);
 	});
 
-	it('reflects the direction attribute', async () => {
+	it('refleja el atributo direction', async () => {
 		el.direction = 'down';
 		await el.updateComplete;
 		expect(el.getAttribute('direction')).toBe('down');
 	});
 
-	it('toggles open when the trigger is clicked', async () => {
+	it('cambia el estado open cuando se hace clic en el activador', async () => {
 		await el.updateComplete;
 		expect(el.open).toBe(false);
 
@@ -73,13 +73,13 @@ describe('moni-fab-menu', () => {
 		expect(el.open).toBe(false);
 	});
 
-	it('menu has role="menu" for screen reader semantics', async () => {
+	it('el menú tiene role="menu" para la semántica del lector de pantalla', async () => {
 		await el.updateComplete;
 		const menu = el.shadowRoot?.querySelector('.fab-menu');
 		expect(menu?.getAttribute('role')).toBe('menu');
 	});
 
-	it('Escape key closes an open menu', async () => {
+	it('la tecla Escape cierra un menú abierto', async () => {
 		el.open = true;
 		await el.updateComplete;
 		expect(el.open).toBe(true);
@@ -89,7 +89,7 @@ describe('moni-fab-menu', () => {
 		expect(el.open).toBe(false);
 	});
 
-	it('Escape on a closed menu is a no-op', async () => {
+	it('presionar Escape en un menú cerrado no hace nada', async () => {
 		await el.updateComplete;
 		expect(el.open).toBe(false);
 		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
@@ -97,17 +97,17 @@ describe('moni-fab-menu', () => {
 		expect(el.open).toBe(false);
 	});
 
-	it('click outside the menu closes it', async () => {
+	it('hacer clic fuera del menú lo cierra', async () => {
 		el.open = true;
 		await el.updateComplete;
 
-		// Dispatch a click on the document body (outside the menu).
+		// Despachar un clic en el body del documento (fuera del menú).
 		document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 		await el.updateComplete;
 		expect(el.open).toBe(false);
 	});
 
-	it('click inside the menu does not close it', async () => {
+	it('hacer clic dentro del menú no lo cierra', async () => {
 		el.open = true;
 		await el.updateComplete;
 		const menu = el.shadowRoot?.querySelector('.fab-menu') as HTMLElement;