@forgeroute/ui 0.4.21 → 0.4.22

package/fesm2022/forgeroute-ui.mjs

@@ -1494,9 +1494,33 @@ var AvatarComponent = class AvatarComponent {
 		this.initials = input.required(...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
 		this.name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 		this.size = input(32, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.imageUrl = input(void 0, ...ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []);
+		this.editable = input(false, ...ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []);
+		this.editLabel = input("Change photo", ...ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []);
+		this.busy = input(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+		this.editClick = output();
+		this.imageError = output();
+		this.failedUrl = signal(null, ...ngDevMode ? [{ debugName: "failedUrl" }] : /* istanbul ignore next */ []);
+		this.showImage = computed(() => {
+			const url = this.imageUrl();
+			return !!url && this.failedUrl() !== url;
+		}, ...ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []);
+		this.badgeSize = computed(() => Math.max(18, Math.round(this.size() * .3)), ...ngDevMode ? [{ debugName: "badgeSize" }] : /* istanbul ignore next */ []);
 		this.bg = computed(() => BG_PALETTE[colorIndex(this.initials())], ...ngDevMode ? [{ debugName: "bg" }] : /* istanbul ignore next */ []);
 		this.color = computed(() => COLOR_PALETTE[colorIndex(this.initials())], ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 	}
+	onImageError() {
+		this.failedUrl.set(this.imageUrl() ?? null);
+		this.imageError.emit();
+	}
+	onEdit() {
+		if (this.busy()) return;
+		this.editClick.emit();
+	}
+	onKey(event) {
+		event.preventDefault();
+		this.onEdit();
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -1509,7 +1533,7 @@ var AvatarComponent = class AvatarComponent {
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.1.0",
+			minVersion: "17.0.0",
 			version: "22.2.2",
 			type: AvatarComponent,
 			isStandalone: true,
@@ -1535,24 +1559,91 @@ var AvatarComponent = class AvatarComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				imageUrl: {
+					classPropertyName: "imageUrl",
+					publicName: "imageUrl",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editable: {
+					classPropertyName: "editable",
+					publicName: "editable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editLabel: {
+					classPropertyName: "editLabel",
+					publicName: "editLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				busy: {
+					classPropertyName: "busy",
+					publicName: "busy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
+			outputs: {
+				editClick: "editClick",
+				imageError: "imageError"
+			},
 			ngImport: i0,
 			template: `
-    <span
-      class="avatar"
-      role="img"
-      [style.width.px]="size()"
-      [style.height.px]="size()"
-      [style.font-size.px]="size() * 0.38"
-      [style.background]="bg()"
-      [style.color]="color()"
-      [attr.aria-label]="name() || initials()">
-      {{ initials() }}
-    </span>
+    @if (editable()) {
+      <span class="av-edit" role="button" [attr.tabindex]="busy() ? -1 : 0" [attr.aria-label]="editLabel()" [attr.title]="editLabel()"
+        [attr.aria-busy]="busy() ? 'true' : null" [attr.aria-disabled]="busy() ? 'true' : null" [class.av-busy]="busy()"
+        [style.width.px]="size()" [style.height.px]="size()"
+        (click)="onEdit()" (keydown.enter)="onKey($event)" (keydown.space)="onKey($event)">
+        <ng-container [ngTemplateOutlet]="face" />
+        <span class="av-badge" aria-hidden="true" [style.width.px]="badgeSize()" [style.height.px]="badgeSize()">
+          @if (busy()) {
+            <span class="av-spinner" [style.width.px]="badgeSize() * 0.6" [style.height.px]="badgeSize() * 0.6"></span>
+          } @else {
+            <svg [attr.width]="badgeSize() * 0.6" [attr.height]="badgeSize() * 0.6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+          }
+        </span>
+      </span>
+    } @else {
+      <ng-container [ngTemplateOutlet]="face" />
+    }
+    <ng-template #face>
+      @if (showImage()) {
+        <img class="avatar avatar-img" [src]="imageUrl()" [attr.alt]="editable() ? '' : (name() || initials())"
+          [style.width.px]="size()" [style.height.px]="size()" (error)="onImageError()" />
+      } @else {
+        <span
+          class="avatar"
+          [attr.role]="editable() ? null : 'img'"
+          [attr.aria-hidden]="editable() ? 'true' : null"
+          [style.width.px]="size()"
+          [style.height.px]="size()"
+          [style.font-size.px]="size() * 0.38"
+          [style.background]="bg()"
+          [style.color]="color()"
+          [attr.aria-label]="editable() ? null : (name() || initials())">
+          {{ initials() }}
+        </span>
+      }
+    </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"],
+			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}.avatar-img{display:block;object-fit:cover}.av-edit{position:relative;display:inline-flex;flex-shrink:0;border-radius:50%;cursor:pointer}.av-edit:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.av-edit.av-busy{cursor:progress}.av-edit.av-busy .avatar{opacity:.55}.av-badge{position:absolute;right:-2px;bottom:-2px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#475569;border:1px solid #cbd5e1;box-shadow:0 1px 2px #0f172a1f}@media(hover:hover){.av-edit:hover:not(.av-busy) .av-badge{color:#0f172a;border-color:#94a3b8}}.av-spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:av-spin .6s linear infinite}@keyframes av-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.av-spinner{animation-duration:2s}}@media(pointer:coarse){.av-edit:after{content:\"\";position:absolute;inset:-6px}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -1567,21 +1658,47 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-avatar",
 			standalone: true,
+			imports: [NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
-    <span
-      class="avatar"
-      role="img"
-      [style.width.px]="size()"
-      [style.height.px]="size()"
-      [style.font-size.px]="size() * 0.38"
-      [style.background]="bg()"
-      [style.color]="color()"
-      [attr.aria-label]="name() || initials()">
-      {{ initials() }}
-    </span>
+    @if (editable()) {
+      <span class="av-edit" role="button" [attr.tabindex]="busy() ? -1 : 0" [attr.aria-label]="editLabel()" [attr.title]="editLabel()"
+        [attr.aria-busy]="busy() ? 'true' : null" [attr.aria-disabled]="busy() ? 'true' : null" [class.av-busy]="busy()"
+        [style.width.px]="size()" [style.height.px]="size()"
+        (click)="onEdit()" (keydown.enter)="onKey($event)" (keydown.space)="onKey($event)">
+        <ng-container [ngTemplateOutlet]="face" />
+        <span class="av-badge" aria-hidden="true" [style.width.px]="badgeSize()" [style.height.px]="badgeSize()">
+          @if (busy()) {
+            <span class="av-spinner" [style.width.px]="badgeSize() * 0.6" [style.height.px]="badgeSize() * 0.6"></span>
+          } @else {
+            <svg [attr.width]="badgeSize() * 0.6" [attr.height]="badgeSize() * 0.6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+          }
+        </span>
+      </span>
+    } @else {
+      <ng-container [ngTemplateOutlet]="face" />
+    }
+    <ng-template #face>
+      @if (showImage()) {
+        <img class="avatar avatar-img" [src]="imageUrl()" [attr.alt]="editable() ? '' : (name() || initials())"
+          [style.width.px]="size()" [style.height.px]="size()" (error)="onImageError()" />
+      } @else {
+        <span
+          class="avatar"
+          [attr.role]="editable() ? null : 'img'"
+          [attr.aria-hidden]="editable() ? 'true' : null"
+          [style.width.px]="size()"
+          [style.height.px]="size()"
+          [style.font-size.px]="size() * 0.38"
+          [style.background]="bg()"
+          [style.color]="color()"
+          [attr.aria-label]="editable() ? null : (name() || initials())">
+          {{ initials() }}
+        </span>
+      }
+    </ng-template>
   `,
-			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"]
+			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}.avatar-img{display:block;object-fit:cover}.av-edit{position:relative;display:inline-flex;flex-shrink:0;border-radius:50%;cursor:pointer}.av-edit:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.av-edit.av-busy{cursor:progress}.av-edit.av-busy .avatar{opacity:.55}.av-badge{position:absolute;right:-2px;bottom:-2px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#475569;border:1px solid #cbd5e1;box-shadow:0 1px 2px #0f172a1f}@media(hover:hover){.av-edit:hover:not(.av-busy) .av-badge{color:#0f172a;border-color:#94a3b8}}.av-spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:av-spin .6s linear infinite}@keyframes av-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.av-spinner{animation-duration:2s}}@media(pointer:coarse){.av-edit:after{content:\"\";position:absolute;inset:-6px}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -1608,6 +1725,46 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "size",
 				required: false
 			}]
+		}],
+		imageUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageUrl",
+				required: false
+			}]
+		}],
+		editable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editable",
+				required: false
+			}]
+		}],
+		editLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editLabel",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
+		editClick: [{
+			type: i0.Output,
+			args: ["editClick"]
+		}],
+		imageError: [{
+			type: i0.Output,
+			args: ["imageError"]
 		}]
 	}
 });
