@mimi-ng/cli 0.2.0 → 0.4.0

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

@@ -0,0 +1,425 @@
+import { Directionality } from '@angular/cdk/bidi';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+  model,
+  numberAttribute,
+  output,
+  signal,
+  viewChildren,
+} from '@angular/core';
+import type { FormValueControl } from '@angular/forms/signals';
+import { cn } from '@/components/ui/utils/cn';
+import { buttonFocusStyles } from '@/components/ui/utils/control-styles';
+import {
+  MIMI_FIELD_CONTROL,
+  injectFieldState,
+  type MimiFieldControl,
+} from '@/components/ui/utils/field-state';
+import { MIMI_SLIDER_TEXT } from './slider-texts';
+
+/*
+ * Slider (docs/design/Mimi F3 Slider OTP Numero Mascara.dc.html, «4 · Slider»; prefijo de tokens
+ * `slider`, spec 13). Pulgares propios con `role="slider"` (patrones «Slider» y «Slider
+ * (Multi-Thumb)» de la APG), como el diseño: decidido por defecto en la G2.7 (opción (c)), porque
+ * el spike de la opción (d) —inputs nativos invisibles— necesitaba Firefox y Safari para
+ * confirmarse. Teclado, arrastre, RTL y el rango sin cruce los programa Mimi.
+ *
+ * Un solo `value` (spec 8): un número o, con `range`, `[desde, hasta]`.
+ */
+
+const optionalNumber = (v: unknown): number | undefined =>
+  v === null || v === undefined || v === '' || Number.isNaN(Number(v)) ? undefined : Number(v);
+
+const first = (v: MimiSliderValue | undefined): number | undefined =>
+  Array.isArray(v) ? v[0] : (v ?? undefined);
+
+/** Una marca: un valor y, si se quiere, su texto debajo de la pista. */
+export type MimiSliderMark = number | { value: number; label?: string };
+/** Cuándo se ve la burbuja con el valor. `auto`: al arrastrar y con el foco del teclado. */
+export type MimiSliderShowValue = 'auto' | 'always' | 'never';
+export type MimiSliderValue = number | [number, number] | null;
+
+const THUMB_BASE = cn(
+  'absolute top-1/2 box-border -translate-y-1/2 cursor-grab rounded-full border-2',
+  'size-[var(--mimi-slider-thumb-size,20px)] bg-[color:var(--mimi-slider-thumb,var(--mimi-thumb,var(--mimi-background)))]',
+  'shadow-[shadow:var(--mimi-slider-thumb-shadow,var(--mimi-shadow-neutral))]',
+  '[transition:box-shadow_.2s_ease,scale_.15s_cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none',
+  // Hover y arrastre suman el halo a la sombra del pulgar (su token), con tipo (estilos 8).
+  'not-aria-disabled:hover:shadow-[shadow:0_0_0_6px_var(--mimi-ring-soft),var(--mimi-slider-thumb-shadow,var(--mimi-shadow-neutral))]',
+  'aria-disabled:cursor-not-allowed',
+  buttonFocusStyles,
+);
+const DRAGGING =
+  'scale-[1.12] cursor-grabbing shadow-[shadow:0_0_0_8px_var(--mimi-ring-soft),var(--mimi-slider-thumb-shadow,var(--mimi-shadow-neutral))]';
+/** Borde del pulgar y color de la parte llena: el relleno o, con error, `destructive`. */
+const FILL = {
+  ok: {
+    bg: 'bg-[color:var(--mimi-slider-fill,var(--mimi-track-fill,var(--mimi-primary)))]',
+    border: 'border-[color:var(--mimi-slider-fill,var(--mimi-track-fill,var(--mimi-primary)))]',
+  },
+  error: { bg: 'bg-destructive', border: 'border-destructive' },
+} as const;
+
+/**
+ * Slider:
+ *
+ * ```html
+ * <mimi-slider aria-label="Volumen" [(value)]="volumen" />
+ * <mimi-slider aria-labelledby="precio" range [min]="0" [max]="1000" [step]="10"
+ *   [format]="moneda" formControlName="precio" />   <!-- [300, 700] -->
+ * ```
+ */
+@Component({
+  selector: 'mimi-slider',
+  template: `
+    <span
+      aria-hidden="true"
+      data-slot="track"
+      class="absolute inset-x-0 h-[var(--mimi-slider-height,6px)] rounded-full bg-[color:var(--mimi-slider-track,var(--mimi-track,var(--mimi-input)))]"
+    ></span>
+    <span
+      aria-hidden="true"
+      data-slot="fill"
+      class="absolute h-[var(--mimi-slider-height,6px)] rounded-full"
+      [class]="fillClass()"
+      [style.inset-inline-start.%]="fillStart()"
+      [style.width.%]="fillWidth()"
+    ></span>
+    @for (mark of markList(); track mark.value) {
+      <span
+        aria-hidden="true"
+        data-slot="mark"
+        class="absolute top-1/2 size-1.5 -translate-y-1/2 rounded-full ltr:-translate-x-1/2 rtl:translate-x-1/2"
+        [class]="
+          mark.inside
+            ? 'bg-primary-foreground'
+            : 'bg-[color:color-mix(in_oklab,var(--mimi-foreground)_30%,transparent)]'
+        "
+        [style.inset-inline-start.%]="mark.percent"
+      ></span>
+      @if (mark.label) {
+        <span
+          aria-hidden="true"
+          data-slot="mark-label"
+          class="absolute top-[26px] text-xs tabular-nums ltr:-translate-x-1/2 rtl:translate-x-1/2"
+          [class]="mark.current ? 'font-semibold text-foreground' : 'text-muted-foreground'"
+          [style.inset-inline-start.%]="mark.percent"
+          >{{ mark.label }}</span
+        >
+      }
+    }
+    @for (thumb of thumbs(); track $index) {
+      <span
+        #thumb
+        role="slider"
+        data-slot="thumb"
+        [class]="thumb.classes"
+        [style.inset-inline-start.%]="thumb.percent"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-label]="thumb.label"
+        [attr.aria-labelledby]="range() ? null : ariaLabelledby() || null"
+        [attr.aria-valuemin]="thumb.min"
+        [attr.aria-valuemax]="thumb.max"
+        [attr.aria-valuenow]="thumb.value"
+        [attr.aria-valuetext]="thumb.text"
+        [attr.aria-orientation]="'horizontal'"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.data-dragging]="dragging() === $index ? '' : null"
+        (keydown)="onKeydown($event, $index)"
+        (focus)="focused.set($index)"
+        (blur)="onThumbBlur()"
+      >
+        @if (thumb.bubble) {
+          <span
+            aria-hidden="true"
+            data-slot="bubble"
+            class="pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 rounded-[7px] bg-tooltip px-2 py-1 text-xs font-semibold whitespace-nowrap text-tooltip-foreground tabular-nums"
+            >{{ thumb.text
+            }}<span
+              class="absolute -bottom-[3px] left-1/2 -ml-[3.5px] size-[7px] rotate-45 bg-tooltip"
+            ></span
+          ></span>
+        }
+      </span>
+    }
+  `,
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-range]': 'range() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-invalid]': 'showInvalid() ? "" : null',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.role]': 'range() ? "group" : null',
+    '(pointerdown)': 'onPointerDown($event)',
+    '(pointermove)': 'onPointerMove($event)',
+    '(pointerup)': 'onPointerUp($event)',
+    '(pointercancel)': 'onPointerUp($event)',
+  },
+  providers: [{ provide: MIMI_FIELD_CONTROL, useExisting: MimiSlider }],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MimiSlider implements FormValueControl<MimiSliderValue>, MimiFieldControl {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  private readonly dir = inject(Directionality).valueSignal;
+  protected readonly text = inject(MIMI_SLIDER_TEXT);
+
+  /** Un número o, con `range`, `[desde, hasta]`. Con `[(value)]` o un formulario. */
+  readonly value = model<MimiSliderValue>(null);
+  /** Dos pulgares que no se cruzan; el valor es `[desde, hasta]`. */
+  readonly range = input(false, { transform: booleanAttribute });
+  /** Mínimo (0 por defecto). También lo escribe Signal Forms desde el esquema. */
+  readonly min = input<NonNullable<MimiSliderValue> | undefined, unknown>(undefined, {
+    transform: optionalNumber,
+  });
+  /** Máximo (100 por defecto). */
+  readonly max = input<NonNullable<MimiSliderValue> | undefined, unknown>(undefined, {
+    transform: optionalNumber,
+  });
+  readonly step = input(1, { transform: numberAttribute });
+  /** Marcas sobre la pista, con su texto debajo si lo tienen. */
+  readonly marks = input<readonly MimiSliderMark[]>([]);
+  /** El texto del valor: `aria-valuetext` y la burbuja. Por defecto, el número. */
+  readonly format = input<(value: number) => string>((value) => String(value));
+  readonly showValue = input<MimiSliderShowValue>('auto');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  /** Los pasa el formulario. Se muestra el error si es inválido y se tocó o modificó. */
+  readonly invalid = input(false, { transform: booleanAttribute });
+  readonly touched = input(false, { transform: booleanAttribute });
+  readonly dirty = input(false, { transform: booleanAttribute });
+  readonly required = input(false, { transform: booleanAttribute });
+  readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' });
+  readonly ariaLabelledby = input<string>(undefined, { alias: 'aria-labelledby' });
+  /** Clases del contenedor, mezcladas con `cn()` (gana la del usuario). */
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Al soltar el pulgar o al salir el foco: marca el control como tocado. */
+  readonly touch = output<void>();
+
+  private readonly thumbEls = viewChildren<ElementRef<HTMLElement>>('thumb');
+  readonly fieldState = injectFieldState();
+  get controlElement(): HTMLElement {
+    return this.thumbEls()[0]?.nativeElement ?? this.host;
+  }
+  readonly showInvalid = computed(() => this.invalid() && (this.touched() || this.dirty()));
+
+  protected readonly focused = signal<number | null>(null);
+  protected readonly dragging = signal<number | null>(null);
+
+  // El tipo de `min` y `max` es el del valor (lo exige `FormValueControl`); se usa el número.
+  private readonly lo = computed(() => Math.min(first(this.min()) ?? 0, first(this.max()) ?? 100));
+  private readonly hi = computed(() => Math.max(first(this.min()) ?? 0, first(this.max()) ?? 100));
+  /** Los valores que se pintan (acotados y en orden), sin tocar el modelo. */
+  private readonly values = computed<number[]>(() => {
+    const value = this.value();
+    if (this.range()) {
+      const [a, b] = Array.isArray(value) ? value : [this.lo(), this.hi()];
+      const x = this.clamp(a);
+      const y = this.clamp(b);
+      return [Math.min(x, y), Math.max(x, y)];
+    }
+    const n = Array.isArray(value) ? value[0] : value;
+    return [this.clamp(n ?? this.lo())];
+  });
+  private percentOf(value: number): number {
+    const span = this.hi() - this.lo();
+    return span > 0 ? ((value - this.lo()) / span) * 100 : 0;
+  }
+
+  /** Nombre del grupo (el aria-label o el texto de la etiqueta), para «Precio, Mínimo». */
+  private readonly groupLabel = computed(() => {
+    const label = this.ariaLabel()?.trim();
+    if (label) return label;
+    const ids = this.ariaLabelledby()?.trim();
+    if (!ids) return '';
+    // Desde la raíz del componente: también funciona fuera del documento (en pruebas).
+    const root = this.host.getRootNode() as ParentNode;
+    return ids
+      .split(/\s+/)
+      .map(
+        (id) =>
+          root.querySelector?.(`[id="${id.replace(/["\\]/g, '\\$&')}"]`)?.textContent?.trim() ?? '',
+      )
+      .join(' ')
+      .trim();
+  });
+
+  protected readonly fillStart = computed(() =>
+    this.range() ? this.percentOf(this.values()[0]) : 0,
+  );
+  protected readonly fillWidth = computed(() => {
+    const values = this.values();
+    return this.range()
+      ? this.percentOf(values[1]) - this.percentOf(values[0])
+      : this.percentOf(values[0]);
+  });
+  private readonly tone = computed(() => FILL[this.showInvalid() ? 'error' : 'ok']);
+  protected readonly fillClass = computed(() => this.tone().bg);
+
+  protected readonly thumbs = computed(() => {
+    const values = this.values();
+    const range = this.range();
+    const show = this.showValue();
+    const group = this.groupLabel();
+    return values.map((value, i) => {
+      const own = range ? (i === 0 ? this.text.minimum : this.text.maximum) : null;
+      const active = this.dragging() === i || this.focused() === i;
+      return {
+        value,
+        percent: this.percentOf(value),
+        // En el rango, cada pulgar no puede pasar al otro.
+        min: range && i === 1 ? values[0] : this.lo(),
+        max: range && i === 0 ? values[1] : this.hi(),
+        text: this.format()(value),
+        label: own ? (group ? `${group}, ${own}` : own) : this.ariaLabel() || null,
+        bubble: show === 'always' || (show === 'auto' && active && !this.disabled()),
+        classes: cn(
+          THUMB_BASE,
+          'ltr:-translate-x-1/2 rtl:translate-x-1/2',
+          this.tone().border,
+          this.dragging() === i && DRAGGING,
+        ),
+      };
+    });
+  });
+
+  protected readonly markList = computed(() => {
+    const values = this.values();
+    const range = this.range();
+    return this.marks().map((mark) => {
+      const value = typeof mark === 'number' ? mark : mark.value;
+      const label = typeof mark === 'number' ? '' : (mark.label ?? '');
+      const inside = range ? value >= values[0] && value <= values[1] : value <= values[0];
+      return {
+        value,
+        label,
+        percent: this.percentOf(this.clamp(value)),
+        inside,
+        current: values.includes(value),
+      };
+    });
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      // 24px de alto: todo el anfitrión recibe el puntero (va el pulgar más cercano), así el
+      // objetivo táctil cumple 2.5.8 aunque los dos pulgares estén juntos (5.17b).
+      'relative flex h-6 w-full touch-none items-center select-none',
+      this.markList().some((m) => m.label) && 'mb-6',
+      this.disabled()
+        ? 'cursor-not-allowed opacity-[var(--mimi-disabled-opacity,0.5)]'
+        : 'cursor-pointer',
+      this.userClass(),
+    ),
+  );
+
+  protected onKeydown(event: KeyboardEvent, index: number): void {
+    if (this.disabled()) return;
+    const step = this.step() > 0 ? this.step() : 1;
+    const rtl = this.dir() === 'rtl';
+    const current = this.values()[index];
+    const next: Record<string, number> = {
+      ArrowRight: current + (rtl ? -step : step),
+      ArrowLeft: current + (rtl ? step : -step),
+      ArrowUp: current + step,
+      ArrowDown: current - step,
+      PageUp: current + step * 10,
+      PageDown: current - step * 10,
+      Home: this.lo(),
+      End: this.hi(),
+    };
+    if (!(event.key in next)) return;
+    event.preventDefault();
+    this.setThumb(index, next[event.key]);
+  }
+
+  /** Puntero en el contenedor: mueve el pulgar más cercano, le da el foco y lo arrastra. */
+  protected onPointerDown(event: PointerEvent): void {
+    if (this.disabled() || event.button !== 0) return;
+    const value = this.valueAt(event.clientX);
+    if (value === null) return;
+    const values = this.values();
+    let index = 0;
+    if (this.range()) {
+      const [a, b] = values;
+      index =
+        Math.abs(value - a) < Math.abs(value - b)
+          ? 0
+          : Math.abs(value - a) > Math.abs(value - b)
+            ? 1
+            : value > b
+              ? 1
+              : 0;
+    }
+    event.preventDefault();
+    this.dragging.set(index);
+    this.host.setPointerCapture?.(event.pointerId);
+    this.thumbEls()[index]?.nativeElement.focus();
+    this.setThumb(index, value);
+  }
+
+  protected onPointerMove(event: PointerEvent): void {
+    const index = this.dragging();
+    if (index === null) return;
+    const value = this.valueAt(event.clientX);
+    if (value !== null) this.setThumb(index, value);
+  }
+
+  protected onPointerUp(event: PointerEvent): void {
+    if (this.dragging() === null) return;
+    this.dragging.set(null);
+    if (this.host.hasPointerCapture?.(event.pointerId)) {
+      this.host.releasePointerCapture(event.pointerId);
+    }
+    this.touch.emit();
+  }
+
+  protected onThumbBlur(): void {
+    this.focused.set(null);
+    if (this.dragging() === null) this.touch.emit();
+  }
+
+  /** El valor bajo una posición del puntero (con el paso; en RTL, de derecha a izquierda). */
+  private valueAt(clientX: number): number | null {
+    const rect = this.host.getBoundingClientRect();
+    if (!rect.width) return null;
+    let ratio = (clientX - rect.left) / rect.width;
+    if (this.dir() === 'rtl') ratio = 1 - ratio;
+    ratio = Math.min(1, Math.max(0, ratio));
+    return this.lo() + ratio * (this.hi() - this.lo());
+  }
+
+  /** Pone un pulgar: redondea al paso, acota y, en el rango, no deja que cruce al otro. */
+  private setThumb(index: number, raw: number): void {
+    let value = this.clamp(this.roundToStep(raw));
+    if (this.range()) {
+      const values = [...this.values()] as [number, number];
+      value = index === 0 ? Math.min(value, values[1]) : Math.max(value, values[0]);
+      values[index] = value;
+      const current = this.value();
+      if (!Array.isArray(current) || current[0] !== values[0] || current[1] !== values[1]) {
+        this.value.set(values);
+      }
+      return;
+    }
+    if (this.value() !== value) this.value.set(value);
+  }
+
+  private clamp(value: number): number {
+    return Math.min(this.hi(), Math.max(this.lo(), Number.isFinite(value) ? value : this.lo()));
+  }
+
+  private roundToStep(value: number): number {
+    const step = this.step() > 0 ? this.step() : 1;
+    const decimals = (String(step).split('.')[1] ?? '').length;
+    const rounded = this.lo() + Math.round((value - this.lo()) / step) * step;
+    return Number(rounded.toFixed(decimals));
+  }
+}

