@forgeroute/ui 0.4.8 → 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;
@@ -2495,6 +2495,8 @@ export interface CheckboxOption {
   disabled?: boolean;
   /** `data-testid` of this option's native checkbox (e.g. for end-to-end tests); none when omitted. */
   testId?: string;
+  /** `data-testid` of this option's label text; none when omitted. */
+  labelTestId?: string;
 }
 export declare class CheckboxComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -2502,6 +2504,8 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** `data-testid` of the native checkbox (single mode), for end-to-end tests; none when empty. (Group options have their own `testId`.) */
   readonly testId: import("@angular/core").InputSignal<string>;
+  /** `data-testid` of the label text (single mode), e.g. to find a product name that is also its checkbox label; none when empty. */
+  readonly labelTestId: import("@angular/core").InputSignal<string>;
   /**
    * 1-6 makes the label text a real heading for screen readers (`role="heading"` + `aria-level`) while it stays the checkbox's label and
    * clicking it still toggles the box - e.g. a product name that is both the heading of its card and the label of its checkbox.
@@ -2610,6 +2614,11 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
       "required": false;
       "isSignal": true;
     };
+    "labelTestId": {
+      "alias": "labelTestId";
+      "required": false;
+      "isSignal": true;
+    };
     "headingLevel": {
       "alias": "headingLevel";
       "required": false;
@@ -2792,8 +2801,16 @@ export interface StepperStep {
    * mark every step the user has already completed `complete: true`.
    */
   complete?: boolean;
+  /**
+   * `false` = never a button, even when the step is complete and the stepper is `clickable`: it is plain text and keeps its normal look
+   * (no dimming, not announced "disabled"). Use it for a step the user has finished but may not jump back or forward to. Omitted / `true`
+   * = the normal rule (a complete step is a button when `clickable`). It cannot make an upcoming step selectable; use `linear`.
+   */
+  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.
@@ -2818,6 +2835,9 @@ export type StepperOrientation = 'horizontal' | 'vertical';
  *
  *   steps = all.map((s, i) => ({ ...s, complete: i <= furthestReached }))
  *
+ * A step with `selectable: false` is never a button (finished, but not a place to go back to) and looks normal; `disabled` is for a step
+ * that is switched off (dimmed, announced "disabled").
+ *
  * Interaction (`clickable`): a selectable step is a native `<button>` (Tab / Enter / Space, visible focus ring). With
  * `linear` (default) only complete steps are selectable, so the user can go back but not skip ahead; with
  * `[linear]="false"` every non-disabled step is. The current step is never a button (you are already there): it is
