@forgeroute/ui 0.4.6 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",

package/types/forgeroute-ui.d.ts

@@ -1812,7 +1812,7 @@ export declare class SidePanelComponent implements OnDestroy {
   readonly cancelLabel: import("@angular/core").InputSignal<string>;
   /** Right-aligned primary action button label. Empty string = hidden. */
   readonly primaryLabel: import("@angular/core").InputSignal<string>;
-  readonly primaryVariant: import("@angular/core").InputSignal<"primary" | "danger" | "warning">;
+  readonly primaryVariant: import("@angular/core").InputSignal<"warning" | "danger" | "primary">;
   readonly primaryLoading: import("@angular/core").InputSignal<boolean>;
   readonly primaryDisabled: import("@angular/core").InputSignal<boolean>;
   /** `data-testid` of the Cancel button; none when empty (default). */
@@ -3343,7 +3343,7 @@ export declare class ButtonComponent {
    * `ghost-start`: a ghost button for list / section toggles - a full-width row with its content aligned to the start, transparent
    * background, hover tint and the normal focus ring. Pair it with `ariaExpanded` / `ariaPressed`; the label may contain a heading element.
    */
-  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"warning" | "danger" | "primary" | "secondary" | "link" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
   /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. While `disabled` or `loading` it renders a non-clickable `<span role="link" aria-disabled>` with no href (like `href`). */
   readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
   /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
@@ -3746,7 +3746,7 @@ export declare class BulkMessagePanelComponent {
   readonly sending: import("@angular/core").InputSignal<boolean>;
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   readonly send: import("@angular/core").OutputEmitterRef<BulkMessageSendEvent>;
-  readonly channel: import("@angular/core").WritableSignal<"text" | "email">;
+  readonly channel: import("@angular/core").WritableSignal<"email" | "text">;
   private readonly _subject;
   private readonly _body;
   get subject(): string;
@@ -3895,7 +3895,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * Meant for a short mark of 1-3 characters.
    */
   readonly prefix: import("@angular/core").InputSignal<string>;
-  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "tel" | "password" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "tel" | "email" | "text" | "password" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -3904,7 +3904,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<"" | "tel" | "email" | "none" | "text" | "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>;
@@ -5345,7 +5345,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": {
@@ -5362,7 +5362,7 @@ export declare class FormRowComponent {
  * child simply takes the full width. Keep a numeric span within the row's `cols` (use `all` for the whole row).
  */
 export declare class FormColSpanDirective {
-  readonly uiColSpan: import("@angular/core").InputSignal<"" | "2" | "3" | 2 | 3 | "all">;
+  readonly uiColSpan: import("@angular/core").InputSignal<"" | 2 | 3 | "2" | "3" | "all">;
   protected readonly _class: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormColSpanDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<FormColSpanDirective, "[uiColSpan]", never, {
@@ -5965,6 +5965,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 +5993,11 @@ export declare class PanelInfoListComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelColon": {
+      "alias": "labelColon";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -6393,7 +6404,7 @@ export declare class IconComponent {
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Icon size in px. */
   readonly size: import("@angular/core").InputSignal<number>;
-  readonly variant: import("@angular/core").InputSignal<"danger" | "default">;
+  readonly variant: import("@angular/core").InputSignal<"default" | "danger">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** The host is running the request this icon started: a spinner replaces the picture and the button is disabled (no click) until it is false again. */
   readonly loading: import("@angular/core").InputSignal<boolean>;
@@ -6451,23 +6462,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 +6511,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<"below" | "end">;
+  /** 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 +6534,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>;
 }
 /**
@@ -7447,7 +7487,7 @@ export declare class PdfHotspotComponent {
   /** `ready`: clickable; `blocked`: disabled (a prerequisite is missing); `signed`: shows `image`. */
   readonly state: import("@angular/core").InputSignal<"ready" | "blocked" | "signed">;
   /** `warning` gives the ready state an amber look (e.g. for initials), default is blue. */
-  readonly tone: import("@angular/core").InputSignal<"primary" | "warning">;
+  readonly tone: import("@angular/core").InputSignal<"warning" | "primary">;
   /** Text of the ready button (e.g. "Sign Here"). */
   readonly label: import("@angular/core").InputSignal<string>;
   /** Text of the blocked button (e.g. "Add signature above"). */
@@ -7565,7 +7605,7 @@ export declare class DetailCardComponent {
   /** true (default) = the title is displayed in capitals (CSS only); false = shown as written. The text, aria-label and heading name are never changed. */
   readonly uppercaseTitle: import("@angular/core").InputSignal<boolean>;
   /** 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<1 | 2 | 3 | 4 | 6 | 5 | 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. */