@@ -9256,6 +9413,15 @@ var EmptyStateComponent = class EmptyStateComponent {
           @case ('shield') {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
           }
+          @case ('pipeline') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8.5V19l-4 2v-8.5z"/></svg>
+          }
+          @case ('property') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/><path d="M16 11h2a2 2 0 0 1 2 2v8"/><path d="M2 21h20"/><path d="M8 7h4M8 11h4M8 15h4"/></svg>
+          }
+          @case ('clipboard') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="18" rx="2"/><path d="M9 2h6v4H9z"/><path d="m8.5 12 1.5 1.5 2.5-3"/><path d="M14.5 12.5H16M8.5 18H16"/></svg>
+          }
           @default {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
           }
@@ -9330,6 +9496,15 @@ i0.ɵɵngDeclareClassMetadata({
           @case ('shield') {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
           }
+          @case ('pipeline') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8.5V19l-4 2v-8.5z"/></svg>
+          }
+          @case ('property') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/><path d="M16 11h2a2 2 0 0 1 2 2v8"/><path d="M2 21h20"/><path d="M8 7h4M8 11h4M8 15h4"/></svg>
+          }
+          @case ('clipboard') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="18" rx="2"/><path d="M9 2h6v4H9z"/><path d="m8.5 12 1.5 1.5 2.5-3"/><path d="M14.5 12.5H16M8.5 18H16"/></svg>
+          }
           @default {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
           }
@@ -11943,8 +12118,13 @@ var DataTableComponent = class DataTableComponent {
 					inputs: [
 						"initials",
 						"name",
-						"size"
-					]
+						"size",
+						"imageUrl",
+						"editable",
+						"editLabel",
+						"busy"
+					],
+					outputs: ["editClick", "imageError"]
 				},
 				{
 					kind: "component",
@@ -25351,12 +25531,20 @@ function getErrorMessage(error, fallbackContext, action) {
 	if (typeof error === "string") return error;
 	return `${failed} Please try again.`;
 }
+const NOTES_MAX_LENGTH = 1e4;
 const NOTES_PAGE_SIZE = 5;
 var NotesComponent = class NotesComponent {
 	initials(name) {
 		const parts = (name || "You").trim().split(/\s+/).filter(Boolean);
 		return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1][0] : "")).toUpperCase();
 	}
+	tooLong(text) {
+		return text.trim().length > NOTES_MAX_LENGTH;
+	}
+	validBody(text) {
+		const n = text.trim().length;
+		return n > 0 && n <= 1e4;
+	}
 	get listUrl() {
 		return `${this.apiBase}/notes/${this.resourceType()}/${this.resourceId()}`;
 	}
@@ -25370,6 +25558,7 @@ var NotesComponent = class NotesComponent {
 		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 */ []);
