@mimi-ng/cli 0.1.1 → 0.2.0

package/dist/templates/components/button/button.ts

@@ -3,17 +3,35 @@ import {
   Component,
   DestroyRef,
   ElementRef,
+  Renderer2,
   booleanAttribute,
   computed,
+  effect,
   inject,
   input,
+  isDevMode,
 } from '@angular/core';
 import { cn } from '@/components/ui/utils/cn';
-import { type ButtonSize, type ButtonVariant, buttonVariants } from './button.variants';
+import {
+  type ButtonSize,
+  type ButtonTone,
+  type ButtonVariant,
+  buttonVariants,
+  resolveButtonStyle,
+} from './button.variants';
+
+/** El aviso de atajo + tone sale una sola vez por página. */
+let warnedShortcutWithTone = false;
 
 /**
  * Botón de Mimi sobre el elemento nativo: `<button mimiBtn>` o `<a mimiBtn>`.
  *
+ * - `variant` (cómo se ve: solid, soft, outline, ghost, link) y `tone` (de qué color: primary,
+ *   secondary, success, warning, info, danger). Sin `tone`, cada variante usa su tono natural:
+ *   outline y ghost son neutros (secondary); las demás, primary. `data-variant` y `data-tone`
+ *   muestran los valores resueltos.
+ * - Los atajos de la 0.1.0 (`default`, `secondary`, `destructive`) siguen funcionando y ganan
+ *   sobre `tone` (en modo desarrollo, avisa una vez).
  * - `disabled` o `loading` deshabilitan: `disabled` nativo en <button>; en <a>,
  *   `aria-disabled="true"`, `tabindex="-1"` y el clic se cancela.
  * - `loading` muestra un spinner centrado encima del contenido, que queda transparente en su
@@ -48,19 +66,21 @@ import { type ButtonSize, type ButtonVariant, buttonVariants } from './button.va
   `,
   host: {
     '[class]': 'classes()',
-    '[attr.data-variant]': 'variant()',
+    '[attr.data-variant]': 'resolved().variant',
+    '[attr.data-tone]': 'resolved().tone',
     '[attr.data-size]': 'size()',
     '[attr.data-loading]': 'loading() ? "" : null',
     '[attr.data-disabled]': 'isDisabled() ? "" : null',
     '[attr.disabled]': 'isNativeButton && isDisabled() ? "" : null',
-    '[attr.aria-disabled]': '!isNativeButton && isDisabled() ? "true" : null',
-    '[attr.tabindex]': '!isNativeButton && isDisabled() ? "-1" : null',
-    '[attr.aria-busy]': 'loading() ? "true" : null',
+    // aria-disabled, tabindex y aria-busy no van aquí: un binding de host que vale null borra el
+    // atributo que haya puesto el usuario. Los pone `ownAttributes` solo cuando hacen falta.
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MimiButton {
-  readonly variant = input<ButtonVariant>('default');
+  /** Incluye los atajos de la 0.1.x (`ButtonVariantShortcut`, deprecados). */
+  readonly variant = input<ButtonVariant>('solid');
+  readonly tone = input<ButtonTone>();
   readonly size = input<ButtonSize>('default');
   readonly disabled = input(false, { transform: booleanAttribute });
   readonly loading = input(false, { transform: booleanAttribute });
