ng-comps 1.0.0 → 1.0.2

package/src/app/components/chip/mf-chip.component.ts

@@ -31,7 +31,7 @@ export type MfChipColor = 'brand' | 'accent' | 'error' | 'neutral';
           <mat-icon matChipAvatar aria-hidden="true">{{ leadingIcon() }}</mat-icon>
         }
         {{ label() }}
-        <button matChipRemove [attr.aria-label]="'Eliminar ' + label()">
+        <button matChipRemove [attr.aria-label]="'Remove ' + label()">
           <mat-icon>cancel</mat-icon>
         </button>
       </mat-chip>

package/src/app/components/datepicker/mf-datepicker.component.spec.ts

@@ -41,19 +41,19 @@ describe('MfDatepickerComponent', () => {
   });
 
   it('should apply error class when error is provided', () => {
-    fixture.componentRef.setInput('error', 'Fecha requerida');
+    fixture.componentRef.setInput('error', 'Date required');
     expect(component.hostClasses()).toContain('mf-datepicker--error');
   });
 
   it('should render label when provided', () => {
-    fixture.componentRef.setInput('label', 'Fecha de inicio');
+    fixture.componentRef.setInput('label', 'Start date');
     fixture.detectChanges();
     const label = fixture.nativeElement.querySelector('mat-label');
-    expect(label?.textContent).toContain('Fecha de inicio');
+    expect(label?.textContent).toContain('Start date');
   });
 
   it('should render hint when provided', () => {
-    fixture.componentRef.setInput('hint', 'Selecciona una fecha');
+    fixture.componentRef.setInput('hint', 'Select a date');
     fixture.detectChanges();
     const hint = fixture.nativeElement.querySelector('mat-hint');
     expect(hint).toBeTruthy();

package/src/app/components/datepicker/mf-datepicker.component.ts

@@ -145,7 +145,7 @@ export class MfDatepickerComponent implements ControlValueAccessor {
   /** Ancho completo */
   readonly fullWidth = input(false);
   /** Etiqueta accesible del botón para abrir el calendario */
-  readonly toggleAriaLabel = input('Abrir calendario');
+  readonly toggleAriaLabel = input('Open calendar');
 
   readonly mfChange = output<Date | null>();
   readonly mfBlur = output<void>();

package/src/app/components/dialog/mf-dialog.component.ts

@@ -113,7 +113,7 @@ export class MfDialogComponent {
   /** Rol del diálogo */
   readonly role = input<'dialog' | 'alertdialog'>('dialog');
   /** Etiqueta accesible del botón de cierre */
-  readonly closeButtonLabel = input('Cerrar diálogo');
+  readonly closeButtonLabel = input('Close dialog');
 
   readonly mfClose = output<void>();
 

package/src/app/components/dialog/mf-dialog.service.spec.ts

@@ -29,7 +29,7 @@ describe('MfDialogService', () => {
     class DialogContentComponent {}
 
     service.open(DialogContentComponent, {
-      ariaLabel: 'Eliminar proyecto',
+      ariaLabel: 'Delete project',
     });
 
     expect(dialogSpy.open).toHaveBeenCalledWith(
@@ -38,7 +38,7 @@ describe('MfDialogService', () => {
         role: 'dialog',
         autoFocus: 'first-tabbable',
         restoreFocus: true,
-        ariaLabel: 'Eliminar proyecto',
+        ariaLabel: 'Delete project',
         panelClass: ['mf-dialog-panel'],
       }),
     );

package/src/app/components/menu/mf-menu.component.spec.ts

@@ -37,7 +37,7 @@ describe('MfMenuComponent', () => {
   });
 
   it('should have accessible trigger label', () => {
-    expect(component.triggerLabel()).toBe('Abrir menú');
+    expect(component.triggerLabel()).toBe('Open menu');
   });
 
   it('should emit item click', () => {

package/src/app/components/menu/mf-menu.component.ts

@@ -57,7 +57,7 @@ export class MfMenuComponent {
   /** Icono del trigger */
   readonly triggerIcon = input<string>('more_vert');
   /** Label accesible del trigger */
-  readonly triggerLabel = input<string>('Abrir menú');
+  readonly triggerLabel = input<string>('Open menu');
 
   readonly mfItemClick = output<string>();
 

package/src/app/components/progress-bar/mf-progress-bar.component.spec.ts

@@ -40,10 +40,10 @@ describe('MfProgressBarComponent', () => {
   });
 
   it('should render label when provided', () => {
-    fixture.componentRef.setInput('label', 'Cargando...');
+    fixture.componentRef.setInput('label', 'Loading...');
     fixture.detectChanges();
     const label = fixture.nativeElement.querySelector('.mf-progress-bar__label');
-    expect(label?.textContent).toContain('Cargando...');
+    expect(label?.textContent).toContain('Loading...');
   });
 
   it('should show percentage when showValue is true and mode is determinate', () => {

package/src/app/components/progress-spinner/mf-progress-spinner.component.spec.ts

@@ -40,10 +40,10 @@ describe('MfProgressSpinnerComponent', () => {
   });
 
   it('should render label when provided', () => {
-    fixture.componentRef.setInput('label', 'Procesando...');
+    fixture.componentRef.setInput('label', 'Processing...');
     fixture.detectChanges();
     const label = fixture.nativeElement.querySelector('.mf-progress-spinner__label');
-    expect(label?.textContent).toContain('Procesando...');
+    expect(label?.textContent).toContain('Processing...');
   });
 
   it('should not render label when not provided', () => {
@@ -53,7 +53,7 @@ describe('MfProgressSpinnerComponent', () => {
   });
 
   it('should add labeled class when label is provided', () => {
-    fixture.componentRef.setInput('label', 'Cargando');
+    fixture.componentRef.setInput('label', 'Loading');
     expect(component.wrapperClasses()).toContain('mf-progress-spinner__wrapper--labeled');
   });
 });

package/src/app/components/sidenav/mf-sidenav.component.ts

@@ -74,7 +74,7 @@ export interface MfSidenavNavItem {
                   <mat-icon class="mf-sidenav__item-icon" aria-hidden="true">{{ item.icon }}</mat-icon>
                   <span class="mf-sidenav__item-label">{{ item.label }}</span>
                   @if (item.badge && item.badge > 0) {
-                    <span class="mf-sidenav__item-badge" aria-label="{{ item.badge }} notificaciones">
+                    <span class="mf-sidenav__item-badge" aria-label="{{ item.badge }} notifications">
                       {{ item.badge > 99 ? '99+' : item.badge }}
                     </span>
                   }
@@ -112,7 +112,7 @@ export class MfSidenavComponent {
   /** Icono Material de la cabecera */
   readonly headerIcon = input<string | undefined>(undefined);
   /** Aria-label del elemento nav */
-  readonly navAriaLabel = input('Navegación principal');
+  readonly navAriaLabel = input('Primary navigation');
 
   readonly mfOpenedChange = output<boolean>();
   /** Emite el ítem de navegación pulsado */

package/src/app/components/table/mf-table.component.ts

@@ -84,7 +84,7 @@ export class MfTableComponent {
   /** Texto visible del botón de acción por fila */
   readonly rowActionLabel = input<string | undefined>(undefined);
   /** Cabecera visible de la columna de acción */
-  readonly rowActionHeader = input('Acciones');
+  readonly rowActionHeader = input('Actions');
   readonly rowActionAriaLabel = input<
     ((row: Record<string, unknown>) => string) | undefined
   >(undefined);

package/src/stories/About.mdx

@@ -1,72 +1,72 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="About" />
-
-# ng-comps: Guia rapida de uso
-
-[ng-comps](https://www.npmjs.com/package/ng-comps) es una libreria de componentes Angular con estilo propio sobre Angular Material.
-
-La librería fue creada por [Manuel Ferrer](https://manuelferrer.vercel.app/).
-
-<div style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '12px', display: 'flex', gap: '12px', alignItems: 'center', maxWidth: '560px' }}>
-	<div style={{ flex: '0 0 64px', height: '64px', background: '#f3f4f6', borderRadius: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, color: '#111827' }}>PE</div>
-	<div>
-		<a href="https://preguntas-entrevista.vercel.app/" target="_blank" rel="noreferrer" style={{ fontWeight: 600, color: '#111827', textDecoration: 'none' }}>preguntas-entrevista</a>
-		<div style={{ color: '#6b7280', fontSize: '0.9rem' }}>Proyecto de ejemplo que utiliza ng-comps.</div>
-	</div>
-</div>
-
-## 1) Instalacion
-
-```bash
-npm i ng-comps
-```
-
-## 2) Cargar estilos globales
-
-En el archivo global de estilos de tu app (por ejemplo `src/styles.css`), importa:
-
-```css
-@import 'ng-comps/theme/tokens.css';
-@import 'ng-comps/styles.css';
-```
-
-## 3) Usar componentes (Standalone)
-
-Importa solo los componentes que realmente uses para maximizar tree-shaking:
-
-```ts
-import { Component } from '@angular/core';
-import { MfButtonComponent, MfInputComponent } from 'ng-comps';
-
-@Component({
-	selector: 'app-example',
-	imports: [MfButtonComponent, MfInputComponent],
-	template: `
-		<mf-input label="Email" placeholder="you@company.com" />
-		<mf-button label="Guardar" variant="filled" />
-	`,
-})
-export class ExampleComponent {}
-```
-
-## 4) Requisitos del proyecto consumidor
-
-`ng-comps` usa `peerDependencies`, por lo que tu proyecto debe tener Angular y RxJS instalados.
-
-Recomendado:
-
-- Angular `^21`
-- RxJS `~7.8`
-
-## 5) Buenas practicas de integracion
-
-- Importa componentes puntualmente desde `ng-comps`.
-- Mantén tus estilos globales con los `tokens.css` de la libreria.
-- Usa Storybook como referencia visual y de API para cada componente.
-
-## Referencias utiles dentro de este repo
-
-- Tokens de diseño: `src/theme/tokens.css`
-- Tema Material: `src/theme/material-theme.scss`
-- Ejemplo base: `src/app/components/button/mf-button.component.ts`
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="About" />
+
+# ng-comps: Quick Start Guide
+
+[ng-comps](https://www.npmjs.com/package/ng-comps) is an Angular component library with a custom design layer built on top of Angular Material.
+
+The library was created by [Manuel Ferrer](https://manuelferrer.vercel.app/).
+
+<div style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '12px', display: 'flex', gap: '12px', alignItems: 'center', maxWidth: '560px' }}>
+	<div style={{ flex: '0 0 64px', height: '64px', background: '#f3f4f6', borderRadius: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, color: '#111827' }}>PE</div>
+	<div>
+		<a href="https://preguntas-entrevista.vercel.app/" target="_blank" rel="noreferrer" style={{ fontWeight: 600, color: '#111827', textDecoration: 'none' }}>preguntas-entrevista</a>
+		<div style={{ color: '#6b7280', fontSize: '0.9rem' }}>Sample project built with ng-comps.</div>
+	</div>
+</div>
+
+## 1) Install
+
+```bash
+npm i ng-comps
+```
+
+## 2) Load global styles
+
+In your app global stylesheet, for example `src/styles.css`, import:
+
+```css
+@import 'ng-comps/theme/tokens.css';
+@import 'ng-comps/styles.css';
+```
+
+## 3) Use components (Standalone)
+
+Import only the components you actually use to maximize tree-shaking:
+
+```ts
+import { Component } from '@angular/core';
+import { MfButtonComponent, MfInputComponent } from 'ng-comps';
+
+@Component({
+	selector: 'app-example',
+	imports: [MfButtonComponent, MfInputComponent],
+	template: `
+		<mf-input label="Email" placeholder="you@company.com" />
+		<mf-button label="Save" variant="filled" />
+	`,
+})
+export class ExampleComponent {}
+```
+
+## 4) Consumer project requirements
+
+`ng-comps` uses `peerDependencies`, so your project must have Angular and RxJS installed.
+
+Recommended:
+
+- Angular `^21`
+- RxJS `~7.8`
+
+## 5) Integration best practices
+
+- Import components directly from `ng-comps` as needed.
+- Keep your global styles aligned with the library `tokens.css`.
+- Use Storybook as the visual and API reference for each component.
+
+## Useful references in this repo
+
+- Design tokens: `src/theme/tokens.css`
+- Material theme: `src/theme/material-theme.scss`
+- Base example: `src/app/components/button/mf-button.component.ts`

package/src/stories/Welcome.mdx

@@ -1,27 +1,26 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Welcome" />
-
-# Bienvenido a MF Components
-
-
-Este Storybook muestra los componentes del proyecto implementados usando Angular Material bajo nuestra capa de estilo.
-
-- Tema centralizado: tokens y tema de Material.
-- Componentes disponibles: `MfButton` (producción).
-
-[Ver `MfButton`](?path=/story/components-mfbutton--filled)
-
----
-
-## Cómo ejecutar Storybook
-
-```bash
-# Build estático
-npm run build-storybook
-
-# Ejecutar Storybook en desarrollo (si está disponible)
-npx storybook dev -p 6006
-```
-
-Si necesitas que añada más secciones (Guías de diseño, Tokens, Roadmap), dímelo y las agregaré.
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Welcome" />
+
+# Welcome to MF Components
+
+This Storybook showcases the project components implemented with Angular Material under our custom styling layer.
+
+- Centralized theme: design tokens and Material theme.
+- Available components: `MfButton` (production ready).
+
+[View `MfButton`](?path=/story/components-mfbutton--filled)
+
+---
+
+## How to run Storybook
+
+```bash
+# Static build
+npm run build-storybook
+
+# Run Storybook in development (if available)
+npx storybook dev -p 6006
+```
+
+If you want me to add more sections such as Design Guides, Tokens, or a Roadmap, I can add them.

package/src/stories/mf-a11y-contracts.stories.ts

@@ -20,21 +20,21 @@ const FRAMEWORK_OPTIONS = [
 ];
 
 const COUNTRY_OPTIONS = [
-  { value: 'es', label: 'Espana' },
+  { value: 'es', label: 'Spain' },
   { value: 'mx', label: 'Mexico' },
   { value: 'ar', label: 'Argentina' },
   { value: 'co', label: 'Colombia' },
 ];
 
 const MENU_ITEMS: MfMenuItem[] = [
-  { value: 'edit', label: 'Editar', icon: 'edit' },
-  { value: 'duplicate', label: 'Duplicar', icon: 'content_copy' },
-  { value: 'archive', label: 'Archivar', icon: 'archive' },
+  { value: 'edit', label: 'Edit', icon: 'edit' },
+  { value: 'duplicate', label: 'Duplicate', icon: 'content_copy' },
+  { value: 'archive', label: 'Archive', icon: 'archive' },
 ];
 
 const TABLE_COLUMNS = [
-  { key: 'name', header: 'Nombre' },
-  { key: 'team', header: 'Equipo' },
+  { key: 'name', header: 'Name' },
+  { key: 'team', header: 'Team' },
 ];
 
 const TABLE_DATA = [
@@ -47,15 +47,15 @@ const TABLE_DATA = [
   imports: [MfDialogComponent, MfButtonComponent],
   template: `
     <mf-dialog
-      title="Eliminar proyecto"
-      message="Esta accion elimina el proyecto de forma permanente."
+      title="Delete project"
+      message="This action permanently deletes the project."
       role="alertdialog"
       [showClose]="false"
       [showActions]="true"
     >
       <div mfDialogActions>
-        <mf-button label="Cancelar" variant="outlined" size="sm" (mfClick)="close()" />
-        <mf-button label="Eliminar" variant="filled" size="sm" (mfClick)="close()" />
+        <mf-button label="Cancel" variant="outlined" size="sm" (mfClick)="close()" />
+        <mf-button label="Delete" variant="filled" size="sm" (mfClick)="close()" />
       </div>
     </mf-dialog>
   `,
@@ -75,7 +75,7 @@ class A11yDialogContentStoryComponent {
   imports: [MfButtonComponent],
   template: `
     <mf-button
-      label="Abrir dialogo de borrado"
+      label="Open delete dialog"
       variant="filled"
       (mfClick)="open()"
     />
@@ -107,7 +107,7 @@ class A11yDialogLauncherStoryComponent {
         (mfNavItemClick)="onNavItemClick($event)"
       >
         <div style="padding: 24px;">
-          <p style="margin: 0; font: inherit;">Seccion activa: {{ activeLabel() }}</p>
+          <p style="margin: 0; font: inherit;">Active section: {{ activeLabel() }}</p>
         </div>
       </mf-sidenav>
     </div>
@@ -117,14 +117,14 @@ class A11ySidenavContractStoryComponent {
   readonly activeId = signal('home');
 
   readonly items = signal<MfSidenavNavItem[]>([
-    { id: 'home', label: 'Inicio', icon: 'home', active: true },
+    { id: 'home', label: 'Home', icon: 'home', active: true },
     { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
-    { id: 'analytics', label: 'Analiticas', icon: 'bar_chart' },
-    { id: 'users', label: 'Usuarios', icon: 'group' },
+    { id: 'analytics', label: 'Analytics', icon: 'bar_chart' },
+    { id: 'users', label: 'Users', icon: 'group' },
   ]);
 
   readonly activeLabel = () =>
-    this.items().find((item) => item.id === this.activeId())?.label ?? 'Inicio';
+    this.items().find((item) => item.id === this.activeId())?.label ?? 'Home';
 
   onNavItemClick(item: MfSidenavNavItem): void {
     this.activeId.set(item.id);
@@ -161,10 +161,10 @@ export const ButtonCorrectUsage: Story = {
   render: () => ({
     template: `
       <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-        <mf-button label="Guardar cambios" variant="filled" />
+        <mf-button label="Save changes" variant="filled" />
         <mf-button
           [iconOnly]="true"
-          ariaLabel="Abrir filtros"
+          ariaLabel="Open filters"
           leadingIcon="filter_list"
           variant="outlined"
         />
@@ -179,14 +179,14 @@ export const ButtonIncorrectUsage: Story = {
   render: () => ({
     template: `
       <section style="max-width: 720px; border: 1px solid var(--mf-color-border); border-radius: 16px; padding: 20px; background: var(--mf-color-surface);">
-        <h2 style="margin: 0 0 12px; font-size: 1rem;">Anti-patrones</h2>
+        <h2 style="margin: 0 0 12px; font-size: 1rem;">Anti-patterns</h2>
         <ul style="margin: 0 0 16px; padding-left: 18px;">
-          <li>Icon-only button sin \`ariaLabel\`.</li>
-          <li>Usar un \`div\` clickable como boton.</li>
-          <li>Eliminar el focus outline sin reemplazo visible.</li>
+          <li>Icon-only button without \`ariaLabel\`.</li>
+          <li>Using a clickable \`div\` as a button.</li>
+          <li>Removing the focus outline without a visible replacement.</li>
         </ul>
         <pre style="margin: 0; padding: 16px; border-radius: 12px; background: #111827; color: #f9fafb; overflow: auto;"><code>&lt;mf-button [iconOnly]="true" leadingIcon="filter_list" /&gt;
-&lt;div (click)="save()"&gt;Guardar&lt;/div&gt;</code></pre>
+&lt;div (click)="save()"&gt;Save&lt;/div&gt;</code></pre>
       </section>
     `,
   }),
@@ -198,9 +198,9 @@ export const InputCorrectUsage: Story = {
     template: `
       <div style="max-width: 360px;">
         <mf-input
-          label="Correo de contacto"
-          hint="Usaremos este email para avisos importantes"
-          placeholder="nombre@empresa.com"
+          label="Contact email"
+          hint="We will use this email for important updates"
+          placeholder="name@company.com"
           [required]="true"
         />
       </div>
@@ -214,10 +214,10 @@ export const InputIncorrectUsage: Story = {
   render: () => ({
     template: `
       <section style="max-width: 720px; border: 1px solid var(--mf-color-border); border-radius: 16px; padding: 20px; background: var(--mf-color-surface);">
-        <h2 style="margin: 0 0 12px; font-size: 1rem;">Anti-patrones</h2>
+        <h2 style="margin: 0 0 12px; font-size: 1rem;">Anti-patterns</h2>
         <ul style="margin: 0 0 16px; padding-left: 18px;">
-          <li>Usar solo placeholder como nombre accesible.</li>
-          <li>No asociar errores o ayudas con el control.</li>
+          <li>Using only the placeholder as the accessible name.</li>
+          <li>Not wiring errors or helper text to the control.</li>
         </ul>
         <pre style="margin: 0; padding: 16px; border-radius: 12px; background: #111827; color: #f9fafb; overflow: auto;"><code>&lt;mf-input placeholder="Email" /&gt;</code></pre>
       </section>
@@ -243,7 +243,7 @@ export const DialogFocusContract: Story = {
 
     await userEvent.tab();
     const opener = canvas.getByRole('button', {
-      name: 'Abrir dialogo de borrado',
+      name: 'Open delete dialog',
     });
     await waitFor(() => expect(opener).toHaveFocus());
 
@@ -251,11 +251,11 @@ export const DialogFocusContract: Story = {
 
     await waitFor(() =>
       expect(
-        body.getByRole('alertdialog', { name: 'Eliminar proyecto' }),
+        body.getByRole('alertdialog', { name: 'Delete project' }),
       ).toBeTruthy(),
     );
 
-    const cancelButton = body.getByRole('button', { name: 'Cancelar' });
+    const cancelButton = body.getByRole('button', { name: 'Cancel' });
     await waitFor(() => expect(cancelButton).toHaveFocus());
 
     await userEvent.keyboard('{Enter}');
@@ -273,7 +273,7 @@ export const MenuKeyboardContract: Story = {
     props: {
       items: MENU_ITEMS,
     },
-    template: `<mf-menu [items]="items" triggerLabel="Abrir acciones" />`,
+    template: `<mf-menu [items]="items" triggerLabel="Open actions" />`,
     moduleMetadata: { imports: [MfMenuComponent] },
   }),
   play: async ({ canvasElement }) => {
@@ -282,13 +282,13 @@ export const MenuKeyboardContract: Story = {
     const body = within(doc.body);
 
     await userEvent.tab();
-    const trigger = canvas.getByRole('button', { name: 'Abrir acciones' });
+    const trigger = canvas.getByRole('button', { name: 'Open actions' });
     await waitFor(() => expect(trigger).toHaveFocus());
 
     await userEvent.keyboard('{Enter}');
 
     await waitFor(() => expect(body.getByRole('menu')).toBeTruthy());
-    expect(body.getByRole('menuitem', { name: 'Editar' })).toBeTruthy();
+    expect(body.getByRole('menuitem', { name: 'Edit' })).toBeTruthy();
 
     await userEvent.keyboard('{Escape}');
 
@@ -348,8 +348,8 @@ export const AutocompleteKeyboardContract: Story = {
       <div style="max-width: 360px;">
         <mf-autocomplete
           [options]="options"
-          label="Pais"
-          placeholder="Escribe un pais"
+          label="Country"
+          placeholder="Type a country"
         />
       </div>
     `,
@@ -361,13 +361,13 @@ export const AutocompleteKeyboardContract: Story = {
     const body = within(doc.body);
 
     await userEvent.tab();
-    const input = canvas.getByRole('textbox', { name: 'Pais' });
+    const input = canvas.getByRole('textbox', { name: 'Country' });
     await waitFor(() => expect(input).toHaveFocus());
 
-    await userEvent.keyboard('es');
+    await userEvent.keyboard('sp');
 
     await waitFor(() => expect(body.getByRole('listbox')).toBeTruthy());
-    expect(body.getByText('Espana')).toBeTruthy();
+    expect(body.getByText('Spain')).toBeTruthy();
 
     await userEvent.keyboard('{Escape}');
     await waitFor(() =>
@@ -381,7 +381,7 @@ export const DatepickerKeyboardContract: Story = {
   render: () => ({
     template: `
       <div style="max-width: 360px;">
-        <mf-datepicker label="Fecha de entrega" />
+        <mf-datepicker label="Delivery date" />
       </div>
     `,
     moduleMetadata: { imports: [MfDatepickerComponent] },
@@ -391,11 +391,11 @@ export const DatepickerKeyboardContract: Story = {
     const doc = canvasElement.ownerDocument;
 
     await userEvent.tab();
-    canvas.getByRole('textbox', { name: 'Fecha de entrega' });
+    canvas.getByRole('textbox', { name: 'Delivery date' });
 
     await userEvent.tab();
     const toggleButton = canvas.getByRole('button', {
-      name: 'Abrir calendario',
+      name: 'Open calendar',
     });
     await waitFor(() => expect(toggleButton).toHaveFocus());
 
@@ -420,13 +420,13 @@ export const TableExplicitActionContract: Story = {
       columns: TABLE_COLUMNS,
       data: TABLE_DATA,
       rowActionAriaLabel: (row: Record<string, unknown>) =>
-        `Ver detalle de ${row['name']}`,
+        `View details for ${row['name']}`,
     },
     template: `
       <mf-table
         [columns]="columns"
         [data]="data"
-        rowActionLabel="Ver detalle"
+        rowActionLabel="View details"
         [rowActionAriaLabel]="rowActionAriaLabel"
       />
     `,
@@ -435,7 +435,7 @@ export const TableExplicitActionContract: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const detailButtons = canvas.getAllByRole('button', {
-      name: /Ver detalle de/,
+      name: /View details for/,
     });
 
     expect(detailButtons).toHaveLength(2);
@@ -455,18 +455,18 @@ export const SidenavKeyboardContract: Story = {
     const canvas = within(canvasElement);
 
     await userEvent.tab();
-    const home = canvas.getByRole('button', { name: 'Inicio' });
+    const home = canvas.getByRole('button', { name: 'Home' });
     await waitFor(() => expect(home).toHaveFocus());
 
     await userEvent.tab();
     await userEvent.tab();
-    const analytics = canvas.getByRole('button', { name: 'Analiticas' });
+    const analytics = canvas.getByRole('button', { name: 'Analytics' });
     await waitFor(() => expect(analytics).toHaveFocus());
 
     await userEvent.keyboard('{Enter}');
 
     await waitFor(() =>
-      expect(canvas.getByText('Seccion activa: Analiticas')).toBeTruthy(),
+      expect(canvas.getByText('Active section: Analytics')).toBeTruthy(),
     );
   },
 };