@forgeroute/ui 0.4.9 → 0.4.10

package/types/forgeroute-ui.d.ts

@@ -578,7 +578,7 @@ export declare class ColumnFilterComponent {
   cancel(): void;
   clear(): void;
   onDocumentClick(_event: Event): void;
-  onEscape(): void;
+  onEscape(event?: Event): void;
   onArrow(event: Event, dir: 1 | -1): void;
   /**
    * Places the fixed dropdown from the trigger's viewport rect: centred under the trigger, clamped
@@ -725,7 +725,7 @@ export declare class MoreMenuComponent {
   onDocumentClick(): void;
   /** A touch or mouse press anywhere outside the menu closes it (more reliable than a click on phones: iOS does not send clicks for plain page areas). */
   onDocumentPointerDown(event: Event): void;
-  onEscape(): void;
+  onEscape(event?: Event): void;
   onArrow(event: Event, dir: 1 | -1): void;
   /** Visible top/bottom of the nearest scrolling ancestor, clipped to the viewport. */
   private _visibleBounds;
@@ -961,7 +961,7 @@ 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<"sm" | "default">;
+  readonly size: import("@angular/core").InputSignal<"default" | "sm">;
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
@@ -1909,7 +1909,7 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   readonly title: import("@angular/core").InputSignal<string>;
   readonly description: import("@angular/core").InputSignal<string>;
   readonly maxWidth: import("@angular/core").InputSignal<string>;
-  readonly bodyOverflow: import("@angular/core").InputSignal<"auto" | "hidden" | "visible">;
+  readonly bodyOverflow: import("@angular/core").InputSignal<"hidden" | "auto" | "visible">;
   /** `data-testid` of the dialog element itself (the host `<ui-modal>` is always in the page, the dialog only while open). None when empty. */
   readonly dialogTestId: import("@angular/core").InputSignal<string>;
   /** Hides the header X button (e.g. while a request is running). Escape and a backdrop click still close unless `closable` is false. */
@@ -2809,6 +2809,8 @@ export interface StepperStep {
   selectable?: boolean;
 }
 export type StepperOrientation = 'horizontal' | 'vertical';
+/** Viewport width below which a `compact` stepper shows its summary: 'sm' (480px) | 'md' (768px) | 'lg' (1024px) or a pixel number. */
+export type StepperCompactBreakpoint = 'sm' | 'md' | 'lg' | number;
 /**
  * Step indicator for wizards, onboarding flows and progress timelines. The state of every step comes from the order of
  * `steps` and the key in `current`: steps before it are complete, it is current, steps after it are upcoming.
@@ -2855,6 +2857,22 @@ export type StepperOrientation = 'horizontal' | 'vertical';
  * on the left). Long labels wrap. At <= 480px a horizontal stepper with `labelsOnSmallScreens="current"` (default) shows
  * only the current step's label (the others stay in the accessible name); `"all"` keeps them. Touch devices and phones
  * get >= 44px tall step buttons. The connector transition honours `prefers-reduced-motion`.
+ *
+ * Wide / responsive headers (all optional, default off, nothing changes without them):
+ *  - `scrollable`: the step list sits in an `overflow-x: auto` region with 4px top / bottom padding so focus rings are not clipped.
+ *  - `minStepWidth` (CSS length, e.g. `10.5rem`): horizontal only; the list gets `min-width: calc(<step count> * <minStepWidth>)`, so with
+ *    `scrollable` it scrolls sideways instead of breaking labels mid-word. The page-level `max-width` / centring stays the host's job.
+ *  - `<img stepper-leading>` (any element with the `stepper-leading` attribute) + `leadingWidth` (CSS length): a logo shown at the start of a
+ *    horizontal stepper, vertically centred and absolutely positioned, so the steps stay centred; the steps start at `leadingWidth + 1rem`.
+ *    Hidden in the compact summary and in vertical orientation.
+ *  - `compact` (`'sm' | 'md' | 'lg'` or a pixel number; default null = never): below that viewport width (a width exactly at it is NOT below)
+ *    the list is hidden (`display: none`, so it leaves the accessibility tree) and a summary is shown instead: the current step's label
+ *    (semibold, large, in `accentColor` when set) with "n / m" at the right, and a `ui-progress-bar` (`aria-label` "Step n of m: <label>").
+ *    At / above the breakpoint the summary is hidden. Without a current step the summary reads "0 / m".
+ *
+ *   <ui-stepper [steps]="steps" [current]="key" [scrollable]="true" minStepWidth="10.5rem" leadingWidth="7.5rem" compact="md" accentColor="#f97316">
+ *     <img stepper-leading src="logo.svg" alt="Acme" />
+ *   </ui-stepper>
  */
 export declare class StepperComponent {
   /** The steps in order. Keys must be unique. */
@@ -2877,9 +2895,29 @@ export declare class StepperComponent {
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Horizontal, <= 480px: show only the current step's label (`'current'`, default) or every label (`'all'`). */
   readonly labelsOnSmallScreens: import("@angular/core").InputSignal<"all" | "current">;
+  /** CSS length (e.g. `10.5rem`): horizontal only - the list gets `min-width: calc(<step count> * <value>)`. Empty (default) = no minimum. */
+  readonly minStepWidth: import("@angular/core").InputSignal<string>;
+  /** true = the list scrolls sideways (`overflow-x: auto`, 4px top / bottom padding so focus rings are not clipped) instead of squeezing. Default false. */
+  readonly scrollable: import("@angular/core").InputSignal<boolean>;
+  /** CSS length: width reserved for the `[stepper-leading]` element (a logo); the steps start at this width + 1rem. Empty = no leading area. */
+  readonly leadingWidth: import("@angular/core").InputSignal<string>;
+  /** Below this viewport width ('sm' 480 | 'md' 768 | 'lg' 1024 | pixels) the list is replaced by a summary (label, "n / m", progress bar). null (default) = never. */
+  readonly compact: import("@angular/core").InputSignal<StepperCompactBreakpoint | null>;
   /** Emits the key of an activated selectable step that was not already current (after `current` was updated). */
   readonly stepClick: import("@angular/core").OutputEmitterRef<string>;
+  private readonly _win;
+  private readonly _narrow;
+  /** True when `compact` is a pixel number and the viewport is below it (tokens use CSS media queries instead). */
+  protected readonly compactPx: import("@angular/core").Signal<boolean>;
   private readonly _id;
+  constructor();
+  protected readonly olMinWidth: import("@angular/core").Signal<string | null>;
+  protected readonly summary: import("@angular/core").Signal<{
+    n: number;
+    m: number;
+    label: string;
+    aria: string;
+  }>;
   protected readonly rows: import("@angular/core").Signal<{
     step: StepperStep;
     index: number;
@@ -2953,10 +2991,30 @@ export declare class StepperComponent {
       "required": false;
       "isSignal": true;
     };
+    "minStepWidth": {
+      "alias": "minStepWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "scrollable": {
+      "alias": "scrollable";
+      "required": false;
+      "isSignal": true;
+    };
+    "leadingWidth": {
+      "alias": "leadingWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "compact": {
+      "alias": "compact";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "current": "currentChange";
     "stepClick": "stepClick";
-  }, never, never, true, never>;
+  }, never, ["[stepper-leading]"], true, never>;
 }
 /** One weekday of the schedule. `open` / `close` are `HH:mm`; `open2` / `close2` are the optional second shift (split shift). */
 export interface BusinessHoursDay {
@@ -3448,13 +3506,19 @@ 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" | "ghost" | "ghost-start" | "danger" | "link" | "warning" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "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' }`). */
   readonly queryParams: import("@angular/core").InputSignal<Record<string, unknown> | null>;
   /** Fragment (hash) of the `routerLink`, without the `#` (e.g. `'billing'` -> `/settings#billing`). */
   readonly fragment: import("@angular/core").InputSignal<string | null>;
+  /**
+   * Router navigation state of the `routerLink` (the `history.state` of the page it opens), e.g. `{ returnTo: '/compliance' }` so the
+   * target page can offer a "Back" link. Ignored without `routerLink`. Middle-click / open-in-new-tab open the plain href, which carries
+   * no state (the target page then falls back to its default back target).
+   */
+  readonly state: import("@angular/core").InputSignal<Record<string, unknown> | null>;
   /**
    * Renders a plain `<a href>` instead of a button: for `mailto:`, `tel:`, `sms:`, `https://…` and relative URLs (use with
    * `variant="link"` for an inline text link). The browser handles the click, so middle-click, copy-link and open-in-new-tab work and
@@ -3463,16 +3527,32 @@ export declare class ButtonComponent {
    */
   readonly href: import("@angular/core").InputSignal<string | null>;
   /** Where to open the `href` (`_blank` = a new tab). */
-  readonly target: import("@angular/core").InputSignal<"_blank" | "_self" | "_parent" | "_top" | null>;
+  readonly target: import("@angular/core").InputSignal<"_self" | "_blank" | "_parent" | "_top" | null>;
   /** `rel` of the `href` link. A `_blank` target always gets `noopener noreferrer` added. */
   readonly rel: import("@angular/core").InputSignal<string | null>;
   /** The href when it is allowed (http, https, mailto, tel, sms or a relative URL), else null. */
   protected readonly _safeHref: import("@angular/core").Signal<string | null>;
   protected readonly _rel: import("@angular/core").Signal<string | null>;
+  /**
+   * A shorter text for narrow screens (e.g. content "Previous", `shortLabel="Back"`). Below `shortBelow` the button shows this text instead of
+   * its content. Accessibility: the projected (long) content stays in the page, only visually hidden, so the accessible name is always the
+   * long text - the short text is `aria-hidden` and never read twice; an explicit `ariaLabel` still wins. Empty (default) = the content is
+   * rendered exactly as before. Meant for text content (icons inside the content are hidden together with it).
+   */
+  readonly shortLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Where `shortLabel` applies: a library token `'sm'` (480px) / `'md'` (768px) / `'lg'` (1024px), or a pixel number (e.g. `640`). The short text
+   * shows when the viewport is narrower than this; from the width itself the long text shows (`640`: >= 640px long, < 640px short, like a
+   * `min-width: 640px` switch). Tokens are pure CSS; a number is tracked with `matchMedia`. Default `'md'`.
+   */
+  readonly shortBelow: import("@angular/core").InputSignal<number | "sm" | "md" | "lg">;
+  /** Classes of the two label spans: the token class, or `btn-sl-narrow` while a pixel breakpoint is active. */
+  protected readonly _slClass: import("@angular/core").Signal<string>;
+  private readonly _narrow;
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
-  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
-  readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
+  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -3481,6 +3561,7 @@ export declare class ButtonComponent {
   readonly ariaPressed: import("@angular/core").InputSignal<boolean | undefined>;
   /** Id of the element that describes this button (an error or hint rendered next to it), e.g. `<ui-error errorId="x">`. Absent when empty. */
   readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
+  constructor();
   _footerLeft?: string;
   _footerRight?: string;
   static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
@@ -3505,6 +3586,11 @@ export declare class ButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "state": {
+      "alias": "state";
+      "required": false;
+      "isSignal": true;
+    };
     "href": {
       "alias": "href";
       "required": false;
@@ -3520,6 +3606,16 @@ export declare class ButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "shortLabel": {
+      "alias": "shortLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "shortBelow": {
+      "alias": "shortBelow";
+      "required": false;
+      "isSignal": true;
+    };
     "color": {
       "alias": "color";
       "required": false;
@@ -4000,7 +4096,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" | "tel" | "email" | "password" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "tel" | "password" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -4009,7 +4105,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" | "tel" | "search" | "email" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -4039,6 +4135,14 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * phone formatting runs first and the formatter then sees its result.
    */
   readonly formatter: import("@angular/core").InputSignal<((raw: string) => string) | undefined>;
+  /**
+   * Whole numbers only (default off). Every typed or pasted value is cut at its first `.`, `e` or `E` (`2.7` -> `2`, `1e1` -> `1`, `12` stays),
+   * the same filter as cremo's `wholeNumber`. It runs after the phone formatting and before a host `formatter`. It also picks the numeric
+   * on-screen keyboard (`inputmode="numeric"`), the native `step` 1 and `maxDecimals` 0 for `type="number"` - each only while the host has not
+   * set `inputmode` / `step` / `maxDecimals` itself. Values the host writes (`writeValue`) are shown as they are (a decimal there still fails
+   * the 0-decimals rule).
+   */
+  readonly integer: import("@angular/core").InputSignal<boolean>;
   /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
   /** Emits the new value when the USER changes it (typing, paste, autofill) - the same value the form control receives. Not emitted for values the host writes. */
@@ -4192,6 +4296,11 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "integer": {
+      "alias": "integer";
+      "required": false;
+      "isSignal": true;
+    };
     "showErrors": {
       "alias": "showErrors";
       "required": false;
@@ -5377,7 +5486,7 @@ export declare class DropdownComponent {
   readonly loader: import("@angular/core").InputSignal<(() => Promise<DropdownItem[]>) | null>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly activeValue: import("@angular/core").InputSignal<string>;
-  readonly variant: import("@angular/core").InputSignal<"button" | "badge">;
+  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
@@ -5489,6 +5598,10 @@ export declare class DropdownComponent {
  *  - `ariaLabel` (or `ariaLabelledby`): the form's name. A named form is a landmark, so give it one only for a main form of the page.
  *  - The browser's own validation bubbles are off (`novalidate`): library inputs show their own messages.
  *  - `submitted` emits the submit event after the default action (a page reload) was prevented.
+ *  - `focusFirstInvalid({ scroll })`: after a failed Save, call it (e.g. `form.focusFirstInvalid()` from a `viewChild(FormComponent)`) to scroll to and focus the first
+ *    field that shows an error. It looks for `aria-invalid="true"` in DOM order (what every library input sets once it shows an error); on a
+ *    group (radio group, checkbox group, business hours) it focuses the group's first enabled control. Disabled and hidden controls are
+ *    skipped. Returns whether something was focused. `invalidFields()` returns those controls without moving focus.
  *  - Layout: the host is a block and the form inside is a plain block - it adds no spacing; put a `ui-stack` / `ui-form-section` inside.
  */
 export declare class FormComponent {
@@ -5500,6 +5613,20 @@ export declare class FormComponent {
   readonly autocomplete: import("@angular/core").InputSignal<"" | "off" | "on">;
   /** Emits the submit event (Enter in a field, or a submit button). The page is never reloaded. */
   readonly submitted: import("@angular/core").OutputEmitterRef<Event>;
+  private readonly _host;
+  private static _usable;
+  /**
+   * The native controls that currently show an error (`aria-invalid="true"`), in DOM order. A group marked invalid (radio group, checkbox
+   * group, business hours...) contributes its first enabled, visible control. Disabled and hidden controls are left out.
+   */
+  invalidFields(): HTMLElement[];
+  /**
+   * Scrolls the first invalid field (see `invalidFields`) to the middle of the screen and focuses it without a second scroll.
+   * `scroll: false` only focuses. Returns false (and does nothing) when no field is invalid.
+   */
+  focusFirstInvalid(options?: {
+    scroll?: boolean;
+  }): boolean;
   protected onSubmit(event: Event): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "ui-form", never, {
@@ -5557,7 +5684,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 | "all" | "2" | "3">;
+  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, {
@@ -6292,12 +6419,12 @@ export declare class ChipGroupComponent {
   /** Space between each chip. */
   readonly gap: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   /** Space above the chip group. */
-  readonly spaceAbove: import("@angular/core").InputSignal<"sm" | "md" | "none">;
+  readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
-  readonly spaceBelow: import("@angular/core").InputSignal<"sm" | "md" | "none">;
-  protected readonly _gap: import("@angular/core").Signal<"12px" | "6px" | "8px">;
-  protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "12px" | "6px">;
-  protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "12px" | "6px">;
+  readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
+  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>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ChipGroupComponent, "ui-chip-group", never, {
     "gap": {
@@ -8103,6 +8230,7 @@ export declare class PdfHotspotComponent {
  *    one row end at the same height; the default card is only as tall as its content.
  *    Use it in grid / flex cells: the spacing between cells comes from the gap, so a filled card's margin-bottom is 0 (the default card keeps 16px).
  *  - `background`: the card's background colour (any CSS colour; default white).
+ *  - `headerBackground`: the background colour of the header bar only (any CSS colour; default none, the card's own background shows). The body keeps the card's `background`, and a header-less card (`showHeader` false) has no bar to colour. A collapsible header keeps this colour on hover. Pair it with `textColor` when the colour is dark.
  *  - `textColor`: the colour of the title, subtitle, chevron and body text (any CSS colour; default: the normal slate colours). Use it for light text on a dark `background`. Text you colour yourself inside the body keeps its own colour.
  *  - The body has built-in padding (16px 18px, matching the header's 18px side padding); there is no padding input.
  *  - `collapsible` (default true): a chevron toggle and a clickable header; `[(expanded)]` is two-way.
@@ -8110,6 +8238,15 @@ export declare class PdfHotspotComponent {
  *
  * The title is shown in capitals unless `[uppercaseTitle]="false"` (then it shows as written, e.g. "Case IDs"); the casing is CSS only, so the accessible name and heading text are always the text you gave; the subtitle keeps the case you give it. The body is the default content slot. A collapsed body is removed from the tab order and from assistive tech.
  *
+ *  - `selectable` (default false) + `[(selected)]` + `selectedColor` / `selectedBackground`: a pickable card (a product card, a plan). A click anywhere on the card
+ *    toggles `selected`, except a click on or inside an interactive element (`button, a[href], input, select, textarea, label, [role=button],
+ *    [role=link], [data-no-select]`; mark any other control with `data-no-select`) and except when text inside the card is being selected
+ *    (a drag). A selected card gets `data-selected="true"` on the host, a 2px outline (`selectedColor`, default `#3b82f6`, drawn 1px inside the edge) and,
+ *    when `selectedBackground` is set, that background (instead of `background`). A selectable card shows the pointer cursor.
+ *    The card is NOT focusable and has no extra role: **a selectable card must contain its own checkbox (or radio)**, which is the keyboard and
+ *    assistive-tech path (`[checked]="selected()"` / `(change)`). With `selectable` false there is no handler, cursor or outline.
+ *    (A click on a collapsible header outside its controls still collapses the card as before.)
+ *
  *   <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>
@@ -8135,6 +8272,8 @@ export declare class DetailCardComponent {
   readonly subtitle: import("@angular/core").InputSignal<string>;
   /** Card background as any CSS colour (`#f8fafc`, `var(--surface)` …). Empty = white. */
   readonly background: import("@angular/core").InputSignal<string>;
+  /** Background colour of the header bar only, as any CSS colour (`#eaf3ff`, `var(--surface-2)` …). Empty = the header has no colour of its own (the card background shows). The body is not affected. */
+  readonly headerBackground: import("@angular/core").InputSignal<string>;
   /** Text colour as any CSS colour (`#fff`, `var(--on-dark)` …). Empty = the default colours. Colours the title, subtitle, chevron and body text. */
   readonly textColor: import("@angular/core").InputSignal<string>;
   /** false = no header at all (no title, edit button, toggle or divider): the card is only the body, always open. */
@@ -8155,10 +8294,20 @@ export declare class DetailCardComponent {
   readonly editAriaLabel: import("@angular/core").InputSignal<string>;
   /** true = the card fills the height of its container (a grid cell / flex item) so sibling cards line up; the body grows. Spacing between cells comes from the gap: the filled card's margin-bottom is 0. Default false: unchanged. */
   readonly fill: import("@angular/core").InputSignal<boolean>;
+  /** true = a click on the card (outside interactive controls and text selections) toggles `selected`. The card must contain its own checkbox for keyboard / screen-reader users. Default false: no handler, cursor or outline. */
+  readonly selectable: import("@angular/core").InputSignal<boolean>;
+  /** Two-way: whether the card is selected (only shown / toggled when `selectable`). */
+  readonly selected: import("@angular/core").ModelSignal<boolean>;
+  /** CSS colour of the 2px outline of a selected card. Default `#3b82f6`. */
+  readonly selectedColor: import("@angular/core").InputSignal<string>;
+  /** CSS colour used as the card background while selected (wins over `background`). Empty = the background does not change. */
+  readonly selectedBackground: import("@angular/core").InputSignal<string>;
   /** 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;
+  /** selectable: a click on the card toggles `selected` unless it came from an interactive element or ends a text selection. */
+  onCardClick(event: Event): void;
   toggle(): void;
   /** A click on the header toggles, except on a control inside it (Edit, your own header actions, links, inputs). */
   onHeaderClick(event: Event): void;
@@ -8199,6 +8348,11 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "headerBackground": {
+      "alias": "headerBackground";
+      "required": false;
+      "isSignal": true;
+    };
     "textColor": {
       "alias": "textColor";
       "required": false;
@@ -8249,9 +8403,30 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectedColor": {
+      "alias": "selectedColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectedBackground": {
+      "alias": "selectedBackground";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "expanded": "expandedChange";
     "editClick": "editClick";
+    "selected": "selectedChange";
   }, never, ["[card-header-leading]", "[card-header]", "[card-header-action]", "*"], true, never>;
 }
 export type DividerSpace = 'none' | 'sm' | 'md' | 'lg';
@@ -8790,6 +8965,7 @@ export type StackJustify = 'start' | 'center' | 'end' | 'between';
  *  - `align`: start | center | end | stretch (cross axis, default stretch).
  *  - `justify`: start | center | end | between (main axis, default start).
  *  - `wrap`: let a horizontal stack wrap onto more lines (default false).
+ *  - `maxWidth` (CSS length) / `padding` (CSS padding) / `centered` (margin-inline auto): limit, pad and centre the stack. Defaults '' / '' / false = unchanged.
  *
  *   <ui-stack gap="20px">
  *     <ui-detail-card title="EMAIL"> ... </ui-detail-card>
@@ -8807,6 +8983,12 @@ export declare class StackComponent {
   readonly minHeight: import("@angular/core").InputSignal<string>;
   /** Width of the stack (any CSS length or "100%"). Empty = the normal block width. */
   readonly width: import("@angular/core").InputSignal<string>;
+  /** Maximum width of the stack (any CSS length). Empty = none. */
+  readonly maxWidth: import("@angular/core").InputSignal<string>;
+  /** Padding of the stack (any CSS padding value). Empty = none. */
+  readonly padding: import("@angular/core").InputSignal<string>;
+  /** Centre the stack horizontally (margin-inline: auto; use with `maxWidth`). */
+  readonly centered: import("@angular/core").InputSignal<boolean>;
   protected readonly gapCss: import("@angular/core").Signal<string>;
   protected readonly alignCss: import("@angular/core").Signal<string>;
   protected readonly justifyCss: import("@angular/core").Signal<string>;
@@ -8847,6 +9029,21 @@ export declare class StackComponent {
       "required": false;
       "isSignal": true;
     };
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "padding": {
+      "alias": "padding";
+      "required": false;
+      "isSignal": true;
+    };
+    "centered": {
+      "alias": "centered";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }
 export type ActionBarAlign = 'start' | 'center' | 'end' | 'between';
@@ -9287,4 +9484,328 @@ export declare class CalendarComponent {
     "moreClick": "moreClick";
   }, never, ["[calendar-summary]", "[calendar-actions]", "[calendar-summary-mobile]"], true, never>;
 }
+/**
+ * The shell of a public (not signed-in) page or wizard: an optional header, the content in a single `<main>`, an optional footer.
+ *
+ *   <ui-page maxWidth="80rem" padding="responsive" background="#f9fafb" [fillViewport]="true" [stickyHeader]="true" [stickyFooter]="true"
+ *            [ownScroll]="true" [transparent]="embed()" [focusKey]="step()">
+ *     <div page-header> ...stepper... </div>
+ *     ...the current screen...
+ *     <div page-footer> ...navigation bar... </div>
+ *   </ui-page>
+ *
+ * Inputs (all defaults leave the page plain: no limits, no padding, no sticky parts):
+ *  - `maxWidth`: CSS length of the main content area ("80rem"). Default '' = none.
+ *  - `padding`: '' (none) | 'responsive' (32px 16px 16px; 32px 24px 16px from 640px; 32px 0 16px from 1024px) | any CSS padding value.
+ *  - `centered`: centre the main area when `maxWidth` is set (default true).
+ *  - `background`: CSS colour of the page. Default '' = none.
+ *  - `fillViewport`: the page is at least one viewport high (100dvh, 100vh fallback) and the footer sticks to the bottom (default false).
+ *  - `stickyHeader` / `stickyFooter`: the header slot is `position: sticky; top: 0`, the footer slot `bottom: 0`, z-index 20 (default false).
+ *    Sticky is relative to the nearest scrolling ancestor: NO ancestor may be an overflow container (overflow other than visible), or
+ *    the bars stop sticking. When the page owns the scrolling, use `ownScroll`.
+ *  - `transparent`: embed (iframe) mode: transparent background, no minimum height, no maximum width, the padding reduced to 8px 0 16px
+ *    (only when a padding is set) and neither bar is sticky (default false).
+ *  - `ownScroll`: make the document the scroll container (html overflow auto; body and app-root overflow visible; with `transparent` also
+ *    a transparent html/body background). The previous inline values are restored when the page is destroyed (default false).
+ *  - `focusKey`: when this value CHANGES (not on the first render), the page scrolls its top into view and moves focus to a zero-height
+ *    anchor so screen readers start at the new content. Smooth scrolling follows the page CSS, instant with prefers-reduced-motion.
+ *    `focusTop()` does the same on demand.
+ *
+ * Accessibility: the content wrapper is the only `<main>`; the header and footer slots are plain divs (they are landmarks only if the
+ * host projects a `<header>` / `<footer>` / role itself).
+ */
+export declare class PageComponent {
+  readonly maxWidth: import("@angular/core").InputSignal<string>;
+  readonly padding: import("@angular/core").InputSignal<string>;
+  readonly centered: import("@angular/core").InputSignal<boolean>;
+  readonly background: import("@angular/core").InputSignal<string>;
+  readonly fillViewport: import("@angular/core").InputSignal<boolean>;
+  readonly stickyHeader: import("@angular/core").InputSignal<boolean>;
+  readonly stickyFooter: import("@angular/core").InputSignal<boolean>;
+  readonly transparent: import("@angular/core").InputSignal<boolean>;
+  readonly ownScroll: import("@angular/core").InputSignal<boolean>;
+  readonly focusKey: import("@angular/core").InputSignal<unknown>;
+  private readonly anchor;
+  private readonly doc;
+  private readonly injector;
+  private readonly browser;
+  protected readonly backgroundCss: import("@angular/core").Signal<string | null>;
+  protected readonly maxWidthCss: import("@angular/core").Signal<string | null>;
+  protected readonly paddingCss: import("@angular/core").Signal<string | null>;
+  private scrollSaved;
+  private bgSaved;
+  private focusInitialised;
+  private lastFocusKey;
+  constructor();
+  /** Scrolls the top of the page into view and moves focus to the (invisible) top anchor. */
+  focusTop(): void;
+  private save;
+  private applyScroll;
+  private releaseScroll;
+  private applyBackground;
+  private releaseBackground;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PageComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PageComponent, "ui-page", never, {
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "padding": {
+      "alias": "padding";
+      "required": false;
+      "isSignal": true;
+    };
+    "centered": {
+      "alias": "centered";
+      "required": false;
+      "isSignal": true;
+    };
+    "background": {
+      "alias": "background";
+      "required": false;
+      "isSignal": true;
+    };
+    "fillViewport": {
+      "alias": "fillViewport";
+      "required": false;
+      "isSignal": true;
+    };
+    "stickyHeader": {
+      "alias": "stickyHeader";
+      "required": false;
+      "isSignal": true;
+    };
+    "stickyFooter": {
+      "alias": "stickyFooter";
+      "required": false;
+      "isSignal": true;
+    };
+    "transparent": {
+      "alias": "transparent";
+      "required": false;
+      "isSignal": true;
+    };
+    "ownScroll": {
+      "alias": "ownScroll";
+      "required": false;
+      "isSignal": true;
+    };
+    "focusKey": {
+      "alias": "focusKey";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[page-header]", "*", "[page-footer]"], true, never>;
+}
+/**
+ * A block wrapper whose content fades in (opacity 0 to 1) when it is created and again whenever `key` changes.
+ * The projected content is NOT re-created: the animation restarts by alternating between two identical keyframes.
+ *
+ *   <ui-fade [key]="step()"> ...the current screen... </ui-fade>
+ *
+ *  - `key`: any value; a change restarts the fade (default undefined).
+ *  - `duration`: milliseconds (default 300).
+ *  - `disabled`: no animation at all (default false).
+ * With prefers-reduced-motion: reduce nothing animates.
+ */
+export declare class FadeComponent {
+  readonly key: import("@angular/core").InputSignal<unknown>;
+  readonly duration: import("@angular/core").InputSignal<number>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  protected readonly odd: import("@angular/core").WritableSignal<boolean>;
+  private first;
+  private last;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<FadeComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FadeComponent, "ui-fade", never, {
+    "key": {
+      "alias": "key";
+      "required": false;
+      "isSignal": true;
+    };
+    "duration": {
+      "alias": "duration";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export type ShowBreakpoint = 'sm' | 'md' | 'lg' | number;
+/**
+ * Responsive visibility wrapper (display: block when visible, display: none when hidden; never `display: contents`).
+ *
+ *   <ui-show from="md"> desktop only </ui-show>        visible at width >= 768px
+ *   <ui-show below="md"> phone/tablet only </ui-show>  visible at width < 768px
+ *   <ui-show [from]="640" [below]="1024"> a range </ui-show>
+ *
+ *  - `from`: visible only at viewport width >= from. `below`: visible only at width < below. Both = a range; none = always visible.
+ *  - Breakpoints are the tokens 'sm' (480px) | 'md' (768px) | 'lg' (1024px) or a pixel number.
+ *
+ * Difference: TOKEN breakpoints are pure CSS media queries (no JavaScript, correct on first paint and when server rendered).
+ * NUMERIC breakpoints use `matchMedia` with a signal that updates on change (the listener is removed on destroy); without
+ * `matchMedia` (server rendering) the content counts as visible. The two kinds can be mixed. Hidden content stays in the DOM.
+ */
+export declare class ShowComponent {
+  readonly from: import("@angular/core").InputSignal<ShowBreakpoint | null>;
+  readonly below: import("@angular/core").InputSignal<ShowBreakpoint | null>;
+  private readonly win;
+  protected readonly fromToken: import("@angular/core").Signal<"sm" | "md" | "lg" | null>;
+  protected readonly belowToken: import("@angular/core").Signal<"sm" | "md" | "lg" | null>;
+  protected readonly fromMatch: import("@angular/core").WritableSignal<boolean>;
+  protected readonly belowMatch: import("@angular/core").WritableSignal<boolean>;
+  constructor();
+  private watch;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ShowComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ShowComponent, "ui-show", never, {
+    "from": {
+      "alias": "from";
+      "required": false;
+      "isSignal": true;
+    };
+    "below": {
+      "alias": "below";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * Small formatting helpers shared by apps (money and postal addresses).
+ */
+export interface FormatCurrencyOptions {
+  /** ISO 4217 code. Default `'USD'`. */
+  currency?: string;
+  /** BCP 47 locale. Default `'en-US'`. */
+  locale?: string;
+  /** Thousands separators. Default `true`; `false` gives `$1605.00` (like a plain `'$' + n.toFixed(2)`). */
+  grouping?: boolean;
+  /** Digits after the decimal point. Default 2. */
+  decimals?: number;
+}
+/**
+ * Formats an amount as money: `formatCurrency(1605)` -> `$1,605.00`, `formatCurrency(-5)` -> `-$5.00`.
+ * `null`, `undefined`, `NaN`, infinities and text that is not a number count as 0 (a numeric string such as `'12.5'` is parsed with
+ * `parseFloat`, like cremo's `formatPrice`). `{ grouping: false }` reproduces `'$' + price.toFixed(2)` exactly (`$1605.00`).
+ * An amount that rounds to zero is shown without a minus sign (`-0.001` -> `$0.00`).
+ */
+export declare function formatCurrency(value: number | string | null | undefined, options?: FormatCurrencyOptions): string;
+export interface AddressParts {
+  street?: string | null;
+  apt?: string | null;
+  city?: string | null;
+  state?: string | null;
+  zip?: string | null;
+}
+export interface FormatAddressOptions {
+  /** Joiner between the parts. Default `', '`. */
+  separator?: string;
+  /**
+   * `'comma'` (default): every non-empty part joined with the separator - `Street, Apt 4, City, ST, 12345` (cremo's next-of-kin and
+   * informant address). `'usa'`: the postal layout - `Street, Apt 4, City, ST 12345`: the apartment is prefixed with `Apt ` and the
+   * zip follows the state with a space (cremo's summary `joinAddress`); a state or city alone is still shown.
+   */
+  style?: 'comma' | 'usa';
+}
+/**
+ * Joins the non-empty, trimmed address parts in the order street, apt, city, state, zip. See `FormatAddressOptions.style`.
+ * `formatAddress({ street: '1 Main', city: 'Austin', state: 'TX', zip: '78701' })` -> `1 Main, Austin, TX, 78701`;
+ * with `{ style: 'usa' }` -> `1 Main, Austin, TX 78701`.
+ */
+export declare function formatAddress(parts: AddressParts, options?: FormatAddressOptions): string;
+/**
+ * Starts the browser download of a blob under `fileName`. The anchor is attached to the page while it is clicked (Firefox ignores a click on
+ * a detached anchor) and the object URL is revoked 1000 ms later (Safari reads it asynchronously, so an immediate revoke can cancel the
+ * download). A no-op without a DOM (server-side rendering).
+ */
+export declare function downloadBlob(blob: Blob, fileName: string): void;
+/**
+ * A lightbox: a `ui-modal` that shows a `ui-image-gallery` with a Close button in the footer.
+ *
+ *   <ui-image-gallery-dialog [(open)]="galleryOpen" [images]="images" title="Photos of the urn" galleryLabel="Urn photos"
+ *     dialogTestId="gallery-dialog" closeTestId="gallery-close" />
+ *
+ *  - `open` (two-way): shown while true. Escape, a click on the backdrop and the footer Close button set it to false (the header X is
+ *    hidden, the footer button replaces it). Focus returns to the element that opened the dialog (modal behaviour).
+ *  - `images` (`GalleryImage[]`), `index` (two-way): the shown picture; it resets to 0 every time the dialog opens.
+ *  - `title`, `dialogTestId` (on the dialog element), `closeLabel` (default "Close"), `closeTestId` (on the Close button), `maxWidth`
+ *    (default `56rem`), `galleryLabel` (accessible name of the gallery group, default "Image gallery").
+ *  - The gallery has `autofocus` on: the dialog opens with focus on "Next image" so the arrow keys work at once (touch screens focus the dialog itself).
+ *  - The gallery is only created while the dialog is open, so closed dialogs load no pictures.
+ */
+export declare class ImageGalleryDialogComponent {
+  /** Two-way: whether the dialog is shown. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  readonly images: import("@angular/core").InputSignal<GalleryImage[]>;
+  /** Two-way: the shown picture. Reset to 0 whenever the dialog opens. */
+  readonly index: import("@angular/core").ModelSignal<number>;
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** `data-testid` of the dialog element. */
+  readonly dialogTestId: import("@angular/core").InputSignal<string>;
+  /** Text of the footer Close button. */
+  readonly closeLabel: import("@angular/core").InputSignal<string>;
+  /** `data-testid` of the footer Close button (on the `ui-button` host); none when empty. */
+  readonly closeTestId: import("@angular/core").InputSignal<string>;
+  /** Max width of the dialog (any CSS length). */
+  readonly maxWidth: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the gallery group. */
+  readonly galleryLabel: import("@angular/core").InputSignal<string>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<ImageGalleryDialogComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ImageGalleryDialogComponent, "ui-image-gallery-dialog", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "images": {
+      "alias": "images";
+      "required": false;
+      "isSignal": true;
+    };
+    "index": {
+      "alias": "index";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "dialogTestId": {
+      "alias": "dialogTestId";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeTestId": {
+      "alias": "closeTestId";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "galleryLabel": {
+      "alias": "galleryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "open": "openChange";
+    "index": "indexChange";
+  }, never, never, true, never>;
+}
 export type { CalendarDay, CalendarRange, CalendarViewMode };