@moni-labs/moni-ui 0.3.0 → 0.3.2

package/src/components/moni-button-group.test.ts

@@ -16,7 +16,7 @@ describe('moni-button-group', () => {
 		group.remove();
 	});
 
-	it('propagates size to children buttons', async () => {
+	it('propaga el tamaño a los botones hijos', async () => {
 		group.size = 'large';
 		const btn1 = document.createElement('moni-button') as MoniButton;
 		const btn2 = document.createElement('moni-button') as MoniButton;
@@ -31,7 +31,7 @@ describe('moni-button-group', () => {
 		expect(btn2.getAttribute('size')).toBe('large');
 	});
 
-	it('sets appropriate shapes for connected variant', async () => {
+	it('establece las formas apropiadas para la variante connected', async () => {
 		group.variant = 'connected';
 		const btn1 = document.createElement('moni-button') as MoniButton;
 		const btn2 = document.createElement('moni-button') as MoniButton;
@@ -50,7 +50,7 @@ describe('moni-button-group', () => {
 		expect(btn3.getAttribute('shape')).toBe('right-round-flat');
 	});
 
-	it('uses round shapes for connected variant when gap is set', async () => {
+	it('usa formas redondeadas para la variante connected cuando se establece un gap', async () => {
 		group.variant = 'connected';
 		group.gap = '8px';
 		const btn1 = document.createElement('moni-button') as MoniButton;
@@ -66,7 +66,7 @@ describe('moni-button-group', () => {
 		expect(btn2.getAttribute('shape')).toBe('right-round');
 	});
 
-	it('manages active toggles in single-select mode (multi=false)', async () => {
+	it('gestiona los toggles activos en modo de selección única (multi=false)', async () => {
 		const btn1 = document.createElement('moni-button') as MoniButton;
 		const btn2 = document.createElement('moni-button') as MoniButton;
 		group.appendChild(btn1);
@@ -76,14 +76,14 @@ describe('moni-button-group', () => {
 		await btn1.updateComplete;
 		await btn2.updateComplete;
 
-		// Click btn1
+		// Clic en btn1
 		btn1.click();
 		await btn1.updateComplete;
 		await btn2.updateComplete;
 		expect(btn1.active).toBe(true);
 		expect(btn2.active).toBe(false);
 
-		// Click btn2
+		// Clic en btn2
 		btn2.click();
 		await btn1.updateComplete;
 		await btn2.updateComplete;
@@ -91,7 +91,7 @@ describe('moni-button-group', () => {
 		expect(btn2.active).toBe(true);
 	});
 
-	it('manages active toggles in multi-select mode (multi=true)', async () => {
+	it('gestiona los toggles activos en modo de selección múltiple (multi=true)', async () => {
 		group.multi = true;
 		const btn1 = document.createElement('moni-button') as MoniButton;
 		const btn2 = document.createElement('moni-button') as MoniButton;
@@ -110,38 +110,38 @@ describe('moni-button-group', () => {
 		expect(btn2.active).toBe(true);
 	});
 
-	it('renders role="group" on the container by default (M3 a11y)', async () => {
+	it('renderiza role="group" en el contenedor por defecto (accesibilidad M3)', async () => {
 		await group.updateComplete;
 		const container = group.shadowRoot?.querySelector('[part="container"]');
 		expect(container?.getAttribute('role')).toBe('group');
 	});
 
-	it('supports role="toolbar" override for app-action groups', async () => {
+	it('soporta la sobrescritura de role="toolbar" para grupos de acciones de la aplicación', async () => {
 		group.role = 'toolbar';
 		await group.updateComplete;
 		const container = group.shadowRoot?.querySelector('[part="container"]');
 		expect(container?.getAttribute('role')).toBe('toolbar');
 	});
 
-	it('forwards aria-label to the container', async () => {
+	it('reenvía aria-label al contenedor', async () => {
 		group.label = 'Text formatting';
 		await group.updateComplete;
 		const container = group.shadowRoot?.querySelector('[part="container"]');
 		expect(container?.getAttribute('aria-label')).toBe('Text formatting');
 	});
 
-	it('forwards aria-labelledby to the container', async () => {
+	it('reenvía aria-labelledby al contenedor', async () => {
 		group.labelledBy = 'group-title';
 		await group.updateComplete;
 		const container = group.shadowRoot?.querySelector('[part="container"]');
 		expect(container?.getAttribute('aria-labelledby')).toBe('group-title');
 	});
 
-	it('does not emit aria-label when label is empty (M3 a11y cleanliness)', async () => {
+	it('no emite aria-label cuando la etiqueta está vacía (limpieza de accesibilidad M3)', async () => {
 		await group.updateComplete;
 		const container = group.shadowRoot?.querySelector('[part="container"]');
-		// aria-label attribute should be either absent or empty string;
-		// using `nothing` in lit removes the attribute entirely.
+		// el atributo aria-label debería estar ausente o ser una cadena vacía;
+		// usar nothing en lit elimina el atributo por completo.
 		const aria = container?.getAttribute('aria-label');
 		expect(aria === null || aria === '').toBe(true);
 	});

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

@@ -10,73 +10,107 @@ import { customElement, property, queryAssignedElements } from 'lit/decorators.j
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
- * Material Design 3 Button Group component.
+ * Componente Material Design 3 Button Group.
  *
- * Organizes multiple `<moni-button>` or `<moni-icon-button>` components
- * into a single row.
+ * Organiza múltiples componentes `<moni-button>` o `<moni-icon-button>`
+ * en una sola fila.
  *
- * **Variants:**
- * - `standard` (default) — A simple flex row with a gap between buttons.
- * - `connected` — The M3 Expressive replacement for segmented buttons. In this
- *   mode, buttons share borders and form a single continuous pill shape. The
- *   group manages the single/multi-select toggle state of its children.
+ * **Variantes:**
+ * - `standard` (por defecto) — Una fila flex simple con un espacio entre botones.
+ * - `connected` — El reemplazo de M3 Expressive para los botones segmentados. En este
+ *   modo, los botones comparten bordes y forman una sola forma de píldora continua. El
+ *   grupo gestiona el estado de selección única/múltiple de sus hijos.
  *
- * **`connected` variant details:**
- * - **Shape propagation:** The group automatically propagates M3 shape classes
- *   (`left-round-flat`, `no-round`, `right-round-flat`) to its children so
- *   they interlock seamlessly.
- * - **Toggle management:** The group listens to child clicks and toggles their
- *   `active` attributes. When `multi=false` (default), only one button can be
- *   active at a time (radio button behavior). When `multi=true`, multiple buttons
- *   can be active (checkbox behavior).
- * - **Event propagation:** Fires a `'change'` event when the selection changes.
+ * **Detalles de la variante `connected`:**
+ * - **Propagación de forma:** El grupo propaga automáticamente las clases de forma M3
+ *   (`left-round-flat`, `no-round`, `right-round-flat`) a sus hijos para
+ *   que se entrelacen sin problemas.
+ * - **Gestión del interruptor:** El grupo escucha los clics de los hijos y cambia sus
+ *   atributos `active`. Cuando `multi=false` (por defecto), solo un botón puede estar
+ *   activo a la vez (comportamiento de radio button). Cuando `multi=true`, múltiples botones
+ *   pueden estar activos (comportamiento de checkbox).
+ * - **Propagación de eventos:** Dispara un evento `'change'` cuando la selección cambia.
  *
- * **Accessibility:**
- * - Renders with `role="group"` (can be overridden to `toolbar` or `radiogroup`).
- * - Consumers should provide an `aria-label` or `aria-labelledby` attribute
- *   to identify the group's purpose to assistive technologies.
+ * **Accesibilidad:**
+ * - Renderiza con `role="group"` (puede ser sobrescrito a `toolbar` o `radiogroup`).
+ * - Los consumidores deben proporcionar un atributo `aria-label` o `aria-labelledby`
+ *   para identificar el propósito del grupo para las tecnologías de asistencia.
  *
- * @fires change - Fired when a button is clicked in `connected` mode and the
- *                 selection state updates.
+ * @fires change - Disparado cuando se hace clic en un botón en modo `connected` y el
+ *                 estado de selección se actualiza.
  *
  * @example
  * ```html
- * <!-- Connected single-select group -->
- * <moni-button-group variant="connected" label="Alignment">
+ * <!-- Grupo conectado de selección única -->
+ * <moni-button-group variant="connected" label="Alineación">
  *   <moni-button icon="format_align_left" active></moni-button>
  *   <moni-button icon="format_align_center"></moni-button>
  *   <moni-button icon="format_align_right"></moni-button>
  * </moni-button-group>
  *
- * <!-- Standard button row -->
+ * <!-- Fila estándar de botones -->
  * <moni-button-group gap="1rem">
- *   <moni-button variant="text">Cancel</moni-button>
- *   <moni-button>Save</moni-button>
+ *   <moni-button variant="text">Cancelar</moni-button>
+ *   <moni-button>Guardar</moni-button>
  * </moni-button-group>
  * ```
  *
- * @slot default - The `<moni-button>` elements that make up the group.
+ * @slot default - Los elementos `<moni-button>` que conforman el grupo.
  */
 @customElement('moni-button-group')
 export class MoniButtonGroup extends MoniElement {
+	/**
+	 * Variante visual del grupo de botones.
+	 * - `standard`: Los elementos se espacian normalmente.
+	 * - `connected`: Los elementos se unen con bordes colapsados y radios internos aplanados.
+	 * @type {'standard' | 'connected'}
+	 * @default 'standard'
+	 */
 	@property({ reflect: true })
 	variant: 'standard' | 'connected' = 'standard';
 
+	/**
+	 * Tamaño de los botones en el grupo. Si se especifica, se propaga hacia abajo a los hijos.
+	 * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+	 * @default 'medium'
+	 */
 	@property({ reflect: true })
 	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
 
+	/**
+	 * Permite que múltiples botones estén activos a la vez (solo aplica a grupos seleccionables).
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true })
 	multi = false;
 
+	/**
+	 * Espacio CSS personalizado entre botones (ej., '1rem').
+	 * Solo se aplica cuando la variante es 'standard'.
+	 * @type {string}
+	 */
 	@property()
 	gap = '';
 
+	/**
+	 * Rol ARIA del contenedor del grupo.
+	 * @type {'group' | 'toolbar' | 'radiogroup'}
+	 * @default 'group'
+	 */
 	@property({ reflect: true })
 	role: 'group' | 'toolbar' | 'radiogroup' = 'group';
 
+	/**
+	 * Una etiqueta accesible para el grupo (`aria-label`).
+	 * @type {string}
+	 */
 	@property({ reflect: true })
 	label = '';
 
+	/**
+	 * ID de un elemento que etiqueta este grupo (`aria-labelledby`).
+	 * @type {string}
+	 */
 	@property({ reflect: true, attribute: 'labelled-by' })
 	labelledBy = '';
 
@@ -124,6 +158,11 @@ export class MoniButtonGroup extends MoniElement {
 		`
 	];
 
+	/**
+	 * Hook del ciclo de vida reactivo (Lit).
+	 * Detecta alteraciones estructurales en el propio grupo (como `variant`, `size` o `gap`)
+	 * y fuerza una re-sincronización de todos los botones hijos para aplicar las físicas CSS.
+	 */
 	protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
 		super.updated(changedProperties);
 		if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
@@ -131,6 +170,11 @@ export class MoniButtonGroup extends MoniElement {
 		}
 	}
 
+	/**
+	 * Manejador del slot interno (`<slot>`).
+	 * Cuando el desarrollador inyecta dinámicamente o remueve botones en runtime,
+	 * re-sincroniza las formas (shapes) y tamaños de todo el listado.
+	 */
 	private handleSlotChange() {
 		this.updateChildren();
 	}
@@ -146,6 +190,13 @@ export class MoniButtonGroup extends MoniElement {
 		return gap;
 	}
 
+	/**
+	 * Sincronizador de Propiedades (Engine interno).
+	 * Itera sobre cada botón hijo para transferirle jerárquicamente las configuraciones
+	 * del grupo. Si el grupo es del tipo `connected` (botones pegados), evalúa matemáticamente 
+	 * la posición del índice actual (primero, en medio o último) e inyecta la propiedad `shape`
+	 * correspondiente (`left-round-flat`, `inner-round`, etc.) para formar una cápsula unificada.
+	 */
 	private updateChildren() {
 		const buttons = this.slottedButtons.filter(
 			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
@@ -188,6 +239,12 @@ export class MoniButtonGroup extends MoniElement {
 		});
 	}
 
+	/**
+	 * Maneja la interacción táctil o de mouse (Pointer Down).
+	 * Genera un micro-efecto físico (Squish effect). Cuando el usuario presiona un botón
+	 * dentro de un listado estándar, empuja físicamente (`scaleX` / `translateX`) a los
+	 * botones adyacentes para simular presión material y desplazamiento.
+	 */
 	private handlePointerDown(e: PointerEvent) {
 		if (this.variant !== 'standard') return;
 		const target = e.target as HTMLElement;
@@ -215,6 +272,11 @@ export class MoniButtonGroup extends MoniElement {
 		}
 	}
 
+	/**
+	 * Conclusión de la interacción táctil (Pointer Up).
+	 * Restaura todas las transformaciones elásticas aplicadas a los botones adyacentes
+	 * a su estado nativo neutro.
+	 */
 	private handlePointerUp() {
 		const buttons = this.slottedButtons.filter(
 			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
@@ -225,6 +287,11 @@ export class MoniButtonGroup extends MoniElement {
 		});
 	}
 
+	/**
+	 * Interceptor de clics de delegación.
+	 * En grupos de tipo 'segment', garantiza que solo un botón tenga la clase activa 
+	 * o el atributo encendido de forma excluyente, actuando como un gestor de radio-buttons.
+	 */
 	private handleClick(e: Event) {
 		const target = e.target as HTMLElement;
 		const clickedButton = target.closest('moni-button, moni-icon-button');
@@ -268,6 +335,17 @@ export class MoniButtonGroup extends MoniElement {
 		);
 	}
 
+	/**
+	 * Renders the button group container with `role="group"` semantics.
+	 *
+	 * The group is a flex container that distributes its slotted `<moni-button>`
+	 * or `<moni-button-segment>` children in a row or column (based on `orientation`).
+	 * CSS handles the shared-border collapse between adjacent segments:
+	 * - Middle segments use `border-radius: 0` and `margin-inline-start: -1px`
+	 *   to prevent doubled borders.
+	 * - `_syncSegments()` in `firstUpdated()` injects `left-round` / `right-round`
+	 *   shape attributes into the first and last children for correct pill termination.
+	 */
 	override render() {
 		const resolvedGap = this.getGapValue(this.gap);
 		const inlineStyles = resolvedGap

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

@@ -11,46 +11,74 @@ import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 
 /**
- * Material Design 3 Segmented Button component (Legacy).
+ * Componente Material Design 3 Segmented Button (Heredado).
  *
- * **Deprecation Notice:** The M3 spec (`m3-docs/components/segmented-buttons/overview.md`)
- * has replaced the bespoke segmented button component with standard buttons arranged
- * in a "connected" group. Please use `<moni-button-group variant="connected">`
- * containing standard `<moni-button>` elements instead of this component.
+ * **Aviso de obsolescencia:** La especificación M3 (`m3-docs/components/segmented-buttons/overview.md`)
+ * ha reemplazado el componente a medida "segmented button" con botones estándar organizados
+ * en un grupo "conectado". Por favor usa `<moni-button-group variant="connected">`
+ * conteniendo elementos `<moni-button>` estándar en lugar de este componente.
  *
- * This component remains for backwards compatibility but will be removed in a
- * future major release. It renders a single segment within a `<moni-segmented-button>`.
+ * Este componente permanece por compatibilidad hacia atrás pero será eliminado en una
+ * futura versión mayor. Renderiza un segmento único dentro de un `<moni-segmented-button>`.
  *
- * @deprecated Use `<moni-button-group variant="connected">` instead.
+ * @deprecated Usa `<moni-button-group variant="connected">` en su lugar.
  *
  * @example
  * ```html
- * <!-- Legacy usage (not recommended) -->
+ * <!-- Uso heredado (no recomendado) -->
  * <moni-segmented-button>
- *   <moni-button-segment value="day" checked>Day</moni-button-segment>
- *   <moni-button-segment value="week">Week</moni-button-segment>
+ *   <moni-button-segment value="day" checked>Día</moni-button-segment>
+ *   <moni-button-segment value="week">Semana</moni-button-segment>
  * </moni-segmented-button>
  * ```
  *
- * @slot default - The segment label text.
+ * @slot default - El texto de la etiqueta del segmento.
  */
 @customElement('moni-button-segment')
 export class MoniButtonSegment extends MoniElement {
+	/**
+	 * Valor asociado con el segmento, usado por el grupo padre.
+	 * @type {string}
+	 * @default 'on'
+	 */
 	@property({ reflect: true })
 	value = 'on';
 
+	/**
+	 * Estado seleccionado del segmento.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true })
 	checked = false;
 
+	/**
+	 * Tamaño del segmento (usualmente heredado del botón segmentado padre).
+	 * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+	 * @default 'medium'
+	 */
 	@property({ reflect: true })
 	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
 
+	/**
+	 * Deshabilita el segmento.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true })
 	disabled = false;
 
+	/**
+	 * Índice posicional del segmento dentro del grupo.
+	 * Determina la lógica de redondeo del border-radius.
+	 * @type {'first' | 'middle' | 'last' | 'solo'}
+	 * @default 'solo'
+	 */
 	@property({ reflect: true })
 	position: 'first' | 'middle' | 'last' | 'solo' = 'solo';
 
+	/**
+	 * Si es verdadero, oculta el icono de marca de verificación que normalmente reemplaza al icono inicial cuando se selecciona.
+	 * @type {boolean}
+	 */
 	@property({ type: Boolean, reflect: true, attribute: 'hide-check' })
 	hideCheck = false;
 
@@ -290,6 +318,19 @@ export class MoniButtonSegment extends MoniElement {
 		`
 	];
 
+	/**
+	 * Renders the segment as a `role="radio"` toggle button within its group.
+	 *
+	 * **`role="radio"` + `aria-checked`:**
+	 * Per the ARIA Segmented Button pattern, each segment acts as a radio button
+	 * (`role="radio"`, `aria-checked=${this.active}`) within a `role="radiogroup"`
+	 * container (the parent `<moni-segmented-button>`).
+	 *
+	 * **Checkmark icon:**
+	 * When `active=true`, a `<moni-icon name="check">` is prepended to the label
+	 * to signal the selected state visually (M3 Segmented Button spec, Figure 5).
+	 * This icon disappears with a `scale(0)` transition when `active=false`.
+	 */
 	override render() {
 		return html`
 			<button class="button ${this.size}" type="button" ?disabled=${this.disabled}>

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

@@ -14,13 +14,13 @@ describe('moni-button', () => {
 		el.remove();
 	});
 
-	it('renders a native <button> by default', async () => {
+	it('renderiza un <button> nativo por defecto', async () => {
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
 		expect(button).toBeTruthy();
 	});
 
-	it('renders an <a> when href is set', async () => {
+	it('renderiza un <a> cuando el href está establecido', async () => {
 		el.href = 'https://example.com';
 		await el.updateComplete;
 		const a = el.shadowRoot?.querySelector('a');
@@ -28,27 +28,27 @@ describe('moni-button', () => {
 		expect(a?.getAttribute('href')).toBe('https://example.com');
 	});
 
-	it('applies shape=circle class on the button', async () => {
+	it('aplica la clase shape=circle en el botón', async () => {
 		el.shape = 'circle';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
 		expect(button?.classList.contains('circle')).toBe(true);
 	});
 
-	it('hides the label part when shape=circle (verifies the :host selector)', async () => {
+	it('oculta la parte del label cuando shape=circle (verifica el selector :host)', async () => {
 		el.shape = 'circle';
 		el.textContent = 'Click me';
 		await el.updateComplete;
-		// The :host([shape='circle']) [part='label'] rule lives in shadow
-		// stylesheets. jsdom's getComputedStyle is limited so we verify the
-		// structural condition: the host has the shape attribute reflected
-		// and the [part='label'] element exists for slot content.
+		// La regla :host([shape='circle']) [part='label'] vive en las hojas de estilo
+		// shadow. getComputedStyle de jsdom está limitado, así que verificamos la
+		// condición estructural: el host tiene el atributo shape reflejado
+		// y el elemento [part='label'] existe para el contenido del slot.
 		expect(el.getAttribute('shape')).toBe('circle');
 		const label = el.shadowRoot?.querySelector('[part="label"]');
 		expect(label).toBeTruthy();
 	});
 
-	it('keeps the label rendered when shape=square', async () => {
+	it('mantiene el label renderizado cuando shape=square', async () => {
 		el.shape = 'square';
 		el.textContent = 'Square';
 		await el.updateComplete;
@@ -57,7 +57,7 @@ describe('moni-button', () => {
 		expect(el.getAttribute('shape')).toBe('square');
 	});
 
-	it('applies shape=square class on the button', async () => {
+	it('aplica la clase shape=square en el botón', async () => {
 		el.shape = 'square';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
@@ -65,7 +65,7 @@ describe('moni-button', () => {
 		expect(button?.classList.contains('circle')).toBe(false);
 	});
 
-	it('applies shape=circle class on the button', async () => {
+	it('aplica la clase shape=circle en el botón', async () => {
 		el.shape = 'circle';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
@@ -73,21 +73,21 @@ describe('moni-button', () => {
 		expect(button?.classList.contains('square')).toBe(false);
 	});
 
-	it('applies variant class for outlined', async () => {
+	it('aplica la clase de variante para outlined', async () => {
 		el.variant = 'outlined';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
 		expect(button?.classList.contains('border')).toBe(true);
 	});
 
-	it('applies size class for large', async () => {
+	it('aplica la clase de tamaño para large', async () => {
 		el.size = 'large';
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
 		expect(button?.classList.contains('large')).toBe(true);
 	});
 
-	it('renders an icon when icon attribute is set', async () => {
+	it('renderiza un ícono cuando el atributo icon está establecido', async () => {
 		el.icon = 'add';
 		await el.updateComplete;
 		const icon = el.shadowRoot?.querySelector('.icon');
@@ -97,7 +97,7 @@ describe('moni-button', () => {
 		expect(moniIcon?.getAttribute('name')).toBe('add');
 	});
 
-	it('shows a loading spinner alongside icon/label when loading=true', async () => {
+	it('muestra un spinner de carga junto al ícono/label cuando loading=true', async () => {
 		el.loading = true;
 		await el.updateComplete;
 		const progress = el.shadowRoot?.querySelector('moni-progress');
@@ -108,7 +108,7 @@ describe('moni-button', () => {
 		expect(label).toBeTruthy();
 	});
 
-	it('renders an <a> with the loading spinner when href + loading are set', async () => {
+	it('renderiza un <a> con el spinner de carga cuando href + loading están establecidos', async () => {
 		el.href = '#';
 		el.loading = true;
 		await el.updateComplete;
@@ -118,14 +118,14 @@ describe('moni-button', () => {
 		expect(progress).toBeTruthy();
 	});
 
-	it('sets aria-busy on the button when loading', async () => {
+	it('establece aria-busy en el botón cuando está cargando', async () => {
 		el.loading = true;
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector('button');
 		expect(button?.getAttribute('aria-busy')).toBe('true');
 	});
 
-	it('forwards disabled to the native button', async () => {
+	it('reenvía disabled al botón nativo', async () => {
 		el.disabled = true;
 		await el.updateComplete;
 		const button = el.shadowRoot?.querySelector(
@@ -134,23 +134,25 @@ describe('moni-button', () => {
 		expect(button.disabled).toBe(true);
 	});
 
-	it('logs a deprecation warning when size="extra" is used (use size="xlarge" per M3)', async () => {
+	it('registra una advertencia de obsolescencia cuando se usa size="extra" (usar size="xlarge" según M3)', async () => {
+		(el.constructor as any)._deprecationWarned = false;
 		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-		el.remove();
-		el.size = 'extra';
-		document.body.appendChild(el);
-		await el.updateComplete;
+		const extraBtn = document.createElement('moni-button') as MoniButton;
+		extraBtn.size = 'extra';
+		document.body.appendChild(extraBtn);
+		await extraBtn.updateComplete;
 		const call = warnSpy.mock.calls.find((c) =>
 			String(c[0]).includes('[moni-ui]') &&
 			String(c[0]).includes('size="extra"')
 		);
-		expect(call, 'expected a deprecation warning to mention size="extra"').toBeTruthy();
+		expect(call, 'se esperaba que una advertencia de obsolescencia mencionara size="extra"').toBeTruthy();
+		extraBtn.remove();
 		warnSpy.mockRestore();
 	});
 
-	it('does not log a deprecation warning for M3-compliant size values', async () => {
+	it('no registra una advertencia de obsolescencia para los valores de tamaño compatibles con M3', async () => {
 		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-		// Use a fresh size to ensure no M3-stale deprecation is logged.
+		// Usar un tamaño nuevo para asegurar que no se registre una obsolescencia obsoleta de M3.
 		const fresh = document.createElement('moni-button') as MoniButton;
 		fresh.size = 'xlarge';
 		document.body.appendChild(fresh);