@forgeroute/ui 0.4.73 → 0.4.74

package/types/forgeroute-ui.d.ts

@@ -202,7 +202,9 @@ export interface ColumnDef {
     ariaLabel?: string;
   } | null;
   /** Key in item holding the tags array. Defaults to col.key.
-   *  Expected shape: { name: string; variant?: BadgeVariant }[] */
+   *  Expected shape: { name: string; variant?: BadgeVariant; color?: string }[]. `color` is a custom hex colour (`#rgb` / `#rrggbb`,
+   *  e.g. the colour a user picked for the tag): it becomes the chip background with dark or white text for contrast and wins over `variant`;
+   *  an invalid value is ignored. */
   tagsKey?: string;
   /**
    * `cellType: 'link'` — returns where the cell points for a row (`value` is `item[key]`), or null / undefined /
@@ -736,7 +738,17 @@ export declare class BadgeComponent {
    *  2. Fall back to auto-color based on the label string
    */
   readonly variant: import("@angular/core").InputSignal<BadgeVariant | null>;
+  /**
+   * A custom hex colour (`#rgb` or `#rrggbb`), e.g. the colour a user picked for a tag. It becomes the background and the text is
+   * dark or white, whichever reads better (WCAG contrast). It wins over `variant`; anything that is not a valid hex colour is
+   * ignored (the variant / automatic colour applies). Omit it and nothing changes.
+   */
+  readonly color: import("@angular/core").InputSignal<string | null>;
   protected readonly resolvedVariant: import("@angular/core").Signal<BadgeVariant>;