@@ -71,15 +91,62 @@ export class MimiButton {
 
   protected readonly isDisabled = computed(() => this.disabled() || this.loading());
 
+  protected readonly resolved = computed(() => {
+    const style = resolveButtonStyle(this.variant(), this.tone());
+    if (style.ignoredTone && isDevMode() && !warnedShortcutWithTone) {
+      warnedShortcutWithTone = true;
+      console.warn(
+        `[Mimi] Button: variant="${this.variant()}" ya define el color; se ignora ` +
+          `tone="${this.tone()}". Usa variant="${style.variant}" con tone (los atajos se ` +
+          `quitan en la 1.0).`,
+      );
+    }
+    return style;
+  });
+
   protected readonly classes = computed(() =>
     cn(
-      buttonVariants({ variant: this.variant(), size: this.size() }),
+      buttonVariants({
+        variant: this.resolved().variant,
+        tone: this.resolved().tone,
+        size: this.size(),
+      }),
       // El diseño deshabilitado no tiene sombra; cargando la conserva.
       this.disabled() && !this.loading() && 'shadow-none',
       this.userClass(),
     ),
   );
 
+  /**
+   * `aria-disabled="true"` y `tabindex="-1"` en un <a> deshabilitado, y `aria-busy="true"` mientras
+   * carga. Solo se escriben cuando hacen falta; al dejar de hacer falta vuelve el valor que tenía el
+   * elemento (el del usuario, fijo o enlazado) o se quitan. Así `<button mimiBtn aria-disabled="true">`
+   * (un botón deshabilitado que sigue enfocable) conserva su atributo.
+   */
+  private readonly ownAttributes = (() => {
+    const renderer = inject(Renderer2);
+    /** Lo que había antes de que Mimi escribiera cada atributo (null: no había). */
+    const previous = new Map<string, string | null>();
+    const apply = (name: string, value: string | null) => {
+      if (value !== null) {
+        if (!previous.has(name)) previous.set(name, this.element.getAttribute(name));
+        renderer.setAttribute(this.element, name, value);
+        return;
+      }
+      if (!previous.has(name)) return;
+      const before = previous.get(name) ?? null;
+      previous.delete(name);
+      if (before === null) renderer.removeAttribute(this.element, name);
+      else renderer.setAttribute(this.element, name, before);
+    };
+    return effect(() => {
+      const disabledLink = !this.isNativeButton && this.isDisabled();
+      apply('aria-disabled', disabledLink ? 'true' : null);
+      apply('tabindex', disabledLink ? '-1' : null);
+      apply('aria-busy', this.loading() ? 'true' : null);
+    });
+  })();
+
   /**
    * En <a> deshabilitado cancela el clic (en <button> el navegador ya lo bloquea). Se escucha
    * en la fase de captura: en el propio elemento corre antes que los (click) del usuario, que

package/dist/templates/components/button/button.variants.ts

@@ -1,14 +1,96 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  buttonFocusStyles,
-  controlDisabledStyles,
-  controlPressStyles,
-} from '@/components/ui/utils/control-styles';
+import { buttonFocusStyles, controlDisabledStyles } from '@/components/ui/utils/control-styles';
+
+/** Cómo se ve el botón (spec 4, «Variante y tono»), sin los atajos de la 0.1.x. */
+export type ButtonStyleVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
+
+/** De qué color es. `danger` usa los tokens `destructive`. */
+export type ButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger';
+
+/**
+ * Atajos de la 0.1.0, cuando el color era una variante. Siguen funcionando, sin error ni aviso:
+ * `default` = solid + primary, `secondary` = solid + secondary, `destructive` = solid + danger.
+ * @deprecated Se quitan en la 1.0 (spec 12). Usa `variant` y `tone`.
+ */
+export type ButtonVariantShortcut = 'default' | 'secondary' | 'destructive';
+
+/**
+ * Lo que acepta `variant`: las variantes y, hasta la 1.0, los atajos de la 0.1.x (deprecados), para
+ * que el código que tipaba `ButtonVariant` con `'default'` o `'destructive'` siga compilando.
+ */
+export type ButtonVariant = ButtonStyleVariant | ButtonVariantShortcut;
+
+/**
+ * Colores de cada tono en cada variante: una fila por tono, una entrada por variante. Todas las
+ * clases van completas y literales para que Tailwind las detecte. Diseño: docs/design/
+ * «Mimi F2 Tokens y Tonos» (solid, soft y outline con tono). Las celdas de secondary, ghost y
+ * link con tono son provisionales, sin diseño (spec 13).
+ */
+const TONE_CLASSES = {
+  primary: {
+    solid:
+      'bg-primary text-primary-foreground shadow-primary hover:not-disabled:bg-primary-hover hover:not-disabled:shadow-primary-hover active:ring-3 active:ring-ring-soft',
+    soft: 'bg-secondary text-secondary-foreground hover:not-disabled:bg-primary-soft-hover',
+    outline:
+      'border-primary-border bg-transparent text-secondary-foreground hover:not-disabled:bg-primary-subtle',
+    ghost:
+      'bg-transparent text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+    link: 'bg-transparent text-primary',
+  },
+  secondary: {
+    solid:
+      'bg-secondary text-secondary-foreground shadow-neutral hover:not-disabled:bg-secondary-hover hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
+    soft: 'bg-muted text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+    outline:
+      'border-border bg-card text-foreground shadow-neutral hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
+    ghost:
+      'bg-transparent text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+    link: 'bg-transparent text-foreground',
+  },
+  success: {
+    solid:
+      'bg-success text-success-foreground shadow-success hover:not-disabled:bg-success-hover hover:not-disabled:shadow-success-hover active:ring-3 active:ring-success-ring',
+    soft: 'bg-success-soft text-success-soft-foreground hover:not-disabled:bg-success-soft-hover',
+    outline:
+      'border-success-border bg-transparent text-success-soft-foreground hover:not-disabled:bg-success-subtle',
+    ghost: 'bg-transparent text-success-soft-foreground hover:not-disabled:bg-success-soft',
+    link: 'bg-transparent text-success-soft-foreground',
+  },
+  warning: {
+    solid:
+      'bg-warning text-warning-foreground shadow-warning hover:not-disabled:bg-warning-hover hover:not-disabled:shadow-warning-hover active:ring-3 active:ring-warning-ring',
+    soft: 'bg-warning-soft text-warning-soft-foreground hover:not-disabled:bg-warning-soft-hover',
+    outline:
+      'border-warning-border bg-transparent text-warning-soft-foreground hover:not-disabled:bg-warning-subtle',
+    ghost: 'bg-transparent text-warning-soft-foreground hover:not-disabled:bg-warning-soft',
+    link: 'bg-transparent text-warning-soft-foreground',
+  },
+  info: {
+    solid:
+      'bg-info text-info-foreground shadow-info hover:not-disabled:bg-info-hover hover:not-disabled:shadow-info-hover active:ring-3 active:ring-info-ring',
+    soft: 'bg-info-soft text-info-soft-foreground hover:not-disabled:bg-info-soft-hover',
+    outline:
+      'border-info-border bg-transparent text-info-soft-foreground hover:not-disabled:bg-info-subtle',
+    ghost: 'bg-transparent text-info-soft-foreground hover:not-disabled:bg-info-soft',
+    link: 'bg-transparent text-info-soft-foreground',
+  },
+  danger: {
+    solid:
+      'bg-destructive text-destructive-foreground shadow-destructive hover:not-disabled:bg-destructive-hover hover:not-disabled:shadow-destructive-hover active:ring-3 active:ring-destructive-ring',
+    soft: 'bg-destructive-soft-bg text-destructive-soft-foreground hover:not-disabled:bg-destructive-soft-hover',
+    outline:
+      'border-destructive-border bg-transparent text-destructive-soft-foreground hover:not-disabled:bg-destructive-subtle',
+    ghost:
+      'bg-transparent text-destructive-soft-foreground hover:not-disabled:bg-destructive-soft-bg',
+    link: 'bg-transparent text-destructive-soft-foreground',
+  },
+} as const satisfies Record<ButtonTone, Record<ButtonStyleVariant, string>>;
 
 /**
  * Clases de mimiBtn (docs/design/Mimi Componentes.dc.html, sección 1). Todas literales para
  * que Tailwind las detecte. Las medidas siguen la cascada de la spec 6.2:
- * --mimi-btn-* → --mimi-control-* / --mimi-radius → valor del diseño.
+ * --mimi-btn-* → --mimi-control-* / --mimi-radius → valor del diseño. La variante da la forma
+ * y el tono, los colores (TONE_CLASSES).
  */
 export const buttonVariants = cva(
   [
@@ -20,41 +102,83 @@ export const buttonVariants = cva(
     buttonFocusStyles,
     'focus-visible:outline-[length:var(--mimi-btn-focus-ring-width,2px)]',
     controlDisabledStyles,
-    controlPressStyles,
+    // Escala al presionar: --mimi-btn-press-scale → --mimi-press-scale (spec 6.6).
+    'mimi-transition active:scale-[var(--mimi-btn-press-scale,var(--mimi-press-scale))]',
     // Cargando: deshabilitado, pero con opacidad 85% y cursor de progreso (gana a disabled:).
     'aria-busy:disabled:cursor-progress aria-busy:disabled:opacity-85 aria-busy:aria-disabled:opacity-85',
   ],
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-primary hover:not-disabled:bg-primary-hover hover:not-disabled:shadow-primary-hover active:ring-3 active:ring-ring-soft',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-neutral hover:not-disabled:bg-secondary-hover hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-destructive hover:not-disabled:bg-destructive-hover hover:not-disabled:shadow-destructive-hover active:ring-3 active:ring-destructive-soft',
-        outline:
-          'border-border bg-card text-foreground shadow-neutral hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
-        ghost:
-          'bg-transparent text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
-        link: 'bg-transparent text-primary underline-offset-4 hover:not-disabled:underline',
+        solid: '',
+        soft: '',
+        outline: '',
+        ghost: '',
+        link: 'underline-offset-4 hover:not-disabled:underline',
+      },
+      tone: {
+        primary: '',
+        secondary: '',
+        success: '',
+        warning: '',
+        info: '',
+        danger: '',
       },
       size: {
         default:
-          'h-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] gap-2 px-[var(--mimi-btn-padding-x,1rem)] text-[length:var(--mimi-btn-font-size,0.875rem)]',
+          'h-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] gap-[var(--mimi-btn-gap,0.5rem)] px-[var(--mimi-btn-px,var(--mimi-btn-padding-x,1rem))] text-[length:var(--mimi-btn-font-size,0.875rem)]',
         sm: 'h-[var(--mimi-btn-height-sm,var(--mimi-control-height-sm,2rem))] gap-1.5 px-3 text-[13px]',
         lg: 'h-[var(--mimi-btn-height-lg,var(--mimi-control-height-lg,3rem))] gap-2 px-6 text-[15px]',
         icon: 'size-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] p-0',
       },
     },
     compoundVariants: [
+      // Los colores: una combinación por cada tono y variante de TONE_CLASSES.
+      ...Object.entries(TONE_CLASSES).flatMap(([tone, byVariant]) =>
+        Object.entries(byVariant).map(([variant, cls]) => ({
+          tone: tone as ButtonTone,
+          variant: variant as ButtonStyleVariant,
+          class: cls,
+        })),
+      ),
       // El enlace del diseño solo tiene 4px de padding horizontal.
       { variant: 'link', size: ['default', 'sm', 'lg'], class: 'px-1' },
     ],
-    defaultVariants: { variant: 'default', size: 'default' },
+    defaultVariants: { variant: 'solid', tone: 'primary', size: 'default' },
   },
 );
 
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-export type ButtonVariant = NonNullable<ButtonVariantProps['variant']>;
 export type ButtonSize = NonNullable<ButtonVariantProps['size']>;
