@kaufmann-lab/ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",

package/src/tokens/base.css

@@ -31,8 +31,15 @@
    */
   --kf-color-tertiary-deep: #003252;
 
-  --kf-color-secondary: #e6750c;
-  --kf-color-secondary-hover: #c4650a;
+  /*
+   * Oscurecido desde el naranja de marca original (#e6750c) — con texto
+   * blanco (kf-button variant="secondary") el tono original daba 3.04:1,
+   * por debajo del mínimo WCAG AA de 4.5:1 para texto normal. Este valor
+   * da 4.56:1; `-hover` sube a 5.42:1. `-strong` (pensado para texto sobre
+   * fondo claro, no fondo de botón) no se tocó: ya cumplía de sobra.
+   */
+  --kf-color-secondary: #b85d09;
+  --kf-color-secondary-hover: #a55408;
   --kf-color-secondary-soft: #fff0e3;
   --kf-color-secondary-strong: #954e08;
 
@@ -45,10 +52,16 @@
   --kf-color-warning-soft: #fff8db;
   --kf-color-warning-strong: #8a6a00;
 
-  --kf-color-error: #eb5757;
+  /*
+   * Oscurecido desde el rojo original (#eb5757) — con texto blanco
+   * (kf-button variant="danger") el tono original daba 3.48:1, por debajo
+   * del mínimo WCAG AA de 4.5:1. Este valor da 5.15:1; `-hover` sube a
+   * 6.09:1. `-strong` no se tocó: ya cumplía de sobra (7.02:1).
+   */
+  --kf-color-error: #bc4545;
   /* Usado también como estado hover/active del botón `danger` — mismo rojo
      que "error", ver Button.ts (el PDF define un único rojo semántico). */
-  --kf-color-error-hover: #d64545;
+  --kf-color-error-hover: #a93e3e;
   --kf-color-error-soft: #fdecec;
   --kf-color-error-strong: #a42d2d;
 

package/src/tokens/themes/andes-maq.css

@@ -19,7 +19,10 @@
   --kf-color-primary-active: #000000;
   --kf-color-primary-soft: #f1f4f9;
 
-  --kf-color-secondary: #c47f00;
-  --kf-color-secondary-hover: #a66900;
+  /* Oscurecido desde #c47f00 (3.29:1 con texto blanco) para cumplir WCAG AA
+     (4.5:1) en kf-button variant="secondary". Mismo criterio que divemotor,
+     ver base.css. */
+  --kf-color-secondary: #9c6500;
+  --kf-color-secondary-hover: #8d5900;
   --kf-color-secondary-soft: #fdf3e0;
 }

package/src/tokens/themes/divemotor.css

@@ -19,7 +19,9 @@
   --kf-color-primary-active: #004f9e;
   --kf-color-primary-soft: #e8f2ff;
 
-  --kf-color-secondary: #e6750c;
-  --kf-color-secondary-hover: #c4650a;
+  /* Ver el comentario del mismo cambio en base.css: oscurecido para cumplir
+     WCAG AA (4.5:1) con texto blanco en kf-button variant="secondary". */
+  --kf-color-secondary: #b85d09;
+  --kf-color-secondary-hover: #a55408;
   --kf-color-secondary-soft: #fff0e3;
 }

package/types/kaufmann-lab-ui.d.ts

