ng-comps 0.2.0 → 1.0.0

package/src/stories/mf-sidenav.stories.ts

@@ -0,0 +1,334 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Component, signal } from '@angular/core';
+import { MfSidenavComponent, MfSidenavNavItem } from '../app/components/sidenav';
+
+const NAV_ITEMS: MfSidenavNavItem[] = [
+  { id: 'home',       icon: 'home',          label: 'Inicio',         active: true },
+  { id: 'dashboard',  icon: 'dashboard',     label: 'Dashboard' },
+  { id: 'analytics',  icon: 'bar_chart',     label: 'Analíticas',     badge: 3 },
+  { id: 'users',      icon: 'group',         label: 'Usuarios' },
+  { id: 'messages',   icon: 'mail',          label: 'Mensajes',       badge: 12 },
+  { id: 'settings',   icon: 'settings',      label: 'Configuración' },
+  { id: 'archived',   icon: 'archive',       label: 'Archivados',     disabled: true },
+];
+
+const meta: Meta<MfSidenavComponent> = {
+  title: 'Organisms/MfSidenav',
+  component: MfSidenavComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+**MfSidenav** es el panel lateral de la librería ng-comps.
+Envuelve Angular Material \`mat-sidenav-container\` con estilo propio: iconos Material,
+estados activo/deshabilitado, badges de notificación y cabecera personalizable.
+
+**Dos formas de uso:**
+
+1. **Navitems declarativos** — Proporciona \`navItems\`, \`headerTitle\` y \`headerIcon\`.
+2. **Content projection** — Proyecta \`[mfSidenavContent]\` para control total del contenido del panel.
+
+El contenido principal siempre se proyecta sin atributo (slot por defecto).
+
+| Propiedad      | Descripción                                             |
+|----------------|---------------------------------------------------------|
+| \`navItems\`     | Array de ítems \`{ id, icon, label, active?, disabled?, badge? }\` |
+| \`headerTitle\`  | Título de la cabecera del sidenav                       |
+| \`headerIcon\`   | Icono Material de la cabecera                           |
+| \`opened\`       | Abierto o cerrado                                       |
+| \`mode\`         | \`side\` · \`over\` · \`push\`                               |
+| \`position\`     | \`start\` (izquierda) · \`end\` (derecha)                  |
+| \`sidenavWidth\` | Ancho del panel (valor CSS)                             |
+        `,
+      },
+    },
+  },
+  argTypes: {
+    opened: { control: 'boolean', description: 'Abierto o cerrado' },
+    mode: {
+      control: 'select',
+      options: ['side', 'over', 'push'],
+      description: 'Modo de apertura',
+    },
+    position: {
+      control: 'select',
+      options: ['start', 'end'],
+      description: 'Posición del panel',
+    },
+    sidenavWidth: { control: 'text', description: 'Ancho del panel lateral' },
+    headerTitle: { control: 'text', description: 'Título de la cabecera' },
+    headerIcon: { control: 'text', description: 'Icono Material de la cabecera' },
+    mfOpenedChange: { action: 'mfOpenedChange' },
+    mfNavItemClick: { action: 'mfNavItemClick' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MfSidenavComponent>;
+
+// ── Story helpers ─────────────────────────────────────────────────────────
+const mainContent = `
+  <div style="padding: 24px;">
+    <h2 style="margin: 0 0 8px; font-size: 1.25rem; color: var(--mf-color-on-surface);">Contenido principal</h2>
+    <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem; margin: 0;">
+      El panel lateral se renderiza a la izquierda. Puedes interactuar con los ítems del menú.
+    </p>
+  </div>
+`;
+
+export const Default: Story = {
+  name: 'Con navItems (modo side)',
+  args: {
+    opened: true,
+    mode: 'side',
+    headerTitle: 'MF App',
+    headerIcon: 'apps',
+    navItems: NAV_ITEMS,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="height: 480px;">
+        <mf-sidenav
+          [opened]="opened"
+          [mode]="mode"
+          [position]="position"
+          [navItems]="navItems"
+          [headerTitle]="headerTitle"
+          [headerIcon]="headerIcon"
+          [sidenavWidth]="sidenavWidth || '260px'"
+          (mfNavItemClick)="mfNavItemClick($event)"
+          (mfOpenedChange)="mfOpenedChange($event)"
+        >
+          ${mainContent}
+        </mf-sidenav>
+      </div>
+    `,
+    moduleMetadata: { imports: [MfSidenavComponent] },
+  }),
+};
+
+export const Over: Story = {
+  name: 'Modo over',
+  args: {
+    opened: true,
+    mode: 'over',
+    headerTitle: 'MF App',
+    headerIcon: 'apps',
+    navItems: NAV_ITEMS,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="height: 480px;">
+        <mf-sidenav
+          [opened]="opened"
+          [mode]="mode"
+          [navItems]="navItems"
+          [headerTitle]="headerTitle"
+          [headerIcon]="headerIcon"
+          (mfNavItemClick)="mfNavItemClick($event)"
+        >
+          ${mainContent}
+        </mf-sidenav>
+      </div>
+    `,
+    moduleMetadata: { imports: [MfSidenavComponent] },
+  }),
+};
+
+export const EndPosition: Story = {
+  name: 'Posición derecha',
+  args: {
+    opened: true,
+    mode: 'side',
+    position: 'end',
+    headerTitle: 'Detalles',
+    headerIcon: 'info',
+    navItems: [
+      { id: 'notifications', icon: 'notifications', label: 'Notificaciones', badge: 5, active: true },
+      { id: 'messages',      icon: 'mail',           label: 'Mensajes',       badge: 2 },
+      { id: 'activity',      icon: 'history',        label: 'Actividad reciente' },
+      { id: 'bookmarks',     icon: 'bookmark',       label: 'Guardados' },
+    ],
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="height: 480px;">
+        <mf-sidenav
+          [opened]="opened"
+          [mode]="mode"
+          [position]="position"
+          [navItems]="navItems"
+          [headerTitle]="headerTitle"
+          [headerIcon]="headerIcon"
+          (mfNavItemClick)="mfNavItemClick($event)"
+        >
+          ${mainContent}
+        </mf-sidenav>
+      </div>
+    `,
+    moduleMetadata: { imports: [MfSidenavComponent] },
+  }),
+};
+
+export const Closed: Story = {
+  name: 'Cerrado',
+  args: {
+    opened: false,
+    mode: 'over',
+    headerTitle: 'MF App',
+    headerIcon: 'apps',
+    navItems: NAV_ITEMS,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="height: 480px;">
+        <mf-sidenav
+          [opened]="opened"
+          [mode]="mode"
+          [navItems]="navItems"
+          [headerTitle]="headerTitle"
+          [headerIcon]="headerIcon"
+        >
+          <div style="padding: 24px;">
+            <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem;">
+              El sidenav está cerrado. En modo <code>over</code> se superpone al abrirse.
+            </p>
+          </div>
+        </mf-sidenav>
+      </div>
+    `,
+    moduleMetadata: { imports: [MfSidenavComponent] },
+  }),
+};
+
+// ── Interactive story con toggle ──────────────────────────────────────────
+@Component({
+  selector: 'mf-sidenav-interactive-demo',
+  imports: [MfSidenavComponent],
+  template: `
+    <div style="height: 520px; display: flex; flex-direction: column;">
+      <div style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mf-color-border); background: var(--mf-color-surface); flex-shrink: 0;">
+        <button
+          type="button"
+          (click)="toggle()"
+          style="display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--mf-color-border); border-radius: 9999px; background: var(--mf-color-surface); font-family: var(--mf-font-base); font-size: 0.875rem; font-weight: 500; cursor: pointer; color: var(--mf-color-on-surface);"
+        >
+          <span style="font-family: 'Material Icons'; font-size: 18px; line-height: 1;">menu</span>
+          {{ opened() ? 'Cerrar panel' : 'Abrir panel' }}
+        </button>
+        <span style="font-size: 0.875rem; color: var(--mf-color-neutral-400);">Panel: {{ opened() ? 'abierto' : 'cerrado' }}</span>
+      </div>
+      <div style="flex: 1; min-height: 0;">
+        <mf-sidenav
+          [opened]="opened()"
+          mode="over"
+          headerTitle="MF App"
+          headerIcon="apps"
+          [navItems]="items()"
+          (mfOpenedChange)="opened.set($event)"
+          (mfNavItemClick)="onNavItemClick($event)"
+        >
+          <div style="padding: 24px;">
+            <h2 style="margin: 0 0 8px; font-size: 1.25rem; color: var(--mf-color-on-surface);">{{ activeLabel() }}</h2>
+            <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem; margin: 0;">
+              Haz clic en los ítems del menú para cambiar la sección activa.
+            </p>
+          </div>
+        </mf-sidenav>
+      </div>
+    </div>
+  `,
+})
+class MfSidenavInteractiveDemoComponent {
+  readonly opened = signal(false);
+  readonly activeId = signal('home');
+
+  readonly items = signal<MfSidenavNavItem[]>([
+    { id: 'home',      icon: 'home',      label: 'Inicio',       active: true },
+    { id: 'dashboard', icon: 'dashboard', label: 'Dashboard' },
+    { id: 'analytics', icon: 'bar_chart', label: 'Analíticas',   badge: 3 },
+    { id: 'users',     icon: 'group',     label: 'Usuarios' },
+    { id: 'messages',  icon: 'mail',      label: 'Mensajes',     badge: 12 },
+    { id: 'settings',  icon: 'settings',  label: 'Configuración' },
+  ]);
+
+  readonly activeLabel = () =>
+    this.items().find((i) => i.id === this.activeId())?.label ?? 'Inicio';
+
+  toggle(): void {
+    this.opened.set(!this.opened());
+  }
+
+  onNavItemClick(item: MfSidenavNavItem): void {
+    this.activeId.set(item.id);
+    this.items.set(
+      this.items().map((i) => ({ ...i, active: i.id === item.id }))
+    );
+    this.opened.set(false);
+  }
+}
+
+export const Interactive: Story = {
+  name: 'Interactivo (toggle + selección)',
+  render: () => ({
+    template: `<mf-sidenav-interactive-demo />`,
+    moduleMetadata: { imports: [MfSidenavInteractiveDemoComponent] },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Panel en modo `over` con botón de toggle y actualización del ítem activo al hacer clic.',
+      },
+    },
+  },
+};
+
+export const ContentProjection: Story = {
+  name: 'Content projection (personalizado)',
+  render: () => ({
+    template: `
+      <div style="height: 480px;">
+        <mf-sidenav opened="true" mode="side" sidenavWidth="240px">
+          <div mfSidenavContent style="display: flex; flex-direction: column; height: 100%;">
+            <div style="padding: 20px 16px 16px; border-bottom: 1px solid var(--mf-color-border);">
+              <span style="font-family: var(--mf-font-display); font-weight: 700; color: var(--mf-color-brand);">Área de trabajo</span>
+            </div>
+            <nav style="flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 4px;">
+              <a href="#" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--mf-color-on-surface); font-size: 0.875rem; background: var(--mf-color-brand-light); color: var(--mf-color-brand); font-weight: 600;">
+                <span class="material-icons" style="font-size: 20px;">star</span> Destacados
+              </a>
+              <a href="#" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--mf-color-neutral-600); font-size: 0.875rem;">
+                <span class="material-icons" style="font-size: 20px;">folder</span> Proyectos
+              </a>
+              <a href="#" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--mf-color-neutral-600); font-size: 0.875rem;">
+                <span class="material-icons" style="font-size: 20px;">people</span> Equipo
+              </a>
+            </nav>
+          </div>
+          <div style="padding: 24px;">
+            <h2 style="margin: 0 0 8px; font-size: 1.25rem; color: var(--mf-color-on-surface);">Panel personalizado</h2>
+            <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem; margin: 0;">
+              Usando <code>[mfSidenavContent]</code> para proyectar contenido completamente personalizado.
+            </p>
+          </div>
+        </mf-sidenav>
+      </div>
+    `,
+    moduleMetadata: { imports: [MfSidenavComponent] },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Cuando no se proporciona `navItems`, se activa el slot `[mfSidenavContent]` para proyectar HTML personalizado.',
+      },
+    },
+  },
+};

