@forgeroute/ui 0.3.13 → 0.4.1

package/types/forgeroute-ui.d.ts

@@ -887,6 +887,11 @@ export declare function formatTime(value: string | null | undefined): string;
 export interface SelectOption<V extends string | number = string> {
   value: V;
   label: string;
+  /**
+   * Optional longer explanation of this choice. The select shows the SELECTED option's description under the field (linked with
+   * `aria-describedby`) and sets it as the option's `title` tooltip where the browser shows one. Options without it are unchanged.
+   */
+  description?: string;
 }
 export declare class SelectComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -901,13 +906,17 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   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 size: import("@angular/core").InputSignal<"default" | "sm">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "default">;
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _value: import("@angular/core").WritableSignal<string>;
   /** 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>;
+  /** The selected option's `description` ('' when none is selected or it has none); hidden while an error shows. */
+  protected readonly _selectedDescription: import("@angular/core").Signal<string>;
+  /** ids of the texts that describe the select: the error / hint, then the selected option's description. */
+  protected readonly _describedBy: import("@angular/core").Signal<string>;
   private readonly _reveal;
   private readonly _issue;
   /** True while the value breaks a built-in rule or the host passed an `[error]`. */
@@ -1121,6 +1130,12 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   readonly pageSize: import("@angular/core").InputSignal<number>;
   readonly tableLabel: import("@angular/core").InputSignal<string>;
   readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /**
+   * Text of the retry button in the failed-load state (desktop table and phone cards). Plain text.
+   * Empty / blank keeps the error state's own default ("Try again").
+   */
+  readonly retryLabel: import("@angular/core").InputSignal<string>;
+  protected readonly _retryLabel: Signal<string>;
   readonly lockedColumn: import("@angular/core").InputSignal<string>;
   readonly savedViews: import("@angular/core").InputSignal<SavedView[]>;
   /**
@@ -1131,6 +1146,14 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   readonly page: import("@angular/core").InputSignal<string>;
   /** Show column config + saved views toolbar. Defaults true. Set false to hide both. */
   readonly showToolbar: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Show the search box above the table. Defaults true. Set false for small fixed tables where searching is meaningless
+   * (a handful of summary rows). Quick-filter tabs and the toolbar are unaffected; when the search box, the tabs and the
+   * toolbar are all off, the header row above the table is not rendered at all.
+   */
+  readonly showSearch: import("@angular/core").InputSignal<boolean>;
+  /** False when the header row would be empty (no search box, no toolbar, no quick-filter tabs). */
+  protected readonly _showHeader: Signal<boolean>;
   /** Optional endpoint that returns Record<string,number> counts per quick-filter value. */
   readonly countsEndpoint: import("@angular/core").InputSignal<string>;
   /**
@@ -1447,6 +1470,13 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       activeValues: string[];
     };
   }[]>;
+  /**
+   * The sort buttons / icons and the column-filter icons only show while there is something to sort or filter: not after a failed
+   * load, and not when the table is empty because nothing exists or only a search / quick tab matched nothing (clear the search to
+   * get back). Once the user has used a column header control (a column filter or a sort is active) the controls stay, even with
+   * zero rows, so they can change or clear it. Headers are plain labels otherwise.
+   */
+  protected readonly _showColumnControls: Signal<boolean>;
   protected readonly _hasPhoneControls: Signal<boolean>;
   /** Phone sort select → sets the sort directly (same state, page reset and load as the header's onSort). */
   protected onPhoneSort(value: string): void;
