@forgeroute/ui 0.3.10 → 0.3.12

package/types/forgeroute-ui.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectorRef, InjectionToken, OnDestroy, OnInit, Signal, WritableSignal } from "@angular/core";
-import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from "@angular/forms";
+import { ChangeDetectorRef, EnvironmentProviders, InjectionToken, OnDestroy, OnInit, Signal, TemplateRef, WritableSignal } from "@angular/core";
+import { AbstractControl, ControlValueAccessor, FormControl, ValidationErrors, Validator } from "@angular/forms";
 import { Observable, Subject } from "rxjs";
 import { HttpClient, HttpInterceptorFn } from "@angular/common/http";
 import { SafeHtml } from "@angular/platform-browser";
@@ -145,7 +145,7 @@ export interface ColumnDef {
   overdueThreshold?: number;
   /**
    * Maps a row to a progress bar. Return null to render a plain '—' (e.g. nothing to track).
-   * `label` is the text beside the bar (e.g. "3/5"); `tooltip` is the hover text. Leave `variant` out and the bar colors itself by completion (red / amber / blue / green).
+   * `label` is the text beside the bar (e.g. "3/5"); `tooltip` is the hover text. `ariaLabel` is the bar's accessible name (e.g. the row's name + " cap progress"); leave it out and the bar is named by its `label` text — which, with only "80%" to go on, tells a screen-reader user nothing about WHICH row it belongs to, so set it whenever several rows show a bar. Leave `variant` out and the bar colors itself by completion (red / amber / blue / green).
    */
   progressFn?: (item: any) => {
     value: number;
@@ -153,6 +153,7 @@ export interface ColumnDef {
     label?: string;
     variant?: 'blue' | 'green' | 'amber' | 'red' | 'slate';
     tooltip?: string;
+    ariaLabel?: string;
   } | null;
   /** Key in item holding the tags array. Defaults to col.key.
    *  Expected shape: { name: string; variant?: BadgeVariant }[] */
@@ -237,6 +238,15 @@ export interface SavedView {
  */
 export type BulkUpdateOption<T = any> = string | {
   field: string;
+  /**
+   * Field changes (`{ field, label }`): the bulk bar button text instead of "Change <column label>", e.g. `{ field: 'state', label: 'Archive / Restore' }`.
+   * It is also the inline select's accessible name, the default confirm's title and confirm button, and the default confirm message reads
+   * "<label>: <option> for N items?" (instead of "Change <column> to <option> for N items?"). Host `confirm` copy still wins; its
+   * `ctx.columnLabel` stays the column's label. Trimmed; blank = ignored. Ignored for the reserved `delete` key. Omit it and nothing changes.
+   *
+   *   { field: 'state', label: 'Archive / Restore' }
+   */
+  label?: string;
   exclude?: string[];
   allowedFrom?: Record<string, string[]>;
   /**
@@ -312,6 +322,8 @@ export interface BulkActionDef {
   type: string;
   /** Button label shown in the bulk bar. */
   label: string;
+  /** True when `label` came from the entry's custom `label` (the default confirm message then reads "<label>: <option> for N items?"). Only set then. */
+  customLabel?: boolean;
   /** Button style. Default: 'secondary'. Use 'danger' for destructive actions. */
   variant?: 'secondary' | 'danger';
   /** Values left out of this field's bulk select (from a `{ field, exclude }` bulkUpdateOptions entry). */
@@ -868,8 +880,12 @@ export declare function isoKey(p: {
 export declare function parseTime(value: string | null | undefined): number | null;
 /** "9:00 AM" / "12:30 PM" from an `HH:mm` value (returned unchanged when it cannot be parsed; '' for null/undefined/non-strings). */
 export declare function formatTime(value: string | null | undefined): string;
-export interface SelectOption {
-  value: string;
+/**
+ * One choice. `V` defaults to `string`, so existing `SelectOption[]` code is unchanged; `ui-select` itself accepts
+ * `SelectOption<string | number>[]` (numeric values for `valueType="number"`).
+ */
+export interface SelectOption<V extends string | number = string> {
+  value: V;
   label: string;
 }
 export declare class SelectComponent implements ControlValueAccessor, Validator, UiFieldValidity {
@@ -877,7 +893,9 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   /** Accessible name for a select with no visible label (e.g. an inline row or table-cell select). */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
-  readonly options: import("@angular/core").InputSignal<SelectOption[]>;
+  readonly options: import("@angular/core").InputSignal<SelectOption<string | number>[]>;
+  /** What the control value is: `'string'` (default, numeric option values become strings) or `'number'` (`number | null`). */
+  readonly valueType: import("@angular/core").InputSignal<"string" | "number">;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -888,6 +906,8 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _value: import("@angular/core").WritableSignal<string>;
+  /** Index of the first option matching the written / chosen value, or -1 (so only ONE option is selected even with duplicate keys). */
+  protected readonly _selectedIndex: import("@angular/core").Signal<number>;
   private readonly _reveal;
   private readonly _issue;
   /** True while the value breaks a built-in rule or the host passed an `[error]`. */
@@ -905,12 +925,19 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   registerOnValidatorChange(fn: () => void): void;
   protected readonly _selectId: string;
   private _onChange;
+  private _warned;
+  /** The comparison form of a key: in number mode a numeric text ('21.0', ' 21 ') becomes the canonical number text ('21'). */
+  private _norm;
+  protected _key(opt: SelectOption<string | number>): string;
+  private static _toKey;
   private _onTouched;
-  writeValue(val: string): void;
-  registerOnChange(fn: (v: string) => void): void;
+  writeValue(val: string | number | null | undefined): void;
+  registerOnChange(fn: (v: string | number | null) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
   protected onChange(event: Event): void;
+  /** The control value for the chosen native option value. */
+  private _emitted;
   protected onBlur(): void;
   private _check;
   static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
@@ -935,6 +962,11 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
       "required": false;
       "isSignal": true;
     };
+    "valueType": {
+      "alias": "valueType";
+      "required": false;
+      "isSignal": true;
+    };
     "required": {
       "alias": "required";
       "required": false;
@@ -1290,7 +1322,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   /**
    * Derives internal action definitions from the `bulkUpdateOptions` string array.
    * 'delete' → built-in danger action with table-managed confirm dialog.
-   * Everything else → matched to a column: label = "Change {col.label}", options from column config.
+   * Everything else → matched to a column: label = the entry's `label` when given, else "Change {col.label}"; options from column config.
    */
   protected readonly _bulkDefs: Signal<BulkActionDef[]>;
   /** Options for a field-based bulk action: the field's options minus the entry's `exclude` values. */
@@ -1788,14 +1820,33 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   }, never, ["*", "[modal-footer-left]", "[modal-footer-right]"], true, never>;
 }
 export type ToastType = 'success' | 'error' | 'info';
-export declare class ToastService {
+export declare class ToastService implements OnDestroy {
   readonly message: import("@angular/core").WritableSignal<string | null>;
   readonly type: import("@angular/core").WritableSignal<ToastType>;
+  /**
+   * Opt-in: every `<ui-toast>` shows a close button ("Dismiss notification"). Default `false`: toasts look exactly as before.
+   * Set once per app with `provideForgerouteToast({ dismissible: true })`, or per outlet with `<ui-toast [dismissible]="true" />`
+   * (the input wins). Escape, pause on hover / focus and `dismiss()` work either way.
+   */
+  readonly dismissible: import("@angular/core").WritableSignal<boolean>;
   private _timer;
+  private _deadline;
+  private _remaining;
+  private _paused;
   show(msg: string, duration?: number): void;
   /** Neutral (blue) toast for a result that is neither a success nor a failure, e.g. "No changes to save.". */
   info(msg: string, duration?: number): void;
   error(msg: string, duration?: number): void;
+  /** Removes the current toast now (close button / Escape). Safe when nothing is showing. */
+  dismiss(): void;
+  /** Holds the countdown while the pointer or keyboard focus is on the toast (WCAG 2.2.1). No-op when nothing is counting down. */
+  pause(): void;
+  /** Continues after `pause()`; the toast gets at least 1000ms more so it can be read. No-op when not paused. */
+  resume(): void;
+  /** The root injector is destroyed (app teardown, TestBed reset): no timer may outlive it. */
+  ngOnDestroy(): void;
+  private _clearTimer;
+  private _start;
   private _display;
   static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
@@ -1806,6 +1857,13 @@ export declare class ToastComponent {
   private readonly _id;
   /** True only for the earliest live instance, so exactly one toast (and one live region) renders. */
   protected readonly isHost: import("@angular/core").Signal<boolean>;
+  /**
+   * Opt-in close button. `null` (default) = follow `ToastService.dismissible` (itself `false` unless the app opted in with
+   * `provideForgerouteToast({ dismissible: true })`); `true` / `false` forces it for this outlet. Without it the toast has no
+   * control and looks exactly as it always did.
+   */
+  readonly dismissible: import("@angular/core").InputSignal<boolean | null>;
+  protected readonly showClose: import("@angular/core").Signal<boolean>;
   /**
    * Message that was already on screen when this instance took over from a destroyed host. While it is
    * unchanged the toast renders without the entry animation and without live-region roles, so the
@@ -1814,9 +1872,24 @@ export declare class ToastComponent {
   private readonly _adoptedMessage;
   protected readonly adopted: import("@angular/core").Signal<boolean>;
   private _wasWaiting;
+  private _hover;
+  private _focus;
+  /** Escape on a focused toast dismisses only the toast: a panel or dialog behind it that also listens for Escape stays open. */
+  protected onEscape(e: Event): void;
+  protected setHover(on: boolean): void;
+  protected setFocus(on: boolean): void;
+  protected onFocusOut(e: FocusEvent): void;
+  /** The countdown holds while the pointer or focus is on the toast and continues when both have left. */
+  private _syncPause;
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ui-toast", never, {}, {}, never, never, true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ui-toast", never, {
+    "dismissible": {
+      "alias": "dismissible";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
 export type ProgressBarVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate';
 /**
@@ -1826,7 +1899,10 @@ export type ProgressBarVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate';
  *
  * The fill color is built in and follows completion, in four bands: red up to 25%, amber up to 50%, blue up to 75%,
  * green above 75% (full = green). Nothing needs to be passed. `variant` is an optional override for a bar whose
- * color means something else (for example an overdue status) — when it is set the color stays fixed.
+ * color means something else (for example an overdue status, or a category-share bar) — when it is set the color stays fixed
+ * at every value. For a share-of-largest bar pass `[value]="count" [max]="largestCount" variant="blue"`.
+ * The width is set inline exactly as before (`style="width: N%;"` and nothing else, so existing consumers and e2e keep working); the transition is off for
+ * `prefers-reduced-motion` and the bar stays visible in forced-colors mode. Invalid numbers (NaN, negative max) draw an empty bar.
  */
 export declare class ProgressBarComponent {
   /** Completed amount. */
@@ -1840,6 +1916,12 @@ export declare class ProgressBarComponent {
   /** Hover / focus tooltip (library `uiTooltip`); `\n` starts a new line. */
   readonly tooltip: import("@angular/core").InputSignal<string>;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id of an element that names the bar (wins over `ariaLabel` / `label`). */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Human text for `aria-valuetext`, e.g. "12 documents, 40% of the largest category". Empty = not set. */
+  readonly valueText: import("@angular/core").InputSignal<string>;
+  /** `max` made safe: NaN / negative / infinite become 0 (empty bar, no division by zero). */
+  protected readonly safeMax: import("@angular/core").Signal<number>;
   protected readonly clampedValue: import("@angular/core").Signal<number>;
   /** Fill width in %: the rounded share, but never less than MIN_VISIBLE_PERCENT while the value is above 0 (1 of 300 would round to 0% and look empty). */
   protected readonly percent: import("@angular/core").Signal<number>;
@@ -1877,6 +1959,16 @@ export declare class ProgressBarComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueText": {
+      "alias": "valueText";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -2056,12 +2148,34 @@ export declare class ImageRepositionComponent {
     "y": "yChange";
   }, never, never, true, never>;
 }
+/** One checkbox of a group (`options`). */
+export interface CheckboxOption {
+  value: string;
+  label: string;
+  /** Helper text under the option. */
+  description?: string;
+  disabled?: boolean;
+}
 export declare class CheckboxComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for the native checkbox when there is no visible `label` (e.g. a table row's selector). */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
+  /**
+   * GROUP MODE (optional): with `options` the component renders a native `<fieldset>` with a `<legend>` and one checkbox per option,
+   * and its value (ngModel / forms) is the array of ticked option values (in option order). Without `options` it is the single
+   * boolean checkbox it always was. In group mode `label` / `checked` / `indeterminate` are not used; `required` means at least one
+   * option must be ticked ("<legend> is required.").
+   */
+  readonly options: import("@angular/core").InputSignal<CheckboxOption[]>;
+  /** Group heading (the fieldset's legend). */
+  readonly legend: import("@angular/core").InputSignal<string>;
+  /** Indent this checkbox (or the whole group) under its parent option, aligned with the parent's label. */
+  readonly indent: import("@angular/core").InputSignal<boolean>;
+  protected readonly groupMode: import("@angular/core").Signal<boolean>;
+  private readonly _selected;
+  protected isSelected(value: string): boolean;
   /** The box must be ticked. */
   readonly required: import("@angular/core").InputSignal<boolean>;
   /** Replaces the built-in "<label> is required." message. */
@@ -2094,11 +2208,15 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   private onChange;
   private onTouched;
-  writeValue(val: boolean): void;
-  registerOnChange(fn: (v: boolean) => void): void;
+  writeValue(val: boolean | string[] | null): void;
+  registerOnChange(fn: (v: boolean | string[]) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
   onToggle(event: Event): void;
+  /** The values keep the option order, and values that are not an option are dropped. */
+  private inOptionOrder;
+  /** Group mode: ticks / unticks one option; the form gets the full list of ticked values. */
+  onToggleOption(value: string, event: Event): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "ui-checkbox", never, {
     "label": {
@@ -2121,6 +2239,21 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
       "required": false;
       "isSignal": true;
     };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+    "indent": {
+      "alias": "indent";
+      "required": false;
+      "isSignal": true;
+    };
     "required": {
       "alias": "required";
       "required": false;
@@ -2156,75 +2289,186 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
     "invalidChange": "invalidChange";
   }, never, ["*"], true, never>;
 }
-export declare class ButtonComponent {
-  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "tab" | "icon" | "icon-danger">;
-  /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. */
-  readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
-  /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
-  readonly queryParams: import("@angular/core").InputSignal<Record<string, unknown> | null>;
-  readonly color: import("@angular/core").InputSignal<string | undefined>;
-  readonly active: import("@angular/core").InputSignal<boolean>;
-  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "xs" | "lg">;
-  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
-  readonly disabled: import("@angular/core").InputSignal<boolean>;
-  readonly loading: import("@angular/core").InputSignal<boolean>;
-  readonly fullWidth: import("@angular/core").InputSignal<boolean>;
-  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
-  readonly ariaExpanded: import("@angular/core").InputSignal<boolean | undefined>;
-  readonly ariaPressed: import("@angular/core").InputSignal<boolean | undefined>;
-  /** Id of the element that describes this button (an error or hint rendered next to it), e.g. `<ui-error errorId="x">`. Absent when empty. */
-  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
-  _footerLeft?: string;
-  _footerRight?: string;
-  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, {
-    "variant": {
-      "alias": "variant";
+/**
+ * On/off switch for settings: a label and optional hint on the left, the switch on the right
+ * (ControlValueAccessor with a boolean value; `[(checked)]` also works).
+ *
+ *   <ui-toggle label="SMS Enabled" hint="Allow sending texts" [(ngModel)]="form.sms" />
+ *   <ui-toggle label="Autoplay" [checked]="on()" (checkedChange)="on.set($event)" />
+ *   <ui-toggle ariaLabel="Enable feature" [(checked)]="on" />        <!-- no visible label -->
+ *
+ * Built on a native `<input type="checkbox" role="switch">`, so Space toggles it, it is focusable, and a screen reader
+ * announces it as a switch (on / off). The label and hint name and describe it. `disabled` (input or form control) dims it
+ * and blocks changes. On touch devices and phones the switch has a >= 44px hit area.
+ */
+export declare class ToggleComponent implements ControlValueAccessor {
+  /** Bold line on the left. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Grey helper text under the label. */
+  readonly hint: import("@angular/core").InputSignal<string>;
+  /** Accessible name when there is no visible `label`. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Whether the switch is on. Two-way: `[(checked)]`. */
+  readonly checked: import("@angular/core").ModelSignal<boolean>;
+  /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking, TS2445). */
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  private readonly _id;
+  protected readonly _inputId: string;
+  protected readonly _labelId: string;
+  protected readonly _hintId: string;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: boolean): void;
+  registerOnChange(fn: (v: boolean) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  protected onTouched(): void;
+  protected onToggle(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "ui-toggle", never, {
+    "label": {
+      "alias": "label";
       "required": false;
       "isSignal": true;
     };
-    "routerLink": {
-      "alias": "routerLink";
+    "hint": {
+      "alias": "hint";
       "required": false;
       "isSignal": true;
     };
-    "queryParams": {
-      "alias": "queryParams";
+    "ariaLabel": {
+      "alias": "ariaLabel";
       "required": false;
       "isSignal": true;
     };
-    "color": {
-      "alias": "color";
+    "checked": {
+      "alias": "checked";
       "required": false;
       "isSignal": true;
     };
-    "active": {
-      "alias": "active";
+    "_disabledInput": {
+      "alias": "disabled";
       "required": false;
       "isSignal": true;
     };
-    "size": {
-      "alias": "size";
+  }, {
+    "checked": "checkedChange";
+  }, never, never, true, never>;
+}
+/** One step of a `ui-stepper`. `key` must be unique within the list. */
+export interface StepperStep {
+  key: string;
+  label: string;
+  /** Small grey text under the label. */
+  description?: string;
+  /** Shows "(optional)" after the label and announces "optional". */
+  optional?: boolean;
+  /** Never selectable and announced "disabled". Does not change the step's state (complete / current / upcoming). */
+  disabled?: boolean;
+  /** `true` or a message marks the step as failed ("!" indicator, red). A message string is shown under the label and announced. */
+  error?: boolean | string;
+}
+export type StepperOrientation = 'horizontal' | 'vertical';
+/**
+ * Step indicator for wizards, onboarding flows and progress timelines. The state of every step comes from the order of
+ * `steps` and the key in `current`: steps before it are complete, it is current, steps after it are upcoming.
+ *
+ *   <!-- Wizard header: completed steps are buttons, so the user can go back (never skip ahead) -->
+ *   <ui-stepper [steps]="steps" [clickable]="true" [(current)]="step" />
+ *
+ *   <!-- Read-only progress indicator (steps are plain text; the host moves `current`) -->
+ *   <ui-stepper ariaLabel="Porting steps" size="sm" [steps]="steps" [current]="step()" />
+ *
+ *   <!-- Vertical timeline with descriptions; free navigation to any enabled step -->
+ *   <ui-stepper orientation="vertical" [steps]="steps" [clickable]="true" [linear]="false" [(current)]="step" />
+ *
+ *   <!-- Error state: `error: true` or a message on a step -->
+ *   steps = [{ key: 'info', label: 'Info' }, { key: 'pay', label: 'Payment', error: 'Card was declined' }, ...]
+ *
+ * `current` is two-way (`[(current)]`). An empty or unknown key means there is no current step: every step is upcoming
+ * (and with `linear`, none is selectable). `error` changes the indicator, not the state or `aria-current`.
+ *
+ * Interaction (`clickable`): a selectable step is a native `<button>` (Tab / Enter / Space, visible focus ring). With
+ * `linear` (default) only complete steps and the current step are selectable, so the user can go back but not skip
+ * ahead; with `[linear]="false"` every non-disabled step is. Activating a selectable step other than the current one
+ * sets `current` (so `[(current)]` follows) and emits `stepClick` with its key; activating the current step, or an
+ * unselectable one, does nothing. Without `clickable` there are no buttons or tab stops at all.
+ *
+ * Accessibility: an ordered list named by `ariaLabel`; the current step has `aria-current="step"`. Each step's name is
+ * "<label>, step N of M, completed | current step | not started" (+ ", optional", ", error: <message>", ", disabled"),
+ * built from visually hidden text so it is announced in the list even when the step is not a button. Indicators and
+ * connectors are decorative. A description is referenced with `aria-describedby`.
+ *
+ * Layout: `orientation` horizontal (row with connector lines that fill as steps complete) or vertical (column, connector
+ * on the left). Long labels wrap. At <= 480px a horizontal stepper with `labelsOnSmallScreens="current"` (default) shows
+ * only the current step's label (the others stay in the accessible name); `"all"` keeps them. Touch devices and phones
+ * get >= 44px tall step buttons. The connector transition honours `prefers-reduced-motion`.
+ */
+export declare class StepperComponent {
+  /** The steps in order. Keys must be unique. */
+  readonly steps: import("@angular/core").InputSignal<StepperStep[]>;
+  /** Key of the current step. Two-way: `[(current)]`. Empty / unknown = no current step (all upcoming). */
+  readonly current: import("@angular/core").ModelSignal<string>;
+  readonly orientation: import("@angular/core").InputSignal<StepperOrientation>;
+  /** `true`: selectable steps are buttons. `false` (default): purely indicative. */
+  readonly clickable: import("@angular/core").InputSignal<boolean>;
+  /** With `clickable`: `true` (default) = only complete steps and the current step are selectable; `false` = any enabled step. */
+  readonly linear: import("@angular/core").InputSignal<boolean>;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
+  /** 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">;
+  /** Emits the key of an activated selectable step that was not already current (after `current` was updated). */
+  readonly stepClick: import("@angular/core").OutputEmitterRef<string>;
+  private readonly _id;
+  protected readonly rows: import("@angular/core").Signal<{
+    step: StepperStep;
+    index: number;
+    state: "complete" | "current" | "upcoming";
+    error: boolean;
+    errorMessage: string;
+    selectable: boolean;
+    srText: string;
+    last: boolean;
+    descId: string;
+  }[]>;
+  protected activate(r: {
+    step: StepperStep;
+    selectable: boolean;
+    state: string;
+  }): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "ui-stepper", never, {
+    "steps": {
+      "alias": "steps";
+      "required": true;
+      "isSignal": true;
+    };
+    "current": {
+      "alias": "current";
       "required": false;
       "isSignal": true;
     };
-    "type": {
-      "alias": "type";
+    "orientation": {
+      "alias": "orientation";
       "required": false;
       "isSignal": true;
     };
-    "disabled": {
-      "alias": "disabled";
+    "clickable": {
+      "alias": "clickable";
       "required": false;
       "isSignal": true;
     };
-    "loading": {
-      "alias": "loading";
+    "linear": {
+      "alias": "linear";
       "required": false;
       "isSignal": true;
     };
-    "fullWidth": {
-      "alias": "fullWidth";
+    "size": {
+      "alias": "size";
       "required": false;
       "isSignal": true;
     };
@@ -2233,44 +2477,631 @@ export declare class ButtonComponent {
       "required": false;
       "isSignal": true;
     };
-    "ariaExpanded": {
-      "alias": "ariaExpanded";
+    "labelsOnSmallScreens": {
+      "alias": "labelsOnSmallScreens";
       "required": false;
       "isSignal": true;
     };
-    "ariaPressed": {
-      "alias": "ariaPressed";
+  }, {
+    "current": "currentChange";
+    "stepClick": "stepClick";
+  }, never, never, true, never>;
+}
+/** One weekday of the schedule. `open` / `close` are `HH:mm`; `open2` / `close2` are the optional second shift (split shift). */
+export interface BusinessHoursDay {
+  /** 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun' */
+  day: string;
+  /** 'Monday' … */
+  label: string;
+  enabled: boolean;
+  open: string;
+  close: string;
+  open2?: string;
+  close2?: string;
+}
+/** Mon–Fri 9:00 AM – 5:00 PM, Sat/Sun closed (their stored times are 9:00 AM – 12:00 PM, used when the day is switched on). */
+export declare function buildDefaultSchedule(): BusinessHoursDay[];
+/**
+ * Parses a stored schedule (`{"mon":{"enabled":true,"open":"09:00","close":"17:00"}, …}`, optionally with `open2` / `close2`)
+ * into a full Mon–Sun array. Missing days / fields fall back to the defaults; anything that is not valid JSON gives the defaults.
+ */
+export declare function parseBizHours(json: string | null | undefined): BusinessHoursDay[];
+/** The inverse of `parseBizHours`: `{ mon: { enabled, open, close[, open2, close2] }, … }` as a JSON string. */
+export declare function serializeBizHours(schedule: BusinessHoursDay[]): string;
+export type BusinessHoursStep = 15 | 30 | 60;
+/** `HH:mm` options for one day, every `step` minutes from 00:00 to the last slot of the day, labelled 12-hour ("9:00 AM") or 24-hour ("09:00"). */
+export declare function businessTimeOptions(step?: BusinessHoursStep, hour24?: boolean): {
+  value: string;
+  label: string;
+}[];
+/**
+ * Weekly business-hours editor: one row per weekday with a checkbox (open / closed) and "opens … to … closes" selects.
+ * ControlValueAccessor over `BusinessHoursDay[]` (`[(ngModel)]`, `formControl`, or `[(value)]`); the array is never mutated, each change emits a new array.
+ *
+ *   <ui-business-hours label="Schedule" [(ngModel)]="schedule" />
+ *   <ui-business-hours label="Schedule" [(ngModel)]="schedule" [step]="15" [hour24]="true" [allowSplitShifts]="true" [showCopyToWeekdays]="true" />
+ *
+ * Inputs
+ * - `label` (names the group), `hint`, `error` (host message, wins), `showErrors` (reveal built-in messages now; otherwise after the first change / blur), `disabled`.
+ * - `step` 15 | 30 | 60 minutes between time options (default 30). A stored time that is not on the grid is still offered, so it never shows blank.
+ * - `hour24` 24-hour labels ("17:00") instead of "5:00 PM".
+ * - `allowSplitShifts` adds an "Add shift" / "Remove shift" link per open day for a second shift (`open2` / `close2`), e.g. 9–12 and 1–5.
+ * - `showCopyToWeekdays` adds a "Copy Monday to weekdays" button that copies Monday's open flag and times (incl. the second shift) to Tue–Fri.
+ * - `required` at least one day must be open ("<label> needs at least one open day.").
+ *
+ * Validation (built in; `Validator` + `UiFieldValidity` + `invalidChange`, like the other inputs): for every open day the closing time must be after
+ * the opening time ("Monday: closing time must be after opening time."); with a second shift it must start after the first ends and end after it starts.
+ * Overnight ranges are not supported (a single `open < close` window per shift), the same as call routing.
+ *
+ * Test ids: every row is `bh-day-<day>` (mon … sun); inside it `bh-enabled-<day>` (the open/closed checkbox), `bh-open-<day>`, `bh-close-<day>`, and with a second shift `bh-open2-<day>`, `bh-close2-<day>`; the buttons keep `bh-add-shift`, `bh-remove-shift` (scope them with the row) and `bh-copy-weekdays`.
+ *
+ * Accessibility: a `role="group"` named by `label`; every select has its own name ("Monday opens", "Monday closes", "Monday second shift opens" …);
+ * errors are announced (`role="alert"`) and linked with `aria-describedby`.
+ */
+export declare class BusinessHoursComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  /** The schedule (also what `ngModel` / `formControl` hold). Two-way: `[(value)]`. */
+  readonly value: import("@angular/core").ModelSignal<BusinessHoursDay[]>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  /** Host-provided error message (wins over the built-in ones). */
+  readonly error: import("@angular/core").InputSignal<string>;
+  /** Reveal the built-in message now (e.g. after a failed Save click) instead of after the first change. */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** At least one day must be open. */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /** Minutes between time options. */
+  readonly step: import("@angular/core").InputSignal<BusinessHoursStep>;
+  /** 24-hour labels. */
+  readonly hour24: import("@angular/core").InputSignal<boolean>;
+  /** Allow a second shift per day (split shifts). */
+  readonly allowSplitShifts: import("@angular/core").InputSignal<boolean>;
+  /** Show "Copy Monday to weekdays". */
+  readonly showCopyToWeekdays: import("@angular/core").InputSignal<boolean>;
+  /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking, TS2445). */
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  protected readonly _descId: string;
+  private readonly _reveal;
+  private readonly _issue;
+  /** True while a built-in rule is broken or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  private readonly _options;
+  constructor();
+  /** Re-run the form control's validation when a rule input (`required`, `allowSplitShifts`) changes. */
+  ngOnChanges(): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: BusinessHoursDay[] | null): void;
+  registerOnChange(fn: (v: BusinessHoursDay[]) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  /** The grid options plus the stored value when it is not on the grid (so a saved 09:15 never renders blank). */
+  protected optionsFor(current: string): {
+    value: string;
+    label: string;
+  }[];
+  protected hasSecondShift(d: BusinessHoursDay): boolean;
+  /** A second shift needs room: the first must end at least one hour before the last slot of the day. */
+  protected canAddShift(d: BusinessHoursDay): boolean;
+  protected update(day: string, patch: Partial<BusinessHoursDay>): void;
+  protected addShift(day: string): void;
+  protected removeShift(day: string): void;
+  protected copyMondayToWeekdays(): void;
+  private _emit;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BusinessHoursComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BusinessHoursComponent, "ui-business-hours", never, {
+    "value": {
+      "alias": "value";
       "required": false;
       "isSignal": true;
     };
-    "ariaDescribedBy": {
-      "alias": "ariaDescribedBy";
+    "label": {
+      "alias": "label";
       "required": false;
       "isSignal": true;
     };
-    "_footerLeft": {
-      "alias": "modal-footer-left";
+    "hint": {
+      "alias": "hint";
       "required": false;
+      "isSignal": true;
     };
-    "_footerRight": {
-      "alias": "modal-footer-right";
+    "error": {
+      "alias": "error";
       "required": false;
+      "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
-}
-export declare class ToggleBadgeComponent {
-  readonly label: import("@angular/core").InputSignal<string>;
-  readonly active: import("@angular/core").InputSignal<boolean>;
-  readonly toggle: import("@angular/core").OutputEmitterRef<void>;
-  static ɵfac: i0.ɵɵFactoryDeclaration<ToggleBadgeComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<ToggleBadgeComponent, "ui-toggle-badge", never, {
-    "label": {
-      "alias": "label";
+    "showErrors": {
+      "alias": "showErrors";
       "required": false;
       "isSignal": true;
     };
-    "active": {
-      "alias": "active";
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "hour24": {
+      "alias": "hour24";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowSplitShifts": {
+      "alias": "allowSplitShifts";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCopyToWeekdays": {
+      "alias": "showCopyToWeekdays";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "invalidChange": "invalidChange";
+  }, never, never, true, never>;
+}
+export interface RadioOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+/**
+ * Group of native radio buttons inside a `<fieldset>` (+ `<legend>` = `label`), a ControlValueAccessor (string value, `''`
+ * = nothing selected). Arrow keys move and select natively because all radios share one `name`.
+ * Built-in validation: `required` -> "<label> is required."; a non-empty value that is not one of the `options` ->
+ * "Select a valid option." (not checked while `options` is empty). Disabled groups are never invalid.
+ *
+ * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
+ * provides `UiFieldValidity`. Messages show after the group lost focus or while `[showErrors]="true"`; a host `[error]` wins.
+ */
+export declare class RadioGroupComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly options: import("@angular/core").InputSignal<RadioOption[]>;
+  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>;
+  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>;
+  protected 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;
+  /** True while the value breaks a built-in rule or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  constructor();
+  /** Re-run the form control's validation when a rule input (required, options) changes. */
+  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;
+  /** Touched once focus leaves the whole group (moving between its radios does not count). */
+  protected onFocusOut(event: FocusEvent): void;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RadioGroupComponent, "ui-radio-group", 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;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "invalidChange": "invalidChange";
+  }, never, never, true, never>;
+}
+/** One phone number the host found for sale. */
+export interface PhoneNumberOption {
+  /** E.164 number, e.g. '+15125550100'. */
+  phoneNumber: string;
+  /** What the user sees, e.g. '(512) 555-0100'. */
+  friendlyName: string;
+  /** City / state label shown as a badge, e.g. 'Austin, TX'. */
+  region: string | null;
+}
+/** What the host's `search` function receives: exactly one of the two keys. */
+export interface PhoneNumberSearchCriteria {
+  postalCode?: string;
+  areaCode?: string;
+}
+/** What `selected` emits: the chosen number plus the criteria that found it. */
+export type PhoneNumberSelection = PhoneNumberOption & PhoneNumberSearchCriteria;
+export type PhoneNumberSearchMode = 'zip' | 'area-code';
+export declare const PHONE_NUMBER_ZIP_LENGTH = 5;
+export declare const PHONE_NUMBER_AREA_CODE_LENGTH = 3;
+/** Keeps only digits and cuts to `max` ("78701-1234" -> "78701"). */
+export declare function digitsOnly(value: string | null | undefined, max: number): string;
+/**
+ * Side panel that walks the user through finding and choosing a phone number to buy. The HOST does the searching (the
+ * library owns no HTTP and knows nothing about the phone provider): it passes a `search` function that returns the
+ * numbers for a ZIP code or an area code.
+ *
+ *   <ui-phone-number-picker
+ *     [open]="showPicker()"
+ *     defaultPostalCode="78701"
+ *     costNotice="Each number costs about $1.00/month."
+ *     [search]="searchNumbers"
+ *     (selected)="buy($event)"
+ *     (closed)="showPicker.set(false)" />
+ *
+ *   searchNumbers = (c: PhoneNumberSearchCriteria) => this.api.get<PhoneNumberOption[]>('/phone-numbers/available', c);
+ *
+ * Inputs: `open`, `title` ('Get a Phone Number'), `subtitle`, `defaultPostalCode` (prefilled ZIP, may be empty),
+ * `defaultMode` ('zip' | 'area-code'), `allowAreaCode` (true: the user can switch to an area code search), `search`
+ * (required), `costNotice` (warning shown on steps 1 and 3), `confirmLabel` ('Get this number'), `maxResults` (5: caps what is shown).
+ * Outputs: `selected` (PhoneNumberSelection, only from the final confirm button) and `closed`.
+ *
+ * Flow (three steps, nothing is ever searched or bought without a click):
+ *  1. Confirm location - ZIP code (5 digits) or area code (3 digits), prefilled from `defaultPostalCode`. The primary button
+ *     "Confirm ZIP code and search" is disabled until the value is complete; Enter does the same. Non-digits are ignored while
+ *     typing, a pasted ZIP+4 keeps its first 5 digits.
+ *  2. Results - `search(criteria)` runs ONCE per confirm; a newer search (or closing) drops the older response. Skeleton while
+ *     loading, an empty state, or an error with Retry. Picking a row only moves on to step 3.
+ *  3. Confirm number - "You chose ...". Only the final button emits `selected`, then `closed`.
+ * Every time `open` becomes true the panel starts again at step 1 with the defaults; closing discards everything.
+ * `defaultPostalCode` may arrive after the panel opened (the host loads it asynchronously): while the panel is on step 1 in ZIP
+ * mode and the user has NOT typed or pasted in the ZIP field (clearing it counts as an edit), a non-empty default fills the field;
+ * typed input is never overwritten, an empty default is ignored, and a default that arrives on step 2 or 3 is applied when the user
+ * returns to step 1 only if the field is still untouched.
+ * The final confirm emits `selected` at most once per opening (double clicks / repeated Enter are ignored and the button is disabled
+ * after the first click). The panel emits `closed` right after `selected`, so the host closes it; reopening re-enables the button.
+ *
+ * Accessibility: labelled fields with the library's inline errors, focus moves to the first control of each step (a text
+ * field is not focused on touch devices so no keyboard pops up), a visually hidden polite live region announces searching,
+ * result counts, errors and step changes, Escape closes the panel even from inside a field, 44px touch targets come from the
+ * shared components.
+ */
+export declare class PhoneNumberPickerComponent {
+  readonly open: import("@angular/core").InputSignal<boolean>;
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly subtitle: import("@angular/core").InputSignal<string>;
+  readonly defaultPostalCode: import("@angular/core").InputSignal<string>;
+  readonly defaultMode: import("@angular/core").InputSignal<PhoneNumberSearchMode>;
+  readonly allowAreaCode: import("@angular/core").InputSignal<boolean>;
+  /** Host-supplied search. Called once per confirm; the library never fetches by itself. */
+  readonly search: import("@angular/core").InputSignal<(criteria: PhoneNumberSearchCriteria) => Observable<PhoneNumberOption[]>>;
+  readonly costNotice: import("@angular/core").InputSignal<string>;
+  readonly confirmLabel: import("@angular/core").InputSignal<string>;
+  readonly maxResults: import("@angular/core").InputSignal<number>;
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  readonly selected: import("@angular/core").OutputEmitterRef<PhoneNumberSelection>;
+  protected readonly modeOptions: RadioOption[];
+  protected readonly skeletonRows: number[];
+  protected readonly modeCtl: FormControl<string>;
+  protected readonly zipCtl: FormControl<string>;
+  protected readonly areaCtl: FormControl<string>;
+  protected readonly step: import("@angular/core").WritableSignal<1 | 2 | 3>;
+  protected readonly mode: import("@angular/core").WritableSignal<PhoneNumberSearchMode>;
+  private readonly _zip;
+  private readonly _area;
+  protected readonly touched: import("@angular/core").WritableSignal<boolean>;
+  /** True once the user typed / pasted in the ZIP field this opening: a late default never overwrites it. */
+  private readonly _zipEdited;
+  /** True once the final confirm emitted `selected` this opening: further confirms are ignored. */
+  protected readonly confirmed: import("@angular/core").WritableSignal<boolean>;
+  protected readonly loading: import("@angular/core").WritableSignal<boolean>;
+  protected readonly searchFailed: import("@angular/core").WritableSignal<boolean>;
+  private readonly _results;
+  private readonly _criteria;
+  protected readonly chosen: import("@angular/core").WritableSignal<PhoneNumberOption | null>;
+  private readonly _value;
+  private readonly _length;
+  protected readonly valid: import("@angular/core").Signal<boolean>;
+  private readonly _fieldName;
+  /** Own "wrong length" message (empty is left to the input's built-in "is required"); only once the field was touched. */
+  protected readonly fieldError: import("@angular/core").Signal<string>;
+  protected readonly visibleResults: import("@angular/core").Signal<PhoneNumberOption[]>;
+  protected readonly primaryLabel: import("@angular/core").Signal<string>;
+  protected readonly changeLabel: import("@angular/core").Signal<"Change area code" | "Change ZIP code">;
+  protected readonly emptyTitle: import("@angular/core").Signal<string>;
+  protected readonly criteriaText: import("@angular/core").Signal<string>;
+  protected readonly announcement: import("@angular/core").Signal<string>;
+  private readonly _destroyRef;
+  private readonly _injector;
+  private readonly _el;
+  private _searchSub;
+  constructor();
+  protected onPrimary(): void;
+  protected onEnter(event: Event): void;
+  /** Typing a non-digit is blocked before it reaches the field. */
+  protected onBeforeInput(event: Event): void;
+  /** A pasted ZIP+4 / formatted text keeps its first 5 (or 3) digits and replaces the field's text. */
+  protected onPaste(event: Event): void;
+  protected submit(): void;
+  protected retry(): void;
+  protected choose(option: PhoneNumberOption): void;
+  protected changeLocation(): void;
+  protected backToResults(): void;
+  protected confirm(): void;
+  protected close(): void;
+  private _run;
+  private _abort;
+  private _reset;
+  /** A user edit: sanitise and write back into the field when something was stripped. */
+  private _typed;
+  private _write;
+  /** Moves focus to the first control of the step that was just shown. */
+  private _focusStep;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PhoneNumberPickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PhoneNumberPickerComponent, "ui-phone-number-picker", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "defaultPostalCode": {
+      "alias": "defaultPostalCode";
+      "required": false;
+      "isSignal": true;
+    };
+    "defaultMode": {
+      "alias": "defaultMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowAreaCode": {
+      "alias": "allowAreaCode";
+      "required": false;
+      "isSignal": true;
+    };
+    "search": {
+      "alias": "search";
+      "required": true;
+      "isSignal": true;
+    };
+    "costNotice": {
+      "alias": "costNotice";
+      "required": false;
+      "isSignal": true;
+    };
+    "confirmLabel": {
+      "alias": "confirmLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxResults": {
+      "alias": "maxResults";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "closed": "closed";
+    "selected": "selected";
+  }, never, never, true, never>;
+}
+export declare class ButtonComponent {
+  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "tab" | "icon" | "icon-danger">;
+  /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. */
+  readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
+  /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
+  readonly queryParams: import("@angular/core").InputSignal<Record<string, unknown> | null>;
+  /**
+   * Renders a plain `<a href>` instead of a button: for `mailto:`, `tel:`, `sms:`, `https://…` and relative URLs (use with
+   * `variant="link"` for an inline text link). The browser handles the click, so middle-click, copy-link and open-in-new-tab work and
+   * the host needs no click handler. Other schemes (`javascript:`, `data:`, …) are never rendered as a link: the component stays a
+   * button. `routerLink` wins when both are set. While `disabled` or `loading` the link has no `href` (it only looks disabled).
+   */
+  readonly href: import("@angular/core").InputSignal<string | null>;
+  /** Where to open the `href` (`_blank` = a new tab). */
+  readonly target: import("@angular/core").InputSignal<"_blank" | "_self" | "_parent" | "_top" | null>;
+  /** `rel` of the `href` link. A `_blank` target always gets `noopener noreferrer` added. */
+  readonly rel: import("@angular/core").InputSignal<string | null>;
+  /** The href when it is allowed (http, https, mailto, tel, sms or a relative URL), else null. */
+  protected readonly _safeHref: import("@angular/core").Signal<string | null>;
+  protected readonly _rel: import("@angular/core").Signal<string | null>;
+  readonly color: import("@angular/core").InputSignal<string | undefined>;
+  readonly active: import("@angular/core").InputSignal<boolean>;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "xs" | "lg">;
+  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  readonly fullWidth: import("@angular/core").InputSignal<boolean>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaExpanded: import("@angular/core").InputSignal<boolean | undefined>;
+  readonly ariaPressed: import("@angular/core").InputSignal<boolean | undefined>;
+  /** Id of the element that describes this button (an error or hint rendered next to it), e.g. `<ui-error errorId="x">`. Absent when empty. */
+  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
+  _footerLeft?: string;
+  _footerRight?: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "routerLink": {
+      "alias": "routerLink";
+      "required": false;
+      "isSignal": true;
+    };
+    "queryParams": {
+      "alias": "queryParams";
+      "required": false;
+      "isSignal": true;
+    };
+    "href": {
+      "alias": "href";
+      "required": false;
+      "isSignal": true;
+    };
+    "target": {
+      "alias": "target";
+      "required": false;
+      "isSignal": true;
+    };
+    "rel": {
+      "alias": "rel";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "active": {
+      "alias": "active";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "fullWidth": {
+      "alias": "fullWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaExpanded": {
+      "alias": "ariaExpanded";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaPressed": {
+      "alias": "ariaPressed";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "_footerLeft": {
+      "alias": "modal-footer-left";
+      "required": false;
+    };
+    "_footerRight": {
+      "alias": "modal-footer-right";
+      "required": false;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export declare class ToggleBadgeComponent {
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly active: import("@angular/core").InputSignal<boolean>;
+  readonly toggle: import("@angular/core").OutputEmitterRef<void>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToggleBadgeComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToggleBadgeComponent, "ui-toggle-badge", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "active": {
+      "alias": "active";
       "required": false;
       "isSignal": true;
     };
@@ -2962,115 +3793,6 @@ export declare class ComboboxComponent<T = unknown> implements ControlValueAcces
     "blurred": "blurred";
   }, never, never, true, never>;
 }
-export interface RadioOption {
-  value: string;
-  label: string;
-  description?: string;
-  disabled?: boolean;
-}
-/**
- * Group of native radio buttons inside a `<fieldset>` (+ `<legend>` = `label`), a ControlValueAccessor (string value, `''`
- * = nothing selected). Arrow keys move and select natively because all radios share one `name`.
- * Built-in validation: `required` -> "<label> is required."; a non-empty value that is not one of the `options` ->
- * "Select a valid option." (not checked while `options` is empty). Disabled groups are never invalid.
- *
- * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
- * provides `UiFieldValidity`. Messages show after the group lost focus or while `[showErrors]="true"`; a host `[error]` wins.
- */
-export declare class RadioGroupComponent implements ControlValueAccessor, Validator, UiFieldValidity {
-  readonly label: import("@angular/core").InputSignal<string>;
-  readonly options: import("@angular/core").InputSignal<RadioOption[]>;
-  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>;
-  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
-  /** Native `name` shared by the radios; a unique one is generated when omitted. */
-  readonly name: import("@angular/core").InputSignal<string>;
-  protected 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;
-  /** True while the value breaks a built-in rule or the host passed an `[error]`. */
-  readonly invalid: import("@angular/core").Signal<boolean>;
-  /** Message of the first broken built-in rule ('' when valid), shown or not. */
-  readonly errorMessage: import("@angular/core").Signal<string>;
-  /** Emits whenever the field becomes invalid / valid. */
-  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
-  protected readonly _activeError: import("@angular/core").Signal<string>;
-  private _onValidatorChange;
-  constructor();
-  /** Re-run the form control's validation when a rule input (required, options) changes. */
-  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;
-  /** Touched once focus leaves the whole group (moving between its radios does not count). */
-  protected onFocusOut(event: FocusEvent): void;
-  private _check;
-  static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroupComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RadioGroupComponent, "ui-radio-group", 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;
-    };
-    "orientation": {
-      "alias": "orientation";
-      "required": false;
-      "isSignal": true;
-    };
-    "name": {
-      "alias": "name";
-      "required": false;
-      "isSignal": true;
-    };
-    "_disabledInput": {
-      "alias": "disabled";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {
-    "invalidChange": "invalidChange";
-  }, never, never, true, never>;
-}
 /**
  * Types and pure helpers for the signer side of sending documents (docs/send-documents-contract.md, Addendum 2026-10-19).
  * Everything here is app-agnostic: the roles are `signer1 .. signer4`, labels / names come from the host.
@@ -3154,6 +3876,8 @@ export interface SignerDocLike {
   id: string;
   title: string;
   requiresCountersign?: boolean;
+  /** The row says whether the countersign box is placed on the document. `false` (with `requiresCountersign`) offers the "Place your countersignature box" link; `undefined` = unknown = no link. */
+  hasCountersignPlacement?: boolean;
   signerRoles?: SignerRole[];
   hasMapping?: boolean;
   hasDataFields?: boolean;
@@ -3175,6 +3899,14 @@ export interface DocumentSignerInfo {
   multiSigner: boolean;
   /** A document that is sent for signing requires the sender's countersignature. */
   countersign: boolean;
+  /**
+   * Only present (and non-empty) when a signable chosen document requires the countersignature and its row says the countersign box is NOT
+   * placed (`hasCountersignPlacement === false`): the documents the "Place your countersignature box" link is offered for.
+   */
+  countersignUnplaced?: {
+    id: string;
+    title: string;
+  }[];
   /** Several documents are chosen and one of them has several signers (it still goes to the one recipient). */
   multiDocumentNote: boolean;
   /** Under the document chip: what the mapping covers ('' when unknown). */
@@ -3218,6 +3950,8 @@ export declare function forwardContext(ctx: SendContext | null | undefined, type
 export declare function mergeFieldText(f: MergeCheckEmptyField): string;
 /** The warning lines of a merge-check answer: one line for one document, `<title>: …` per document for several. Nothing when nothing is empty. */
 export declare function mergeWarningLines(res: MergeCheckResult | null | undefined, docTitles: Record<string, string>): string[];
+/** The accessible name of the "Place your countersignature box" link of a document. */
+export declare function countersignPlaceLabel(title: string): string;
 /** What the sender wants done with the chosen documents. Same values as the backend (`ESIGN` | `ATTACH` | `BOTH`). */
 export type DocumentSendPurpose = 'ESIGN' | 'ATTACH' | 'BOTH';
 /** How the request reaches the recipient — derived from the channel: the Email tab sends `EMAIL`, the Text tab `TEXT`. */
@@ -3233,6 +3967,8 @@ export interface DocumentOption {
   hasFile: boolean;
   /** Only present (and true) when the row says the document needs the sender's countersignature (`requiresCountersign` on the `GET /documents` row): then a DocuSign send offers "Require my countersignature after client signs". */
   requiresCountersign?: boolean;
+  /** Only with `documentSigners` and `requiresCountersign`: the row says whether the countersign box is placed. `false` shows the "Place your countersignature box" link after the countersign line (`mapFieldsClick`); absent = unknown = no link. */
+  hasCountersignPlacement?: boolean;
   /** Only with `documentSigners`: the document's customer roles from the `GET /documents` row (`signerRoles`). `[]` = no signature fields (informational). */
   signerRoles?: SignerRole[];
   /** The row says the document has saved placements of any kind (drives the "Fields placed for N signers" line and the merge check). */
@@ -3249,6 +3985,7 @@ export interface DocumentSeed {
   fileName?: string | null;
   hasFile?: boolean;
   requiresCountersign?: boolean;
+  hasCountersignPlacement?: boolean;
   signerRoles?: SignerRole[];
   hasMapping?: boolean;
   hasDataFields?: boolean;
@@ -3273,8 +4010,27 @@ export interface DocumentPreviewTarget {
   title: string;
   fileName: string | null;
 }
-/** Opens a document for preview (the host knows its own route / viewer). Called synchronously inside the click. */
-export type DocumentPreviewHandler = (doc: DocumentPreviewTarget) => void;
+/** The recipient the panel currently holds (as the panel's `contactId` / `contactName` / `contactEmail` / `contactPhone` inputs). */
+export interface DocumentPreviewContact {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+}
+/**
+ * Second argument of `documentPreview`: who the document is being sent to, so the host can preview it filled for that recipient.
+ * `contact` is `null` when the panel has no recipient (all four contact inputs blank); `sendContext` is the panel's `sendContext` input
+ * as given (not filtered by `documentContextTypes`) or `null`.
+ */
+export interface DocumentPreviewContext {
+  contact: DocumentPreviewContact | null;
+  sendContext: SendContext | null;
+}
+/**
+ * Opens a document for preview (the host knows its own route / viewer). Called synchronously inside the click. The second argument
+ * is new and optional to use: a handler that only declares `doc` keeps working.
+ */
+export type DocumentPreviewHandler = (doc: DocumentPreviewTarget, context: DocumentPreviewContext) => void;
 /**
  * Turns on the "Expiry and Reminders" settings of the document section and sets their starting values (the keys you leave out start at
  * the defaults below). `null` / not passed = the settings are not shown and nothing about them is sent.
@@ -3402,6 +4158,10 @@ export declare class DocumentSendOptionsComponent implements UiFieldValidity {
    * (`window.open` after an await is blocked as a popup in Safari).
    */
   readonly documentPreview: import("@angular/core").InputSignal<DocumentPreviewHandler | null>;
+  /** The recipient passed to `documentPreview` as `context.contact` (the send panel sets it from its contact inputs). `null` = none. */
+  readonly previewContact: import("@angular/core").InputSignal<DocumentPreviewContact | null>;
+  /** The send context passed to `documentPreview` as `context.sendContext` (the send panel sets it from its `sendContext`). `null` = none. */
+  readonly previewSendContext: import("@angular/core").InputSignal<SendContext | null>;
   /**
    * Turns on the signer logic (`documentSigners` of the panel): a document's customer roles (from its row's `signerRoles`, or the config's
    * `resolveRoles`), informational documents (no signature fields), the one-signer DocuSign rule and the read-only countersign rule.
@@ -3415,7 +4175,7 @@ export declare class DocumentSendOptionsComponent implements UiFieldValidity {
   readonly envelope: import("@angular/core").InputSignal<DocumentEnvelopeTarget | null>;
   /** The document list is fixed: an existing envelope's. */
   readonly locked: import("@angular/core").Signal<boolean>;
-  protected readonly purposeOptions: import("@angular/core").Signal<SelectOption[]>;
+  protected readonly purposeOptions: import("@angular/core").Signal<SelectOption<string>[]>;
   readonly search$: Subject<string>;
   readonly options: import("@angular/core").WritableSignal<ComboboxOption<DocumentOption>[]>;
   readonly loading: import("@angular/core").WritableSignal<boolean>;
@@ -3552,6 +4312,16 @@ export declare class DocumentSendOptionsComponent implements UiFieldValidity {
       "required": false;
       "isSignal": true;
     };
+    "previewContact": {
+      "alias": "previewContact";
+      "required": false;
+      "isSignal": true;
+    };
+    "previewSendContext": {
+      "alias": "previewSendContext";
+      "required": false;
+      "isSignal": true;
+    };
     "signers": {
       "alias": "signers";
       "required": false;
@@ -3829,6 +4599,8 @@ declare class SendEmailComponent implements OnInit {
   readonly docuSignConnected: import("@angular/core").InputSignal<boolean>;
   /** "Preview Document" button(s) in the Documents section call this; `null` hides them. */
   readonly documentPreview: import("@angular/core").InputSignal<DocumentPreviewHandler | null>;
+  /** The recipient handed to `documentPreview` (second argument): the panel's contact inputs, `null` while all four are blank. */
+  readonly previewContact: import("@angular/core").Signal<DocumentPreviewContact | null>;
   /**
    * Turns on the video settings (Playback, Call-to-Action, Hide reactions, Watch Preview, Remove Video) once a video is attached, starting
    * from these defaults, and makes the video link carry them. `null` (default) = the attached video's plain share link is inserted, as before.
@@ -3841,6 +4613,11 @@ declare class SendEmailComponent implements OnInit {
   readonly validChange: import("@angular/core").OutputEmitterRef<boolean>;
   /** A document send was refused because the document / envelope changed meanwhile (404 / 409): the host refreshes its list. */
   readonly rejected: import("@angular/core").OutputEmitterRef<void>;
+  /** The "Place your countersignature box" link under the countersign line was clicked (document row `hasCountersignPlacement: false`). */
+  readonly mapFieldsClick: import("@angular/core").OutputEmitterRef<{
+    id: string;
+    title: string;
+  }>;
   readonly EMAIL_DISABLED_MESSAGE = "Email sending is disabled, so this can't be sent. Enable it in Communication Settings.";
   mode: 'compose' | 'template';
   subject: string;
@@ -4147,6 +4924,7 @@ declare class SendEmailComponent implements OnInit {
     "emailAdded": "emailAdded";
     "validChange": "validChange";
     "rejected": "rejected";
+    "mapFieldsClick": "mapFieldsClick";
   }, never, never, true, never>;
 }
 /** What the text form sends — the default `POST <baseUrl>/text-messages` body, or the host's `sendFn` argument. */
@@ -4214,6 +4992,8 @@ declare class SendTextComponent implements OnInit {
   readonly documentSigningOptions: import("@angular/core").InputSignal<DocumentSigningOptions | null | undefined>;
   /** "Preview Document" button(s) in the Documents section call this; `null` hides them. */
   readonly documentPreview: import("@angular/core").InputSignal<DocumentPreviewHandler | null>;
+  /** The recipient handed to `documentPreview` (second argument): the panel's contact inputs, `null` while all four are blank. */
+  readonly previewContact: import("@angular/core").Signal<DocumentPreviewContact | null>;
   /**
    * Turns on the video settings (Playback, Call-to-Action, Hide reactions, Watch Preview, Remove Video) once a video is attached, starting
    * from these defaults, and makes the video link carry them. `null` (default) = the plain share link is inserted, as before.
@@ -4588,6 +5368,15 @@ export declare class SendMessagePanelComponent {
   readonly emailAdded: import("@angular/core").OutputEmitterRef<string>;
   /** A document / envelope send was refused because it changed meanwhile (404 / 409): the host refreshes its list. */
   readonly rejected: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * With `documentSigners` on: the user clicked "Place your countersignature box" under the countersign line of a document that requires a
+   * countersignature but whose row says `hasCountersignPlacement: false` (docs/send-documents-contract.md, Addendum 2026-10-19 (b)).
+   * Payload = that document `{ id, title }`; the host navigates to Map Data Fields. Never emitted when the flag is true / absent.
+   */
+  readonly mapFieldsClick: import("@angular/core").OutputEmitterRef<{
+    id: string;
+    title: string;
+  }>;
   readonly phoneAdded: import("@angular/core").OutputEmitterRef<string>;
   readonly sendEmailRef: import("@angular/core").Signal<SendEmailComponent | undefined>;
   readonly sendTextRef: import("@angular/core").Signal<SendTextComponent | undefined>;
@@ -4809,6 +5598,7 @@ export declare class SendMessagePanelComponent {
     "sent": "sent";
     "emailAdded": "emailAdded";
     "rejected": "rejected";
+    "mapFieldsClick": "mapFieldsClick";
     "phoneAdded": "phoneAdded";
   }, never, never, true, never>;
 }
@@ -4835,14 +5625,27 @@ export declare class DocumentSignersComponent implements UiFieldValidity {
   /** The complete signer list (recipient first) or null while a role has no contact. Emitted on every change. */
   readonly signersChange: import("@angular/core").OutputEmitterRef<SendSigner[] | null>;
   readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  /** The "Place your countersignature box" link was clicked: the document whose countersign box is not placed (the host opens Map Data Fields). */
+  readonly mapFieldsClick: import("@angular/core").OutputEmitterRef<{
+    id: string;
+    title: string;
+  }>;
   readonly picks: import("@angular/core").WritableSignal<Partial<Record<SignerRole, ContactLookup | null>>>;
   protected readonly rowsShown: import("@angular/core").Signal<boolean>;
   protected readonly line: import("@angular/core").Signal<string>;
+  /** Documents the "place your box" link is offered for: native send only (DocuSign places its own fields) and only while the countersign line shows. */
+  protected readonly placeDocs: import("@angular/core").Signal<{
+    id: string;
+    title: string;
+  }[]>;
   readonly problems: import("@angular/core").Signal<Partial<Record<SignerRole, string>>>;
   readonly signers: import("@angular/core").Signal<SendSigner[] | null>;
   readonly errorMessage: import("@angular/core").Signal<string>;
   readonly invalid: import("@angular/core").Signal<boolean>;
   constructor();
+  protected placeLabel(title: string): string;
+  /** Visible text: with several documents the title is part of it (label-in-name: it contains the start of the accessible name). */
+  protected placeText(title: string): string;
   protected label(role: SignerRole): string;
   /** Under a picker: the problems of a chosen contact (no email / same person twice); the empty-row message is the picker's own (`visibleErrorMessage`). */
   protected visibleProblem(role: SignerRole): string;
@@ -4877,6 +5680,7 @@ export declare class DocumentSignersComponent implements UiFieldValidity {
   }, {
     "signersChange": "signersChange";
     "invalidChange": "invalidChange";
+    "mapFieldsClick": "mapFieldsClick";
   }, never, never, true, never>;
 }
 /** Quiet time after the last change before the check is requested. */
@@ -5099,10 +5903,16 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   /** Accessible name for a field with no visible label (e.g. an inline cell or title input). */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
-  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "password" | "tel" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "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>;
+  /**
+   * Which on-screen keyboard a phone shows (`numeric` = digits only, e.g. ZIP / area code; `decimal`, `tel`, `email`, `url`,
+   * `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" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -5114,6 +5924,11 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   readonly max: import("@angular/core").InputSignal<number | undefined>;
   /** `type="number"` only: most digits allowed after the decimal point. */
   readonly maxDecimals: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * What the control value is. `'string'` (default) = the typed text. `'number'` = `number | null`; requires `type="number"`
+   * (otherwise a dev-mode warning is logged once and string behaviour is used).
+   */
+  readonly valueType: import("@angular/core").InputSignal<"string" | "number">;
   /** 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 focused: import("@angular/core").OutputEmitterRef<void>;
@@ -5125,6 +5940,9 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _value: import("@angular/core").WritableSignal<string>;
   private readonly _reveal;
+  /** True when the control value is a number: `valueType="number"` on a `type="number"` field. */
+  private readonly _numeric;
+  private _warned;
   private readonly _formatting;
   private readonly _issue;
   /** True while the value breaks a built-in rule or the host passed an `[error]`. */
@@ -5140,13 +5958,15 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   constructor();
   /** Re-run the form control's validation when a rule input (required, maxlength, min, options, ...) changes. */
   ngOnChanges(): void;
-  writeValue(val: string | number | null): void;
+  writeValue(val: string | number | null | undefined): void;
   validate(control: AbstractControl): ValidationErrors | null;
   registerOnValidatorChange(fn: () => void): void;
-  registerOnChange(fn: (v: string) => void): void;
+  registerOnChange(fn: (v: string | number | null) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
   protected onInput(event: Event): void;
+  /** Typed text -> number, or null when blank / not a finite number. */
+  private static _parse;
   protected onFocus(): void;
   protected onBlur(): void;
   /** First broken built-in rule for `value`, or null. */
@@ -5191,6 +6011,11 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "inputmode": {
+      "alias": "inputmode";
+      "required": false;
+      "isSignal": true;
+    };
     "readonly": {
       "alias": "readonly";
       "required": false;
@@ -5226,6 +6051,11 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "valueType": {
+      "alias": "valueType";
+      "required": false;
+      "isSignal": true;
+    };
     "showErrors": {
       "alias": "showErrors";
       "required": false;
@@ -5252,6 +6082,12 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
+  /**
+   * Opt-in. `false` (default) = unchanged: a labelled field's hint renders INSIDE the `<label>` ("Label (hint)" is the accessible name,
+   * no aria-describedby for it). `true` = the hint is a sibling of the label (`.ta-head` row, id `<textarea id>-hint`), the accessible
+   * name is the label only and the hint is the description (`aria-describedby`, then the error). See docs/textarea-input.md.
+   */
+  readonly hintAsDescription: import("@angular/core").InputSignal<boolean>;
   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>;
@@ -5261,6 +6097,11 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
   protected readonly _value: import("@angular/core").WritableSignal<string>;
   /** The hint is shown inline after the label; with no label there is nothing to hang it on, so it renders under the field. */
   protected readonly _unlabelledHint: import("@angular/core").Signal<boolean>;
+  /**
+   * aria-describedby: the hint (inline after the label, or under the field when there is no label; the under-field
+   * hint is replaced by the error) followed by the error. The label is the accessible NAME; the hint is the DESCRIPTION.
+   */
+  protected readonly _describedBy: import("@angular/core").Signal<string | null>;
   private readonly _reveal;
   private readonly _issue;
   /** True while the value breaks a built-in rule or the host passed an `[error]`. */
@@ -5328,6 +6169,11 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
       "required": false;
       "isSignal": true;
     };
+    "hintAsDescription": {
+      "alias": "hintAsDescription";
+      "required": false;
+      "isSignal": true;
+    };
     "error": {
       "alias": "error";
       "required": false;
@@ -5347,47 +6193,142 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
     "invalidChange": "invalidChange";
   }, never, never, true, never>;
 }
+/** Why a chosen file was refused. */
+/** 'type' = not an accepted type, 'size' = over `maxSize`, 'empty' = a 0-byte file (`rejectEmpty`), 'small' = under `minSize`. */
+export type FileRejectReason = 'type' | 'size' | 'empty' | 'small';
+/** A refused file with the message the field shows (also emitted by `(fileRejected)`). */
+export interface FileRejection {
+  file: File;
+  reason: FileRejectReason;
+  message: string;
+}
+/** "1.5 MB", "820 KB", "12 B" (binary units, one decimal for MB and above). */
+export declare function formatFileSize(bytes: number): string;
+/** True when `file` matches one token of a native `accept` string (`.pdf`, `image/png`, `image/*`). Empty `accept` accepts everything. */
+export declare function fileMatchesAccept(file: File, accept: string): boolean;
+/** "PDF", "PNG, JPEG and WEBP" from an `accept` string, for the default type message. */
+export declare function acceptLabel(accept: string): string;
 /**
  * File picker styled like the other `ui-*` inputs (label, hint, required marker, error, disabled).
  * Value (ngModel / forms) is `File | null`, or `File[]` when `multiple` is set.
  *
  * Set `[showField]="false"` for a picker with no visible field and call `open()` from the host
  * (e.g. an "Attach document" menu action). `(filesSelected)` fires in both modes.
+ *
+ * Built in (all opt-in, nothing changes unless an input is set):
+ *  - `clearable`: a Remove button next to the chosen file; `(fileRemoved)` fires after it clears the selection.
+ *  - `accept` is enforced on picked AND dropped files (`enforceAccept`, on by default), `maxSize` (bytes) refuses bigger
+ *    files, `rejectEmpty` refuses a 0-byte file (`emptyMessage`) and `minSize` (bytes) refuses smaller ones (`minSizeMessage`). A refused file is never added to the value: the field shows the message (`typeMessage` / `sizeMessage`
+ *    override the wording, also in picker-only mode), and `(fileRejected)` emits `{ file, reason, message }`.
+ *  - `required` is a real rule: Angular `Validator` + `UiFieldValidity` (`invalid`, `errorMessage`, `invalidChange`,
+ *    `showErrors`), like the other inputs. The message shows after the field was used or `[showErrors]="true"`.
+ *  - `dropzone`: the field accepts files dropped on it.
+ *  - `showDetails`: file size after the name; `preview`: a thumbnail of a chosen image.
+ *  - `loading` (+ `loadingText`): a `ui-skeleton` replaces the file name while the host works on the file (scanning, uploading).
  */
-export declare class FileInputComponent implements ControlValueAccessor {
+export declare class FileInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for a field with no visible label. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly buttonLabel: import("@angular/core").InputSignal<string>;
-  /** Native `accept` string, e.g. ".pdf,.png". */
+  /** Native `accept` string, e.g. ".pdf,.png". Also enforced on picked and dropped files unless `enforceAccept` is false. */
   readonly accept: import("@angular/core").InputSignal<string>;
   readonly multiple: import("@angular/core").InputSignal<boolean>;
+  /** A file must be chosen (a real rule: Validator + UiFieldValidity, message shown after use or `showErrors`). */
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
+  /** Host-provided error message (wins over the built-in ones). Shown under a visible field only. */
   readonly error: import("@angular/core").InputSignal<string>;
   /** false = no visible field; open the picker from the host with `open()`. */
   readonly showField: import("@angular/core").InputSignal<boolean>;
-  /** Emits the chosen files (one or many) each time the user picks. */
+  /** Reveal the built-in "required" message now (e.g. after a failed Save click). */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** Show a Remove button next to the chosen file. */
+  readonly clearable: import("@angular/core").InputSignal<boolean>;
+  readonly removeLabel: import("@angular/core").InputSignal<string>;
+  /** Largest allowed file in bytes; a bigger file is refused. null = no limit. */
+  readonly maxSize: import("@angular/core").InputSignal<number | null>;
+  /** Refuse files that do not match `accept` (picked or dropped). */
+  readonly enforceAccept: import("@angular/core").InputSignal<boolean>;
+  /** Replaces the built-in "Only PDF files are allowed." message. */
+  readonly typeMessage: import("@angular/core").InputSignal<string>;
+  /** Replaces the built-in "The file must be 5 MB or smaller." message. */
+  readonly sizeMessage: import("@angular/core").InputSignal<string>;
+  /** Refuse a file with no content (0 bytes). Off by default. */
+  readonly rejectEmpty: import("@angular/core").InputSignal<boolean>;
+  /** Replaces the built-in "The file is empty." message. */
+  readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** Smallest allowed file in bytes; a smaller (non-empty) file is refused. null = no minimum. */
+  readonly minSize: import("@angular/core").InputSignal<number | null>;
+  /** Replaces the built-in "The file must be at least 10 KB." message. */
+  readonly minSizeMessage: import("@angular/core").InputSignal<string>;
+  /** The field accepts files dropped on it. */
+  readonly dropzone: import("@angular/core").InputSignal<boolean>;
+  /** Show the file size after the name. */
+  readonly showDetails: import("@angular/core").InputSignal<boolean>;
+  /** Show a thumbnail when the chosen file is an image. */
+  readonly preview: import("@angular/core").InputSignal<boolean>;
+  /** The host is working on the file (scanning, uploading): a skeleton replaces the name and Browse / Remove are disabled. */
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Screen-reader text while `loading` (default "Processing…"). */
+  readonly loadingText: import("@angular/core").InputSignal<string>;
+  /** Emits the chosen (accepted) files (one or many) each time the user picks or drops. */
   readonly filesSelected: import("@angular/core").OutputEmitterRef<File[]>;
+  /** A picked or dropped file was refused (wrong type or too big). */
+  readonly fileRejected: import("@angular/core").OutputEmitterRef<FileRejection>;
+  /** The Remove button cleared the selection. */
+  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>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _files: import("@angular/core").WritableSignal<File[]>;
   protected readonly _inputId: string;
   private readonly fileEl;
+  protected readonly _dragging: import("@angular/core").WritableSignal<boolean>;
+  /** Message of the last refused file ('' when the last pick was fine); shown in every mode. */
+  private readonly _rejection;
+  private readonly _reveal;
+  private readonly _issue;
+  /** True while a required field is empty, the last pick was refused, or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** What the field shows: the host error (visible field only), a refused file, or the revealed built-in message. */
+  protected readonly _shownError: import("@angular/core").Signal<string>;
   protected readonly summary: import("@angular/core").Signal<string>;
+  /** Object URL of the chosen image (single file) while `preview` is on. */
+  protected readonly _previewUrl: import("@angular/core").WritableSignal<string | null>;
+  private _urlToRevoke;
+  private _onValidatorChange;
   protected _onChange: (_: File | File[] | null) => void;
   protected _onTouched: () => void;
+  constructor();
+  private revokePreview;
+  /** Re-run the form control's validation when a rule input changes. */
+  ngOnChanges(): void;
+  validate(_control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
   /** Opens the native file dialog. */
   open(): void;
-  /** Clears the selection (and the native input, so the same file can be picked again). */
+  /** Clears the selection (and the native input, so the same file can be picked again) and any "refused file" message. */
   clear(): void;
+  /** The Remove button: clears, then tells the host. */
+  protected remove(): void;
   writeValue(val: File | File[] | null): void;
   registerOnChange(fn: (v: File | File[] | null) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
+  protected _touch(): void;
   protected onChange(event: Event): void;
+  protected onDragOver(event: DragEvent): void;
+  protected onDragLeave(event: DragEvent): void;
+  protected onDrop(event: DragEvent): void;
+  private rejectionFor;
+  /** Applies picked / dropped files: refused ones raise the message and `fileRejected`, accepted ones become the value. */
+  private accept$;
   static ɵfac: i0.ɵɵFactoryDeclaration<FileInputComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FileInputComponent, "ui-file-input", never, {
     "label": {
@@ -5395,48 +6336,128 @@ export declare class FileInputComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
-    "ariaLabel": {
-      "alias": "ariaLabel";
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "buttonLabel": {
+      "alias": "buttonLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "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;
+    };
+    "showField": {
+      "alias": "showField";
+      "required": false;
+      "isSignal": true;
+    };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearable": {
+      "alias": "clearable";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeLabel": {
+      "alias": "removeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSize": {
+      "alias": "maxSize";
       "required": false;
       "isSignal": true;
     };
-    "placeholder": {
-      "alias": "placeholder";
+    "enforceAccept": {
+      "alias": "enforceAccept";
       "required": false;
       "isSignal": true;
     };
-    "buttonLabel": {
-      "alias": "buttonLabel";
+    "typeMessage": {
+      "alias": "typeMessage";
       "required": false;
       "isSignal": true;
     };
-    "accept": {
-      "alias": "accept";
+    "sizeMessage": {
+      "alias": "sizeMessage";
       "required": false;
       "isSignal": true;
     };
-    "multiple": {
-      "alias": "multiple";
+    "rejectEmpty": {
+      "alias": "rejectEmpty";
       "required": false;
       "isSignal": true;
     };
-    "required": {
-      "alias": "required";
+    "emptyMessage": {
+      "alias": "emptyMessage";
       "required": false;
       "isSignal": true;
     };
-    "hint": {
-      "alias": "hint";
+    "minSize": {
+      "alias": "minSize";
       "required": false;
       "isSignal": true;
     };
-    "error": {
-      "alias": "error";
+    "minSizeMessage": {
+      "alias": "minSizeMessage";
       "required": false;
       "isSignal": true;
     };
-    "showField": {
-      "alias": "showField";
+    "dropzone": {
+      "alias": "dropzone";
+      "required": false;
+      "isSignal": true;
+    };
+    "showDetails": {
+      "alias": "showDetails";
+      "required": false;
+      "isSignal": true;
+    };
+    "preview": {
+      "alias": "preview";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadingText": {
+      "alias": "loadingText";
       "required": false;
       "isSignal": true;
     };
@@ -5447,6 +6468,9 @@ export declare class FileInputComponent implements ControlValueAccessor {
     };
   }, {
     "filesSelected": "filesSelected";
+    "fileRejected": "fileRejected";
+    "fileRemoved": "fileRemoved";
+    "invalidChange": "invalidChange";
   }, never, never, true, never>;
 }
 export declare class DateInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
@@ -5718,7 +6742,7 @@ export declare class TimeInputComponent implements ControlValueAccessor, Validat
 export declare class MultiSelectComponent implements ControlValueAccessor {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
-  readonly options: import("@angular/core").InputSignal<SelectOption[]>;
+  readonly options: import("@angular/core").InputSignal<SelectOption<string>[]>;
   readonly searchable: import("@angular/core").InputSignal<boolean>;
   readonly searchPlaceholder: import("@angular/core").InputSignal<string>;
   readonly required: import("@angular/core").InputSignal<boolean>;
@@ -5734,8 +6758,8 @@ export declare class MultiSelectComponent implements ControlValueAccessor {
   protected readonly _open: import("@angular/core").WritableSignal<boolean>;
   protected readonly _query: import("@angular/core").WritableSignal<string>;
   protected readonly _selectedSet: import("@angular/core").Signal<Set<string>>;
-  protected readonly _selectedOptions: import("@angular/core").Signal<SelectOption[]>;
-  protected readonly _filteredOptions: import("@angular/core").Signal<SelectOption[]>;
+  protected readonly _selectedOptions: import("@angular/core").Signal<SelectOption<string>[]>;
+  protected readonly _filteredOptions: import("@angular/core").Signal<SelectOption<string>[]>;
   private _onChange;
   private _onTouched;
   writeValue(val: string[] | null): void;
@@ -5953,7 +6977,8 @@ export declare class FormRowComponent {
 /**
  * Fixed-layout list item with an optional leading radio/checkbox, a title + badge,
  * and a secondary detail row rendered from a string array. All layout is handled
- * internally — pass inputs only, no ng-content.
+ * internally — pass inputs only; the one optional projection is the row-end action slot
+ * (`list-item-action`, alias `li-action`, see below).
  *
  * Usage:
  *   <ui-list-item
@@ -5967,6 +6992,16 @@ export declare class FormRowComponent {
  *     badgeVariant="green"
  *     [details]="[c.email, c.phone, 'Added ' + (c.createdAt | date:'MMM d, y')]"
  *     (select)="onSelect(c.id)" />
+ *
+ * Read-only row with actions (2026-10-19): `[interactive]="false"` renders a plain row (no label, no leading
+ * input, no pointer cursor, no hover tint, nothing focusable) and `[alwaysShowBadge]="true"` shows the badge
+ * without needing `checked`. Elements carrying `list-item-action` (alias `li-action`) are projected at the
+ * row end, vertically centred, after the text; they sit outside the row's label so clicking them never emits
+ * `select`. Absent = no extra DOM. Example:
+ *   <ui-list-item [interactive]="false" [bordered]="true" [title]="d.name" [details]="[d.fileName]"
+ *                 badge="Archived" badgeVariant="gray" [alwaysShowBadge]="true">
+ *     <ui-button list-item-action variant="icon" ariaLabel="Remove" (click)="remove(d)">…</ui-button>
+ *   </ui-list-item>
  */
 export declare class ListItemComponent {
   /** Show a radio button, checkbox, or nothing on the left. */
@@ -5981,10 +7016,24 @@ export declare class ListItemComponent {
   readonly highlighted: import("@angular/core").InputSignal<boolean>;
   /** Wraps the item in a bordered card (border + border-radius). */
   readonly bordered: import("@angular/core").InputSignal<boolean>;
+  /**
+   * `true` (default) = today's behaviour: clickable label, optional radio/checkbox, hover tint, pointer cursor.
+   * `false` = plain row: no label, no leading input (`leading` is ignored), no hover tint, no pointer, `select` never
+   * fires. Title, details, badge, `bordered` and `highlighted` look the same. Only projected actions stay focusable.
+   */
+  readonly interactive: import("@angular/core").InputSignal<boolean>;
+  /** Show the badge even when the row is not `checked` (for non-interactive rows with a status badge). Default false. */
+  readonly alwaysShowBadge: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Break long unbroken title / detail text (file names, e-mails) inside the text column instead of letting it overflow; use it
+   * on a row with `list-item-action` projections so the actions stay on screen at 320px. Default `false` = today's rendering.
+   * Rows with `[interactive]="false"` always wrap (new in 2026-10-19, nothing to preserve).
+   */
+  readonly wrapText: import("@angular/core").InputSignal<boolean>;
   get _borderedClass(): boolean;
   /** Primary label. */
   readonly title: import("@angular/core").InputSignal<string>;
-  /** Badge shown next to the title — only visible when the item is checked. */
+  /** Badge shown next to the title — only visible when the item is checked, unless `alwaysShowBadge` is set. */
   readonly badge: import("@angular/core").InputSignal<string | null>;
   readonly badgeVariant: import("@angular/core").InputSignal<BadgeVariant>;
   /**
@@ -6028,6 +7077,21 @@ export declare class ListItemComponent {
       "required": false;
       "isSignal": true;
     };
+    "interactive": {
+      "alias": "interactive";
+      "required": false;
+      "isSignal": true;
+    };
+    "alwaysShowBadge": {
+      "alias": "alwaysShowBadge";
+      "required": false;
+      "isSignal": true;
+    };
+    "wrapText": {
+      "alias": "wrapText";
+      "required": false;
+      "isSignal": true;
+    };
     "title": {
       "alias": "title";
       "required": false;
@@ -6050,7 +7114,227 @@ export declare class ListItemComponent {
     };
   }, {
     "select": "select";
-  }, never, never, true, never>;
+  }, never, ["[list-item-action], [li-action]"], true, never>;
+}
+/**
+ * Adds one app-wide toast outlet (a `<ui-toast>` appended to `<body>`) when the app starts, so toasts show on pages that have
+ * no `<ui-data-table>` and no `<ui-toast />` of their own.
+ *
+ *   providers: [provideForgerouteToast()]
+ *   providers: [provideForgerouteToast({ dismissible: true })]   // every toast also gets a close button (default: none)
+ *
+ * It is created first, so it is the registry's host and any other `<ui-toast>` (a table's own, a shell's) stays silent: each
+ * message renders and is announced once. Nothing happens on the server. The outlet is destroyed with the app.
+ */
+export declare function provideForgerouteToast(options?: {
+  dismissible?: boolean;
+}): EnvironmentProviders;
+/** Payload of `(reorder)`. `order[newIndex] = oldIndex`; apply it with `reorderItems(items, order)`. */
+export interface ListReorderEvent {
+  /** Index the moved row had before the move. */
+  from: number;
+  /** Index the moved row has after the move. */
+  to: number;
+  /** The new index order of the whole list: `order[newIndex] = oldIndex`. */
+  order: number[];
+}
+/** Context handed to the row template: `<ng-template let-item let-i="index" let-n="count">`. */
+export interface ListRowContext<T = unknown> {
+  $implicit: T;
+  index: number;
+  count: number;
+}
+/** Returns a new array in the order given by a `ListReorderEvent.order` (the input array is not changed). */
+export declare function reorderItems<T>(items: readonly T[], order: readonly number[]): T[];
+interface Row {
+  item: unknown;
+  key: unknown;
+  index: number;
+  label: string;
+  upLabel: string;
+  downLabel: string;
+  first: boolean;
+  last: boolean;
+  ctx: ListRowContext;
+}
+/**
+ * Semantic list container. Renders a real `<ul>` (default) or `<ol>` (`[ordered]="true"`) whose children are real `<li>`
+ * elements, one per entry of `items`. The row template (the single `<ng-template>` child) renders what is inside each
+ * `<li>`, normally a `<ui-list-item>`. Screen readers announce "list, N items" and "item i of N" natively.
+ *
+ * Optional reordering (`[reorderable]="true"`, off by default): Move up / Move down icon buttons at the row end,
+ * Alt+ArrowUp / Alt+ArrowDown from any focused element in the row, a polite live region and a `(reorder)` output.
+ * The host owns the data: the list never changes `items`; apply the event (`reorderItems`) and pass the new array.
+ *
+ *   <ui-list ariaLabel="Documents" [items]="docs()" [reorderable]="true" (reorder)="docs.set(reorderItems(docs(), $event.order))">
+ *     <ng-template let-doc let-i="index">
+ *       <ui-list-item [interactive]="false" [bordered]="true" [title]="doc.title" [details]="[doc.fileName]" />
+ *     </ng-template>
+ *   </ui-list>
+ */
+export declare class ListComponent<T = unknown> {
+  private readonly host;
+  private readonly injector;
+  /** The entries to render, one `<li>` each. The host owns this array; the list never changes it. */
+  readonly items: import("@angular/core").InputSignal<readonly T[]>;
+  /** `false` (default) renders a `<ul>`; `true` renders an `<ol>` with native numbering. */
+  readonly ordered: import("@angular/core").InputSignal<boolean>;
+  /** Shows Move up / Move down controls and enables Alt+ArrowUp / Alt+ArrowDown. Default `false`: no controls, no live region. */
+  readonly reorderable: import("@angular/core").InputSignal<boolean>;
+  /** Disables all move controls and the keyboard shortcut (the rows stay visible). */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** Accessible name of the list (`aria-label`). */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Id of the element naming the list (`aria-labelledby`). */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Row label used in "Move <label> up" and the live announcement. Default: the string itself, else the item's
+   * `title`, `label` or `name`, else "Item N".
+   */
+  readonly itemLabelFn: import("@angular/core").InputSignal<(item: T, index: number) => string>;
+  /** Stable identity per row (default: the item object itself) so reordering moves DOM instead of recreating it. */
+  readonly trackBy: import("@angular/core").InputSignal<(item: T, index: number) => unknown>;
+  /** Fires when the user moves a row. The host applies it and passes the new `items`. */
+  readonly reorder: import("@angular/core").OutputEmitterRef<ListReorderEvent>;
+  protected readonly rowTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+  protected readonly announcement: import("@angular/core").WritableSignal<string>;
+  protected readonly movedKey: import("@angular/core").WritableSignal<unknown>;
+  private pendingFocus;
+  private announceSeq;
+  /** Stable disambiguation tokens for repeated keys (duplicates in a primitive list), reused across recomputes. */
+  private dupTokens;
+  protected readonly rows: import("@angular/core").Signal<Row[]>;
+  private canReorder;
+  /** The `<li>` (direct child of this list) that contains `el`, or null. */
+  private rowIndexOf;
+  protected onKeydown(e: KeyboardEvent): void;
+  protected onClick(e: Event): void;
+  protected onFocusOut(e: FocusEvent): void;
+  /** Emits the reorder, announces it and restores focus to the moved row's control once the host has re-rendered. */
+  private move;
+  /** Identical text is not re-read by screen readers, so a repeat of the current message is cleared first and written after the next render. */
+  private announce;
+  private restoreFocus;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent<any>, "ui-list", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "ordered": {
+      "alias": "ordered";
+      "required": false;
+      "isSignal": true;
+    };
+    "reorderable": {
+      "alias": "reorderable";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemLabelFn": {
+      "alias": "itemLabelFn";
+      "required": false;
+      "isSignal": true;
+    };
+    "trackBy": {
+      "alias": "trackBy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "reorder": "reorder";
+  }, ["rowTemplate"], ["[list-empty]"], true, never>;
+}
+/**
+ * One labelled bar row: label | bar | count (and an optional share text under the count).
+ * Use it for category / share charts: `value` is the row's amount, `max` the largest amount (the bar is value / max),
+ * `variant` a fixed colour (default blue, never completion based).
+ *
+ * The row has no list role of its own: put `role="list"` on the host container and `role="listitem"` on each `ui-bar-row`
+ * (or wrap them in `ui-list`). The label names the inner progressbar (`aria-labelledby`) and `valueText`
+ * (default: the count plus the share) is its `aria-valuetext`.
+ * Layout: `minmax(0, 12rem) 1fr auto`; at 480px and below the label sits above the bar with the count at the end of the label line.
+ */
+export declare class BarRowComponent {
+  /** Row label (wraps; long unbroken text breaks instead of overflowing). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** This row's amount. */
+  readonly value: import("@angular/core").InputSignal<number>;
+  /** The amount that fills the bar (e.g. the largest category's count). 0 / NaN / negative draws an empty bar. */
+  readonly max: import("@angular/core").InputSignal<number>;
+  /** Fixed bar colour. Default blue; never follows completion. */
+  readonly variant: import("@angular/core").InputSignal<ProgressBarVariant>;
+  /** Count text override, e.g. "$1.2M". Empty = `value` formatted with `locale`. */
+  readonly count: import("@angular/core").InputSignal<string>;
+  /** Secondary text under the count, e.g. "40%". Empty = not shown. */
+  readonly share: import("@angular/core").InputSignal<string>;
+  /** Screen-reader text for the bar, e.g. "12 documents, 40% of the largest category". Empty = count plus share. */
+  readonly valueText: import("@angular/core").InputSignal<string>;
+  /** BCP 47 locale for the formatted count. Explicit, never the browser's implicit one. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** Unique id tying the label to the progressbar. */
+  protected readonly labelId: string;
+  protected readonly countText: import("@angular/core").Signal<string>;
+  protected readonly effectiveValueText: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BarRowComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BarRowComponent, "ui-bar-row", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "count": {
+      "alias": "count";
+      "required": false;
+      "isSignal": true;
+    };
+    "share": {
+      "alias": "share";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueText": {
+      "alias": "valueText";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
 /**
  * QR code for a URL (or any text), with a "Download QR Code" button (PNG). Projected content
@@ -6340,6 +7624,10 @@ export declare const errorContextInterceptor: HttpInterceptorFn;
  *
  * The fallback names what the user was doing: pass `action` explicitly ('send', 'export', …), or
  * let it come from the request method recorded by `errorContextInterceptor`. With neither it says "loading".
+ *
+ * `fallbackContext` is a bare noun phrase ("contact", "your invoices"); an empty or whitespace-only one becomes "data".
+ * The 404 text starts with "The <context>", so one leading article ("the", "a", "an") on the context is dropped
+ * there: "the contact" and "a contact" both read "The contact you're looking for could not be found.".
  */
 export declare function getErrorMessage(error: unknown, fallbackContext?: string, action?: ErrorAction): string;
 export interface UsStateOption {
@@ -6499,84 +7787,252 @@ export declare class AlertComponent {
       "required": false;
       "isSignal": true;
     };
-    "title": {
-      "alias": "title";
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissible": {
+      "alias": "dismissible";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "dismissed": "dismissed";
+  }, never, ["*"], true, never>;
+}
+/**
+ * Small muted helper text shown under a form or panel section.
+ *
+ *   <ui-hint>This does not affect the scheduled send date.</ui-hint>
+ */
+export declare class HintComponent {
+  static ɵfac: i0.ɵɵFactoryDeclaration<HintComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "ui-hint", never, {}, {}, never, ["*"], true, never>;
+}
+/** 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' | 'view' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call';
+/**
+ * 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, …).
+ *
+ *   <ui-icon name="delete" tooltip="Remove line item 1" variant="danger" (iconClick)="removeLineItem(i)" />
+ *
+ * `tooltip` is the text shown on hover / keyboard focus (any length) and, unless `ariaLabel` is set, the name
+ * assistive tech reads — always set it on a clickable icon. An unknown `name` draws nothing.
+ *
+ * `[loading]="true"` replaces the picture with a spinner and disables the button while the request the click started is running
+ * (the same busy state `ui-button` has) — e.g. `<ui-icon name="delete" [loading]="deleting()" … />`.
+ *
+ * `[interactive]="false"` draws just the picture (no button, no click) for an icon that sits next to text or inside another
+ * button — e.g. the arrow in a "Back" button, a bell beside a reminder. It is hidden from assistive tech unless a `tooltip` or `ariaLabel` is set.
+ *
+ *   <ui-button><ui-icon name="arrow-left" [interactive]="false" /> Back to Dashboard</ui-button>
+ */
+export declare class IconComponent {
+  /** Which icon to draw, e.g. `delete`, `edit`, `add`. */
+  readonly name: import("@angular/core").InputSignal<IconName | (string & {})>;
+  /** Hover / keyboard-focus tooltip text, e.g. "Remove line item 1". Any length. Also the accessible name unless `ariaLabel` is set. */
+  readonly tooltip: import("@angular/core").InputSignal<string>;
+  /** Screen-reader name. Leave empty to use `tooltip`; set it only when it should differ. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Icon size in px. */
+  readonly size: import("@angular/core").InputSignal<number>;
+  readonly variant: import("@angular/core").InputSignal<"danger" | "default">;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** The host is running the request this icon started: a spinner replaces the picture and the button is disabled (no click) until it is false again. */
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** false = just the picture (no button, no click) — for an icon beside text or inside another button. */
+  readonly interactive: import("@angular/core").InputSignal<boolean>;
+  /** Fires on click (not while disabled); the host performs the action. */
+  readonly iconClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  protected readonly accessibleName: import("@angular/core").Signal<string>;
+  protected readonly path: import("@angular/core").Signal<string | undefined>;
+  protected onClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ui-icon", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "tooltip": {
+      "alias": "tooltip";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "interactive": {
+      "alias": "interactive";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "iconClick": "iconClick";
+  }, never, never, true, never>;
+}
+/** What an item template receives (`let-item let-i="index"`). */
+export interface SortableItemContext<T> {
+  $implicit: T;
+  index: number;
+  first: boolean;
+  last: boolean;
+  /** True while this item is being dragged. */
+  dragging: boolean;
+}
+/** Marks the `<ng-template>` that renders one item: `<ng-template uiSortableItem let-item let-i="index"> … </ng-template>`. */
+export declare class SortableItemDirective<T = unknown> {
+  readonly template: TemplateRef<SortableItemContext<T>>;
+  static ngTemplateContextGuard<T>(_dir: SortableItemDirective<T>, _ctx: unknown): _ctx is SortableItemContext<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SortableItemDirective<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<SortableItemDirective<any>, "ng-template[uiSortableItem]", never, {}, {}, never, never, true, never>;
+}
+/** Emitted after the order changed (a drop, a keyboard move or a move button). */
+export interface SortableOrderChange<T> {
+  item: T;
+  from: number;
+  to: number;
+  /** The new full order. */
+  items: T[];
+}
+/**
+ * A list (or wrapping grid) of items that can optionally be reordered. Reordering is OFF by default: with `sortable` false it only
+ * renders the items (nothing is draggable or focusable and no controls show), so it is safe to use as a plain list.
+ *
+ *   <ui-sortable-list [(items)]="images" [sortable]="canReorder" layout="grid" ariaLabel="Product images"
+ *       [itemLabel]="imageLabel" (orderChange)="saveOrder($event)">
+ *     <ng-template uiSortableItem let-url let-i="index"> <ui-image-preview [src]="url" /> </ng-template>
+ *   </ui-sortable-list>
+ *
+ * With `sortable` on, an item can be moved by
+ *  - dragging it onto another item (mouse and any browser with native drag and drop; Firefox / Safari quirks are handled),
+ *  - the keyboard: focus an item and press Shift + Arrow keys (Shift + Home / End = first / last),
+ *  - the optional move buttons (`moveControls`), the touch- and pointer-friendly way (and the one that needs no gesture).
+ * Every change updates `items` (two-way `[(items)]`) and emits `orderChange`; the host saves it and can set `items` back if the
+ * save fails. A polite live region announces each move ("Image 3 moved to position 1 of 4").
+ */
+export declare class SortableListComponent<T = unknown> {
+  /** The items in their current order (two-way: `[(items)]`). */
+  readonly items: import("@angular/core").ModelSignal<T[]>;
+  /** Reordering on/off. Default OFF: the list only renders its items. */
+  readonly sortable: import("@angular/core").InputSignal<boolean>;
+  /** 'list' = one column; 'grid' = wrapping columns of at least `gridMin` px. */
+  readonly layout: import("@angular/core").InputSignal<"list" | "grid">;
+  readonly gridMin: import("@angular/core").InputSignal<number>;
+  /** Accessible name of the list. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Name of an item for assistive tech and tooltips ("Image 3"). */
+  readonly itemLabel: import("@angular/core").InputSignal<(item: T, index: number) => string>;
+  /** Show Move earlier / Move later buttons on each item (needs `sortable`) — the touch-friendly way to reorder. */
+  readonly moveControls: import("@angular/core").InputSignal<boolean>;
+  readonly moveEarlierLabel: import("@angular/core").InputSignal<string>;
+  readonly moveLaterLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader instruction for a focused sortable item. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Announcement after a move; receives the item label, the new position (1-based) and the list size. */
+  readonly moveAnnouncement: import("@angular/core").InputSignal<(label: string, position: number, total: number) => string>;
+  /** The order changed. */
+  readonly orderChange: import("@angular/core").OutputEmitterRef<SortableOrderChange<T>>;
+  protected readonly itemTemplate: import("@angular/core").Signal<SortableItemDirective<any>>;
+  protected readonly _helpId: string;
+  protected readonly _dragIndex: import("@angular/core").WritableSignal<number | null>;
+  protected readonly _overIndex: import("@angular/core").WritableSignal<number | null>;
+  protected readonly _announcement: import("@angular/core").WritableSignal<string>;
+  protected readonly _count: import("@angular/core").Signal<number>;
+  /** Moves the item at `from` to position `to` (clamped). No-op when nothing changes or sorting is off. */
+  move(from: number, to: number): void;
+  protected onDragStart(event: DragEvent, index: number): void;
+  protected onDragOver(event: DragEvent, index: number): void;
+  protected onDrop(event: DragEvent, index: number): void;
+  protected onDragEnd(): void;
+  protected onKeydown(event: KeyboardEvent, index: number): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SortableListComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SortableListComponent<any>, "ui-sortable-list", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "sortable": {
+      "alias": "sortable";
+      "required": false;
+      "isSignal": true;
+    };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "gridMin": {
+      "alias": "gridMin";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
       "required": false;
       "isSignal": true;
     };
-    "dismissible": {
-      "alias": "dismissible";
+    "itemLabel": {
+      "alias": "itemLabel";
       "required": false;
       "isSignal": true;
     };
-  }, {
-    "dismissed": "dismissed";
-  }, never, ["*"], true, never>;
-}
-/**
- * Small muted helper text shown under a form or panel section.
- *
- *   <ui-hint>This does not affect the scheduled send date.</ui-hint>
- */
-export declare class HintComponent {
-  static ɵfac: i0.ɵɵFactoryDeclaration<HintComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "ui-hint", never, {}, {}, never, ["*"], true, never>;
-}
-/** 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' | 'view' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call';
-/**
- * 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, …).
- *
- *   <ui-icon name="delete" label="Remove line item 1" variant="danger" (iconClick)="removeLineItem(i)" />
- *
- * `label` is the accessible name (an icon has no text) — always set it. An unknown `name` draws nothing.
- */
-export declare class IconComponent {
-  /** Which icon to draw, e.g. `delete`, `edit`, `add`. */
-  readonly name: import("@angular/core").InputSignal<IconName | (string & {})>;
-  /** Accessible name — what the click does ("Remove line item 1"). */
-  readonly label: import("@angular/core").InputSignal<string>;
-  /** Icon size in px. */
-  readonly size: import("@angular/core").InputSignal<number>;
-  readonly variant: import("@angular/core").InputSignal<"danger" | "default">;
-  readonly disabled: import("@angular/core").InputSignal<boolean>;
-  /** Fires on click (not while disabled); the host performs the action. */
-  readonly iconClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
-  protected readonly path: import("@angular/core").Signal<string | undefined>;
-  protected onClick(event: MouseEvent): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ui-icon", never, {
-    "name": {
-      "alias": "name";
-      "required": true;
+    "moveControls": {
+      "alias": "moveControls";
+      "required": false;
       "isSignal": true;
     };
-    "label": {
-      "alias": "label";
+    "moveEarlierLabel": {
+      "alias": "moveEarlierLabel";
       "required": false;
       "isSignal": true;
     };
-    "size": {
-      "alias": "size";
+    "moveLaterLabel": {
+      "alias": "moveLaterLabel";
       "required": false;
       "isSignal": true;
     };
-    "variant": {
-      "alias": "variant";
+    "helpText": {
+      "alias": "helpText";
       "required": false;
       "isSignal": true;
     };
-    "disabled": {
-      "alias": "disabled";
+    "moveAnnouncement": {
+      "alias": "moveAnnouncement";
       "required": false;
       "isSignal": true;
     };
   }, {
-    "iconClick": "iconClick";
-  }, never, never, true, never>;
+    "items": "itemsChange";
+    "orderChange": "orderChange";
+  }, ["itemTemplate"], never, true, never>;
 }
 export type ImagePreviewShape = 'circle' | 'rounded';
 export type ImagePreviewSize = 'sm' | 'md' | 'lg';
@@ -6931,23 +8387,238 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
-    "ariaLabel": {
-      "alias": "ariaLabel";
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "minHeight": {
+      "alias": "minHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxHeight": {
+      "alias": "maxHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "hide": {
+      "alias": "hide";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Returns the trimmed text when `value` is a plain, user-facing sentence from the server, otherwise `null`
+ * (not a string, empty, longer than 300 chars, or technical: stack trace, exception/class name, JSON, HTML,
+ * raw status text, "null"). Callers fall back to their own generated wording on `null`.
+ */
+export declare function humanReadableMessage(value: unknown): string | null;
+/**
+ * Single native radio button (visual tokens of `ui-checkbox`). Normally rendered by `ui-radio-group`; usable standalone
+ * when the host manages the shared `name` and the `checked` state itself.
+ */
+export declare class RadioComponent {
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string>;
+  /** Accessible name when there is no visible `label`. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** Radios with the same `name` form one keyboard (arrow key) group. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly checked: import("@angular/core").InputSignal<boolean>;
+  readonly invalid: import("@angular/core").InputSignal<boolean>;
+  /** Id(s) of the element(s) describing the group (hint / error). */
+  readonly describedBy: import("@angular/core").InputSignal<string>;
+  /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking). */
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  protected readonly disabled: import("@angular/core").InputSignal<boolean>;
+  protected readonly _labelId: string;
+  /** With a description inside the <label>, the accessible name would read "Email We send a message": name the input by the label text only. */
+  protected readonly _labelledBy: import("@angular/core").Signal<string | null>;
+  protected readonly _descriptionId: string;
+  /** Group hint/error id plus the option's own description (kept out of the label so the accessible name is label-only). */
+  protected readonly _describedByIds: import("@angular/core").Signal<string | null>;
+  /** Emits the radio's `value` when the user selects it. */
+  readonly selected: import("@angular/core").OutputEmitterRef<string>;
+  protected onChange(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "ui-radio", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "checked": {
+      "alias": "checked";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selected";
+  }, never, ["*"], true, never>;
+}
+/** One row of a `ui-radio-matrix`: `value` is the key in the model, `label` the row header. */
+export interface RadioMatrixRow {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+/**
+ * Matrix of native radio buttons: one row per item, one column per choice, exactly one choice per row (e.g. a page-permission
+ * grid: rows = pages, columns = Full Access / Read Only / Hidden). A ControlValueAccessor whose value is a record
+ * `{ [row.value]: column.value }` (`''` / missing = nothing chosen for that row). Arrow keys move inside a row natively because the
+ * radios of a row share one `name`. Every radio is named "<row>: <column>" for screen readers; rows are `<th scope="row">`, columns
+ * `<th scope="col">`.
+ *
+ * Built-in validation: `required` -> every row needs a choice ("Choose an option in every row." / "<label>: choose an option in
+ * every row."); a value that is not one of the `columns` -> "Select a valid option."; a key that is not one of the `rows` is
+ * ignored (and kept untouched in the model). Disabled matrices are never invalid.
+ *
+ * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
+ * provides `UiFieldValidity`. Messages show after the matrix lost focus or while `[showErrors]="true"`; a host `[error]` wins.
+ *
+ *   <ui-radio-matrix label="Page permissions" rowHeader="Page" [rows]="pages" [columns]="levels" [(ngModel)]="permissions" />
+ */
+export declare class RadioMatrixComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Text of the top-left header cell (what the rows are, e.g. "Page"). */
+  readonly rowHeader: import("@angular/core").InputSignal<string>;
+  readonly rows: import("@angular/core").InputSignal<RadioMatrixRow[]>;
+  /** The choices, one column each (same shape as `ui-radio-group` options; `description` is not shown). */
+  readonly columns: import("@angular/core").InputSignal<RadioOption[]>;
+  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>;
+  /** 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>;
+  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<Record<string, string>>;
+  private readonly _reveal;
+  private readonly _issue;
+  /** True while the value breaks a built-in rule or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  constructor();
+  /** Re-run the form control's validation when a rule input (required, rows, columns) changes. */
+  ngOnChanges(): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: Record<string, string> | null): void;
+  registerOnChange(fn: (v: Record<string, string>) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  protected onSelect(row: string, column: string): void;
+  /** True when a required matrix has no valid choice in this row (shown on the row header and the dots). */
+  protected _rowInvalid(row: RadioMatrixRow): boolean;
+  /** Touched once focus leaves the whole matrix (moving between its radios does not count). */
+  protected onFocusOut(event: FocusEvent): void;
+  private _toRecord;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RadioMatrixComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RadioMatrixComponent, "ui-radio-matrix", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowHeader": {
+      "alias": "rowHeader";
       "required": false;
       "isSignal": true;
     };
-    "placeholder": {
-      "alias": "placeholder";
+    "rows": {
+      "alias": "rows";
       "required": false;
       "isSignal": true;
     };
-    "required": {
-      "alias": "required";
+    "columns": {
+      "alias": "columns";
       "required": false;
       "isSignal": true;
     };
-    "readonly": {
-      "alias": "readonly";
+    "required": {
+      "alias": "required";
       "required": false;
       "isSignal": true;
     };
@@ -6961,18 +8632,13 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
-    "minHeight": {
-      "alias": "minHeight";
-      "required": false;
-      "isSignal": true;
-    };
-    "maxHeight": {
-      "alias": "maxHeight";
+    "showErrors": {
+      "alias": "showErrors";
       "required": false;
       "isSignal": true;
     };
-    "hide": {
-      "alias": "hide";
+    "name": {
+      "alias": "name";
       "required": false;
       "isSignal": true;
     };
@@ -6981,183 +8647,342 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+  }, {
+    "invalidChange": "invalidChange";
+  }, never, never, true, never>;
 }
 /**
- * Returns the trimmed text when `value` is a plain, user-facing sentence from the server, otherwise `null`
- * (not a string, empty, longer than 300 chars, or technical: stack trace, exception/class name, JSON, HTML,
- * raw status text, "null"). Callers fall back to their own generated wording on `null`.
- */
-export declare function humanReadableMessage(value: unknown): string | null;
-/**
- * Single native radio button (visual tokens of `ui-checkbox`). Normally rendered by `ui-radio-group`; usable standalone
- * when the host manages the shared `name` and the `checked` state itself.
+ * Card for detail pages: an optional header and a body, both filled by the page that uses it.
+ *
+ * Header (all optional - set `[showHeader]="false"` and the card is just the body):
+ *  - `title` / `subtitle`: the bold uppercase title and the grey line under it.
+ *  - `titleId`: an id for the title text, which also names the card for assistive tech (aria-labelledby).
+ *  - `<div card-header-leading>`: something before the title block, such as a logo or an icon.
+ *  - `<ng-container card-header>`: your own header content, shown under the title (or instead of it when no title is set).
+ *  - `<ng-container card-header-action>`: buttons or links on the right side of the header.
+ *  - `showEdit` + `editLabel` + `(editClick)`: the built-in Edit button.
+ *  - `background`: the card's background colour (any CSS colour; default white).
+ *  - `textColor`: the colour of the title, subtitle, chevron and body text (any CSS colour; default: the normal slate colours). Use it for light text on a dark `background`. Text you colour yourself inside the body keeps its own colour.
+ *  - The body has built-in padding (16px 18px, matching the header's 18px side padding); there is no padding input.
+ *  - `collapsible` (default true): a chevron toggle and a clickable header; `[(expanded)]` is two-way.
+ *    Without a header, or with `collapsible` false, the body is always open.
+ *
+ * The title is always shown in capitals; the subtitle keeps the case you give it. The body is the default content slot. A collapsed body is removed from the tab order and from assistive tech.
+ *
+ *   <ui-detail-card title="COMMUNICATIONS" subtitle="All calls, texts, and emails"> ...body... </ui-detail-card>
+ *   <ui-detail-card title="CONTACT INFO" [showEdit]="true" (editClick)="openEdit()"> ... </ui-detail-card>
+ *   <ui-detail-card [showHeader]="false"> ...body only... </ui-detail-card>
+ *   <ui-detail-card [collapsible]="false">
+ *     <div card-header>Any markup</div>
+ *     <ui-button card-header-action size="xs" variant="secondary">Add</ui-button>
+ *     ...body...
+ *   </ui-detail-card>
  */
-export declare class RadioComponent {
-  readonly label: import("@angular/core").InputSignal<string>;
-  readonly description: import("@angular/core").InputSignal<string>;
-  /** Accessible name when there is no visible `label`. */
-  readonly ariaLabel: import("@angular/core").InputSignal<string>;
-  readonly value: import("@angular/core").InputSignal<string>;
-  /** Radios with the same `name` form one keyboard (arrow key) group. */
-  readonly name: import("@angular/core").InputSignal<string>;
-  readonly checked: import("@angular/core").InputSignal<boolean>;
-  readonly invalid: import("@angular/core").InputSignal<boolean>;
-  /** Id(s) of the element(s) describing the group (hint / error). */
-  readonly describedBy: import("@angular/core").InputSignal<string>;
-  /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking). */
-  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
-  protected readonly disabled: import("@angular/core").InputSignal<boolean>;
-  protected readonly _labelId: string;
-  /** With a description inside the <label>, the accessible name would read "Email We send a message": name the input by the label text only. */
-  protected readonly _labelledBy: import("@angular/core").Signal<string | null>;
-  protected readonly _descriptionId: string;
-  /** Group hint/error id plus the option's own description (kept out of the label so the accessible name is label-only). */
-  protected readonly _describedByIds: import("@angular/core").Signal<string | null>;
-  /** Emits the radio's `value` when the user selects it. */
-  readonly selected: import("@angular/core").OutputEmitterRef<string>;
-  protected onChange(event: Event): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "ui-radio", never, {
-    "label": {
-      "alias": "label";
+export declare class DetailCardComponent {
+  /** Bold uppercase title. Empty = no title text. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** 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<1 | 2 | 3 | 4 | 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>;
+  /** Grey line under the title. */
+  readonly subtitle: import("@angular/core").InputSignal<string>;
+  /** Card background as any CSS colour (`#f8fafc`, `var(--surface)` …). Empty = white. */
+  readonly background: import("@angular/core").InputSignal<string>;
+  /** 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. */
+  readonly showHeader: import("@angular/core").InputSignal<boolean>;
+  /** Chevron toggle + clickable header. false = the body is always open. */
+  readonly collapsible: import("@angular/core").InputSignal<boolean>;
+  /** Two-way: whether the body is open. */
+  readonly expanded: import("@angular/core").ModelSignal<boolean>;
+  /** Show the built-in Edit button in the header. */
+  readonly showEdit: import("@angular/core").InputSignal<boolean>;
+  readonly editLabel: import("@angular/core").InputSignal<string>;
+  readonly editClick: import("@angular/core").OutputEmitterRef<void>;
+  /** The body is open unless the card has a header that is collapsible and was collapsed. */
+  isOpen(): boolean;
+  toggle(): void;
+  /** A click on the header toggles, except on a control inside it (Edit, your own header actions, links, inputs). */
+  onHeaderClick(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DetailCardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DetailCardComponent, "ui-detail-card", never, {
+    "title": {
+      "alias": "title";
       "required": false;
       "isSignal": true;
     };
-    "description": {
-      "alias": "description";
+    "headingLevel": {
+      "alias": "headingLevel";
       "required": false;
       "isSignal": true;
     };
-    "ariaLabel": {
-      "alias": "ariaLabel";
+    "titleId": {
+      "alias": "titleId";
       "required": false;
       "isSignal": true;
     };
-    "value": {
-      "alias": "value";
+    "subtitle": {
+      "alias": "subtitle";
       "required": false;
       "isSignal": true;
     };
-    "name": {
-      "alias": "name";
+    "background": {
+      "alias": "background";
       "required": false;
       "isSignal": true;
     };
-    "checked": {
-      "alias": "checked";
+    "textColor": {
+      "alias": "textColor";
       "required": false;
       "isSignal": true;
     };
-    "invalid": {
-      "alias": "invalid";
+    "showHeader": {
+      "alias": "showHeader";
       "required": false;
       "isSignal": true;
     };
-    "describedBy": {
-      "alias": "describedBy";
+    "collapsible": {
+      "alias": "collapsible";
       "required": false;
       "isSignal": true;
     };
-    "_disabledInput": {
-      "alias": "disabled";
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
+    "showEdit": {
+      "alias": "showEdit";
+      "required": false;
+      "isSignal": true;
+    };
+    "editLabel": {
+      "alias": "editLabel";
       "required": false;
       "isSignal": true;
     };
   }, {
-    "selected": "selected";
-  }, never, ["*"], true, never>;
+    "expanded": "expandedChange";
+    "editClick": "editClick";
+  }, never, ["[card-header-leading]", "[card-header]", "[card-header-action]", "*"], true, never>;
 }
-/** One row of a `ui-radio-matrix`: `value` is the key in the model, `label` the row header. */
-export interface RadioMatrixRow {
+export type DividerSpace = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * Horizontal divider line (an `<hr>`) with the app's standard colour and optional space above / below.
+ * It is a real separator for assistive tech by default; set `decorative` when it only adds visual rhythm and the
+ * content around it already reads as separate (the line is then hidden from screen readers).
+ *
+ *   <section class="kpi-grid"> ... </section>
+ *   <ui-divider />                                   // line with 16px below
+ *   <ui-divider spaceAbove="md" spaceBelow="lg" />
+ *   <ui-divider [decorative]="true" />
+ */
+export declare class DividerComponent {
+  /** Space above the line: none (0), sm (8px), md (16px), lg (24px). */
+  readonly spaceAbove: import("@angular/core").InputSignal<DividerSpace>;
+  /** Space below the line: none (0), sm (8px), md (16px), lg (24px). */
+  readonly spaceBelow: import("@angular/core").InputSignal<DividerSpace>;
+  /** true = purely visual: hidden from assistive tech. */
+  readonly decorative: import("@angular/core").InputSignal<boolean>;
+  protected readonly above: import("@angular/core").Signal<number>;
+  protected readonly below: import("@angular/core").Signal<number>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DividerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "ui-divider", never, {
+    "spaceAbove": {
+      "alias": "spaceAbove";
+      "required": false;
+      "isSignal": true;
+    };
+    "spaceBelow": {
+      "alias": "spaceBelow";
+      "required": false;
+      "isSignal": true;
+    };
+    "decorative": {
+      "alias": "decorative";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Wraps a block of form controls (a settings page, a configuration card) so a view-only user can look at the current
+ * values but change nothing. While `readOnly` is true the wrapper's native `<fieldset>` is `disabled`, and the browser
+ * disables every native form control inside it: text inputs, checkboxes, selects, textareas, radios and the `<button>`
+ * rendered by `ui-button`, plus the native controls inside the `ui-*` inputs.
+ *
+ * **Default: `readOnly` is false.** With no input nothing is locked and every control is fully editable. The wrapper only
+ * locks when the host passes `[readOnly]="true"` (typically `perm() !== 'full'`). Flipping it live re-enables / disables
+ * the same projected DOM nodes; values, `ngModel` state and focus targets are preserved.
+ *
+ * Limits (native `<fieldset disabled>` semantics):
+ * - Only NATIVE form controls are disabled. Non-native clickable things (divs with click handlers, links, drag handles,
+ *   `ui-data-table` toolbars and row menus) are NOT affected: hide or guard them in the host.
+ * - A `ui-data-table` has its own `[permission]` input. Keep tables outside the wrapper or use that input.
+ * - Nesting: a nested wrapper with `readOnly=false` inside a locked wrapper stays disabled, because a disabled
+ *   ancestor fieldset always disables its descendants. A nested wrapper cannot "unlock" a region.
+ *
+ * Layout: the fieldset is reset (border 0, margin 0, padding 0, min-width 0) and is a plain flex column, not
+ * `display: contents` (unreliable on `<fieldset>` in some browsers). Children therefore lay out as direct children;
+ * set `gap` when the parent spaced them with a flex gap.
+ *
+ * Accessibility: optional `ariaLabel` names the group; optional `reason` ("You have view-only access") is rendered as
+ * visually-hidden text linked via `aria-describedby`, only while locked.
+ *
+ * Usage: `<ui-readonly-fieldset [readOnly]="perm() !== 'full'" gap="20px"> ...controls... </ui-readonly-fieldset>`
+ */
+export declare class ReadonlyFieldsetComponent {
+  /** Lock every native control inside. Default false: nothing is locked. */
+  readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  /** CSS `gap` between the children (default none). */
+  readonly gap: import("@angular/core").InputSignal<string>;
+  /** Optional accessible name for the group. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Optional explanation announced while locked (visually hidden), e.g. "You have view-only access". */
+  readonly reason: import("@angular/core").InputSignal<string>;
+  protected readonly _reasonId: string;
+  protected readonly _showReason: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ReadonlyFieldsetComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ReadonlyFieldsetComponent, "ui-readonly-fieldset", never, {
+    "readOnly": {
+      "alias": "readOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "reason": {
+      "alias": "reason";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** A preset swatch offered under the field. `label` is its accessible name. */
+export interface ColorPreset {
   value: string;
   label: string;
-  disabled?: boolean;
 }
 /**
- * Matrix of native radio buttons: one row per item, one column per choice, exactly one choice per row (e.g. a page-permission
- * grid: rows = pages, columns = Full Access / Read Only / Hidden). A ControlValueAccessor whose value is a record
- * `{ [row.value]: column.value }` (`''` / missing = nothing chosen for that row). Arrow keys move inside a row natively because the
- * radios of a row share one `name`. Every radio is named "<row>: <column>" for screen readers; rows are `<th scope="row">`, columns
- * `<th scope="col">`.
+ * Normalises a CSS hex colour: `#fff` / `FFF` -> `#ffffff`, `#RRGGBB` -> lower case. With `allowAlpha`, `#rrggbbaa`
+ * is accepted and kept at 8 digits (shorthand `#rgba` is never accepted). Returns null for anything else
+ * (named colours, `rgb()`, wrong lengths, non-hex digits). The leading `#` is optional on input.
+ */
+export declare function normalizeHexColor(value: string | null | undefined, allowAlpha?: boolean): string | null;
+/**
+ * Colour input: ControlValueAccessor over a string holding a CSS hex colour. A swatch opens the operating system's
+ * colour picker (native `<input type="color">`) and a text field next to it shows / edits the hex; both stay in sync.
  *
- * Built-in validation: `required` -> every row needs a choice ("Choose an option in every row." / "<label>: choose an option in
- * every row."); a value that is not one of the `columns` -> "Select a valid option."; a key that is not one of the `rows` is
- * ignored (and kept untouched in the model). Disabled matrices are never invalid.
+ *   <ui-color-input label="Brand colour" [(ngModel)]="brand" />
+ *   <ui-color-input label="Accent" [presets]="presets" [allowAlpha]="true" [formControl]="accent" />
  *
- * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
- * provides `UiFieldValidity`. Messages show after the matrix lost focus or while `[showErrors]="true"`; a host `[error]` wins.
+ * Value contract
+ * - A valid colour is emitted normalised to lower-case `#rrggbb` (`#FFF` -> `#ffffff`; 8-digit `#rrggbbaa` only with
+ *   `allowAlpha`, kept at 8 digits). The user may type with or without the leading `#`; the control prepends it.
+ * - Text the user typed that is not a valid colour is emitted as typed (with `#` prepended, `''` when cleared) so the host
+ *   sees what the user entered; the control is then invalid ("Enter a hex colour like #3b82f6.") and the form control gets
+ *   the `color` error. While typing, the text is not rewritten (`#fff` is emitted as `#ffffff` but stays `#fff` on screen)
+ *   and is normalised on blur.
+ * - A value WRITTEN BY THE HOST (`writeValue` / `[ngModel]` / `[formControl]`) is never flagged as an invalid colour, even
+ *   when it is not a hex (`red`, `#fff8`, a legacy value), until the user changes it, so legacy data never blocks Save.
+ *   (Required is still checked for an empty value.) The native picker gets `#000000` for a non-hex value so it never throws.
+ * - Picking in the native picker with an 8-digit value and `allowAlpha` keeps the existing alpha digits.
  *
- *   <ui-radio-matrix label="Page permissions" rowHeader="Page" [rows]="pages" [columns]="levels" [(ngModel)]="permissions" />
+ * Validity API (same as the other ui inputs): `Validator` (error keys `required`, `color`), signals `invalid` /
+ * `errorMessage`, `invalidChange` output, `UiFieldValidity` token. Messages show after blur or while
+ * `[showErrors]="true"`; a host `[error]` always wins. Disabled controls are never invalid.
+ *
+ * Cross-browser: the native swatch is styled with `-webkit-appearance` and the `::-webkit-color-swatch` / `::-moz-color-swatch`
+ * pseudo-elements and sits invisibly over our own preview square, so it looks the same in Chrome, Edge, Firefox and Safari.
+ * Preset swatches are real `<button>`s (Enter / Space work natively, `aria-pressed` marks the selected one).
  */
-export declare class RadioMatrixComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+export declare class ColorInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Text of the top-left header cell (what the rows are, e.g. "Page"). */
-  readonly rowHeader: import("@angular/core").InputSignal<string>;
-  readonly rows: import("@angular/core").InputSignal<RadioMatrixRow[]>;
-  /** The choices, one column each (same shape as `ui-radio-group` options; `description` is not shown). */
-  readonly columns: import("@angular/core").InputSignal<RadioOption[]>;
+  /** Accessible name for a field with no visible label. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
+  /** Host error message; always wins over the built-in message. */
   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>;
-  /** 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>;
+  /** Accept (and keep) 8-digit `#rrggbbaa` values. */
+  readonly allowAlpha: import("@angular/core").InputSignal<boolean>;
+  /** Optional row of preset swatches. */
+  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>;
   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<Record<string, string>>;
+  /** Current model value (what the form control holds). */
+  private readonly _model;
+  /** Text shown in the text field. */
+  protected readonly _text: import("@angular/core").WritableSignal<string>;
+  /** True once the user changed the value; host-written values are not format-checked before that. */
+  private readonly _edited;
   private readonly _reveal;
   private readonly _issue;
-  /** True while the value breaks a built-in rule or the host passed an `[error]`. */
   readonly invalid: import("@angular/core").Signal<boolean>;
-  /** Message of the first broken built-in rule ('' when valid), shown or not. */
   readonly errorMessage: import("@angular/core").Signal<string>;
-  /** Emits whenever the field becomes invalid / valid. */
-  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
   protected readonly _activeError: import("@angular/core").Signal<string>;
+  private readonly _valid;
+  /** Colour of the preview square: the value when it is a usable hex, otherwise transparent. */
+  protected readonly _swatchColor: import("@angular/core").Signal<string>;
+  /** Value for the native picker: always `#rrggbb`. */
+  protected readonly _nativeValue: import("@angular/core").Signal<string>;
+  private readonly _uid;
+  protected readonly _textId: string;
+  protected readonly _nativeId: string;
+  protected readonly _descId: string;
+  private _onChange;
+  private _onTouched;
   private _onValidatorChange;
   constructor();
-  /** Re-run the form control's validation when a rule input (required, rows, columns) changes. */
+  /** Re-run the form control's validation when a rule input (required, allowAlpha, ...) changes. */
   ngOnChanges(): void;
-  validate(control: AbstractControl): ValidationErrors | null;
-  registerOnValidatorChange(fn: () => void): void;
-  private _onChange;
-  private _onTouched;
-  writeValue(val: Record<string, string> | null): void;
-  registerOnChange(fn: (v: Record<string, string>) => void): void;
+  writeValue(val: string | null): void;
+  registerOnChange(fn: (v: string) => void): void;
   registerOnTouched(fn: () => void): void;
+  registerOnValidatorChange(fn: () => void): void;
   setDisabledState(d: boolean): void;
-  protected onSelect(row: string, column: string): void;
-  /** True when a required matrix has no valid choice in this row (shown on the row header and the dots). */
-  protected _rowInvalid(row: RadioMatrixRow): boolean;
-  /** Touched once focus leaves the whole matrix (moving between its radios does not count). */
-  protected onFocusOut(event: FocusEvent): void;
-  private _toRecord;
+  validate(control: AbstractControl): ValidationErrors | null;
+  protected onTextInput(event: Event): void;
+  protected onNativeInput(event: Event): void;
+  protected selectPreset(p: ColorPreset): void;
+  protected _isSelected(p: ColorPreset): boolean;
+  protected _presetColor(p: ColorPreset): string;
+  protected onTextBlur(): void;
+  /** Blur of the native picker only marks the field touched; it never rewrites the text. */
+  protected onNativeBlur(): void;
+  private _touch;
+  private _commit;
   private _check;
-  static ɵfac: i0.ɵɵFactoryDeclaration<RadioMatrixComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RadioMatrixComponent, "ui-radio-matrix", never, {
+  static ɵfac: i0.ɵɵFactoryDeclaration<ColorInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ColorInputComponent, "ui-color-input", never, {
     "label": {
       "alias": "label";
       "required": false;
       "isSignal": true;
     };
-    "rowHeader": {
-      "alias": "rowHeader";
-      "required": false;
-      "isSignal": true;
-    };
-    "rows": {
-      "alias": "rows";
+    "ariaLabel": {
+      "alias": "ariaLabel";
       "required": false;
       "isSignal": true;
     };
-    "columns": {
-      "alias": "columns";
+    "placeholder": {
+      "alias": "placeholder";
       "required": false;
       "isSignal": true;
     };
@@ -7181,8 +9006,13 @@ export declare class RadioMatrixComponent implements ControlValueAccessor, Valid
       "required": false;
       "isSignal": true;
     };
-    "name": {
-      "alias": "name";
+    "allowAlpha": {
+      "alias": "allowAlpha";
+      "required": false;
+      "isSignal": true;
+    };
+    "presets": {
+      "alias": "presets";
       "required": false;
       "isSignal": true;
     };
@@ -7196,142 +9026,330 @@ export declare class RadioMatrixComponent implements ControlValueAccessor, Valid
   }, never, never, true, never>;
 }
 /**
- * Card for detail pages: an optional header and a body, both filled by the page that uses it.
+ * A heading for a block of a page or form: an optional icon in a rounded tile, a bold title, a grey description
+ * and optional buttons on the right. Use it above a group of settings or fields, alone or inside a `ui-detail-card`.
  *
- * Header (all optional - set `[showHeader]="false"` and the card is just the body):
- *  - `title` / `subtitle`: the bold uppercase title and the grey line under it.
- *  - `titleId`: an id for the title text, which also names the card for assistive tech (aria-labelledby).
- *  - `<div card-header-leading>`: something before the title block, such as a logo or an icon.
- *  - `<ng-container card-header>`: your own header content, shown under the title (or instead of it when no title is set).
- *  - `<ng-container card-header-action>`: buttons or links on the right side of the header.
- *  - `showEdit` + `editLabel` + `(editClick)`: the built-in Edit button.
- *  - `collapsible` (default true): a chevron toggle and a clickable header; `[(expanded)]` is two-way.
- *    Without a header, or with `collapsible` false, the body is always open.
+ *   <ui-section-header title="Notifications" />
+ *   <ui-section-header title="Email" description="Send and receive email from your own address." icon="email"
+ *                      background="#eaf3ff" />
+ *   <ui-section-header title="Team" [bordered]="true">
+ *     <ui-button section-header-actions size="xs" variant="secondary">Add member</ui-button>
+ *   </ui-section-header>
+ *   <ui-section-header title="Billing" background="#0f172a" textColor="#fff" iconColor="#93c5fd" iconBackground="#1e293b">
+ *     <svg section-header-icon width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+ *   </ui-section-header>
  *
- * The title is always shown in capitals; the subtitle keeps the case you give it. The body is the default content slot. A collapsed body is removed from the tab order and from assistive tech.
+ * Inputs:
+ *  - `title` (required): the heading text.
+ *  - `description`: a grey line under the title. Empty = none. The heading is described by it (aria-describedby).
+ *  - `level` (1-6, default 2): the heading level for assistive tech (role="heading" + aria-level). Anything else becomes 2.
+ *  - `icon`: the name of a library icon, drawn in a rounded tile on the left (decorative, hidden from assistive tech).
+ *    Supported names (the same keys `<ui-icon>` accepts): add, close, check, upload, image, chevron-up, chevron-down, arrow-left,
+ *    bell, print, view, edit, delete, call, message, email, task, opportunity, assign-owner, assign-agent, view-contact, confirm,
+ *    decline, sphere, remove-sphere, portal-invite, archive, duplicate, download, export, share, approve, reject, activate,
+ *    deactivate, pause, cancel, restore, send-message, create-job, view-job, create-invoice, create-estimate, add-note, invite-portal.
+ *    An unknown name draws no tile and raises no error.
+ *  - `background`: any CSS colour for the whole header (default none/transparent). Setting it rounds the corners (10px).
+ *  - `textColor`: any CSS colour for the title (default slate #0f172a). The description then uses the same colour at 80% opacity.
+ *    Without it the description is #64748b, or #475569 when a `background` is set (keeps it readable on tinted backgrounds).
+ *  - `iconColor`: colour of the icon (default blue #2563eb).
+ *  - `iconBackground`: colour of the tile behind the icon (default white when a `background` is set, otherwise light grey #f1f5f9).
+ *  - `bordered`: 1px #e2e8f0 border and 10px radius (default false).
+ *  - `size`: 'md' (default; 1rem title, 28px tile) or 'sm' (0.875rem title, 24px tile).
+ *  Padding is built in (14px 18px; 12px 14px at 480px and narrower) - there is no padding input.
  *
- *   <ui-detail-card title="COMMUNICATIONS" subtitle="All calls, texts, and emails"> ...body... </ui-detail-card>
- *   <ui-detail-card title="CONTACT INFO" [showEdit]="true" (editClick)="openEdit()"> ... </ui-detail-card>
- *   <ui-detail-card [showHeader]="false"> ...body only... </ui-detail-card>
- *   <ui-detail-card [collapsible]="false">
- *     <div card-header>Any markup</div>
- *     <ui-button card-header-action size="xs" variant="secondary">Add</ui-button>
- *     ...body...
- *   </ui-detail-card>
+ * Content slots:
+ *  - `[section-header-icon]`: your own icon (an `<svg>`, an `<img>` ...) shown in the tile instead of the `icon` input.
+ *  - `[section-header-actions]`: buttons or links on the right; they drop under the text when there is no room.
+ *
+ * Theming by CSS: the colours are the custom properties `--sh-bg`, `--sh-text`, `--sh-icon`, `--sh-icon-bg`; set them on
+ * `ui-section-header` (or an ancestor) instead of using the inputs. An unset input adds no inline style at all.
+ *
+ * Accessibility: colours you choose are your responsibility - keep text at 4.5:1 against the background. The defaults
+ * (#0f172a on white or #eaf3ff, #475569 description on tinted backgrounds) meet WCAG AA.
  */
-export declare class DetailCardComponent {
-  /** Bold uppercase title. Empty = no title text. */
+export declare class SectionHeaderComponent {
+  /** The heading text. */
   readonly title: import("@angular/core").InputSignal<string>;
-  /** 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<1 | 2 | 3 | 4 | 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>;
-  /** Grey line under the title. */
-  readonly subtitle: 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. */
-  readonly showHeader: import("@angular/core").InputSignal<boolean>;
-  /** Chevron toggle + clickable header. false = the body is always open. */
-  readonly collapsible: import("@angular/core").InputSignal<boolean>;
-  /** Two-way: whether the body is open. */
-  readonly expanded: import("@angular/core").ModelSignal<boolean>;
-  /** Show the built-in Edit button in the header. */
-  readonly showEdit: import("@angular/core").InputSignal<boolean>;
-  readonly editLabel: import("@angular/core").InputSignal<string>;
-  readonly editClick: import("@angular/core").OutputEmitterRef<void>;
-  /** The body is open unless the card has a header that is collapsible and was collapsed. */
-  isOpen(): boolean;
-  toggle(): void;
-  /** A click on the header toggles, except on a control inside it (Edit, your own header actions, links, inputs). */
-  onHeaderClick(event: Event): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<DetailCardComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<DetailCardComponent, "ui-detail-card", never, {
+  /** Grey line under the title. Empty = none. */
+  readonly description: import("@angular/core").InputSignal<string>;
+  /** Name of a library icon (see the list above). Empty or unknown = no icon. */
+  readonly icon: import("@angular/core").InputSignal<string>;
+  /** Heading level 1-6 for assistive tech; anything else is treated as 2. */
+  readonly level: import("@angular/core").InputSignal<number>;
+  /** Header background as any CSS colour. Empty = none. */
+  readonly background: import("@angular/core").InputSignal<string>;
+  /** Title colour as any CSS colour. Empty = slate. */
+  readonly textColor: import("@angular/core").InputSignal<string>;
+  /** Icon colour as any CSS colour. Empty = blue. */
+  readonly iconColor: import("@angular/core").InputSignal<string>;
+  /** Icon tile colour as any CSS colour. Empty = white on a `background`, otherwise light grey. */
+  readonly iconBackground: import("@angular/core").InputSignal<string>;
+  /** 1px border and 10px corners. */
+  readonly bordered: import("@angular/core").InputSignal<boolean>;
+  /** 'md' (default) or 'sm'. */
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
+  protected readonly titleId: string;
+  protected readonly descriptionId: string;
+  protected readonly headingLevel: import("@angular/core").Signal<number>;
+  protected readonly path: import("@angular/core").Signal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SectionHeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SectionHeaderComponent, "ui-section-header", never, {
     "title": {
       "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
       "required": false;
       "isSignal": true;
     };
-    "headingLevel": {
-      "alias": "headingLevel";
+    "icon": {
+      "alias": "icon";
       "required": false;
       "isSignal": true;
     };
-    "titleId": {
-      "alias": "titleId";
+    "level": {
+      "alias": "level";
       "required": false;
       "isSignal": true;
     };
-    "subtitle": {
-      "alias": "subtitle";
+    "background": {
+      "alias": "background";
       "required": false;
       "isSignal": true;
     };
-    "showHeader": {
-      "alias": "showHeader";
+    "textColor": {
+      "alias": "textColor";
       "required": false;
       "isSignal": true;
     };
-    "collapsible": {
-      "alias": "collapsible";
+    "iconColor": {
+      "alias": "iconColor";
       "required": false;
       "isSignal": true;
     };
-    "expanded": {
-      "alias": "expanded";
+    "iconBackground": {
+      "alias": "iconBackground";
       "required": false;
       "isSignal": true;
     };
-    "showEdit": {
-      "alias": "showEdit";
+    "bordered": {
+      "alias": "bordered";
       "required": false;
       "isSignal": true;
     };
-    "editLabel": {
-      "alias": "editLabel";
+    "size": {
+      "alias": "size";
       "required": false;
       "isSignal": true;
     };
-  }, {
-    "expanded": "expandedChange";
-    "editClick": "editClick";
-  }, never, ["[card-header-leading]", "[card-header]", "[card-header-action]", "*"], true, never>;
+  }, {}, never, ["[section-header-icon]", "[section-header-actions]"], true, never>;
 }
-export type DividerSpace = 'none' | 'sm' | 'md' | 'lg';
 /**
- * Horizontal divider line (an `<hr>`) with the app's standard colour and optional space above / below.
- * It is a real separator for assistive tech by default; set `decorative` when it only adds visual rhythm and the
- * content around it already reads as separate (the line is then hidden from screen readers).
+ * Shared spacing scale of the layout components (`ui-columns`, `ui-stack`, `ui-action-bar`):
+ *   none 0 · xs 4px · sm 8px · md 16px · lg 24px · xl 32px
+ * Every `gap` input also accepts any CSS length string for a custom value, e.g. `gap="20px"` or `gap="1.25rem"`.
+ */
+export type LayoutGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare const LAYOUT_GAP_PX: Readonly<Record<LayoutGap, number>>;
+/**
+ * Resolves a gap token or a custom CSS length to a CSS length. A token maps to its px value; a string that looks like a
+ * CSS length (`20px`, `1.5rem`, `0`, `calc(1rem + 2px)`, `var(--x)`) passes through trimmed; anything else
+ * ('' / null / undefined / an unknown word) falls back to `fallback`.
+ */
+export declare function resolveLayoutGap(gap: LayoutGap | string | null | undefined, fallback: LayoutGap): string;
+export type ColumnsCount = 1 | 2 | 3 | 4;
+/** Width below which the columns stack into one: sm = 480px, md = 768px, lg = 1024px, never = always side by side. */
+export type ColumnsCollapse = 'sm' | 'md' | 'lg' | 'never';
+export type ColumnsAlign = 'start' | 'center' | 'stretch';
+/**
+ * Equal-width columns for page content (the bigger sibling of `ui-form-row`).
  *
- *   <section class="kpi-grid"> ... </section>
- *   <ui-divider />                                   // line with 16px below
- *   <ui-divider spaceAbove="md" spaceBelow="lg" />
- *   <ui-divider [decorative]="true" />
+ * `ui-form-row` is for 1-3 form fields: a fixed 12px gap, and it stacks at 480px. `ui-columns` lays out whole blocks
+ * (cards, sections, lists): 1-4 columns, a gap from the shared scale (default 24px), and it stacks at a width you choose
+ * (default 768px, tablet portrait). Every direct child is one cell. Cells use `minmax(0, 1fr)` tracks, so a long
+ * unbreakable word or a wide table never stretches the grid.
+ *
+ *  - `count`: 1 | 2 | 3 | 4 equal columns (default 2). Other values are clamped to 1..4 (0 and negatives give 1, 5+ gives 4,
+ *    a non-number gives 2).
+ *  - `gap`: none | xs | sm | md | lg | xl (0/4/8/16/24/32px) or any CSS length such as `"20px"` (default `lg`).
+ *  - `collapseAt`: sm (480px) | md (768px) | lg (1024px) | never. Below that viewport width the columns become one.
+ *    Plain media queries are used (not container queries) because they behave the same in every supported browser.
+ *  - `align`: start | center | stretch (default start) - how cells of different heights line up.
+ *
+ *   <ui-columns>
+ *     <ui-form-section label="Email"> ... </ui-form-section>
+ *     <ui-form-section label="Text"> ... </ui-form-section>
+ *   </ui-columns>
+ *   <ui-columns [count]="3" gap="md" collapseAt="lg" align="stretch"> ... </ui-columns>
  */
-export declare class DividerComponent {
-  /** Space above the line: none (0), sm (8px), md (16px), lg (24px). */
-  readonly spaceAbove: import("@angular/core").InputSignal<DividerSpace>;
-  /** Space below the line: none (0), sm (8px), md (16px), lg (24px). */
-  readonly spaceBelow: import("@angular/core").InputSignal<DividerSpace>;
-  /** true = purely visual: hidden from assistive tech. */
-  readonly decorative: import("@angular/core").InputSignal<boolean>;
-  protected readonly above: import("@angular/core").Signal<number>;
-  protected readonly below: import("@angular/core").Signal<number>;
-  static ɵfac: i0.ɵɵFactoryDeclaration<DividerComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "ui-divider", never, {
-    "spaceAbove": {
-      "alias": "spaceAbove";
+export declare class ColumnsComponent {
+  readonly count: import("@angular/core").InputSignal<ColumnsCount>;
+  readonly gap: import("@angular/core").InputSignal<string>;
+  readonly collapseAt: import("@angular/core").InputSignal<ColumnsCollapse>;
+  readonly align: import("@angular/core").InputSignal<ColumnsAlign>;
+  protected readonly cols: import("@angular/core").Signal<ColumnsCount>;
+  protected readonly gapCss: import("@angular/core").Signal<string>;
+  protected readonly collapseClass: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ColumnsComponent, "ui-columns", never, {
+    "count": {
+      "alias": "count";
       "required": false;
       "isSignal": true;
     };
-    "spaceBelow": {
-      "alias": "spaceBelow";
+    "gap": {
+      "alias": "gap";
       "required": false;
       "isSignal": true;
     };
-    "decorative": {
-      "alias": "decorative";
+    "collapseAt": {
+      "alias": "collapseAt";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export type StackDirection = 'vertical' | 'horizontal';
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+export type StackJustify = 'start' | 'center' | 'end' | 'between';
+/**
+ * Stacks its children with ONE consistent gap (vertical by default, or in a row).
+ *
+ * The stack owns the spacing: it resets the margins of its direct children (with `!important`, so it also beats
+ * rules such as the `margin-bottom: 16px` of `ui-detail-card`)
+ * and uses flex `gap` instead. The distance between any two neighbours is exactly `gap`, whatever they are.
+ * Do not put margins on children of a stack; wrap them in a nested `ui-stack` to group. A `ui-divider` keeps its space
+ * inside itself, so give it `spaceAbove="none" spaceBelow="none"` in a stack.
+ *
+ *  - `gap`: none | xs | sm | md | lg | xl (0/4/8/16/24/32px) or any CSS length (`gap="20px"`). Default `md`.
+ *  - `direction`: vertical (default) | horizontal.
+ *  - `align`: start | center | end | stretch (cross axis, default stretch).
+ *  - `justify`: start | center | end | between (main axis, default start).
+ *  - `wrap`: let a horizontal stack wrap onto more lines (default false).
+ *
+ *   <ui-stack gap="20px">
+ *     <ui-detail-card title="EMAIL"> ... </ui-detail-card>
+ *     <ui-detail-card title="TEXT"> ... </ui-detail-card>
+ *   </ui-stack>
+ *   <ui-stack direction="horizontal" gap="sm" justify="between" [wrap]="true"> ...buttons... </ui-stack>
+ */
+export declare class StackComponent {
+  readonly gap: import("@angular/core").InputSignal<string>;
+  readonly direction: import("@angular/core").InputSignal<StackDirection>;
+  readonly align: import("@angular/core").InputSignal<StackAlign>;
+  readonly justify: import("@angular/core").InputSignal<StackJustify>;
+  readonly wrap: import("@angular/core").InputSignal<boolean>;
+  protected readonly gapCss: import("@angular/core").Signal<string>;
+  protected readonly alignCss: import("@angular/core").Signal<string>;
+  protected readonly justifyCss: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StackComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StackComponent, "ui-stack", never, {
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "direction": {
+      "alias": "direction";
+      "required": false;
+      "isSignal": true;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "justify": {
+      "alias": "justify";
+      "required": false;
+      "isSignal": true;
+    };
+    "wrap": {
+      "alias": "wrap";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export type ActionBarAlign = 'start' | 'center' | 'end' | 'between';
+/**
+ * Bar for page-level actions (Save / Cancel) that stays at the bottom of the scrolling area.
+ *
+ *  - `sticky` (default true): sticks to the bottom edge of the scroll container while the page content scrolls under it.
+ *  - `align`: start | center | end | between (default end).
+ *  - `fade` (default true): a gradient from the bar colour to transparent behind the bar so scrolled content fades out.
+ *  - `bordered` (default false): a 1px top border and a solid background instead of the fade; side padding 16px.
+ *  - `background`: the bar colour (any CSS colour; default white). Sets the CSS variable `--ab-bg`, which you can
+ *    also set from outside.
+ *  - `gap`: none | xs | sm | md | lg | xl or any CSS length (default `sm` = 8px).
+ *  - `ariaLabel`: when set, the bar is `role="group"` with this label; otherwise it has no role. (It is not a `toolbar`: that role promises
+ *    arrow-key navigation between the controls, which a plain Save / Cancel group does not implement.)
+ *
+ * Padding is 12px top and bottom (the bottom grows to the iOS safe-area inset), z-index 10 so it stays under the side
+ * panel (90+) and modals (200+). Below 480px the actions wrap onto more lines; `ui-button` keeps 44px touch targets.
+ * Sticky needs the bar to be a direct part of the scrolling content, with the scroll container as an ancestor.
+ *
+ *   <ui-stack gap="20px"> ...cards... </ui-stack>
+ *   <ui-action-bar ariaLabel="Page actions">
+ *     <ui-button variant="secondary" (click)="cancel()">Cancel</ui-button>
+ *     <ui-button [loading]="saving()" (click)="save()">Save</ui-button>
+ *   </ui-action-bar>
+ */
+export declare class ActionBarComponent {
+  readonly sticky: import("@angular/core").InputSignal<boolean>;
+  readonly align: import("@angular/core").InputSignal<ActionBarAlign>;
+  readonly fade: import("@angular/core").InputSignal<boolean>;
+  readonly bordered: import("@angular/core").InputSignal<boolean>;
+  readonly background: import("@angular/core").InputSignal<string>;
+  readonly gap: import("@angular/core").InputSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  protected readonly justify: import("@angular/core").Signal<string>;
+  protected readonly gapCss: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ActionBarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ActionBarComponent, "ui-action-bar", never, {
+    "sticky": {
+      "alias": "sticky";
+      "required": false;
+      "isSignal": true;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "fade": {
+      "alias": "fade";
+      "required": false;
+      "isSignal": true;
+    };
+    "bordered": {
+      "alias": "bordered";
+      "required": false;
+      "isSignal": true;
+    };
+    "background": {
+      "alias": "background";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
 }
 export type { CreateDocumentRequestBody, DocuSignSendBody, DocumentSentInfo, DocumentSentMessage, DocumentsPayloadExtras, ExistingEnvelopeSendBody, SendDocumentsPayload, SendEmailPayload, SendTextPayload, VideoDefaults, VideoLinkOptions };