package/dist/templates/components/tabs/tabs.ts

@@ -97,37 +97,75 @@ export class MimiTabsOutlet {
   });
 }
 
+/**
+ * Orientación de la fila de pestañas (B.10): horizontal (por defecto) o vertical, para una
+ * navegación lateral. En vertical, las flechas son ↑/↓ (las pone aria) y el panel va al lado.
+ */
+export type MimiTabsOrientation = 'horizontal' | 'vertical';
+
 /** El contenedor visible de las pestañas (recibe el `class` del usuario). */
 const containerVariants = cva('relative font-sans', {
   variants: {
     variant: {
-      underline: 'border-b border-border',
+      underline: 'border-border',
       // 4px fijos (no rem): el indicador resta los mismos 8px.
-      pill: 'max-w-[520px] rounded-[calc(var(--mimi-radius)_+_4px)] bg-[color:var(--mimi-tabs-pill-bg,var(--mimi-muted))] p-[4px]',
+      pill: 'rounded-[calc(var(--mimi-radius)_+_4px)] bg-[color:var(--mimi-tabs-pill-bg,var(--mimi-muted))] p-[4px]',
     },
+    orientation: { horizontal: '', vertical: 'self-start' },
   },
-  defaultVariants: { variant: 'underline' },
+  compoundVariants: [
+    { variant: 'underline', orientation: 'horizontal', class: 'border-b' },
+    { variant: 'underline', orientation: 'vertical', class: 'border-s' },
+    { variant: 'pill', orientation: 'horizontal', class: 'max-w-[520px]' },
+  ],
+  defaultVariants: { variant: 'underline', orientation: 'horizontal' },
 });
 
 /**
- * El indicador: columnas iguales, así que su ancho es el de una columna y se desplaza su propio
- * ancho por cada pestaña (sin medir nada). En derecha a izquierda, al revés.
+ * El indicador: columnas (o filas) iguales, así que su tamaño es el de una pestaña y se desplaza
+ * su propio ancho (o alto) por cada una (sin medir nada). En derecha a izquierda, al revés.
  */
 const indicatorVariants = cva(
   [
     'pointer-events-none absolute',
-    'translate-x-[calc(100%_*_var(--mimi-tabs-index))] rtl:translate-x-[calc(-100%_*_var(--mimi-tabs-index))]',
     'transition-[translate] duration-[450ms] ease-[var(--mimi-tabs-spring,cubic-bezier(0.3,1.35,0.5,1))] motion-reduce:transition-none',
   ],
   {
     variants: {
       variant: {
-        underline:
-          '-bottom-px start-0 h-0.5 w-[calc(100%_/_var(--mimi-tabs-count))] rounded-[2px] bg-[color:var(--mimi-tabs-indicator,var(--mimi-foreground))]',
-        pill: 'start-[4px] top-[4px] bottom-[4px] w-[calc((100%_-_8px)_/_var(--mimi-tabs-count))] rounded-[var(--mimi-radius)] bg-[color:var(--mimi-tabs-pill-active,var(--mimi-card))] shadow-neutral',
+        underline: 'rounded-[2px] bg-[color:var(--mimi-tabs-indicator,var(--mimi-foreground))]',
+        pill: 'rounded-[var(--mimi-radius)] bg-[color:var(--mimi-tabs-pill-active,var(--mimi-card))] shadow-neutral',
+      },
+      orientation: {
+        horizontal:
+          'translate-x-[calc(100%_*_var(--mimi-tabs-index))] rtl:translate-x-[calc(-100%_*_var(--mimi-tabs-index))]',
+        vertical: 'translate-y-[calc(100%_*_var(--mimi-tabs-index))]',
       },
     },
-    defaultVariants: { variant: 'underline' },
+    compoundVariants: [
+      {
+        variant: 'underline',
+        orientation: 'horizontal',
+        class: '-bottom-px start-0 h-0.5 w-[calc(100%_/_var(--mimi-tabs-count))]',
+      },
+      {
+        // La barra va a la izquierda (al inicio), sobre el borde del contenedor.
+        variant: 'underline',
+        orientation: 'vertical',
+        class: '-start-px top-0 w-0.5 h-[calc(100%_/_var(--mimi-tabs-count))]',
+      },
+      {
+        variant: 'pill',
+        orientation: 'horizontal',
+        class: 'start-[4px] top-[4px] bottom-[4px] w-[calc((100%_-_8px)_/_var(--mimi-tabs-count))]',
+      },
+      {
+        variant: 'pill',
+        orientation: 'vertical',
+        class: 'start-[4px] end-[4px] top-[4px] h-[calc((100%_-_8px)_/_var(--mimi-tabs-count))]',
+      },
+    ],
+    defaultVariants: { variant: 'underline', orientation: 'horizontal' },
   },
 );
 
