@forgeroute/ui 0.3.11 → 0.3.12

package/types/forgeroute-ui.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectorRef, InjectionToken, OnDestroy, OnInit, Signal, WritableSignal } from "@angular/core";
+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";
@@ -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>;
 }
 /**
@@ -2223,6 +2315,7 @@ export declare class ToggleComponent implements ControlValueAccessor {
   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;
@@ -2264,6 +2357,136 @@ export declare class ToggleComponent implements ControlValueAccessor {
     "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;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+    "linear": {
+      "alias": "linear";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "labelsOnSmallScreens": {
+      "alias": "labelsOnSmallScreens";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "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' */
@@ -2310,6 +2533,8 @@ export declare function businessTimeOptions(step?: BusinessHoursStep, hour24?: b
  * 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`.
  */
@@ -2458,7 +2683,7 @@ export declare class RadioGroupComponent implements ControlValueAccessor, Valida
   readonly error: import("@angular/core").InputSignal<string>;
   /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
-  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
   /** Native `name` shared by the radios; a unique one is generated when omitted. */
   readonly name: import("@angular/core").InputSignal<string>;
   protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
@@ -2739,6 +2964,20 @@ export declare class ButtonComponent {
   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">;
@@ -2770,6 +3009,21 @@ export declare class ButtonComponent {
       "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;
@@ -3622,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;
@@ -3643,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). */
@@ -3686,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`. */
@@ -3701,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). */
@@ -3717,6 +3985,7 @@ export interface DocumentSeed {
   fileName?: string | null;
   hasFile?: boolean;
   requiresCountersign?: boolean;
+  hasCountersignPlacement?: boolean;
   signerRoles?: SignerRole[];
   hasMapping?: boolean;
   hasDataFields?: boolean;
@@ -3906,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>;
@@ -4344,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;
@@ -4650,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. */
@@ -5093,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>;
@@ -5314,6 +5598,7 @@ export declare class SendMessagePanelComponent {
     "sent": "sent";
     "emailAdded": "emailAdded";
     "rejected": "rejected";
+    "mapFieldsClick": "mapFieldsClick";
     "phoneAdded": "phoneAdded";
   }, never, never, true, never>;
 }
@@ -5340,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;
@@ -5382,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. */
@@ -5604,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>;
@@ -5619,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>;
@@ -5630,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]`. */
@@ -5645,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. */
@@ -5696,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;
@@ -5731,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;
@@ -5757,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>;
@@ -5766,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]`. */
@@ -5833,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;
@@ -5853,7 +6194,8 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
   }, never, never, true, never>;
 }
 /** Why a chosen file was refused. */
-export type FileRejectReason = 'type' | 'size';
+/** '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;
@@ -5876,7 +6218,7 @@ export declare function acceptLabel(accept: string): string;
  * 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. A refused file is never added to the value: the field shows the message (`typeMessage` / `sizeMessage`
+ *    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"`.
@@ -5913,6 +6255,14 @@ export declare class FileInputComponent implements ControlValueAccessor, Validat
   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. */
@@ -6066,6 +6416,26 @@ export declare class FileInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "rejectEmpty": {
+      "alias": "rejectEmpty";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "minSize": {
+      "alias": "minSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "minSizeMessage": {
+      "alias": "minSizeMessage";
+      "required": false;
+      "isSignal": true;
+    };
     "dropzone": {
       "alias": "dropzone";
       "required": false;
@@ -6372,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>;
@@ -6388,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;
@@ -6607,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
@@ -6621,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. */
@@ -6635,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>;
   /**
@@ -6682,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;
@@ -6704,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
@@ -6994,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 {
@@ -7189,6 +7823,9 @@ export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron
  * `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.
  *
@@ -7205,6 +7842,8 @@ export declare class IconComponent {
   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. */
@@ -7244,6 +7883,11 @@ export declare class IconComponent {
       "required": false;
       "isSignal": true;
     };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
     "interactive": {
       "alias": "interactive";
       "required": false;
@@ -7253,6 +7897,143 @@ export declare class IconComponent {
     "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;
+    };
+    "itemLabel": {
+      "alias": "itemLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "moveControls": {
+      "alias": "moveControls";
+      "required": false;
+      "isSignal": true;
+    };
+    "moveEarlierLabel": {
+      "alias": "moveEarlierLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "moveLaterLabel": {
+      "alias": "moveLaterLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "helpText": {
+      "alias": "helpText";
+      "required": false;
+      "isSignal": true;
+    };
+    "moveAnnouncement": {
+      "alias": "moveAnnouncement";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "items": "itemsChange";
+    "orderChange": "orderChange";
+  }, ["itemTemplate"], never, true, never>;
+}
 export type ImagePreviewShape = 'circle' | 'rounded';
 export type ImagePreviewSize = 'sm' | 'md' | 'lg';
 export type ImagePreviewPlaceholder = 'person' | 'image';
@@ -8244,4 +9025,331 @@ export declare class ColorInputComponent implements ControlValueAccessor, Valida
     "invalidChange": "invalidChange";
   }, never, never, true, never>;
 }
+/**
+ * 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`.
+ *
+ *   <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>
+ *
+ * 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.
+ *
+ * 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 SectionHeaderComponent {
+  /** The heading text. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** 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;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "level": {
+      "alias": "level";
+      "required": false;
+      "isSignal": true;
+    };
+    "background": {
+      "alias": "background";
+      "required": false;
+      "isSignal": true;
+    };
+    "textColor": {
+      "alias": "textColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconColor": {
+      "alias": "iconColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconBackground": {
+      "alias": "iconBackground";
+      "required": false;
+      "isSignal": true;
+    };
+    "bordered": {
+      "alias": "bordered";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[section-header-icon]", "[section-header-actions]"], true, never>;
+}
+/**
+ * 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`).
+ *
+ * `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 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;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapseAt": {
+      "alias": "collapseAt";
+      "required": false;
+      "isSignal": true;
+    };
+    "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 };