@forgeroute/ui 0.3.12 → 0.4.0

package/types/forgeroute-ui.d.ts

@@ -1971,6 +1971,107 @@ export declare class ProgressBarComponent {
     };
   }, {}, never, never, true, never>;
 }
+export type ProgressRingVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate' | 'sky';
+/**
+ * Circular progress ring with the rounded percentage (or a custom `label`) in the middle.
+ * Pass `value` and `max` (default 100); the arc is clamped to 0–100% and starts at 12 o'clock. A value of 0 draws no arc; invalid numbers
+ * (NaN, a negative or infinite max) draw an empty ring.
+ *
+ * The arc color follows completion exactly like `ui-progress-bar` (red up to 25%, amber up to 50%, blue up to 75%, green above 75%);
+ * `variant` fixes it for a ring whose color means something else (e.g. one ring per metric). The ring is a `role="progressbar"`
+ * (name it with `ariaLabel` or `ariaLabelledby`; `valueText` adds a human reading such as "$200K of $300K"). The arc animates unless
+ * `prefers-reduced-motion` is set and stays visible in forced-colors mode.
+ *
+ *   <ui-progress-ring [value]="67" ariaLabel="Gross income progress" variant="green" />
+ *   <ui-progress-ring [value]="done" [max]="total" [size]="72" [strokeWidth]="6" [label]="done + '/' + total" ariaLabel="Checklist" />
+ */
+export declare class ProgressRingComponent {
+  /** Completed amount. */
+  readonly value: import("@angular/core").InputSignal<number>;
+  /** Total amount (default 100, so `value` is a percentage); 0 renders an empty ring. */
+  readonly max: import("@angular/core").InputSignal<number>;
+  /** Diameter in px. */
+  readonly size: import("@angular/core").InputSignal<number>;
+  /** Ring thickness in px. */
+  readonly strokeWidth: import("@angular/core").InputSignal<number>;
+  /** Optional fixed arc color. Leave it out and the color follows completion (red / amber / blue / green). */
+  readonly variant: import("@angular/core").InputSignal<ProgressRingVariant | null | undefined>;
+  /** Text in the middle instead of the rounded percentage, e.g. "3/5". */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** `false` draws the ring without any text in the middle. */
+  readonly showValue: import("@angular/core").InputSignal<boolean>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id of an element that names the ring (wins over `ariaLabel`). */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Human text for `aria-valuetext`, e.g. "$200K of $300K". Empty = not set. */
+  readonly valueText: import("@angular/core").InputSignal<string>;
+  /** `max` made safe: NaN / negative / infinite become 0 (empty ring, no division by zero). */
+  protected readonly safeMax: import("@angular/core").Signal<number>;
+  protected readonly clampedValue: import("@angular/core").Signal<number>;
+  /** Exact completion in % (0–100). */
+  private readonly exact;
+  /** Rounded completion in %, shown in the middle. */
+  protected readonly percent: import("@angular/core").Signal<number>;
+  protected readonly center: import("@angular/core").Signal<number>;
+  protected readonly radius: import("@angular/core").Signal<number>;
+  protected readonly circumference: import("@angular/core").Signal<number>;
+  protected readonly dashOffset: import("@angular/core").Signal<number>;
+  /** The override when given, else the completion band: up to 25% red, up to 50% amber, up to 75% blue, above 75% green. */
+  protected readonly effectiveVariant: import("@angular/core").Signal<ProgressRingVariant>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ProgressRingComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ProgressRingComponent, "ui-progress-ring", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "strokeWidth": {
+      "alias": "strokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValue": {
+      "alias": "showValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueText": {
+      "alias": "valueText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * Audio player for a recording (a call, a voicemail, a message): the browser's own controls (play / pause, seek, time, volume,
  * keyboard and screen-reader support, the same in Chrome, Edge, Firefox and Safari) in the library's look, plus a readable message
@@ -6193,6 +6294,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';
@@ -7129,20 +7270,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[];
@@ -7151,22 +7303,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>
@@ -7175,43 +7331,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;
@@ -7227,6 +7436,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;
@@ -7237,6 +7461,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;
@@ -7257,7 +7491,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>;
 }
@@ -7542,7 +7797,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>;
@@ -7769,16 +8024,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, {
@@ -7797,6 +8063,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>;
@@ -7897,143 +8173,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';
@@ -8157,6 +8296,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 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.
+ *
  *   <ui-kpi-card label="Deals Closed" [value]="'' + deals" subtitle="Year to Date" icon="check-circle" color="blue" />
  *   <ui-kpi-card label="Net Commission" [value]="net" icon="dollar" color="green" [highlight]="true"
  *                [clickable]="true" (click)="openDetails()" />
@@ -8173,6 +8315,20 @@ 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>;
+  /** 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). */
+  readonly progressMax: import("@angular/core").InputSignal<number>;
+  /** Ring diameter in px. */
+  readonly progressSize: import("@angular/core").InputSignal<number>;
+  readonly progressStrokeWidth: import("@angular/core").InputSignal<number>;
+  /** Fixed ring color; leave it out and the color follows completion (red / amber / blue / green). */
+  readonly progressVariant: import("@angular/core").InputSignal<ProgressRingVariant | null | undefined>;
+  /** Accessible name of the ring; default "<label> progress". */
+  readonly progressAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Human reading of the ring for assistive tech, e.g. "$200K of $300K". */
+  readonly progressValueText: import("@angular/core").InputSignal<string>;
+  protected readonly hasProgress: import("@angular/core").Signal<boolean>;
   /** Enter / Space on a clickable card act like a click (Space would otherwise scroll the page). */
   protected onActivateKey(event: Event): void;
   protected readonly iconSvg: import("@angular/core").Signal<SafeHtml | null>;
@@ -8218,7 +8374,42 @@ export declare class KpiCardComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+    "progress": {
+      "alias": "progress";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressMax": {
+      "alias": "progressMax";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressSize": {
+      "alias": "progressSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressStrokeWidth": {
+      "alias": "progressStrokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressVariant": {
+      "alias": "progressVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressAriaLabel": {
+      "alias": "progressAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressValueText": {
+      "alias": "progressValueText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[kpi-footer]"], true, never>;
 }
 export type DatePreset = 'today' | '7days' | '30days' | 'month' | 'quarter' | 'ytd' | 'all' | 'custom';
 export interface DateRange {