@@ -2,8 +2,14 @@ import * as _angular_core from '@angular/core';
 import { AfterContentInit, TemplateRef, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-/** Nombre de cada uno de los 59 íconos del design system (página 5). */
-type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'download' | 'edit' | 'external-link' | 'eye' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'inbox' | 'layers' | 'list' | 'map' | 'map-pin' | 'menu' | 'mic' | 'mic-off' | 'more-vertical' | 'pause' | 'phone' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x';
+/**
+ * Nombre de cada ícono del design system. Página 5 del PDF fija un set de
+ * 59; `eye-off` es una extensión propia por fuera de ese set, agregada para
+ * el toggle de mostrar/ocultar contraseña de `Input` — no hay un ícono de
+ * "ojo tachado" en la spec original porque esa interacción no estaba
+ * contemplada ahí.
+ */
+type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'inbox' | 'layers' | 'list' | 'map' | 'map-pin' | 'menu' | 'mic' | 'mic-off' | 'more-vertical' | 'pause' | 'phone' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x';
 type IconSize = 'sm' | 'md' | 'lg';
 /**
  * Ícono de trazo del design system — 59 glyphs (página 5), grilla 24×24,
@@ -323,15 +329,22 @@ declare class Carousel implements AfterContentInit {
  * forms) queda en su valor por defecto — igual que `disabled` combina el
  * input signal con `setDisabledState` en el resto de la librería.
  *
+ * `invalid` pinta el recuadro en rojo y setea `aria-invalid` en el `<input>`
+ * nativo — mismo mecanismo que `Input.invalid`, para el caso típico de un
+ * checkbox obligatorio (ej. "Acepto términos y condiciones") sin marcar.
+ *
  *   <kf-checkbox label="Aceptar términos" [(checked)]="accepted" />
  *   <kf-checkbox label="Seleccionar todo" [indeterminate]="isPartial()" />
  *   <kf-checkbox label="Notificaciones" formControlName="notifications" />
+ *   <kf-checkbox label="Acepto los términos y condiciones" [invalid]="submitted() && !accepted()" />
  */
 declare class Checkbox implements ControlValueAccessor {
     readonly label: _angular_core.InputSignal<string | undefined>;
     readonly checked: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Recuadro en rojo + aria-invalid — ej. checkbox obligatorio sin marcar. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
     private readonly inputRef;
     /** Callbacks registrados por Forms; no-op hasta que registerOnChange/Touched las reemplacen. */
@@ -345,7 +358,7 @@ declare class Checkbox implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Checkbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Checkbox, "kf-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Checkbox, "kf-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -666,13 +679,21 @@ declare class Field {
  * No reemplaza al `<label>` nativo — lo envuelve, para no perder la
  * asociación de accesibilidad `for`/`id` con el control real.
  *
+ * `required` agrega un asterisco visual en el tono de error, separado del
+ * texto por un espacio y marcado `aria-hidden` — el estado obligatorio real
+ * para lectores de pantalla lo comunica el propio control (`aria-required`
+ * / `required` en el `<input>`/`<select>` asociado), no este label.
+ *
  *   <kf-field-label [for]="inputId">Patente o VIN</kf-field-label>
+ *   <kf-field-label [for]="inputId" required>Correo electrónico</kf-field-label>
  */
 declare class FieldLabel {
     /** `id` del control asociado — se refleja como `for` en el `<label>` interno. */
     readonly for: _angular_core.InputSignal<string | undefined>;
+    /** Muestra un asterisco visual indicando que el campo es obligatorio. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldLabel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Forma normalizada interna de cada opción, ya resuelta a value/label. */
@@ -754,30 +775,67 @@ declare class FolderTabs {
  *   <kf-input label="Placa" icon="car" placeholder="ABC-123" hint="Formato: 3 letras + 3 números" />
  *   <input kf-input formControlName="email" type="email" />
  *
- * Nota sobre "icon": todavía no existe un componente Icon / sprite SVG en esta
- * librería. El prop se acepta igual para no romper el contrato de la spec,
- * pero por ahora solo reserva el espacio visual (placeholder vacío) — no
- * renderiza ningún glyph real.
+ * `invalid` + `errorMessage` cubren el estado de error: con `invalid` el
+ * borde pasa a rojo (`--kf-color-error`) y se setea `aria-invalid="true"` en
+ * el `<input>` nativo; `errorMessage` reemplaza el `hint` neutro por un
+ * mensaje en rojo con `role="alert"`, para que un lector de pantalla lo
+ * anuncie apenas aparece (a diferencia de `hint`, que es solo informativo y
+ * nunca interrumpe). Si se pasan ambos, `errorMessage` tiene prioridad
+ * visual sobre `hint` — no tiene sentido mostrar los dos a la vez.
+ *
+ *   <kf-input label="Correo" formControlName="email"
+ *     [invalid]="email.invalid && email.touched"
+ *     [errorMessage]="email.touched && email.hasError('required') ? 'Ingresa tu correo.' : undefined" />
+ *
+ * `toggleable` solo tiene efecto cuando `type="password"`: agrega un botón
+ * de ojo al final del campo que alterna la visibilidad del valor tipeado
+ * (cambia el `type` real del `<input>` nativo entre `password` y `text`,
+ * nunca expone el valor en el DOM de otra forma). El botón es `type="button"`
+ * — nunca dispara submit del form contenedor — y anuncia su acción con
+ * `aria-label` dinámico y `aria-pressed`, ya que es un toggle, no un botón
+ * de una sola acción.
+ *
+ *   <kf-input type="password" label="Contraseña" toggleable formControlName="password" />
  */
 declare class Input implements ControlValueAccessor, AfterViewInit {
     private static nextId;
     private readonly nativeInput;
     readonly label: _angular_core.InputSignal<string | undefined>;
-    /** Nombre de ícono líder. Ver nota de clase: sin componente Icon todavía. */
-    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Marca el label con un asterisco visual — no aplica `required` al `<input>` nativo por sí solo. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ícono líder, renderizado vía `kf-icon`. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
     readonly suffix: _angular_core.InputSignal<string | undefined>;
     readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Borde y aria-invalid en rojo. Ver `errorMessage` para el mensaje asociado. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error con `role="alert"` — reemplaza a `hint` mientras esté presente. */
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly type: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
+    /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
+    readonly toggleable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly inputId: string;
     protected readonly hintId: string;
+    protected readonly errorId: string;
     protected readonly value: _angular_core.WritableSignal<string>;
     protected readonly focused: _angular_core.WritableSignal<boolean>;
     /** Deshabilitado por Reactive Forms (formControl.disable()). */
     private readonly disabledByForm;
     /** Disabled real: por input() directo o por el FormControl asociado. */
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Estado interno del toggle — irrelevante si `showPasswordToggle()` es false. */
+    protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
+    /** El botón solo tiene sentido si el campo realmente es de contraseña. */
+    protected readonly showPasswordToggle: _angular_core.Signal<boolean>;
+    /**
+     * `type` real que recibe el `<input>` nativo: igual a `type()` salvo
+     * cuando el toggle está activo y visible, donde pasa a `text` para
+     * mostrar el valor en claro sin cambiar `type()` en sí (evita que un
+     * consumidor que lee `type()` desde afuera vea un valor inconsistente).
+     */
+    protected readonly effectiveType: _angular_core.Signal<string>;
     private onChange;
     private onTouched;
     ngAfterViewInit(): void;
@@ -787,8 +845,14 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     setDisabledState(isDisabled: boolean): void;
     protected onInput(rawValue: string): void;
     protected onBlur(): void;
+    /**
+     * Alterna la visibilidad del valor. No dispara `onBlur`/pierde el foco:
+     * el botón vive dentro del mismo `.kf-input__field`, así que un click acá
+     * no debe tratarse como si el usuario hubiese abandonado el campo.
+     */
+    protected onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**