@forgeroute/ui 0.4.6 → 0.4.8

package/types/forgeroute-ui.d.ts

@@ -980,6 +980,8 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   readonly errorMessage: import("@angular/core").Signal<string>;
   /** Emits whenever the field becomes invalid / valid. */
   readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  /** Emits the chosen value when the USER picks an option (the same value the form control receives; null for the blank option in number mode). Not emitted for values the host writes. */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<string | number | null>;
   protected readonly _activeError: import("@angular/core").Signal<string>;
   private _onValidatorChange;
   constructor();
@@ -1063,6 +1065,7 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
     };
   }, {
     "invalidChange": "invalidChange";
+    "valueChange": "valueChange";
   }, never, never, true, never>;
 }
 export interface ImportFieldDef {
@@ -1988,6 +1991,12 @@ export declare class ToastService implements OnDestroy {
    * (the input wins). Escape, pause on hover / focus and `dismiss()` work either way.
    */
   readonly dismissible: import("@angular/core").WritableSignal<boolean>;
+  /**
+   * Opt-in: every `<ui-toast>` keeps always-present live regions and renders the message inside them (reliable screen-reader
+   * announcements, VoiceOver / Safari included). Default `false`: toasts keep their own `role` exactly as before.
+   * Set once per app with `provideForgerouteToast({ persistentLiveRegion: true })`, or per outlet with `<ui-toast [persistentLiveRegion]="true" />`.
+   */
+  readonly persistentLiveRegion: import("@angular/core").WritableSignal<boolean>;
   private _timer;
   private _deadline;
   private _remaining;
@@ -2023,6 +2032,15 @@ export declare class ToastComponent {
    */
   readonly dismissible: import("@angular/core").InputSignal<boolean | null>;
   protected readonly showClose: import("@angular/core").Signal<boolean>;
+  /**
+   * Opt-in: keep two always-present live regions (polite for success / info, assertive for errors) and put the toast inside the
+   * matching one, instead of giving the toast its own role when it appears. A live region that already exists when its text
+   * changes is announced reliably by VoiceOver / Safari; one inserted together with its text often is not. `null` (default) =
+   * follow `ToastService.persistentLiveRegion` (`false` unless the app sets it with `provideForgerouteToast({ persistentLiveRegion: true })`);
+   * `true` / `false` forces it for this outlet. Off = the markup and roles are exactly as they always were.
+   */
+  readonly persistentLiveRegion: import("@angular/core").InputSignal<boolean | null>;
+  protected readonly persistent: 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
@@ -2048,6 +2066,11 @@ export declare class ToastComponent {
       "required": false;
       "isSignal": true;
     };
+    "persistentLiveRegion": {
+      "alias": "persistentLiveRegion";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 export type ProgressBarVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate';
@@ -2072,6 +2095,8 @@ export declare class ProgressBarComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Optional fixed color override. Leave it out and the color follows completion (red / amber / blue / green). */
   readonly variant: import("@angular/core").InputSignal<ProgressBarVariant | null | undefined>;
+  /** Any CSS colour for the fill (e.g. the brand colour). Wins over `variant` and the completion bands; empty = the built-in colours. (Or set `--ui-progress-fill` / `--ui-accent` once in the app to recolour the blue band.) */
+  readonly color: import("@angular/core").InputSignal<string>;
   /** Hover / focus tooltip (library `uiTooltip`); `\n` starts a new line. */
   readonly tooltip: import("@angular/core").InputSignal<string>;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
@@ -2108,6 +2133,11 @@ export declare class ProgressBarComponent {
       "required": false;
       "isSignal": true;
     };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
     "tooltip": {
       "alias": "tooltip";
       "required": false;
@@ -2470,6 +2500,14 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
   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>;
+  /** `data-testid` of the native checkbox (single mode), for end-to-end tests; none when empty. (Group options have their own `testId`.) */
+  readonly testId: import("@angular/core").InputSignal<string>;
+  /**
+   * 1-6 makes the label text a real heading for screen readers (`role="heading"` + `aria-level`) while it stays the checkbox's label and
+   * clicking it still toggles the box - e.g. a product name that is both the heading of its card and the label of its checkbox.
+   * Default null: plain label text, exactly as before. Single mode only.
+   */
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -2567,6 +2605,16 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
       "required": false;
       "isSignal": true;
     };
+    "testId": {
+      "alias": "testId";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
     "indeterminate": {
       "alias": "indeterminate";
       "required": false;
@@ -2737,6 +2785,13 @@ export interface StepperStep {
   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;
+  /**
+   * Overrides the state derived from the step's position. `true` = complete (check mark, selectable with `linear`) even
+   * when the step comes after `current`; `false` = upcoming even when it comes before `current`. Omit to derive it from
+   * the order. The current step always stays current. Use it when the user can jump back and keep the progress made:
+   * mark every step the user has already completed `complete: true`.
+   */
+  complete?: boolean;
 }
 export type StepperOrientation = 'horizontal' | 'vertical';
 /**
@@ -2756,19 +2811,28 @@ export type StepperOrientation = 'horizontal' | 'vertical';
  *   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`.
+ * unless it sets `complete: true`. `error` changes the indicator, not the state or `aria-current`.
+ *
+ * Per-step state: a step's `complete` flag overrides the position-derived state (see `StepperStep.complete`), so a wizard
+ * that lets the user go back can keep the steps already done marked complete:
+ *
+ *   steps = all.map((s, i) => ({ ...s, complete: i <= furthestReached }))
  *
  * 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.
+ * `linear` (default) only complete steps are selectable, so the user can go back but not skip ahead; with
+ * `[linear]="false"` every non-disabled step is. The current step is never a button (you are already there): it is
+ * plain text with `aria-current="step"`. Activating a selectable step sets `current` (so `[(current)]` follows) and
+ * emits `stepClick` with its key; an unselectable step 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`.
  *
+ * Theming: `accentColor` / `completeColor` (any CSS colour) recolour the current step, the complete steps and the filled
+ * connectors; leave them out for the library blue. Or set `--ui-accent` (and `--ui-accent-soft`) once in the app.
+ *
  * 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
@@ -2785,6 +2849,10 @@ export declare class StepperComponent {
   /** 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">;
+  /** Accent colour (any CSS colour) of the current step and, unless `completeColor` is set, of complete steps and the filled connectors. Empty = the library blue (or `--ui-accent`). */
+  readonly accentColor: import("@angular/core").InputSignal<string>;
+  /** Colour (any CSS colour) of complete steps and the filled connectors, when it should differ from the current step's accent (e.g. green checks, orange current step). */
+  readonly completeColor: import("@angular/core").InputSignal<string>;
   /** 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'`). */
@@ -2840,6 +2908,16 @@ export declare class StepperComponent {
       "required": false;
       "isSignal": true;
     };
+    "accentColor": {
+      "alias": "accentColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "completeColor": {
+      "alias": "completeColor";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "ariaLabel";
       "required": false;
@@ -3033,6 +3111,8 @@ export interface RadioOption {
   label: string;
   description?: string;
   disabled?: boolean;
+  /** `data-testid` of this option's native radio input (e.g. for end-to-end tests); none when omitted. */
+  testId?: string;
 }
 /**
  * Group of native radio buttons inside a `<fieldset>` (+ `<legend>` = `label`), a ControlValueAccessor (string value, `''`
@@ -3936,6 +4016,8 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   readonly formatter: import("@angular/core").InputSignal<((raw: string) => string) | undefined>;
   /** 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>;
+  /** Emits the new value when the USER changes it (typing, paste, autofill) - the same value the form control receives. Not emitted for values the host writes. */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<string | number | null>;
   readonly focused: import("@angular/core").OutputEmitterRef<void>;
   readonly blurred: import("@angular/core").OutputEmitterRef<void>;
   /** Emits whenever the field becomes invalid / valid. */
@@ -4096,6 +4178,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "isSignal": true;
     };
   }, {
+    "valueChange": "valueChange";
     "focused": "focused";
     "blurred": "blurred";
     "invalidChange": "invalidChange";
@@ -4231,6 +4314,7 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
 }
 export type TextSize = 'sm' | 'md' | 'lg';
 export type TextTone = 'default' | 'muted';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 /**
  * Plain text that keeps its line breaks: a note, a message, an address, a pasted block. It is page content, not a form control —
  * no tab stop, no resize handle, selectable and copyable, and read normally by screen readers (including browse mode).
@@ -4242,13 +4326,30 @@ export type TextTone = 'default' | 'muted';
  * stretching the layout. The text is never interpreted as HTML. Pass the text through `[text]` (not as projected content),
  * so the template's own indentation can never leak into it. An empty or missing text renders nothing.
  *
- * Inputs: `text`, `size` (sm 0.8125rem | md 0.875rem | lg 1rem, default md), `tone` (default slate | muted grey).
+ * Inline emphasis without HTML: `strong` (a string or a list of strings) makes every occurrence of those exact snippets bold
+ * (case-sensitive, longest first, never overlapping), e.g. `<ui-text text="Delivered to 12 Oak St, Peoria" strong="12 Oak St, Peoria" />`.
+ * The text is still never parsed as HTML; `textContent` is unchanged (the snippets are wrapped in `<strong>`). Without `strong` the
+ * markup is exactly what it always was.
+ *
+ * Inputs: `text`, `size` (sm 0.8125rem | md 0.875rem | lg 1rem, default md), `tone` (default slate | muted grey),
+ * `weight` (normal | medium 500 | semibold 600 | bold 700, default normal - no font-weight is set, so the text is exactly as before;
+ * use bold for a total such as "Balance Due").
  */
 export declare class TextComponent {
   /** The text to show. Line breaks are kept; it is never parsed as HTML. */
   readonly text: import("@angular/core").InputSignal<string | null | undefined>;
   readonly size: import("@angular/core").InputSignal<TextSize>;
   readonly tone: import("@angular/core").InputSignal<TextTone>;
+  /** Snippet(s) of `text` to show in bold. Empty / not found = no change. */
+  readonly strong: import("@angular/core").InputSignal<string | string[] | null | undefined>;
+  /** The text cut into plain and bold pieces; empty when nothing is to be bold (then the text renders as a single text node). */
+  protected readonly segments: import("@angular/core").Signal<{
+    text: string;
+    strong: boolean;
+  }[]>;
+  /** normal (default) | medium | semibold | bold. Normal sets nothing, so existing text is unchanged. */
+  readonly weight: import("@angular/core").InputSignal<TextWeight>;
+  protected readonly fontWeight: import("@angular/core").Signal<string | null>;
   protected readonly fontSize: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<TextComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TextComponent, "ui-text", never, {
@@ -4267,6 +4368,16 @@ export declare class TextComponent {
       "required": false;
       "isSignal": true;
     };
+    "strong": {
+      "alias": "strong";
+      "required": false;
+      "isSignal": true;
+    };
+    "weight": {
+      "alias": "weight";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /** Why a chosen file was refused. */
@@ -4584,6 +4695,8 @@ export declare class DateInputComponent implements ControlValueAccessor, Validat
   readonly errorMessage: import("@angular/core").Signal<string>;
   /** Emits whenever the field becomes invalid / valid. */
   readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  /** Emits the new value ('YYYY-MM-DD', or '' when cleared) when the USER changes it - the same value the form control receives. Not emitted for values the host writes. */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
   protected readonly _activeError: import("@angular/core").Signal<string>;
   private _onValidatorChange;
   constructor();
@@ -4645,6 +4758,7 @@ export declare class DateInputComponent implements ControlValueAccessor, Validat
     };
   }, {
     "invalidChange": "invalidChange";
+    "valueChange": "valueChange";
   }, never, never, true, never>;
 }
 export declare class DatetimeInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
@@ -5327,6 +5441,55 @@ export declare class DropdownComponent {
     "itemClick": "itemClick";
   }, never, never, true, never>;
 }
+/**
+ * A real `<form>` for a group of library fields, so the browser (and assistive tech) treats it as one: it is announced as a
+ * "form" landmark when it has a name, and pressing Enter in a field submits it through a `ui-button type="submit"`. Apps do not write
+ * a native `<form>`; they use this.
+ *
+ *   <ui-form ariaLabel="Informant contact details" (submitted)="save()">
+ *     <ui-text-input label="Name" [(ngModel)]="name" />
+ *     <ui-button type="submit">Save</ui-button>
+ *   </ui-form>
+ *
+ * Works with Reactive Forms: `<ui-form [formGroup]="form" ariaLabel="..." (ngSubmit)="save()">` (the `submit` event of the inner
+ * form bubbles to the host, which is what `FormGroupDirective` listens to; it also stops the page from reloading).
+ *
+ *  - `ariaLabel` (or `ariaLabelledby`): the form's name. A named form is a landmark, so give it one only for a main form of the page.
+ *  - The browser's own validation bubbles are off (`novalidate`): library inputs show their own messages.
+ *  - `submitted` emits the submit event after the default action (a page reload) was prevented.
+ *  - Layout: the host is a block and the form inside is a plain block - it adds no spacing; put a `ui-stack` / `ui-form-section` inside.
+ */
+export declare class FormComponent {
+  /** The form's accessible name. Empty = unnamed (no landmark). */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id of an element that names the form (wins over `ariaLabel`). */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Browser autofill for the whole form: 'on' | 'off'. Empty = the browser default. */
+  readonly autocomplete: import("@angular/core").InputSignal<"" | "off" | "on">;
+  /** Emits the submit event (Enter in a field, or a submit button). The page is never reloaded. */
+  readonly submitted: import("@angular/core").OutputEmitterRef<Event>;
+  protected onSubmit(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FormComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "ui-form", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocomplete": {
+      "alias": "autocomplete";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "submitted": "submitted";
+  }, never, ["*"], true, never>;
+}
 export declare class FormSectionComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly divider: import("@angular/core").InputSignal<boolean>;
@@ -5345,7 +5508,7 @@ export declare class FormSectionComponent {
   }, {}, never, ["*"], true, never>;
 }
 export declare class FormRowComponent {
-  readonly cols: import("@angular/core").InputSignal<1 | 2 | 3>;
+  readonly cols: import("@angular/core").InputSignal<1 | 2 | 3 | 4>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormRowComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormRowComponent, "ui-form-row", never, {
     "cols": {
@@ -5521,12 +5684,14 @@ export declare class ListItemComponent {
  *
  *   providers: [provideForgerouteToast()]
  *   providers: [provideForgerouteToast({ dismissible: true })]   // every toast also gets a close button (default: none)
+ *   providers: [provideForgerouteToast({ persistentLiveRegion: true })]   // always-present live regions: reliable announcements in VoiceOver / Safari
  *
  * 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;
+  persistentLiveRegion?: boolean;
 }): EnvironmentProviders;
 /** Payload of `(reorder)`. Apply it with `reorderItems(items, order)` or take the ready-made `items`. */
 export interface ListReorderEvent<T = unknown> {
@@ -5941,6 +6106,10 @@ export interface PanelInfoItem {
   muted?: boolean;
   danger?: boolean;
   hidden?: boolean;
+  /** Keep the line breaks of `value` (an address, a note); long lines still wrap. Plain values only. */
+  multiline?: boolean;
+  /** Bold row: the label and the value in the strong text colour and weight (a total, a balance due). */
+  emphasis?: boolean;
 }
 export interface PanelInfoSection {
   title?: string;
@@ -5965,6 +6134,12 @@ export interface PanelInfoSection {
 export declare class PanelInfoListComponent {
   readonly sections: import("@angular/core").InputSignal<PanelInfoSection[]>;
   readonly showEmptyState: import("@angular/core").InputSignal<boolean>;
+  /**
+   * true = each row reads "Label: value" (a colon after the label and a real space, so `textContent` is "Label: value") with the value
+   * next to the label instead of pushed to the right edge. Works with plain values, links (href / email / phone / link) and badges.
+   * Default false = the label and value as before.
+   */
+  readonly labelColon: import("@angular/core").InputSignal<boolean>;
   readonly displaySections: import("@angular/core").Signal<PanelInfoSection[]>;
   /**
    * The safe href of an item, or null: `href` first, else `mailto:`/`tel:` built from `email`/`phone`. Only mailto, tel, http and https
@@ -5987,6 +6162,11 @@ export declare class PanelInfoListComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelColon": {
+      "alias": "labelColon";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -6331,6 +6511,12 @@ export declare class AlertComponent {
   readonly quiet: import("@angular/core").InputSignal<boolean>;
   /** Tighter padding and a slightly smaller font, for an alert that is one row of a list. */
   readonly compact: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Inline body: the projected content flows as ONE line of text (wrapping normally) instead of a row of separate items, so inline
+   * emphasis (`<strong>`), links and a small `ui-icon` stay inside the sentence: `<ui-alert [inline]="true">Delivered to <strong>12 Oak St</strong>.</ui-alert>`.
+   * Default false: the body is a flex row with a gap, exactly as before (use it for text plus a button).
+   */
+  readonly inline: import("@angular/core").InputSignal<boolean>;
   readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
   static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ui-alert", never, {
@@ -6359,6 +6545,11 @@ export declare class AlertComponent {
       "required": false;
       "isSignal": true;
     };
+    "inline": {
+      "alias": "inline";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "dismissed": "dismissed";
   }, never, ["*"], true, never>;
@@ -6366,7 +6557,7 @@ export declare class AlertComponent {
 /** The SVG path (24×24 stroke icon) for an icon key, or undefined when the key is unknown. */
 export declare function iconPath(name: string): string | undefined;
 /** Keys with an icon of their own (the data-table action keys are accepted too — see `builtInActionIcon`). */
-export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call';
+export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | '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, …).
@@ -6451,23 +6642,36 @@ export declare class IconComponent {
   }, never, never, true, never>;
 }
 export type TimelineTone = 'default' | 'success' | 'warning' | 'danger';
+/** A badge of a timeline item. `tooltip` shows on hover and keyboard focus (the badge becomes focusable); `testId` is its `data-testid`. */
+export interface TimelineBadge {
+  label: string;
+  variant: BadgeVariant;
+  tooltip?: string;
+  testId?: string;
+}
 export interface TimelineItem {
   /** Stable id used for `track`; the index is used when absent. */
   id?: string;
+  /** `data-testid` of the `<li>`. */
+  testId?: string;
   title: string;
   description?: string;
   /** Pre-formatted time text shown to the reader, e.g. "Oct 20, 2026, 3:15 PM". */
   time?: string;
   /** ISO date / date-time for the `datetime` attribute of the `<time>` element (machine-readable). */
   dateTime?: string;
-  badge?: {
-    label: string;
-    variant: BadgeVariant;
-  };
+  badge?: TimelineBadge;
+  /** Any number of badges, shown after `badge` (if also set), in order. They wrap onto the next line when the row is narrow. */
+  badges?: TimelineBadge[];
   /** Icon drawn inside the dot (static, decorative). Unknown names draw nothing. */
   icon?: IconName | (string & {});
   /** Colour of the dot / icon. Default `default`. */
   tone?: TimelineTone;
+  /**
+   * Colours the dot / icon with a badge colour (any `BadgeVariant`): the solid dot is the badge's own dark shade (`BADGE_VARIANT_STYLES[v].color`,
+   * at least 3:1 on white, so the dot and a white icon on it are readable). Overrides `tone`; without it `tone` works as before.
+   */
+  dotVariant?: BadgeVariant;
 }
 /**
  * Vertical activity feed: an ordered list of events joined by a line, each with a dot (or icon), title, optional badge,
@@ -6487,6 +6691,12 @@ export declare class TimelineComponent {
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Shown (as a hint) when there are no items. Empty = render nothing. */
   readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** Any CSS length (e.g. `600px`). When set, the list scrolls inside a keyboard-focusable region of at most this height. Empty = no wrapper. */
+  readonly maxHeight: import("@angular/core").InputSignal<string>;
+  /** `below` (default): the time is under the title / description. `end`: the time sits right-aligned on the title row. */
+  readonly timePosition: import("@angular/core").InputSignal<"end" | "below">;
+  /** Solid dot colour of an item's `dotVariant`, or null (then `tone` colours it). */
+  dotColor(item: TimelineItem): string | null;
   static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent, "ui-timeline", never, {
     "items": {
@@ -6504,6 +6714,16 @@ export declare class TimelineComponent {
       "required": false;
       "isSignal": true;
     };
+    "maxHeight": {
+      "alias": "maxHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "timePosition": {
+      "alias": "timePosition";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -6602,6 +6822,284 @@ export declare class ImagePreviewComponent {
     };
   }, {}, never, never, true, never>;
 }
+export type ImageFit = 'contain' | 'cover' | 'fill' | 'scale-down';
+export type ImageRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type ImageAlign = 'start' | 'center' | 'end';
+/**
+ * A content image of any size (a logo, a product photo, a banner) - the bigger sibling of `ui-image-preview`, which is a
+ * small fixed-size thumbnail. The whole image is shown (`fit="contain"`) unless you ask for `cover`.
+ *
+ *   <ui-image src="/logo.png" alt="Peaceful Pines Crematory" maxHeight="48px" />             <!-- natural size, capped -->
+ *   <ui-image [src]="p.imageUrl" [alt]="p.name" width="100%" aspectRatio="4 / 3" radius="md" [bordered]="true" />
+ *   <ui-image [src]="hero" alt="" fit="cover" width="100%" height="200px" [priority]="true" />
+ *
+ *  - `alt`: required for meaningful images; '' (default) marks it decorative. The placeholder is `role="img"` named by `alt`
+ *    (or hidden when decorative).
+ *  - Size: `width` / `height` (CSS lengths, e.g. "200px", "100%") fix the box and the image fills it per `fit`; without them
+ *    the image keeps its natural size, capped by `maxWidth` (default 100%) and `maxHeight`. `aspectRatio` ("4 / 3", "1")
+ *    reserves the space before the image loads so the page does not jump.
+ *  - `radius` none | sm | md | lg | full, `bordered`, `align` (start | center | end, for an image narrower than its row).
+ *  - `placeholder` (default true): a neutral icon in the same box when there is no `src` or it fails to load. false renders nothing then.
+ *  - `priority`: above-the-fold image - loads eagerly with high fetch priority. Otherwise `loading="lazy"` and async decoding.
+ *  - Outputs `loaded` and `failed`. A new `src` (or a changed `retryKey`) gets a fresh chance to load.
+ */
+export declare class ImageComponent {
+  /** Image URL (or data URL). Blank shows the placeholder. */
+  readonly src: import("@angular/core").InputSignal<string | null | undefined>;
+  /** Alt text; '' (default) marks the image decorative. */
+  readonly alt: import("@angular/core").InputSignal<string>;
+  readonly fit: import("@angular/core").InputSignal<ImageFit>;
+  /** CSS width of the box (e.g. "200px", "100%"). Empty = natural width. */
+  readonly width: import("@angular/core").InputSignal<string>;
+  /** CSS height of the box. Empty = natural height. */
+  readonly height: import("@angular/core").InputSignal<string>;
+  readonly maxWidth: import("@angular/core").InputSignal<string>;
+  readonly maxHeight: import("@angular/core").InputSignal<string>;
+  /** CSS aspect-ratio, e.g. "4 / 3". Reserves the space while the image loads. */
+  readonly aspectRatio: import("@angular/core").InputSignal<string>;
+  readonly radius: import("@angular/core").InputSignal<ImageRadius>;
+  readonly bordered: import("@angular/core").InputSignal<boolean>;
+  readonly align: import("@angular/core").InputSignal<ImageAlign>;
+  /** Show a neutral placeholder when there is no usable image. false = render nothing. */
+  readonly placeholder: import("@angular/core").InputSignal<boolean>;
+  /** Above-the-fold image: eager loading with high fetch priority. */
+  readonly priority: import("@angular/core").InputSignal<boolean>;
+  /** Bump to retry a failed image with the same `src`. */
+  readonly retryKey: import("@angular/core").InputSignal<unknown>;
+  readonly loaded: import("@angular/core").OutputEmitterRef<void>;
+  readonly failed: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly _failed: import("@angular/core").WritableSignal<boolean>;
+  protected readonly _url: import("@angular/core").Signal<string | null>;
+  protected readonly radiusCss: import("@angular/core").Signal<string>;
+  protected readonly imgWidth: import("@angular/core").Signal<string | null>;
+  protected readonly imgHeight: import("@angular/core").Signal<string | null>;
+  /** The placeholder needs a real box when the caller gave none. */
+  protected readonly boxWidth: import("@angular/core").Signal<string | null>;
+  protected readonly boxHeight: import("@angular/core").Signal<string | null>;
+  protected readonly isBlock: import("@angular/core").Signal<boolean>;
+  constructor();
+  protected _onError(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ImageComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ImageComponent, "ui-image", never, {
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "alt": {
+      "alias": "alt";
+      "required": false;
+      "isSignal": true;
+    };
+    "fit": {
+      "alias": "fit";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxHeight": {
+      "alias": "maxHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "aspectRatio": {
+      "alias": "aspectRatio";
+      "required": false;
+      "isSignal": true;
+    };
+    "radius": {
+      "alias": "radius";
+      "required": false;
+      "isSignal": true;
+    };
+    "bordered": {
+      "alias": "bordered";
+      "required": false;
+      "isSignal": true;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "priority": {
+      "alias": "priority";
+      "required": false;
+      "isSignal": true;
+    };
+    "retryKey": {
+      "alias": "retryKey";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "loaded": "loaded";
+    "failed": "failed";
+  }, never, never, true, never>;
+}
+/** One picture of a `ui-image-gallery`. */
+export interface GalleryImage {
+  src: string;
+  /** Alt text of this picture. Defaults to "Image N of M". */
+  alt?: string;
+}
+/**
+ * Image gallery (a "slideshow"): one large picture with previous / next buttons, a counter and dots. Put it inside a
+ * `ui-modal` for a lightbox, or inline on a page.
+ *
+ *   <ui-image-gallery [images]="[{ src: a, alt: 'Front' }, { src: b, alt: 'Side' }]" [(index)]="i" ariaLabel="Photos of the urn" />
+ *
+ *  - `images`: the pictures. With a single picture there are no buttons, counter or dots.
+ *  - `index` (two-way, default 0): the shown picture; values outside the list are clamped.
+ *  - `loop` (default true): Next after the last goes to the first, Previous before the first to the last. false disables
+ *    the button at either end.
+ *  - `showDots` / `showCounter` (default true), `aspectRatio` (default "4 / 3"), `maxHeight` (default "70vh"), `fit` (default contain).
+ *  - Keyboard: with focus inside the gallery, ArrowLeft / ArrowRight (and Home / End) change the picture. The picture
+ *    change is announced ("Image 2 of 5: <alt>") through an always-present live region.
+ *  - Accessibility: a labelled group (`ariaLabel`, default "Image gallery") described as a carousel; the buttons are named
+ *    "Previous image" / "Next image"; each dot is a button "Show image N of M" with `aria-current` on the shown one.
+ */
+export declare class ImageGalleryComponent {
+  readonly images: import("@angular/core").InputSignal<GalleryImage[]>;
+  /** Shown picture (0-based). Two-way. */
+  readonly index: import("@angular/core").ModelSignal<number>;
+  readonly loop: import("@angular/core").InputSignal<boolean>;
+  readonly showDots: import("@angular/core").InputSignal<boolean>;
+  readonly showCounter: import("@angular/core").InputSignal<boolean>;
+  readonly aspectRatio: import("@angular/core").InputSignal<string>;
+  readonly maxHeight: import("@angular/core").InputSignal<string>;
+  readonly fit: import("@angular/core").InputSignal<"contain" | "cover">;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  protected readonly count: import("@angular/core").Signal<number>;
+  /** `index` clamped into the list. */
+  protected readonly position: import("@angular/core").Signal<number>;
+  protected readonly current: import("@angular/core").Signal<GalleryImage>;
+  protected readonly currentAlt: import("@angular/core").Signal<string>;
+  protected readonly canPrev: import("@angular/core").Signal<boolean>;
+  protected readonly canNext: import("@angular/core").Signal<boolean>;
+  protected readonly announcement: import("@angular/core").Signal<string>;
+  prev(): void;
+  next(): void;
+  go(i: number): void;
+  protected onKey(e: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ImageGalleryComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ImageGalleryComponent, "ui-image-gallery", never, {
+    "images": {
+      "alias": "images";
+      "required": false;
+      "isSignal": true;
+    };
+    "index": {
+      "alias": "index";
+      "required": false;
+      "isSignal": true;
+    };
+    "loop": {
+      "alias": "loop";
+      "required": false;
+      "isSignal": true;
+    };
+    "showDots": {
+      "alias": "showDots";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCounter": {
+      "alias": "showCounter";
+      "required": false;
+      "isSignal": true;
+    };
+    "aspectRatio": {
+      "alias": "aspectRatio";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxHeight": {
+      "alias": "maxHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "fit": {
+      "alias": "fit";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "index": "indexChange";
+  }, never, never, true, never>;
+}
+export type LiveRegionPoliteness = 'polite' | 'assertive';
+/**
+ * A screen-reader announcement area. The element is always in the DOM and only its text changes, which is what makes
+ * assistive tech (VoiceOver / Safari included) announce reliably - a live region that is inserted together with its text
+ * often is not announced.
+ *
+ *   <ui-live-region [message]="announcement()" />                          <!-- "Step 3 of 5: Deceased" -->
+ *   <ui-live-region [message]="error()" politeness="assertive" />          <!-- role="alert" -->
+ *   <ui-live-region [message]="status()" [visible]="true" />               <!-- also shown on screen -->
+ *
+ * By default it is visually hidden (still read aloud). `politeness` "polite" (default, `role="status"`) waits for the
+ * user to be idle; "assertive" (`role="alert"`) interrupts. `atomic` (default true) reads the whole message again when it
+ * changes. Set the message to '' to clear it. Announcing the same text twice in a row needs a different message in
+ * between (for example clear it first); screen readers ignore an unchanged region.
+ */
+export declare class LiveRegionComponent {
+  /** The text to announce. */
+  readonly message: import("@angular/core").InputSignal<string>;
+  readonly politeness: import("@angular/core").InputSignal<LiveRegionPoliteness>;
+  /** Read the whole message (not just the changed part) when it changes. */
+  readonly atomic: import("@angular/core").InputSignal<boolean>;
+  /** Show the text on screen too. Default false: visually hidden, still announced. */
+  readonly visible: import("@angular/core").InputSignal<boolean>;
+  protected readonly role: import("@angular/core").Signal<"status" | "alert">;
+  static ɵfac: i0.ɵɵFactoryDeclaration<LiveRegionComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<LiveRegionComponent, "ui-live-region", never, {
+    "message": {
+      "alias": "message";
+      "required": false;
+      "isSignal": true;
+    };
+    "politeness": {
+      "alias": "politeness";
+      "required": false;
+      "isSignal": true;
+    };
+    "atomic": {
+      "alias": "atomic";
+      "required": false;
+      "isSignal": true;
+    };
+    "visible": {
+      "alias": "visible";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * Inline field error for controls that have no `error` input of their own — e.g. an app-specific
  * picker. Renders exactly like the library inputs' own field error (small red text under the field,
@@ -6998,6 +7496,8 @@ export declare class RadioComponent {
   readonly description: import("@angular/core").InputSignal<string>;
   /** Accessible name when there is no visible `label`. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** `data-testid` of the native radio input; none when empty. */
+  readonly testId: 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>;
@@ -7039,6 +7539,11 @@ export declare class RadioComponent {
       "required": false;
       "isSignal": true;
     };
+    "testId": {
+      "alias": "testId";
+      "required": false;
+      "isSignal": true;
+    };
     "value": {
       "alias": "value";
       "required": false;
@@ -7540,7 +8045,10 @@ export declare class PdfHotspotComponent {
  *  - `<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.
+ *  - `showEdit` + `editLabel` + `(editClick)`: the built-in Edit button. `editAriaLabel` gives it a longer accessible name
+ *    ("Edit informant information") when the visible label alone is ambiguous; it should contain the visible label.
+ *  - `fill`: the card stretches to the height of its container (a grid cell or flex item) and its body grows, so cards in
+ *    one row end at the same height; the default card is only as tall as its content.
  *  - `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.
@@ -7586,6 +8094,10 @@ export declare class DetailCardComponent {
   readonly showEdit: import("@angular/core").InputSignal<boolean>;
   readonly editLabel: import("@angular/core").InputSignal<string>;
   readonly editClick: import("@angular/core").OutputEmitterRef<void>;
+  /** Accessible name of the Edit button, e.g. "Edit informant information". Empty = the visible `editLabel`. */
+  readonly editAriaLabel: import("@angular/core").InputSignal<string>;
+  /** true = the card fills the height of its container so sibling cards line up; the body grows. Default false: unchanged. */
+  readonly fill: import("@angular/core").InputSignal<boolean>;
   /** The group's aria-label: the visible title (unless `titleId` names the card instead), else `ariaLabel`, else none. */
   groupLabel(): string | null;
   /** The body is open unless the card has a header that is collapsible and was collapsed. */
@@ -7660,6 +8172,16 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "editAriaLabel": {
+      "alias": "editAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "expanded": "expandedChange";
     "editClick": "editClick";
@@ -8079,6 +8601,12 @@ export type ColumnsAlign = 'start' | 'center' | 'stretch';
  *  - `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.
+ *  - Responsive tiers (optional): `countBelowLg` (viewport <= 1024px), `countBelowMd` (<= 768px) and `countBelowSm` (<= 480px)
+ *    give a different column count (1-4) at narrower widths. Each tier falls back to the next wider one, then to `count`, so
+ *    a grid that sets none of them is unchanged. `collapseAt` is applied last: a width at or below it is one column.
+ *    A product grid of 1 column on phones, 2 on tablets and 3 on desktop:
+ *      <ui-columns [count]="3" [countBelowLg]="2" collapseAt="md" gap="md"> ... </ui-columns>
+ *    The same grid with 2 columns from phone width up (no stacking): `[count]="3" [countBelowLg]="2" collapseAt="never"`.
  *
  *   <ui-columns>
  *     <ui-form-section label="Email"> ... </ui-form-section>
@@ -8091,7 +8619,17 @@ export declare class ColumnsComponent {
   readonly gap: import("@angular/core").InputSignal<string>;
   readonly collapseAt: import("@angular/core").InputSignal<ColumnsCollapse>;
   readonly align: import("@angular/core").InputSignal<ColumnsAlign>;
+  /** Column count at viewport widths <= 1024px (falls back to `count`). */
+  readonly countBelowLg: import("@angular/core").InputSignal<ColumnsCount | null>;
+  /** Column count at <= 768px (falls back to `countBelowLg`, then `count`). */
+  readonly countBelowMd: import("@angular/core").InputSignal<ColumnsCount | null>;
+  /** Column count at <= 480px (falls back to `countBelowMd`, then `countBelowLg`, then `count`). */
+  readonly countBelowSm: import("@angular/core").InputSignal<ColumnsCount | null>;
   protected readonly cols: import("@angular/core").Signal<ColumnsCount>;
+  private static clampTier;
+  protected readonly colsLg: import("@angular/core").Signal<ColumnsCount | null>;
+  protected readonly colsMd: import("@angular/core").Signal<ColumnsCount | null>;
+  protected readonly colsSm: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly gapCss: import("@angular/core").Signal<string>;
   protected readonly collapseClass: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsComponent, never>;
@@ -8116,6 +8654,21 @@ export declare class ColumnsComponent {
       "required": false;
       "isSignal": true;
     };
+    "countBelowLg": {
+      "alias": "countBelowLg";
+      "required": false;
+      "isSignal": true;
+    };
+    "countBelowMd": {
+      "alias": "countBelowMd";
+      "required": false;
+      "isSignal": true;
+    };
+    "countBelowSm": {
+      "alias": "countBelowSm";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }
 export type StackDirection = 'vertical' | 'horizontal';