@forgeroute/ui 0.4.54 → 0.4.55

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -10980,13 +10980,32 @@ export interface CalendarSlotClick {
  * 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`.
  *
+ * Loading: bind `[loading]`. On the FIRST load (nothing shown yet) the whole page is drawn as one skeleton outline (`data-testid="calendar-skeleton"`,
+ * one `role="status"` region "Loading calendar", only decorative `ui-skeleton`s): period label, Previous / Today / Next, view tabs, `loadingActions`
+ * (default 2) action placeholders, the filter label + one chip per filter plus All, and the weekday row + day grid of the current view. The real
+ * toolbar / filters / grid are not in the DOM until loading ends, but `rangeChange` still fires on the first render. After the first load,
+ * `[loading]` replaces only the grid with a skeleton so the toolbar and period navigation stay usable. No markup or config is needed in the host;
+ * start with `loading` true to avoid a one-frame flash of the real toolbar before the outline.
+ *
  * 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[]>;
+  /**
+   * The host is loading the visible range. On the FIRST load (nothing shown yet) the component draws an outline of the whole page (period label,
+   * nav buttons, view tabs, action placeholders, filter chips, weekday row and day grid) built only from decorative `ui-skeleton`s in ONE status
+   * region (`data-testid="calendar-skeleton"`, "Loading calendar"); the real toolbar / filters / grid are not in the DOM until loading ends.
+   * `rangeChange` still fires meanwhile. Later reloads (after a first load finished, or while items are shown) replace only the grid with a
+   * skeleton so the toolbar and period navigation stay usable. Hosts need no markup or config: they just bind `[loading]`.
+   */
   readonly loading: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Optional. How many skeleton button placeholders the first-load outline draws in the actions position (where `[calendar-actions]` content
+   * goes). The calendar cannot count projected content, so this is a number: default 2; 0 draws none. Not used after the first load.
+   */
+  readonly loadingActions: import("@angular/core").InputSignalWithTransform<number, unknown>;
   /** 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. */
@@ -11033,6 +11052,13 @@ export declare class CalendarComponent {
   protected readonly weekDayLabels: string[];
   protected readonly weekDayNames: string[];
   protected readonly skeletonCells: number[];
+  protected readonly skeletonDays: number[];
+  protected readonly skeletonRows: number[];
+  /** `idle` until the first loading cycle starts, `first` while it runs, `loaded` once it has ended: from then on `loading` only skeletons the grid. */
+  private readonly loadPhase;
+  /** True while the first load runs and nothing is shown yet: the whole page is drawn as a skeleton outline. */
+  protected readonly showOutline: import("@angular/core").Signal<boolean>;
+  protected readonly loadingActionSlots: import("@angular/core").Signal<number[]>;
   protected readonly formatHour: typeof formatHour;
   /** The browser clock's today as `YYYY-MM-DD`; refreshed at local midnight, when the tab becomes visible again and when the user presses Today. */
   private readonly clockToday;
@@ -11133,6 +11159,11 @@ export declare class CalendarComponent {
       "required": false;
       "isSignal": true;
     };
+    "loadingActions": {
+      "alias": "loadingActions";
+      "required": false;
+      "isSignal": true;
+    };
     "view": {
       "alias": "view";
       "required": false;