@forgeroute/ui 0.4.54 → 0.4.56

package/fesm2022/forgeroute-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, PLATFORM_ID, Renderer2, TemplateRef, ViewEncapsulation, afterEveryRender, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, PLATFORM_ID, Renderer2, TemplateRef, ViewEncapsulation, afterEveryRender, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { catchError, debounceTime, distinctUntilChanged, skip, switchMap } from "rxjs/operators";
@@ -11982,7 +11982,7 @@ var DataTableComponent = class DataTableComponent {
 				label: "Default"
 			}];
 			for (const col of this.visibleCols()) {
-				if (!this._isSortable(col)) continue;
+				if (!this._isSortable(col) || this._emptyColumnKeys().has(col.key)) continue;
 				opts.push({
 					value: `${col.key}:asc`,
 					label: `${col.label} ↑`
@@ -11999,6 +11999,31 @@ var DataTableComponent = class DataTableComponent {
 			cf: this.getColFilter(col)
 		})).filter((f) => f.cf !== null), ...ngDevMode ? [{ debugName: "_phoneFilterCols" }] : /* istanbul ignore next */ []);
 		this._showColumnControls = computed(() => !this._error() && (this._items().length > 0 || !!this._sortField() || Object.values(this._colFilterValues()).some((v) => v.length > 0)), ...ngDevMode ? [{ debugName: "_showColumnControls" }] : /* istanbul ignore next */ []);
+		this._emptyColumnKeys = computed(() => {
+			const items = this._items();
+			const out = /* @__PURE__ */ new Set();
+			if (items.length === 0) return out;
+			for (const col of this.visibleCols()) {
+				if (!this._isSortable(col) || this._sortField() === col.key) continue;
+				let hasValue = false;
+				for (const item of items) {
+					let text;
+					try {
+						text = this.cardCellText(col, item);
+					} catch {
+						hasValue = true;
+						break;
+					}
+					const t = text === null || text === void 0 ? "" : String(text).trim();
+					if (t !== "" && t !== "—") {
+						hasValue = true;
+						break;
+					}
+				}
+				if (!hasValue) out.add(col.key);
+			}
+			return out;
+		}, ...ngDevMode ? [{ debugName: "_emptyColumnKeys" }] : /* istanbul ignore next */ []);
 		this._hasPhoneControls = computed(() => this._phoneSortOptions().length > 1 || this._phoneFilterCols().length > 0, ...ngDevMode ? [{ debugName: "_hasPhoneControls" }] : /* istanbul ignore next */ []);
 		this._injector = inject(Injector);
 		this._silentNext = false;
@@ -12120,6 +12145,9 @@ var DataTableComponent = class DataTableComponent {
 		this.load();
 		this._fetchCounts();
 	}