@@ -1561,6 +1591,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "retryLabel": {
+      "alias": "retryLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "lockedColumn": {
       "alias": "lockedColumn";
       "required": false;
@@ -1581,6 +1616,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "showSearch": {
+      "alias": "showSearch";
+      "required": false;
+      "isSignal": true;
+    };
     "countsEndpoint": {
       "alias": "countsEndpoint";
       "required": false;
@@ -2090,7 +2130,7 @@ export declare class AudioPlayerComponent {
   /** Accessible name of the player. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** How much to load before play: 'metadata' (default), 'auto' or 'none'. */
-  readonly preload: import("@angular/core").InputSignal<"none" | "auto" | "metadata">;
+  readonly preload: import("@angular/core").InputSignal<"none" | "metadata" | "auto">;
   /** Fires when the browser can't load or decode the source. */
   readonly playbackError: import("@angular/core").OutputEmitterRef<void>;
   protected readonly failed: import("@angular/core").WritableSignal<boolean>;
@@ -2117,11 +2157,27 @@ export declare class AudioPlayerComponent {
     "playbackError": "playbackError";
   }, never, never, true, never>;
 }
+/**
+ * Shimmering placeholder for content that is loading.
+ *
+ * By default it is purely decorative (hidden from assistive tech), like before. Give ONE skeleton - or the wrapper of a group of them - an
+ * `ariaLabel` to announce the loading state: the host then becomes a polite live region (`role="status"`, `aria-live="polite"`,
+ * `aria-busy="true"`, named by the label) and is no longer hidden. Remove the skeleton (or the label) when the content has loaded.
+ *
+ *   <ui-skeleton [height]="44" ariaLabel="Loading submissions" />
+ *   <div role="status" aria-label="Loading report"> <ui-skeleton /> <ui-skeleton /> </div>   <!-- decorative skeletons inside a labelled wrapper -->
+ *
+ * Do not label every skeleton of a group: each labelled skeleton is its own live region and would be announced separately.
+ */
 export declare class SkeletonComponent {
   readonly height: import("@angular/core").InputSignal<number>;
   readonly width: import("@angular/core").InputSignal<string>;
   readonly radius: import("@angular/core").InputSignal<number>;
   readonly mb: import("@angular/core").InputSignal<number>;
+  /** Accessible name that turns the skeleton into a polite status region ("Loading ..."). Empty (default) = decorative, hidden from assistive tech. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** The trimmed label ('' = none). */
+  label(): string;
   static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "ui-skeleton", never, {
     "height": {
@@ -2144,6 +2200,11 @@ export declare class SkeletonComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -2950,7 +3011,7 @@ export declare class PhoneNumberPickerComponent {
   protected readonly modeCtl: FormControl<string>;
   protected readonly zipCtl: FormControl<string>;
   protected readonly areaCtl: FormControl<string>;
-  protected readonly step: import("@angular/core").WritableSignal<1 | 2 | 3>;
+  protected readonly step: import("@angular/core").WritableSignal<2 | 1 | 3>;
   protected readonly mode: import("@angular/core").WritableSignal<PhoneNumberSearchMode>;
   private readonly _zip;
   private readonly _area;
@@ -3081,8 +3142,8 @@ export declare class ButtonComponent {
   protected readonly _rel: import("@angular/core").Signal<string | null>;
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
-  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "xs" | "lg">;
-  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
+  readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -6013,7 +6074,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * `search`, `text`, `none`). Empty (default) = the browser's default for the field, except `type="tel"`, which keeps `tel`.
    * It only picks the keyboard; it does not restrict what can be typed or pasted.
    */
-  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "email" | "tel" | "search" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -6294,6 +6355,46 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
     "invalidChange": "invalidChange";
   }, never, never, true, never>;
 }
+export type TextSize = 'sm' | 'md' | 'lg';
+export type TextTone = 'default' | 'muted';
+/**
+ * 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).
+ *
+ *   <ui-text [text]="note.content" />
+ *   <ui-text [text]="request.message" size="sm" tone="muted" />
+ *
+ * Every line break and run of spaces in `text` is shown as written; long unbroken words and links wrap instead of
+ * 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).
+ */
+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>;
+  protected readonly fontSize: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TextComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TextComponent, "ui-text", never, {
+    "text": {
+      "alias": "text";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /** Why a chosen file was refused. */
 /** 'type' = not an accepted type, 'size' = over `maxSize`, 'empty' = a 0-byte file (`rejectEmpty`), 'small' = under `minSize`. */
 export type FileRejectReason = 'type' | 'size' | 'empty' | 'small';
@@ -6986,6 +7087,8 @@ export interface DropdownItem {
   label: string;
   value: string;
   count?: number;
+  /** Greyed-out, not selectable and skipped by keyboard navigation. */
+  disabled?: boolean;
 }
 export declare class DropdownComponent {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -6996,16 +7099,54 @@ export declare class DropdownComponent {
   readonly activeValue: import("@angular/core").InputSignal<string>;
   readonly variant: import("@angular/core").InputSignal<"badge" | "button">;
   readonly menuWidth: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name. Set it when the trigger has no meaningful visible text. Applied as `aria-label` on the
+   * trigger and on the menu; when empty (default) no `aria-label` is rendered, the trigger is named by its
+   * visible label and the menu by `aria-labelledby` pointing at the trigger. Surrounding whitespace is trimmed.
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly itemClick: import("@angular/core").OutputEmitterRef<DropdownItem>;
   protected readonly open: import("@angular/core").WritableSignal<boolean>;
   protected readonly loading: import("@angular/core").WritableSignal<boolean>;
   private readonly _loaded;
   private readonly _id;
+  private readonly _host;
+  private readonly _cdr;
+  private _pendingFocus;
+  private _typeahead;
+  private _typeaheadTimer;
+  private _destroyed;
+  protected readonly triggerId: string;
+  protected readonly menuId: string;
+  protected readonly _ariaLabel: import("@angular/core").Signal<string | null>;
   protected readonly displayItems: import("@angular/core").Signal<DropdownItem[]>;
   constructor();
   toggle(event: Event): void;
   select(item: DropdownItem): void;
   close(): void;
+  /**
+   * Keyboard contract (WAI-ARIA menu button).
+   * Trigger: Enter / Space toggle (opening focuses the first item), ArrowDown opens + first item,
+   * ArrowUp opens + last item, ArrowDown/ArrowUp while open move into the menu, Tab closes (focus moves on naturally).
+   */
+  protected onTriggerKeydown(event: KeyboardEvent): void;
+  /** Firefox fires the button click on Space keyup even when keydown was prevented. */
+  protected onTriggerKeyup(event: KeyboardEvent): void;
+  /**
+   * Menu keys (focus on an item): ArrowDown / ArrowUp move with wrap, Home / End jump to first / last,
+   * Enter / Space activate the focused item (native button click), Tab / Shift+Tab close and let focus move on from the trigger,
+   * printable characters jump to the next item whose label starts with the typed text (typeahead, reset after 500 ms).
+   * Disabled items are skipped. Other keys are ignored. Escape is handled on the host.
+   */
+  protected onMenuKeydown(event: KeyboardEvent): void;
+  protected onEscape(event: Event): void;
+  private _setOpen;
+  private _openAndFocus;
+  /** Renders the menu synchronously, then focuses the pending first / last enabled item. */
+  private _focusPending;
+  private _typeaheadFocus;
+  private _enabledItems;
+  private _focusTrigger;
   static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "ui-dropdown", never, {
     "label": {
@@ -7043,6 +7184,11 @@ export declare class DropdownComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "itemClick": "itemClick";
   }, never, never, true, never>;
@@ -7065,7 +7211,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<2 | 1 | 3>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormRowComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormRowComponent, "ui-form-row", never, {
     "cols": {
@@ -7230,20 +7376,31 @@ export declare class ListItemComponent {
 export declare function provideForgerouteToast(options?: {
   dismissible?: boolean;
 }): EnvironmentProviders;
-/** Payload of `(reorder)`. `order[newIndex] = oldIndex`; apply it with `reorderItems(items, order)`. */
-export interface ListReorderEvent {
+/** Payload of `(reorder)`. Apply it with `reorderItems(items, order)` or take the ready-made `items`. */
+export interface ListReorderEvent<T = unknown> {
+  /** The row that was moved. */
+  item: T;
   /** 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[];
+  /** The new full order of the items (a new array; the input array is not changed). */
+  items: T[];
 }
-/** Context handed to the row template: `<ng-template let-item let-i="index" let-n="count">`. */
+/**
+ * Context handed to the row template:
+ * `<ng-template let-item let-i="index" let-n="count" let-first="first" let-last="last" let-dragging="dragging">`.
+ */
 export interface ListRowContext<T = unknown> {
   $implicit: T;
   index: number;
   count: number;
+  first: boolean;
+  last: boolean;
+  /** True while this row is being dragged. */
+  dragging: boolean;
 }
 /** 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[];
@@ -7252,22 +7409,26 @@ interface Row {
   key: unknown;
   index: number;
   label: string;
-  upLabel: string;
-  downLabel: string;
+  earlierLabel: string;
+  laterLabel: string;
   first: boolean;
   last: boolean;
+  dragging: 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.
+ * elements, one per entry of `items`. 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. `layout="grid"` lays the same
+ * `<ul>` out as a wrapping CSS grid (columns of at least `gridMin` px).
  *
- * 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.
+ * Optional reordering (`[reorderable]="true"`, off by default): Move buttons, Alt+ArrowUp / Alt+ArrowDown from any
+ * focused element in a row, drag and drop plus Shift+Arrow / Home / End on a focused row (default in the grid layout, see
+ * `dragDrop`), a polite live region, and `(reorder)` / `(itemsChange)` outputs.
+ * The host owns the data: the list never changes `items`. Either bind `[(items)]` (the list emits the new array) or
+ * apply the event yourself (`reorderItems`) and pass the new array.
  *
- *   <ui-list ariaLabel="Documents" [items]="docs()" [reorderable]="true" (reorder)="docs.set(reorderItems(docs(), $event.order))">
+ *   <ui-list ariaLabel="Documents" [items]="docs()" [reorderable]="true" (reorder)="docs.set($event.items)">
  *     <ng-template let-doc let-i="index">
  *       <ui-list-item [interactive]="false" [bordered]="true" [title]="doc.title" [details]="[doc.fileName]" />
  *     </ng-template>
@@ -7276,43 +7437,96 @@ interface Row {
 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. */
+  /**
+   * The entries to render, one `<li>` each. The host owns this array; the list never changes it. Two-way binding
+   * (`[(items)]`) works: the list emits `itemsChange` with the new array and the host stores it.
+   */
   readonly items: import("@angular/core").InputSignal<readonly T[]>;
-  /** `false` (default) renders a `<ul>`; `true` renders an `<ol>` with native numbering. */
+  /** `false` (default) renders a `<ul>`; `true` renders an `<ol>` with native numbering (no numbers in the grid layout). */
   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. */
+  /** 'list' = one column; 'grid' = wrapping columns of at least `gridMin` px (still a real `<ul>`). */
+  readonly layout: import("@angular/core").InputSignal<"list" | "grid">;
+  /** Minimum column width in px of the grid layout. */
+  readonly gridMin: import("@angular/core").InputSignal<number>;
+  /**
+   * Space between rows (list) or between rows and columns (grid): none | xs | sm | md | lg | xl (0/4/8/16/24/32px, the scale of
+   * `ui-stack` / `ui-columns`) or any CSS length (`gap="20px"`). Not set, or not a token / length: 0 in a list, 12px in a grid.
+   */
+  readonly gap: import("@angular/core").InputSignal<string | undefined>;
+  /** Turns reordering on. Default `false`: no controls, no live region, no drag, no keys. */
   readonly reorderable: import("@angular/core").InputSignal<boolean>;
-  /** Disables all move controls and the keyboard shortcut (the rows stay visible). */
+  /** Disables all moves (buttons, keys, drag and drop); the rows stay visible. */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Move buttons on each row (needs `reorderable`). 'auto' (default) = shown in the list layout, hidden in the grid layout;
+   * `true` / `false` force them.
+   */
+  readonly moveControls: import("@angular/core").InputSignal<boolean | "auto">;
+  /**
+   * Drag and drop plus focusable rows (Shift+Arrow / Home / End). 'auto' (default) = on in the grid layout, off in the list
+   * layout (where the Move buttons are the way); `true` / `false` force it. Needs `reorderable`.
+   */
+  readonly dragDrop: import("@angular/core").InputSignal<boolean | "auto">;
   /** 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".
+   * Row label used in the button names, the row's accessible name 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>;
+  /**
+   * Start of the up / earlier button name; the row label is appended ("Move earlier Image 3"). Default: "Move <label> up"
+   * in the list layout, "Move earlier <label>" in the grid layout.
+   */
+  readonly moveEarlierLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Start of the down / later button name ("Move later Image 3"). Default: "Move <label> down" (list), "Move later <label>" (grid). */
+  readonly moveLaterLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Screen-reader instruction for a focused draggable row (aria-describedby). */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Announcement after a move; receives the row label, the new position (1-based) and the list size. */
+  readonly moveAnnouncement: import("@angular/core").InputSignal<(label: string, position: number, total: number) => string>;
+  /** Fires with the new array when the user moves a row (`[(items)]`). The list does not change `items` itself. */
+  readonly itemsChange: import("@angular/core").OutputEmitterRef<T[]>;
+  /** Fires when the user moves a row. The host applies it (or uses `[(items)]`) and passes the new `items`. */
+  readonly reorder: import("@angular/core").OutputEmitterRef<ListReorderEvent<T>>;
   protected readonly rowTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+  protected readonly helpId: string;
   protected readonly announcement: import("@angular/core").WritableSignal<string>;
   protected readonly movedKey: import("@angular/core").WritableSignal<unknown>;
+  protected readonly dragIndex: import("@angular/core").WritableSignal<number | null>;
+  protected readonly overIndex: import("@angular/core").WritableSignal<number | null>;
   private pendingFocus;
   private announceSeq;
   /** Stable disambiguation tokens for repeated keys (duplicates in a primitive list), reused across recomputes. */
   private dupTokens;
+  protected readonly isGrid: import("@angular/core").Signal<boolean>;
+  private readonly canReorder;
+  protected readonly showControls: import("@angular/core").Signal<boolean>;
+  /** Rows are draggable, focusable and move with Shift+arrows. */
+  protected readonly direct: import("@angular/core").Signal<boolean>;
+  /** The `--ul-gap` custom property: the token / length, or the default of the layout when unset or invalid. */
+  protected readonly gapCss: import("@angular/core").Signal<string>;
   protected readonly rows: import("@angular/core").Signal<Row[]>;
-  private canReorder;
-  /** The `<li>` (direct child of this list) that contains `el`, or null. */
+  /** Index of the `<li>` (direct child of this list) that contains `el`, or -1. */
   private rowIndexOf;
+  /**
+   * Moves the row at `from` to position `to` (clamped) and emits `itemsChange` + `reorder`. No-op (returns false) when
+   * reordering is off or disabled, `from` is out of range, or nothing would change. Does not touch focus.
+   */
+  move(from: number, to: number): boolean;
   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;
+  protected onDragStart(e: DragEvent): void;
+  protected onDragOver(e: DragEvent): void;
+  protected onDrop(e: DragEvent): void;
+  protected onDragEnd(): void;
+  /** Emits the move, announces it and (for key / button moves) restores focus once the host has re-rendered. */
+  private apply;
   /** 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;
@@ -7328,6 +7542,21 @@ export declare class ListComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "gridMin": {
+      "alias": "gridMin";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
     "reorderable": {
       "alias": "reorderable";
       "required": false;
@@ -7338,6 +7567,16 @@ export declare class ListComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "moveControls": {
+      "alias": "moveControls";
+      "required": false;
+      "isSignal": true;
+    };
+    "dragDrop": {
+      "alias": "dragDrop";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "ariaLabel";
       "required": false;
@@ -7358,7 +7597,28 @@ export declare class ListComponent<T = unknown> {
       "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;
+    };
   }, {
+    "itemsChange": "itemsChange";
     "reorder": "reorder";
   }, ["rowTemplate"], ["[list-empty]"], true, never>;
 }
@@ -7370,6 +7630,12 @@ export declare class ListComponent<T = unknown> {
  * 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`.
+ *
+ * Out-of-range input: only the BAR is clamped, never the text the user reads. The fill is always 0-100% of the track:
+ * `value` below 0, NaN, -Infinity or not a number (string, null, undefined) draws no fill; `value` above `max`
+ * (including +Infinity) fills 100%; `max` of 0, negative, NaN, +/-Infinity or not a number draws an empty bar. The progressbar's
+ * `aria-valuenow` is clamped to [0, max] and `aria-valuemax` is 0 for an invalid max. The count text keeps the real `value`
+ * (formatted; a non-finite or non-number value reads "0"), and `count` / `share` / `valueText` are shown and announced as given.
  * 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 {
@@ -7377,7 +7643,7 @@ export declare class BarRowComponent {
   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. */
+  /** The amount that fills the bar (e.g. the largest category's count). 0 / NaN / negative / infinite / not a number 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>;
@@ -7391,6 +7657,10 @@ export declare class BarRowComponent {
   readonly locale: import("@angular/core").InputSignal<string>;
   /** Unique id tying the label to the progressbar. */
   protected readonly labelId: string;
+  /** `value` made safe for the bar: anything that is not a real number becomes 0 (the bar clamps the rest to 0..max). */
+  protected readonly barValue: import("@angular/core").Signal<number>;
+  /** `max` made safe for the bar: only a finite number above 0 counts, everything else is 0 (empty bar). */
+  protected readonly barMax: import("@angular/core").Signal<number>;
   protected readonly countText: import("@angular/core").Signal<string>;
   protected readonly effectiveValueText: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BarRowComponent, never>;
@@ -7643,7 +7913,7 @@ export declare class ChipGroupComponent {
   readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
   readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
-  protected readonly _gap: import("@angular/core").Signal<"6px" | "8px" | "12px">;
+  protected readonly _gap: import("@angular/core").Signal<"6px" | "12px" | "8px">;
   protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "6px" | "12px">;
   protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "6px" | "12px">;
   static ɵfac: i0.ɵɵFactoryDeclaration<ChipGroupComponent, never>;
@@ -7870,16 +8140,27 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
 /**
  * Inline status message (info / success / warning / danger) with an optional title,
  * optional dismiss button, and projected body content (text, links, a retry ui-button…).
+ * `quiet` drops the live-region role (no announcement) and `compact` tightens it for list rows — both off by default.
  *
  *   <ui-alert variant="warning">No recipients — this campaign will not be sent.</ui-alert>
  *   <ui-alert variant="danger" title="Couldn't load recipients">
  *     {{ error }} <ui-button variant="ghost" size="sm" (click)="retry()">Retry</ui-button>
  *   </ui-alert>
+ *   <ui-alert variant="danger" [quiet]="true" [compact]="true">Row 4: Email is not valid.</ui-alert>
  */
 export declare class AlertComponent {
   readonly variant: import("@angular/core").InputSignal<AlertVariant>;
   readonly title: import("@angular/core").InputSignal<string>;
   readonly dismissible: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Quiet: no live-region role, so a screen reader does NOT announce it when it appears. Use it for an alert that is already on
+   * the page when the user gets there, or for each item of a long list of alerts (e.g. one per failed import row — 500 danger
+   * alerts would be 500 announcements). The default (false) keeps `role="alert"` for danger and `role="status"` for the rest.
+   * The text stays normal page content, so it is still read in browse mode.
+   */
+  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>;
   readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
   static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ui-alert", never, {
@@ -7898,6 +8179,16 @@ export declare class AlertComponent {
       "required": false;
       "isSignal": true;
     };
+    "quiet": {
+      "alias": "quiet";
+      "required": false;
+      "isSignal": true;
+    };
+    "compact": {
+      "alias": "compact";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "dismissed": "dismissed";
   }, never, ["*"], true, never>;
@@ -7998,143 +8289,6 @@ 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';
@@ -8258,6 +8412,9 @@ export type KpiCardValueColor = 'default' | 'green' | 'blue';
  * role="button", focusable (tabindex 0, visible focus ring), and Enter / Space fire the host's (click). Give it an
  * accessible name with [attr.aria-label] when the label alone isn't enough (e.g. "Net Commission: $12.5K — show details").
  *
+ *   Optional background: `background="#fef2f2"` fills the card with any CSS colour (default white), e.g. a soft red for money going out; the
+ *   text keeps its own colours, so pick a light shade.
+ *
  *   Optional ring: `[progress]="67"` (+ `progressMax`, `progressVariant`, `progressSize`) draws a ui-progress-ring beside the label; extra lines
  *   (a pace badge, a projection…) go in an element with the `kpi-footer` attribute.
  *
@@ -8277,6 +8434,8 @@ export declare class KpiCardComponent {
   readonly highlight: import("@angular/core").InputSignal<boolean>;
   readonly clickable: import("@angular/core").InputSignal<boolean>;
   readonly valueColor: import("@angular/core").InputSignal<KpiCardValueColor>;
+  /** Card background as any CSS colour (`#fef2f2`, `var(--surface)` …). Empty (default) = white. The text colours do not change, so use a light shade. */
+  readonly background: import("@angular/core").InputSignal<string>;
   /** Completed amount shown as a `ui-progress-ring` beside the label. `null` (default) = no ring. */
   readonly progress: import("@angular/core").InputSignal<number | null>;
   /** Total for `progress` (default 100, so `progress` is a percentage). */
@@ -8336,6 +8495,11 @@ export declare class KpiCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "background": {
+      "alias": "background";
+      "required": false;
+      "isSignal": true;
+    };
     "progress": {
       "alias": "progress";
       "required": false;
@@ -8373,6 +8537,167 @@ export declare class KpiCardComponent {
     };
   }, {}, never, ["[kpi-footer]"], true, never>;
 }
+interface StateView {
+  id: string;
+  name: string;
+  path: string;
+  value: number;
+  /** "12 pickups" (or just "12"). */
+  valueText: string;
+  /** "Texas, 12 pickups": the accessible name, the tooltip text and the hidden-list entry. */
+  label: string;
+  fill: string;
+}
+/**
+ * US choropleth map: the 50 states plus Washington, DC, each coloured from `colorLow` (value 0) to `colorHigh` (the largest
+ * value) by its number in `data`.
+ *
+ * Interaction and accessibility
+ * - Every state is a button (`role="button"`, name "Texas, 12 pickups", `aria-pressed` for the selected one). The group has a
+ *   single tab stop (roving tabindex: last focused state, else the selected one, else Alabama); arrow keys,
+ *   Home and End move between states in alphabetical order, Enter / Space emit `stateClick` with the abbreviation.
+ * - The tooltip (state name + value) shows on hover AND on keyboard focus; it is real text, `aria-hidden` because the
+ *   state's accessible name already says the same. Colour is never the only signal: values are in names, tooltip and the
+ *   visually hidden list of all states.
+ * - A selected state gets an orange outline and the others are dimmed; the focus ring is drawn as an overlay outline
+ *   (works the same in Chrome, Edge, Firefox and Safari) and only for keyboard focus.
+ * - `prefers-reduced-motion` turns the transitions off. Strokes use `vector-effect: non-scaling-stroke`, so outlines keep
+ *   their pixel width when `focusState` zooms in.
+ *
+ * Known limitation: the very small states (CT, DC, DE, HI, MA, MD, NH, NJ, RI, VT) are tiny touch targets on a phone. They
+ * are reachable by keyboard and screen reader like any other; set `showSmallStateButtons` for a row of 44px buttons for them.
+ * Territories are not on the map.
+ */
+export declare class UsStateMapComponent {
+  /** State abbreviation -> value. Keys are case-insensitive; unknown keys are ignored; numbers and numeric strings (`'5'`) are read as numbers, anything else (negative, NaN, Infinity, text, booleans, null) counts as 0; repeated keys (`tx` and `TX`) are added up. */
+  readonly data: import("@angular/core").InputSignal<Record<string, number>>;
+  /** Abbreviation of the selected state (orange outline, the others are dimmed). Unknown / null = none. */
+  readonly selectedState: import("@angular/core").InputSignal<string | null>;
+  /** Abbreviation of a state to zoom the map to (bounding box plus 15% padding). Unknown / null = the whole map. */
+  readonly focusState: import("@angular/core").InputSignal<string | null>;
+  /** Unit for one, e.g. "pickup": "Texas, 1 pickup". Empty = just the number. */
+  readonly unitSingular: import("@angular/core").InputSignal<string>;
+  /** Unit for other counts, e.g. "pickups". Empty = the singular text is used for every count. */
+  readonly unitPlural: import("@angular/core").InputSignal<string>;
+  /** Colour of a value of 0 (CSS hex or rgb()). Invalid values fall back to #e5e7eb. */
+  readonly colorLow: import("@angular/core").InputSignal<string>;
+  /** Colour of the largest value (CSS hex or rgb()). Invalid values fall back to #1e40af. */
+  readonly colorHigh: import("@angular/core").InputSignal<string>;
+  /** Shows the colour scale (0 to the largest value). */
+  readonly showLegend: import("@angular/core").InputSignal<boolean>;
+  /** Shows a row of buttons for the very small states (touch friendly, 44px). Off by default. */
+  readonly showSmallStateButtons: import("@angular/core").InputSignal<boolean>;
+  /** Accessible name of the whole map. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** CSS maximum width of the map (it always shrinks to its container). */
+  readonly maxWidth: import("@angular/core").InputSignal<string>;
+  /** Optional CSS height of the map, e.g. "420px". Empty = follows the width (aspect ratio of the map). */
+  readonly height: import("@angular/core").InputSignal<string>;
+  /** Emits the state's abbreviation (upper case) on click, tap, Enter or Space. */
+  readonly stateClick: import("@angular/core").OutputEmitterRef<string>;
+  private readonly host;
+  /** True between a pointer press and the click that follows: a mouse / touch focus must not draw the keyboard ring. */
+  protected pointerDown: boolean;
+  private readonly hoveredId;
+  private readonly focusedId;
+  private readonly lastFocusedId;
+  private readonly ringVisible;
+  protected readonly tipPos: import("@angular/core").WritableSignal<{
+    x: number;
+    y: number;
+  } | null>;
+  private readonly low;
+  private readonly high;
+  private readonly values;
+  private readonly max;
+  private unit;
+  private valueText;
+  protected readonly views: import("@angular/core").Signal<StateView[]>;
+  protected readonly smallViews: import("@angular/core").Signal<StateView[]>;
+  protected readonly selectedId: import("@angular/core").Signal<string | null>;
+  protected readonly selectedView: import("@angular/core").Signal<StateView | null>;
+  protected readonly focusRingView: import("@angular/core").Signal<StateView | null>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  /** The one state in the tab order: last focused, else selected, else the first. */
+  protected readonly tabStop: import("@angular/core").Signal<string>;
+  protected readonly tip: import("@angular/core").Signal<StateView | null>;
+  protected readonly gradient: import("@angular/core").Signal<string>;
+  protected readonly maxText: import("@angular/core").Signal<string>;
+  protected readonly legendLabel: import("@angular/core").Signal<string>;
+  protected opacityOf(id: string): string | null;
+  protected onHover(ev: PointerEvent, id: string): void;
+  protected onLeave(id: string): void;
+  protected clearHover(): void;
+  protected onClick(id: string): void;
+  protected onFocus(id: string): void;
+  protected onBlur(id: string): void;
+  protected onKey(ev: KeyboardEvent, id: string): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UsStateMapComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UsStateMapComponent, "ui-us-state-map", never, {
+    "data": {
+      "alias": "data";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectedState": {
+      "alias": "selectedState";
+      "required": false;
+      "isSignal": true;
+    };
+    "focusState": {
+      "alias": "focusState";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitSingular": {
+      "alias": "unitSingular";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitPlural": {
+      "alias": "unitPlural";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorLow": {
+      "alias": "colorLow";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorHigh": {
+      "alias": "colorHigh";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "showSmallStateButtons": {
+      "alias": "showSmallStateButtons";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "stateClick": "stateClick";
+  }, never, never, true, never>;
+}
 export type DatePreset = 'today' | '7days' | '30days' | 'month' | 'quarter' | 'ytd' | 'all' | 'custom';
 export interface DateRange {
   preset: DatePreset;
@@ -8810,6 +9135,7 @@ export declare class RadioMatrixComponent implements ControlValueAccessor, Valid
  * Header (all optional - set `[showHeader]="false"` and the card is just the body):
  *  - `title` / `subtitle`: the bold uppercase title and the grey line under it.
  *  - `titleId`: an id for the title text, which also names the card for assistive tech (aria-labelledby).
+ *  - `ariaLabel`: the card's accessible name when the header does not provide one (`[showHeader]="false"`, or a header with no title). A visible title always wins; `titleId` still names the card by aria-labelledby.
  *  - `<div card-header-leading>`: something before the title block, such as a logo or an icon.
  *  - `<ng-container card-header>`: your own header content, shown under the title (or instead of it when no title is set).
  *  - `<ng-container card-header-action>`: buttons or links on the right side of the header.
@@ -8825,6 +9151,7 @@ export declare class RadioMatrixComponent implements ControlValueAccessor, Valid
  *   <ui-detail-card title="COMMUNICATIONS" subtitle="All calls, texts, and emails"> ...body... </ui-detail-card>
  *   <ui-detail-card title="CONTACT INFO" [showEdit]="true" (editClick)="openEdit()"> ... </ui-detail-card>
  *   <ui-detail-card [showHeader]="false"> ...body only... </ui-detail-card>
+ *   <ui-detail-card [showHeader]="false" ariaLabel="Report filters"> ...body only, but named for assistive tech... </ui-detail-card>
  *   <ui-detail-card [collapsible]="false">
  *     <div card-header>Any markup</div>
  *     <ui-button card-header-action size="xs" variant="secondary">Add</ui-button>
@@ -8835,9 +9162,11 @@ export declare class DetailCardComponent {
   /** Bold uppercase title. Empty = no title text. */
   readonly title: import("@angular/core").InputSignal<string>;
   /** 1-6 makes the title a real heading for screen readers (role=heading, aria-level); null keeps it plain text. */
-  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<2 | 1 | 5 | 3 | 6 | 4 | null>;
   /** Optional id for the title text; the card is then labelled by it. Without it the title is the card's aria-label. */
   readonly titleId: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the card when the header gives none (no header, or no title). A visible title wins; blank = no name. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Grey line under the title. */
   readonly subtitle: import("@angular/core").InputSignal<string>;
   /** Card background as any CSS colour (`#f8fafc`, `var(--surface)` …). Empty = white. */
@@ -8854,6 +9183,8 @@ 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>;
+  /** 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. */
   isOpen(): boolean;
   toggle(): void;
@@ -8876,6 +9207,11 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "subtitle": {
       "alias": "subtitle";
       "required": false;
@@ -9208,8 +9544,12 @@ export declare class ColorInputComponent implements ControlValueAccessor, Valida
  *  - `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.
+ *  - `size`: the visual size only (the semantic heading `level` is independent of it). Anything else becomes 'md'.
+ *      'sm'  0.875rem (14px) title, 0.75rem description, 24px tile, 14px icon; padding 14px 18px (12px 14px at 480px and narrower)
+ *      'md'  (default) 1rem (16px) title, 0.8125rem description, 28px tile, 16px icon; padding 14px 18px (12px 14px at 480px and narrower)
+ *      'lg'  1.25rem (20px) title, 0.9375rem description, 36px tile, 20px icon; padding 18px 22px (14px 16px at 480px and narrower)
+ *      'xl'  1.5rem (24px) title (1.375rem at 480px and narrower), 1rem description, 44px tile, 24px icon; padding 22px 26px (16px 18px at 480px and narrower)
+ *  Padding is built in per size - 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.
@@ -9240,8 +9580,8 @@ export declare class SectionHeaderComponent {
   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">;
+  /** Visual size: 'sm', 'md' (default), 'lg' or 'xl'. Independent of `level`; anything else renders as 'md'. */
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl">;
   protected readonly titleId: string;
   protected readonly descriptionId: string;
   protected readonly headingLevel: import("@angular/core").Signal<number>;