@mimi-ng/cli 0.2.0 → 0.4.0

package/dist/templates/components/password/password.ts

@@ -0,0 +1,363 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  afterNextRender,
+  afterRenderEffect,
+  booleanAttribute,
+  computed,
+  contentChild,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { MimiInput } from '@/components/ui/input';
+import { cn } from '@/components/ui/utils/cn';
+import { buttonFocusStyles } from '@/components/ui/utils/control-styles';
+import { MIMI_PASSWORD_TEXT } from './password-texts';
+
+/*
+ * Password (docs/design/Mimi F3 Slider OTP Numero Mascara.dc.html, «8 · Password»; prefijo de
+ * tokens `password`, spec 13). Un contenedor que proyecta el `<input mimiInput>` del usuario
+ * (CLAUDE.md, regla 6: el valor y el formulario son del input nativo) y le agrega el botón de
+ * mostrar u ocultar y, si se pide, el medidor.
+ *
+ * El botón cambia el `type` del mismo input (no lo reemplaza: el gestor de contraseñas y el
+ * formulario conservan la referencia). El medidor es orientativo, no una medida de seguridad.
+ */
+
+/** 0: vacío; 1: débil; 2: media; 3: fuerte. */
+export type MimiPasswordLevel = 0 | 1 | 2 | 3;
+
+/** Una regla del medidor: su texto y si la contraseña la cumple. */
+export interface MimiPasswordRule {
+  label: string;
+  test: (value: string) => boolean;
+}
+
+/**
+ * La heurística del diseño (`strength()`), generalizada a cualquier lista de reglas: todas,
+ * fuerte; al menos la mitad, media; menos, débil. Con las cuatro por defecto: 0–1 débil, 2–3
+ * media, 4 fuerte.
+ */
+export function mimiPasswordLevel(
+  value: string,
+  rules: readonly MimiPasswordRule[],
+): MimiPasswordLevel {
+  if (!value) return 0;
+  if (!rules.length) return 1;
+  const passed = rules.filter((rule) => rule.test(value)).length;
+  if (passed === rules.length) return 3;
+  return passed >= rules.length / 2 ? 2 : 1;
+}
+
+const BOX_CLASSES = cn(
+  'relative flex w-full min-w-0 items-center gap-1.5 font-sans text-foreground mimi-transition',
+  'h-[var(--mimi-input-height,var(--mimi-control-height,2.5rem))] rounded-[var(--mimi-input-radius,var(--mimi-radius,0.75rem))] ps-3 pe-1',
+  'border border-input bg-input-background',
+  'not-data-[disabled]:hover:border-input-hover',
+  'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring-soft',
+  'data-[invalid]:border-destructive data-[invalid]:focus-within:border-destructive data-[invalid]:focus-within:ring-destructive-ring',
+  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[var(--mimi-disabled-opacity,0.5)]',
+  // El input del usuario (mimiInput) va sin su caja: la caja es esta. Sin el ojo de Edge.
+  '[&_input]:h-full [&_input]:min-w-0 [&_input]:flex-1 [&_input]:rounded-none [&_input]:border-0 [&_input]:bg-transparent [&_input]:p-0 [&_input]:shadow-none',
+  '[&_input]:focus-visible:ring-0 [&_input]:disabled:opacity-100 [&_input::-ms-reveal]:hidden',
+);
+
+const TOGGLE_CLASSES = cn(
+  'inline-flex shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-muted-foreground mimi-transition',
+  'size-[var(--mimi-password-toggle-size,32px)] rounded-[var(--mimi-password-toggle-radius,var(--mimi-radius-sm))]',
+  '[&_svg]:size-4 [&_svg]:shrink-0',
+  'enabled:hover:bg-[color:var(--mimi-password-toggle-hover,var(--mimi-accent))] enabled:hover:text-foreground enabled:active:scale-(--mimi-press-scale-sm)',
+  'disabled:cursor-not-allowed',
+  buttonFocusStyles,
+);
+
+/** Barra vacía y barras con el color del nivel (globales del Grupo 2 con respaldo, G2.0b). */
+const BAR_EMPTY = 'bg-[color:var(--mimi-password-meter-track,var(--mimi-track,var(--mimi-input)))]';
+const BAR_FILL: Record<1 | 2 | 3, string> = {
+  1: 'bg-[color:var(--mimi-strength-weak,var(--mimi-destructive))]',
+  2: 'bg-[color:var(--mimi-strength-medium,var(--mimi-warning))]',
+  3: 'bg-[color:var(--mimi-strength-strong,var(--mimi-success))]',
+};
+const LEVEL_TEXT: Record<1 | 2 | 3, string> = {
+  1: 'text-destructive-soft-foreground',
+  2: 'text-warning-soft-foreground',
+  3: 'text-success-soft-foreground',
+};
+
+let nextId = 0;
+
+/**
+ * Password:
+ *
+ * ```html
+ * <mimi-password meter>
+ *   <input mimiInput type="password" autocomplete="new-password" formControlName="password" />
+ * </mimi-password>
+ * ```
+ *
+ * El `type`, el `autocomplete` y el nombre del campo son del usuario.
+ */
+@Component({
+  selector: 'mimi-password',
+  template: `
+    <div
+      data-slot="box"
+      [class]="boxClasses()"
+      [attr.data-invalid]="invalid() ? '' : null"
+      [attr.data-disabled]="isDisabled() ? '' : null"
+    >
+      <ng-content />
+      <button
+        type="button"
+        data-slot="toggle"
+        [class]="toggleClasses"
+        [attr.aria-label]="text.show"
+        [attr.aria-pressed]="shown()"
+        [disabled]="isDisabled()"
+        (click)="toggle()"
+      >
+        @if (shown()) {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <!-- Lucide eye-off (ISC) -->
+            <path
+              d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+            />
+            <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+            <path
+              d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+            />
+            <path d="m2 2 20 20" />
+          </svg>
+        } @else {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <!-- Lucide eye (ISC) -->
+            <path
+              d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+            />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        }
+      </button>
+    </div>
+    @if (meter()) {
+      <div data-slot="meter" class="flex flex-col gap-2" [id]="meterId">
+        <div class="flex items-center gap-2.5">
+          <div
+            aria-hidden="true"
+            class="grid flex-1 grid-cols-4 gap-[var(--mimi-password-meter-gap,4px)]"
+          >
+            @for (bar of bars(); track $index) {
+              <span
+                class="h-[var(--mimi-password-meter-height,6px)] rounded-full transition-colors duration-300 motion-reduce:transition-none"
+                [class]="bar"
+              ></span>
+            }
+          </div>
+          <span
+            data-slot="level"
+            class="min-w-12 text-end text-[13px] font-semibold"
+            [class]="levelClass()"
+            >{{ levelText() }}</span
+          >
+        </div>
+        @if (activeRules().length) {
+          <ul class="m-0 grid list-none grid-cols-2 gap-x-3 gap-y-1 p-0">
+            @for (rule of ruleState(); track rule.label) {
+              <li
+                class="flex items-center gap-1.5 text-[12.5px]"
+                [class]="rule.ok ? 'text-success-soft-foreground' : 'text-muted-foreground'"
+                [attr.data-state]="rule.ok ? 'met' : 'unmet'"
+              >
+                @if (rule.ok) {
+                  <svg
+                    class="size-3.5 shrink-0"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <!-- Lucide circle-check (ISC) -->
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="m9 12 2 2 4-4" />
+                  </svg>
+                } @else {
+                  <svg
+                    class="size-3.5 shrink-0"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <!-- Lucide circle (ISC) -->
+                    <circle cx="12" cy="12" r="10" />
+                  </svg>
+                }
+                {{ rule.label }}
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    }
+  `,
+  host: {
+    class: 'flex w-full min-w-0 flex-col gap-2',
+    '[attr.data-state]': 'shown() ? "shown" : "hidden"',
+    '[attr.data-level]': 'meter() ? level() : null',
+    '(input)': 'read()',
+    '(change)': 'read()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiPassword {
+  private readonly announcer = inject(LiveAnnouncer);
+  protected readonly text = inject(MIMI_PASSWORD_TEXT);
+
+  /** Muestra el medidor (nivel y reglas) debajo del campo. */
+  readonly meter = input(false, { transform: booleanAttribute });
+  /**
+   * Reglas del medidor. Por defecto, las cuatro del diseño. Con `[]` no hay lista y la heurística
+   * no tiene qué contar (todo es «débil»): el nivel lo da `strength`.
+   */
+  readonly rules = input<readonly MimiPasswordRule[] | undefined>(undefined);
+  /** Nivel propio (0 a 3). Por defecto, la heurística de las reglas (orientativa). */
+  readonly strength = input<((value: string) => MimiPasswordLevel) | undefined>(undefined);
+  /** Clases de la caja, mezcladas con `cn()` (gana la del usuario). */
+  readonly userClass = input('', { alias: 'class' });
+
+  private readonly field = contentChild(MimiInput);
+  /** El input del usuario: el de mimiInput o, si no lo usa, el primero que haya. */
+  private readonly inputElement = computed(
+    () => (this.field()?.controlElement as HTMLInputElement | undefined) ?? null,
+  );
+
+  protected readonly shown = signal(false);
+  protected readonly value = signal('');
+  /** `disabled` escrito en el input (sin formulario). */
+  private readonly nativeDisabled = signal(false);
+  protected readonly isDisabled = computed(
+    () => this.nativeDisabled() || (this.field()?.fieldState.disabled() ?? false),
+  );
+  protected readonly invalid = computed(() => this.field()?.showInvalid() ?? false);
+
+  readonly meterId = `mimi-password-meter-${nextId++}`;
+
+  /** Reglas activas (las del usuario o las cuatro del diseño, con los textos del idioma). */
+  protected readonly activeRules = computed<readonly MimiPasswordRule[]>(
+    () =>
+      this.rules() ?? [
+        { label: this.text.minLength, test: (v) => v.length >= 8 },
+        { label: this.text.uppercase, test: (v) => /\p{Lu}/u.test(v) },
+        { label: this.text.number, test: (v) => /\d/.test(v) },
+        { label: this.text.symbol, test: (v) => /[^\p{L}\p{N}\s]/u.test(v) },
+      ],
+  );
+  protected readonly ruleState = computed(() =>
+    this.activeRules().map((rule) => ({ label: rule.label, ok: rule.test(this.value()) })),
+  );
+  readonly level = computed<MimiPasswordLevel>(() => {
+    const value = this.value();
+    if (!value) return 0;
+    const own = this.strength();
+    return own ? own(value) : mimiPasswordLevel(value, this.activeRules());
+  });
+  protected readonly levelText = computed(() => {
+    const level = this.level();
+    return level === 0 ? '' : [this.text.weak, this.text.medium, this.text.strong][level - 1];
+  });
+  protected readonly levelClass = computed(() => {
+    const level = this.level();
+    return level === 0 ? 'text-muted-foreground' : LEVEL_TEXT[level];
+  });
+  /** Barras llenas como el diseño (`bars()`): débil 1, media 2 o 3 (según las reglas), fuerte 4. */
+  protected readonly bars = computed(() => {
+    const level = this.level();
+    if (level === 0) return [BAR_EMPTY, BAR_EMPTY, BAR_EMPTY, BAR_EMPTY];
+    const passed = this.ruleState().filter((r) => r.ok).length;
+    const filled = level === 3 ? 4 : level === 2 ? Math.max(2, Math.min(passed, 3)) : 1;
+    return [0, 1, 2, 3].map((i) => (i < filled ? BAR_FILL[level] : BAR_EMPTY));
+  });
+
+  protected readonly boxClasses = computed(() => cn(BOX_CLASSES, this.userClass()));
+  protected readonly toggleClasses = TOGGLE_CLASSES;
+
+  /** El último nivel anunciado: solo se anuncia un cambio que viene de escribir. */
+  private announced: MimiPasswordLevel = 0;
+  private typed = false;
+
+  constructor() {
+    afterNextRender(() => {
+      const el = this.inputElement();
+      if (!el) return;
+      this.value.set(el.value);
+      this.announced = this.level();
+      this.nativeDisabled.set(el.disabled);
+    });
+    // El medidor describe el input (sin borrar el aria-describedby del usuario ni el de
+    // mimi-form-field).
+    afterRenderEffect({
+      write: () => {
+        const el = this.inputElement();
+        if (!el) return;
+        const ids = (el.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+        const has = ids.includes(this.meterId);
+        if (this.meter() && !has) ids.push(this.meterId);
+        if (!this.meter() && has) ids.splice(ids.indexOf(this.meterId), 1);
+        if (ids.length) el.setAttribute('aria-describedby', ids.join(' '));
+        else el.removeAttribute('aria-describedby');
+      },
+    });
+    inject(DestroyRef).onDestroy(() => {
+      const el = this.inputElement();
+      if (el) el.type = 'password';
+    });
+  }
+
+  /** Muestra u oculta: cambia el `type` del mismo input. El foco se queda en el botón. */
+  protected toggle(): void {
+    const el = this.inputElement();
+    if (!el || this.isDisabled()) return;
+    const shown = !this.shown();
+    el.type = shown ? 'text' : 'password';
+    this.shown.set(shown);
+  }
+
+  /** Lee el valor al escribir y anuncia el nivel solo si cambió. */
+  protected read(): void {
+    const el = this.inputElement();
+    if (!el) return;
+    this.typed = true;
+    this.value.set(el.value);
+    this.nativeDisabled.set(el.disabled);
+    const level = this.level();
+    if (this.meter() && this.typed && level !== this.announced) {
+      this.announced = level;
+      if (level > 0) void this.announcer.announce(this.text.announce(this.levelText()), 'polite');
+    }
+  }
+}

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

@@ -278,7 +278,10 @@ export class MimiPopover {
     this.arrowOffset.set(trigger && panel ? mimiArrowOffset(trigger, panel, side) : null);
   }
 
-  /** Al abrir, el foco va al primer elemento enfocable del panel o, si no hay, al panel. */
+  /**
+   * 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(
       {
@@ -286,9 +289,14 @@ export class MimiPopover {
           const panel = this.panel()?.nativeElement;
           if (!panel || this.state() !== 'open') return;
           this.warnMissingLabel();
-          const first = Array.from(panel.querySelectorAll<HTMLElement>('*')).find(
-            (element) => this.checker.isFocusable(element) && this.checker.isTabbable(element),
-          );
+          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();
         },
       },

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/select.ts

@@ -818,9 +818,10 @@ export class MimiSelect<T = unknown> implements FormValueControl<T | null>, Mimi
   protected readonly clearClasses = CLEAR_CLASSES;
   protected readonly searchInputClasses = SEARCH_INPUT_CLASSES;
   protected readonly viewportMargin = MIMI_VIEWPORT_MARGIN;
-  /** En el lado pedido (debajo, por defecto); si no cabe, en el opuesto. */
+  /** En el lado pedido (debajo, por defecto); si no cabe, en el opuesto. Con las tres
+   *  alineaciones de cada lado (5.17a), sin pasar a los costados. */
   protected readonly positions = computed(() =>
-    mimiConnectedPositions(this.side(), this.align(), OFFSET).slice(0, 2),
+    mimiConnectedPositions(this.side(), this.align(), OFFSET).slice(0, 6),
   );
 
   protected readonly classes = computed(() => cn(TRIGGER_CLASSES, this.userClass()));

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

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

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

@@ -0,0 +1,26 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/** Textos de Slider, en archivo propio (como Select, G1.5). */
+export interface MimiSliderText {
+  /** Nombre del pulgar de abajo en el rango. */
+  minimum: string;
+  /** Nombre del pulgar de arriba en el rango. */
+  maximum: string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_SLIDER_TEXT_EN: MimiSliderText = { minimum: 'Minimum', maximum: 'Maximum' };
+
+/** Textos en español: `provideMimiSliderText(MIMI_SLIDER_TEXT_ES)`. */
+export const MIMI_SLIDER_TEXT_ES: MimiSliderText = { minimum: 'Mínimo', maximum: 'Máximo' };
+
+/** Textos activos. Sin `provideMimiSliderText`, los predeterminados en inglés. */
+export const MIMI_SLIDER_TEXT = new InjectionToken<MimiSliderText>('MIMI_SLIDER_TEXT', {
+  providedIn: 'root',
+  factory: () => MIMI_SLIDER_TEXT_EN,
+});
+
+/** Cambia los textos de Slider. Lo que no definas sigue en inglés. */
+export function provideMimiSliderText(text: Partial<MimiSliderText>): Provider {
+  return { provide: MIMI_SLIDER_TEXT, useValue: { ...MIMI_SLIDER_TEXT_EN, ...text } };
+}