+	_canShowSort(col) {
+		return this._isSortable(col) && this._showColumnControls() && !this._emptyColumnKeys().has(col.key);
+	}
 	onPhoneSort(value) {
 		if (!value) {
 			this._sortField.set(null);
@@ -13017,11 +13045,11 @@ var DataTableComponent = class DataTableComponent {
                     [style.width]="col.width ?? null"
                     [style.min-width]="col.width ?? null"
                     [style.max-width]="col.width ?? null"
-                    [attr.aria-sort]="_isSortable(col) && _showColumnControls() ? sortAriaLabel(col.key) : null"
+                    [attr.aria-sort]="_canShowSort(col) ? sortAriaLabel(col.key) : null"
                     [class.dt-th-sorted]="_sortField() === col.key"
                     [class.dt-th-actions]="col.cellType === 'actions'">
                     <div class="dt-th-inner">
-                      @if (_isSortable(col) && _showColumnControls()) {
+                      @if (_canShowSort(col)) {
                         <button
                           class="dt-sort-btn"
                           (click)="onSort(col.key)"
@@ -14085,11 +14113,11 @@ i0.ɵɵngDeclareClassMetadata({
                     [style.width]="col.width ?? null"
                     [style.min-width]="col.width ?? null"
                     [style.max-width]="col.width ?? null"
-                    [attr.aria-sort]="_isSortable(col) && _showColumnControls() ? sortAriaLabel(col.key) : null"
+                    [attr.aria-sort]="_canShowSort(col) ? sortAriaLabel(col.key) : null"
                     [class.dt-th-sorted]="_sortField() === col.key"
                     [class.dt-th-actions]="col.cellType === 'actions'">
                     <div class="dt-th-inner">
-                      @if (_isSortable(col) && _showColumnControls()) {
+                      @if (_canShowSort(col)) {
                         <button
                           class="dt-sort-btn"
                           (click)="onSort(col.key)"
@@ -27282,6 +27310,7 @@ const ICON_PATHS = {
 };
 const CALENDAR_PATH = "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M16 2v4 M8 2v4 M3 10h18";
 const EDIT_PATH = "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z";
+const TRASH_PATH = "M3 6h18 M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2 M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6 M10 11v6 M14 11v6";
 const INDICATOR_LABEL = {
 	high: "High priority",
 	medium: "Medium priority",
@@ -27303,10 +27332,19 @@ var CardListItemComponent = class CardListItemComponent {
 		this.viewButton = input(false, ...ngDevMode ? [{ debugName: "viewButton" }] : /* istanbul ignore next */ []);
 		this.editAriaLabel = input("", ...ngDevMode ? [{ debugName: "editAriaLabel" }] : /* istanbul ignore next */ []);
 		this.viewAriaLabel = input("", ...ngDevMode ? [{ debugName: "viewAriaLabel" }] : /* istanbul ignore next */ []);
+		this.deletable = input(false, ...ngDevMode ? [{ debugName: "deletable" }] : /* istanbul ignore next */ []);
+		this.deleteLabel = input("Delete", ...ngDevMode ? [{ debugName: "deleteLabel" }] : /* istanbul ignore next */ []);
+		this.deleteTestId = input("", ...ngDevMode ? [{ debugName: "deleteTestId" }] : /* istanbul ignore next */ []);
+		this.actionLabel = input("", ...ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []);
+		this.actionTestId = input("", ...ngDevMode ? [{ debugName: "actionTestId" }] : /* istanbul ignore next */ []);
+		this.actionAriaLabel = input("", ...ngDevMode ? [{ debugName: "actionAriaLabel" }] : /* istanbul ignore next */ []);
 		this.editClick = output();
 		this.viewClick = output();
+		this.delete = output();
+		this.action = output();
 		this.calendarPath = CALENDAR_PATH;
 		this.editPath = EDIT_PATH;
+		this.trashPath = TRASH_PATH;
 		this.iconPath = computed(() => {
 			const i = this.icon();
 			return i ? ICON_PATHS[i] ?? null : null;
@@ -27421,11 +27459,55 @@ var CardListItemComponent = class CardListItemComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				deletable: {
+					classPropertyName: "deletable",
+					publicName: "deletable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				deleteLabel: {
+					classPropertyName: "deleteLabel",
+					publicName: "deleteLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				deleteTestId: {
+					classPropertyName: "deleteTestId",
+					publicName: "deleteTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				actionLabel: {
+					classPropertyName: "actionLabel",
+					publicName: "actionLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				actionTestId: {
+					classPropertyName: "actionTestId",
+					publicName: "actionTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				actionAriaLabel: {
+					classPropertyName: "actionAriaLabel",
+					publicName: "actionAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
 				editClick: "editClick",
-				viewClick: "viewClick"
+				viewClick: "viewClick",
+				delete: "delete",
+				action: "action"
 			},
 			ngImport: i0,
 			template: `
@@ -27473,6 +27555,14 @@ var CardListItemComponent = class CardListItemComponent {
       @if (viewButton()) {
         <button class="cli-chip cli-chip--view" type="button" [attr.aria-label]="viewAriaLabel() || null" (click)="viewClick.emit()">View</button>
       }
+      @if (actionLabel()) {
+        <button class="cli-chip cli-chip--action" type="button" [attr.data-testid]="actionTestId() || null" [attr.aria-label]="actionAriaLabel() || null" (click)="action.emit()">{{ actionLabel() }}</button>
+      }
+      @if (deletable()) {
+        <button class="cli-chip cli-chip--delete" type="button" [attr.data-testid]="deleteTestId() || null" [attr.aria-label]="deleteLabel() || 'Delete'" (click)="delete.emit()">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="trashPath" /></svg>
+        </button>
+      }
       <ng-content select="[card-list-action]" />
       <ng-content />
     </div>
@@ -27480,7 +27570,7 @@ var CardListItemComponent = class CardListItemComponent {
     <ng-content select="[card-detail]" />
   `,
 			isInline: true,
-			styles: ["ui-card-list-item{position:relative;display:block;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-bottom:8px}ui-card-list-item:last-child{margin-bottom:0}ui-card-list-item .cli-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;transition:background .12s}ui-card-list-item .cli-row:hover{background:#f8fafc}@media(prefers-reduced-motion:reduce){ui-card-list-item .cli-row{transition:none}}ui-card-list-item .cli-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}ui-card-list-item .cli-dot:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-dot--high{background:#ef4444}ui-card-list-item .cli-dot--medium{background:#f59e0b}ui-card-list-item .cli-dot--low{background:#94a3b8}ui-card-list-item .cli-dot--blue{background:#3b82f6}ui-card-list-item .cli-dot--green{background:#22c55e}ui-card-list-item .cli-icon-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}ui-card-list-item .cli-icon-circle--call{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--email{background:#dcfce7;color:#16a34a}ui-card-list-item .cli-icon-circle--sms{background:#fef9c3;color:#ca8a04}ui-card-list-item .cli-icon-circle--task{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--doc{background:#ffedd5;color:#ea580c}ui-card-list-item .cli-icon-circle--money{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--deal{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--survey{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--property{background:#fef3c7;color:#d97706}ui-card-list-item .cli-icon-circle--search{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--heart{background:#fce7f3;color:#db2777}ui-card-list-item .cli-icon-circle--calc{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--repeat{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;word-break:break-word}ui-card-list-item .cli-badges{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;z-index:1}ui-card-list-item .cli-row--badges .cli-body{padding-right:96px}ui-card-list-item .cli-row--badges-2 .cli-body{padding-right:190px}ui-card-list-item .cli-row--badges .cli-chip{align-self:flex-end}ui-card-list-item .cli-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}ui-card-list-item .cli-title{font-size:.875rem;font-weight:600;color:#1e293b}ui-card-list-item .cli-desc-row{display:flex;align-items:center;gap:8px}ui-card-list-item .cli-desc-row:empty{display:none}ui-card-list-item .cli-description{font-size:.8125rem;color:#64748b;min-width:0}ui-card-list-item .cli-date{display:flex;align-items:center;gap:4px;font-size:.75rem;color:#64748b}ui-card-list-item .cli-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;align-self:center;box-sizing:border-box;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;background:none;cursor:pointer;padding:4px 10px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}ui-card-list-item .cli-chip--edit{color:#64748b;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--edit:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--view{color:#2563eb;border:1px solid #dbeafe}ui-card-list-item .cli-chip--view:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}ui-card-list-item .cli-chip:focus-visible,ui-card-list-item .cli-inline-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-inline-link{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:500;color:#2563eb;text-decoration:none;transition:color .15s}ui-card-list-item .cli-inline-link:hover{color:#1d4ed8}@media(pointer:coarse),(max-width:480px){ui-card-list-item .cli-chip{min-height:44px;padding:4px 14px}}ui-card-list-item [card-stats]{display:flex;align-items:stretch;background:#f8fafc;border-top:1px solid #f1f5f9}ui-card-list-item [card-detail]{background:#f8fafc;border-top:1px solid #e2e8f0}ui-card-list-item .cli-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 14px}ui-card-list-item .cli-stat-label{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}ui-card-list-item .cli-stat-value{font-size:.9375rem;font-weight:600;color:#0f172a}ui-card-list-item .cli-stat-divider{width:1px;background:#e2e8f0;margin:8px 0}\n"],
+			styles: ["ui-card-list-item{position:relative;display:block;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-bottom:8px}ui-card-list-item:last-child{margin-bottom:0}ui-card-list-item .cli-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;transition:background .12s}ui-card-list-item .cli-row:hover{background:#f8fafc}@media(prefers-reduced-motion:reduce){ui-card-list-item .cli-row{transition:none}}ui-card-list-item .cli-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}ui-card-list-item .cli-dot:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-dot--high{background:#ef4444}ui-card-list-item .cli-dot--medium{background:#f59e0b}ui-card-list-item .cli-dot--low{background:#94a3b8}ui-card-list-item .cli-dot--blue{background:#3b82f6}ui-card-list-item .cli-dot--green{background:#22c55e}ui-card-list-item .cli-icon-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}ui-card-list-item .cli-icon-circle--call{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--email{background:#dcfce7;color:#16a34a}ui-card-list-item .cli-icon-circle--sms{background:#fef9c3;color:#ca8a04}ui-card-list-item .cli-icon-circle--task{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--doc{background:#ffedd5;color:#ea580c}ui-card-list-item .cli-icon-circle--money{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--deal{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--survey{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--property{background:#fef3c7;color:#d97706}ui-card-list-item .cli-icon-circle--search{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--heart{background:#fce7f3;color:#db2777}ui-card-list-item .cli-icon-circle--calc{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--repeat{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;word-break:break-word}ui-card-list-item .cli-badges{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;z-index:1}ui-card-list-item .cli-row--badges .cli-body{padding-right:96px}ui-card-list-item .cli-row--badges-2 .cli-body{padding-right:190px}ui-card-list-item .cli-row--badges .cli-chip{align-self:flex-end}ui-card-list-item .cli-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}ui-card-list-item .cli-title{font-size:.875rem;font-weight:600;color:#1e293b}ui-card-list-item .cli-desc-row{display:flex;align-items:center;gap:8px}ui-card-list-item .cli-desc-row:empty{display:none}ui-card-list-item .cli-description{font-size:.8125rem;color:#64748b;min-width:0}ui-card-list-item .cli-date{display:flex;align-items:center;gap:4px;font-size:.75rem;color:#64748b}ui-card-list-item .cli-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;align-self:center;box-sizing:border-box;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;background:none;cursor:pointer;padding:4px 10px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}ui-card-list-item .cli-chip--edit{color:#64748b;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--edit:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--view{color:#2563eb;border:1px solid #dbeafe}ui-card-list-item .cli-chip--view:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}ui-card-list-item .cli-chip--action{color:#475569;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--action:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--delete{position:relative;justify-content:center;width:28px;height:28px;padding:0;color:#b91c1c;border:1px solid #fecaca}ui-card-list-item .cli-chip--delete:hover{background:#fef2f2;border-color:#fca5a5;color:#991b1b}ui-card-list-item .cli-chip--delete:after{content:\"\";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}ui-card-list-item .cli-chip:focus-visible,ui-card-list-item .cli-inline-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-inline-link{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:500;color:#2563eb;text-decoration:none;transition:color .15s}ui-card-list-item .cli-inline-link:hover{color:#1d4ed8}@media(pointer:coarse),(max-width:480px){ui-card-list-item .cli-chip{min-height:44px;padding:4px 14px}ui-card-list-item .cli-chip--delete{min-height:28px;padding:0}}ui-card-list-item [card-stats]{display:flex;align-items:stretch;background:#f8fafc;border-top:1px solid #f1f5f9}ui-card-list-item [card-detail]{background:#f8fafc;border-top:1px solid #e2e8f0}ui-card-list-item .cli-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 14px}ui-card-list-item .cli-stat-label{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}ui-card-list-item .cli-stat-value{font-size:.9375rem;font-weight:600;color:#0f172a}ui-card-list-item .cli-stat-divider{width:1px;background:#e2e8f0;margin:8px 0}\n"],
 			dependencies: [{
 				kind: "component",
 				type: BadgeComponent,
@@ -27555,13 +27645,21 @@ i0.ɵɵngDeclareClassMetadata({
       @if (viewButton()) {
         <button class="cli-chip cli-chip--view" type="button" [attr.aria-label]="viewAriaLabel() || null" (click)="viewClick.emit()">View</button>
       }
+      @if (actionLabel()) {
+        <button class="cli-chip cli-chip--action" type="button" [attr.data-testid]="actionTestId() || null" [attr.aria-label]="actionAriaLabel() || null" (click)="action.emit()">{{ actionLabel() }}</button>
+      }
+      @if (deletable()) {
+        <button class="cli-chip cli-chip--delete" type="button" [attr.data-testid]="deleteTestId() || null" [attr.aria-label]="deleteLabel() || 'Delete'" (click)="delete.emit()">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="trashPath" /></svg>
+        </button>
+      }
       <ng-content select="[card-list-action]" />
       <ng-content />
     </div>
     <ng-content select="[card-stats]" />
     <ng-content select="[card-detail]" />
   `,
-			styles: ["ui-card-list-item{position:relative;display:block;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-bottom:8px}ui-card-list-item:last-child{margin-bottom:0}ui-card-list-item .cli-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;transition:background .12s}ui-card-list-item .cli-row:hover{background:#f8fafc}@media(prefers-reduced-motion:reduce){ui-card-list-item .cli-row{transition:none}}ui-card-list-item .cli-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}ui-card-list-item .cli-dot:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-dot--high{background:#ef4444}ui-card-list-item .cli-dot--medium{background:#f59e0b}ui-card-list-item .cli-dot--low{background:#94a3b8}ui-card-list-item .cli-dot--blue{background:#3b82f6}ui-card-list-item .cli-dot--green{background:#22c55e}ui-card-list-item .cli-icon-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}ui-card-list-item .cli-icon-circle--call{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--email{background:#dcfce7;color:#16a34a}ui-card-list-item .cli-icon-circle--sms{background:#fef9c3;color:#ca8a04}ui-card-list-item .cli-icon-circle--task{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--doc{background:#ffedd5;color:#ea580c}ui-card-list-item .cli-icon-circle--money{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--deal{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--survey{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--property{background:#fef3c7;color:#d97706}ui-card-list-item .cli-icon-circle--search{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--heart{background:#fce7f3;color:#db2777}ui-card-list-item .cli-icon-circle--calc{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--repeat{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;word-break:break-word}ui-card-list-item .cli-badges{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;z-index:1}ui-card-list-item .cli-row--badges .cli-body{padding-right:96px}ui-card-list-item .cli-row--badges-2 .cli-body{padding-right:190px}ui-card-list-item .cli-row--badges .cli-chip{align-self:flex-end}ui-card-list-item .cli-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}ui-card-list-item .cli-title{font-size:.875rem;font-weight:600;color:#1e293b}ui-card-list-item .cli-desc-row{display:flex;align-items:center;gap:8px}ui-card-list-item .cli-desc-row:empty{display:none}ui-card-list-item .cli-description{font-size:.8125rem;color:#64748b;min-width:0}ui-card-list-item .cli-date{display:flex;align-items:center;gap:4px;font-size:.75rem;color:#64748b}ui-card-list-item .cli-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;align-self:center;box-sizing:border-box;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;background:none;cursor:pointer;padding:4px 10px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}ui-card-list-item .cli-chip--edit{color:#64748b;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--edit:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--view{color:#2563eb;border:1px solid #dbeafe}ui-card-list-item .cli-chip--view:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}ui-card-list-item .cli-chip:focus-visible,ui-card-list-item .cli-inline-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-inline-link{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:500;color:#2563eb;text-decoration:none;transition:color .15s}ui-card-list-item .cli-inline-link:hover{color:#1d4ed8}@media(pointer:coarse),(max-width:480px){ui-card-list-item .cli-chip{min-height:44px;padding:4px 14px}}ui-card-list-item [card-stats]{display:flex;align-items:stretch;background:#f8fafc;border-top:1px solid #f1f5f9}ui-card-list-item [card-detail]{background:#f8fafc;border-top:1px solid #e2e8f0}ui-card-list-item .cli-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 14px}ui-card-list-item .cli-stat-label{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}ui-card-list-item .cli-stat-value{font-size:.9375rem;font-weight:600;color:#0f172a}ui-card-list-item .cli-stat-divider{width:1px;background:#e2e8f0;margin:8px 0}\n"]
+			styles: ["ui-card-list-item{position:relative;display:block;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-bottom:8px}ui-card-list-item:last-child{margin-bottom:0}ui-card-list-item .cli-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;transition:background .12s}ui-card-list-item .cli-row:hover{background:#f8fafc}@media(prefers-reduced-motion:reduce){ui-card-list-item .cli-row{transition:none}}ui-card-list-item .cli-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}ui-card-list-item .cli-dot:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-dot--high{background:#ef4444}ui-card-list-item .cli-dot--medium{background:#f59e0b}ui-card-list-item .cli-dot--low{background:#94a3b8}ui-card-list-item .cli-dot--blue{background:#3b82f6}ui-card-list-item .cli-dot--green{background:#22c55e}ui-card-list-item .cli-icon-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}ui-card-list-item .cli-icon-circle--call{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--email{background:#dcfce7;color:#16a34a}ui-card-list-item .cli-icon-circle--sms{background:#fef9c3;color:#ca8a04}ui-card-list-item .cli-icon-circle--task{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--doc{background:#ffedd5;color:#ea580c}ui-card-list-item .cli-icon-circle--money{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--deal{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--survey{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--property{background:#fef3c7;color:#d97706}ui-card-list-item .cli-icon-circle--search{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--heart{background:#fce7f3;color:#db2777}ui-card-list-item .cli-icon-circle--calc{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--repeat{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;word-break:break-word}ui-card-list-item .cli-badges{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;z-index:1}ui-card-list-item .cli-row--badges .cli-body{padding-right:96px}ui-card-list-item .cli-row--badges-2 .cli-body{padding-right:190px}ui-card-list-item .cli-row--badges .cli-chip{align-self:flex-end}ui-card-list-item .cli-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}ui-card-list-item .cli-title{font-size:.875rem;font-weight:600;color:#1e293b}ui-card-list-item .cli-desc-row{display:flex;align-items:center;gap:8px}ui-card-list-item .cli-desc-row:empty{display:none}ui-card-list-item .cli-description{font-size:.8125rem;color:#64748b;min-width:0}ui-card-list-item .cli-date{display:flex;align-items:center;gap:4px;font-size:.75rem;color:#64748b}ui-card-list-item .cli-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;align-self:center;box-sizing:border-box;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;background:none;cursor:pointer;padding:4px 10px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}ui-card-list-item .cli-chip--edit{color:#64748b;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--edit:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--view{color:#2563eb;border:1px solid #dbeafe}ui-card-list-item .cli-chip--view:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}ui-card-list-item .cli-chip--action{color:#475569;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--action:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--delete{position:relative;justify-content:center;width:28px;height:28px;padding:0;color:#b91c1c;border:1px solid #fecaca}ui-card-list-item .cli-chip--delete:hover{background:#fef2f2;border-color:#fca5a5;color:#991b1b}ui-card-list-item .cli-chip--delete:after{content:\"\";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}ui-card-list-item .cli-chip:focus-visible,ui-card-list-item .cli-inline-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-inline-link{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:500;color:#2563eb;text-decoration:none;transition:color .15s}ui-card-list-item .cli-inline-link:hover{color:#1d4ed8}@media(pointer:coarse),(max-width:480px){ui-card-list-item .cli-chip{min-height:44px;padding:4px 14px}ui-card-list-item .cli-chip--delete{min-height:28px;padding:0}}ui-card-list-item [card-stats]{display:flex;align-items:stretch;background:#f8fafc;border-top:1px solid #f1f5f9}ui-card-list-item [card-detail]{background:#f8fafc;border-top:1px solid #e2e8f0}ui-card-list-item .cli-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 14px}ui-card-list-item .cli-stat-label{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}ui-card-list-item .cli-stat-value{font-size:.9375rem;font-weight:600;color:#0f172a}ui-card-list-item .cli-stat-divider{width:1px;background:#e2e8f0;margin:8px 0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -27669,6 +27767,54 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		deletable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deletable",
+				required: false
+			}]
+		}],
+		deleteLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deleteLabel",
+				required: false
+			}]
+		}],
+		deleteTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deleteTestId",
+				required: false
+			}]
+		}],
+		actionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionLabel",
+				required: false
+			}]
+		}],
+		actionTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionTestId",
+				required: false
+			}]
+		}],
+		actionAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionAriaLabel",
+				required: false
+			}]
+		}],
 		editClick: [{
 			type: i0.Output,
 			args: ["editClick"]
@@ -27676,6 +27822,14 @@ i0.ɵɵngDeclareClassMetadata({
 		viewClick: [{
 			type: i0.Output,
 			args: ["viewClick"]
+		}],
+		delete: [{
+			type: i0.Output,
+			args: ["delete"]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
 		}]
 	}
 });
@@ -27756,26 +27910,44 @@ var NotesComponent = class NotesComponent {
 		return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1][0] : "")).toUpperCase();
 	}
 	tooLong(text) {
-		return text.trim().length > NOTES_MAX_LENGTH;
+		return text.trim().length > this.maxLength();
 	}
 	validBody(text) {
 		const n = text.trim().length;
-		return n > 0 && n <= 1e4;
+		return n > 0 && n <= this.maxLength();
 	}
 	get listUrl() {
-		return `${this.apiBase}/notes/${this.resourceType()}/${this.resourceId()}`;
+		return this.basePath() ? `${this.apiBase}${this.basePath()}` : `${this.apiBase}/notes/${this.resourceType()}/${this.resourceId()}`;
+	}
+	noteUrl(id) {
+		return this.basePath() ? `${this.apiBase}${this.basePath()}/${id}` : `${this.apiBase}/notes/${id}`;
+	}
+	get ready() {
+		return !!this.basePath() || !!this.resourceType() && !!this.resourceId();
+	}
+	payload(text) {
+		return this.basePath() ? { content: text.trim() } : { body: text.trim() };
+	}
+	normalize(n) {
+		return {
+			...n,
+			body: n.body ?? n.content ?? "",
+			updatedAt: n.updatedAt ?? n.createdAt
+		};
 	}
 	constructor() {
 		this.resourceType = input("", ...ngDevMode ? [{ debugName: "resourceType" }] : /* istanbul ignore next */ []);
 		this.resourceId = input("", ...ngDevMode ? [{ debugName: "resourceId" }] : /* istanbul ignore next */ []);
+		this.basePath = input("", ...ngDevMode ? [{ debugName: "basePath" }] : /* istanbul ignore next */ []);
 		this.readOnly = input(false, ...ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []);
+		this.editable = input(true, ...ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []);
+		this.maxLength = input(NOTES_MAX_LENGTH, ...ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []);
 		this.totalChange = output();
 		this.http = inject(HttpClient);
 		this.toast = inject(ToastService);
 		this.destroyRef = inject(DestroyRef);
 		this.apiBase = inject(FORGEROUTE_CONFIG, { optional: true })?.baseUrl ?? "/api";
 		this.pageSize = NOTES_PAGE_SIZE;
-		this.maxLength = NOTES_MAX_LENGTH;
 		this.notes = signal([], ...ngDevMode ? [{ debugName: "notes" }] : /* istanbul ignore next */ []);
 		this.loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 		this.saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
@@ -27788,16 +27960,16 @@ var NotesComponent = class NotesComponent {
 		effect(() => {
 			const id = this.resourceId();
 			const type = this.resourceType();
-			if (id && type) untracked(() => this.loadPage(0));
+			if (this.basePath() || id && type) untracked(() => this.loadPage(0));
 		});
 	}
 	loadPage(p) {
-		if (!this.resourceType() || !this.resourceId()) return;
+		if (!this.ready) return;
 		this.loading.set(true);
 		this.http.get(`${this.listUrl}?page=${p}&size=${this.pageSize}`).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 			next: (res) => {
-				this.notes.set(res.content);
-				this.page.set(res.page);
+				this.notes.set(res.content.map((n) => this.normalize(n)));
+				this.page.set(res.page ?? res.number ?? p);
 				this.totalElements.set(res.totalElements);
 				this.loading.set(false);
 				this.totalChange.emit(res.totalElements);
@@ -27811,7 +27983,7 @@ var NotesComponent = class NotesComponent {
 	addNote() {
 		if (this.readOnly() || !this.validBody(this.newBody) || this.saving()) return;
 		this.saving.set(true);
-		this.http.post(this.listUrl, { body: this.newBody.trim() }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+		this.http.post(this.listUrl, this.payload(this.newBody)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 			next: () => {
 				this.newBody = "";
 				this.saving.set(false);
@@ -27824,7 +27996,7 @@ var NotesComponent = class NotesComponent {
 		});
 	}
 	startEdit(note) {
-		if (this.readOnly()) return;
+		if (this.readOnly() || !this.editable()) return;
 		this.editingId.set(note.id);
 		this.editBody = note.body;
 	}
@@ -27833,11 +28005,11 @@ var NotesComponent = class NotesComponent {
 		this.editBody = "";
 	}
 	saveEdit(noteId) {
-		if (this.readOnly() || !this.validBody(this.editBody) || this.saving()) return;
+		if (this.readOnly() || !this.editable() || !this.validBody(this.editBody) || this.saving()) return;
 		this.saving.set(true);
-		this.http.put(`${this.apiBase}/notes/${noteId}`, { body: this.editBody.trim() }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+		this.http.put(this.noteUrl(noteId), this.payload(this.editBody)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 			next: (updated) => {
-				this.notes.update((arr) => arr.map((n) => n.id === noteId ? updated : n));
+				this.notes.update((arr) => arr.map((n) => n.id === noteId ? this.normalize(updated) : n));
 				this.editingId.set(null);
 				this.saving.set(false);
 			},
@@ -27855,7 +28027,7 @@ var NotesComponent = class NotesComponent {
 		const id = this.deletingId();
 		if (this.readOnly() || !id || this.saving()) return;
 		this.saving.set(true);
-		this.http.delete(`${this.apiBase}/notes/${id}`).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+		this.http.delete(this.noteUrl(id)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 			next: () => {
 				this.deletingId.set(null);
 				this.saving.set(false);
@@ -27900,12 +28072,33 @@ var NotesComponent = class NotesComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				basePath: {
+					classPropertyName: "basePath",
+					publicName: "basePath",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				readOnly: {
 					classPropertyName: "readOnly",
 					publicName: "readOnly",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				editable: {
+					classPropertyName: "editable",
+					publicName: "editable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxLength: {
+					classPropertyName: "maxLength",
+					publicName: "maxLength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { totalChange: "totalChange" },
@@ -27913,7 +28106,7 @@ var NotesComponent = class NotesComponent {
 			template: `
     @if (!readOnly()) {
       <div class="note-add">
-        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(newBody)" [disabled]="saving()" [(ngModel)]="newBody"
+        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [maxlength]="maxLength()" [showErrors]="tooLong(newBody)" [disabled]="saving()" [(ngModel)]="newBody"
           (keydown.meta.enter)="addNote()" (keydown.control.enter)="addNote()" />
         <div class="note-add-footer">
           <ui-button variant="primary" size="sm" data-testid="note-add-btn" [loading]="saving()" [disabled]="!validBody(newBody)" (click)="addNote()">Add Note</ui-button>
@@ -27940,13 +28133,15 @@ var NotesComponent = class NotesComponent {
                 }
                 @if (!readOnly() && editingId() !== note.id) {
                   <div class="note-actions">
-                    <ui-icon name="edit" [size]="14" tooltip="Edit note" (iconClick)="startEdit(note)" />
+                    @if (editable()) {
+                      <ui-icon name="edit" [size]="14" tooltip="Edit note" (iconClick)="startEdit(note)" />
+                    }
                     <ui-icon name="delete" variant="danger" [size]="14" tooltip="Delete note" (iconClick)="confirmDelete(note.id)" />
                   </div>
                 }
               </div>
               @if (editingId() === note.id) {
-                <ui-textarea-input ariaLabel="Edit note" [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(editBody)" [disabled]="saving()" [(ngModel)]="editBody" />
+                <ui-textarea-input ariaLabel="Edit note" [rows]="3" [maxlength]="maxLength()" [showErrors]="tooLong(editBody)" [disabled]="saving()" [(ngModel)]="editBody" />
                 <div class="note-item-footer">
                   <ui-button variant="secondary" size="sm" (click)="cancelEdit()">Cancel</ui-button>
                   <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="!validBody(editBody)" (click)="saveEdit(note.id)">Save</ui-button>
@@ -28156,7 +28351,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     @if (!readOnly()) {
       <div class="note-add">
-        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(newBody)" [disabled]="saving()" [(ngModel)]="newBody"
+        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [maxlength]="maxLength()" [showErrors]="tooLong(newBody)" [disabled]="saving()" [(ngModel)]="newBody"
           (keydown.meta.enter)="addNote()" (keydown.control.enter)="addNote()" />
         <div class="note-add-footer">
           <ui-button variant="primary" size="sm" data-testid="note-add-btn" [loading]="saving()" [disabled]="!validBody(newBody)" (click)="addNote()">Add Note</ui-button>
@@ -28183,13 +28378,15 @@ i0.ɵɵngDeclareClassMetadata({
                 }
                 @if (!readOnly() && editingId() !== note.id) {
                   <div class="note-actions">
-                    <ui-icon name="edit" [size]="14" tooltip="Edit note" (iconClick)="startEdit(note)" />
+                    @if (editable()) {
+                      <ui-icon name="edit" [size]="14" tooltip="Edit note" (iconClick)="startEdit(note)" />
+                    }
                     <ui-icon name="delete" variant="danger" [size]="14" tooltip="Delete note" (iconClick)="confirmDelete(note.id)" />
                   </div>
                 }
               </div>
               @if (editingId() === note.id) {
-                <ui-textarea-input ariaLabel="Edit note" [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(editBody)" [disabled]="saving()" [(ngModel)]="editBody" />
+                <ui-textarea-input ariaLabel="Edit note" [rows]="3" [maxlength]="maxLength()" [showErrors]="tooLong(editBody)" [disabled]="saving()" [(ngModel)]="editBody" />
                 <div class="note-item-footer">
                   <ui-button variant="secondary" size="sm" (click)="cancelEdit()">Cancel</ui-button>
                   <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="!validBody(editBody)" (click)="saveEdit(note.id)">Save</ui-button>
@@ -28231,6 +28428,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		basePath: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "basePath",
+				required: false
+			}]
+		}],
 		readOnly: [{
 			type: i0.Input,
 			args: [{
@@ -28239,6 +28444,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		editable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editable",
+				required: false
+			}]
+		}],
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
 		totalChange: [{
 			type: i0.Output,
 			args: ["totalChange"]
@@ -40097,6 +40318,10 @@ var CalendarComponent = class CalendarComponent {
 	constructor() {
 		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.loadingActions = input(2, {
+			...ngDevMode ? { debugName: "loadingActions" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
 		this.view = model("month", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
 		this.views = input([
 			"week",
@@ -40136,6 +40361,24 @@ var CalendarComponent = class CalendarComponent {
 			"Saturday"
 		];
 		this.skeletonCells = Array.from({ length: 42 }, (_, i) => i);
+		this.skeletonDays = Array.from({ length: 7 }, (_, i) => i);
+		this.skeletonRows = Array.from({ length: 4 }, (_, i) => i);
+		this.loadPhase = linkedSignal({
+			...ngDevMode ? { debugName: "loadPhase" } : /* istanbul ignore next */ {},
+			source: this.loading,
+			computation: (loading, prev) => {
+				const p = prev?.value ?? "idle";
+				return loading ? p === "idle" ? "first" : p : p === "first" ? "loaded" : p;
+			}
+		});
+		this.showOutline = computed(() => {
+			const phase = this.loadPhase();
+			return this.loading() && phase !== "loaded" && this.items().length === 0;
+		}, ...ngDevMode ? [{ debugName: "showOutline" }] : /* istanbul ignore next */ []);
+		this.loadingActionSlots = computed(() => {
+			const n = Number(this.loadingActions());
+			return Array.from({ length: Number.isFinite(n) ? Math.max(0, Math.min(6, Math.floor(n))) : 0 }, (_, i) => i);
+		}, ...ngDevMode ? [{ debugName: "loadingActionSlots" }] : /* istanbul ignore next */ []);
 		this.formatHour = formatHour;
 		this.clockToday = signal(toDateStr(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "clockToday" }] : /* istanbul ignore next */ []);
 		this.todayStr = computed(() => {
@@ -40467,6 +40710,13 @@ var CalendarComponent = class CalendarComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				loadingActions: {
+					classPropertyName: "loadingActions",
+					publicName: "loadingActions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				view: {
 					classPropertyName: "view",
 					publicName: "view",
@@ -40606,6 +40856,97 @@ var CalendarComponent = class CalendarComponent {
 			},
 			ngImport: i0,
 			template: `
+    @if (showOutline()) {
+      <!-- First load: an outline of the whole page (toolbar, filter bar, grid) built only from decorative skeletons. One status region. -->
+      <div class="cal-outline" data-testid="calendar-skeleton" role="status" aria-busy="true" aria-label="Loading calendar">
+        <div class="cal-header">
+          <div class="cal-toolbar">
+            <div class="toolbar-left">
+              <div class="skel-period-wrap"><ui-skeleton class="skel-period" [height]="40" [radius]="8" /></div>
+              @if (!filters().length) {
+                <div class="nav-controls skel-nav-controls">
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="76px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                </div>
+              }
+            </div>
+            <div class="toolbar-center"></div>
+            <div class="toolbar-right">
+              @if (viewTabs().length > 1) {
+                <div class="skel-tabs">
+                  @for (t of viewTabs(); track t.key) { <ui-skeleton class="skel-tab" [height]="34" width="72px" [radius]="17" /> }
+                </div>
+              }
+              @if (loadingActionSlots().length) {
+                <div class="toolbar-actions">
+                  @for (a of loadingActionSlots(); track a) { <ui-skeleton class="skel-action" [height]="38" width="112px" [radius]="10" /> }
+                </div>
+              }
+            </div>
+          </div>
+          @if (filters().length) {
+            <div class="filter-bar">
+              <div class="filter-main">
+                @if (filterLabel()) { <ui-skeleton class="skel-filter-label" [height]="12" width="80px" [radius]="4" /> }
+                <div class="filter-chips">
+                  <ui-skeleton class="skel-chip" [height]="28" width="56px" [radius]="14" />
+                  @for (f of filters(); track f.value) { <ui-skeleton class="skel-chip" [height]="28" width="88px" [radius]="14" /> }
+                </div>
+              </div>
+              <div class="filter-nav">
+                <div class="nav-controls skel-nav-controls">
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="76px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+        <div class="outline-grid">
+          @if (view() !== 'agenda') {
+            <div class="skel-dow-row">
+              @for (d of weekDayLabels; track d) { <div class="skel-dow"><ui-skeleton [height]="16" width="36px" [radius]="4" /></div> }
+            </div>
+          }
+          @switch (view()) {
+            @case ('month') {
+              <div class="skel-month-grid">
+                @for (i of skeletonCells; track i) {
+                  <div class="skel-cell">
+                    <ui-skeleton [height]="22" width="22px" [radius]="11" />
+                    @if (i % 3 === 0) { <ui-skeleton [height]="14" [radius]="3" /> }
+                    @if (i % 5 === 0) { <ui-skeleton [height]="14" width="72%" [radius]="3" /> }
+                  </div>
+                }
+              </div>
+            }
+            @case ('week') {
+              <div class="skel-week-grid">
+                @for (i of skeletonDays; track i) {
+                  <div class="skel-cell">
+                    <ui-skeleton [height]="14" [radius]="3" />
+                    @if (i % 2 === 0) { <ui-skeleton [height]="48" [radius]="6" /> }
+                    @if (i % 3 === 0) { <ui-skeleton [height]="32" width="72%" [radius]="6" /> }
+                  </div>
+                }
+              </div>
+            }
+            @default {
+              <div class="skel-agenda">
+                @for (i of skeletonRows; track i) {
+                  <div class="skel-row">
+                    <ui-skeleton class="skel-row-date" [height]="40" width="64px" [radius]="6" />
+                    <div class="skel-row-body"><ui-skeleton [height]="16" width="60%" [radius]="4" /><ui-skeleton [height]="12" width="35%" [radius]="4" /></div>
+                  </div>
+                }
+              </div>
+            }
+          }
+        </div>
+      </div>
+    } @else {
     <!-- Previous / Today / Next: right-aligned in the filter row when there is one, else next to the period label -->
     <ng-template #navControls>
       <div class="nav-controls">
@@ -40630,7 +40971,7 @@ var CalendarComponent = class CalendarComponent {
         @if (viewTabs().length > 1) {
           <ui-pill-tabs ariaLabel="Calendar view" name="ui-calendar-view" [tabs]="viewTabs()" [activeKey]="view()" (tabChange)="setView($any($event))" />
         }
-        <ng-content select="[calendar-actions]" />
+        <div class="toolbar-actions"><ng-content select="[calendar-actions]" /></div>
       </div>
     </div>
 
@@ -40820,10 +41161,11 @@ var CalendarComponent = class CalendarComponent {
         }
       }
     }
+    }
     <ui-toast />
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}.cal-header{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 2px #0f172a0a;margin-bottom:12px;flex-shrink:0}.cal-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 20px;gap:16px;flex-shrink:0}.toolbar-left{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;column-gap:20px;row-gap:8px;min-width:0}.toolbar-center{display:flex;align-items:center;justify-content:center;gap:10px}.toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.period-label{font-size:2.5rem;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:#0f172a;margin:0;min-width:0}.pl-sub{font-weight:600;color:#64748b}.nav-controls{display:inline-flex;align-items:center}.nav-controls>*+*{margin-left:-1px}.btn-nav{width:38px;height:38px;border:1px solid #cbd5e1;background:#fff;font-family:inherit;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569;transition:background .12s,color .12s}.nav-controls>.btn-nav:first-child{border-radius:10px 0 0 10px}.nav-controls>.btn-nav:last-child{border-radius:0 10px 10px 0}.btn-today{padding:0 18px;height:38px;border:1px solid #cbd5e1;background:#fff;border-radius:0;font-family:inherit;position:relative;font-size:.9375rem;font-weight:600;color:#1d4ed8;cursor:pointer;transition:background .12s}.btn-nav:hover,.btn-today:hover{background:#eff6ff;color:#1d4ed8;z-index:1}.btn-nav:active,.btn-today:active{background:#dbeafe}.btn-nav:focus-visible,.btn-today:focus-visible,.filter-chip:focus-visible,.event-chip:focus-visible,.more-events:focus-visible,.allday-chip:focus-visible,.timed-event:focus-visible,.agenda-event:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.month-cell:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.slot-add:focus,.slot-add:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.mobile-summary{display:none}.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:12px 20px 14px;border-top:1px solid #eef2f7;background:#f8fafc;border-radius:0 0 12px 12px;flex-shrink:0}.filter-main{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}.filter-nav{margin-left:auto;flex-shrink:0}.filter-bar-label{font-size:.6875rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}.filter-chip:hover{border-color:#cbd5e1;background:#f8fafc}.filter-chip.active-all{background:#1e293b;color:#fff;border-color:#1e293b}.filter-chip.active-all .chip-count{background:#fff3;color:#fff}.filter-chip.active-type{background:var(--chip-bg, #f1f5f9);color:#1e293b;border-color:var(--chip-color);font-weight:600}.filter-chip.active-type .chip-count{background:var(--chip-color);color:#fff}.chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.chip-count{font-size:.6875rem;font-weight:700;background:#f1f5f9;background:color-mix(in srgb,var(--chip-color, #64748b) 14%,#fff);color:#475569;padding:1px 8px;border-radius:999px;min-width:18px;text-align:center;box-sizing:border-box}.cal-skeleton,.month-view,.week-view,.agenda-view{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.skel-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.skel-dow{display:flex;justify-content:center}.skel-month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,minmax(80px,1fr));flex:1}.skel-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:8px 6px;display:flex;flex-direction:column;gap:6px}.skel-cell:nth-child(7n){border-right:none}.month-grid{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;position:sticky;top:0;z-index:1}.month-dow{padding:10px 8px;font-size:.75rem;font-weight:600;color:#6b7280;text-align:center;text-transform:uppercase;letter-spacing:.04em}.dow-short{display:none}.month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1 0 120px}.month-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:6px 6px 4px;min-height:120px;transition:background .1s;min-width:0;box-sizing:border-box}.month-cell.clickable{cursor:pointer}.month-cell.clickable:hover{background:#f8fafc}.month-cell:nth-child(7n){border-right:none}.month-cell.other-month{background:#fafafa}.month-cell.other-month .day-num{color:#64748b}.month-cell.today{background:#eff6ff}.day-num{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-size:.8125rem;font-weight:500;color:#374151;margin-bottom:4px}.today-badge{background:#2563eb;color:#fff;font-weight:700}.cell-events{display:flex;flex-direction:column;gap:2px}.event-chip{display:flex;align-items:center;gap:3px;padding:2px 6px;width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;cursor:pointer;overflow:hidden}.event-chip:hover{opacity:.85}.event-chip.stacked{flex-direction:column;align-items:flex-start;gap:0}.chip-head{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.chip-icon{flex-shrink:0}.chip-time{font-weight:700;flex-shrink:0;color:#1e293b}.chip-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;min-width:0;max-width:100%}.strike{text-decoration:line-through}.chip-src{font-size:.625rem;font-weight:700;margin-left:auto;flex-shrink:0;color:#1e293b}.more-events{font-size:.6875rem;color:#2563eb;font-weight:600;cursor:pointer;padding:1px 6px;border:0;background:none;text-align:left;font-family:inherit}.more-events:hover{text-decoration:underline}.week-view{overflow:auto}.week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;overflow-y:scroll}.time-gutter{border-right:1px solid #e2e8f0}.week-day-hdr{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-right:1px solid #f1f5f9}.week-day-hdr.today{background:#eff6ff}.week-day-hdr:last-child{border-right:none}.wdh-dow{font-size:.6875rem;font-weight:600;color:#6b7280;text-transform:uppercase}.wdh-num{width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-size:.9375rem;font-weight:600;color:#374151;margin-top:2px}.wdh-num.today-badge{background:#2563eb;color:#fff;font-weight:700}.allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;min-height:32px;flex-shrink:0;overflow-y:scroll}.allday-label{font-size:.625rem;color:#64748b;font-weight:600;text-transform:uppercase;display:flex;align-items:center;justify-content:center}.slot-add{position:absolute;top:2px;left:2px;z-index:3;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap;font-family:inherit}.slot-add:focus,.slot-add:focus-visible{width:auto;height:auto;padding:2px 8px;clip-path:none;background:#1e293b;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}.allday-cell{position:relative;border-right:1px solid #f1f5f9;padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0}.allday-cell.clickable{cursor:pointer}.allday-cell:last-child{border-right:none}.allday-chip{padding:2px 6px;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;color:#1e293b;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-family:inherit}.allday-chip:hover{opacity:.85}.week-body{display:grid;grid-template-columns:60px repeat(7,1fr);flex:1;overflow-y:scroll}.time-col{display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0}.time-slot-label{height:60px;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0;font-size:.6875rem;color:#64748b;font-weight:500;border-bottom:1px solid #f1f5f9;flex-shrink:0;box-sizing:border-box}.day-col{position:relative;border-right:1px solid #f1f5f9;min-width:0}.day-col.clickable{cursor:pointer}.day-col:last-child{border-right:none}.day-col.today{background:#fafbff}.time-slot{height:60px;border-bottom:1px solid #f1f5f9;box-sizing:border-box}.day-col.clickable .time-slot:hover{background:#f8fafc}.timed-event{position:absolute;min-height:20px;border:0;border-radius:6px;padding:3px 6px;overflow:hidden;cursor:pointer;box-sizing:border-box;border-left:3px solid transparent;display:flex;flex-direction:column;align-items:flex-start;gap:1px;box-shadow:0 1px 3px #00000014;text-align:left;font-family:inherit}.timed-event:hover{opacity:.85}.te-title{font-size:.6875rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.te-time{font-size:.625rem;color:#475569}.agenda-view{overflow-y:auto}.agenda-group{display:flex;border-bottom:1px solid #f1f5f9}.agenda-date-hdr{width:100px;flex-shrink:0;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-right:2px solid #e2e8f0}.ag-dow{font-size:.6875rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.ag-date{font-size:.8125rem;font-weight:600;color:#374151}.agenda-events{flex:1;display:flex;flex-direction:column;min-width:0}.agenda-event{display:flex;align-items:stretch;padding:10px 12px;cursor:pointer;border:0;border-bottom:1px solid #f8fafc;background:none;text-align:left;width:100%;font-family:inherit;transition:background .1s}.agenda-event:hover{background:#f8fafc}.agenda-event:last-child{border-bottom:none}.ae-color-bar{display:block;width:4px;border-radius:4px;flex-shrink:0;margin-right:12px}.ae-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ae-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ae-title{font-size:.9375rem;font-weight:600;color:#111827}.ae-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ae-meta-item{font-size:.8125rem;color:#6b7280}@media(prefers-reduced-motion:reduce){.btn-nav,.btn-today,.filter-chip,.month-cell,.agenda-event{transition:none}}@media(pointer:coarse),(max-width:480px){.btn-nav,.btn-today,.filter-chip,.event-chip,.more-events,.allday-chip,.agenda-event{min-height:44px}.btn-nav{min-width:44px}}@media(max-width:768px){.cal-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px}.toolbar-left{flex:1 1 auto}.toolbar-right{flex:0 1 auto;min-width:0;max-width:100%}.toolbar-center{display:none}.period-label{font-size:1.875rem}.toolbar-right{justify-content:flex-end}.mobile-summary{display:block;margin-bottom:4px;flex-shrink:0}.mobile-summary:empty{display:none}.filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.filter-main{flex-basis:100%}.month-view,.cal-skeleton,.week-view{overflow-x:auto;-webkit-overflow-scrolling:touch}.month-grid,.skel-month-grid,.skel-dow-row{min-width:560px}.month-row{flex-basis:80px}.month-cell{min-height:80px}.week-header,.allday-row,.week-body{min-width:640px}.agenda-date-hdr{width:76px;padding:12px 8px}.ae-title{font-size:.875rem}}@media(max-width:640px){.event-chip.stacked.has-head .chip-title{display:none}}@media(max-width:640px){.cal-toolbar{padding:14px}.period-label{font-size:1.625rem}.filter-bar{padding:10px 14px 12px}.filter-nav{width:100%;margin-left:0}.filter-nav .nav-controls{display:flex;width:100%}.filter-nav .btn-today{flex:1 1 auto}.chip-head{flex-wrap:wrap;row-gap:0;flex-shrink:1;min-width:0}.chip-time{white-space:normal;line-height:1.1;flex-shrink:1;min-width:0;overflow-wrap:anywhere}.event-chip.stacked{flex-wrap:nowrap}.month-view,.cal-skeleton{overflow-x:hidden}.month-grid,.skel-month-grid,.skel-dow-row{min-width:0}.month-dow{padding:8px 2px;font-size:.6875rem;letter-spacing:0}.month-row{flex-basis:72px}.month-cell{min-height:72px;padding:3px 2px 2px}.day-num{width:22px;height:22px;line-height:22px;font-size:.75rem;margin-bottom:2px}.cell-events{gap:1px}.event-chip{min-height:24px;padding:1px 3px;font-size:.625rem;gap:2px}.more-events{min-height:24px;padding:1px 3px;font-size:.625rem;white-space:normal;line-height:1.1;max-width:100%}}@media(max-width:480px){.dow-full{display:none}.dow-short{display:inline}}\n"],
+			styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}.cal-header{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 2px #0f172a0a;margin-bottom:12px;flex-shrink:0}.cal-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 20px;gap:16px;flex-shrink:0}.toolbar-left{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;column-gap:20px;row-gap:8px;min-width:0}.toolbar-center{display:flex;align-items:center;justify-content:center;gap:10px}.toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}.toolbar-actions:empty{display:none}ui-pill-tabs+.toolbar-actions:not(:empty){margin-left:4px;padding-left:12px;border-left:1px solid #e2e8f0;align-self:stretch}@media(max-width:480px){.toolbar-actions{flex-wrap:wrap}}.period-label{font-size:2.5rem;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:#0f172a;margin:0;min-width:0}.pl-sub{font-weight:600;color:#64748b}.nav-controls{display:inline-flex;align-items:center}.nav-controls>*+*{margin-left:-1px}.btn-nav{width:38px;height:38px;border:1px solid #cbd5e1;background:#fff;font-family:inherit;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569;transition:background .12s,color .12s}.nav-controls>.btn-nav:first-child{border-radius:10px 0 0 10px}.nav-controls>.btn-nav:last-child{border-radius:0 10px 10px 0}.btn-today{padding:0 18px;height:38px;border:1px solid #cbd5e1;background:#fff;border-radius:0;font-family:inherit;position:relative;font-size:.9375rem;font-weight:600;color:#1d4ed8;cursor:pointer;transition:background .12s}.btn-nav:hover,.btn-today:hover{background:#eff6ff;color:#1d4ed8;z-index:1}.btn-nav:active,.btn-today:active{background:#dbeafe}.btn-nav:focus-visible,.btn-today:focus-visible,.filter-chip:focus-visible,.event-chip:focus-visible,.more-events:focus-visible,.allday-chip:focus-visible,.timed-event:focus-visible,.agenda-event:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.month-cell:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.slot-add:focus,.slot-add:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.mobile-summary{display:none}.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:12px 20px 14px;border-top:1px solid #eef2f7;background:#f8fafc;border-radius:0 0 12px 12px;flex-shrink:0}.filter-main{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}.filter-nav{margin-left:auto;flex-shrink:0}.filter-bar-label{font-size:.6875rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}.filter-chip:hover{border-color:#cbd5e1;background:#f8fafc}.filter-chip.active-all{background:#1e293b;color:#fff;border-color:#1e293b}.filter-chip.active-all .chip-count{background:#fff3;color:#fff}.filter-chip.active-type{background:var(--chip-bg, #f1f5f9);color:#1e293b;border-color:var(--chip-color);font-weight:600}.filter-chip.active-type .chip-count{background:var(--chip-color);color:#fff}.chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.chip-count{font-size:.6875rem;font-weight:700;background:#f1f5f9;background:color-mix(in srgb,var(--chip-color, #64748b) 14%,#fff);color:#475569;padding:1px 8px;border-radius:999px;min-width:18px;text-align:center;box-sizing:border-box}.cal-skeleton,.outline-grid,.month-view,.week-view,.agenda-view{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.skel-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.skel-dow{display:flex;justify-content:center}.skel-month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,minmax(80px,1fr));flex:1}.skel-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:8px 6px;display:flex;flex-direction:column;gap:6px}.skel-cell:nth-child(7n){border-right:none}.cal-outline{flex:1;display:flex;flex-direction:column;min-height:0}.cal-outline ui-skeleton{display:block;flex-shrink:0}.skel-period-wrap{width:240px;max-width:100%;min-width:0}.skel-nav-controls{gap:2px}.skel-nav-controls>*+*{margin-left:0}.skel-tabs{display:flex;align-items:center;gap:6px}.skel-tabs+.toolbar-actions:not(:empty){margin-left:4px;padding-left:12px;border-left:1px solid #e2e8f0;align-self:stretch}.skel-week-grid{display:grid;grid-template-columns:repeat(7,1fr);flex:1;min-height:360px}.skel-agenda{display:flex;flex-direction:column;flex:1}.skel-row{display:flex;align-items:center;gap:16px;padding:16px 12px;border-bottom:1px solid #f1f5f9}.skel-row-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}.month-grid{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;position:sticky;top:0;z-index:1}.month-dow{padding:10px 8px;font-size:.75rem;font-weight:600;color:#6b7280;text-align:center;text-transform:uppercase;letter-spacing:.04em}.dow-short{display:none}.month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1 0 120px}.month-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:6px 6px 4px;min-height:120px;transition:background .1s;min-width:0;box-sizing:border-box}.month-cell.clickable{cursor:pointer}.month-cell.clickable:hover{background:#f8fafc}.month-cell:nth-child(7n){border-right:none}.month-cell.other-month{background:#fafafa}.month-cell.other-month .day-num{color:#64748b}.month-cell.today{background:#eff6ff}.day-num{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-size:.8125rem;font-weight:500;color:#374151;margin-bottom:4px}.today-badge{background:#2563eb;color:#fff;font-weight:700}.cell-events{display:flex;flex-direction:column;gap:2px}.event-chip{display:flex;align-items:center;gap:3px;padding:2px 6px;width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;cursor:pointer;overflow:hidden}.event-chip:hover{opacity:.85}.event-chip.stacked{flex-direction:column;align-items:flex-start;gap:0}.chip-head{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.chip-icon{flex-shrink:0}.chip-time{font-weight:700;flex-shrink:0;color:#1e293b}.chip-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;min-width:0;max-width:100%}.strike{text-decoration:line-through}.chip-src{font-size:.625rem;font-weight:700;margin-left:auto;flex-shrink:0;color:#1e293b}.more-events{font-size:.6875rem;color:#2563eb;font-weight:600;cursor:pointer;padding:1px 6px;border:0;background:none;text-align:left;font-family:inherit}.more-events:hover{text-decoration:underline}.week-view{overflow:auto}.week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;overflow-y:scroll}.time-gutter{border-right:1px solid #e2e8f0}.week-day-hdr{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-right:1px solid #f1f5f9}.week-day-hdr.today{background:#eff6ff}.week-day-hdr:last-child{border-right:none}.wdh-dow{font-size:.6875rem;font-weight:600;color:#6b7280;text-transform:uppercase}.wdh-num{width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-size:.9375rem;font-weight:600;color:#374151;margin-top:2px}.wdh-num.today-badge{background:#2563eb;color:#fff;font-weight:700}.allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;min-height:32px;flex-shrink:0;overflow-y:scroll}.allday-label{font-size:.625rem;color:#64748b;font-weight:600;text-transform:uppercase;display:flex;align-items:center;justify-content:center}.slot-add{position:absolute;top:2px;left:2px;z-index:3;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap;font-family:inherit}.slot-add:focus,.slot-add:focus-visible{width:auto;height:auto;padding:2px 8px;clip-path:none;background:#1e293b;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}.allday-cell{position:relative;border-right:1px solid #f1f5f9;padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0}.allday-cell.clickable{cursor:pointer}.allday-cell:last-child{border-right:none}.allday-chip{padding:2px 6px;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;color:#1e293b;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-family:inherit}.allday-chip:hover{opacity:.85}.week-body{display:grid;grid-template-columns:60px repeat(7,1fr);flex:1;overflow-y:scroll}.time-col{display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0}.time-slot-label{height:60px;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0;font-size:.6875rem;color:#64748b;font-weight:500;border-bottom:1px solid #f1f5f9;flex-shrink:0;box-sizing:border-box}.day-col{position:relative;border-right:1px solid #f1f5f9;min-width:0}.day-col.clickable{cursor:pointer}.day-col:last-child{border-right:none}.day-col.today{background:#fafbff}.time-slot{height:60px;border-bottom:1px solid #f1f5f9;box-sizing:border-box}.day-col.clickable .time-slot:hover{background:#f8fafc}.timed-event{position:absolute;min-height:20px;border:0;border-radius:6px;padding:3px 6px;overflow:hidden;cursor:pointer;box-sizing:border-box;border-left:3px solid transparent;display:flex;flex-direction:column;align-items:flex-start;gap:1px;box-shadow:0 1px 3px #00000014;text-align:left;font-family:inherit}.timed-event:hover{opacity:.85}.te-title{font-size:.6875rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.te-time{font-size:.625rem;color:#475569}.agenda-view{overflow-y:auto}.agenda-group{display:flex;border-bottom:1px solid #f1f5f9}.agenda-date-hdr{width:100px;flex-shrink:0;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-right:2px solid #e2e8f0}.ag-dow{font-size:.6875rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.ag-date{font-size:.8125rem;font-weight:600;color:#374151}.agenda-events{flex:1;display:flex;flex-direction:column;min-width:0}.agenda-event{display:flex;align-items:stretch;padding:10px 12px;cursor:pointer;border:0;border-bottom:1px solid #f8fafc;background:none;text-align:left;width:100%;font-family:inherit;transition:background .1s}.agenda-event:hover{background:#f8fafc}.agenda-event:last-child{border-bottom:none}.ae-color-bar{display:block;width:4px;border-radius:4px;flex-shrink:0;margin-right:12px}.ae-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ae-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ae-title{font-size:.9375rem;font-weight:600;color:#111827}.ae-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ae-meta-item{font-size:.8125rem;color:#6b7280}@media(prefers-reduced-motion:reduce){.btn-nav,.btn-today,.filter-chip,.month-cell,.agenda-event{transition:none}}@media(pointer:coarse),(max-width:480px){.btn-nav,.btn-today,.filter-chip,.event-chip,.more-events,.allday-chip,.agenda-event{min-height:44px}.btn-nav{min-width:44px}}@media(max-width:768px){.cal-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px}.toolbar-left{flex:1 1 auto}.toolbar-right{flex:0 1 auto;min-width:0;max-width:100%}.toolbar-center{display:none}.period-label{font-size:1.875rem}.toolbar-right{justify-content:flex-end}.mobile-summary{display:block;margin-bottom:4px;flex-shrink:0}.mobile-summary:empty{display:none}.filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.filter-main{flex-basis:100%}.month-view,.cal-skeleton,.outline-grid,.week-view{overflow-x:auto;-webkit-overflow-scrolling:touch}.month-grid,.skel-month-grid,.skel-week-grid,.skel-dow-row{min-width:560px}.month-row{flex-basis:80px}.month-cell{min-height:80px}.week-header,.allday-row,.week-body{min-width:640px}.agenda-date-hdr{width:76px;padding:12px 8px}.ae-title{font-size:.875rem}}@media(max-width:640px){.event-chip.stacked.has-head .chip-title{display:none}}@media(max-width:640px){.cal-toolbar{padding:14px}.period-label{font-size:1.625rem}.filter-bar{padding:10px 14px 12px}.filter-nav{width:100%;margin-left:0}.filter-nav .nav-controls{display:flex;width:100%}.filter-nav .btn-today{flex:1 1 auto}.chip-head{flex-wrap:wrap;row-gap:0;flex-shrink:1;min-width:0}.chip-time{white-space:normal;line-height:1.1;flex-shrink:1;min-width:0;overflow-wrap:anywhere}.event-chip.stacked{flex-wrap:nowrap}.month-view,.cal-skeleton,.outline-grid{overflow-x:hidden}.month-grid,.skel-month-grid,.skel-week-grid,.skel-dow-row{min-width:0}.month-dow{padding:8px 2px;font-size:.6875rem;letter-spacing:0}.month-row{flex-basis:72px}.month-cell{min-height:72px;padding:3px 2px 2px}.day-num{width:22px;height:22px;line-height:22px;font-size:.75rem;margin-bottom:2px}.cell-events{gap:1px}.event-chip{min-height:24px;padding:1px 3px;font-size:.625rem;gap:2px}.more-events{min-height:24px;padding:1px 3px;font-size:.625rem;white-space:normal;line-height:1.1;max-width:100%}}@media(max-width:480px){.dow-full{display:none}.dow-short{display:inline}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -40908,6 +41250,97 @@ i0.ɵɵngDeclareClassMetadata({
 				ToastComponent
 			],
 			template: `
+    @if (showOutline()) {
+      <!-- First load: an outline of the whole page (toolbar, filter bar, grid) built only from decorative skeletons. One status region. -->
+      <div class="cal-outline" data-testid="calendar-skeleton" role="status" aria-busy="true" aria-label="Loading calendar">
+        <div class="cal-header">
+          <div class="cal-toolbar">
+            <div class="toolbar-left">
+              <div class="skel-period-wrap"><ui-skeleton class="skel-period" [height]="40" [radius]="8" /></div>
+              @if (!filters().length) {
+                <div class="nav-controls skel-nav-controls">
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="76px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                </div>
+              }
+            </div>
+            <div class="toolbar-center"></div>
+            <div class="toolbar-right">
+              @if (viewTabs().length > 1) {
+                <div class="skel-tabs">
+                  @for (t of viewTabs(); track t.key) { <ui-skeleton class="skel-tab" [height]="34" width="72px" [radius]="17" /> }
+                </div>
+              }
+              @if (loadingActionSlots().length) {
+                <div class="toolbar-actions">
+                  @for (a of loadingActionSlots(); track a) { <ui-skeleton class="skel-action" [height]="38" width="112px" [radius]="10" /> }
+                </div>
+              }
+            </div>
+          </div>
+          @if (filters().length) {
+            <div class="filter-bar">
+              <div class="filter-main">
+                @if (filterLabel()) { <ui-skeleton class="skel-filter-label" [height]="12" width="80px" [radius]="4" /> }
+                <div class="filter-chips">
+                  <ui-skeleton class="skel-chip" [height]="28" width="56px" [radius]="14" />
+                  @for (f of filters(); track f.value) { <ui-skeleton class="skel-chip" [height]="28" width="88px" [radius]="14" /> }
+                </div>
+              </div>
+              <div class="filter-nav">
+                <div class="nav-controls skel-nav-controls">
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="76px" [radius]="10" />
+                  <ui-skeleton class="skel-nav" [height]="38" width="38px" [radius]="10" />
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+        <div class="outline-grid">
+          @if (view() !== 'agenda') {
+            <div class="skel-dow-row">
+              @for (d of weekDayLabels; track d) { <div class="skel-dow"><ui-skeleton [height]="16" width="36px" [radius]="4" /></div> }
+            </div>
+          }
+          @switch (view()) {
+            @case ('month') {
+              <div class="skel-month-grid">
+                @for (i of skeletonCells; track i) {
+                  <div class="skel-cell">
+                    <ui-skeleton [height]="22" width="22px" [radius]="11" />
+                    @if (i % 3 === 0) { <ui-skeleton [height]="14" [radius]="3" /> }
+                    @if (i % 5 === 0) { <ui-skeleton [height]="14" width="72%" [radius]="3" /> }
+                  </div>
+                }
+              </div>
+            }
+            @case ('week') {
+              <div class="skel-week-grid">
+                @for (i of skeletonDays; track i) {
+                  <div class="skel-cell">
+                    <ui-skeleton [height]="14" [radius]="3" />
+                    @if (i % 2 === 0) { <ui-skeleton [height]="48" [radius]="6" /> }
+                    @if (i % 3 === 0) { <ui-skeleton [height]="32" width="72%" [radius]="6" /> }
+                  </div>
+                }
+              </div>
+            }
+            @default {
+              <div class="skel-agenda">
+                @for (i of skeletonRows; track i) {
+                  <div class="skel-row">
+                    <ui-skeleton class="skel-row-date" [height]="40" width="64px" [radius]="6" />
+                    <div class="skel-row-body"><ui-skeleton [height]="16" width="60%" [radius]="4" /><ui-skeleton [height]="12" width="35%" [radius]="4" /></div>
+                  </div>
+                }
+              </div>
+            }
+          }
+        </div>
+      </div>
+    } @else {
     <!-- Previous / Today / Next: right-aligned in the filter row when there is one, else next to the period label -->
     <ng-template #navControls>
       <div class="nav-controls">
@@ -40932,7 +41365,7 @@ i0.ɵɵngDeclareClassMetadata({
         @if (viewTabs().length > 1) {
           <ui-pill-tabs ariaLabel="Calendar view" name="ui-calendar-view" [tabs]="viewTabs()" [activeKey]="view()" (tabChange)="setView($any($event))" />
         }
-        <ng-content select="[calendar-actions]" />
+        <div class="toolbar-actions"><ng-content select="[calendar-actions]" /></div>
       </div>
     </div>
 
@@ -41122,9 +41555,10 @@ i0.ɵɵngDeclareClassMetadata({
         }
       }
     }
+    }
     <ui-toast />
   `,
-			styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}.cal-header{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 2px #0f172a0a;margin-bottom:12px;flex-shrink:0}.cal-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 20px;gap:16px;flex-shrink:0}.toolbar-left{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;column-gap:20px;row-gap:8px;min-width:0}.toolbar-center{display:flex;align-items:center;justify-content:center;gap:10px}.toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.period-label{font-size:2.5rem;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:#0f172a;margin:0;min-width:0}.pl-sub{font-weight:600;color:#64748b}.nav-controls{display:inline-flex;align-items:center}.nav-controls>*+*{margin-left:-1px}.btn-nav{width:38px;height:38px;border:1px solid #cbd5e1;background:#fff;font-family:inherit;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569;transition:background .12s,color .12s}.nav-controls>.btn-nav:first-child{border-radius:10px 0 0 10px}.nav-controls>.btn-nav:last-child{border-radius:0 10px 10px 0}.btn-today{padding:0 18px;height:38px;border:1px solid #cbd5e1;background:#fff;border-radius:0;font-family:inherit;position:relative;font-size:.9375rem;font-weight:600;color:#1d4ed8;cursor:pointer;transition:background .12s}.btn-nav:hover,.btn-today:hover{background:#eff6ff;color:#1d4ed8;z-index:1}.btn-nav:active,.btn-today:active{background:#dbeafe}.btn-nav:focus-visible,.btn-today:focus-visible,.filter-chip:focus-visible,.event-chip:focus-visible,.more-events:focus-visible,.allday-chip:focus-visible,.timed-event:focus-visible,.agenda-event:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.month-cell:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.slot-add:focus,.slot-add:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.mobile-summary{display:none}.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:12px 20px 14px;border-top:1px solid #eef2f7;background:#f8fafc;border-radius:0 0 12px 12px;flex-shrink:0}.filter-main{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}.filter-nav{margin-left:auto;flex-shrink:0}.filter-bar-label{font-size:.6875rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}.filter-chip:hover{border-color:#cbd5e1;background:#f8fafc}.filter-chip.active-all{background:#1e293b;color:#fff;border-color:#1e293b}.filter-chip.active-all .chip-count{background:#fff3;color:#fff}.filter-chip.active-type{background:var(--chip-bg, #f1f5f9);color:#1e293b;border-color:var(--chip-color);font-weight:600}.filter-chip.active-type .chip-count{background:var(--chip-color);color:#fff}.chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.chip-count{font-size:.6875rem;font-weight:700;background:#f1f5f9;background:color-mix(in srgb,var(--chip-color, #64748b) 14%,#fff);color:#475569;padding:1px 8px;border-radius:999px;min-width:18px;text-align:center;box-sizing:border-box}.cal-skeleton,.month-view,.week-view,.agenda-view{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.skel-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.skel-dow{display:flex;justify-content:center}.skel-month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,minmax(80px,1fr));flex:1}.skel-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:8px 6px;display:flex;flex-direction:column;gap:6px}.skel-cell:nth-child(7n){border-right:none}.month-grid{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;position:sticky;top:0;z-index:1}.month-dow{padding:10px 8px;font-size:.75rem;font-weight:600;color:#6b7280;text-align:center;text-transform:uppercase;letter-spacing:.04em}.dow-short{display:none}.month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1 0 120px}.month-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:6px 6px 4px;min-height:120px;transition:background .1s;min-width:0;box-sizing:border-box}.month-cell.clickable{cursor:pointer}.month-cell.clickable:hover{background:#f8fafc}.month-cell:nth-child(7n){border-right:none}.month-cell.other-month{background:#fafafa}.month-cell.other-month .day-num{color:#64748b}.month-cell.today{background:#eff6ff}.day-num{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-size:.8125rem;font-weight:500;color:#374151;margin-bottom:4px}.today-badge{background:#2563eb;color:#fff;font-weight:700}.cell-events{display:flex;flex-direction:column;gap:2px}.event-chip{display:flex;align-items:center;gap:3px;padding:2px 6px;width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;cursor:pointer;overflow:hidden}.event-chip:hover{opacity:.85}.event-chip.stacked{flex-direction:column;align-items:flex-start;gap:0}.chip-head{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.chip-icon{flex-shrink:0}.chip-time{font-weight:700;flex-shrink:0;color:#1e293b}.chip-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;min-width:0;max-width:100%}.strike{text-decoration:line-through}.chip-src{font-size:.625rem;font-weight:700;margin-left:auto;flex-shrink:0;color:#1e293b}.more-events{font-size:.6875rem;color:#2563eb;font-weight:600;cursor:pointer;padding:1px 6px;border:0;background:none;text-align:left;font-family:inherit}.more-events:hover{text-decoration:underline}.week-view{overflow:auto}.week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;overflow-y:scroll}.time-gutter{border-right:1px solid #e2e8f0}.week-day-hdr{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-right:1px solid #f1f5f9}.week-day-hdr.today{background:#eff6ff}.week-day-hdr:last-child{border-right:none}.wdh-dow{font-size:.6875rem;font-weight:600;color:#6b7280;text-transform:uppercase}.wdh-num{width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-size:.9375rem;font-weight:600;color:#374151;margin-top:2px}.wdh-num.today-badge{background:#2563eb;color:#fff;font-weight:700}.allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;min-height:32px;flex-shrink:0;overflow-y:scroll}.allday-label{font-size:.625rem;color:#64748b;font-weight:600;text-transform:uppercase;display:flex;align-items:center;justify-content:center}.slot-add{position:absolute;top:2px;left:2px;z-index:3;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap;font-family:inherit}.slot-add:focus,.slot-add:focus-visible{width:auto;height:auto;padding:2px 8px;clip-path:none;background:#1e293b;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}.allday-cell{position:relative;border-right:1px solid #f1f5f9;padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0}.allday-cell.clickable{cursor:pointer}.allday-cell:last-child{border-right:none}.allday-chip{padding:2px 6px;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;color:#1e293b;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-family:inherit}.allday-chip:hover{opacity:.85}.week-body{display:grid;grid-template-columns:60px repeat(7,1fr);flex:1;overflow-y:scroll}.time-col{display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0}.time-slot-label{height:60px;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0;font-size:.6875rem;color:#64748b;font-weight:500;border-bottom:1px solid #f1f5f9;flex-shrink:0;box-sizing:border-box}.day-col{position:relative;border-right:1px solid #f1f5f9;min-width:0}.day-col.clickable{cursor:pointer}.day-col:last-child{border-right:none}.day-col.today{background:#fafbff}.time-slot{height:60px;border-bottom:1px solid #f1f5f9;box-sizing:border-box}.day-col.clickable .time-slot:hover{background:#f8fafc}.timed-event{position:absolute;min-height:20px;border:0;border-radius:6px;padding:3px 6px;overflow:hidden;cursor:pointer;box-sizing:border-box;border-left:3px solid transparent;display:flex;flex-direction:column;align-items:flex-start;gap:1px;box-shadow:0 1px 3px #00000014;text-align:left;font-family:inherit}.timed-event:hover{opacity:.85}.te-title{font-size:.6875rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.te-time{font-size:.625rem;color:#475569}.agenda-view{overflow-y:auto}.agenda-group{display:flex;border-bottom:1px solid #f1f5f9}.agenda-date-hdr{width:100px;flex-shrink:0;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-right:2px solid #e2e8f0}.ag-dow{font-size:.6875rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.ag-date{font-size:.8125rem;font-weight:600;color:#374151}.agenda-events{flex:1;display:flex;flex-direction:column;min-width:0}.agenda-event{display:flex;align-items:stretch;padding:10px 12px;cursor:pointer;border:0;border-bottom:1px solid #f8fafc;background:none;text-align:left;width:100%;font-family:inherit;transition:background .1s}.agenda-event:hover{background:#f8fafc}.agenda-event:last-child{border-bottom:none}.ae-color-bar{display:block;width:4px;border-radius:4px;flex-shrink:0;margin-right:12px}.ae-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ae-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ae-title{font-size:.9375rem;font-weight:600;color:#111827}.ae-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ae-meta-item{font-size:.8125rem;color:#6b7280}@media(prefers-reduced-motion:reduce){.btn-nav,.btn-today,.filter-chip,.month-cell,.agenda-event{transition:none}}@media(pointer:coarse),(max-width:480px){.btn-nav,.btn-today,.filter-chip,.event-chip,.more-events,.allday-chip,.agenda-event{min-height:44px}.btn-nav{min-width:44px}}@media(max-width:768px){.cal-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px}.toolbar-left{flex:1 1 auto}.toolbar-right{flex:0 1 auto;min-width:0;max-width:100%}.toolbar-center{display:none}.period-label{font-size:1.875rem}.toolbar-right{justify-content:flex-end}.mobile-summary{display:block;margin-bottom:4px;flex-shrink:0}.mobile-summary:empty{display:none}.filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.filter-main{flex-basis:100%}.month-view,.cal-skeleton,.week-view{overflow-x:auto;-webkit-overflow-scrolling:touch}.month-grid,.skel-month-grid,.skel-dow-row{min-width:560px}.month-row{flex-basis:80px}.month-cell{min-height:80px}.week-header,.allday-row,.week-body{min-width:640px}.agenda-date-hdr{width:76px;padding:12px 8px}.ae-title{font-size:.875rem}}@media(max-width:640px){.event-chip.stacked.has-head .chip-title{display:none}}@media(max-width:640px){.cal-toolbar{padding:14px}.period-label{font-size:1.625rem}.filter-bar{padding:10px 14px 12px}.filter-nav{width:100%;margin-left:0}.filter-nav .nav-controls{display:flex;width:100%}.filter-nav .btn-today{flex:1 1 auto}.chip-head{flex-wrap:wrap;row-gap:0;flex-shrink:1;min-width:0}.chip-time{white-space:normal;line-height:1.1;flex-shrink:1;min-width:0;overflow-wrap:anywhere}.event-chip.stacked{flex-wrap:nowrap}.month-view,.cal-skeleton{overflow-x:hidden}.month-grid,.skel-month-grid,.skel-dow-row{min-width:0}.month-dow{padding:8px 2px;font-size:.6875rem;letter-spacing:0}.month-row{flex-basis:72px}.month-cell{min-height:72px;padding:3px 2px 2px}.day-num{width:22px;height:22px;line-height:22px;font-size:.75rem;margin-bottom:2px}.cell-events{gap:1px}.event-chip{min-height:24px;padding:1px 3px;font-size:.625rem;gap:2px}.more-events{min-height:24px;padding:1px 3px;font-size:.625rem;white-space:normal;line-height:1.1;max-width:100%}}@media(max-width:480px){.dow-full{display:none}.dow-short{display:inline}}\n"]
+			styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}.cal-header{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 2px #0f172a0a;margin-bottom:12px;flex-shrink:0}.cal-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 20px;gap:16px;flex-shrink:0}.toolbar-left{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;column-gap:20px;row-gap:8px;min-width:0}.toolbar-center{display:flex;align-items:center;justify-content:center;gap:10px}.toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}.toolbar-actions:empty{display:none}ui-pill-tabs+.toolbar-actions:not(:empty){margin-left:4px;padding-left:12px;border-left:1px solid #e2e8f0;align-self:stretch}@media(max-width:480px){.toolbar-actions{flex-wrap:wrap}}.period-label{font-size:2.5rem;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:#0f172a;margin:0;min-width:0}.pl-sub{font-weight:600;color:#64748b}.nav-controls{display:inline-flex;align-items:center}.nav-controls>*+*{margin-left:-1px}.btn-nav{width:38px;height:38px;border:1px solid #cbd5e1;background:#fff;font-family:inherit;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569;transition:background .12s,color .12s}.nav-controls>.btn-nav:first-child{border-radius:10px 0 0 10px}.nav-controls>.btn-nav:last-child{border-radius:0 10px 10px 0}.btn-today{padding:0 18px;height:38px;border:1px solid #cbd5e1;background:#fff;border-radius:0;font-family:inherit;position:relative;font-size:.9375rem;font-weight:600;color:#1d4ed8;cursor:pointer;transition:background .12s}.btn-nav:hover,.btn-today:hover{background:#eff6ff;color:#1d4ed8;z-index:1}.btn-nav:active,.btn-today:active{background:#dbeafe}.btn-nav:focus-visible,.btn-today:focus-visible,.filter-chip:focus-visible,.event-chip:focus-visible,.more-events:focus-visible,.allday-chip:focus-visible,.timed-event:focus-visible,.agenda-event:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.month-cell:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.slot-add:focus,.slot-add:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.mobile-summary{display:none}.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:12px 20px 14px;border-top:1px solid #eef2f7;background:#f8fafc;border-radius:0 0 12px 12px;flex-shrink:0}.filter-main{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}.filter-nav{margin-left:auto;flex-shrink:0}.filter-bar-label{font-size:.6875rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}.filter-chip:hover{border-color:#cbd5e1;background:#f8fafc}.filter-chip.active-all{background:#1e293b;color:#fff;border-color:#1e293b}.filter-chip.active-all .chip-count{background:#fff3;color:#fff}.filter-chip.active-type{background:var(--chip-bg, #f1f5f9);color:#1e293b;border-color:var(--chip-color);font-weight:600}.filter-chip.active-type .chip-count{background:var(--chip-color);color:#fff}.chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.chip-count{font-size:.6875rem;font-weight:700;background:#f1f5f9;background:color-mix(in srgb,var(--chip-color, #64748b) 14%,#fff);color:#475569;padding:1px 8px;border-radius:999px;min-width:18px;text-align:center;box-sizing:border-box}.cal-skeleton,.outline-grid,.month-view,.week-view,.agenda-view{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.skel-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.skel-dow{display:flex;justify-content:center}.skel-month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,minmax(80px,1fr));flex:1}.skel-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:8px 6px;display:flex;flex-direction:column;gap:6px}.skel-cell:nth-child(7n){border-right:none}.cal-outline{flex:1;display:flex;flex-direction:column;min-height:0}.cal-outline ui-skeleton{display:block;flex-shrink:0}.skel-period-wrap{width:240px;max-width:100%;min-width:0}.skel-nav-controls{gap:2px}.skel-nav-controls>*+*{margin-left:0}.skel-tabs{display:flex;align-items:center;gap:6px}.skel-tabs+.toolbar-actions:not(:empty){margin-left:4px;padding-left:12px;border-left:1px solid #e2e8f0;align-self:stretch}.skel-week-grid{display:grid;grid-template-columns:repeat(7,1fr);flex:1;min-height:360px}.skel-agenda{display:flex;flex-direction:column;flex:1}.skel-row{display:flex;align-items:center;gap:16px;padding:16px 12px;border-bottom:1px solid #f1f5f9}.skel-row-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}.month-grid{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;position:sticky;top:0;z-index:1}.month-dow{padding:10px 8px;font-size:.75rem;font-weight:600;color:#6b7280;text-align:center;text-transform:uppercase;letter-spacing:.04em}.dow-short{display:none}.month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1 0 120px}.month-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:6px 6px 4px;min-height:120px;transition:background .1s;min-width:0;box-sizing:border-box}.month-cell.clickable{cursor:pointer}.month-cell.clickable:hover{background:#f8fafc}.month-cell:nth-child(7n){border-right:none}.month-cell.other-month{background:#fafafa}.month-cell.other-month .day-num{color:#64748b}.month-cell.today{background:#eff6ff}.day-num{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-size:.8125rem;font-weight:500;color:#374151;margin-bottom:4px}.today-badge{background:#2563eb;color:#fff;font-weight:700}.cell-events{display:flex;flex-direction:column;gap:2px}.event-chip{display:flex;align-items:center;gap:3px;padding:2px 6px;width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;cursor:pointer;overflow:hidden}.event-chip:hover{opacity:.85}.event-chip.stacked{flex-direction:column;align-items:flex-start;gap:0}.chip-head{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.chip-icon{flex-shrink:0}.chip-time{font-weight:700;flex-shrink:0;color:#1e293b}.chip-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;min-width:0;max-width:100%}.strike{text-decoration:line-through}.chip-src{font-size:.625rem;font-weight:700;margin-left:auto;flex-shrink:0;color:#1e293b}.more-events{font-size:.6875rem;color:#2563eb;font-weight:600;cursor:pointer;padding:1px 6px;border:0;background:none;text-align:left;font-family:inherit}.more-events:hover{text-decoration:underline}.week-view{overflow:auto}.week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;overflow-y:scroll}.time-gutter{border-right:1px solid #e2e8f0}.week-day-hdr{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-right:1px solid #f1f5f9}.week-day-hdr.today{background:#eff6ff}.week-day-hdr:last-child{border-right:none}.wdh-dow{font-size:.6875rem;font-weight:600;color:#6b7280;text-transform:uppercase}.wdh-num{width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-size:.9375rem;font-weight:600;color:#374151;margin-top:2px}.wdh-num.today-badge{background:#2563eb;color:#fff;font-weight:700}.allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;min-height:32px;flex-shrink:0;overflow-y:scroll}.allday-label{font-size:.625rem;color:#64748b;font-weight:600;text-transform:uppercase;display:flex;align-items:center;justify-content:center}.slot-add{position:absolute;top:2px;left:2px;z-index:3;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap;font-family:inherit}.slot-add:focus,.slot-add:focus-visible{width:auto;height:auto;padding:2px 8px;clip-path:none;background:#1e293b;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}.allday-cell{position:relative;border-right:1px solid #f1f5f9;padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0}.allday-cell.clickable{cursor:pointer}.allday-cell:last-child{border-right:none}.allday-chip{padding:2px 6px;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;color:#1e293b;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-family:inherit}.allday-chip:hover{opacity:.85}.week-body{display:grid;grid-template-columns:60px repeat(7,1fr);flex:1;overflow-y:scroll}.time-col{display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0}.time-slot-label{height:60px;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0;font-size:.6875rem;color:#64748b;font-weight:500;border-bottom:1px solid #f1f5f9;flex-shrink:0;box-sizing:border-box}.day-col{position:relative;border-right:1px solid #f1f5f9;min-width:0}.day-col.clickable{cursor:pointer}.day-col:last-child{border-right:none}.day-col.today{background:#fafbff}.time-slot{height:60px;border-bottom:1px solid #f1f5f9;box-sizing:border-box}.day-col.clickable .time-slot:hover{background:#f8fafc}.timed-event{position:absolute;min-height:20px;border:0;border-radius:6px;padding:3px 6px;overflow:hidden;cursor:pointer;box-sizing:border-box;border-left:3px solid transparent;display:flex;flex-direction:column;align-items:flex-start;gap:1px;box-shadow:0 1px 3px #00000014;text-align:left;font-family:inherit}.timed-event:hover{opacity:.85}.te-title{font-size:.6875rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.te-time{font-size:.625rem;color:#475569}.agenda-view{overflow-y:auto}.agenda-group{display:flex;border-bottom:1px solid #f1f5f9}.agenda-date-hdr{width:100px;flex-shrink:0;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-right:2px solid #e2e8f0}.ag-dow{font-size:.6875rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.ag-date{font-size:.8125rem;font-weight:600;color:#374151}.agenda-events{flex:1;display:flex;flex-direction:column;min-width:0}.agenda-event{display:flex;align-items:stretch;padding:10px 12px;cursor:pointer;border:0;border-bottom:1px solid #f8fafc;background:none;text-align:left;width:100%;font-family:inherit;transition:background .1s}.agenda-event:hover{background:#f8fafc}.agenda-event:last-child{border-bottom:none}.ae-color-bar{display:block;width:4px;border-radius:4px;flex-shrink:0;margin-right:12px}.ae-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ae-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ae-title{font-size:.9375rem;font-weight:600;color:#111827}.ae-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ae-meta-item{font-size:.8125rem;color:#6b7280}@media(prefers-reduced-motion:reduce){.btn-nav,.btn-today,.filter-chip,.month-cell,.agenda-event{transition:none}}@media(pointer:coarse),(max-width:480px){.btn-nav,.btn-today,.filter-chip,.event-chip,.more-events,.allday-chip,.agenda-event{min-height:44px}.btn-nav{min-width:44px}}@media(max-width:768px){.cal-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px}.toolbar-left{flex:1 1 auto}.toolbar-right{flex:0 1 auto;min-width:0;max-width:100%}.toolbar-center{display:none}.period-label{font-size:1.875rem}.toolbar-right{justify-content:flex-end}.mobile-summary{display:block;margin-bottom:4px;flex-shrink:0}.mobile-summary:empty{display:none}.filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.filter-main{flex-basis:100%}.month-view,.cal-skeleton,.outline-grid,.week-view{overflow-x:auto;-webkit-overflow-scrolling:touch}.month-grid,.skel-month-grid,.skel-week-grid,.skel-dow-row{min-width:560px}.month-row{flex-basis:80px}.month-cell{min-height:80px}.week-header,.allday-row,.week-body{min-width:640px}.agenda-date-hdr{width:76px;padding:12px 8px}.ae-title{font-size:.875rem}}@media(max-width:640px){.event-chip.stacked.has-head .chip-title{display:none}}@media(max-width:640px){.cal-toolbar{padding:14px}.period-label{font-size:1.625rem}.filter-bar{padding:10px 14px 12px}.filter-nav{width:100%;margin-left:0}.filter-nav .nav-controls{display:flex;width:100%}.filter-nav .btn-today{flex:1 1 auto}.chip-head{flex-wrap:wrap;row-gap:0;flex-shrink:1;min-width:0}.chip-time{white-space:normal;line-height:1.1;flex-shrink:1;min-width:0;overflow-wrap:anywhere}.event-chip.stacked{flex-wrap:nowrap}.month-view,.cal-skeleton,.outline-grid{overflow-x:hidden}.month-grid,.skel-month-grid,.skel-week-grid,.skel-dow-row{min-width:0}.month-dow{padding:8px 2px;font-size:.6875rem;letter-spacing:0}.month-row{flex-basis:72px}.month-cell{min-height:72px;padding:3px 2px 2px}.day-num{width:22px;height:22px;line-height:22px;font-size:.75rem;margin-bottom:2px}.cell-events{gap:1px}.event-chip{min-height:24px;padding:1px 3px;font-size:.625rem;gap:2px}.more-events{min-height:24px;padding:1px 3px;font-size:.625rem;white-space:normal;line-height:1.1;max-width:100%}}@media(max-width:480px){.dow-full{display:none}.dow-short{display:inline}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -41145,6 +41579,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		loadingActions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingActions",
+				required: false
+			}]
+		}],
 		view: [{
 			type: i0.Input,
 			args: [{