@@ -25403,7 +25592,7 @@ var NotesComponent = class NotesComponent {
 		});
 	}
 	addNote() {
-		if (this.readOnly() || !this.newBody.trim() || this.saving()) return;
+		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({
 			next: () => {
@@ -25427,7 +25616,7 @@ var NotesComponent = class NotesComponent {
 		this.editBody = "";
 	}
 	saveEdit(noteId) {
-		if (this.readOnly() || !this.editBody.trim() || this.saving()) return;
+		if (this.readOnly() || !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({
 			next: (updated) => {
@@ -25507,10 +25696,10 @@ var NotesComponent = class NotesComponent {
 			template: `
     @if (!readOnly()) {
       <div class="note-add">
-        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [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]="!newBody.trim()" (click)="addNote()">Add Note</ui-button>
+          <ui-button variant="primary" size="sm" data-testid="note-add-btn" [loading]="saving()" [disabled]="!validBody(newBody)" (click)="addNote()">Add Note</ui-button>
         </div>
       </div>
     }
@@ -25534,20 +25723,16 @@ var NotesComponent = class NotesComponent {
                 }
                 @if (!readOnly() && editingId() !== note.id) {
                   <div class="note-actions">
-                    <ui-button variant="icon" size="xs" ariaLabel="Edit note" uiTooltip="Edit note" (click)="startEdit(note)">
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                    </ui-button>
-                    <ui-button variant="icon-danger" size="xs" ariaLabel="Delete note" uiTooltip="Delete note" (click)="confirmDelete(note.id)">
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
-                    </ui-button>
+                    <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" [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]="!editBody.trim()" (click)="saveEdit(note.id)">Save</ui-button>
+                  <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="!validBody(editBody)" (click)="saveEdit(note.id)">Save</ui-button>
                 </div>
               } @else {
                 <p class="note-body">{{ note.body }}</p>
@@ -25577,6 +25762,12 @@ var NotesComponent = class NotesComponent {
 					type: i1.NgControlStatus,
 					selector: "[formControlName],[ngModel],[formControl]"
 				},
+				{
+					kind: "directive",
+					type: i1.MaxLengthValidator,
+					selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+					inputs: ["maxlength"]
+				},
 				{
 					kind: "directive",
 					type: i1.NgModel,
@@ -25682,10 +25873,20 @@ var NotesComponent = class NotesComponent {
 					outputs: ["invalidChange"]
 				},
 				{
-					kind: "directive",
-					type: TooltipDirective,
-					selector: "[uiTooltip]",
-					inputs: ["uiTooltip", "tooltipPosition"]
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"name",
+						"tooltip",
+						"ariaLabel",
+						"size",
+						"variant",
+						"disabled",
+						"loading",
+						"interactive"
+					],
+					outputs: ["iconClick"]
 				},
 				{
 					kind: "component",
@@ -25694,8 +25895,13 @@ var NotesComponent = class NotesComponent {
 					inputs: [
 						"initials",
 						"name",
-						"size"
-					]
+						"size",
+						"imageUrl",
+						"editable",
+						"editLabel",
+						"busy"
+					],
+					outputs: ["editClick", "imageError"]
 				},
 				{
 					kind: "pipe",
@@ -25726,16 +25932,16 @@ i0.ɵɵngDeclareClassMetadata({
 				EmptyStateComponent,
 				PaginationComponent,
 				TextareaInputComponent,
-				TooltipDirective,
+				IconComponent,
 				AvatarComponent
 			],
 			template: `
     @if (!readOnly()) {
       <div class="note-add">
-        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [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]="!newBody.trim()" (click)="addNote()">Add Note</ui-button>
+          <ui-button variant="primary" size="sm" data-testid="note-add-btn" [loading]="saving()" [disabled]="!validBody(newBody)" (click)="addNote()">Add Note</ui-button>
         </div>
       </div>
     }
@@ -25759,20 +25965,16 @@ i0.ɵɵngDeclareClassMetadata({
                 }
                 @if (!readOnly() && editingId() !== note.id) {
                   <div class="note-actions">
-                    <ui-button variant="icon" size="xs" ariaLabel="Edit note" uiTooltip="Edit note" (click)="startEdit(note)">
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                    </ui-button>
-                    <ui-button variant="icon-danger" size="xs" ariaLabel="Delete note" uiTooltip="Delete note" (click)="confirmDelete(note.id)">
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
-                    </ui-button>
+                    <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" [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]="!editBody.trim()" (click)="saveEdit(note.id)">Save</ui-button>
+                  <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="!validBody(editBody)" (click)="saveEdit(note.id)">Save</ui-button>
                 </div>
               } @else {
                 <p class="note-body">{{ note.body }}</p>
@@ -25849,11 +26051,11 @@ const LAYOUT_GAP_PX = {
 	lg: 24,
 	xl: 32
 };
-const CSS_LENGTH = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
+const CSS_LENGTH$1 = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
 function resolveLayoutGap(gap, fallback) {
 	const v = (gap ?? "").trim();
 	if (Object.prototype.hasOwnProperty.call(LAYOUT_GAP_PX, v)) return `${LAYOUT_GAP_PX[v]}px`;
-	if (v && CSS_LENGTH.test(v)) return v;
+	if (v && CSS_LENGTH$1.test(v)) return v;
 	return `${LAYOUT_GAP_PX[fallback]}px`;
 }
 function reorderItems(items, order) {
@@ -27847,6 +28049,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 		this.sections = input([], ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
 		this.showEmptyState = input(false, ...ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []);
 		this.labelColon = input(false, ...ngDevMode ? [{ debugName: "labelColon" }] : /* istanbul ignore next */ []);
+		this.fill = input(false, ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
 		this.displaySections = computed(() => this.showEmptyState() ? this.sections() : this.sections().filter((s) => s.items.some((i) => !i.hidden)), ...ngDevMode ? [{ debugName: "displaySections" }] : /* istanbul ignore next */ []);
 	}
 	hrefOf(item) {
@@ -27912,8 +28115,16 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				fill: {
+					classPropertyName: "fill",
+					publicName: "fill",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
+			host: { properties: { "class.pil-fill": "fill()" } },
 			ngImport: i0,
 			template: `
     @for (section of displaySections(); track section.title ?? $index) {
@@ -27981,7 +28192,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
+			styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -28056,6 +28267,7 @@ i0.ɵɵngDeclareClassMetadata({
 				EmptyStateComponent,
 				IconComponent
 			],
+			host: { "[class.pil-fill]": "fill()" },
 			template: `
     @for (section of displaySections(); track section.title ?? $index) {
       <div class="pil-section">
@@ -28121,7 +28333,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     }
   `,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
+			styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -28148,6 +28360,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "labelColon",
 				required: false
 			}]
+		}],
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
 		}]
 	}
 });
@@ -29327,6 +29547,98 @@ var TimelineComponent = class TimelineComponent {
 		this.emptyMessage = input("", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
 		this.maxHeight = input("", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
 		this.timePosition = input("below", ...ngDevMode ? [{ debugName: "timePosition" }] : /* istanbul ignore next */ []);
+		this.groupByDay = input(false, ...ngDevMode ? [{ debugName: "groupByDay" }] : /* istanbul ignore next */ []);
+		this.timeZone = input("", ...ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []);
+		this.now = input(null, ...ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []);
+		this.dayHeadingLevel = input(3, ...ngDevMode ? [{ debugName: "dayHeadingLevel" }] : /* istanbul ignore next */ []);
+		this.headingLevel = computed(() => {
+			const n = this.dayHeadingLevel();
+			return Number.isInteger(n) && n >= 1 && n <= 6 ? n : 3;
+		}, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+		this.groups = computed(() => {
+			if (!this.groupByDay()) return [];
+			const zone = this.timeZone() || void 0;
+			let fmt;
+			try {
+				fmt = new Intl.DateTimeFormat("en-US", {
+					timeZone: zone,
+					year: "numeric",
+					month: "2-digit",
+					day: "2-digit"
+				});
+			} catch {
+				fmt = new Intl.DateTimeFormat("en-US", {
+					year: "numeric",
+					month: "2-digit",
+					day: "2-digit"
+				});
+			}
+			const parts = (d) => {
+				const p = fmt.formatToParts(d);
+				const get = (t) => Number(p.find((x) => x.type === t)?.value);
+				return {
+					y: get("year"),
+					m: get("month"),
+					d: get("day")
+				};
+			};
+			const keyOf = (v) => `${v.y}-${String(v.m).padStart(2, "0")}-${String(v.d).padStart(2, "0")}`;
+			const nowRaw = this.now();
+			let nowDate = nowRaw == null ? /* @__PURE__ */ new Date() : new Date(nowRaw);
+			if (isNaN(nowDate.getTime())) nowDate = /* @__PURE__ */ new Date();
+			const t = parts(nowDate);
+			const todayKey = keyOf(t);
+			const yd = new Date(Date.UTC(t.y, t.m - 1, t.d - 1));
+			const yesterdayKey = keyOf({
+				y: yd.getUTCFullYear(),
+				m: yd.getUTCMonth() + 1,
+				d: yd.getUTCDate()
+			});
+			const labelFmt = (withYear, tz) => new Intl.DateTimeFormat("en-US", {
+				timeZone: tz,
+				month: "short",
+				day: "numeric",
+				...withYear ? { year: "numeric" } : {}
+			});
+			const label = (v) => keyOf(v) === todayKey ? "Today" : keyOf(v) === yesterdayKey ? "Yesterday" : labelFmt(v.y !== t.y, "UTC").format(new Date(Date.UTC(v.y, v.m - 1, v.d)));
+			const dayOf = (iso) => {
+				const m = iso ? /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/.exec(iso) : null;
+				if (!m) return null;
+				const y = Number(m[1]), mo = Number(m[2]), d = Number(m[3]);
+				const probe = new Date(Date.UTC(y, mo - 1, d));
+				if (probe.getUTCFullYear() !== y || probe.getUTCMonth() !== mo - 1 || probe.getUTCDate() !== d) return null;
+				if (m[4] !== void 0 && (Number(m[4]) > 23 || Number(m[5]) > 59 || m[6] !== void 0 && Number(m[6]) > 59)) return null;
+				if (m[7] === void 0) return {
+					y,
+					m: mo,
+					d
+				};
+				const inst = new Date(iso.replace(/([+-]\d{2})(\d{2})$/, "$1:$2"));
+				return isNaN(inst.getTime()) ? null : parts(inst);
+			};
+			const groups = [];
+			for (const item of this.items()) {
+				const v = dayOf(item.dateTime);
+				const last = groups[groups.length - 1];
+				if (!v) {
+					if (last) last.items.push(item);
+					else groups.push({
+						key: "",
+						label: "",
+						items: [item]
+					});
+					continue;
+				}
+				const key = keyOf(v);
+				if (last && last.key === key) last.items.push(item);
+				else groups.push({
+					key,
+					label: label(v),
+					items: [item]
+				});
+			}
+			return groups;
+		}, ...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
 	}
 	dotColor(item) {
 		return item.dotVariant ? BADGE_VARIANT_STYLES[item.dotVariant]?.color ?? null : null;
@@ -29383,6 +29695,34 @@ var TimelineComponent = class TimelineComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				groupByDay: {
+					classPropertyName: "groupByDay",
+					publicName: "groupByDay",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				timeZone: {
+					classPropertyName: "timeZone",
+					publicName: "timeZone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				now: {
+					classPropertyName: "now",
+					publicName: "now",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dayHeadingLevel: {
+					classPropertyName: "dayHeadingLevel",
+					publicName: "dayHeadingLevel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
@@ -29399,29 +29739,47 @@ var TimelineComponent = class TimelineComponent {
       <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
     }
     <ng-template #listTpl>
-      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
-        @for (item of items(); track item.id ?? $index) {
-          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
-            <span class="tl-marker" aria-hidden="true">
-              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
-            </span>
-            <div class="tl-content">
-              <div class="tl-head">
-                <span class="tl-title">{{ item.title }}</span>
-                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
-                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
-                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
-                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+      @if (groupByDay()) {
+        <ol class="tl tl-grouped" [attr.aria-label]="ariaLabel() || null">
+          @for (g of groups(); track $index) {
+            <li class="tl-day-group" [attr.data-day]="g.key || null">
+              @if (g.label) { <div class="tl-day" role="heading" [attr.aria-level]="headingLevel()">{{ g.label }}</div> }
+              <ol class="tl-sub">
+                @for (item of g.items; track item.id ?? $index) {
+                  <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 }
-              </div>
-              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
-              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
-                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
-              }
-            </div>
-          </li>
-        }
-      </ol>
+              </ol>
+            </li>
+          }
+        </ol>
+      } @else {
+        <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+          @for (item of items(); track item.id ?? $index) {
+            <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+        </ol>
+      }
+    </ng-template>
+    <ng-template #itemTpl let-item>
+      <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
+        <span class="tl-marker" aria-hidden="true">
+          @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+        </span>
+        <div class="tl-content">
+          <div class="tl-head">
+            <span class="tl-title">{{ item.title }}</span>
+            @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+            @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+            @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+              <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+            }
+          </div>
+          @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+          @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
+            <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+          }
+        </div>
+      </li>
     </ng-template>
     <ng-template #badgeTpl let-b>
       @if (b.tooltip) {
@@ -29432,7 +29790,7 @@ var TimelineComponent = class TimelineComponent {
     </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
+			styles: [":host{display:block}.tl,.tl-sub{list-style:none;margin:0;padding:0}.tl-day-group+.tl-day-group{margin-top:16px}.tl-day{margin:0 0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:#64748b}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -29513,29 +29871,47 @@ i0.ɵɵngDeclareClassMetadata({
       <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
     }
     <ng-template #listTpl>
-      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
-        @for (item of items(); track item.id ?? $index) {
-          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
-            <span class="tl-marker" aria-hidden="true">
-              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
-            </span>
-            <div class="tl-content">
-              <div class="tl-head">
-                <span class="tl-title">{{ item.title }}</span>
-                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
-                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
-                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
-                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+      @if (groupByDay()) {
+        <ol class="tl tl-grouped" [attr.aria-label]="ariaLabel() || null">
+          @for (g of groups(); track $index) {
+            <li class="tl-day-group" [attr.data-day]="g.key || null">
+              @if (g.label) { <div class="tl-day" role="heading" [attr.aria-level]="headingLevel()">{{ g.label }}</div> }
+              <ol class="tl-sub">
+                @for (item of g.items; track item.id ?? $index) {
+                  <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 }
-              </div>
-              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
-              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
-                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
-              }
-            </div>
-          </li>
-        }
-      </ol>
+              </ol>
+            </li>
+          }
+        </ol>
+      } @else {
+        <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+          @for (item of items(); track item.id ?? $index) {
+            <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+        </ol>
+      }
+    </ng-template>
+    <ng-template #itemTpl let-item>
+      <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
+        <span class="tl-marker" aria-hidden="true">
+          @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+        </span>
+        <div class="tl-content">
+          <div class="tl-head">
+            <span class="tl-title">{{ item.title }}</span>
+            @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+            @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+            @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+              <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+            }
+          </div>
+          @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+          @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
+            <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+          }
+        </div>
+      </li>
     </ng-template>
     <ng-template #badgeTpl let-b>
       @if (b.tooltip) {
@@ -29545,7 +29921,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </ng-template>
   `,
-			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
+			styles: [":host{display:block}.tl,.tl-sub{list-style:none;margin:0;padding:0}.tl-day-group+.tl-day-group{margin-top:16px}.tl-day{margin:0 0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:#64748b}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -29588,6 +29964,38 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "timePosition",
 				required: false
 			}]
+		}],
+		groupByDay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupByDay",
+				required: false
+			}]
+		}],
+		timeZone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeZone",
+				required: false
+			}]
+		}],
+		now: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "now",
+				required: false
+			}]
+		}],
+		dayHeadingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dayHeadingLevel",
+				required: false
+			}]
 		}]
 	}
 });
