@forgeroute/ui 0.4.21 → 0.4.23

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -47,7 +47,7 @@ export interface ToolbarAction {
   /** Hide this action entirely */
   hidden?: boolean;
   /** Documentation of intent: marks a mutating action ("Add …", bulk mutations). It does not change behavior - the table hides
-   *  EVERY page-defined toolbar action for any `permission` other than 'full', with or without this flag. */
+   *  EVERY page-defined toolbar action for any `permission` other than 'full', unless it is marked `allowReadOnly`. */
   requiresFull?: boolean;
   /**
    * Keep this action when the table is empty and unfiltered. By default only `variant: 'primary'` buttons survive that
@@ -56,6 +56,13 @@ export interface ToolbarAction {
    * menu back (with its usual items).
    */
   keepWhenEmpty?: boolean;
+  /**
+   * Keep this action for a read-only table (`permission` other than 'full'). By default a read-only table drops every
+   * page-defined toolbar action and keeps only Export; set this on a PURE READ - e.g. a "Board View" / "List View" switch
+   * that changes what is shown but writes nothing. Never set it on an action that creates, changes or deletes a record.
+   * On an empty, unfiltered table only primary buttons survive: add `keepWhenEmpty` as well to keep a view switch there.
+   */
+  allowReadOnly?: boolean;
   /**
    * Standalone toggle buttons (e.g. "Assigned to Me"): true / false renders `aria-pressed` so screen readers announce
    * the on / off state. Leave unset for ordinary buttons (no attribute).
@@ -660,12 +667,45 @@ export declare class BadgeComponent {
     };
   }, {}, never, never, true, never>;
 }
+/**
+ * Round avatar: initials on a colour derived from them (default), or a photo when `imageUrl` is set. The photo falls back to the
+ * initials by itself when it fails to load (and tries again when `imageUrl` changes).
+ *
+ *   <ui-avatar initials="JS" name="Jane Smith" [size]="72" [imageUrl]="photoUrl()" />
+ *
+ * Editable (a profile picture the user can change): `[editable]="true"` makes the avatar a keyboard button (role="button",
+ * tabindex 0, Enter / Space / click) that emits `editClick` — the host opens its file picker and uploads — with a small camera
+ * badge in the corner. `editLabel` is its name for assistive tech and tooltip (default "Change photo"). `[busy]="true"` while the
+ * upload runs: spinner in the badge, the photo is dimmed, `aria-busy` is set and clicks / keys do nothing.
+ *
+ *   <ui-avatar initials="JS" name="Jane Smith" [size]="72" [imageUrl]="photoUrl()" [editable]="canEdit()" [busy]="uploading()" (editClick)="picker.open()" />
+ *
+ * Without `imageUrl` and `editable` nothing changes from the plain initials avatar.
+ */
 export declare class AvatarComponent {
   readonly initials: import("@angular/core").InputSignal<string>;
   readonly name: import("@angular/core").InputSignal<string>;
   readonly size: import("@angular/core").InputSignal<number>;
+  /** Photo URL. Empty / null = initials. A photo that fails to load falls back to the initials until the URL changes. */
+  readonly imageUrl: import("@angular/core").InputSignal<string | null | undefined>;
+  /** true = the avatar is a button that emits `editClick` (change the photo), with a camera badge. Default false: unchanged. */
+  readonly editable: import("@angular/core").InputSignal<boolean>;
+  /** Name of the editable avatar for assistive tech and the tooltip. */
+  readonly editLabel: import("@angular/core").InputSignal<string>;
+  /** The host is uploading: spinner badge, dimmed photo, aria-busy, no clicks. */
+  readonly busy: import("@angular/core").InputSignal<boolean>;
+  /** Fires on click / Enter / Space of an editable avatar (not while busy). */
+  readonly editClick: import("@angular/core").OutputEmitterRef<void>;
+  /** Fires when the photo could not be loaded (the initials are shown instead). */
+  readonly imageError: import("@angular/core").OutputEmitterRef<void>;
+  private readonly failedUrl;
+  protected readonly showImage: import("@angular/core").Signal<boolean>;
+  protected readonly badgeSize: import("@angular/core").Signal<number>;
   protected readonly bg: import("@angular/core").Signal<string>;
   protected readonly color: import("@angular/core").Signal<string>;
+  protected onImageError(): void;
+  protected onEdit(): void;
+  protected onKey(event: Event): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ui-avatar", never, {
     "initials": {
@@ -683,7 +723,30 @@ export declare class AvatarComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+    "imageUrl": {
+      "alias": "imageUrl";
+      "required": false;
+      "isSignal": true;
+    };
+    "editable": {
+      "alias": "editable";
+      "required": false;
+      "isSignal": true;
+    };
+    "editLabel": {
+      "alias": "editLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "busy": {
+      "alias": "busy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "editClick": "editClick";
+    "imageError": "imageError";
+  }, never, never, true, never>;
 }
 export interface MenuItem {
   type: string;
@@ -780,7 +843,7 @@ export declare class TableToolbarComponent {
   readonly activeViewId: import("@angular/core").InputSignal<string | null>;
   readonly showSavedViews: import("@angular/core").InputSignal<boolean>;
   /**
-   * Read-only (permission isn't 'full'): only Export stays — no page buttons, no Import, no Columns, no
+   * Read-only (permission isn't 'full'): only Export and pure reads marked `allowReadOnly` stay — no other page buttons, no Import, no Columns, no
    * Save Current View, no deleting views. More Actions offers only the user's existing Saved Views and is
    * hidden when they have none.
    */
@@ -800,7 +863,7 @@ export declare class TableToolbarComponent {
   protected _saveViewName: string;
   /** Draft column visibility — only applied to the table when the user clicks Apply. */
   private readonly _pendingCols;
-  /** Buttons this user may see — read-only users only get Export (page actions and Import are hidden). */
+  /** Buttons this user may see — read-only users only get Export and pure reads marked `allowReadOnly` (page actions and Import are hidden). */
   private readonly _allowedButtons;
   protected readonly standaloneButtons: import("@angular/core").Signal<ToolbarAction[]>;
   protected readonly importButton: import("@angular/core").Signal<ToolbarAction | null>;
@@ -1286,7 +1349,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   /**
    * Page permission. Anything other than 'full' makes the table read-only: no Import,
    * no bulk update/delete and no checkbox column (even when `selectable` is set), no page-defined
-   * toolbar buttons at all (only Export; More Actions offers only their existing Saved Views), and the
+   * toolbar buttons except Export and pure reads marked `allowReadOnly` (More Actions offers only their existing Saved Views), and the
    * row menu offers only View (`type: 'view'`).
    * Rows with nothing to show get no "⋮" trigger; the Actions column is dropped when no row has View.
    */
@@ -4215,6 +4278,11 @@ export declare class ConfirmOutletComponent implements OnInit, OnDestroy {
   static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmOutletComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmOutletComponent, "ui-confirm-outlet", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Centered empty state: icon in a round tile, optional bold title, message and a projected action.
+ * `iconType`: search, table, chart, users, person, message, email, task, house, money, star, video, shield, pipeline (funnel),
+ * property (building), clipboard (clipboard with check and lines), document (default; any unknown value also draws it).
+ */
 export declare class EmptyStateComponent {
   readonly message: import("@angular/core").InputSignal<string>;
   readonly title: import("@angular/core").InputSignal<string>;
@@ -6276,6 +6344,11 @@ export interface NoteItem {
   createdAt: string;
   updatedAt: string;
 }
+/**
+ * Longest note body, in characters, counted AFTER trimming. Matches the backend `NoteController` cap (10000 after trim; the server trims first,
+ * so leading / trailing spaces never count). The add box and the edit box block Add Note / Save above it and show "Too long (max 10000 characters).".
+ */
+export declare const NOTES_MAX_LENGTH = 10000;
 /**
  * Notes for one record: a soft "Add a note" panel, then one clean card per note (author avatar, name, date, edit / delete icons, the text),
  * inline edit and a delete confirmation. Notes are listed 5 per page in the server's order. It talks to the notes API itself, so a page only names the record:
@@ -6290,6 +6363,8 @@ export interface NoteItem {
  *
  * `readOnly` lists the notes only (no box, no edit / delete). `totalChange` emits the total after every load. Failures show a
  * library toast with the server's message. Put it in a `ui-detail-card`: the card's body padding is the only outer inset.
+ * A note may hold at most `NOTES_MAX_LENGTH` (10000) characters after trimming; longer text (typed or pasted) shows the field's
+ * "Too long" message at once and Add Note / Save stay disabled, so no request is sent.
  * Pagination is the library `ui-pagination` (shown only above one page). Cmd/Ctrl+Enter in the add box adds the note.
  */
 export declare class NotesComponent {
@@ -6305,6 +6380,8 @@ export declare class NotesComponent {
   private readonly destroyRef;
   private readonly apiBase;
   readonly pageSize = 5;
+  /** The character limit of a note (see `NOTES_MAX_LENGTH`). */
+  readonly maxLength = 10000;
   readonly notes: import("@angular/core").WritableSignal<NoteItem[]>;
   readonly loading: import("@angular/core").WritableSignal<boolean>;
   readonly saving: import("@angular/core").WritableSignal<boolean>;
@@ -6317,6 +6394,10 @@ export declare class NotesComponent {
   editBody: string;
   /** Up to two initials of the author's name for the avatar ("Ana Lopez" -> "AL"); "Y" for the current user's own unnamed notes. */
   protected initials(name: string): string;
+  /** True when the trimmed text is longer than the limit. */
+  protected tooLong(text: string): boolean;
+  /** True when the trimmed text is not empty and within the limit. */
+  protected validBody(text: string): boolean;
   private get listUrl();
   constructor();
   loadPage(p: number): void;
@@ -6821,6 +6902,11 @@ export declare class PanelInfoListComponent {
    * Default false = the label and value as before.
    */
   readonly labelColon: import("@angular/core").InputSignal<boolean>;
+  /**
+   * The list stretches to the height of its container (a grid cell or flex item with a definite height), so lists side by side in
+   * one grid row end at the same height; with one section, that section's box fills the height. Default false = as tall as its content.
+   */
+  readonly fill: import("@angular/core").InputSignal<boolean>;
   readonly displaySections: import("@angular/core").Signal<PanelInfoSection[]>;
   /**
    * The safe href of an item, or null: `href` first, else `mailto:`/`tel:` built from `email`/`phone`. Only mailto, tel, http and https
@@ -6848,6 +6934,11 @@ export declare class PanelInfoListComponent {
       "required": false;
       "isSignal": true;
     };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -7238,7 +7329,7 @@ export declare class AlertComponent {
 /** The SVG path (24×24 stroke icon) for an icon key, or undefined when the key is unknown. */
 export declare function iconPath(name: string): string | undefined;
 /** Keys with an icon of their own (the data-table action keys are accepted too — see `builtInActionIcon`). */
-export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart';
+export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart' | 'clipboard';
 /**
  * A clickable icon. The host passes a key (`name="delete"`) and the library draws that icon; clicking it emits
  * `iconClick`, and the host does the actual work (delete the row, open a panel, …).
@@ -7363,6 +7454,8 @@ export interface TimelineItem {
  *     { id: 'b', title: 'Letter sent', description: 'Mailed to the owner.', tone: 'success', icon: 'email' },
  *   ]" />
  *
+ * `groupByDay` adds a heading per calendar day (see the inputs `groupByDay`, `timeZone`, `now`, `dayHeadingLevel`).
+ *
  * Semantics: `<ol>` / `<li>`; the line and dots are decorative (aria-hidden). `time` is the visible text; `dateTime` goes into
  * `<time datetime>`. With no items, `emptyMessage` (if set) is shown as a hint, otherwise nothing is rendered.
  */
@@ -7376,6 +7469,26 @@ export declare class TimelineComponent {
   readonly maxHeight: import("@angular/core").InputSignal<string>;
   /** `below` (default): the time is under the title / description. `end`: the time sits right-aligned on the title row. */
   readonly timePosition: import("@angular/core").InputSignal<"end" | "below">;
+  /**
+   * Group the items under a heading per calendar day of `dateTime` ("Today", "Yesterday", "Oct 3", "Oct 3, 2025"). Default false = no headings,
+   * DOM unchanged. The given order is kept: consecutive items of one day share a heading, the same day appearing again later starts a new group.
+   * An item without a parseable ISO `dateTime` joins the group it follows (a heading-less group at the top when first).
+   * Grouped markup: `<ol class="tl"><li class="tl-day-group"><div class="tl-day" role="heading" aria-level>…</div><ol class="tl-sub">…items…</ol></li></ol>`.
+   */
+  readonly groupByDay: import("@angular/core").InputSignal<boolean>;
+  /** IANA time zone (e.g. `America/Chicago`) for the day grouping and the labels. A `dateTime` with a trailing Z / offset = an instant shown in this zone; a date or a wall-clock time without offset is taken as already being in that day. Empty (default) = the browser's local zone; an unknown zone also falls back to it. */
+  readonly timeZone: import("@angular/core").InputSignal<string>;
+  /** The moment "Today" / "Yesterday" are measured from. `null` (default) = the real current time; a Date or ISO string pins it (tests, replays). The real time is read when the groups are computed, not on a timer: a long-lived page should pass `now` (or re-bind `items`) to refresh Today / Yesterday after midnight. */
+  readonly now: import("@angular/core").InputSignal<string | Date | null>;
+  /** Heading level 1-6 of the day headings (role="heading" + aria-level); anything else becomes 3. */
+  readonly dayHeadingLevel: import("@angular/core").InputSignal<number>;
+  protected readonly headingLevel: import("@angular/core").Signal<number>;
+  /** The items split into day groups (only used when `groupByDay` is on). */
+  protected readonly groups: import("@angular/core").Signal<{
+    key: string;
+    label: string;
+    items: TimelineItem[];
+  }[]>;
   /** Solid dot colour of an item's `dotVariant`, or null (then `tone` colours it). */
   dotColor(item: TimelineItem): string | null;
   static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent, never>;
@@ -7405,6 +7518,26 @@ export declare class TimelineComponent {
       "required": false;
       "isSignal": true;
     };
+    "groupByDay": {
+      "alias": "groupByDay";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeZone": {
+      "alias": "timeZone";
+      "required": false;
+      "isSignal": true;
+    };
+    "now": {
+      "alias": "now";
+      "required": false;
+      "isSignal": true;
+    };
+    "dayHeadingLevel": {
+      "alias": "dayHeadingLevel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -9052,12 +9185,24 @@ export interface BoardCardContext<T = unknown> {
     $implicit: T;
   }>;
 }
-/** Marks the template that renders the INSIDE of a card (the board draws the card frame, menu and drag handling). */
+/**
+ * Marks the template that renders the INSIDE of a card (the board draws the card frame, menu and drag handling).
+ * Bind the board's columns to type the card item: `<ng-template [uiBoardCard]="columns()" let-lead>` gives `lead` the
+ * columns' item type. The bare `<ng-template uiBoardCard let-item>` still works; `item` is then `unknown`.
+ */
 export declare class BoardCardDirective<T = unknown> {
+  /** Only used to infer the item type in the template; the value is never read. */
+  readonly typeFrom: import("@angular/core").InputSignal<"" | BoardColumn<T>[]>;
   readonly template: TemplateRef<BoardCardContext<T>>;
   static ngTemplateContextGuard<T>(_dir: BoardCardDirective<T>, _ctx: unknown): _ctx is BoardCardContext<T>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BoardCardDirective<any>, never>;
-  static ɵdir: i0.ɵɵDirectiveDeclaration<BoardCardDirective<any>, "ng-template[uiBoardCard]", never, {}, {}, never, never, true, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BoardCardDirective<any>, "ng-template[uiBoardCard]", never, {
+    "typeFrom": {
+      "alias": "uiBoardCard";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
 /**
  * Kanban board: columns of cards that can be dragged between columns. Data and saving stay with the host.
@@ -9065,7 +9210,7 @@ export declare class BoardCardDirective<T = unknown> {
  *   <ui-board [columns]="columns()" [itemKey]="key" [itemLabel]="label" [cardActions]="actions" [readOnly]="perm() !== 'full'"
  *             [loading]="loading()" [error]="error()" (retry)="load()"
  *             (cardClick)="open($event)" (cardAction)="onAction($event)" (itemMove)="onMove($event)">
- *     <ng-template uiBoardCard let-deal let-menu="menu">
+ *     <ng-template [uiBoardCard]="columns()" let-deal let-menu="menu">
  *       <div class="ub-card__top"><span class="ub-card__title">{{ deal.title }}</span>
  *         <ng-container [ngTemplateOutlet]="menu" [ngTemplateOutletContext]="{ $implicit: deal }" /></div>
  *       <div class="ub-card__contact">{{ deal.contactName }}</div>
@@ -9079,12 +9224,18 @@ export declare class BoardCardDirective<T = unknown> {
 export declare class BoardComponent<T = unknown> {
   /** The columns in display order, each with its items. A new value replaces the board's content (and any on-screen move). */
   readonly columns: import("@angular/core").InputSignal<BoardColumn<T>[]>;
-  /** Stable unique id of a card (used to track cards between renders). */
+  /** Stable unique id of a card (used to track cards between renders, to find its menu and to move it). Must be unique across the whole board. */
   readonly itemKey: import("@angular/core").InputSignal<(item: T) => string>;
   /** Spoken name of a card: title, who, status, value... The card's visible content is the `uiBoardCard` template. */
   readonly itemLabel: import("@angular/core").InputSignal<(item: T) => string>;
   /** Menu on every card (the "⋮" button). Empty = no menu. Handle the pick in `(cardAction)`. */
   readonly cardActions: import("@angular/core").InputSignal<RowAction[]>;
+  /**
+   * Adds "Move to <column>" to every card's menu (one item per column the card may be moved to), so a card can be moved
+   * without dragging - by touch, with a screen reader or with the mouse alone. Only while cards can be moved (not read-only,
+   * not `moveDisabled`) and only to columns that accept the card (`canMove`, `dropDisabled`). Set false to leave the menu to `cardActions`.
+   */
+  readonly moveMenu: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   /** Error text: replaces the board with the message and a Retry button. */
   readonly error: import("@angular/core").InputSignal<string | null>;
@@ -9101,21 +9252,42 @@ export declare class BoardComponent<T = unknown> {
   readonly itemNoun: import("@angular/core").InputSignal<string>;
   readonly itemNounPlural: import("@angular/core").InputSignal<string>;
   readonly retryLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Cards drawn per column at first, and added by each "Show more" click (0 = draw every card). The board loads every item
+   * at once, so drawing only a page of each column keeps the first paint fast however many items there are. Column counts
+   * and summaries still cover every item; a card moved into a column is drawn at its top, so it is always on screen.
+   */
+  readonly pageSize: import("@angular/core").InputSignal<number>;
   readonly cardClick: import("@angular/core").OutputEmitterRef<T>;
   readonly cardAction: import("@angular/core").OutputEmitterRef<BoardCardActionEvent<T>>;
   readonly itemMove: import("@angular/core").OutputEmitterRef<BoardMoveEvent<T>>;
   readonly retry: import("@angular/core").OutputEmitterRef<void>;
-  protected readonly card: import("@angular/core").Signal<BoardCardDirective<any> | undefined>;
+  protected readonly card: import("@angular/core").Signal<BoardCardDirective<T> | undefined>;
   /** The columns as shown: the host's value, plus any move not yet replaced by new data. */
   protected readonly cols: import("@angular/core").WritableSignal<BoardColumn<T>[]>;
+  /** Cards drawn per column. Kept when the host re-sends columns (a saved move, a search), so the board never jumps back; back to the first page on a reload (`loading`). */
+  private readonly drawn;
+  /** The card the user last moved and where it went: it stays drawn even if the host re-sends it far down the column. */
+  private readonly movedTo;
+  protected readonly shownCols: import("@angular/core").Signal<{
+    col: BoardColumn<T>;
+    shown: T[];
+    hidden: number;
+    next: number;
+  }[]>;
+  /** How many cards of `col` are drawn: the pages shown so far, extended so the card the user moved is always on screen. */
+  private limitOf;
+  protected showMore(key: string): void;
+  /** Id of the keyboard-move hint that describes the board region. */
+  protected readonly hintId: string;
   protected readonly overKey: import("@angular/core").WritableSignal<string | null>;
   protected readonly draggingKey: import("@angular/core").WritableSignal<string | null>;
   protected readonly announcement: import("@angular/core").WritableSignal<string>;
   private readonly host;
+  constructor();
   private drag;
   protected readonly skeletonColumns: import("@angular/core").Signal<number[]>;
   protected readonly canDrag: import("@angular/core").Signal<boolean>;
-  protected readonly canMoveAny: import("@angular/core").Signal<boolean>;
   protected dot(color?: string): string;
   protected onDragStart(event: DragEvent, item: T, col: BoardColumn<T>): void;
   protected onDragEnd(): void;
@@ -9123,6 +9295,11 @@ export declare class BoardComponent<T = unknown> {
   protected onDragLeave(event: DragEvent, col: BoardColumn<T>): void;
   protected onDrop(event: DragEvent, col: BoardColumn<T>): void;
   protected onCardKey(event: KeyboardEvent, item: T, col: BoardColumn<T>): void;
+  /** The menu of each card by item key: the host's `cardActions`, then "Move to <column>" for each column that accepts the card (one shared array per column when the host has no `canMove` rule). */
+  protected readonly menuActions: import("@angular/core").Signal<Map<string, RowAction[]>>;
+  protected onMenuAction(type: string, item: T): void;
+  /** The card is re-created in its new column: put the focus back on it once it is drawn. */
+  private focusCard;
   private accepts;
   private move;
   static ɵfac: i0.ɵɵFactoryDeclaration<BoardComponent<any>, never>;
@@ -9147,6 +9324,11 @@ export declare class BoardComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "moveMenu": {
+      "alias": "moveMenu";
+      "required": false;
+      "isSignal": true;
+    };
     "loading": {
       "alias": "loading";
       "required": false;
@@ -9202,6 +9384,11 @@ export declare class BoardComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "pageSize": {
+      "alias": "pageSize";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "cardClick": "cardClick";
     "cardAction": "cardAction";
@@ -9809,6 +9996,144 @@ export declare class StackComponent {
     };
   }, {}, never, ["*"], true, never>;
 }
+export type SidebarPosition = 'start' | 'end';
+/** Viewport width at and below which the layout becomes one column: sm = 640px, md = 900px, lg = 1200px, never = always two columns. */
+export type SidebarCollapse = 'sm' | 'md' | 'lg' | 'never';
+/**
+ * Detail-page layout: a MAIN column plus a SIDE column of fixed width.
+ *
+ * Replaces the page-level grid / `position: sticky` CSS each detail page used to carry. Project the two columns with
+ * the `layout-main` and `layout-side` attributes:
+ *
+ *   <ui-sidebar-layout sideWidth="340px" gap="md" collapseAt="md">
+ *     <div layout-main> ...tabs, tables, timeline... </div>
+ *     <aside layout-side aria-label="Contact summary"> ...profile card, quick actions... </aside>
+ *   </ui-sidebar-layout>
+ *
+ *  - `sideWidth`: any CSS length (default `320px`). The main column takes the rest (`minmax(0, 1fr)` track and
+ *    `min-width: 0`, so a wide table cannot stretch the grid).
+ *  - `sidePosition`: `end` (default, side on the right) | `start` (side on the left). The DOM order is always main then
+ *    side; only the visual position changes.
+ *  - `gap`: layout gap token (none | xs | sm | md | lg | xl) or a CSS length. Default `md` (16px). It is the space between
+ *    the columns and, when collapsed, between the stacked columns.
+ *  - `stickySide` (default true): at wide widths the side column is `position: sticky` at `stickyTop` px (default 16) with
+ *    `max-height: 100vh - (stickyTop + stickyOffset)` (default offset 32px; `100vh` first, `100dvh` after it for browsers
+ *    that know it) and `overflow-y: auto`, so only the main column scrolls the page; a side column taller than the viewport
+ *    scrolls inside itself. `false` = a plain static column.
+ *  - `collapseAt`: sm (640px) | md (900px, default) | lg (1200px) | never. At and below that viewport width there is ONE
+ *    column and the side column is static (never sticky, no max-height). `sideFirstWhenCollapsed` (default true) puts the
+ *    side column first there; `false` puts the main column first.
+ *  - `sideFirstInDom` (default false): by default the side column is only moved to the top on small screens with CSS
+ *    `order`, so Tab / reading order stays main then side. With `sideFirstInDom` AND `sideFirstWhenCollapsed`, the side
+ *    wrapper is rendered BEFORE the main wrapper in the DOM while the viewport is at or below the `collapseAt` width
+ *    (tracked with `matchMedia` for the same query), so Tab order equals the visual order. At wide widths the DOM is main
+ *    then side. The projected nodes are moved, never recreated (same element instances, no state lost). No `matchMedia`
+ *    (server rendering) = not collapsed; CSS `order` still gives the right visual order until the browser takes over.
+ *    The `.sl` root element carries `data-dom-order="main-first|side-first"`.
+ *  - `sideBleed` (CSS length, default `4px`; `0px` = none): the sticky side column scrolls inside itself
+ *    (`overflow-y: auto`), which would clip focus rings and shadows at its edges. It gets padding and a negative margin of the
+ *    bleed size (the full `sideBleed` on the outer and block edges, `min(sideBleed, gap)` toward main), so the content keeps exactly its `sideWidth` and `gap` (the layout does not
+ *    move) while a 2px outline with a 2px offset still fits. `top` is reduced by the bleed so the content sticks at
+ *    `stickyTop`, and `max-height` is `100vh - (stickyTop + stickyOffset)` for the CONTENT (the bleed is added back).
+ *    The bleed toward main is clamped to the gap (`min(sideBleed, gap)`), so the transparent padding never overlaps or
+ *    intercepts clicks on main; the outer edge keeps the full bleed. Needs CSS `min()` (all current browsers).
+ *    Collapsed and non-sticky columns have no bleed. NOTE: the outer edge of the side box overhangs the layout by the bleed
+ *    (4px by default, on the right for `end`, on the left for `start`), so a flush clipping or scrolling ancestor can
+ *    show 4px of horizontal overflow: use `sideBleed="0px"` there.
+ *  - `sideWidth`, `sideBleed` and `gap` must be non-negative lengths; a negative value falls back to the default. A `calc(...)` or
+ *    `var(...)` value is passed through as written and is not checked: make sure it cannot compute to a negative length.
+ *  - An empty side slot (no `layout-side` element) hides the side column and the main column takes the full width.
+ *
+ * Plain media queries only (no `:has()`, no container queries) so it behaves the same in Chrome, Edge, Firefox and Safari.
+ * The column gap is a margin on the side column (not a grid `column-gap`), so an empty side column leaves no stray gap.
+ */
+export declare class SidebarLayoutComponent {
+  /** Width of the side column: any CSS length (default `320px`). */
+  readonly sideWidth: import("@angular/core").InputSignal<string>;
+  readonly sidePosition: import("@angular/core").InputSignal<SidebarPosition>;
+  /** Space between the columns (and between them when collapsed): a layout gap token or a CSS length (default `md` = 16px). */
+  readonly gap: import("@angular/core").InputSignal<string>;
+  /** Keep the side column pinned while the main column scrolls (wide widths only). */
+  readonly stickySide: import("@angular/core").InputSignal<boolean>;
+  /** Distance in px from the top of the viewport at which the side column's content sticks (default 16). */
+  readonly stickyTop: import("@angular/core").InputSignal<number>;
+  /** Total px of non-viewport space above and below the side column, used for its max-height (default 32). */
+  readonly stickyOffset: import("@angular/core").InputSignal<number>;
+  readonly collapseAt: import("@angular/core").InputSignal<SidebarCollapse>;
+  /** When collapsed to one column: side column first (default) or main column first. */
+  readonly sideFirstWhenCollapsed: import("@angular/core").InputSignal<boolean>;
+  /** Also put the side wrapper first in the DOM (not only visually) while collapsed, so Tab order equals visual order. Default false. */
+  readonly sideFirstInDom: import("@angular/core").InputSignal<boolean>;
+  /** Room (CSS length) inside the sticky side's scroll box so focus rings at its edge are not clipped. Default `4px`; `0px` = none. */
+  readonly sideBleed: import("@angular/core").InputSignal<string>;
+  /** True while the viewport is at or below the collapseAt width; only tracked when sideFirstInDom is set. */
+  private readonly collapsed;
+  protected readonly position: import("@angular/core").Signal<SidebarPosition>;
+  private readonly collapseKey;
+  /** The side wrapper is rendered before the main wrapper. */
+  protected readonly domSideFirst: import("@angular/core").Signal<boolean>;
+  protected readonly domOrder: import("@angular/core").Signal<"side-first" | "main-first">;
+  protected readonly sideCss: import("@angular/core").Signal<string>;
+  protected readonly bleedCss: import("@angular/core").Signal<string>;
+  protected readonly gapCss: import("@angular/core").Signal<string>;
+  protected readonly topCss: import("@angular/core").Signal<string>;
+  protected readonly offCss: import("@angular/core").Signal<string>;
+  protected readonly rootClass: import("@angular/core").Signal<string>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<SidebarLayoutComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SidebarLayoutComponent, "ui-sidebar-layout", never, {
+    "sideWidth": {
+      "alias": "sideWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "sidePosition": {
+      "alias": "sidePosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "stickySide": {
+      "alias": "stickySide";
+      "required": false;
+      "isSignal": true;
+    };
+    "stickyTop": {
+      "alias": "stickyTop";
+      "required": false;
+      "isSignal": true;
+    };
+    "stickyOffset": {
+      "alias": "stickyOffset";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapseAt": {
+      "alias": "collapseAt";
+      "required": false;
+      "isSignal": true;
+    };
+    "sideFirstWhenCollapsed": {
+      "alias": "sideFirstWhenCollapsed";
+      "required": false;
+      "isSignal": true;
+    };
+    "sideFirstInDom": {
+      "alias": "sideFirstInDom";
+      "required": false;
+      "isSignal": true;
+    };
+    "sideBleed": {
+      "alias": "sideBleed";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[layout-main]", "[layout-side]"], true, never>;
+}
 export type ActionBarAlign = 'start' | 'center' | 'end' | 'between';
 /**
  * Bar for page-level actions (Save / Cancel) that stays at the bottom of the scrolling area.