package/src/stories/mf-table.stories.ts

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MfTableComponent } from '../app/components/table';
+
+const COLUMNS = [
+  { key: 'name', header: 'Nombre', sortable: true },
+  { key: 'role', header: 'Rol' },
+  { key: 'status', header: 'Estado' },
+];
+
+const DATA = [
+  { name: 'Ana Torres', role: 'Frontend', status: 'Activa' },
+  { name: 'Luis Vega', role: 'Design Ops', status: 'Pendiente' },
+  { name: 'Marta Solis', role: 'QA', status: 'Activa' },
+];
+
+const meta: Meta<MfTableComponent> = {
+  title: 'Organisms/MfTable',
+  component: MfTableComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**MfTable** renders data with native table semantics and explicit row actions.
+
+The v1 contract avoids clickable rows as the default interaction pattern. If a row needs actions, render focusable controls inside cells and give them contextual accessible names.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'striped', 'bordered'],
+    },
+    rowActionLabel: { control: 'text', description: 'Visible label for the row action button' },
+    rowActionHeader: { control: 'text', description: 'Header text for the action column' },
+    mfSortChange: { action: 'mfSortChange' },
+    mfRowAction: { action: 'mfRowAction' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MfTableComponent>;
+
+export const Default: Story = {
+  args: {
+    columns: COLUMNS,
+    data: DATA,
+  },
+};
+
+export const WithExplicitActions: Story = {
+  name: 'With Explicit Actions',
+  args: {
+    columns: COLUMNS,
+    data: DATA,
+    rowActionLabel: 'Ver detalle',
+    rowActionHeader: 'Acciones',
+    rowActionAriaLabel: (row) => `Ver detalle de ${String(row['name'])}`,
+  },
+};
+
+export const IncorrectUsage: Story = {
+  name: 'Incorrect Usage',
+  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>
+        <ul style="margin: 0 0 16px; padding-left: 18px;">
+          <li>Hacer clickable toda la fila con \`(click)\` en \`tr\`.</li>
+          <li>Usar color como unica senal de estado.</li>
+          <li>Repetir el mismo nombre accesible en todas las acciones de fila.</li>
+        </ul>
+        <pre style="margin: 0; padding: 16px; border-radius: 12px; background: #111827; color: #f9fafb; overflow: auto;"><code>&lt;tr (click)="openDetail(row)"&gt;...&lt;/tr&gt;</code></pre>
+      </section>
+    `,
+  }),
+};

