@kaufmann-lab/ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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

@@ -323,15 +323,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 +352,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 +673,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,24 +769,38 @@ 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" />
  */
 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>;
     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()). */
@@ -788,7 +817,7 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     protected onInput(rawValue: string): void;
     protected onBlur(): 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; }; }, {}, never, never, true, never>;
 }
 
 /**