@eagami/ui 5.65.0 → 5.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.65.0",
+  "version": "5.67.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_form-field.scss

@@ -26,7 +26,6 @@
   }
 
   &:focus {
-    border-color: var(--color-border-focus);
     @include ea.focus-ring;
   }
 

package/types/eagami-ui.d.ts

@@ -348,10 +348,25 @@ export interface PaletteConfig {
    * unset and accept the defaults. */
   roles?: Partial<PaletteRoles>;
 }
+/**
+ * A focus colour of its own, for focus rings and outlines. Light mode draws
+ * focus in the derived 500 shade and dark mode in the 300 shade, the same
+ * steps the primary colour uses when no focus colour is set.
+ */
+export interface FocusColorConfig {
+  /** Anchor hex (`#RRGGBB`) the focus shades are derived from. */
+  base: string;
+  /** Pin individual shades to specific hex values, bypassing derivation for
+   * those slots. */
+  overrides?: Partial<Record<PaletteShade, string>>;
+}
 /** Top-level palette config accepted by `provideEagamiUi()`. */
 export interface EagamiPaletteConfig {
   primary?: PaletteConfig;
   secondary?: PaletteConfig;
+  /** Focus follows the primary colour unless this sets one apart, as a brand
+   * whose hue reads as an error or a warning needs. */
+  focus?: FocusColorConfig;
 }
 /** Flat CSS-custom-property name to value map for a single mode. */
 export type DerivedPalette = Record<string, string>;
