@mimi-ng/cli 0.1.1 → 0.3.0

package/dist/templates/components/popover/popover.ts

@@ -0,0 +1,407 @@
+import { CdkConnectedOverlay, type ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
+import { InteractivityChecker } from '@angular/cdk/a11y';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DOCUMENT,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  Injector,
+  TemplateRef,
+  ViewContainerRef,
+  afterNextRender,
+  booleanAttribute,
+  computed,
+  contentChild,
+  effect,
+  inject,
+  input,
+  isDevMode,
+  model,
+  signal,
+  untracked,
+  viewChild,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+import {
+  MIMI_OVERLAY_ANIMATION,
+  MIMI_VIEWPORT_MARGIN,
+  type MimiOverlayAlign,
+  type MimiOverlaySide,
+  mimiArrowOffset,
+  mimiConnectedPositions,
+  mimiPlacedSide,
+  mimiWaitForExit,
+} from '@/components/ui/utils/overlay';
+
+/*
+ * Popover (docs/design/Mimi F2 Overlays.dc.html, «3 · Popover»): panel de 300px, padding 16px,
+ * gap 12px, a 12px del trigger, con flecha de 10px. Tokens de la spec 13 (MimiPopoverTokens), con
+ * la cascada de la 6.2: --mimi-popover-* → token global → valor del diseño.
+ *
+ * Por dentro usa @angular/cdk/overlay (decisión 4.3): CdkConnectedOverlay posiciona el panel como
+ * popover nativo (top layer) insertado junto al trigger ('inline'), con flip si no cabe. Nada del
+ * CDK sale en la API pública. Los estilos del overlay vienen de @angular/cdk/overlay-prebuilt.css,
+ * que la CLI agrega al CSS global (spec 4.3). Posición, flecha y animación: utils/overlay.ts.
+ */
+
+export type MimiPopoverSide = MimiOverlaySide;
+export type MimiPopoverAlign = MimiOverlayAlign;
+
+/** Distancia entre el trigger y el panel (diseño: margin-top 12px). */
+const OFFSET = 12;
+
+let nextId = 0;
+
+/**
+ * Uso interno de mimi-popover (no está en MimiPopoverImports; se exporta porque el compilador de
+ * Angular lo exige): pinta el contenido del usuario dentro del panel. Hace lo mismo que
+ * NgTemplateOutlet, pero sin importar @angular/common: esbuild pondría ese módulo en el chunk
+ * inicial del proyecto, aunque Popover sea lazy (spec 10).
+ * @internal No está en el índice; no forma parte de la API de Mimi.
+ */
+@Directive({ selector: '[mimiPopoverOutlet]' })
+export class MimiPopoverOutlet {
+  readonly template = input.required<TemplateRef<unknown>>({ alias: 'mimiPopoverOutlet' });
+  private readonly viewContainer = inject(ViewContainerRef);
+  private readonly render = effect(() => {
+    const template = this.template();
+    untracked(() => {
+      this.viewContainer.clear();
+      this.viewContainer.createEmbeddedView(template);
+    });
+  });
+}
+
+/**
+ * Contenedor del popover: un trigger (`[mimiPopoverTrigger]`) y el contenido en un
+ * `<ng-template mimiPopoverContent>`. No dibuja nada propio (`display: contents`): su `class` y
+ * su `aria-label` van al panel.
+ */
+@Component({
+  selector: 'mimi-popover',
+  imports: [CdkConnectedOverlay, MimiPopoverOutlet],
+  template: `
+    <ng-content />
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="originElement()!"
+      [cdkConnectedOverlayOpen]="rendered()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayViewportMargin]="viewportMargin"
+      [cdkConnectedOverlayDisableClose]="true"
+      cdkConnectedOverlayUsePopover="inline"
+      cdkConnectedOverlayTransformOriginOn="[data-mimi-overlay-panel]"
+      (attach)="onAttach()"
+      (detach)="onDetach()"
+      (overlayKeydown)="onKeydown($event)"
+      (overlayOutsideClick)="close()"
+      (positionChange)="onPositionChange($event)"
+    >
+      <div
+        #panel
+        data-mimi-overlay-panel
+        role="dialog"
+        tabindex="-1"
+        [id]="panelId"
+        [class]="panelClasses()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabel() ? null : titleId()"
+        [attr.aria-describedby]="descriptionId()"
+        [attr.data-state]="state()"
+        [attr.data-side]="placedSide()"
+        [attr.data-align]="align()"
+        [attr.inert]="state() === 'closed' ? '' : null"
+        [style.--mimi-popover-arrow-offset]="arrowOffset()"
+      >
+        @if (arrow()) {
+          <span aria-hidden="true" [attr.data-side]="placedSide()" [class]="arrowClasses"></span>
+        }
+        @if (content(); as content) {
+          <ng-container [mimiPopoverOutlet]="content.templateRef" />
+        }
+      </div>
+    </ng-template>
+  `,
+  styles: MIMI_OVERLAY_ANIMATION,
+  host: {
+    style: 'display: contents',
+    // El class y el aria-label son del panel: en el host no tendrían efecto o se heredarían.
+    '[attr.class]': 'null',
+    '[attr.aria-label]': 'null',
+    '[attr.data-state]': 'open() ? "open" : "closed"',
+    '[attr.data-side]': 'side()',
+    '[attr.data-align]': 'align()',
+    // `align` es un atributo HTML antiguo: el navegador lo convierte en text-align (se heredaría).
+    '[attr.align]': 'null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiPopover {
+  private readonly document = inject(DOCUMENT);
+  private readonly injector = inject(Injector);
+  private readonly checker = inject(InteractivityChecker);
+
+  /** Abierto o cerrado. Admite `[(open)]`. */
+  readonly open = model(false);
+  /** Lado preferido. Si no cabe, pasa al lado opuesto. */
+  readonly side = input<MimiPopoverSide>('bottom');
+  /** Alineación con el trigger. */
+  readonly align = input<MimiPopoverAlign>('center');
+  /** Flecha hacia el trigger (decorativa). */
+  readonly arrow = input(true, { transform: booleanAttribute });
+  /** Nombre accesible del panel (`aria-label`). Si hay `mimiPopoverTitle`, no hace falta. */
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  /** Clases del panel, mezcladas con `cn()` (gana la del usuario). */
+  readonly userClass = input('', { alias: 'class' });
+
+  protected readonly trigger = contentChild(MimiPopoverTrigger);
+  protected readonly content = contentChild(MimiPopoverContent);
+  private readonly panel = viewChild<ElementRef<HTMLElement>>('panel');
+
+  /** id del panel (aria-controls del trigger). */
+  readonly panelId = `mimi-popover-${nextId++}`;
+  /** Registrados por `mimiPopoverTitle` y `mimiPopoverDescription`. */
+  readonly titleId = signal<string | null>(null);
+  readonly descriptionId = signal<string | null>(null);
+
+  /** El panel está en el DOM (también mientras dura la animación de salida). */
+  protected readonly rendered = signal(false);
+  protected readonly state = signal<'open' | 'closed'>('closed');
+  protected readonly placedSide = signal<MimiPopoverSide>('bottom');
+  protected readonly arrowOffset = signal<string | null>(null);
+  protected readonly viewportMargin = MIMI_VIEWPORT_MARGIN;
+
+  protected readonly originElement = computed(() => this.trigger()?.element ?? null);
+
+  /** Lado y alineación pedidos, el lado opuesto y, por último, los otros dos lados. */
+  protected readonly positions = computed(() =>
+    mimiConnectedPositions(this.side(), this.align(), OFFSET),
+  );
+
+  protected readonly panelClasses = computed(() =>
+    cn(
+      'relative flex w-[300px] max-w-[calc(100vw_-_16px)] flex-col gap-3 outline-none',
+      'rounded-[var(--mimi-popover-radius,var(--mimi-radius))] border border-[color:var(--mimi-popover-border,var(--mimi-border))]',
+      'bg-[color:var(--mimi-popover-bg,var(--mimi-popover))] text-popover-foreground',
+      'p-[var(--mimi-popover-padding,16px)] shadow-[shadow:var(--mimi-popover-shadow,var(--mimi-shadow-popover))]',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly arrowClasses = cn(
+    'pointer-events-none absolute size-[var(--mimi-popover-arrow,10px)] rounded-tl-[2px] border-t border-l',
+    'border-[color:var(--mimi-popover-border,var(--mimi-border))] bg-[color:var(--mimi-popover-bg,var(--mimi-popover))]',
+    'data-[side=bottom]:top-[calc(var(--mimi-popover-arrow,10px)/-2_-_1px)] data-[side=bottom]:left-[var(--mimi-popover-arrow-offset,50%)] data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:rotate-45',
+    'data-[side=top]:bottom-[calc(var(--mimi-popover-arrow,10px)/-2_-_1px)] data-[side=top]:left-[var(--mimi-popover-arrow-offset,50%)] data-[side=top]:-translate-x-1/2 data-[side=top]:rotate-[225deg]',
+    'data-[side=right]:left-[calc(var(--mimi-popover-arrow,10px)/-2_-_1px)] data-[side=right]:top-[var(--mimi-popover-arrow-offset,50%)] data-[side=right]:-translate-y-1/2 data-[side=right]:-rotate-45',
+    'data-[side=left]:right-[calc(var(--mimi-popover-arrow,10px)/-2_-_1px)] data-[side=left]:top-[var(--mimi-popover-arrow-offset,50%)] data-[side=left]:-translate-y-1/2 data-[side=left]:rotate-[135deg]',
+  );
+
+  /** Cuenta los cierres: si se vuelve a abrir durante la animación de salida, no se desmonta. */
+  private closing = 0;
+  private warnedLabel = false;
+
+  private readonly syncOpen = effect(() => {
+    const open = this.open();
+    untracked(() => (open ? this.show() : this.hide()));
+  });
+
+  /** Abre o cierra (lo usa el trigger). */
+  toggle(): void {
+    this.open.update((open) => !open);
+  }
+
+  /** Cierra. El foco vuelve al trigger si estaba dentro del panel o en ningún lado. */
+  close(): void {
+    this.open.set(false);
+  }
+
+  private show(): void {
+    this.closing++;
+    this.placedSide.set(this.side());
+    this.state.set('open');
+    if (this.rendered()) {
+      // Se reabrió durante la salida: el panel sigue montado, así que no habrá (attach).
+      this.focusPanel();
+    } else {
+      this.rendered.set(true);
+    }
+  }
+
+  private hide(): void {
+    if (!this.rendered()) return;
+    this.state.set('closed');
+    const panel = this.panel()?.nativeElement;
+    const active = this.document.activeElement;
+    if (!active || active === this.document.body || panel?.contains(active)) {
+      this.trigger()?.element.focus();
+    }
+    const closing = ++this.closing;
+    afterNextRender(
+      {
+        read: () => {
+          // Espera la animación de salida (sin animación, como con movimiento reducido, no hay).
+          void mimiWaitForExit(panel).then(() => {
+            if (closing === this.closing) this.rendered.set(false);
+          });
+        },
+      },
+      { injector: this.injector },
+    );
+  }
+
+  protected onAttach(): void {
+    this.focusPanel();
+  }
+
+  protected onDetach(): void {
+    // El CDK lo desmontó por su cuenta (p. ej. al destruirse): se sincroniza el estado.
+    this.rendered.set(false);
+    if (this.open()) this.open.set(false);
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape' && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault();
+      this.close();
+    }
+  }
+
+  protected onPositionChange({ connectionPair }: ConnectedOverlayPositionChange): void {
+    const side = mimiPlacedSide(connectionPair);
+    this.placedSide.set(side);
+    // La flecha apunta al centro del trigger.
+    const trigger = this.trigger()?.element.getBoundingClientRect();
+    const panel = this.panel()?.nativeElement.getBoundingClientRect();
+    this.arrowOffset.set(trigger && panel ? mimiArrowOffset(trigger, panel, side) : null);
+  }
+
+  /**
+   * Al abrir, el foco va al elemento con `autofocus` del panel (el día elegido del calendario,
+   * G2.9) o, si no hay, al primer elemento enfocable o al panel.
+   */
+  private focusPanel(): void {
+    afterNextRender(
+      {
+        write: () => {
+          const panel = this.panel()?.nativeElement;
+          if (!panel || this.state() !== 'open') return;
+          this.warnMissingLabel();
+          const preferred = panel.querySelector<HTMLElement>('[autofocus]');
+          const first =
+            preferred && this.checker.isFocusable(preferred)
+              ? preferred
+              : Array.from(panel.querySelectorAll<HTMLElement>('*')).find(
+                  (element) =>
+                    this.checker.isFocusable(element) && this.checker.isTabbable(element),
+                );
+          (first ?? panel).focus();
+        },
+      },
+      { injector: this.injector },
+    );
+  }
+
+  private warnMissingLabel(): void {
+    if (!isDevMode() || this.warnedLabel) return;
+    if (this.ariaLabel() || this.titleId()) return;
+    this.warnedLabel = true;
+    console.warn(
+      '[Mimi] Popover: el panel no tiene nombre accesible. Agrega aria-label="…" al ' +
+        '<mimi-popover> o marca su título con mimiPopoverTitle.',
+    );
+  }
+}
+
+/**
+ * Botón que abre y cierra el popover: `<button mimiBtn mimiPopoverTrigger>`. Lleva
+ * `aria-haspopup="dialog"`, `aria-expanded` y, abierto, `aria-controls`.
+ */
+@Directive({
+  selector: '[mimiPopoverTrigger]',
+  host: {
+    'aria-haspopup': 'dialog',
+    '[attr.aria-expanded]': 'popover.open()',
+    '[attr.aria-controls]': 'popover.open() ? popover.panelId : null',
+    '[attr.data-state]': 'popover.open() ? "open" : "closed"',
+    '(click)': 'popover.toggle()',
+  },
+})
+export class MimiPopoverTrigger {
+  protected readonly popover = inject(MimiPopover);
+  readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+}
+
+/**
+ * Contenido del popover: `<ng-template mimiPopoverContent>`. Se crea al abrir y se destruye al
+ * cerrar. El `class` y el `label` del panel van en `<mimi-popover>`: Angular no pasa un `class`
+ * estático de un ng-template a la directiva.
+ */
+@Directive({ selector: 'ng-template[mimiPopoverContent]' })
+export class MimiPopoverContent {
+  readonly templateRef = inject(TemplateRef);
+}
+
+/** Título del panel: le da su nombre accesible (aria-labelledby). */
+@Directive({
+  selector: '[mimiPopoverTitle]',
+  host: { '[id]': 'id', '[class]': 'classes()' },
+})
+export class MimiPopoverTitle {
+  private readonly popover = inject(MimiPopover);
+  private readonly destroyRef = inject(DestroyRef);
+  readonly id = `mimi-popover-title-${nextId++}`;
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn('text-[15px] leading-tight font-bold', this.userClass()),
+  );
+
+  constructor() {
+    this.popover.titleId.set(this.id);
+    this.destroyRef.onDestroy(() => {
+      if (this.popover.titleId() === this.id) this.popover.titleId.set(null);
+    });
+  }
+}
+
+/** Descripción del panel (aria-describedby). */
+@Directive({
+  selector: '[mimiPopoverDescription]',
+  host: { '[id]': 'id', '[class]': 'classes()' },
+})
+export class MimiPopoverDescription {
+  private readonly popover = inject(MimiPopover);
+  private readonly destroyRef = inject(DestroyRef);
+  readonly id = `mimi-popover-description-${nextId++}`;
+  readonly userClass = input('', { alias: 'class' });
+  protected readonly classes = computed(() =>
+    cn('text-[13px] text-muted-foreground', this.userClass()),
+  );
+
+  constructor() {
+    this.popover.descriptionId.set(this.id);
+    this.destroyRef.onDestroy(() => {
+      if (this.popover.descriptionId() === this.id) this.popover.descriptionId.set(null);
+    });
+  }
+}
+
+/** Cierra el popover al hacer clic (p. ej. «Cancelar» o «Enviar»). El foco vuelve al trigger. */
+@Directive({
+  selector: '[mimiPopoverClose]',
+  host: { '(click)': 'popover.close()' },
+})
+export class MimiPopoverClose {
+  protected readonly popover = inject(MimiPopover);
+}
+
+export const MimiPopoverImports = [
+  MimiPopover,
+  MimiPopoverTrigger,
+  MimiPopoverContent,
+  MimiPopoverTitle,
+  MimiPopoverDescription,
+  MimiPopoverClose,
+] as const;

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

@@ -0,0 +1 @@
+export * from './progress';

package/dist/templates/components/progress/progress.ts

@@ -0,0 +1,217 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterRenderEffect,
+  computed,
+  inject,
+  input,
+  isDevMode,
+  numberAttribute,
+} from '@angular/core';
+import { cn } from '@/components/ui/utils/cn';
+
+/*
+ * Progress (docs/design/Mimi F5 Estructura.dc.html, «4 · Progress»; prefijo de tokens
+ * `progress`, spec 13): barra o círculo, determinado o indeterminado.
+ *
+ * Rol `progressbar` de WAI-ARIA en el propio elemento (la APG no tiene un patrón propio y
+ * @angular/aria no trae uno). No recibe el foco y no anuncia nada por su cuenta: el valor se lee
+ * cuando el lector llega a la barra (`aria-valuenow`); el final de la tarea lo avisa la app
+ * (decidido el 03/11/2026, plan G2.10).
+ */
+
+/** Tonos del diseño (spec 4, «Variante y tono»; el diseño escribe `destructive`). */
+export type MimiProgressTone = 'primary' | 'success' | 'warning' | 'info' | 'danger';
+export type MimiProgressShape = 'bar' | 'circle';
+/** Solo el círculo: 76px (`default`) o 44px (`sm`), los del diseño. */
+export type MimiProgressSize = 'default' | 'sm';
+
+/*
+ * Pista: el token del componente, el global `--mimi-track` y, para un tema anterior a la 0.3.0
+ * que no lo tenga, `--mimi-input` (G2.0b; spec 6.2): casi el mismo gris en claro y en oscuro, y
+ * sin el `color-mix` de la fórmula, que Lightning CSS duplica en el CSS global. Escrita entera en
+ * cada clase (Tailwind solo ve clases literales).
+ */
+
+/** Color de la parte llena por tono: el token solo cambia el primario (los tonos son globales). */
+const FILL_BG: Record<MimiProgressTone, string> = {
+  primary: 'bg-[color:var(--mimi-progress-fill,var(--mimi-primary))]',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  info: 'bg-info',
+  danger: 'bg-destructive',
+};
+const FILL_STROKE: Record<MimiProgressTone, string> = {
+  primary: 'stroke-[color:var(--mimi-progress-fill,var(--mimi-primary))]',
+  success: 'stroke-success',
+  warning: 'stroke-warning',
+  info: 'stroke-info',
+  danger: 'stroke-destructive',
+};
+
+const BAR_CLASSES =
+  'relative block w-full h-[var(--mimi-progress-height,8px)] overflow-hidden rounded-full bg-[color:var(--mimi-progress-track,var(--mimi-track,var(--mimi-input)))]';
+const CIRCLE_CLASSES: Record<MimiProgressSize, string> = {
+  default:
+    'relative inline-grid shrink-0 place-items-center size-[var(--mimi-progress-circle-size,76px)] text-[16px]',
+  // 44px, trazo 4 y texto de 11px: el pequeño del diseño, sin token propio (spec 13).
+  sm: 'relative inline-grid shrink-0 place-items-center size-11 text-[11px]',
+};
+
+/** Barra determinada: el ancho anima 0,35 s con la curva del diseño. */
+const BAR_FILL =
+  'block h-full rounded-full [transition:width_.35s_cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none';
+/**
+ * Barra indeterminada: un tramo del 40 % que cruza (`mimi-indet`). Con movimiento reducido, la
+ * barra entera late (la nota del diseño: «late en lugar de desplazarse»).
+ */
+const BAR_INDETERMINATE =
+  'absolute inset-y-0 start-0 w-2/5 rounded-full animate-[mimi-indet_1.4s_cubic-bezier(.4,0,.2,1)_infinite] rtl:-scale-x-100 motion-reduce:w-full motion-reduce:animate-mimi-pulse';
+
+/** Arco del círculo: el trazo anima 0,4 s; indeterminado gira (con movimiento reducido, late). */
+const ARC =
+  'fill-none [stroke-linecap:round] [transition:stroke-dasharray_.4s_cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none';
+const SPIN = 'animate-[mimi-spin_1s_linear_infinite] motion-reduce:animate-mimi-pulse';
+
+/** Grosor del trazo, en unidades del `viewBox` de 36. */
+const STROKE: Record<MimiProgressSize, string> = {
+  default: '[stroke-width:var(--mimi-progress-circle-width,3)]',
+  sm: '[stroke-width:4]',
+};
+
+/**
+ * Progress:
+ *
+ * ```html
+ * <mimi-progress aria-label="Subiendo informe.pdf" [value]="64" />
+ * <mimi-progress aria-label="Sincronizando" />                  <!-- indeterminado -->
+ * <mimi-progress aria-label="Ventas" shape="circle" tone="success" [value]="100" />
+ * ```
+ *
+ * `value` sin definir (o `null`) es indeterminado. El valor se acota entre 0 y `max`.
+ */
+@Component({
+  selector: 'mimi-progress',
+  template: `
+    @if (shape() === 'bar') {
+      @if (determinate()) {
+        <span data-slot="fill" [class]="barFill()" [style.width.%]="percent()"></span>
+      } @else {
+        <span data-slot="fill" [class]="barIndeterminate()"></span>
+      }
+    } @else {
+      <svg aria-hidden="true" viewBox="0 0 36 36" [class]="spinClass()">
+        <circle cx="18" cy="18" r="15.915" [class]="trackClass()" />
+        <circle
+          data-slot="fill"
+          cx="18"
+          cy="18"
+          r="15.915"
+          [class]="arcClass()"
+          [attr.stroke-dasharray]="dashArray()"
+        />
+      </svg>
+      @if (determinate()) {
+        <span aria-hidden="true" class="relative font-bold tabular-nums">{{ circleText() }}</span>
+      }
+    }
+  `,
+  host: {
+    role: 'progressbar',
+    '[attr.aria-label]': 'ariaLabel() || null',
+    '[attr.aria-labelledby]': 'ariaLabelledby() || null',
+    'aria-valuemin': '0',
+    '[attr.aria-valuemax]': 'safeMax()',
+    '[attr.aria-valuenow]': 'determinate() ? clamped() : null',
+    '[attr.aria-busy]': 'determinate() ? null : "true"',
+    '[attr.data-state]': 'determinate() ? "determinate" : "indeterminate"',
+    '[attr.data-tone]': 'tone()',
+    '[attr.data-shape]': 'shape()',
+    '[attr.data-size]': 'shape() === "circle" ? size() : null',
+    '[class]': 'classes()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiProgress {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+
+  /** El avance, entre 0 y `max`. Sin valor (o `null`), indeterminado. */
+  readonly value = input<number | null | undefined, unknown>(undefined, {
+    transform: (v: unknown) =>
+      v === null || v === undefined || v === '' ? null : numberAttribute(v),
+  });
+  /** El total (100 por defecto). */
+  readonly max = input(100, { transform: numberAttribute });
+  readonly tone = input<MimiProgressTone>('primary');
+  readonly shape = input<MimiProgressShape>('bar');
+  /** Tamaño del círculo. */
+  readonly size = input<MimiProgressSize>('default');
+  /** Nombre accesible (obligatorio, o `aria-labelledby`). */
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  readonly ariaLabelledby = input<string>(undefined, { alias: 'aria-labelledby' });
+  /** Clases del elemento con el rol (la pista o el círculo), mezcladas con `cn()`. */
+  readonly userClass = input('', { alias: 'class' });
+
+  /** `max` válido: un número mayor que 0 (si no, 100). */
+  protected readonly safeMax = computed(() => {
+    const max = this.max();
+    return Number.isFinite(max) && max > 0 ? max : 100;
+  });
+  protected readonly determinate = computed(() => {
+    const value = this.value();
+    return value !== null && value !== undefined && !Number.isNaN(value);
+  });
+  /** El valor acotado entre 0 y `max`. */
+  protected readonly clamped = computed(() =>
+    Math.min(this.safeMax(), Math.max(0, this.value() ?? 0)),
+  );
+  protected readonly percent = computed(() => (this.clamped() / this.safeMax()) * 100);
+  /** En el círculo grande, «64%»; en el pequeño, «64» (como el diseño). */
+  protected readonly circleText = computed(() => {
+    const n = Math.round(this.percent());
+    return this.size() === 'sm' ? `${n}` : `${n}%`;
+  });
+  protected readonly dashArray = computed(() =>
+    this.determinate() ? `${this.percent()} 100` : '28 100',
+  );
+
+  protected readonly classes = computed(() =>
+    cn(
+      this.shape() === 'bar' ? BAR_CLASSES : CIRCLE_CLASSES[this.size()],
+      'align-middle font-sans',
+      this.userClass(),
+    ),
+  );
+  protected readonly barFill = computed(() => cn(BAR_FILL, FILL_BG[this.tone()]));
+  protected readonly barIndeterminate = computed(() => cn(BAR_INDETERMINATE, FILL_BG[this.tone()]));
+  protected readonly trackClass = computed(() =>
+    cn(
+      'fill-none stroke-[color:var(--mimi-progress-track,var(--mimi-track,var(--mimi-input)))]',
+      STROKE[this.size()],
+    ),
+  );
+  protected readonly arcClass = computed(() =>
+    cn(ARC, FILL_STROKE[this.tone()], STROKE[this.size()]),
+  );
+  protected readonly spinClass = computed(() =>
+    cn('absolute inset-0 size-full -rotate-90', !this.determinate() && SPIN),
+  );
+
+  constructor() {
+    if (isDevMode()) afterRenderEffect({ read: () => this.warn() });
+  }
+
+  private warned = false;
+  private warn(): void {
+    if (this.warned) return;
+    if (
+      this.host.getAttribute('aria-label')?.trim() ||
+      this.host.getAttribute('aria-labelledby')?.trim()
+    ) {
+      return;
+    }
+    this.warned = true;
+    console.warn('[Mimi] Progress: no tiene aria-label ni aria-labelledby (su nombre accesible).');
+  }
+}

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

@@ -0,0 +1,12 @@
+// Solo la API pública: MimiSelectList y MimiSelectOutlet son internos (se quedan en './select').
+export {
+  type MimiOption,
+  type MimiOptionGroup,
+  MimiSelect,
+  type MimiSelectFilter,
+  MimiSelectHighlight,
+  MimiSelectImports,
+  MimiSelectOption,
+  type MimiSelectOptionContext,
+} from './select';
+export * from './select-texts';