@@ -2837,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. */
@@ -2853,13 +2889,35 @@ export declare class StepperComponent {
   readonly accentColor: import("@angular/core").InputSignal<string>;
   /** Colour (any CSS colour) of complete steps and the filled connectors, when it should differ from the current step's accent (e.g. green checks, orange current step). */
   readonly completeColor: import("@angular/core").InputSignal<string>;
+  /** true = the current step's label is drawn in the accent colour as well as its indicator. Default false: the label keeps the dark text colour. */
+  readonly accentLabels: import("@angular/core").InputSignal<boolean>;
   /** Accessible name of the list. */
   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;
@@ -2918,6 +2976,11 @@ export declare class StepperComponent {
       "required": false;
       "isSignal": true;
     };
+    "accentLabels": {
+      "alias": "accentLabels";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "ariaLabel";
       "required": false;
@@ -2928,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 {
@@ -3430,6 +3513,12 @@ export declare class ButtonComponent {
   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
@@ -3444,9 +3533,25 @@ export declare class ButtonComponent {
   /** 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<"sm" | "md" | "xs" | "lg">;
+  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>;
@@ -3456,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>;
@@ -3480,6 +3586,11 @@ export declare class ButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "state": {
+      "alias": "state";
+      "required": false;
+      "isSignal": true;
+    };
     "href": {
       "alias": "href";
       "required": false;
@@ -3495,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;
@@ -4014,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. */
@@ -4167,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;
@@ -4313,7 +4447,7 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
   }, never, never, true, never>;
 }
 export type TextSize = 'sm' | 'md' | 'lg';
-export type TextTone = 'default' | 'muted';
+export type TextTone = 'default' | 'muted' | 'accent';
 export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 /**
  * Plain text that keeps its line breaks: a note, a message, an address, a pasted block. It is page content, not a form control —
@@ -4340,6 +4474,8 @@ export declare class TextComponent {
   readonly text: import("@angular/core").InputSignal<string | null | undefined>;
   readonly size: import("@angular/core").InputSignal<TextSize>;
   readonly tone: import("@angular/core").InputSignal<TextTone>;
+  /** Any CSS colour for the text (e.g. the brand colour). Wins over `tone`; empty = the tone's colour. `tone="accent"` uses `--ui-accent` (default blue). */
+  readonly color: import("@angular/core").InputSignal<string>;
   /** Snippet(s) of `text` to show in bold. Empty / not found = no change. */
   readonly strong: import("@angular/core").InputSignal<string | string[] | null | undefined>;
   /** The text cut into plain and bold pieces; empty when nothing is to be bold (then the text renders as a single text node). */
@@ -4368,6 +4504,11 @@ export declare class TextComponent {
       "required": false;
       "isSignal": true;
     };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
     "strong": {
       "alias": "strong";
       "required": false;
@@ -5457,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 {
@@ -5468,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, {
@@ -6855,6 +7014,8 @@ export declare class ImageComponent {
   readonly height: import("@angular/core").InputSignal<string>;
   readonly maxWidth: import("@angular/core").InputSignal<string>;
   readonly maxHeight: import("@angular/core").InputSignal<string>;
+  /** Minimum height of the image box (any CSS length). Empty = none. */
+  readonly minHeight: import("@angular/core").InputSignal<string>;
   /** CSS aspect-ratio, e.g. "4 / 3". Reserves the space while the image loads. */
   readonly aspectRatio: import("@angular/core").InputSignal<string>;
   readonly radius: import("@angular/core").InputSignal<ImageRadius>;
@@ -6916,6 +7077,11 @@ export declare class ImageComponent {
       "required": false;
       "isSignal": true;
     };
+    "minHeight": {
+      "alias": "minHeight";
+      "required": false;
+      "isSignal": true;
+    };
     "aspectRatio": {
       "alias": "aspectRatio";
       "required": false;
@@ -6989,11 +7155,19 @@ export declare class ImageGalleryComponent {
   readonly maxHeight: import("@angular/core").InputSignal<string>;
   readonly fit: import("@angular/core").InputSignal<"contain" | "cover">;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * true = when the gallery sits in a `ui-modal`, the dialog opens with focus on the gallery's "Next image" button (or "Previous image" when
+   * Next is disabled at the last picture of a non-looping gallery), so the arrow keys work at once without a Tab. With a single picture there are
+   * no buttons, so the dialog keeps its normal initial focus. Default false: unchanged.
+   */
+  readonly autofocus: import("@angular/core").InputSignal<boolean>;
   protected readonly count: import("@angular/core").Signal<number>;
   /** `index` clamped into the list. */
   protected readonly position: import("@angular/core").Signal<number>;
   protected readonly current: import("@angular/core").Signal<GalleryImage>;
   protected readonly currentAlt: import("@angular/core").Signal<string>;
+  protected readonly autofocusNext: import("@angular/core").Signal<boolean>;
+  protected readonly autofocusPrev: import("@angular/core").Signal<boolean>;
   protected readonly canPrev: import("@angular/core").Signal<boolean>;
   protected readonly canNext: import("@angular/core").Signal<boolean>;
   protected readonly announcement: import("@angular/core").Signal<string>;
@@ -7048,6 +7222,11 @@ export declare class ImageGalleryComponent {
       "required": false;
       "isSignal": true;
     };
+    "autofocus": {
+      "alias": "autofocus";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "index": "indexChange";
   }, never, never, true, never>;
@@ -8049,7 +8228,9 @@ export declare class PdfHotspotComponent {
  *    ("Edit informant information") when the visible label alone is ambiguous; it should contain the visible label.
  *  - `fill`: the card stretches to the height of its container (a grid cell or flex item) and its body grows, so cards in
  *    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.
@@ -8057,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>
@@ -8082,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. */
@@ -8094,14 +8286,28 @@ export declare class DetailCardComponent {
   readonly showEdit: import("@angular/core").InputSignal<boolean>;
   readonly editLabel: import("@angular/core").InputSignal<string>;
   readonly editClick: import("@angular/core").OutputEmitterRef<void>;
+  /** `data-testid` of the built-in Edit button (on the `ui-button` host); none when empty. */
+  readonly editTestId: import("@angular/core").InputSignal<string>;
+  /** false = no pencil icon in the Edit button (text only). Default true: unchanged. */
+  readonly editIcon: import("@angular/core").InputSignal<boolean>;
   /** Accessible name of the Edit button, e.g. "Edit informant information". Empty = the visible `editLabel`. */
   readonly editAriaLabel: import("@angular/core").InputSignal<string>;
-  /** true = the card fills the height of its container so sibling cards line up; the body grows. Default false: unchanged. */
+  /** 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;
@@ -8142,6 +8348,11 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "headerBackground": {
+      "alias": "headerBackground";
+      "required": false;
+      "isSignal": true;
+    };
     "textColor": {
       "alias": "textColor";
       "required": false;
@@ -8172,6 +8383,16 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "editTestId": {
+      "alias": "editTestId";
+      "required": false;
+      "isSignal": true;
+    };
+    "editIcon": {
+      "alias": "editIcon";
+      "required": false;
+      "isSignal": true;
+    };
     "editAriaLabel": {
       "alias": "editAriaLabel";
       "required": false;
@@ -8182,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';
@@ -8625,11 +8867,26 @@ export declare class ColumnsComponent {
   readonly countBelowMd: import("@angular/core").InputSignal<ColumnsCount | null>;
   /** Column count at <= 480px (falls back to `countBelowMd`, then `countBelowLg`, then `count`). */
   readonly countBelowSm: import("@angular/core").InputSignal<ColumnsCount | null>;
+  /**
+   * Mobile-first alternative to `count` + `countBelow*`: `countBase` columns on the narrowest screens (default 1), then `countFromSm` from 480px,
+   * `countFromMd` from 768px, `countFromLg` from 1024px (min-width, inclusive; each tier falls back to the next narrower one). Setting any `countFrom*`
+   * switches the grid to this mode: `count`, `countBelow*` and `collapseAt` are then ignored. Unset = unchanged.
+   *   <ui-columns [countFromMd]="2" [countFromLg]="3"> ... </ui-columns>     <!-- 1 column, 2 from 768px, 3 from 1024px -->
+   */
+  readonly countBase: import("@angular/core").InputSignal<ColumnsCount>;
+  readonly countFromSm: import("@angular/core").InputSignal<ColumnsCount | null>;
+  readonly countFromMd: import("@angular/core").InputSignal<ColumnsCount | null>;
+  readonly countFromLg: import("@angular/core").InputSignal<ColumnsCount | null>;
   protected readonly cols: import("@angular/core").Signal<ColumnsCount>;
   private static clampTier;
   protected readonly colsLg: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly colsMd: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly colsSm: import("@angular/core").Signal<ColumnsCount | null>;
+  protected readonly fromMode: import("@angular/core").Signal<boolean>;
+  protected readonly base: import("@angular/core").Signal<ColumnsCount | null>;
+  protected readonly fromSm: import("@angular/core").Signal<ColumnsCount | null>;
+  protected readonly fromMd: import("@angular/core").Signal<ColumnsCount | null>;
+  protected readonly fromLg: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly gapCss: import("@angular/core").Signal<string>;
   protected readonly collapseClass: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsComponent, never>;
@@ -8669,6 +8926,26 @@ export declare class ColumnsComponent {
       "required": false;
       "isSignal": true;
     };
+    "countBase": {
+      "alias": "countBase";
+      "required": false;
+      "isSignal": true;
+    };
+    "countFromSm": {
+      "alias": "countFromSm";
+      "required": false;
+      "isSignal": true;
+    };
+    "countFromMd": {
+      "alias": "countFromMd";
+      "required": false;
+      "isSignal": true;
+    };
+    "countFromLg": {
+      "alias": "countFromLg";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }
 export type StackDirection = 'vertical' | 'horizontal';
@@ -8688,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>
@@ -8701,6 +8979,16 @@ export declare class StackComponent {
   readonly align: import("@angular/core").InputSignal<StackAlign>;
   readonly justify: import("@angular/core").InputSignal<StackJustify>;
   readonly wrap: import("@angular/core").InputSignal<boolean>;
+  /** Minimum height of the stack (any CSS length, e.g. "12rem"); with `justify="center"` it centres the content vertically. Empty = none. */
+  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>;
@@ -8731,6 +9019,31 @@ export declare class StackComponent {
       "required": false;
       "isSignal": true;
     };
+    "minHeight": {
+      "alias": "minHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "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';
@@ -8805,4 +9118,694 @@ export declare class ActionBarComponent {
       "isSignal": true;
     };
   }, {}, never, ["*"], true, never>;
-}
+}
+/** Pure date helpers for `ui-calendar`. Dates are plain `YYYY-MM-DD` strings and times `HH:mm`; nothing here parses a non-ISO string. */
+type CalendarViewMode = 'month' | 'week' | 'agenda';
+interface CalendarDay {
+  dateStr: string;
+  dayNum: number;
+  isToday: boolean;
+  isCurrentMonth: boolean;
+  isWeekend: boolean;
+}
+interface CalendarRange {
+  view: CalendarViewMode;
+  /** First visible date, `YYYY-MM-DD`. */
+  start: string;
+  /** Last visible date (inclusive), `YYYY-MM-DD`. */
+  end: string;
+  /** The date the view is anchored on. */
+  anchor: Date;
+}
+declare const WEEK_DAY_LABELS: string[];
+declare function toDateStr(d: Date): string;
+/** `YYYY-MM-DD` → local Date at midnight (ISO local form, parsed the same way in every browser). */
+declare function fromDateStr(dateStr: string): Date;
+/** The 42 cells (6 weeks, Sunday first) of the month grid containing `anchor`. */
+declare function buildMonthCells(anchor: Date, todayStr: string): CalendarDay[];
+/** The 7 days (Sunday first) of the week containing `anchor`. */
+declare function buildWeekDays(anchor: Date, todayStr: string): CalendarDay[];
+/** Month view: the whole 6-week grid. Week view: the 7 days. Agenda view: the anchor month and the next one. */
+declare function rangeFor(view: CalendarViewMode, anchor: Date, todayStr: string): CalendarRange;
+/**
+ * Anchor after pressing Previous (`-1`) / Next (`1`): a week, two months (agenda, on the 1st) or one month. A month step keeps the
+ * day of the month (clamped to the target month's length), so switching to the week view afterwards shows a sensible week.
+ */
+declare function shiftAnchor(view: CalendarViewMode, anchor: Date, direction: -1 | 1): Date;
+/** `Wednesday, October 21, 2026` — one cached formatter, used for every cell's screen-reader name. */
+declare function formatDayLabel(dateStr: string): string;
+declare function periodLabelFor(view: CalendarViewMode, anchor: Date, todayStr: string): string;
+/** `14:30` → `2:30 PM`. */
+declare function formatTime$1(time: string): string;
+declare function formatHour(h: number): string;
+/** Pixel height of one hour row in the week view. */
+declare const HOUR_HEIGHT = 60;
+/**
+ * Top offset and height (px) of a timed event in a week grid whose first row is `startHour` and last row `endHour`.
+ * The box is clamped to the visible rows (an event that starts before `startHour` or ends after the last row is cut, never drawn outside).
+ */
+declare function timedBox(startTime: string | undefined, endTime: string | undefined, startHour: number, endHour?: number): {
+  top: number;
+  height: number;
+};
+interface CalendarLane {
+  lane: number;
+  lanes: number;
+}
+/**
+ * Side-by-side lanes for events that overlap in time. Events are grouped into clusters of transitively overlapping events; inside a
+ * cluster each event takes the first free lane and every event of the cluster shares the cluster's lane count.
+ */
+declare function layoutLanes(boxes: {
+  id: string;
+  top: number;
+  height: number;
+}[]): Record<string, CalendarLane>;
+/** One thing on the calendar. The host maps its own records to this shape. */
+export interface CalendarItem {
+  /** Unique across ALL items passed in (prefix ids by source when merging lists, e.g. `task-…`, `event-…`). */
+  id: string;
+  title: string;
+  /** Local calendar day, `YYYY-MM-DD`. */
+  date: string;
+  /** `HH:mm` (24 hour). Without it (or with `allDay`) the item is an all-day item in the week view. */
+  startTime?: string;
+  endTime?: string;
+  allDay?: boolean;
+  /** Filter key; matched against `CalendarFilter.value`. */
+  type?: string;
+  /** Accent colour (left border / bar) and soft background of the chip, any CSS colour. */
+  color: string;
+  bgColor: string;
+  /** Replaces the formatted `startTime` on chips and agenda rows (e.g. a time already converted to another time zone, or "All day"). */
+  timeLabel?: string;
+  /** Small marker at the end of a month chip (e.g. `T`). */
+  tag?: string;
+  /** Extra badges on the agenda row. */
+  badges?: {
+    label: string;
+    variant: BadgeVariant;
+  }[];
+  /** Extra grey lines under the title on the agenda row (location, contact…). */
+  meta?: string[];
+  /** SVG path `d` (24x24 stroke icon) drawn before the time on month chips. */
+  iconPath?: string;
+  /** Strike the title through (e.g. a completed reminder). */
+  strike?: boolean;
+  /** Screen-reader name of the item's button; defaults to "<time> <title>". */
+  ariaLabel?: string;
+}
+export interface CalendarFilter {
+  value: string;
+  label: string;
+  color: string;
+  bgColor?: string;
+}
+export interface CalendarMoreClick {
+  /** `YYYY-MM-DD` */
+  date: string;
+  /** Every item of that day that passes the active filters, in display order. */
+  items: CalendarItem[];
+}
+export interface CalendarSlotClick {
+  /** `YYYY-MM-DD` */
+  date: string;
+  /** `HH:00` of the clicked hour row. */
+  time: string;
+}
+/**
+ * Month / week / agenda calendar. The host owns the data: it listens to `(rangeChange)`, loads that range and passes
+ * the result as `items`. The calendar owns navigation, the view switcher, type filters, layout and keyboard access.
+ *
+ *   <ui-calendar [items]="items()" [filters]="filters" [loading]="loading()" [canCreate]="canCreate()"
+ *                [(view)]="view" (rangeChange)="load($event)" (itemClick)="open($event)" (dateClick)="create($event)">
+ *     <ui-kpi-card calendar-summary ... />
+ *     <ui-button calendar-actions (click)="create()">New Event</ui-button>
+ *   </ui-calendar>
+ *
+ * Keep the state you bind (`loading`, `items`, `view` …) in signals: `rangeChange` fires during change detection on the first render,
+ * so a handler that writes a plain property would raise ExpressionChangedAfterItHasBeenChecked in dev mode.
+ *
+ * The library toast outlet (`ui-toast`) is rendered here, like in `ui-data-table`, so a page with a calendar and no table still shows
+ * `ToastService` messages.
+ *
+ * Keyboard: the month grid is a real ARIA grid whose DAY CELLS have one tab stop (roving tabindex): arrows move by day/week, Home/End jump
+ * to the start/end of the week, Enter/Space on a day creates (when `canCreate`); the item buttons inside the cells stay in the Tab order.
+ * In the week view each all-day cell and each day column has a visually hidden "+ Add" button that appears when focused; Enter/Space on it
+ * creates (all-day, or the first visible hour). The initial `view` must be one of `views`.
+ *
+ * Content slots: `[calendar-actions]` (right of the view switcher), `[calendar-summary]` (centre of the toolbar on
+ * desktop) and `[calendar-summary-mobile]` (shown instead of it on phones).
+ */
+export declare class CalendarComponent {
+  /** Everything to show in the visible range. Ids must be unique across the whole list. */
+  readonly items: import("@angular/core").InputSignal<CalendarItem[]>;
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Active view; two-way bindable. A value that is not in `views` is replaced by the first allowed view. */
+  readonly view: import("@angular/core").ModelSignal<CalendarViewMode>;
+  /** Views the switcher offers. One entry hides the switcher. */
+  readonly views: import("@angular/core").InputSignal<CalendarViewMode[]>;
+  /** Date the visible period is anchored on; two-way bindable. */
+  readonly anchorDate: import("@angular/core").ModelSignal<Date>;
+  /** Filter chips (with an "All" chip first). Empty = no filter bar. */
+  readonly filters: import("@angular/core").InputSignal<CalendarFilter[]>;
+  readonly filterLabel: import("@angular/core").InputSignal<string>;
+  /** `multi` toggles any number of types; `single` keeps at most one active (clicking the active chip clears it). */
+  readonly filterMode: import("@angular/core").InputSignal<"multi" | "single">;
+  /** Active filter values; empty = everything. Two-way bindable. */
+  readonly activeFilters: import("@angular/core").ModelSignal<string[]>;
+  readonly showFilterCounts: import("@angular/core").InputSignal<boolean>;
+  /** Whether empty days / time slots can start a new item (`dateClick` / `slotClick`). Read-only users: false. */
+  readonly canCreate: import("@angular/core").InputSignal<boolean>;
+  /** Days before today cannot start a new item. */
+  readonly disablePast: import("@angular/core").InputSignal<boolean>;
+  /** Items shown per month cell before "+N more". */
+  readonly maxVisible: import("@angular/core").InputSignal<number>;
+  /** `inline`: time and title on one line. `stacked`: time on the first line, title below it (title hidden on phones). */
+  readonly chipLayout: import("@angular/core").InputSignal<"inline" | "stacked">;
+  /** Order each day's items by start time (default). Off = keep the order the host passed them in. */
+  readonly sortByTime: import("@angular/core").InputSignal<boolean>;
+  /** First and last hour row of the week view. */
+  readonly startHour: import("@angular/core").InputSignal<number>;
+  readonly endHour: import("@angular/core").InputSignal<number>;
+  readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** Builds the screen-reader name of a month cell; default "<weekday, date>, N events". */
+  readonly dayLabelFn: import("@angular/core").InputSignal<((dateStr: string, items: CalendarItem[]) => string) | null>;
+  /** Fires on first render and whenever the view or the visible range changes: load this range, then pass `items`. */
+  readonly rangeChange: import("@angular/core").OutputEmitterRef<CalendarRange>;
+  readonly itemClick: import("@angular/core").OutputEmitterRef<CalendarItem>;
+  /** Empty day clicked (month view / all-day row) — only when `canCreate` and the day is allowed. */
+  readonly dateClick: import("@angular/core").OutputEmitterRef<string>;
+  /** Empty hour row clicked in the week view (or Enter on a day column: the first visible hour). */
+  readonly slotClick: import("@angular/core").OutputEmitterRef<CalendarSlotClick>;
+  /** "+N more" clicked in a month cell. */
+  readonly moreClick: import("@angular/core").OutputEmitterRef<CalendarMoreClick>;
+  private readonly host;
+  protected readonly weekDayLabels: string[];
+  protected readonly weekDayNames: string[];
+  protected readonly skeletonCells: number[];
+  protected readonly formatHour: typeof formatHour;
+  /** Today as `YYYY-MM-DD`; refreshed at local midnight, when the tab becomes visible again and when the user presses Today. */
+  protected readonly todayStr: import("@angular/core").WritableSignal<string>;
+  /** The month-grid day that holds the roving tab stop. */
+  protected readonly focusedDate: import("@angular/core").WritableSignal<string | null>;
+  private lastRangeKey;
+  protected readonly hours: import("@angular/core").Signal<number[]>;
+  protected readonly monthCells: import("@angular/core").Signal<CalendarDay[]>;
+  protected readonly weekDays: import("@angular/core").Signal<CalendarDay[]>;
+  protected readonly periodLabel: import("@angular/core").Signal<string>;
+  protected readonly viewTabs: import("@angular/core").Signal<PillTab[]>;
+  protected readonly typeCounts: import("@angular/core").Signal<Record<string, number>>;
+  private readonly byDate;
+  protected readonly agendaGroups: import("@angular/core").Signal<{
+    dateStr: string;
+    items: CalendarItem[];
+  }[]>;
+  /** Whether the day at `dateStr` may start a new item. */
+  private clickable;
+  /** The 6 rows of the month grid with everything a cell draws, computed once per input change. */
+  protected readonly monthRows: import("@angular/core").Signal<{
+    key: string;
+    cells: {
+      day: CalendarDay;
+      items: CalendarItem[];
+      visible: CalendarItem[];
+      overflow: number;
+      clickable: boolean;
+      label: string;
+    }[];
+  }[]>;
+  /** The 7 week columns with all-day items and the timed items laid out side by side when they overlap. */
+  protected readonly weekColumns: import("@angular/core").Signal<{
+    day: CalendarDay;
+    label: string;
+    clickable: boolean;
+    allDay: CalendarItem[];
+    timed: {
+      lane: CalendarLane;
+      top: number;
+      height: number;
+      item: CalendarItem;
+    }[];
+  }[]>;
+  /** The month-grid day holding the tab stop: the last focused one if it is on screen, else today, else the 1st of the anchor month. */
+  protected readonly focusDate: import("@angular/core").Signal<string>;
+  constructor();
+  protected isFilterActive(value: string): boolean;
+  protected toggleFilter(value: string): void;
+  protected clearFilters(): void;
+  protected setView(v: CalendarViewMode): void;
+  protected navigate(direction: -1 | 1): void;
+  protected goToday(): void;
+  protected dowLabel(dateStr: string): string;
+  protected agendaDow(dateStr: string): string;
+  protected agendaDate(dateStr: string): string;
+  protected chipTime(e: CalendarItem): string;
+  protected timeRange(e: CalendarItem): string;
+  /** The button's name includes the visible time (WCAG 2.5.3 label in name) unless the host set `ariaLabel`. */
+  protected itemLabel(e: CalendarItem): string;
+  protected agendaMeta(e: CalendarItem): string[];
+  private dayAriaLabel;
+  protected onDateClick(dateStr: string): void;
+  /** Grid keys on a day cell: arrows / Home / End move the tab stop, Enter / Space create. Keys on the chips inside never reach here. */
+  protected onCellKey(event: KeyboardEvent, dateStr: string): void;
+  /** The hidden "+ Add" button of an all-day cell (keyboard / screen-reader path to the same action as clicking the cell). */
+  protected onAddAllDay(dateStr: string, event: Event): void;
+  /** The hidden "+ Add" button of a day column: creates at the first visible hour. */
+  protected onAddTimed(dateStr: string, event: Event): void;
+  protected onSlotClick(dateStr: string, event: MouseEvent): void;
+  protected onItemClick(item: CalendarItem, event: Event): void;
+  protected onMoreClick(dateStr: string, items: CalendarItem[], event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "ui-calendar", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "view": {
+      "alias": "view";
+      "required": false;
+      "isSignal": true;
+    };
+    "views": {
+      "alias": "views";
+      "required": false;
+      "isSignal": true;
+    };
+    "anchorDate": {
+      "alias": "anchorDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "filters": {
+      "alias": "filters";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterLabel": {
+      "alias": "filterLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterMode": {
+      "alias": "filterMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "activeFilters": {
+      "alias": "activeFilters";
+      "required": false;
+      "isSignal": true;
+    };
+    "showFilterCounts": {
+      "alias": "showFilterCounts";
+      "required": false;
+      "isSignal": true;
+    };
+    "canCreate": {
+      "alias": "canCreate";
+      "required": false;
+      "isSignal": true;
+    };
+    "disablePast": {
+      "alias": "disablePast";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxVisible": {
+      "alias": "maxVisible";
+      "required": false;
+      "isSignal": true;
+    };
+    "chipLayout": {
+      "alias": "chipLayout";
+      "required": false;
+      "isSignal": true;
+    };
+    "sortByTime": {
+      "alias": "sortByTime";
+      "required": false;
+      "isSignal": true;
+    };
+    "startHour": {
+      "alias": "startHour";
+      "required": false;
+      "isSignal": true;
+    };
+    "endHour": {
+      "alias": "endHour";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "dayLabelFn": {
+      "alias": "dayLabelFn";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "view": "viewChange";
+    "anchorDate": "anchorDateChange";
+    "activeFilters": "activeFiltersChange";
+    "rangeChange": "rangeChange";
+    "itemClick": "itemClick";
+    "dateClick": "dateClick";
+    "slotClick": "slotClick";
+    "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 };