@@ -148,8 +186,10 @@ const tabVariants = cva(
         // 34px sin token (el token de alto es el de la subrayada): plan D6.
         pill: 'h-[34px] gap-1.5 rounded-[var(--mimi-radius)] text-[13.5px] [&_svg]:size-[15px] [&_svg]:shrink-0',
       },
+      // En vertical, el texto al inicio, como una navegación lateral.
+      orientation: { horizontal: '', vertical: 'justify-start px-3 text-start' },
     },
-    defaultVariants: { variant: 'underline' },
+    defaultVariants: { variant: 'underline', orientation: 'horizontal' },
   },
 );
 
@@ -196,11 +236,12 @@ const COUNT_CLASSES =
             <div
               ngTabList
               data-slot="tablist"
+              [orientation]="orientation()"
               [selectedTab]="painted()"
               (selectedTabChange)="fromAria($event)"
               [attr.aria-label]="ariaLabel() || null"
               [attr.aria-labelledby]="ariaLabelledby() || null"
-              [class]="tablistClasses"
+              [class]="tablistClasses()"
               (click)="choose($event)"
               (keydown.enter)="choose($event)"
               (keydown.space)="choose($event)"
@@ -248,12 +289,19 @@ const COUNT_CLASSES =
     </div>
   `,
   host: {
-    style: 'display: flex; flex-direction: column; gap: 14px',
+    // flex-direction va en su binding (B.10), no aquí.
+    style: 'display: flex; gap: 14px',
     // El class es del contenedor de las pestañas; aria-label y aria-labelledby, del tablist.
     '[attr.class]': 'null',
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
     '[attr.data-variant]': 'variant()',
+    '[attr.data-orientation]': 'orientation()',
+    // En vertical, las pestañas a un lado y el panel al otro. Bindings sueltos (no [style] con
+    // un objeto, que sumaba ɵɵstyleMap al JS inicial: spec 10).
+    // Siempre con valor: con null, Angular quita también el flex-direction del style estático.
+    '[style.flex-direction]': 'orientation() === "vertical" ? "row" : "column"',
+    '[style.align-items]': 'orientation() === "vertical" ? "flex-start" : null',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -264,6 +312,8 @@ export class MimiTabs {
   readonly value = model<string | undefined>(undefined);
   /** Por defecto, `underline`. */
   readonly variant = input<MimiTabsVariant>('underline');
+  /** Por defecto, `horizontal`. Puede cambiar en vivo (por ejemplo, con el ancho). */
+  readonly orientation = input<MimiTabsOrientation>('horizontal');
   /** Conserva el contenido de los paneles al cambiar de pestaña (por defecto se destruye). */
   readonly preserveContent = input(false, { transform: booleanAttribute });
   /** Nombre accesible de la fila de pestañas. */
@@ -298,22 +348,37 @@ export class MimiTabs {
     this.tabs().findIndex((tab) => tab.value() === this.painted()),
   );
 
+  private readonly variants = computed(() => ({
+    variant: this.variant(),
+    orientation: this.orientation(),
+  }));
   protected readonly containerClasses = computed(() =>
-    cn(containerVariants({ variant: this.variant() }), this.userClass()),
+    cn(containerVariants(this.variants()), this.userClass()),
   );
-  protected readonly indicatorClasses = computed(() =>
-    indicatorVariants({ variant: this.variant() }),
-  );
-  protected readonly tabClasses = computed(() => tabVariants({ variant: this.variant() }));
+  protected readonly indicatorClasses = computed(() => indicatorVariants(this.variants()));
+  // Con cn(): la vertical cambia `justify-center` por `justify-start` (sin él, quedaban las dos y
+  // ganaba la que va después en el CSS).
+  protected readonly tabClasses = computed(() => cn(tabVariants(this.variants())));
   // Sin outline-none: en Tailwind 4 pone --tw-outline-style en none y anula el anillo de foco.
-  protected readonly tablistClasses = cn(
-    'grid grid-cols-[repeat(var(--mimi-tabs-count),minmax(0,1fr))] rounded-[inherit]',
-    // Con todas deshabilitadas, el foco queda en la fila (aria).
-    buttonFocusStyles,
+  // Las clases de cada orientación, completas (no variantes encadenadas: selectores largos, G2.1).
+  protected readonly tablistClasses = computed(() =>
+    cn(
+      this.orientation() === 'vertical'
+        ? 'grid grid-rows-[repeat(var(--mimi-tabs-count),minmax(0,1fr))]'
+        : 'grid grid-cols-[repeat(var(--mimi-tabs-count),minmax(0,1fr))]',
+      'rounded-[inherit]',
+      // Con todas deshabilitadas, el foco queda en la fila (aria).
+      buttonFocusStyles,
+    ),
   );
   protected readonly countClasses = COUNT_CLASSES;
   protected readonly panelClasses = computed(() =>
-    cn('px-0.5 py-1', buttonFocusStyles, this.panelClass()),
+    cn(
+      'px-0.5 py-1',
+      this.orientation() === 'vertical' && 'min-w-0 flex-1',
+      buttonFocusStyles,
+      this.panelClass(),
+    ),
   );
 
   /** El último valor que puso Mimi (no viene de fuera). */

package/dist/templates/components/tags-input/index.ts

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

package/dist/templates/components/tags-input/tags-input-texts.ts

@@ -0,0 +1,44 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos de Tags Input, en archivo propio (como Select, G1.5). Los del chip (quitar y los
+ * anuncios) están en `chip-texts.ts`.
+ */
+
+export interface MimiTagsInputText {
+  /** Ayuda debajo del campo. */
+  help: string;
+  /** La etiqueta ya está en la lista. */
+  duplicate: (tag: string) => string;
+  /** Se llegó al máximo. */
+  full: (max: number) => string;
+  /** Placeholder con el máximo alcanzado. */
+  fullPlaceholder: string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_TAGS_INPUT_TEXT_EN: MimiTagsInputText = {
+  help: 'Enter or comma to add · Backspace removes the last one',
+  duplicate: (tag) => `“${tag}” is already in the list.`,
+  full: (max) => `You reached the limit of ${max}. Remove one to add another.`,
+  fullPlaceholder: 'Limit reached',
+};
+
+/** Textos en español: `provideMimiTagsInputText(MIMI_TAGS_INPUT_TEXT_ES)`. */
+export const MIMI_TAGS_INPUT_TEXT_ES: MimiTagsInputText = {
+  help: 'Enter o coma para agregar · Backspace quita la última',
+  duplicate: (tag) => `«${tag}» ya está en la lista.`,
+  full: (max) => `Llegaste al límite de ${max} etiquetas. Quita una para agregar otra.`,
+  fullPlaceholder: 'Límite alcanzado',
+};
+
+/** Textos activos. Sin `provideMimiTagsInputText`, los predeterminados en inglés. */
+export const MIMI_TAGS_INPUT_TEXT = new InjectionToken<MimiTagsInputText>('MIMI_TAGS_INPUT_TEXT', {
+  providedIn: 'root',
+  factory: () => MIMI_TAGS_INPUT_TEXT_EN,
+});
+
+/** Cambia los textos de Tags Input. Lo que no definas sigue en inglés. */
+export function provideMimiTagsInputText(text: Partial<MimiTagsInputText>): Provider {
+  return { provide: MIMI_TAGS_INPUT_TEXT, useValue: { ...MIMI_TAGS_INPUT_TEXT_EN, ...text } };
+}