package/src/stories/mf-toolbar.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MfToolbarComponent } from '../app/components/toolbar';
+import { MfButtonComponent } from '../app/components/button';
+import { MfIconComponent } from '../app/components/icon';
+
+const meta: Meta<MfToolbarComponent> = {
+  title: 'Organisms/MfToolbar',
+  component: MfToolbarComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**MfToolbar** es la barra de herramientas de la librería ng-comps.
+Usa Angular Material \`mat-toolbar\` por debajo pero con estilo propio: minimalista y elegante.
+
+| Variante       | Cuándo usarla                                  |
+|----------------|------------------------------------------------|
+| \`surface\`      | Toolbar por defecto, fondo blanco              |
+| \`brand\`        | Toolbar con color de marca                     |
+| \`transparent\`  | Sobre fondos con imagen o gradiente            |
+        `,
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Título de la toolbar' },
+    variant: {
+      control: 'select',
+      options: ['surface', 'brand', 'transparent'],
+      description: 'Variante visual',
+    },
+    bordered: { control: 'boolean', description: 'Borde inferior' },
+    sticky: { control: 'boolean', description: 'Posición fija' },
+    elevated: { control: 'boolean', description: 'Sombra sutil' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MfToolbarComponent>;
+
+export const Surface: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <mf-toolbar [title]="title" [variant]="variant" [bordered]="bordered">
+        <mf-button mfToolbarEnd label="Iniciar sesión" variant="outlined" size="sm" />
+        <mf-button mfToolbarEnd label="Registrarse" variant="filled" size="sm" />
+      </mf-toolbar>
+    `,
+    moduleMetadata: { imports: [MfToolbarComponent, MfButtonComponent] },
+  }),
+  args: {
+    title: 'MF Components',
+    variant: 'surface',
+    bordered: true,
+  },
+};
+
+export const Brand: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <mf-toolbar [title]="title" variant="brand" [bordered]="bordered">
+        <mf-button mfToolbarEnd label="Dashboard" variant="text" size="sm" />
+        <mf-button mfToolbarEnd label="Configuración" variant="text" size="sm" />
+      </mf-toolbar>
+    `,
+    moduleMetadata: { imports: [MfToolbarComponent, MfButtonComponent] },
+  }),
+  args: {
+    title: 'Dashboard',
+    bordered: true,
+  },
+};
+
+export const WithIcons: Story = {
+  name: 'Con iconos',
+  render: () => ({
+    template: `
+      <mf-toolbar title="Mi Aplicación" variant="surface" [bordered]="true" [elevated]="true">
+        <mf-icon mfToolbarEnd name="notifications" color="muted" />
+        <mf-icon mfToolbarEnd name="settings" color="muted" />
+        <mf-icon mfToolbarEnd name="account_circle" size="lg" color="brand" />
+      </mf-toolbar>
+    `,
+    moduleMetadata: { imports: [MfToolbarComponent, MfIconComponent] },
+  }),
+};
+
+export const Elevated: Story = {
+  render: () => ({
+    template: `
+      <mf-toolbar title="Con elevación" [elevated]="true" [bordered]="false">
+        <mf-button mfToolbarEnd label="Acción" variant="filled" size="sm" />
+      </mf-toolbar>
+    `,
+    moduleMetadata: { imports: [MfToolbarComponent, MfButtonComponent] },
+  }),
+};
+
+export const Transparent: Story = {
+  render: () => ({
+    template: `
+      <div style="background: linear-gradient(135deg, var(--mf-color-primary-700), var(--mf-color-primary-900)); padding: 0; border-radius: var(--mf-radius-lg);">
+        <mf-toolbar title="Sobre gradiente" variant="transparent" [bordered]="false" />
+      </div>
+    `,
+    moduleMetadata: { imports: [MfToolbarComponent] },
+  }),
+};