@@ -541,6 +556,8 @@ export interface ContrastSurfaces {
  *   - `--color-brand-text` vs `canvas` >= 4.5:1 (link / foreground text)
  *   - `--color-brand-default` vs `onBrandText` >= 4.5:1 (button label)
  *   - `--color-brand-default` vs `canvas` >= 3:1 (WCAG 1.4.11 non-text)
+ *   - `--color-border-focus` vs `canvas` >= 3:1 (WCAG 1.4.11 non-text), when a
+ *     focus colour is set
  */
 export declare function validatePalette(palette: ModePalette, surfaces?: ContrastSurfaces): ContrastViolation[];
 /** Format a violation list as a human-readable error message. */
@@ -894,7 +911,7 @@ export declare class AutocompleteComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly minLength: import("@angular/core").InputSignal<number>;
   /** Maximum number of characters the input accepts (native `maxlength`). */
   readonly maxLength: import("@angular/core").InputSignal<number | undefined>;
@@ -2073,7 +2090,7 @@ export declare class CheckboxComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
   /**
    * Ellipsize a label too long for the space the checkbox is given, revealing
@@ -2454,7 +2471,7 @@ export declare class ColorPickerComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   /** Whether to show the alpha slider. When `false` the emitted value always has alpha = 1. */
   readonly showAlpha: import("@angular/core").InputSignal<boolean>;
   /** Whether to show the clear button when a value is set. */
@@ -3468,7 +3485,7 @@ export declare class CodeInputComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly required: import("@angular/core").InputSignal<boolean>;
@@ -3643,7 +3660,7 @@ export declare class DatePickerComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly minDate: import("@angular/core").InputSignal<Date | null>;
   readonly maxDate: import("@angular/core").InputSignal<Date | null>;
   /** Weekdays that cannot be picked, numbered as `Date.getDay()` does: 0 for Sunday through 6 for Saturday. */
@@ -4301,7 +4318,7 @@ export declare class DropdownComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly id: import("@angular/core").InputSignal<string>;
   readonly value: import("@angular/core").ModelSignal<string>;
   /** Fires with the new value when the user selects an option or clears the selection. */
@@ -4685,7 +4702,7 @@ export declare class FormFieldComponent {
   /** Error message shown below the control; replaces the hint and flags the field invalid. */
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for the projected form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   /** Marks the field as required. */
   readonly required: import("@angular/core").InputSignal<boolean>;
   /** Visual size of the field; the label, control text, spacing, and messages scale with it. */
@@ -4758,9 +4775,10 @@ type EaValidationErrorKey = 'required' | 'email' | 'min' | 'max' | 'minlength' |
  * Per-error-key message overrides for a form control. Keys are validator error
  * names (`required`, `email`, or any custom validator key); values are the text
  * shown when that error is the active one. Keys left unset fall back to the
- * library's localized default message.
+ * library's localized default message, and a key set to `null` is never shown,
+ * so a field whose only errors are hidden keeps out of its error state.
  */
-type EaErrorMessages = Partial<Record<string, string>>;
+type EaErrorMessages = Partial<Record<string, string | null>>;
 interface ControlErrorStateConfig {
   /** Explicit error text; shown unconditionally and overrides any auto-derived message. */
   errorMsg: Signal<string | null | undefined>;
@@ -4776,12 +4794,19 @@ interface ControlErrorState {
 /**
  * Derives a form control's display error from, in priority order: an explicit
  * `errorMsg`, a consumer `errorMessages` override, then the library's localized
- * default for the active `ValidationErrors` key. Auto-derived messages surface
- * only once the bound control is `invalid && touched`, matching the moment a
- * user expects validation feedback. A message revealed by a pointer press
- * moving focus away waits until that press has landed its click. The control
- * arrives as a signal so callers decide how it is resolved: from the host's own
- * `NgControl` (CVA components) or from projected content (`<ea-form-field>`).
+ * default for the active `ValidationErrors` key.
+ *
+ * Auto-derived messages surface only once the bound control is `invalid &&
+ * touched`, and a new one waits while focus is still inside the field, until
+ * the user leaves it or submits the form, so nothing is flagged mid-edit. A
+ * field the user only passed through, leaving it without changing it, stays
+ * quiet until they change it or the form is submitted, so tabbing past an
+ * empty required field never flags it. A
+ * message already showing follows the value as it is typed and clears the
+ * moment it is fixed. A message revealed by a pointer press moving focus away
+ * waits until that press has landed its click. The control arrives as a signal
+ * so callers decide how it is resolved: from the host's own `NgControl` (CVA
+ * components) or from projected content (`<ea-form-field>`).
  */
 declare function controlErrorStateFrom(control: Signal<AbstractControl | null>, config: ControlErrorStateConfig): ControlErrorState;
 /**
@@ -4852,7 +4877,7 @@ export declare class FileUploaderComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
   /**
    * `dropzone` renders the drag-and-drop area; `button` renders a compact
@@ -5131,7 +5156,7 @@ export declare class InputComponent implements ControlValueAccessor {
   /** Error message shown below the field; replaces the hint and flags the field invalid. */
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   /** Disables the field. */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** Renders the field read-only. */
@@ -5837,7 +5862,7 @@ export declare class MultiSelectComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   /** Toggle the search input at the top of the popover. */
   readonly searchable: import("@angular/core").InputSignal<boolean>;
   /** Toggle the "Select all" row at the top of the option list. */
@@ -6154,7 +6179,7 @@ export declare class NumberInputComponent implements ControlValueAccessor {
   /** Error message shown below the field; replaces the hint and flags the field invalid. */
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   /** Disables the field. */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** Renders the field read-only. */
@@ -6730,7 +6755,7 @@ export declare class RadioGroupComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
   /** Space-separated ids of the elements whose text names the group, such as a label outside the component. */
   readonly ariaLabelledby: import("@angular/core").InputSignal<string | undefined>;
@@ -6908,7 +6933,7 @@ export declare class RangeSliderComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly min: import("@angular/core").InputSignal<number>;
   readonly max: import("@angular/core").InputSignal<number>;
   readonly step: import("@angular/core").InputSignal<number>;
@@ -7115,7 +7140,7 @@ export declare class RatingComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
   readonly min: import("@angular/core").InputSignal<number>;
   readonly max: import("@angular/core").InputSignal<number>;
@@ -7301,7 +7326,7 @@ export declare class SegmentedComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly required: import("@angular/core").InputSignal<boolean>;
@@ -7476,7 +7501,7 @@ export declare class SliderComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   /** Force the error-state styling without binding `errorMsg`. Lets consumers
    *  render the error text themselves (e.g. above the slider in a form layout)
    *  while still getting the built-in recolour of the fill and thumb. */
@@ -7827,7 +7852,7 @@ export declare class SwitchComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
   /**
    * Status tone for the track: a tinted wash with a toned border while off and
@@ -8368,7 +8393,7 @@ export declare class TextareaComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly required: import("@angular/core").InputSignal<boolean>;
@@ -8589,7 +8614,7 @@ export declare class TimePickerComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
-  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
+  readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string | null>> | undefined>;
   /** Display format for the trigger label. Wire value is always 24h. */
   readonly format: import("@angular/core").InputSignal<TimePickerFormat>;
   readonly includeSeconds: import("@angular/core").InputSignal<boolean>;
@@ -9020,14 +9045,16 @@ export declare class ToastComponent {
 }
 export type ToggleChipSize = EaSize;
 /**
- * Pill-shaped toggle button for filters and feature pickers. Projected content,
- * an optional leading icon and a label, names it, and a check marks it as on,
- * so its state never rests on colour alone.
+ * Pill-shaped toggle button for filters and feature pickers. Projected content
+ * names it, an optional icon leads it, and a check marks it as on, so its state
+ * never rests on colour alone.
  */
 export declare class ToggleChipComponent {
   /** Whether the chip is on, two-way bindable via [(selected)]. */
   readonly selected: import("@angular/core").ModelSignal<boolean>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
+  /** Optional icon component rendered before the label. */
+  readonly icon: import("@angular/core").InputSignal<Type<unknown> | undefined>;
   /** Disables the chip and blocks toggling. */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** Accessible label for a chip whose projected content has no visible text. */
@@ -9053,6 +9080,11 @@ export declare class ToggleChipComponent {
       "required": false;
       "isSignal": true;
     };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "disabled";
       "required": false;