+
+/** Sin `tone`, cada variante usa su tono natural: outline y ghost son neutros, como en la 0.1.0. */
+const NATURAL_TONE: Record<ButtonStyleVariant, ButtonTone> = {
+  solid: 'primary',
+  soft: 'primary',
+  outline: 'secondary',
+  ghost: 'secondary',
+  link: 'primary',
+};
+
+const SHORTCUTS: Record<ButtonVariantShortcut, { variant: ButtonStyleVariant; tone: ButtonTone }> =
+  {
+    default: { variant: 'solid', tone: 'primary' },
+    secondary: { variant: 'solid', tone: 'secondary' },
+    destructive: { variant: 'solid', tone: 'danger' },
+  };
+
+/**
+ * Resuelve variante y tono. Un atajo de la 0.1.0 gana siempre; `ignoredTone` indica que además
+ * se pasó un `tone` que no se aplicó.
+ */
+export function resolveButtonStyle(
+  variant: ButtonVariant,
+  tone: ButtonTone | undefined,
+): { variant: ButtonStyleVariant; tone: ButtonTone; ignoredTone: boolean } {
+  if (variant in SHORTCUTS) {
+    const shortcut = SHORTCUTS[variant as ButtonVariantShortcut];
+    return { ...shortcut, ignoredTone: tone !== undefined && tone !== shortcut.tone };
+  }
+  const v = variant as ButtonStyleVariant;
+  return { variant: v, tone: tone ?? NATURAL_TONE[v], ignoredTone: false };
+}

