@forgeroute/ui 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.5",
+  "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). */
@@ -3040,6 +3040,11 @@ export interface RadioOption {
  * Built-in validation: `required` -> "<label> is required."; a non-empty value that is not one of the `options` ->
  * "Select a valid option." (not checked while `options` is empty). Disabled groups are never invalid.
  *
+ * Option content (`<ng-template uiRadioOptionContent="value">`) is rendered right under its option, inside the fieldset, so the layout and
+ * keyboard flow stay as they are. Because it is not a radio, it is exposed as its own `role="group"` named by that option's label
+ * (`aria-labelledby` = the radio's label id, e.g. "Deliver, group") instead of being read as part of the radio group. Groups without
+ * templates render no extra attributes or ids.
+ *
  * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
  * provides `UiFieldValidity`. Messages show after the group lost focus or while `[showErrors]="true"`; a host `[error]` wins.
  */
@@ -3065,6 +3070,8 @@ export declare class RadioGroupComponent implements ControlValueAccessor, Valida
   protected readonly _descId: string;
   /** Id of the content block under the selected option; that radio points at it with aria-controls. */
   protected readonly _nestedId: string;
+  /** Id of an option's label text (set on the radio only for options that have nested content); the nested group is named by it. */
+  protected _optionLabelId(index: number): string;
   protected readonly _value: import("@angular/core").WritableSignal<string>;
   private readonly _reveal;
   private readonly _issue;
@@ -3336,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' }`). */
@@ -3739,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;
@@ -3888,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>;
@@ -3897,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>;
@@ -5338,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": {
@@ -5355,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, {
@@ -5958,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
@@ -5980,6 +5993,11 @@ export declare class PanelInfoListComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelColon": {
+      "alias": "labelColon";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -6386,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>;
@@ -6444,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,
@@ -6480,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": {
@@ -6497,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>;
 }
 /**
@@ -7003,7 +7050,10 @@ export declare class RadioComponent {
   /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking). */
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   protected readonly disabled: import("@angular/core").InputSignal<boolean>;
-  protected readonly _labelId: string;
+  /** Id of the visible label text. Optional: a host (e.g. `ui-radio-group`) can set it to point another element at the label with `aria-labelledby`; a unique id is generated when empty. */
+  readonly labelId: import("@angular/core").InputSignal<string>;
+  private readonly _generatedLabelId;
+  protected readonly _labelId: import("@angular/core").Signal<string>;
   /** With a description inside the <label>, the accessible name would read "Email We send a message": name the input by the label text only. */
   protected readonly _labelledBy: import("@angular/core").Signal<string | null>;
   protected readonly _descriptionId: string;
@@ -7064,6 +7114,11 @@ export declare class RadioComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelId": {
+      "alias": "labelId";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "selected": "selected";
   }, never, ["*"], true, never>;
@@ -7414,6 +7469,14 @@ export declare class SignaturePadComponent implements ControlValueAccessor {
  * `state="ready"` is a clickable button (`label`), `"blocked"` the same button disabled (`blockedLabel`, e.g. "create your signature first"),
  * and `"signed"` shows the applied `image` (a signature data URL) contained inside the box instead (signed without an image is a disabled button showing `label`). The box size comes from the document
  * so the text is scaled to it (height x 0.25, clamped to 7-11px); on touch devices the tap area is extended to at least 44px tall.
+ *
+ * Inside an ancestor scaled with CSS `transform: scale(s)` (e.g. a PDF page shrunk to fit a phone), pass that factor as `scale` so the tap area
+ * stays at least 44 CSS px on screen (the area is made 44 / s px tall before the ancestor shrinks it). Default 1; values <= 0, NaN or
+ * non-finite count as 1. Only the touch tap area changes, not the look, font size or accessibility.
+ *
+ *   <div [style.transform]="'scale(' + s + ')'" style="transform-origin: top left">
+ *     <ui-pdf-hotspot ... [scale]="s" />   <!-- s = 0.5 -> tap area at least 88px tall before scaling = 44px on screen -->
+ *   </div>
  */
 export declare class PdfHotspotComponent {
   /** Position and size in pixels, from the page's top-left corner. */
@@ -7424,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"). */
@@ -7434,8 +7497,12 @@ export declare class PdfHotspotComponent {
   /** The applied signature (data URL), shown when `state` is `signed`. */
   readonly image: import("@angular/core").InputSignal<string | null>;
   readonly imageAlt: import("@angular/core").InputSignal<string>;
+  /** The CSS scale factor an ancestor applies (`transform: scale(s)`); keeps the touch tap area at least 44px on screen. Invalid values count as 1. */
+  readonly scale: import("@angular/core").InputSignal<number>;
   /** The ready button was clicked. */
   readonly activate: import("@angular/core").OutputEmitterRef<void>;
+  /** `--ph-scale` value, or null (no property at all) for scale 1 and invalid values. */
+  protected readonly _scaleVar: import("@angular/core").Signal<string | null>;
   protected readonly fontSize: import("@angular/core").Signal<number>;
   static ɵfac: i0.ɵɵFactoryDeclaration<PdfHotspotComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<PdfHotspotComponent, "ui-pdf-hotspot", never, {
@@ -7494,6 +7561,11 @@ export declare class PdfHotspotComponent {
       "required": false;
       "isSignal": true;
     };
+    "scale": {
+      "alias": "scale";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "activate": "activate";
   }, never, never, true, never>;
@@ -7533,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. */