@eagami/ui 5.64.1 → 5.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.64.1",
+  "version": "5.66.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/type-scale.spec.ts

@@ -21,6 +21,9 @@ const SUB_BODY_SCALE: Record<string, number> = {
   micro: 0.625,
 };
 
+/** Brand lockups keep the proportions of the logo artwork, not the UI type scale. */
+const BRAND_LOCKUPS = new Set(['eagami-wordmark/eagami-wordmark.component.scss']);
+
 function libStylesheets(): { name: string; css: string }[] {
   const lib = join(SRC, 'src/lib');
   return readdirSync(lib, { recursive: true, encoding: 'utf8' })
@@ -56,7 +59,9 @@ describe('Type scale', () => {
   it('draws text below the body line from the shared scale', () => {
     const allowed = new Set(Object.values(SUB_BODY_SCALE));
     const offScale: string[] = [];
-    for (const { name, css } of libStylesheets()) {
+    for (const { name, css } of libStylesheets().filter(
+      ({ name }) => !BRAND_LOCKUPS.has(name),
+    )) {
       for (const [declaration, value] of css.matchAll(
         /(?:font-size|--ea-field-(?:label|messages)-size):\s*([\d.]+)em\b/g,
       )) {

package/types/eagami-ui.d.ts

@@ -894,7 +894,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 +2073,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 +2454,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 +3468,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 +3643,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 +4301,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. */
@@ -4472,20 +4472,22 @@ export type EagamiWordmarkVariant = 'default' | 'byline' | 'tagline';
 /** Layout of the wordmark: `stacked` for multi-line, `inline` for a single line with em-dash separators. */
 export type EagamiWordmarkLayout = 'stacked' | 'inline';
 /**
- * Branded eagami wordmark logo. `size` is the brand text's font-size in px
- * and the rest of the lockup scales proportionally from it; supports three
- * content variants paired with stacked or inline layouts.
+ * Branded eagami wordmark logo. `size` is the brand text's font-size, in px or
+ * inherited from the surrounding text, and the rest of the lockup scales
+ * proportionally from it; supports three content variants paired with stacked
+ * or inline layouts.
  */
 export declare class EagamiWordmarkComponent {
   protected readonly i18n: EagamiI18nService;
   /** Content variant. */
   readonly variant: import("@angular/core").InputSignal<EagamiWordmarkVariant>;
   readonly layout: import("@angular/core").InputSignal<EagamiWordmarkLayout>;
-  readonly size: import("@angular/core").InputSignal<number>;
+  /** Brand text size in px, or `'inherit'` to match the surrounding text. */
+  readonly size: import("@angular/core").InputSignal<number | "inherit">;
   /** Renders the wordmark as a link to eagami.com; disable to embed it inside a custom link or static context. */
   readonly linked: import("@angular/core").InputSignal<boolean>;
-  /** Clamps size to a 10px floor and falls back to the default when cleared. */
-  protected readonly resolvedSize: import("@angular/core").Signal<number>;
+  /** Clamps px sizes to a 10px floor and falls back to the default when cleared. */
+  protected readonly resolvedSize: import("@angular/core").Signal<string>;
   protected readonly showOverline: import("@angular/core").Signal<boolean>;
   protected readonly showTagline: import("@angular/core").Signal<boolean>;
   protected readonly brandText: import("@angular/core").Signal<string>;
@@ -4683,7 +4685,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. */
@@ -4756,9 +4758,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>;
@@ -4774,12 +4777,16 @@ 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
+ * 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;
 /**
@@ -4850,7 +4857,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
@@ -5129,7 +5136,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. */
@@ -5835,7 +5842,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. */
@@ -6152,7 +6159,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. */
@@ -6728,7 +6735,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>;
@@ -6906,7 +6913,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>;
@@ -7113,7 +7120,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>;
@@ -7299,7 +7306,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>;
@@ -7474,7 +7481,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. */
@@ -7825,7 +7832,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
@@ -8366,7 +8373,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>;
@@ -8587,7 +8594,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>;
@@ -9016,6 +9023,68 @@ export declare class ToastComponent {
     };
   }, {}, never, never, true, never>;
 }
+export type ToggleChipSize = EaSize;
+/**
+ * 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. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Id of an element that describes what the chip turns on, announced with its name. */
+  readonly ariaDescribedby: import("@angular/core").InputSignal<string | undefined>;
+  /** Fires with the new state whenever the user toggles the chip. */
+  readonly changed: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly classes: import("@angular/core").Signal<{
+    [x: string]: boolean;
+    'ea-toggle-chip--selected': boolean;
+  }>;
+  protected toggle(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToggleChipComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToggleChipComponent, "ea-toggle-chip", never, {
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "aria-label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaDescribedby": {
+      "alias": "aria-describedby";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+    "changed": "changed";
+  }, never, ["*"], true, never>;
+}
 /**
  * A single transferable item in an `<ea-transfer-list>`.
  *
@@ -10546,8 +10615,16 @@ export declare class EagamiIconComponent extends IconComponentBase {
   static readonly category: IconCategory;
   static readonly isBrand = true;
   static readonly tags: ReadonlyArray<string>;
+  /** Slowly swings the heron's raised leg back and forth. Off under reduced motion. */
+  readonly animated: import("@angular/core").InputSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<EagamiIconComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<EagamiIconComponent, "ea-icon-eagami", never, {}, {}, never, never, true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<EagamiIconComponent, "ea-icon-eagami", never, {
+    "animated": {
+      "alias": "animated";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
 export declare class EditIconComponent extends IconComponentBase {
   static readonly slug = "edit";