package/dist/templates/components/card/card.ts

@@ -24,9 +24,9 @@ export class MimiCard {
   readonly userClass = input('', { alias: 'class' });
   protected readonly classes = computed(() =>
     cn(
-      'flex flex-col bg-card text-card-foreground',
+      'flex flex-col bg-[color:var(--mimi-card-bg,var(--mimi-card))] text-[color:var(--mimi-card-fg,var(--mimi-card-foreground))]',
       'rounded-[var(--mimi-card-radius,var(--mimi-radius-card))]',
-      'border-[length:var(--mimi-card-border-width,1px)] border-border',
+      'border-[length:var(--mimi-card-border-width,1px)] border-[color:var(--mimi-card-border,var(--mimi-border))]',
       'shadow-[shadow:var(--mimi-card-shadow,var(--mimi-shadow-card))]',
       this.userClass(),
     ),
@@ -44,7 +44,7 @@ export class MimiCardHeader {
   readonly userClass = input('', { alias: 'class' });
   protected readonly classes = computed(() =>
     cn(
-      'flex flex-col gap-1.5 p-[var(--mimi-card-padding-header,1.5rem_1.5rem_1rem)]',
+      'flex flex-col gap-1.5 p-[var(--mimi-card-padding-header,var(--mimi-card-padding,1.5rem)_var(--mimi-card-padding,1.5rem)_1rem)]',
       this.userClass(),
     ),
   );
@@ -101,7 +101,10 @@ export class MimiCardDescription {
 export class MimiCardContent {
   readonly userClass = input('', { alias: 'class' });
   protected readonly classes = computed(() =>
-    cn('block p-[var(--mimi-card-padding-content,0_1.5rem_1.25rem)] first:pt-6', this.userClass()),
+    cn(
+      'block p-[var(--mimi-card-padding-content,0_var(--mimi-card-padding,1.5rem)_1.25rem)] first:pt-[var(--mimi-card-padding,1.5rem)]',
+      this.userClass(),
+    ),
   );
 }
 
@@ -116,7 +119,7 @@ export class MimiCardFooter {
   readonly userClass = input('', { alias: 'class' });
   protected readonly classes = computed(() =>
     cn(
-      'flex items-center justify-end gap-2 p-[var(--mimi-card-padding-footer,0_1.5rem_1.5rem)] first:pt-6',
+      'flex items-center justify-end gap-2 p-[var(--mimi-card-padding-footer,0_var(--mimi-card-padding,1.5rem)_var(--mimi-card-padding,1.5rem))] first:pt-[var(--mimi-card-padding,1.5rem)]',
       this.userClass(),
     ),
   );

package/dist/templates/components/checkbox/checkbox.ts

@@ -150,10 +150,10 @@ export class MimiCheckbox implements FormCheckboxControl, MimiFieldControl {
 
   // Caja de 16px. Marcada o mixta: primary con su sombra. Foco: borde ring (sin marcar) y contorno.
   protected readonly boxClasses = cn(
-    'peer inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-input-background text-primary-foreground',
+    'peer inline-flex size-[var(--mimi-checkbox-size,1rem)] shrink-0 items-center justify-center rounded-[var(--mimi-checkbox-radius,var(--mimi-radius-sm))] border border-[color:var(--mimi-checkbox-border,var(--mimi-input))] bg-input-background text-[color:var(--mimi-checkbox-check,var(--mimi-primary-foreground))]',
     'mimi-transition active:scale-(--mimi-press-scale-sm)',
-    'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:shadow-primary',
-    'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-primary',
+    'data-[state=checked]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=checked]:shadow-primary',
+    'data-[state=indeterminate]:border-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:bg-[color:var(--mimi-checkbox-checked-bg,var(--mimi-primary))] data-[state=indeterminate]:shadow-primary',
     'data-[state=unchecked]:focus-visible:border-ring data-[state=unchecked]:aria-invalid:border-destructive',
     'disabled:shadow-none',
     buttonFocusStyles,

package/dist/templates/components/confirm/confirm-texts.ts

@@ -0,0 +1,46 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos de Confirm, en archivo propio y sin @angular/cdk: así se pueden proveer en
+ * `app.config.ts` sin llevar el Dialog al chunk inicial.
+ */
+
+/** Textos de los botones de Confirm. */
+export interface MimiConfirmText {
+  /** Botón que confirma. */
+  confirm: string;
+  /** Botón que cancela. */
+  cancel: string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_CONFIRM_TEXT_EN: MimiConfirmText = {
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+};
+
+/** Textos en español: `provideMimiConfirmText(MIMI_CONFIRM_TEXT_ES)`. */
+export const MIMI_CONFIRM_TEXT_ES: MimiConfirmText = {
+  confirm: 'Confirmar',
+  cancel: 'Cancelar',
+};
+
+/** Textos activos. Sin `provideMimiConfirmText`, los predeterminados en inglés. */
+export const MIMI_CONFIRM_TEXT = new InjectionToken<MimiConfirmText>('MIMI_CONFIRM_TEXT', {
+  providedIn: 'root',
+  factory: () => MIMI_CONFIRM_TEXT_EN,
+});
+
+/**
+ * Cambia los textos de Confirm. Lo que no definas sigue en inglés:
+ *
+ * ```ts
+ * provideMimiConfirmText(MIMI_CONFIRM_TEXT_ES)
+ * ```
+ *
+ * Va en `app.config.ts` o en los `providers` de un componente o ruta. `confirmText` y
+ * `cancelText` de cada llamada ganan sobre estos.
+ */
+export function provideMimiConfirmText(text: Partial<MimiConfirmText>): Provider {
+  return { provide: MIMI_CONFIRM_TEXT, useValue: { ...MIMI_CONFIRM_TEXT_EN, ...text } };
+}

package/dist/templates/components/confirm/confirm.ts

@@ -0,0 +1,190 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  Directive,
+  Injector,
+  TemplateRef,
+  ViewContainerRef,
+  assertInInjectionContext,
+  effect,
+  inject,
+  input,
+  untracked,
+} from '@angular/core';
+import { MimiButton } from '@/components/ui/button';
+import {
+  MIMI_DIALOG_DATA,
+  MimiDialogDescription,
+  MimiDialogRef,
+  MimiDialogService,
+  MimiDialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/components/ui/utils/cn';
+import { MIMI_CONFIRM_TEXT } from './confirm-texts';
+
+/*
+ * Confirm (docs/design/Mimi F2 Overlays.dc.html, «2 · Confirm»; prefijo de tokens `confirm`,
+ * spec 13): un alertdialog de 380px, sin X, con un círculo de 40px para el ícono, el título, la
+ * descripción y dos botones de 36px a la derecha.
+ *
+ * Por dentro abre un Dialog (MimiDialogService): el foco, el fondo, Escape, el bloqueo del scroll
+ * y la animación son suyos. Confirm solo pone el contenido y traduce el cierre a true o false.
+ */
+
+/** Opciones de `confirm()`. */
+export interface MimiConfirmOptions {
+  /** La pregunta. Es el nombre accesible del diálogo. */
+  title: string;
+  /** Qué pasa si se confirma. Recomendada: un alertdialog la anuncia junto al título. */
+  description?: string;
+  /** Texto del botón que confirma. Por defecto, el de `MIMI_CONFIRM_TEXT`. */
+  confirmText?: string;
+  /** Texto del botón que cancela. Por defecto, el de `MIMI_CONFIRM_TEXT`. */
+  cancelText?: string;
+  /**
+   * `danger` para una acción destructiva: el botón de confirmar va en rojo y el foco inicial, en
+   * Cancelar. Por defecto, `primary` (el foco inicial va en Confirmar).
+   */
+  tone?: 'primary' | 'danger';
+  /** Ícono dentro del círculo de color: una plantilla con un `<svg>`. Sin él, no hay círculo. */
+  icon?: TemplateRef<unknown>;
+  /** Clases del panel, mezcladas con `cn()` (gana la del usuario). */
+  class?: string;
+}
+
+/** La función que devuelve `injectMimiConfirm()`. */
+export type MimiConfirmFn = (options: MimiConfirmOptions) => Promise<boolean>;
+
+const ICON_CLASSES = {
+  primary: 'bg-info-soft text-info-soft-foreground',
+  danger:
+    'bg-[color:var(--mimi-confirm-icon-bg,var(--mimi-destructive-soft-bg))] text-[color:var(--mimi-confirm-icon-fg,var(--mimi-destructive-soft-foreground))]',
+} as const;
+
+/** Crea la plantilla del ícono. Hace lo mismo que NgTemplateOutlet, sin @angular/common. */
+@Directive({ selector: '[mimiConfirmIcon]' })
+class MimiConfirmIcon {
+  readonly template = input.required<TemplateRef<unknown>>({ alias: 'mimiConfirmIcon' });
+  private readonly viewContainer = inject(ViewContainerRef);
+
+  private readonly render = effect(() => {
+    const template = this.template();
+    untracked(() => {
+      this.viewContainer.clear();
+      this.viewContainer.createEmbeddedView(template);
+    });
+  });
+}
+
+/** El contenido del diálogo: ícono, título, descripción y los dos botones. */
+@Component({
+  selector: 'mimi-confirm',
+  imports: [MimiButton, MimiDialogTitle, MimiDialogDescription, MimiConfirmIcon],
+  template: `
+    <div class="flex items-start gap-3.5">
+      @if (options.icon) {
+        <span aria-hidden="true" data-slot="icon" [class]="iconClasses">
+          <ng-container [mimiConfirmIcon]="options.icon" />
+        </span>
+      }
+      <div class="flex min-w-0 flex-col gap-1">
+        <h2 mimiDialogTitle class="text-base leading-[1.3] tracking-normal">
+          {{ options.title }}
+        </h2>
+        @if (options.description) {
+          <p mimiDialogDescription class="text-[13px] leading-normal text-pretty">
+            {{ options.description }}
+          </p>
+        }
+      </div>
+    </div>
+    <!-- Los botones miden 36px de alto con 14px a los lados, como en el diseño. -->
+    <div class="flex justify-end gap-2">
+      <button
+        mimiBtn
+        type="button"
+        variant="outline"
+        data-slot="cancel"
+        class="h-9 px-3.5"
+        (click)="ref.close(false)"
+      >
+        {{ options.cancelText ?? text.cancel }}
+      </button>
+      <button
+        mimiBtn
+        type="button"
+        [tone]="tone"
+        data-slot="confirm"
+        class="h-9 px-3.5"
+        (click)="ref.close(true)"
+      >
+        {{ options.confirmText ?? text.confirm }}
+      </button>
+    </div>
+  `,
+  host: { '[attr.data-tone]': 'tone' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class MimiConfirmContent {
+  protected readonly options = inject<MimiConfirmOptions>(MIMI_DIALOG_DATA);
+  protected readonly ref = inject<MimiDialogRef<boolean>>(MimiDialogRef);
+  protected readonly text = inject(MIMI_CONFIRM_TEXT);
+
+  protected readonly tone = this.options.tone ?? 'primary';
+  protected readonly iconClasses = cn(
+    'inline-flex size-10 shrink-0 items-center justify-center rounded-full [&_svg]:size-5 [&_svg]:shrink-0',
+    ICON_CLASSES[this.tone],
+  );
+}
+
+/**
+ * Prepara `confirm()`, que pregunta y espera la respuesta:
+ *
+ * ```ts
+ * private readonly confirm = injectMimiConfirm();
+ *
+ * async remove() {
+ *   if (await this.confirm({ title: '¿Eliminar este proyecto?', tone: 'danger' })) { … }
+ * }
+ * ```
+ *
+ * Se llama al declarar la propiedad (o en el constructor): necesita el contexto de inyección.
+ * Así toma el injector del componente y los textos de `provideMimiConfirmText` de su ruta o del
+ * propio componente. Dentro de un método falla con NG0203.
+ *
+ * `confirm()` resuelve `true` si se confirmó y `false` en cualquier otro caso (Cancelar, Escape,
+ * una navegación, `closeAll()` o el componente que se destruye), después de la animación de
+ * salida y con el foco ya devuelto. Nunca rechaza: si el diálogo no se pudo abrir, el error va al
+ * `ErrorHandler` y la respuesta es `false`. El clic en el fondo no cierra.
+ *
+ * Como todo Dialog, se abre después del render en curso: desde un ítem de menú, el foco vuelve
+ * al botón del menú al cerrar.
+ */
+export function injectMimiConfirm(): MimiConfirmFn {
+  assertInInjectionContext(injectMimiConfirm);
+  const dialog = inject(MimiDialogService);
+  const injector = inject(Injector);
+  const destroyRef = inject(DestroyRef);
+
+  return (options) =>
+    new Promise<boolean>((resolve) => {
+      const ref = dialog.open<boolean, MimiConfirmOptions>(MimiConfirmContent, {
+        data: options,
+        role: 'alertdialog',
+        closeButton: false,
+        closeOnBackdropClick: false,
+        // Lo más seguro primero: en una acción destructiva, Enter no confirma por accidente.
+        autoFocus: options.tone === 'danger' ? '[data-slot="cancel"]' : '[data-slot="confirm"]',
+        // Por clase y no con `width`: así la clase del usuario puede cambiar el ancho.
+        class: cn('w-[var(--mimi-confirm-width,380px)] gap-3.5 p-5', options.class),
+        injector,
+      });
+      // Si el componente que pregunta se destruye antes de la respuesta, se cierra con false.
+      const stop = destroyRef.onDestroy(() => ref.close(false));
+      ref.afterClosed().subscribe((result) => {
+        stop();
+        resolve(result === true);
+      });
+    });
+}

package/dist/templates/components/confirm/index.ts

@@ -0,0 +1,2 @@
+export * from './confirm';
+export * from './confirm-texts';