package/src/stories/user.ts

@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}

package/src/styles.css

@@ -7,30 +7,56 @@
 @import './theme/tokens.css';
 
 /* 2. Fuentes vía Google Fonts (sólo en desarrollo; en prod usar asset local) */
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;700&display=swap');
 
 /* 3. Reset y base */
 *, *::before, *::after {
   box-sizing: border-box;
 }
 
-body {
-  margin: 0;
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-base);
-  line-height: var(--mf-leading-normal);
-  color: var(--mf-color-on-surface);
-  background-color: var(--mf-color-surface);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+body {
+  margin: 0;
+  font-family: var(--mf-font-base);
+  font-size: var(--mf-text-base);
+  line-height: var(--mf-leading-normal);
+  color: var(--mf-color-on-surface);
+  background-color: var(--mf-color-surface);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:where(
+  button,
+  [href],
+  input,
+  select,
+  textarea,
+  summary,
+  [tabindex]:not([tabindex='-1'])
+):focus-visible {
+  outline: var(--mf-focus-ring-width) solid var(--mf-focus-ring-color) !important;
+  outline-offset: var(--mf-focus-ring-offset);
+}
+
+.mat-mdc-option.mdc-list-item--focused,
+.mat-mdc-option.mat-mdc-option-active,
+.mat-mdc-menu-item.cdk-keyboard-focused,
+.mat-mdc-menu-item.cdk-program-focused,
+.mat-mdc-paginator-navigation-previous:focus-visible,
+.mat-mdc-paginator-navigation-next:focus-visible,
+.mat-mdc-paginator-navigation-first:focus-visible,
+.mat-mdc-paginator-navigation-last:focus-visible,
+.mat-datepicker-toggle button:focus-visible {
+  outline: var(--mf-focus-ring-width) solid var(--mf-focus-ring-color) !important;
+  outline-offset: var(--mf-focus-ring-offset);
+}
 
 /* 4. Override de tokens de Material para usar nuestra paleta */
-:root {
-  /* Botones */
-  --mdc-filled-button-container-color: var(--mf-color-brand);
-  --mdc-filled-button-label-text-color: var(--mf-color-on-brand);
-  --mdc-filled-button-container-shape: var(--mf-radius-full);
+:root {
+  /* Botones */
+  --mdc-filled-button-container-color: var(--mf-color-brand);
+  --mdc-filled-button-label-text-color: var(--mf-color-on-brand);
+  --mdc-filled-button-container-shape: var(--mf-radius-full);
 
   --mdc-outlined-button-container-shape: var(--mf-radius-full);
   --mdc-outlined-button-label-text-color: var(--mf-color-secondary-900);
@@ -175,8 +201,19 @@ body {
   color: var(--mf-color-brand) !important;
 }
 
-.mf-autocomplete-panel .mat-mdc-option.mat-mdc-option-active {
-  background-color: var(--mf-color-brand-light) !important;
-  color: var(--mf-color-brand) !important;
-  font-weight: var(--mf-weight-medium) !important;
-}
+.mf-autocomplete-panel .mat-mdc-option.mat-mdc-option-active {
+  background-color: var(--mf-color-brand-light) !important;
+  color: var(--mf-color-brand) !important;
+  font-weight: var(--mf-weight-medium) !important;
+}
+
+.mf-input__error,
+.mf-autocomplete__error,
+.mf-select__error,
+.mf-datepicker__error,
+.mf-textarea__error {
+  margin: var(--mf-space-1) var(--mf-space-4) 0;
+  font-size: var(--mf-text-xs);
+  line-height: var(--mf-leading-normal);
+  color: var(--mf-color-error-500);
+}

package/src/theme/tokens.css

@@ -30,15 +30,15 @@
   --mf-color-accent-500: #f59e0b;   /* default */
   --mf-color-accent-700: #b45309;
 
-  --mf-color-error-500:   #ef4444;
-  --mf-color-error-700:   #b91c1c;
+  --mf-color-error-500:   #dc2626;
+  --mf-color-error-700:   #b91c1c;
 
   --mf-color-neutral-0:   #ffffff;
   --mf-color-neutral-50:  #f7fafc;
   --mf-color-neutral-100: #f1f5f9;
   --mf-color-neutral-200: #e2e8f0;
   --mf-color-neutral-300: #cbd5e1;
-  --mf-color-neutral-400: #94a3b8;
+  --mf-color-neutral-400: #64748b;
   --mf-color-neutral-600: #475569;
   --mf-color-neutral-800: #1e293b;
   --mf-color-neutral-900: #0f1722;
@@ -51,7 +51,10 @@
   --mf-color-on-surface:     var(--mf-color-neutral-800);
   --mf-color-surface:        var(--mf-color-neutral-0);
   --mf-color-surface-raised: var(--mf-color-neutral-50);
-  --mf-color-border:         var(--mf-color-neutral-200);
+  --mf-color-border:         var(--mf-color-neutral-200);
+  --mf-focus-ring-color:     var(--mf-color-secondary-700);
+  --mf-focus-ring-offset:    2px;
+  --mf-focus-ring-width:     3px;
 
   /* ── Tipografía ─────────────────────────────────────────────── */
   --mf-font-base: 'Manrope', 'Segoe UI', system-ui, sans-serif;

package/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}