+  protected readonly customStyles: import("@angular/core").Signal<{
+    bg: string;
+    color: string;
+  } | null>;
   protected readonly styles: import("@angular/core").Signal<{
     bg: string;
     color: string;
@@ -753,6 +765,11 @@ export declare class BadgeComponent {
       "required": false;
       "isSignal": true;
     };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -1286,6 +1303,11 @@ export interface ImportFieldDef {
   key: string;
   label: string;
   required?: boolean;
+  /**
+   * An example of what the column should contain (e.g. `VACANT, OCCUPIED`, `500.00`, `YYYY-MM-DD`). It is shown under the field's
+   * label in the column-mapping step as "e.g. <example>" and linked to the column dropdown for screen readers. Omit it and nothing changes.
+   */
+  example?: string;
 }
 export interface ImportSource {
   value: string;
@@ -1406,6 +1428,10 @@ export declare class ImportExportComponent {
   private csvFile;
   private readCsvFile;
   private autoMap;
+  private static nextId;
+  private readonly idPrefix;
+  /** Id of a field's example hint (the column dropdown points at it with aria-describedby). */
+  protected exampleId(field: ImportFieldDef): string;
   get canSubmit(): boolean;
   get unmappedRequiredFields(): string[];
   get unmatchedCsvHeaders(): string[];
@@ -1620,7 +1646,6 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    * own panel for `rows` and, when it has finished, calls `clearSelection()` and `refresh()` on the table.
    */
   readonly bulkPanelClick: import("@angular/core").OutputEmitterRef<BulkPanelEvent<T>>;
-  /** Emitted after a built-in single-row delete completes successfully. */
   /**
    * Emitted after every rows request that completes (a request superseded by a newer one emits nothing; first load, page, sort, search, tab, filter, `refresh()` ...): `{ ok: true, total }` when the rows
    * arrived (`total` = all matching rows), `{ ok: false, total }` when the request failed (the rows on screen are kept, `total` is the last known).
@@ -1630,6 +1655,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
     ok: boolean;
     total: number;
   }>;
+  /** Emitted after a built-in single-row delete completes successfully. */
   readonly rowDeleted: import("@angular/core").OutputEmitterRef<T>;
   /**
    * Optional drag-and-drop ordering of the rows. Off by default; when `true` (and the user has full access) every row gets a grip
@@ -2388,7 +2414,7 @@ export declare class ModalComponent implements OnInit, OnDestroy {
    */
   readonly describedBy: import("@angular/core").InputSignal<string | null>;
   readonly maxWidth: import("@angular/core").InputSignal<string>;
-  readonly bodyOverflow: import("@angular/core").InputSignal<"hidden" | "visible" | "auto">;
+  readonly bodyOverflow: import("@angular/core").InputSignal<"auto" | "hidden" | "visible">;
   /** `data-testid` of the dialog element itself (the host `<ui-modal>` is always in the page, the dialog only while open). None when empty. */
   readonly dialogTestId: import("@angular/core").InputSignal<string>;
   /** Hides the header X button (e.g. while a request is running). Escape and a backdrop click still close unless `closable` is false. */
@@ -2756,7 +2782,7 @@ export declare class ToastComponent {
     "action": "action";
   }, never, never, true, never>;
 }
-export type ProgressBarVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate';
+export type ProgressBarVariant = 'blue' | 'green' | 'amber' | 'orange' | 'red' | 'slate';
 /**
  * Horizontal progress bar with an optional trailing label (e.g. "3/5").
  * Pass `value` and `max`; the fill width is clamped to 0–100%, rounded to whole percents, and a value above 0 is never drawn narrower
@@ -2962,7 +2988,7 @@ export declare class AudioPlayerComponent {
   /** Accessible name of the player. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** How much to load before play: 'metadata' (default), 'auto' or 'none'. */
-  readonly preload: import("@angular/core").InputSignal<"none" | "metadata" | "auto">;
+  readonly preload: import("@angular/core").InputSignal<"auto" | "none" | "metadata">;
   /** Fires when the browser can't load or decode the source. */
   readonly playbackError: import("@angular/core").OutputEmitterRef<void>;
   protected readonly failed: import("@angular/core").WritableSignal<boolean>;
@@ -3216,7 +3242,7 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
    * clicking it still toggles the box - e.g. a product name that is both the heading of its card and the label of its checkbox.
    * Default null: plain label text, exactly as before. Single mode only.
    */
-  readonly headingLevel: import("@angular/core").InputSignal<2 | 1 | 5 | 3 | 4 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 4 | 2 | 3 | 5 | 6 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -3234,7 +3260,7 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
    */
   protected readonly _legend: import("@angular/core").Signal<string>;
   /** Group mode: lay the options out in a column (default) or in a wrapping row. */
-  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
   /**
    * Group mode: the ticked option values as a two-way model (`[(values)]`), an alternative to ngModel / forms. Unset (default) = the
    * group is driven by ngModel / FormControl only. Values that are not an option are dropped and the order follows `options`.
@@ -3615,13 +3641,13 @@ export declare class StepperComponent {
   /** Accessible name of the list. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Horizontal, <= 480px: show only the current step's label (`'current'`, default) or every label (`'all'`). */
-  readonly labelsOnSmallScreens: import("@angular/core").InputSignal<"all" | "current">;
+  readonly labelsOnSmallScreens: import("@angular/core").InputSignal<"current" | "all">;
   /**
    * Horizontal only. `'beside'` (default): the label sits to the right of its circle. `'below'`: equal-width columns, the label centred under
    * its circle, one continuous line behind the circles that fills as steps complete; a complete step shows a check, the current step an
    * accent ring with a dot, an upcoming step an empty circle (no numbers). Circles are 40px (32px with `size="sm"`).
    */
-  readonly labelPosition: import("@angular/core").InputSignal<"below" | "beside">;
+  readonly labelPosition: import("@angular/core").InputSignal<"beside" | "below">;
   /** Viewport width in px below which a horizontal stepper is drawn vertical (labels beside the circles), e.g. `640`. null (default) = never. */
   readonly stackBelow: import("@angular/core").InputSignal<number | null>;
   /** CSS length (e.g. `10.5rem`): horizontal only - the list gets `min-width: calc(<step count> * <value>)`. Empty (default) = no minimum. */
@@ -3653,7 +3679,7 @@ export declare class StepperComponent {
   protected readonly rows: import("@angular/core").Signal<{
     step: StepperStep;
     index: number;
-    state: "complete" | "current" | "upcoming";
+    state: "current" | "complete" | "upcoming";
     error: boolean;
     errorMessage: string;
     selectable: boolean;
@@ -3966,13 +3992,13 @@ export declare class RadioGroupComponent implements ControlValueAccessor, Valida
   readonly error: import("@angular/core").InputSignal<string>;
   /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
-  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
   /** Native `name` shared by the radios; a unique one is generated when omitted. */
   readonly name: import("@angular/core").InputSignal<string>;
   /** `<ng-template uiRadioOptionContent="value">` children: content shown under that option while it is selected. */
   private readonly _optionContent;
   protected readonly _nestedContent: import("@angular/core").Signal<Map<string, TemplateRef<unknown>>>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   private readonly _generatedName;
@@ -4139,7 +4165,7 @@ export declare class PhoneNumberPickerComponent {
   protected readonly modeCtl: FormControl<string>;
   protected readonly zipCtl: FormControl<string>;
   protected readonly areaCtl: FormControl<string>;
-  protected readonly step: import("@angular/core").WritableSignal<2 | 1 | 3>;
+  protected readonly step: import("@angular/core").WritableSignal<1 | 2 | 3>;
   protected readonly mode: import("@angular/core").WritableSignal<PhoneNumberSearchMode>;
   private readonly _zip;
   private readonly _area;
@@ -4301,7 +4327,7 @@ export declare class ButtonComponent {
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
-  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
+  readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -4510,6 +4536,10 @@ export interface PillTab {
    * its name. The tooltip is not shown in the horizontally scrolling mobile layout (it would be clipped).
    */
   info?: string;
+  /** (library source 2026-11-05) Heading shown under the tab list while this tab is active, when the tabs' `showDescription` input is on. */
+  title?: string;
+  /** (library source 2026-11-05) Explanatory paragraph shown under the heading while this tab is active (`showDescription`). */
+  description?: string;
 }
 /**
  * Pill-style tabs following the WAI-ARIA tabs pattern: each tab is a real <button role="tab">,
@@ -4526,7 +4556,7 @@ export declare class PillTabsComponent {
   /** Keep every pill at its own width on one line (default false: pills may shrink and wrap their text). On a phone the row scrolls sideways, as it always does. */
   readonly noWrap: import("@angular/core").InputSignal<boolean>;
   /** 'vertical' stacks the tabs in a column (Up/Down arrows move between them, `aria-orientation="vertical"`). Default 'horizontal' = unchanged. */
-  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
   protected readonly vertical: () => boolean;
   /**
    * (library source 2026-11-04, not yet published) Associate the tabs with their panels: every tab gets
@@ -4539,7 +4569,18 @@ export declare class PillTabsComponent {
    * `panel-` when this is on; in development mode a `console.warn` names such a key.
    */
   readonly controlsPanels: import("@angular/core").InputSignal<boolean>;
+  /**
+   * (library source 2026-11-05) Show the ACTIVE tab's `title` (heading) and `description` (paragraph) under the tab list. Default false = no extra DOM.
+   * A tab with only one of them renders only that one; a tab with neither renders nothing. The ids are `<name>--title` / `<name>--description`
+   * (`pillTabTitleId` / `pillTabDescriptionId`); `[uiTabPanel] [describedByHeader]="true"` points the panel's `aria-describedby` at the description.
+   */
+  readonly showDescription: import("@angular/core").InputSignal<boolean>;
+  /** Heading level of the active tab's title when `showDescription` is on: 2 (default) or 3. */
+  readonly headingLevel: import("@angular/core").InputSignal<2 | 3>;
   readonly tabChange: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly activeTab: import("@angular/core").Signal<PillTab | null>;
+  protected titleId(): string;
+  protected descriptionId(): string;
   /** True while pills are hidden past the start / end edge of the scroll area (drives the fade hints). */
   protected readonly canScrollStart: import("@angular/core").WritableSignal<boolean>;
   protected readonly canScrollEnd: import("@angular/core").WritableSignal<boolean>;
@@ -4590,6 +4631,16 @@ export declare class PillTabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "showDescription": {
+      "alias": "showDescription";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "tabChange": "tabChange";
   }, never, never, true, never>;
@@ -4598,6 +4649,10 @@ export declare class PillTabsComponent {
 export declare function pillTabId(name: string, key: string): string;
 /** Id a `uiTabPanel` element gets, and the id every tab's `aria-controls` points at when `controlsPanels` is on: `<name>-panel-<key>`. */
 export declare function pillTabPanelId(name: string, key: string): string;
+/** Id of the heading `ui-pill-tabs` renders for the active tab when `showDescription` is on: `<name>--title`. */
+export declare function pillTabTitleId(name: string): string;
+/** Id of the description paragraph `ui-pill-tabs` renders for the active tab when `showDescription` is on: `<name>--description`. */
+export declare function pillTabDescriptionId(name: string): string;
 /**
  * (library source 2026-11-04, not yet published) The panel that belongs to one `ui-pill-tabs` tab: a correct
  * WAI-ARIA tablist / tabpanel association with the smallest possible markup.
@@ -4614,6 +4669,8 @@ export declare function pillTabPanelId(name: string, key: string): string;
  * - `activeKey`   the tabs' active key. When given (not null), the panel gets the `hidden` attribute while another tab is active
  *                 (the panels stay in the DOM, so their state survives a tab change). Leave it unset when the page renders only the
  *                 active panel itself (`@if`), then no `hidden` attribute is ever set.
+ * - `describedByHeader`  default false. true adds `aria-describedby="<tabsName>--description"` (the description `ui-pill-tabs` shows under the
+ *                 tab list with `showDescription`) while the panel is not hidden. Turn it on only when the active tab has a `description`.
  * - `tabbable`    default false. true adds `tabindex="0"` so a panel without any focusable content can be reached by keyboard
  *                 (WAI-ARIA tabs pattern).
  *
@@ -4632,6 +4689,9 @@ export declare class PillTabPanelDirective {
   readonly activeKey: import("@angular/core").InputSignal<string | null>;
   /** Makes the panel itself a Tab stop (for panels with no focusable content). Default false. */
   readonly tabbable: import("@angular/core").InputSignal<boolean>;
+  /** Adds `aria-describedby` pointing at the description `ui-pill-tabs` renders under the tab list (`showDescription`). Default false. */
+  readonly describedByHeader: import("@angular/core").InputSignal<boolean>;
+  protected describedId(): string | null;
   protected panelId(): string;
   protected tabId(): string;
   protected isHidden(): boolean;
@@ -4657,6 +4717,11 @@ export declare class PillTabPanelDirective {
       "required": false;
       "isSignal": true;
     };
+    "describedByHeader": {
+      "alias": "describedByHeader";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 export interface ContactLookup {
@@ -4845,7 +4910,7 @@ export declare class BulkMessagePanelComponent {
   readonly sending: import("@angular/core").InputSignal<boolean>;
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   readonly send: import("@angular/core").OutputEmitterRef<BulkMessageSendEvent>;
-  readonly channel: import("@angular/core").WritableSignal<"text" | "email">;
+  readonly channel: import("@angular/core").WritableSignal<"email" | "text">;
   private readonly _subject;
   private readonly _body;
   get subject(): string;
@@ -4900,7 +4965,7 @@ export declare class ImportSourceGridComponent {
   /** The `value` of the picked source (highlighted). `tile` only: the `card` appearance does not keep a selection. */
   readonly selected: import("@angular/core").InputSignal<string>;
   /** `tile`: the compact buttons of the import window. `card`: one `ui-detail-card` per source with its own select button (used on a page). */
-  readonly appearance: import("@angular/core").InputSignal<"tile" | "card">;
+  readonly appearance: import("@angular/core").InputSignal<"card" | "tile">;
   /** `card`: disables every card's button (for example while the page is saving). */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** `card`: the text of each card's button. */
@@ -5097,7 +5162,7 @@ export declare class BankAccountFormComponent implements UiFieldValidity {
   protected readonly accountError: import("@angular/core").Signal<"" | "Account number must be at least 4 digits.">;
   protected readonly confirmError: import("@angular/core").Signal<"" | "Account numbers do not match.">;
   /** First reason the form cannot be submitted ('' when it can). */
-  readonly errorMessage: import("@angular/core").Signal<"" | "Routing number must be 9 digits." | "Account number must be at least 4 digits." | "Account numbers do not match." | "Account holder name is required." | "Routing number is required." | "Account number is required." | "Confirm account number is required." | "Select a valid account type." | "Select a valid holder type." | "You must authorize ACH debits to continue.">;
+  readonly errorMessage: import("@angular/core").Signal<"" | "Account holder name is required." | "Routing number is required." | "Routing number must be 9 digits." | "Account number is required." | "Account number must be at least 4 digits." | "Confirm account number is required." | "Account numbers do not match." | "Select a valid account type." | "Select a valid holder type." | "You must authorize ACH debits to continue.">;
   /** True while the form cannot be submitted (`UiFieldValidity`). */
   readonly invalid: import("@angular/core").Signal<boolean>;
   /** True when the form can be submitted (ignores `disabled` / `busy`). */
@@ -5373,7 +5438,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   readonly passwordRequirements: import("@angular/core").InputSignal<boolean>;
   /** Rules for `passwordRequirements`; default = the library's five rules (8+ characters, upper, lower, digit, special). */
   readonly passwordRules: import("@angular/core").InputSignal<readonly PasswordRule[] | undefined>;
-  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "password" | "tel" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "email" | "text" | "tel" | "password" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -5382,7 +5447,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * `search`, `text`, `none`). Empty (default) = the browser's default for the field, except `type="tel"`, which keeps `tel`.
    * It only picks the keyboard; it does not restrict what can be typed or pasted.
    */
-  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "email" | "search" | "tel" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "email" | "search" | "none" | "text" | "tel" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   /** Id(s) of an external element that also describes this control (e.g. one shared error text for a group of fields). Space separated; MERGED after the control's own hint / error id in `aria-describedby`, never replacing it. Empty = unchanged. */
@@ -5454,7 +5519,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   protected readonly _stepAttr: import("@angular/core").Signal<string | null>;
   protected readonly _revealable: import("@angular/core").Signal<boolean>;
   protected readonly _shown: import("@angular/core").WritableSignal<boolean>;
-  protected readonly _inputType: import("@angular/core").Signal<"number" | "text" | "email" | "password" | "tel" | "url">;
+  protected readonly _inputType: import("@angular/core").Signal<"number" | "email" | "text" | "tel" | "password" | "url">;
   protected readonly _eyePath: string;
   protected readonly _eyeOffPath: string;
   protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
@@ -5773,7 +5838,7 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
   readonly monospace: import("@angular/core").InputSignal<boolean>;
   /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _value: import("@angular/core").WritableSignal<string>;
@@ -6063,7 +6128,7 @@ export declare class FileInputComponent implements ControlValueAccessor, Validat
   readonly fileRemoved: import("@angular/core").OutputEmitterRef<void>;
   /** Emits whenever the field becomes invalid / valid. */
   readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _files: import("@angular/core").WritableSignal<File[]>;
@@ -6369,7 +6434,7 @@ export declare class DatetimeInputComponent implements ControlValueAccessor, Val
   readonly error: import("@angular/core").InputSignal<string>;
   /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _value: import("@angular/core").WritableSignal<string>;
@@ -6645,7 +6710,8 @@ export declare class ComboboxComponent<T = unknown> implements ControlValueAcces
   readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
   readonly focused: import("@angular/core").OutputEmitterRef<void>;
   readonly blurred: import("@angular/core").OutputEmitterRef<void>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  /** Disables the field (`[disabled]="x()"`). Public so templates compile; ngModel / FormControl `disable()` still works (effective disabled = this OR the forms API). */
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   private readonly _field;
@@ -6967,7 +7033,7 @@ export declare class DropdownComponent {
   readonly loader: import("@angular/core").InputSignal<(() => Promise<DropdownItem[]>) | null>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly activeValue: import("@angular/core").InputSignal<string>;
-  readonly variant: import("@angular/core").InputSignal<"badge" | "button">;
+  readonly variant: import("@angular/core").InputSignal<"button" | "badge">;
   /** Trigger size for `variant="button"`: `sm` (default, the compact toolbar look) or `md` (same padding and type as a medium `ui-button`). */
   readonly size: import("@angular/core").InputSignal<"sm" | "md">;
   readonly menuWidth: import("@angular/core").InputSignal<string>;
@@ -7280,7 +7346,7 @@ export declare class FormSectionComponent {
   }, {}, never, ["*"], true, never>;
 }
 export declare class FormRowComponent {
-  readonly cols: import("@angular/core").InputSignal<2 | 1 | 3 | 4>;
+  readonly cols: import("@angular/core").InputSignal<1 | 4 | 2 | 3>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormRowComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormRowComponent, "ui-form-row", never, {
     "cols": {
@@ -7297,7 +7363,7 @@ export declare class FormRowComponent {
  * child simply takes the full width. Keep a numeric span within the row's `cols` (use `all` for the whole row).
  */
 export declare class FormColSpanDirective {
-  readonly uiColSpan: import("@angular/core").InputSignal<"" | 2 | 3 | "2" | "3" | "all">;
+  readonly uiColSpan: import("@angular/core").InputSignal<"" | 2 | 3 | "all" | "2" | "3">;
   protected readonly _class: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormColSpanDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<FormColSpanDirective, "[uiColSpan]", never, {
@@ -8495,9 +8561,9 @@ export declare class ChipGroupComponent {
   readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
   readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
-  protected readonly _gap: import("@angular/core").Signal<"8px" | "12px" | "6px">;
-  protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "12px" | "6px">;
-  protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "12px" | "6px">;
+  protected readonly _gap: import("@angular/core").Signal<"6px" | "12px" | "8px">;
+  protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "6px" | "12px">;
+  protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "6px" | "12px">;
   static ɵfac: i0.ɵɵFactoryDeclaration<ChipGroupComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ChipGroupComponent, "ui-chip-group", never, {
     "gap": {
@@ -8881,7 +8947,7 @@ export declare const ICON_NAMES: readonly string[];
 /** The SVG path (24×24 stroke icon) for an icon key, or undefined when the key is unknown. */
 export declare function iconPath(name: string): string | undefined;
 /** Keys with an icon of their own (the data-table action keys are accepted too — see `builtInActionIcon`). */
-export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart' | 'clipboard' | 'unlink' | 'send' | 'refresh' | 'search' | 'cup' | 'wrench';
+export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart' | 'clipboard' | 'unlink' | 'send' | 'refresh' | 'search' | 'cup' | 'wrench' | 'history' | 'move-up' | 'move-down';
 /**
  * A clickable icon. The host passes a key (`name="delete"`) and the library draws that icon; clicking it emits
  * `iconClick`, and the host does the actual work (delete the row, open a panel, …).
@@ -9020,7 +9086,7 @@ export declare class TimelineComponent {
   /** Any CSS length (e.g. `600px`). When set, the list scrolls inside a keyboard-focusable region of at most this height. Empty = no wrapper. */
   readonly maxHeight: import("@angular/core").InputSignal<string>;
   /** `below` (default): the time is under the title / description. `end`: the time sits right-aligned on the title row. */
-  readonly timePosition: import("@angular/core").InputSignal<"end" | "below">;
+  readonly timePosition: import("@angular/core").InputSignal<"below" | "end">;
   /**
    * Group the items under a heading per calendar day of `dateTime` ("Today", "Yesterday", "Oct 3", "Oct 3, 2025"). Default false = no headings,
    * DOM unchanged. The given order is kept: consecutive items of one day share a heading, the same day appearing again later starts a new group.
@@ -9219,7 +9285,7 @@ export declare class AddressInputComponent implements ControlValueAccessor, Vali
    * the object. `valueChange` always emits the object. A written string is read with `parseAddressValue` for display only: the control keeps
    * the original text until the user edits a field (so a text the parser cannot split is not rewritten on load).
    */
-  readonly valueFormat: import("@angular/core").InputSignal<"object" | "text" | "auto">;
+  readonly valueFormat: import("@angular/core").InputSignal<"object" | "auto" | "text">;
   /** ZIP rule; the default is the US 5 digits / 5+4 rule. `null` accepts any non-empty ZIP. The ZIP is validated and stored trimmed. */
   readonly zipPattern: import("@angular/core").InputSignal<RegExp | null>;
   /** Message shown when the ZIP breaks `zipPattern`. */
@@ -10142,7 +10208,7 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
   readonly maxHeight: import("@angular/core").InputSignal<number>;
   /** Toolbar controls to remove. Everything is shown by default. */
   readonly hide: import("@angular/core").InputSignal<RichTextOption[]>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   /** Disabled or read-only: the editor is not editable and every toolbar control is disabled. */
@@ -10403,6 +10469,240 @@ export declare class RadioComponent {
     "selected": "selected";
   }, never, ["*"], true, never>;
 }
+export interface SwatchOption {
+  value: string;
+  /** Accessible name and tooltip of the swatch (e.g. "Ocean blue"). */
+  label: string;
+  /** Any CSS colour (`#2563eb`, `rgb(...)`, `var(--x)`). */
+  color: string;
+  disabled?: boolean;
+  /** `data-testid` of this option's native radio input; none when omitted. */
+  testId?: string;
+}
+/**
+ * (library source 2026-11-05, not yet published) Colour swatch picker: a `<fieldset role="radiogroup">` of native radio inputs
+ * (arrow keys move + select natively, Home / End jump to the first / last enabled swatch), ControlValueAccessor with a string value
+ * (`''` = nothing selected). The selected swatch shows a check mark and a ring (never colour alone); every swatch is named by its `label`
+ * (accessible name + `title` tooltip). Built-in validation like `ui-radio-group`: `required` -> "<label> is required."; a value that is not one
+ * of the `options` -> "Select a valid option." (not checked while `options` is empty); a disabled picker is never invalid.
+ * `disabled` combines with the forms API (`setDisabledState`). 44px touch targets on touch devices and phones; the swatches wrap.
+ */
+export declare class SwatchPickerComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  private readonly _el;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly options: import("@angular/core").InputSignal<SwatchOption[]>;
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  readonly error: import("@angular/core").InputSignal<string>;
+  /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** Fixed number of swatches per row (0 = wrap freely, the default). On a phone the row wraps by width instead. */
+  readonly columns: import("@angular/core").InputSignal<number>;
+  /** Native `name` shared by the radios; a unique one is generated when omitted. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  private readonly _generatedName;
+  protected get _name(): string;
+  protected readonly _descId: string;
+  protected readonly _value: import("@angular/core").WritableSignal<string>;
+  private readonly _reveal;
+  private readonly _issue;
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  /** Emits the chosen value on a user pick. */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  constructor();
+  ngOnChanges(): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: string): void;
+  registerOnChange(fn: (v: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  protected onSelect(value: string): void;
+  /** Home / End select the first / last enabled swatch (arrow keys are native radio behaviour). */
+  protected onKeydown(e: KeyboardEvent): void;
+  /** Touched once focus leaves the whole group. */
+  protected onFocusOut(event: FocusEvent): void;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SwatchPickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SwatchPickerComponent, "ui-swatch-picker", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "invalidChange": "invalidChange";
+    "valueChange": "valueChange";
+  }, never, never, true, never>;
+}
+export interface IconPickerOption {
+  value: string;
+  /** Accessible name and tooltip of the icon (e.g. "Wrench"). */
+  label: string;
+  /** Key of a library icon (`<ui-icon>` / action key such as `wrench`, `history`). Defaults to `value` when neither `iconKey` nor `path` is given. */
+  iconKey?: string;
+  /** Raw SVG path (`d` value, 24x24 stroke icon); wins over `iconKey`. */
+  path?: string;
+  disabled?: boolean;
+  /** `data-testid` of this option's native radio input; none when omitted. */
+  testId?: string;
+}
+/**
+ * (library source 2026-11-05, not yet published) Icon picker: a `<fieldset role="radiogroup">` of native radio inputs
+ * (arrow keys move + select natively, Home / End jump to the first / last enabled icon), ControlValueAccessor with a string value
+ * (`''` = nothing selected). The selected icon is inverted and shows a check mark (never colour alone); every icon is named by its `label`
+ * (accessible name + `title` tooltip). Built-in validation like `ui-radio-group`: `required` -> "<label> is required."; a value that is not one
+ * of the `options` -> "Select a valid option." (not checked while `options` is empty); a disabled picker is never invalid.
+ * `disabled` combines with the forms API (`setDisabledState`). 44px touch targets on touch devices and phones; the icons wrap.
+ */
+export declare class IconPickerComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  private readonly _el;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly options: import("@angular/core").InputSignal<IconPickerOption[]>;
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  readonly error: import("@angular/core").InputSignal<string>;
+  /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** SVG path drawn for an option: its `path`, else the library icon `iconKey` (default: the option's `value`); '' when unknown. */
+  protected _path(o: IconPickerOption): string;
+  /** Fixed number of icons per row (0 = wrap freely, the default). On a phone the row wraps by width instead. */
+  readonly columns: import("@angular/core").InputSignal<number>;
+  /** Native `name` shared by the radios; a unique one is generated when omitted. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  private readonly _generatedName;
+  protected get _name(): string;
+  protected readonly _descId: string;
+  protected readonly _value: import("@angular/core").WritableSignal<string>;
+  private readonly _reveal;
+  private readonly _issue;
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  /** Emits the chosen value on a user pick. */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  constructor();
+  ngOnChanges(): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: string): void;
+  registerOnChange(fn: (v: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  protected onSelect(value: string): void;
+  /** Home / End select the first / last enabled icon (arrow keys are native radio behaviour). */
+  protected onKeydown(e: KeyboardEvent): void;
+  /** Touched once focus leaves the whole group. */
+  protected onFocusOut(event: FocusEvent): void;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<IconPickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<IconPickerComponent, "ui-icon-picker", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "invalidChange": "invalidChange";
+    "valueChange": "valueChange";
+  }, never, never, true, never>;
+}
 /**
  * Content shown directly under ONE option of a `ui-radio-group`, only while that option is selected (e.g. an address form under
  * "Ship to an alternate address"). Put an `<ng-template>` inside the group and name the option's value:
@@ -10465,7 +10765,7 @@ export declare class RadioMatrixComponent implements ControlValueAccessor, Valid
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
   /** Prefix of the native radio `name`s (one name per row); a unique one is generated when omitted. */
   readonly name: import("@angular/core").InputSignal<string>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   private readonly _generatedName;
@@ -10904,7 +11204,7 @@ export declare class DetailCardComponent {
   /** true (default) = the title is displayed in capitals (CSS only); false = shown as written. The text, aria-label and heading name are never changed. */
   readonly uppercaseTitle: import("@angular/core").InputSignal<boolean>;
   /** 1-6 makes the title a real heading for screen readers (role=heading, aria-level); null keeps it plain text. */
-  readonly headingLevel: import("@angular/core").InputSignal<2 | 1 | 5 | 3 | 4 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 4 | 2 | 3 | 5 | 6 | null>;
   /** Optional id for the title text; the card is then labelled by it. Without it the title is the card's aria-label. */
   readonly titleId: import("@angular/core").InputSignal<string>;
   /** Accessible name of the card when the header gives none (no header, or no title). A visible title wins; blank = no name. */
@@ -10918,7 +11218,7 @@ export declare class DetailCardComponent {
   /** Background colour of the footer bar (the `[card-footer]` slot) as any CSS colour. Empty = no colour of its own. */
   readonly footerBackground: import("@angular/core").InputSignal<string>;
   /** Alignment of the `[card-footer]` content: `'start'` (default, unchanged) or `'end'` = a right-aligned action row with an 8px gap. */
-  readonly footerAlign: import("@angular/core").InputSignal<"end" | "start">;
+  readonly footerAlign: import("@angular/core").InputSignal<"start" | "end">;
   /** Text colour as any CSS colour (`#fff`, `var(--on-dark)` …). Empty = the default colours. Colours the title, subtitle, chevron and body text. */
   readonly textColor: import("@angular/core").InputSignal<string>;
   /** false = no header at all (no title, edit button, toggle or divider): the card is only the body, always open. */
@@ -11547,7 +11847,7 @@ export declare class ColorInputComponent implements ControlValueAccessor, Valida
   readonly presets: import("@angular/core").InputSignal<ColorPreset[]>;
   /** Emits whenever the field becomes invalid / valid. */
   readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   /** Current model value (what the form control holds). */
@@ -13521,7 +13821,7 @@ export declare class SetupWizardComponent {
   protected customHintId(): string;
   protected readonly importBlocked: import("@angular/core").Signal<boolean>;
   /** The step's own two parts (`splitLayout`) show as two tabs, one card at a time; this is the open one (it starts on the app's part on every visit). */
-  protected readonly splitTab: import("@angular/core").WritableSignal<"extra" | "main">;
+  protected readonly splitTab: import("@angular/core").WritableSignal<"main" | "extra">;
   protected readonly splitTabs: import("@angular/core").Signal<{
     key: string;
     label: string;
@@ -15688,7 +15988,7 @@ export declare class PaymentSidePanelComponent {
   private readonly terminalAvailable;
   /** value -> label of every live method the rendered plugins contribute (the first plugin wins a duplicate value). */
   private readonly liveMethods;
-  protected readonly kind: import("@angular/core").Signal<"none" | "manual" | "live" | "terminal">;
+  protected readonly kind: import("@angular/core").Signal<"none" | "live" | "terminal" | "manual">;
   private kindOf;
   /** The method list as shown: record-only built-ins (a plugin takes over its own values), plugin extras, and only manual ones while a split is being built. */
   readonly methodList: import("@angular/core").Signal<PaymentMethodOption[]>;