@@ -34909,6 +35317,10 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var BoardCardDirective = class BoardCardDirective {
 	constructor() {
+		this.typeFrom = input("", {
+			...ngDevMode ? { debugName: "typeFrom" } : /* istanbul ignore next */ {},
+			alias: "uiBoardCard"
+		});
 		this.template = inject(TemplateRef);
 	}
 	static ngTemplateContextGuard(_dir, _ctx) {
@@ -34926,11 +35338,18 @@ var BoardCardDirective = class BoardCardDirective {
 	}
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
-			minVersion: "14.0.0",
+			minVersion: "17.1.0",
 			version: "22.2.2",
 			type: BoardCardDirective,
 			isStandalone: true,
 			selector: "ng-template[uiBoardCard]",
+			inputs: { typeFrom: {
+				classPropertyName: "typeFrom",
+				publicName: "uiBoardCard",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
 			ngImport: i0
 		});
 	}
@@ -34946,8 +35365,17 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ng-template[uiBoardCard]",
 			standalone: true
 		}]
-	}]
+	}],
+	propDecorators: { typeFrom: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiBoardCard",
+			required: false
+		}]
+	}] }
 });
+let nextBoardId = 0;
 const DOT_COLORS = {
 	blue: "#3b82f6",
 	cyan: "#06b6d4",
@@ -34961,6 +35389,25 @@ const DOT_COLORS = {
 	gray: "#6b7280"
 };
 var BoardComponent = class BoardComponent {
+	limitOf(col) {
+		const size = this.pageSize() > 0 ? Math.floor(this.pageSize()) : 0;
+		if (!size) return col.items.length;
+		let limit = this.drawn()[col.key] ?? size;
+		const moved = this.movedTo();
+		if (moved?.to === col.key) limit = Math.max(limit, col.items.findIndex((i) => this.itemKey()(i) === moved.key) + 1);
+		return limit;
+	}
+	showMore(key) {
+		const size = Math.floor(this.pageSize());
+		const col = this.cols().find((c) => c.key === key);
+		if (!col || size < 1) return;
+		const limit = Math.min(col.items.length, this.limitOf(col) + size);
+		this.drawn.update((d) => ({
+			...d,
+			[key]: limit
+		}));
+		this.announcement.set(`Showing ${limit} of ${col.items.length} ${this.itemNounPlural()} in ${col.label}`);
+	}
 	constructor() {
 		this.columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
 		this.itemKey = input.required(...ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []);
@@ -34977,12 +35424,29 @@ var BoardComponent = class BoardComponent {
 		this.itemNoun = input("item", ...ngDevMode ? [{ debugName: "itemNoun" }] : /* istanbul ignore next */ []);
 		this.itemNounPlural = input("items", ...ngDevMode ? [{ debugName: "itemNounPlural" }] : /* istanbul ignore next */ []);
 		this.retryLabel = input("Retry", ...ngDevMode ? [{ debugName: "retryLabel" }] : /* istanbul ignore next */ []);
+		this.pageSize = input(50, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
 		this.cardClick = output();
 		this.cardAction = output();
 		this.itemMove = output();
 		this.retry = output();
 		this.card = contentChild(BoardCardDirective, ...ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []);
 		this.cols = linkedSignal(() => this.columns(), ...ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []);
+		this.drawn = signal({}, ...ngDevMode ? [{ debugName: "drawn" }] : /* istanbul ignore next */ []);
+		this.movedTo = signal(null, ...ngDevMode ? [{ debugName: "movedTo" }] : /* istanbul ignore next */ []);
+		this.shownCols = computed(() => {
+			const size = this.pageSize() > 0 ? Math.floor(this.pageSize()) : 0;
+			return this.cols().map((col) => {
+				const limit = this.limitOf(col);
+				const hidden = Math.max(0, col.items.length - limit);
+				return {
+					col,
+					shown: hidden ? col.items.slice(0, limit) : col.items,
+					hidden,
+					next: Math.min(size, hidden)
+				};
+			});
+		}, ...ngDevMode ? [{ debugName: "shownCols" }] : /* istanbul ignore next */ []);
+		this.hintId = `ub-hint-${nextBoardId++}`;
 		this.overKey = signal(null, ...ngDevMode ? [{ debugName: "overKey" }] : /* istanbul ignore next */ []);
 		this.draggingKey = signal(null, ...ngDevMode ? [{ debugName: "draggingKey" }] : /* istanbul ignore next */ []);
 		this.announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
@@ -34990,7 +35454,12 @@ var BoardComponent = class BoardComponent {
 		this.drag = null;
 		this.skeletonColumns = computed(() => Array.from({ length: Math.max(this.columns().length, 4) }, (_, i) => i), ...ngDevMode ? [{ debugName: "skeletonColumns" }] : /* istanbul ignore next */ []);
 		this.canDrag = computed(() => !this.readOnly() && !this.moveDisabled(), ...ngDevMode ? [{ debugName: "canDrag" }] : /* istanbul ignore next */ []);
-		this.canMoveAny = this.canDrag;
+		effect(() => {
+			if (this.loading()) {
+				this.drawn.set({});
+				this.movedTo.set(null);
+			}
+		});
 	}
 	dot(color) {
 		return color && DOT_COLORS[color] || color || "#3b82f6";
@@ -35076,11 +35545,18 @@ var BoardComponent = class BoardComponent {
 			};
 			return c;
 		}));
+		this.movedTo.set({
+			key,
+			to
+		});
 		this.itemMove.emit({
 			item,
 			from,
 			to,
-			revert: () => this.cols.set(before)
+			revert: () => {
+				this.cols.set(before);
+				this.movedTo.set(null);
+			}
 		});
 	}
 	static {
@@ -35205,6 +35681,13 @@ var BoardComponent = class BoardComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				pageSize: {
+					classPropertyName: "pageSize",
+					publicName: "pageSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -35249,8 +35732,9 @@ var BoardComponent = class BoardComponent {
       } @else if (cols().length === 0) {
         <div class="ub-message" role="status"><p>{{ emptyMessage() }}</p></div>
       } @else {
-        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()">
-          @for (col of cols(); track col.key) {
+        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()" [attr.aria-describedby]="canDrag() ? hintId : null">
+          @for (view of shownCols(); track view.col.key) {
+            @let col = view.col;
             <div class="ub-col"
                  [class.ub-col--over]="overKey() === col.key"
                  [class.ub-col--success]="col.tone === 'success'"
@@ -35266,19 +35750,20 @@ var BoardComponent = class BoardComponent {
                   <span class="ub-col__count" aria-hidden="true">{{ col.items.length }}</span>
                 </div>
                 @if (col.summary) {
-                  <div class="ub-col__summary" [attr.aria-label]="col.summaryLabel || col.summary">{{ col.summary }}</div>
+                  <div class="ub-col__summary"><span aria-hidden="true">{{ col.summary }}</span><span class="ub-sr-only">{{ col.summaryLabel || col.summary }}</span></div>
                 }
               </div>
-              <div class="ub-col__cards" role="list">
-                @for (item of col.items; track itemKey()(item)) {
+              <div class="ub-col__cards" [attr.role]="col.items.length ? 'list' : null">
+                @for (item of view.shown; track itemKey()(item)) {
+                  @let key = itemKey()(item);
                   <div class="ub-card"
                        [class.ub-card--success]="col.tone === 'success'"
-                       [class.ub-card--dragging]="draggingKey() === itemKey()(item)"
+                       [class.ub-card--dragging]="draggingKey() === key"
                        role="listitem"
                        tabindex="0"
-                       [attr.data-board-key]="itemKey()(item)"
+                       [attr.data-board-key]="key"
                        [attr.aria-label]="itemLabel()(item)"
-                       [attr.aria-keyshortcuts]="canMoveAny() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
+                       [attr.aria-keyshortcuts]="canDrag() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
                        [attr.draggable]="canDrag() ? 'true' : null"
                        (dragstart)="onDragStart($event, item, col)"
                        (dragend)="onDragEnd()"
@@ -35289,6 +35774,11 @@ var BoardComponent = class BoardComponent {
                     }
                   </div>
                 }
+                @if (view.hidden > 0) {
+                  <div class="ub-col__more" role="listitem">
+                    <button type="button" class="ub-more-btn" [attr.aria-label]="'Show ' + view.next + ' more (' + view.hidden + ' not shown), ' + col.label" (click)="showMore(col.key)">Show {{ view.next }} more ({{ view.hidden }} not shown)</button>
+                  </div>
+                }
                 @if (col.items.length === 0) {
                   <div class="ub-col__empty" role="status">{{ col.emptyText || emptyColumnText() }}</div>
                 }
@@ -35296,12 +35786,15 @@ var BoardComponent = class BoardComponent {
             </div>
           }
         </div>
+        @if (canDrag()) {
+          <p class="ub-sr-only" [id]="hintId">Drag a card to another column to move it, or focus a card and press Shift with the Left or Right Arrow key.</p>
+        }
         <div class="ub-sr-only" role="status" aria-live="polite">{{ announcement() }}</div>
       }
     </div>
   `,
 			isInline: true,
-			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:flex-start}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;max-height:calc(100vh - 200px);transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#94a3b8;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#94a3b8;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#94a3b8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#94a3b8}.ub-card__activity--stale{color:#d97706;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"],
+			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:stretch}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;min-height:0;transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#64748b;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__more{flex-shrink:0}.ub-more-btn{width:100%;padding:8px 10px;font:inherit;font-size:12px;font-weight:600;color:#475569;background:#fff;border:1.5px dashed #cbd5e1;border-radius:8px;cursor:pointer}.ub-more-btn:hover{background:#f1f5f9;border-color:#94a3b8}.ub-more-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#64748b;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#64748b;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#64748b}.ub-card__activity--stale{color:#b45309;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}.ub-card,.ub-col{transition:none}.ub-card--dragging{transform:none}}@media(pointer:coarse){.ub-more-btn{min-height:44px}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -35401,8 +35894,9 @@ i0.ɵɵngDeclareClassMetadata({
       } @else if (cols().length === 0) {
         <div class="ub-message" role="status"><p>{{ emptyMessage() }}</p></div>
       } @else {
-        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()">
-          @for (col of cols(); track col.key) {
+        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()" [attr.aria-describedby]="canDrag() ? hintId : null">
+          @for (view of shownCols(); track view.col.key) {
+            @let col = view.col;
             <div class="ub-col"
                  [class.ub-col--over]="overKey() === col.key"
                  [class.ub-col--success]="col.tone === 'success'"
@@ -35418,19 +35912,20 @@ i0.ɵɵngDeclareClassMetadata({
                   <span class="ub-col__count" aria-hidden="true">{{ col.items.length }}</span>
                 </div>
                 @if (col.summary) {
-                  <div class="ub-col__summary" [attr.aria-label]="col.summaryLabel || col.summary">{{ col.summary }}</div>
+                  <div class="ub-col__summary"><span aria-hidden="true">{{ col.summary }}</span><span class="ub-sr-only">{{ col.summaryLabel || col.summary }}</span></div>
                 }
               </div>
-              <div class="ub-col__cards" role="list">
-                @for (item of col.items; track itemKey()(item)) {
+              <div class="ub-col__cards" [attr.role]="col.items.length ? 'list' : null">
+                @for (item of view.shown; track itemKey()(item)) {
+                  @let key = itemKey()(item);
                   <div class="ub-card"
                        [class.ub-card--success]="col.tone === 'success'"
-                       [class.ub-card--dragging]="draggingKey() === itemKey()(item)"
+                       [class.ub-card--dragging]="draggingKey() === key"
                        role="listitem"
                        tabindex="0"
-                       [attr.data-board-key]="itemKey()(item)"
+                       [attr.data-board-key]="key"
                        [attr.aria-label]="itemLabel()(item)"
-                       [attr.aria-keyshortcuts]="canMoveAny() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
+                       [attr.aria-keyshortcuts]="canDrag() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
                        [attr.draggable]="canDrag() ? 'true' : null"
                        (dragstart)="onDragStart($event, item, col)"
                        (dragend)="onDragEnd()"
@@ -35441,6 +35936,11 @@ i0.ɵɵngDeclareClassMetadata({
                     }
                   </div>
                 }
+                @if (view.hidden > 0) {
+                  <div class="ub-col__more" role="listitem">
+                    <button type="button" class="ub-more-btn" [attr.aria-label]="'Show ' + view.next + ' more (' + view.hidden + ' not shown), ' + col.label" (click)="showMore(col.key)">Show {{ view.next }} more ({{ view.hidden }} not shown)</button>
+                  </div>
+                }
                 @if (col.items.length === 0) {
                   <div class="ub-col__empty" role="status">{{ col.emptyText || emptyColumnText() }}</div>
                 }
@@ -35448,13 +35948,17 @@ i0.ɵɵngDeclareClassMetadata({
             </div>
           }
         </div>
+        @if (canDrag()) {
+          <p class="ub-sr-only" [id]="hintId">Drag a card to another column to move it, or focus a card and press Shift with the Left or Right Arrow key.</p>
+        }
         <div class="ub-sr-only" role="status" aria-live="polite">{{ announcement() }}</div>
       }
     </div>
   `,
-			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:flex-start}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;max-height:calc(100vh - 200px);transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#94a3b8;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#94a3b8;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#94a3b8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#94a3b8}.ub-card__activity--stale{color:#d97706;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"]
+			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:stretch}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;min-height:0;transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#64748b;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__more{flex-shrink:0}.ub-more-btn{width:100%;padding:8px 10px;font:inherit;font-size:12px;font-weight:600;color:#475569;background:#fff;border:1.5px dashed #cbd5e1;border-radius:8px;cursor:pointer}.ub-more-btn:hover{background:#f1f5f9;border-color:#94a3b8}.ub-more-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#64748b;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#64748b;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#64748b}.ub-card__activity--stale{color:#b45309;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}.ub-card,.ub-col{transition:none}.ub-card--dragging{transform:none}}@media(pointer:coarse){.ub-more-btn{min-height:44px}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		columns: [{
 			type: i0.Input,
@@ -35576,6 +36080,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		pageSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageSize",
+				required: false
+			}]
+		}],
 		cardClick: [{
 			type: i0.Output,
 			args: ["cardClick"]
@@ -36990,6 +37502,208 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const CSS_LENGTH = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
+function px(v, fallback) {
+	if (v === null || v === void 0 || v === "") return fallback;
+	const n = Number(v);
+	return Number.isFinite(n) && n >= 0 ? n : fallback;
+}
+var SidebarLayoutComponent = class SidebarLayoutComponent {
+	constructor() {
+		this.sideWidth = input("320px", ...ngDevMode ? [{ debugName: "sideWidth" }] : /* istanbul ignore next */ []);
+		this.sidePosition = input("end", ...ngDevMode ? [{ debugName: "sidePosition" }] : /* istanbul ignore next */ []);
+		this.gap = input("md", ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
+		this.stickySide = input(true, ...ngDevMode ? [{ debugName: "stickySide" }] : /* istanbul ignore next */ []);
+		this.stickyTop = input(16, ...ngDevMode ? [{ debugName: "stickyTop" }] : /* istanbul ignore next */ []);
+		this.stickyOffset = input(32, ...ngDevMode ? [{ debugName: "stickyOffset" }] : /* istanbul ignore next */ []);
+		this.collapseAt = input("md", ...ngDevMode ? [{ debugName: "collapseAt" }] : /* istanbul ignore next */ []);
+		this.sideFirstWhenCollapsed = input(true, ...ngDevMode ? [{ debugName: "sideFirstWhenCollapsed" }] : /* istanbul ignore next */ []);
+		this.position = computed(() => this.sidePosition() === "start" ? "start" : "end", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+		this.sideCss = computed(() => {
+			const v = String(this.sideWidth() ?? "").trim();
+			return v && CSS_LENGTH.test(v) ? v : "320px";
+		}, ...ngDevMode ? [{ debugName: "sideCss" }] : /* istanbul ignore next */ []);
+		this.gapCss = computed(() => resolveLayoutGap(this.gap(), "md"), ...ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []);
+		this.topCss = computed(() => `${px(this.stickyTop(), 16)}px`, ...ngDevMode ? [{ debugName: "topCss" }] : /* istanbul ignore next */ []);
+		this.offCss = computed(() => `${px(this.stickyOffset(), 32)}px`, ...ngDevMode ? [{ debugName: "offCss" }] : /* istanbul ignore next */ []);
+		this.rootClass = computed(() => {
+			const c = this.collapseAt();
+			const collapse = c === "never" ? "" : c === "sm" || c === "lg" ? `sl-c-${c}` : "sl-c-md";
+			return [
+				this.position() === "start" ? "sl-start" : "",
+				this.stickySide() ? "sl-sticky" : "",
+				collapse,
+				collapse && this.sideFirstWhenCollapsed() ? "sl-first" : ""
+			].filter(Boolean).join(" ");
+		}, ...ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SidebarLayoutComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: SidebarLayoutComponent,
+			isStandalone: true,
+			selector: "ui-sidebar-layout",
+			inputs: {
+				sideWidth: {
+					classPropertyName: "sideWidth",
+					publicName: "sideWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sidePosition: {
+					classPropertyName: "sidePosition",
+					publicName: "sidePosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				gap: {
+					classPropertyName: "gap",
+					publicName: "gap",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickySide: {
+					classPropertyName: "stickySide",
+					publicName: "stickySide",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickyTop: {
+					classPropertyName: "stickyTop",
+					publicName: "stickyTop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickyOffset: {
+					classPropertyName: "stickyOffset",
+					publicName: "stickyOffset",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapseAt: {
+					classPropertyName: "collapseAt",
+					publicName: "collapseAt",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sideFirstWhenCollapsed: {
+					classPropertyName: "sideFirstWhenCollapsed",
+					publicName: "sideFirstWhenCollapsed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { properties: { "attr.data-side-position": "position()" } },
+			ngImport: i0,
+			template: `<div class="sl" [class]="rootClass()" [style.--sl-side-w]="sideCss()" [style.--sl-gap]="gapCss()" [style.--sl-top]="topCss()" [style.--sl-off]="offCss()" [style.row-gap]="gapCss()"><div class="sl-main"><ng-content select="[layout-main]" /></div><div class="sl-side"><ng-content select="[layout-side]" /></div></div>`,
+			isInline: true,
+			styles: [":host{display:block}.sl{display:grid;grid-template-columns:minmax(0,1fr) auto}.sl-main{grid-column:1;grid-row:1;min-width:0}.sl-side{grid-column:2;grid-row:1;box-sizing:border-box;width:var(--sl-side-w, 320px);max-width:100%;min-width:0;margin-inline-start:var(--sl-gap, 16px)}.sl-side:empty{display:none}.sl.sl-start{grid-template-columns:auto minmax(0,1fr)}.sl.sl-start .sl-main{grid-column:2}.sl.sl-start .sl-side{grid-column:1;margin-inline-start:0;margin-inline-end:var(--sl-gap, 16px)}.sl.sl-sticky .sl-side{position:-webkit-sticky;position:sticky;top:var(--sl-top, 16px);align-self:start;max-height:calc(100vh - (var(--sl-top, 16px) + var(--sl-off, 32px)));max-height:calc(100dvh - (var(--sl-top, 16px) + var(--sl-off, 32px)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:640px){.sl.sl-c-sm{grid-template-columns:minmax(0,1fr)}.sl.sl-c-sm .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-sm .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-sm.sl-first .sl-side{order:-1}}@media(max-width:900px){.sl.sl-c-md{grid-template-columns:minmax(0,1fr)}.sl.sl-c-md .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-md .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-md.sl-first .sl-side{order:-1}}@media(max-width:1200px){.sl.sl-c-lg{grid-template-columns:minmax(0,1fr)}.sl.sl-c-lg .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-lg .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-lg.sl-first .sl-side{order:-1}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SidebarLayoutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-sidebar-layout",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[attr.data-side-position]": "position()" },
+			template: `<div class="sl" [class]="rootClass()" [style.--sl-side-w]="sideCss()" [style.--sl-gap]="gapCss()" [style.--sl-top]="topCss()" [style.--sl-off]="offCss()" [style.row-gap]="gapCss()"><div class="sl-main"><ng-content select="[layout-main]" /></div><div class="sl-side"><ng-content select="[layout-side]" /></div></div>`,
+			styles: [":host{display:block}.sl{display:grid;grid-template-columns:minmax(0,1fr) auto}.sl-main{grid-column:1;grid-row:1;min-width:0}.sl-side{grid-column:2;grid-row:1;box-sizing:border-box;width:var(--sl-side-w, 320px);max-width:100%;min-width:0;margin-inline-start:var(--sl-gap, 16px)}.sl-side:empty{display:none}.sl.sl-start{grid-template-columns:auto minmax(0,1fr)}.sl.sl-start .sl-main{grid-column:2}.sl.sl-start .sl-side{grid-column:1;margin-inline-start:0;margin-inline-end:var(--sl-gap, 16px)}.sl.sl-sticky .sl-side{position:-webkit-sticky;position:sticky;top:var(--sl-top, 16px);align-self:start;max-height:calc(100vh - (var(--sl-top, 16px) + var(--sl-off, 32px)));max-height:calc(100dvh - (var(--sl-top, 16px) + var(--sl-off, 32px)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:640px){.sl.sl-c-sm{grid-template-columns:minmax(0,1fr)}.sl.sl-c-sm .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-sm .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-sm.sl-first .sl-side{order:-1}}@media(max-width:900px){.sl.sl-c-md{grid-template-columns:minmax(0,1fr)}.sl.sl-c-md .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-md .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-md.sl-first .sl-side{order:-1}}@media(max-width:1200px){.sl.sl-c-lg{grid-template-columns:minmax(0,1fr)}.sl.sl-c-lg .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-lg .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-lg.sl-first .sl-side{order:-1}}\n"]
+		}]
+	}],
+	propDecorators: {
+		sideWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideWidth",
+				required: false
+			}]
+		}],
+		sidePosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sidePosition",
+				required: false
+			}]
+		}],
+		gap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gap",
+				required: false
+			}]
+		}],
+		stickySide: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickySide",
+				required: false
+			}]
+		}],
+		stickyTop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyTop",
+				required: false
+			}]
+		}],
+		stickyOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyOffset",
+				required: false
+			}]
+		}],
+		collapseAt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseAt",
+				required: false
+			}]
+		}],
+		sideFirstWhenCollapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideFirstWhenCollapsed",
+				required: false
+			}]
+		}]
+	}
+});
 const JUSTIFY = {
 	start: "flex-start",
 	center: "center",
@@ -39428,6 +40142,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, NotesComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, ShowComponent, SidePanelComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatAddress, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatAddress, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map