@forgeroute/ui 0.4.8 → 0.4.10

package/fesm2022/forgeroute-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, PLATFORM_ID, Renderer2, TemplateRef, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, PLATFORM_ID, Renderer2, TemplateRef, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
 import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { catchError, debounceTime, distinctUntilChanged, skip, switchMap } from "rxjs/operators";
@@ -997,7 +997,12 @@ var ColumnFilterComponent = class ColumnFilterComponent {
 			const reposition = () => this._reposition();
 			window.addEventListener("resize", reposition);
 			document.addEventListener("scroll", reposition, true);
+			const onKeydown = (event) => {
+				if (event.key === "Escape") this.onEscape(event);
+			};
+			document.addEventListener("keydown", onKeydown, true);
 			onCleanup(() => {
+				document.removeEventListener("keydown", onKeydown, true);
 				window.removeEventListener("resize", reposition);
 				document.removeEventListener("scroll", reposition, true);
 			});
@@ -1036,11 +1041,12 @@ var ColumnFilterComponent = class ColumnFilterComponent {
 	onDocumentClick(_event) {
 		if (this.open()) this.open.set(false);
 	}
-	onEscape() {
-		if (this.open()) {
-			this.open.set(false);
-			this._trigger()?.focus();
-		}
+	onEscape(event) {
+		if (!this.open()) return;
+		event?.stopPropagation();
+		event?.preventDefault();
+		this.open.set(false);
+		this._trigger()?.focus();
 	}
 	onArrow(event, dir) {
 		if (!this.open()) return;
@@ -1126,7 +1132,6 @@ var ColumnFilterComponent = class ColumnFilterComponent {
 			outputs: { filterChange: "filterChange" },
 			host: { listeners: {
 				"document:click": "onDocumentClick($event)",
-				"document:keydown.escape": "onEscape()",
 				"keydown.arrowdown": "onArrow($event, 1)",
 				"keydown.arrowup": "onArrow($event, -1)"
 			} },
@@ -1218,7 +1223,6 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"(document:click)": "onDocumentClick($event)",
-				"(document:keydown.escape)": "onEscape()",
 				"(keydown.arrowdown)": "onArrow($event, 1)",
 				"(keydown.arrowup)": "onArrow($event, -1)"
 			},
@@ -1643,6 +1647,10 @@ var MoreMenuComponent = class MoreMenuComponent {
 			if (!this.open()) return;
 			const onPointerDown = (event) => this.onDocumentPointerDown(event);
 			document.addEventListener("pointerdown", onPointerDown, true);
+			const onKeydown = (event) => {
+				if (event.key === "Escape") this.onEscape(event);
+			};
+			document.addEventListener("keydown", onKeydown, true);
 			const fixed = this.placement() !== null;
 			const onScroll = (event) => {
 				if (!(event.target instanceof Node && this._dropdownEl()?.contains(event.target))) this.open.set(false);
@@ -1656,6 +1664,7 @@ var MoreMenuComponent = class MoreMenuComponent {
 			}
 			onCleanup(() => {
 				document.removeEventListener("pointerdown", onPointerDown, true);
+				document.removeEventListener("keydown", onKeydown, true);
 				if (fixed) {
 					document.removeEventListener("scroll", onScroll, true);
 					window.removeEventListener("resize", onResize);
@@ -1774,11 +1783,12 @@ var MoreMenuComponent = class MoreMenuComponent {
 		if (target instanceof Node && this._el.nativeElement.contains(target)) return;
 		this.open.set(false);
 	}
-	onEscape() {
-		if (this.open()) {
-			this.open.set(false);
-			this._trigger()?.focus();
-		}
+	onEscape(event) {
+		if (!this.open()) return;
+		event?.stopPropagation();
+		event?.preventDefault();
+		this.open.set(false);
+		this._trigger()?.focus();
 	}
 	onArrow(event, dir) {
 		if (!this.open()) return;
@@ -1862,7 +1872,6 @@ var MoreMenuComponent = class MoreMenuComponent {
 			outputs: { actionClick: "actionClick" },
 			host: { listeners: {
 				"document:click": "onDocumentClick()",
-				"document:keydown.escape": "onEscape()",
 				"keydown.arrowdown": "onArrow($event, 1)",
 				"keydown.arrowup": "onArrow($event, -1)"
 			} },
@@ -1902,7 +1911,7 @@ var MoreMenuComponent = class MoreMenuComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:inline-block;position:relative}.mm-wrapper{position:relative}.mm-trigger{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:#94a3b8;cursor:pointer;transition:background .1s,color .1s}.mm-trigger:hover{background:#f1f5f9;color:#334155}.mm-trigger:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.mm-dropdown{position:absolute;right:0;top:calc(100% + 4px);z-index:200;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:160px;overflow-x:hidden;overflow-y:auto;padding:4px;max-width:calc(100vw - 16px);overscroll-behavior:contain;background:linear-gradient(#fff 30%,#fff0) center top / 100% 16px no-repeat local,linear-gradient(#fff0,#fff 70%) center bottom / 100% 16px no-repeat local,radial-gradient(farthest-side at 50% 0,#0f172a38,#0f172a00) center top / 100% 8px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,#0f172a38,#0f172a00) center bottom / 100% 8px no-repeat scroll,#fff}.mm-dropdown.mm-up{top:auto;bottom:calc(100% + 4px)}.mm-dropdown.mm-fixed{position:fixed;left:auto}.mm-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;text-align:left;border-radius:5px;transition:background .1s;min-height:40px}.mm-item:hover:not(:disabled){background:#f8fafc}.mm-item:disabled{opacity:.4;cursor:default}.mm-item.mm-danger{color:#dc2626}.mm-item.mm-danger:hover:not(:disabled){background:#fef2f2}.mm-item:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.mm-icon{flex-shrink:0}@media(max-width:1024px){.mm-trigger{width:36px;height:36px}.mm-item{padding:11px 14px;min-height:40px}}@media(pointer:coarse){.mm-trigger{width:44px;height:44px}}@media(max-width:640px){.mm-trigger{width:44px;height:44px}.mm-item{padding:12px 14px;font-size:.9375rem;min-height:44px}.mm-dropdown{max-height:60vh;overflow-y:auto}}\n"],
+			styles: [":host{display:inline-block;position:relative}.mm-wrapper{position:relative}.mm-trigger{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:#64748b;cursor:pointer;transition:background .1s,color .1s}.mm-trigger:hover{background:#f1f5f9;color:#334155}.mm-trigger:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.mm-dropdown{position:absolute;right:0;top:calc(100% + 4px);z-index:200;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:160px;overflow-x:hidden;overflow-y:auto;padding:4px;max-width:calc(100vw - 16px);overscroll-behavior:contain;background:linear-gradient(#fff 30%,#fff0) center top / 100% 16px no-repeat local,linear-gradient(#fff0,#fff 70%) center bottom / 100% 16px no-repeat local,radial-gradient(farthest-side at 50% 0,#0f172a38,#0f172a00) center top / 100% 8px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,#0f172a38,#0f172a00) center bottom / 100% 8px no-repeat scroll,#fff}.mm-dropdown.mm-up{top:auto;bottom:calc(100% + 4px)}.mm-dropdown.mm-fixed{position:fixed;left:auto}.mm-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;text-align:left;border-radius:5px;transition:background .1s;min-height:40px}.mm-item:hover:not(:disabled){background:#f8fafc}.mm-item:disabled{opacity:.4;cursor:default}.mm-item.mm-danger{color:#dc2626}.mm-item.mm-danger:hover:not(:disabled){background:#fef2f2}.mm-item:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.mm-icon{flex-shrink:0}@media(max-width:1024px){.mm-trigger{width:36px;height:36px}.mm-item{padding:11px 14px;min-height:40px}}@media(pointer:coarse){.mm-trigger{width:44px;height:44px}}@media(max-width:640px){.mm-trigger{width:44px;height:44px}.mm-item{padding:12px 14px;font-size:.9375rem;min-height:44px}.mm-dropdown{max-height:60vh;overflow-y:auto}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -1920,7 +1929,6 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"(document:click)": "onDocumentClick()",
-				"(document:keydown.escape)": "onEscape()",
 				"(keydown.arrowdown)": "onArrow($event, 1)",
 				"(keydown.arrowup)": "onArrow($event, -1)"
 			},
@@ -1958,7 +1966,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:inline-block;position:relative}.mm-wrapper{position:relative}.mm-trigger{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:#94a3b8;cursor:pointer;transition:background .1s,color .1s}.mm-trigger:hover{background:#f1f5f9;color:#334155}.mm-trigger:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.mm-dropdown{position:absolute;right:0;top:calc(100% + 4px);z-index:200;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:160px;overflow-x:hidden;overflow-y:auto;padding:4px;max-width:calc(100vw - 16px);overscroll-behavior:contain;background:linear-gradient(#fff 30%,#fff0) center top / 100% 16px no-repeat local,linear-gradient(#fff0,#fff 70%) center bottom / 100% 16px no-repeat local,radial-gradient(farthest-side at 50% 0,#0f172a38,#0f172a00) center top / 100% 8px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,#0f172a38,#0f172a00) center bottom / 100% 8px no-repeat scroll,#fff}.mm-dropdown.mm-up{top:auto;bottom:calc(100% + 4px)}.mm-dropdown.mm-fixed{position:fixed;left:auto}.mm-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;text-align:left;border-radius:5px;transition:background .1s;min-height:40px}.mm-item:hover:not(:disabled){background:#f8fafc}.mm-item:disabled{opacity:.4;cursor:default}.mm-item.mm-danger{color:#dc2626}.mm-item.mm-danger:hover:not(:disabled){background:#fef2f2}.mm-item:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.mm-icon{flex-shrink:0}@media(max-width:1024px){.mm-trigger{width:36px;height:36px}.mm-item{padding:11px 14px;min-height:40px}}@media(pointer:coarse){.mm-trigger{width:44px;height:44px}}@media(max-width:640px){.mm-trigger{width:44px;height:44px}.mm-item{padding:12px 14px;font-size:.9375rem;min-height:44px}.mm-dropdown{max-height:60vh;overflow-y:auto}}\n"]
+			styles: [":host{display:inline-block;position:relative}.mm-wrapper{position:relative}.mm-trigger{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:#64748b;cursor:pointer;transition:background .1s,color .1s}.mm-trigger:hover{background:#f1f5f9;color:#334155}.mm-trigger:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.mm-dropdown{position:absolute;right:0;top:calc(100% + 4px);z-index:200;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:160px;overflow-x:hidden;overflow-y:auto;padding:4px;max-width:calc(100vw - 16px);overscroll-behavior:contain;background:linear-gradient(#fff 30%,#fff0) center top / 100% 16px no-repeat local,linear-gradient(#fff0,#fff 70%) center bottom / 100% 16px no-repeat local,radial-gradient(farthest-side at 50% 0,#0f172a38,#0f172a00) center top / 100% 8px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,#0f172a38,#0f172a00) center bottom / 100% 8px no-repeat scroll,#fff}.mm-dropdown.mm-up{top:auto;bottom:calc(100% + 4px)}.mm-dropdown.mm-fixed{position:fixed;left:auto}.mm-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;text-align:left;border-radius:5px;transition:background .1s;min-height:40px}.mm-item:hover:not(:disabled){background:#f8fafc}.mm-item:disabled{opacity:.4;cursor:default}.mm-item.mm-danger{color:#dc2626}.mm-item.mm-danger:hover:not(:disabled){background:#fef2f2}.mm-item:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.mm-icon{flex-shrink:0}@media(max-width:1024px){.mm-trigger{width:36px;height:36px}.mm-item{padding:11px 14px;min-height:40px}}@media(pointer:coarse){.mm-trigger{width:44px;height:44px}}@media(max-width:640px){.mm-trigger{width:44px;height:44px}.mm-item{padding:12px 14px;font-size:.9375rem;min-height:44px}.mm-dropdown{max-height:60vh;overflow-y:auto}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -2553,6 +2561,7 @@ var CheckboxComponent = class CheckboxComponent {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.testId = input("", ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.labelTestId = input("", ...ngDevMode ? [{ debugName: "labelTestId" }] : /* istanbul ignore next */ []);
 		this.headingLevel = input(null, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
 		this.indeterminate = input(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
 		this.checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
@@ -2716,6 +2725,13 @@ var CheckboxComponent = class CheckboxComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				labelTestId: {
+					classPropertyName: "labelTestId",
+					publicName: "labelTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				headingLevel: {
 					classPropertyName: "headingLevel",
 					publicName: "headingLevel",
@@ -2881,7 +2897,7 @@ var CheckboxComponent = class CheckboxComponent {
                 [attr.aria-describedby]="opt.description ? _descId + '-' + i : null"
                 (change)="onToggleOption(opt.value, $event)"
               />
-              <span class="cb-label">{{ opt.label }}</span>
+              <span class="cb-label" [attr.data-testid]="opt.labelTestId || null">{{ opt.label }}</span>
             </label>
             @if (opt.description) {
               <p class="cb-desc" [id]="_descId + '-' + i">{{ opt.description }}</p>
@@ -2924,7 +2940,7 @@ var CheckboxComponent = class CheckboxComponent {
         (change)="onToggle($event)"
       />
       @if (label()) {
-        <span class="cb-label" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ label() }}</span>
+        <span class="cb-label" [attr.data-testid]="labelTestId() || null" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ label() }}</span>
       }
       <ng-content />
     </label>
@@ -3021,7 +3037,7 @@ i0.ɵɵngDeclareClassMetadata({
                 [attr.aria-describedby]="opt.description ? _descId + '-' + i : null"
                 (change)="onToggleOption(opt.value, $event)"
               />
-              <span class="cb-label">{{ opt.label }}</span>
+              <span class="cb-label" [attr.data-testid]="opt.labelTestId || null">{{ opt.label }}</span>
             </label>
             @if (opt.description) {
               <p class="cb-desc" [id]="_descId + '-' + i">{{ opt.description }}</p>
@@ -3064,7 +3080,7 @@ i0.ɵɵngDeclareClassMetadata({
         (change)="onToggle($event)"
       />
       @if (label()) {
-        <span class="cb-label" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ label() }}</span>
+        <span class="cb-label" [attr.data-testid]="labelTestId() || null" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ label() }}</span>
       }
       <ng-content />
     </label>
@@ -3117,6 +3133,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelTestId",
+				required: false
+			}]
+		}],
 		headingLevel: [{
 			type: i0.Input,
 			args: [{
@@ -3259,6 +3283,7 @@ var ButtonComponent = class ButtonComponent {
 		this.routerLink = input(null, ...ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []);
 		this.queryParams = input(null, ...ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []);
 		this.fragment = input(null, ...ngDevMode ? [{ debugName: "fragment" }] : /* istanbul ignore next */ []);
+		this.state = input(null, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
 		this.href = input(null, ...ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []);
 		this.target = input(null, ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
 		this.rel = input(null, ...ngDevMode ? [{ debugName: "rel" }] : /* istanbul ignore next */ []);
@@ -3285,6 +3310,14 @@ var ButtonComponent = class ButtonComponent {
 			parts.add("noreferrer");
 			return [...parts].join(" ");
 		}, ...ngDevMode ? [{ debugName: "_rel" }] : /* istanbul ignore next */ []);
+		this.shortLabel = input("", ...ngDevMode ? [{ debugName: "shortLabel" }] : /* istanbul ignore next */ []);
+		this.shortBelow = input("md", ...ngDevMode ? [{ debugName: "shortBelow" }] : /* istanbul ignore next */ []);
+		this._slClass = computed(() => {
+			const below = this.shortBelow();
+			if (typeof below === "number") return this._narrow() ? "btn-sl-num btn-sl-narrow" : "btn-sl-num";
+			return "btn-sl-" + (below === "sm" || below === "lg" ? below : "md");
+		}, ...ngDevMode ? [{ debugName: "_slClass" }] : /* istanbul ignore next */ []);
+		this._narrow = signal(false, ...ngDevMode ? [{ debugName: "_narrow" }] : /* istanbul ignore next */ []);
 		this.color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 		this.active = input(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -3296,6 +3329,18 @@ var ButtonComponent = class ButtonComponent {
 		this.ariaExpanded = input(void 0, ...ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []);
 		this.ariaPressed = input(void 0, ...ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []);
 		this.ariaDescribedBy = input(void 0, ...ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
+		effect((onCleanup) => {
+			const below = this.shortBelow();
+			if (!this.shortLabel() || typeof below !== "number" || !Number.isFinite(below) || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+				this._narrow.set(false);
+				return;
+			}
+			const mq = window.matchMedia(`(max-width: ${below - .02}px)`);
+			const update = () => this._narrow.set(mq.matches);
+			update();
+			mq.addEventListener("change", update);
+			onCleanup(() => mq.removeEventListener("change", update));
+		});
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -3343,6 +3388,13 @@ var ButtonComponent = class ButtonComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				state: {
+					classPropertyName: "state",
+					publicName: "state",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				href: {
 					classPropertyName: "href",
 					publicName: "href",
@@ -3364,6 +3416,20 @@ var ButtonComponent = class ButtonComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				shortLabel: {
+					classPropertyName: "shortLabel",
+					publicName: "shortLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				shortBelow: {
+					classPropertyName: "shortBelow",
+					publicName: "shortBelow",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				color: {
 					classPropertyName: "color",
 					publicName: "color",
@@ -3463,8 +3529,15 @@ var ButtonComponent = class ButtonComponent {
       @if (loading()) {
         <span class="spinner"></span>
       }
-      <ng-content />
+      @if (shortLabel()) {
+        <!-- shortLabel: the projected (long) text stays in the DOM, visually hidden while the short one shows, so the accessible name is always the long text; the short text is aria-hidden (never read twice). -->
+        <span [class]="'btn-sl-long ' + _slClass()"><ng-container [ngTemplateOutlet]="projected" /></span>
+        <span [class]="'btn-sl-short ' + _slClass()" aria-hidden="true">{{ shortLabel() }}</span>
+      } @else {
+        <ng-container [ngTemplateOutlet]="projected" />
+      }
     </ng-template>
+    <ng-template #projected><ng-content /></ng-template>
     @if (routerLink() !== null) {
       <!-- A real link (middle-click, open in new tab, screen readers say "link"): same look as the button of this variant, underlined. -->
       @if (disabled() || loading()) {
@@ -3482,6 +3555,7 @@ var ButtonComponent = class ButtonComponent {
           [routerLink]="routerLink()"
           [queryParams]="queryParams()"
           [fragment]="fragment() ?? undefined"
+          [state]="state() ?? undefined"
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
@@ -3530,7 +3604,7 @@ var ButtonComponent = class ButtonComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.btn-full{width:100%}.btn-primary{background:var(--ui-accent, #3B82F6);color:var(--ui-on-accent, #fff);border:1px solid var(--ui-accent, #3B82F6)}.btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #2563EB);border-color:var(--ui-accent-hover, #2563EB)}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:var(--ui-accent, #3b82f6);border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:var(--ui-accent-hover, #60a5fa)}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:var(--ui-accent, #3b82f6);border-bottom-color:var(--ui-accent, #3b82f6)}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"],
+			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.btn-full{width:100%}.btn-primary{background:var(--ui-accent, #2563EB);color:var(--ui-on-accent, #fff);border:1px solid var(--ui-accent, #2563EB)}.btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #1D4ED8);border-color:var(--ui-accent-hover, #1D4ED8)}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:var(--ui-link, var(--ui-accent, #2563eb));border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:var(--ui-link-hover, var(--ui-accent-hover, #1d4ed8))}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:var(--ui-accent, #2563eb);border-bottom-color:var(--ui-accent, #2563eb)}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#64748b}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#64748b}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.btn-sl-short{display:none}@media(max-width:479.98px){.btn-sl-sm.btn-sl-long{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-sm.btn-sl-short{display:inline}}@media(max-width:767.98px){.btn-sl-md.btn-sl-long{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-md.btn-sl-short{display:inline}}@media(max-width:1023.98px){.btn-sl-lg.btn-sl-long{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-lg.btn-sl-short{display:inline}}.btn-sl-long.btn-sl-narrow{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-short.btn-sl-narrow{display:inline}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -3581,8 +3655,15 @@ i0.ɵɵngDeclareClassMetadata({
       @if (loading()) {
         <span class="spinner"></span>
       }
-      <ng-content />
+      @if (shortLabel()) {
+        <!-- shortLabel: the projected (long) text stays in the DOM, visually hidden while the short one shows, so the accessible name is always the long text; the short text is aria-hidden (never read twice). -->
+        <span [class]="'btn-sl-long ' + _slClass()"><ng-container [ngTemplateOutlet]="projected" /></span>
+        <span [class]="'btn-sl-short ' + _slClass()" aria-hidden="true">{{ shortLabel() }}</span>
+      } @else {
+        <ng-container [ngTemplateOutlet]="projected" />
+      }
     </ng-template>
+    <ng-template #projected><ng-content /></ng-template>
     @if (routerLink() !== null) {
       <!-- A real link (middle-click, open in new tab, screen readers say "link"): same look as the button of this variant, underlined. -->
       @if (disabled() || loading()) {
@@ -3600,6 +3681,7 @@ i0.ɵɵngDeclareClassMetadata({
           [routerLink]="routerLink()"
           [queryParams]="queryParams()"
           [fragment]="fragment() ?? undefined"
+          [state]="state() ?? undefined"
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
@@ -3647,9 +3729,10 @@ i0.ɵɵngDeclareClassMetadata({
     ><ng-container [ngTemplateOutlet]="content" /></button>
     }
   `,
-			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.btn-full{width:100%}.btn-primary{background:var(--ui-accent, #3B82F6);color:var(--ui-on-accent, #fff);border:1px solid var(--ui-accent, #3B82F6)}.btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #2563EB);border-color:var(--ui-accent-hover, #2563EB)}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:var(--ui-accent, #3b82f6);border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:var(--ui-accent-hover, #60a5fa)}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:var(--ui-accent, #3b82f6);border-bottom-color:var(--ui-accent, #3b82f6)}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"]
+			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.btn-full{width:100%}.btn-primary{background:var(--ui-accent, #2563EB);color:var(--ui-on-accent, #fff);border:1px solid var(--ui-accent, #2563EB)}.btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #1D4ED8);border-color:var(--ui-accent-hover, #1D4ED8)}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:var(--ui-link, var(--ui-accent, #2563eb));border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:var(--ui-link-hover, var(--ui-accent-hover, #1d4ed8))}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:var(--ui-accent, #2563eb);border-bottom-color:var(--ui-accent, #2563eb)}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#64748b}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#64748b}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.btn-sl-short{display:none}@media(max-width:479.98px){.btn-sl-sm.btn-sl-long{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-sm.btn-sl-short{display:inline}}@media(max-width:767.98px){.btn-sl-md.btn-sl-long{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-md.btn-sl-short{display:inline}}@media(max-width:1023.98px){.btn-sl-lg.btn-sl-long{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-lg.btn-sl-short{display:inline}}.btn-sl-long.btn-sl-narrow{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.btn-sl-short.btn-sl-narrow{display:inline}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		variant: [{
 			type: i0.Input,
@@ -3683,6 +3766,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: false
+			}]
+		}],
 		href: [{
 			type: i0.Input,
 			args: [{
@@ -3707,6 +3798,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		shortLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shortLabel",
+				required: false
+			}]
+		}],
+		shortBelow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shortBelow",
+				required: false
+			}]
+		}],
 		color: [{
 			type: i0.Input,
 			args: [{
@@ -3829,6 +3936,7 @@ var TextInputComponent = class TextInputComponent {
 		this.step = input(void 0, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
 		this.valueType = input("string", ...ngDevMode ? [{ debugName: "valueType" }] : /* istanbul ignore next */ []);
 		this.formatter = input(void 0, ...ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []);
+		this.integer = input(false, ...ngDevMode ? [{ debugName: "integer" }] : /* istanbul ignore next */ []);
 		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
 		this.valueChange = output();
 		this.focused = output();
@@ -3846,7 +3954,8 @@ var TextInputComponent = class TextInputComponent {
 		this._numeric = computed(() => this.valueType() === "number" && this.type() === "number", ...ngDevMode ? [{ debugName: "_numeric" }] : /* istanbul ignore next */ []);
 		this._stepAttr = computed(() => {
 			const step = this.step();
-			return this.type() === "number" && typeof step === "number" && Number.isFinite(step) && step > 0 ? String(step) : null;
+			if (this.type() === "number" && typeof step === "number" && Number.isFinite(step) && step > 0) return String(step);
+			return this.type() === "number" && this.integer() ? "1" : null;
 		}, ...ngDevMode ? [{ debugName: "_stepAttr" }] : /* istanbul ignore next */ []);
 		this._warned = false;
 		this._formatting = computed(() => this.phoneFormat() || this.type() === "tel", ...ngDevMode ? [{ debugName: "_formatting" }] : /* istanbul ignore next */ []);
@@ -3900,6 +4009,7 @@ var TextInputComponent = class TextInputComponent {
 		const input = event.target;
 		const raw = input.value;
 		let val = this._formatting() ? TextInputComponent._formatPhone(raw) : raw;
+		if (this.integer()) val = val.replace(/[.eE].*$/, "");
 		const format = this.formatter();
 		if (format) val = format(val);
 		this._value.set(val);
@@ -3953,7 +4063,7 @@ var TextInputComponent = class TextInputComponent {
 			key: "number",
 			message: "Please enter a valid number."
 		};
-		const min = this.min(), max = this.max(), decimals = this.maxDecimals();
+		const min = this.min(), max = this.max(), decimals = this.maxDecimals() ?? (this.integer() ? 0 : void 0);
 		if (min != null && n < min) return {
 			key: "min",
 			message: `Must be at least ${min}`,
@@ -4142,6 +4252,13 @@ var TextInputComponent = class TextInputComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				integer: {
+					classPropertyName: "integer",
+					publicName: "integer",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				showErrors: {
 					classPropertyName: "showErrors",
 					publicName: "showErrors",
@@ -4195,7 +4312,7 @@ var TextInputComponent = class TextInputComponent {
         [style.padding-left]="_prefixPadding()"
         [id]="_inputId"
         [type]="type()"
-        [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : null)"
+        [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : integer() ? 'numeric' : null)"
         [placeholder]="placeholder()"
         [value]="_value()"
         [disabled]="disabled()"
@@ -4269,7 +4386,7 @@ i0.ɵɵngDeclareClassMetadata({
         [style.padding-left]="_prefixPadding()"
         [id]="_inputId"
         [type]="type()"
-        [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : null)"
+        [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : integer() ? 'numeric' : null)"
         [placeholder]="placeholder()"
         [value]="_value()"
         [disabled]="disabled()"
@@ -4453,6 +4570,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		integer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "integer",
+				required: false
+			}]
+		}],
 		showErrors: [{
 			type: i0.Input,
 			args: [{
@@ -4879,6 +5004,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"label",
 						"ariaLabel",
 						"testId",
+						"labelTestId",
 						"headingLevel",
 						"indeterminate",
 						"checked",
@@ -4910,9 +5036,12 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -4952,6 +5081,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"step",
 						"valueType",
 						"formatter",
+						"integer",
 						"showErrors",
 						"disabled"
 					],
@@ -7559,9 +7689,12 @@ var ImportExportComponent = class ImportExportComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -8056,9 +8189,12 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -8407,9 +8543,12 @@ var ErrorStateComponent = class ErrorStateComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -10747,9 +10886,12 @@ var DataTableComponent = class DataTableComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -10773,6 +10915,7 @@ var DataTableComponent = class DataTableComponent {
 						"label",
 						"ariaLabel",
 						"testId",
+						"labelTestId",
 						"headingLevel",
 						"indeterminate",
 						"checked",
@@ -11845,6 +11988,7 @@ var SidePanelComponent = class SidePanelComponent {
 	onKeydown(event) {
 		if (!this.open() || !this._overlays.isTop(this)) return;
 		if (event.key === "Escape") {
+			if (event.defaultPrevented) return;
 			event.preventDefault();
 			this.closed.emit();
 			return;
@@ -13140,10 +13284,34 @@ var StepperComponent = class StepperComponent {
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 		this.accentColor = input("", ...ngDevMode ? [{ debugName: "accentColor" }] : /* istanbul ignore next */ []);
 		this.completeColor = input("", ...ngDevMode ? [{ debugName: "completeColor" }] : /* istanbul ignore next */ []);
+		this.accentLabels = input(false, ...ngDevMode ? [{ debugName: "accentLabels" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("Progress", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.labelsOnSmallScreens = input("current", ...ngDevMode ? [{ debugName: "labelsOnSmallScreens" }] : /* istanbul ignore next */ []);
+		this.minStepWidth = input("", ...ngDevMode ? [{ debugName: "minStepWidth" }] : /* istanbul ignore next */ []);
+		this.scrollable = input(false, ...ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []);
+		this.leadingWidth = input("", ...ngDevMode ? [{ debugName: "leadingWidth" }] : /* istanbul ignore next */ []);
+		this.compact = input(null, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
 		this.stepClick = output();
+		this._win = inject(DOCUMENT).defaultView;
+		this._narrow = signal(false, ...ngDevMode ? [{ debugName: "_narrow" }] : /* istanbul ignore next */ []);
+		this.compactPx = computed(() => typeof this.compact() === "number" && this._narrow(), ...ngDevMode ? [{ debugName: "compactPx" }] : /* istanbul ignore next */ []);
 		this._id = `ui-st-${++nextStepperId}`;
+		this.olMinWidth = computed(() => {
+			const w = this.minStepWidth().trim();
+			return w && this.orientation() === "horizontal" ? `calc(${this.steps().length} * ${w})` : null;
+		}, ...ngDevMode ? [{ debugName: "olMinWidth" }] : /* istanbul ignore next */ []);
+		this.summary = computed(() => {
+			const steps = this.steps();
+			const i = steps.findIndex((s) => s.key === this.current());
+			const n = i + 1;
+			const label = i >= 0 ? steps[i].label : "";
+			return {
+				n,
+				m: steps.length,
+				label,
+				aria: `Step ${n} of ${steps.length}: ${label}`
+			};
+		}, ...ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []);
 		this.rows = computed(() => {
 			const steps = this.steps();
 			const cur = steps.findIndex((s) => s.key === this.current());
@@ -13154,7 +13322,7 @@ var StepperComponent = class StepperComponent {
 				const state = i === cur ? "current" : step.complete === void 0 ? derived : step.complete ? "complete" : "upcoming";
 				const errorMessage = typeof step.error === "string" ? step.error : "";
 				const error = step.error === true || errorMessage !== "";
-				const selectable = clickable && !step.disabled && state !== "current" && (linear ? state === "complete" : true);
+				const selectable = clickable && !step.disabled && step.selectable !== false && state !== "current" && (linear ? state === "complete" : true);
 				const status = state === "complete" ? "completed" : state === "current" ? "current step" : "not started";
 				return {
 					step,
@@ -13169,6 +13337,16 @@ var StepperComponent = class StepperComponent {
 				};
 			});
 		}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		effect((onCleanup) => {
+			const c = this.compact();
+			this._narrow.set(false);
+			if (typeof c !== "number" || !Number.isFinite(c) || typeof this._win?.matchMedia !== "function") return;
+			const mq = this._win.matchMedia(`(max-width: ${c - .02}px)`);
+			this._narrow.set(mq.matches);
+			const on = (e) => this._narrow.set(e.matches);
+			mq.addEventListener("change", on);
+			onCleanup(() => mq.removeEventListener("change", on));
+		});
 	}
 	activate(r) {
 		if (!r.selectable || r.state === "current") return;
@@ -13249,6 +13427,13 @@ var StepperComponent = class StepperComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				accentLabels: {
+					classPropertyName: "accentLabels",
+					publicName: "accentLabels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				ariaLabel: {
 					classPropertyName: "ariaLabel",
 					publicName: "ariaLabel",
@@ -13262,6 +13447,34 @@ var StepperComponent = class StepperComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				minStepWidth: {
+					classPropertyName: "minStepWidth",
+					publicName: "minStepWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				scrollable: {
+					classPropertyName: "scrollable",
+					publicName: "scrollable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				leadingWidth: {
+					classPropertyName: "leadingWidth",
+					publicName: "leadingWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				compact: {
+					classPropertyName: "compact",
+					publicName: "compact",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -13274,12 +13487,18 @@ var StepperComponent = class StepperComponent {
 			} },
 			ngImport: i0,
 			template: `
+    <div class="st-root" [class.st-c-sm]="compact() === 'sm'" [class.st-c-md]="compact() === 'md'" [class.st-c-lg]="compact() === 'lg'" [class.st-c-on]="compactPx()"
+      [class.st-has-leading]="!!leadingWidth() && orientation() === 'horizontal'" [style.--st-leading-w]="leadingWidth() || null">
+    <div class="st-leading"><ng-content select="[stepper-leading]" /></div>
+    <div class="st-scroll" [class.st-scrollable]="scrollable()">
     <ol class="st"
+      [style.min-width]="olMinWidth()"
       [class.st-horizontal]="orientation() === 'horizontal'"
       [class.st-vertical]="orientation() === 'vertical'"
       [class.st-sm]="size() === 'sm'"
       [class.st-labels-current]="labelsOnSmallScreens() === 'current'"
       [class.st-themed]="!!accentColor()"
+      [class.st-accent-labels]="accentLabels()"
       [attr.aria-label]="ariaLabel() || null">
       @for (r of rows(); track r.step.key) {
         <li class="st-step"
@@ -13306,6 +13525,17 @@ var StepperComponent = class StepperComponent {
         </li>
       }
     </ol>
+    </div>
+    @if (compact() !== null) {
+      <div class="st-compact" data-testid="stepper-compact">
+        <div class="st-compact-row">
+          <span class="st-compact-label" data-testid="stepper-compact-label">{{ summary().label }}</span>
+          <span class="st-compact-count" data-testid="stepper-compact-count">{{ summary().n }} / {{ summary().m }}</span>
+        </div>
+        <ui-progress-bar data-testid="stepper-compact-progress" [value]="summary().n" [max]="summary().m" [color]="accentColor()" [ariaLabel]="summary().aria" />
+      </div>
+    }
+    </div>
 
     <ng-template #body let-r>
       <span class="st-ind" aria-hidden="true">
@@ -13320,7 +13550,7 @@ var StepperComponent = class StepperComponent {
     </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:block}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current] .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"],
+			styles: [":host{display:block}.st-root{position:relative}.st-leading{display:none}.st-has-leading .st-leading{display:block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.st-has-leading .st-scroll{margin-inline-start:calc(var(--st-leading-w) + 1rem)}.st-scrollable{overflow-x:auto;padding-top:4px;padding-bottom:4px}.st-compact{display:none}.st-compact-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.st-compact-label{min-width:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--st-accent, #0f172a);overflow-wrap:anywhere}.st-compact-count{flex-shrink:0;font-size:.8125rem;color:#64748b}.st-c-on .st-scroll,.st-c-on .st-leading{display:none}.st-c-on .st-compact{display:block}@media(max-width:479.98px){.st-c-sm .st-scroll,.st-c-sm .st-leading{display:none}.st-c-sm .st-compact{display:block}}@media(max-width:767.98px){.st-c-md .st-scroll,.st-c-md .st-leading{display:none}.st-c-md .st-compact{display:block}}@media(max-width:1023.98px){.st-c-lg .st-scroll,.st-c-lg .st-leading{display:none}.st-c-lg .st-compact{display:block}}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current]:not([data-error=true]) .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-accent-labels .st-step[data-state=current]:not([data-error=true]) .st-label{color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -13330,6 +13560,21 @@ var StepperComponent = class StepperComponent {
 					"ngTemplateOutlet",
 					"ngTemplateOutletInjector"
 				]
+			}, {
+				kind: "component",
+				type: ProgressBarComponent,
+				selector: "ui-progress-bar",
+				inputs: [
+					"value",
+					"max",
+					"label",
+					"variant",
+					"color",
+					"tooltip",
+					"ariaLabel",
+					"ariaLabelledby",
+					"valueText"
+				]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -13345,19 +13590,25 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-stepper",
 			standalone: true,
-			imports: [NgTemplateOutlet],
+			imports: [NgTemplateOutlet, ProgressBarComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"[style.--st-accent]": "accentColor() || null",
 				"[style.--st-complete]": "completeColor() || null"
 			},
 			template: `
+    <div class="st-root" [class.st-c-sm]="compact() === 'sm'" [class.st-c-md]="compact() === 'md'" [class.st-c-lg]="compact() === 'lg'" [class.st-c-on]="compactPx()"
+      [class.st-has-leading]="!!leadingWidth() && orientation() === 'horizontal'" [style.--st-leading-w]="leadingWidth() || null">
+    <div class="st-leading"><ng-content select="[stepper-leading]" /></div>
+    <div class="st-scroll" [class.st-scrollable]="scrollable()">
     <ol class="st"
+      [style.min-width]="olMinWidth()"
       [class.st-horizontal]="orientation() === 'horizontal'"
       [class.st-vertical]="orientation() === 'vertical'"
       [class.st-sm]="size() === 'sm'"
       [class.st-labels-current]="labelsOnSmallScreens() === 'current'"
       [class.st-themed]="!!accentColor()"
+      [class.st-accent-labels]="accentLabels()"
       [attr.aria-label]="ariaLabel() || null">
       @for (r of rows(); track r.step.key) {
         <li class="st-step"
@@ -13384,6 +13635,17 @@ i0.ɵɵngDeclareClassMetadata({
         </li>
       }
     </ol>
+    </div>
+    @if (compact() !== null) {
+      <div class="st-compact" data-testid="stepper-compact">
+        <div class="st-compact-row">
+          <span class="st-compact-label" data-testid="stepper-compact-label">{{ summary().label }}</span>
+          <span class="st-compact-count" data-testid="stepper-compact-count">{{ summary().n }} / {{ summary().m }}</span>
+        </div>
+        <ui-progress-bar data-testid="stepper-compact-progress" [value]="summary().n" [max]="summary().m" [color]="accentColor()" [ariaLabel]="summary().aria" />
+      </div>
+    }
+    </div>
 
     <ng-template #body let-r>
       <span class="st-ind" aria-hidden="true">
@@ -13397,9 +13659,10 @@ i0.ɵɵngDeclareClassMetadata({
       <span class="st-sr">{{ r.srText }}</span>
     </ng-template>
   `,
-			styles: [":host{display:block}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current] .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"]
+			styles: [":host{display:block}.st-root{position:relative}.st-leading{display:none}.st-has-leading .st-leading{display:block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.st-has-leading .st-scroll{margin-inline-start:calc(var(--st-leading-w) + 1rem)}.st-scrollable{overflow-x:auto;padding-top:4px;padding-bottom:4px}.st-compact{display:none}.st-compact-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.st-compact-label{min-width:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--st-accent, #0f172a);overflow-wrap:anywhere}.st-compact-count{flex-shrink:0;font-size:.8125rem;color:#64748b}.st-c-on .st-scroll,.st-c-on .st-leading{display:none}.st-c-on .st-compact{display:block}@media(max-width:479.98px){.st-c-sm .st-scroll,.st-c-sm .st-leading{display:none}.st-c-sm .st-compact{display:block}}@media(max-width:767.98px){.st-c-md .st-scroll,.st-c-md .st-leading{display:none}.st-c-md .st-compact{display:block}}@media(max-width:1023.98px){.st-c-lg .st-scroll,.st-c-lg .st-leading{display:none}.st-c-lg .st-compact{display:block}}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current]:not([data-error=true]) .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-accent-labels .st-step[data-state=current]:not([data-error=true]) .st-label{color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		steps: [{
 			type: i0.Input,
@@ -13468,6 +13731,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		accentLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accentLabels",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -13484,6 +13755,38 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		minStepWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minStepWidth",
+				required: false
+			}]
+		}],
+		scrollable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollable",
+				required: false
+			}]
+		}],
+		leadingWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leadingWidth",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
 		stepClick: [{
 			type: i0.Output,
 			args: ["stepClick"]
@@ -13949,9 +14252,12 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -13975,6 +14281,7 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 						"label",
 						"ariaLabel",
 						"testId",
+						"labelTestId",
 						"headingLevel",
 						"indeterminate",
 						"checked",
@@ -15671,6 +15978,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"step",
 						"valueType",
 						"formatter",
+						"integer",
 						"showErrors",
 						"disabled"
 					],
@@ -15707,9 +16015,12 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -16827,6 +17138,7 @@ var ContactPickerComponent = class ContactPickerComponent {
 						"label",
 						"ariaLabel",
 						"testId",
+						"labelTestId",
 						"headingLevel",
 						"indeterminate",
 						"checked",
@@ -17806,6 +18118,7 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 						"step",
 						"valueType",
 						"formatter",
+						"integer",
 						"showErrors",
 						"disabled"
 					],
@@ -17964,6 +18277,7 @@ var TextComponent = class TextComponent {
 		this.text = input("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 		this.tone = input("default", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+		this.color = input("", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 		this.strong = input(null, ...ngDevMode ? [{ debugName: "strong" }] : /* istanbul ignore next */ []);
 		this.segments = computed(() => {
 			const text = this.text() ?? "";
@@ -18041,6 +18355,13 @@ var TextComponent = class TextComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				color: {
+					classPropertyName: "color",
+					publicName: "color",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				strong: {
 					classPropertyName: "strong",
 					publicName: "strong",
@@ -18057,9 +18378,9 @@ var TextComponent = class TextComponent {
 				}
 			},
 			ngImport: i0,
-			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()" [style.font-weight]="fontWeight()">{{ segments().length ? '' : text() }}@for (s of segments(); track $index) {@if (s.strong) {<strong>{{ s.text }}</strong>} @else {<ng-container>{{ s.text }}</ng-container>}}</div>`,
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [class.tx-accent]="tone() === 'accent'" [style.color]="color() || null" [style.font-size]="fontSize()" [style.font-weight]="fontWeight()">{{ segments().length ? '' : text() }}@for (s of segments(); track $index) {@if (s.strong) {<strong>{{ s.text }}</strong>} @else {<ng-container>{{ s.text }}</ng-container>}}</div>`,
 			isInline: true,
-			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}.tx strong{font-weight:700}\n"],
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}.tx-accent{color:var(--ui-accent, #2563eb)}.tx strong{font-weight:700}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -18075,8 +18396,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-text",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()" [style.font-weight]="fontWeight()">{{ segments().length ? '' : text() }}@for (s of segments(); track $index) {@if (s.strong) {<strong>{{ s.text }}</strong>} @else {<ng-container>{{ s.text }}</ng-container>}}</div>`,
-			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}.tx strong{font-weight:700}\n"]
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [class.tx-accent]="tone() === 'accent'" [style.color]="color() || null" [style.font-size]="fontSize()" [style.font-weight]="fontWeight()">{{ segments().length ? '' : text() }}@for (s of segments(); track $index) {@if (s.strong) {<strong>{{ s.text }}</strong>} @else {<ng-container>{{ s.text }}</ng-container>}}</div>`,
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}.tx-accent{color:var(--ui-accent, #2563eb)}.tx strong{font-weight:700}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -18104,6 +18425,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
 		strong: [{
 			type: i0.Input,
 			args: [{
@@ -21555,6 +21884,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 					"label",
 					"ariaLabel",
 					"testId",
+					"labelTestId",
 					"headingLevel",
 					"indeterminate",
 					"checked",
@@ -21883,6 +22213,7 @@ var DiscountSelectorComponent = class DiscountSelectorComponent {
 					"label",
 					"ariaLabel",
 					"testId",
+					"labelTestId",
 					"headingLevel",
 					"indeterminate",
 					"checked",
@@ -22412,12 +22743,37 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const FOCUSABLE = "input:not([type=\"hidden\"]), select, textarea, button, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]";
 var FormComponent = class FormComponent {
 	constructor() {
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []);
 		this.autocomplete = input("", ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
 		this.submitted = output();
+		this._host = inject(ElementRef);
+	}
+	static _usable(el) {
+		if (el.matches(":disabled")) return false;
+		if (el.getClientRects().length === 0) return false;
+		const style = typeof getComputedStyle === "function" ? getComputedStyle(el) : null;
+		return !style || style.visibility !== "hidden" && style.display !== "none";
+	}
+	invalidFields() {
+		const found = [];
+		for (const marked of Array.from(this._host.nativeElement.querySelectorAll("[aria-invalid=\"true\"]"))) {
+			let target;
+			if (marked.matches(FOCUSABLE)) target = FormComponent._usable(marked) ? marked : void 0;
+			else target = Array.from(marked.querySelectorAll(FOCUSABLE)).find((c) => FormComponent._usable(c));
+			if (target && !found.includes(target)) found.push(target);
+		}
+		return found;
+	}
+	focusFirstInvalid(options = {}) {
+		const first = this.invalidFields()[0];
+		if (!first) return false;
+		if (options.scroll !== false && typeof first.scrollIntoView === "function") first.scrollIntoView({ block: "center" });
+		first.focus({ preventScroll: true });
+		return first.ownerDocument.activeElement === first;
 	}
 	onSubmit(event) {
 		event.preventDefault();
@@ -23666,9 +24022,12 @@ var ListComponent = class ListComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -24971,9 +25330,12 @@ var QrCodeComponent = class QrCodeComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -25279,9 +25641,12 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -27166,6 +27531,7 @@ var ImageComponent = class ImageComponent {
 		this.height = input("", ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
 		this.maxWidth = input("100%", ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
 		this.maxHeight = input("", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+		this.minHeight = input("", ...ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []);
 		this.aspectRatio = input("", ...ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []);
 		this.radius = input("none", ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
 		this.bordered = input(false, ...ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []);
@@ -27260,6 +27626,13 @@ var ImageComponent = class ImageComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				minHeight: {
+					classPropertyName: "minHeight",
+					publicName: "minHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				aspectRatio: {
 					classPropertyName: "aspectRatio",
 					publicName: "aspectRatio",
@@ -27323,12 +27696,12 @@ var ImageComponent = class ImageComponent {
     @if (_url() && !_failed()) {
       <img class="im-img" [src]="_url()" [attr.alt]="alt()" [attr.loading]="priority() ? 'eager' : 'lazy'"
         [attr.fetchpriority]="priority() ? 'high' : null" decoding="async"
-        [style.width]="imgWidth()" [style.height]="imgHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.width]="imgWidth()" [style.height]="imgHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null" [style.min-height]="minHeight() || null"
         [style.aspect-ratio]="aspectRatio() || null" [style.object-fit]="fit()" [style.border-radius]="radiusCss()"
         [class.im-bordered]="bordered()" (load)="loaded.emit()" (error)="_onError()" />
     } @else if (placeholder()) {
       <span class="im-ph" [class.im-bordered]="bordered()" [attr.role]="alt() ? 'img' : null" [attr.aria-label]="alt() || null" [attr.aria-hidden]="alt() ? null : 'true'"
-        [style.width]="boxWidth()" [style.height]="boxHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.width]="boxWidth()" [style.height]="boxHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null" [style.min-height]="minHeight() || null"
         [style.aspect-ratio]="aspectRatio() || null" [style.border-radius]="radiusCss()">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="M21 16l-5-5-8 9"/></svg>
       </span>
@@ -27359,12 +27732,12 @@ i0.ɵɵngDeclareClassMetadata({
     @if (_url() && !_failed()) {
       <img class="im-img" [src]="_url()" [attr.alt]="alt()" [attr.loading]="priority() ? 'eager' : 'lazy'"
         [attr.fetchpriority]="priority() ? 'high' : null" decoding="async"
-        [style.width]="imgWidth()" [style.height]="imgHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.width]="imgWidth()" [style.height]="imgHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null" [style.min-height]="minHeight() || null"
         [style.aspect-ratio]="aspectRatio() || null" [style.object-fit]="fit()" [style.border-radius]="radiusCss()"
         [class.im-bordered]="bordered()" (load)="loaded.emit()" (error)="_onError()" />
     } @else if (placeholder()) {
       <span class="im-ph" [class.im-bordered]="bordered()" [attr.role]="alt() ? 'img' : null" [attr.aria-label]="alt() || null" [attr.aria-hidden]="alt() ? null : 'true'"
-        [style.width]="boxWidth()" [style.height]="boxHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.width]="boxWidth()" [style.height]="boxHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null" [style.min-height]="minHeight() || null"
         [style.aspect-ratio]="aspectRatio() || null" [style.border-radius]="radiusCss()">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="M21 16l-5-5-8 9"/></svg>
       </span>
@@ -27431,6 +27804,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		minHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minHeight",
+				required: false
+			}]
+		}],
 		aspectRatio: [{
 			type: i0.Input,
 			args: [{
@@ -27621,6 +28002,7 @@ var ImageGalleryComponent = class ImageGalleryComponent {
 		this.maxHeight = input("70vh", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
 		this.fit = input("contain", ...ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("Image gallery", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.autofocus = input(false, ...ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []);
 		this.count = computed(() => this.images().length, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
 		this.position = computed(() => {
 			const n = this.count();
@@ -27629,6 +28011,8 @@ var ImageGalleryComponent = class ImageGalleryComponent {
 		}, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
 		this.current = computed(() => this.images()[this.position()] ?? { src: "" }, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
 		this.currentAlt = computed(() => this.current().alt ?? `Image ${this.position() + 1} of ${this.count()}`, ...ngDevMode ? [{ debugName: "currentAlt" }] : /* istanbul ignore next */ []);
+		this.autofocusNext = computed(() => this.autofocus() && this.canNext(), ...ngDevMode ? [{ debugName: "autofocusNext" }] : /* istanbul ignore next */ []);
+		this.autofocusPrev = computed(() => this.autofocus() && !this.canNext() && this.canPrev(), ...ngDevMode ? [{ debugName: "autofocusPrev" }] : /* istanbul ignore next */ []);
 		this.canPrev = computed(() => this.count() > 1 && (this.loop() || this.position() > 0), ...ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []);
 		this.canNext = computed(() => this.count() > 1 && (this.loop() || this.position() < this.count() - 1), ...ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []);
 		this.announcement = computed(() => this.count() > 1 ? `Image ${this.position() + 1} of ${this.count()}${this.current().alt ? ": " + this.current().alt : ""}` : "", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
@@ -27739,6 +28123,13 @@ var ImageGalleryComponent = class ImageGalleryComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				autofocus: {
+					classPropertyName: "autofocus",
+					publicName: "autofocus",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { index: "indexChange" },
@@ -27748,13 +28139,13 @@ var ImageGalleryComponent = class ImageGalleryComponent {
       <div class="ig" role="group" aria-roledescription="carousel" [attr.aria-label]="ariaLabel()" (keydown)="onKey($event)">
         <div class="ig-stage">
           @if (count() > 1) {
-            <ui-button class="ig-nav ig-prev" variant="secondary" size="sm" ariaLabel="Previous image" [disabled]="!canPrev()" (click)="prev()" data-testid="gallery-prev">
+            <ui-button class="ig-nav ig-prev" variant="secondary" size="sm" ariaLabel="Previous image" [disabled]="!canPrev()" [attr.data-autofocus]="autofocusPrev() ? '' : null" (click)="prev()" data-testid="gallery-prev">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
             </ui-button>
           }
           <ui-image class="ig-img" [src]="current().src" [alt]="currentAlt()" [fit]="fit()" width="100%" [maxHeight]="maxHeight()" [aspectRatio]="aspectRatio()" data-testid="gallery-image" />
           @if (count() > 1) {
-            <ui-button class="ig-nav ig-next" variant="secondary" size="sm" ariaLabel="Next image" [disabled]="!canNext()" (click)="next()" data-testid="gallery-next">
+            <ui-button class="ig-nav ig-next" variant="secondary" size="sm" ariaLabel="Next image" [disabled]="!canNext()" [attr.data-autofocus]="autofocusNext() ? '' : null" (click)="next()" data-testid="gallery-next">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
             </ui-button>
           }
@@ -27788,9 +28179,12 @@ var ImageGalleryComponent = class ImageGalleryComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -27818,6 +28212,7 @@ var ImageGalleryComponent = class ImageGalleryComponent {
 						"height",
 						"maxWidth",
 						"maxHeight",
+						"minHeight",
 						"aspectRatio",
 						"radius",
 						"bordered",
@@ -27865,13 +28260,13 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="ig" role="group" aria-roledescription="carousel" [attr.aria-label]="ariaLabel()" (keydown)="onKey($event)">
         <div class="ig-stage">
           @if (count() > 1) {
-            <ui-button class="ig-nav ig-prev" variant="secondary" size="sm" ariaLabel="Previous image" [disabled]="!canPrev()" (click)="prev()" data-testid="gallery-prev">
+            <ui-button class="ig-nav ig-prev" variant="secondary" size="sm" ariaLabel="Previous image" [disabled]="!canPrev()" [attr.data-autofocus]="autofocusPrev() ? '' : null" (click)="prev()" data-testid="gallery-prev">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
             </ui-button>
           }
           <ui-image class="ig-img" [src]="current().src" [alt]="currentAlt()" [fit]="fit()" width="100%" [maxHeight]="maxHeight()" [aspectRatio]="aspectRatio()" data-testid="gallery-image" />
           @if (count() > 1) {
-            <ui-button class="ig-nav ig-next" variant="secondary" size="sm" ariaLabel="Next image" [disabled]="!canNext()" (click)="next()" data-testid="gallery-next">
+            <ui-button class="ig-nav ig-next" variant="secondary" size="sm" ariaLabel="Next image" [disabled]="!canNext()" [attr.data-autofocus]="autofocusNext() ? '' : null" (click)="next()" data-testid="gallery-next">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
             </ui-button>
           }
@@ -27971,6 +28366,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "ariaLabel",
 				required: false
 			}]
+		}],
+		autofocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autofocus",
+				required: false
+			}]
 		}]
 	}
 });
@@ -28665,9 +29068,12 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -31147,9 +31553,12 @@ var SignaturePadComponent = class SignaturePadComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -31643,6 +32052,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const SELECT_IGNORE = "button, a[href], input, select, textarea, label, [role=button], [role=link], [data-no-select]";
 var DetailCardComponent = class DetailCardComponent {
 	constructor() {
 		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
@@ -31652,6 +32062,7 @@ var DetailCardComponent = class DetailCardComponent {
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.subtitle = input("", ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
 		this.background = input("", ...ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []);
+		this.headerBackground = input("", ...ngDevMode ? [{ debugName: "headerBackground" }] : /* istanbul ignore next */ []);
 		this.textColor = input("", ...ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []);
 		this.showHeader = input(true, ...ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []);
 		this.collapsible = input(true, ...ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []);
@@ -31659,8 +32070,14 @@ var DetailCardComponent = class DetailCardComponent {
 		this.showEdit = input(false, ...ngDevMode ? [{ debugName: "showEdit" }] : /* istanbul ignore next */ []);
 		this.editLabel = input("Edit", ...ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []);
 		this.editClick = output();
+		this.editTestId = input("", ...ngDevMode ? [{ debugName: "editTestId" }] : /* istanbul ignore next */ []);
+		this.editIcon = input(true, ...ngDevMode ? [{ debugName: "editIcon" }] : /* istanbul ignore next */ []);
 		this.editAriaLabel = input("", ...ngDevMode ? [{ debugName: "editAriaLabel" }] : /* istanbul ignore next */ []);
 		this.fill = input(false, ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
+		this.selectable = input(false, ...ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []);
+		this.selected = model(false, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+		this.selectedColor = input("#3b82f6", ...ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []);
+		this.selectedBackground = input("", ...ngDevMode ? [{ debugName: "selectedBackground" }] : /* istanbul ignore next */ []);
 	}
 	groupLabel() {
 		if (this.showHeader() && this.title()) return this.titleId() ? null : this.title();
@@ -31669,6 +32086,17 @@ var DetailCardComponent = class DetailCardComponent {
 	isOpen() {
 		return !(this.showHeader() && this.collapsible()) || this.expanded();
 	}
+	onCardClick(event) {
+		if (!this.selectable()) return;
+		const card = event.currentTarget;
+		const target = event.target;
+		if (!card || !target || typeof target.closest !== "function") return;
+		const control = target.closest(SELECT_IGNORE);
+		if (control && card.contains(control)) return;
+		const sel = card.ownerDocument.defaultView?.getSelection?.();
+		if (sel && !sel.isCollapsed && sel.toString() !== "" && (card.contains(sel.anchorNode) || card.contains(sel.focusNode))) return;
+		this.selected.set(!this.selected());
+	}
 	toggle() {
 		this.expanded.set(!this.expanded());
 	}
@@ -31744,6 +32172,13 @@ var DetailCardComponent = class DetailCardComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				headerBackground: {
+					classPropertyName: "headerBackground",
+					publicName: "headerBackground",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				textColor: {
 					classPropertyName: "textColor",
 					publicName: "textColor",
@@ -31786,6 +32221,20 @@ var DetailCardComponent = class DetailCardComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				editTestId: {
+					classPropertyName: "editTestId",
+					publicName: "editTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editIcon: {
+					classPropertyName: "editIcon",
+					publicName: "editIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				editAriaLabel: {
 					classPropertyName: "editAriaLabel",
 					publicName: "editAriaLabel",
@@ -31799,25 +32248,58 @@ var DetailCardComponent = class DetailCardComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				selectable: {
+					classPropertyName: "selectable",
+					publicName: "selectable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selected: {
+					classPropertyName: "selected",
+					publicName: "selected",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selectedColor: {
+					classPropertyName: "selectedColor",
+					publicName: "selectedColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selectedBackground: {
+					classPropertyName: "selectedBackground",
+					publicName: "selectedBackground",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
 				expanded: "expandedChange",
-				editClick: "editClick"
+				editClick: "editClick",
+				selected: "selectedChange"
 			},
 			host: {
 				attributes: { "role": "group" },
 				properties: {
 					"class.dc-fill-host": "fill()",
+					"attr.data-selected": "selectable() && selected() ? \"true\" : null",
 					"attr.aria-labelledby": "showHeader() && title() && titleId() ? titleId() : null",
 					"attr.aria-label": "groupLabel()"
 				}
 			},
 			ngImport: i0,
 			template: `
-    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [style.background]="background() || null" [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
+    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [class.dc-selectable]="selectable()" [class.dc-selected]="selectable() && selected()"
+         [style.outline-color]="selectable() && selected() ? selectedColor() : null"
+         [style.background]="(selectable() && selected() && selectedBackground()) || background() || null" (click)="onCardClick($event)"
+         [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
       @if (showHeader()) {
-        <div class="dc-header" [class.collapsible]="collapsible()" [class.open]="isOpen()" (click)="onHeaderClick($event)">
+        <div class="dc-header" [class.collapsible]="collapsible()" [class.open]="isOpen()" [style.background]="headerBackground() || null" (click)="onHeaderClick($event)">
           @if (collapsible()) {
             <ui-button class="dc-chevron" variant="icon" size="sm"
               [ariaLabel]="title() || 'Toggle section'"
@@ -31836,11 +32318,13 @@ var DetailCardComponent = class DetailCardComponent {
             <ng-content select="[card-header]" />
           </div>
           @if (showEdit()) {
-            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" (click)="$event.stopPropagation(); editClick.emit()">
+            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" [attr.data-testid]="editTestId() || null" (click)="$event.stopPropagation(); editClick.emit()">
+              @if (editIcon()) {
               <svg width="13" height="13" 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>
+              }
               {{ editLabel() }}
             </ui-button>
           }
@@ -31855,7 +32339,7 @@ var DetailCardComponent = class DetailCardComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -31865,9 +32349,12 @@ var DetailCardComponent = class DetailCardComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -31902,13 +32389,17 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				"role": "group",
 				"[class.dc-fill-host]": "fill()",
+				"[attr.data-selected]": "selectable() && selected() ? \"true\" : null",
 				"[attr.aria-labelledby]": "showHeader() && title() && titleId() ? titleId() : null",
 				"[attr.aria-label]": "groupLabel()"
 			},
 			template: `
-    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [style.background]="background() || null" [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
+    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [class.dc-selectable]="selectable()" [class.dc-selected]="selectable() && selected()"
+         [style.outline-color]="selectable() && selected() ? selectedColor() : null"
+         [style.background]="(selectable() && selected() && selectedBackground()) || background() || null" (click)="onCardClick($event)"
+         [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
       @if (showHeader()) {
-        <div class="dc-header" [class.collapsible]="collapsible()" [class.open]="isOpen()" (click)="onHeaderClick($event)">
+        <div class="dc-header" [class.collapsible]="collapsible()" [class.open]="isOpen()" [style.background]="headerBackground() || null" (click)="onHeaderClick($event)">
           @if (collapsible()) {
             <ui-button class="dc-chevron" variant="icon" size="sm"
               [ariaLabel]="title() || 'Toggle section'"
@@ -31927,11 +32418,13 @@ i0.ɵɵngDeclareClassMetadata({
             <ng-content select="[card-header]" />
           </div>
           @if (showEdit()) {
-            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" (click)="$event.stopPropagation(); editClick.emit()">
+            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" [attr.data-testid]="editTestId() || null" (click)="$event.stopPropagation(); editClick.emit()">
+              @if (editIcon()) {
               <svg width="13" height="13" 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>
+              }
               {{ editLabel() }}
             </ui-button>
           }
@@ -31945,7 +32438,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     </div>
   `,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -32005,6 +32498,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		headerBackground: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headerBackground",
+				required: false
+			}]
+		}],
 		textColor: [{
 			type: i0.Input,
 			args: [{
@@ -32060,6 +32561,22 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["editClick"]
 		}],
+		editTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editTestId",
+				required: false
+			}]
+		}],
+		editIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editIcon",
+				required: false
+			}]
+		}],
 		editAriaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -32075,6 +32592,41 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "fill",
 				required: false
 			}]
+		}],
+		selectable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectable",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		selectedColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedColor",
+				required: false
+			}]
+		}],
+		selectedBackground: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedBackground",
+				required: false
+			}]
 		}]
 	}
 });
@@ -33056,6 +33608,10 @@ var ColumnsComponent = class ColumnsComponent {
 		this.countBelowLg = input(null, ...ngDevMode ? [{ debugName: "countBelowLg" }] : /* istanbul ignore next */ []);
 		this.countBelowMd = input(null, ...ngDevMode ? [{ debugName: "countBelowMd" }] : /* istanbul ignore next */ []);
 		this.countBelowSm = input(null, ...ngDevMode ? [{ debugName: "countBelowSm" }] : /* istanbul ignore next */ []);
+		this.countBase = input(1, ...ngDevMode ? [{ debugName: "countBase" }] : /* istanbul ignore next */ []);
+		this.countFromSm = input(null, ...ngDevMode ? [{ debugName: "countFromSm" }] : /* istanbul ignore next */ []);
+		this.countFromMd = input(null, ...ngDevMode ? [{ debugName: "countFromMd" }] : /* istanbul ignore next */ []);
+		this.countFromLg = input(null, ...ngDevMode ? [{ debugName: "countFromLg" }] : /* istanbul ignore next */ []);
 		this.cols = computed(() => {
 			const n = Math.trunc(Number(this.count()));
 			if (!Number.isFinite(n)) return 2;
@@ -33064,8 +33620,14 @@ var ColumnsComponent = class ColumnsComponent {
 		this.colsLg = computed(() => ColumnsComponent.clampTier(this.countBelowLg()), ...ngDevMode ? [{ debugName: "colsLg" }] : /* istanbul ignore next */ []);
 		this.colsMd = computed(() => ColumnsComponent.clampTier(this.countBelowMd()), ...ngDevMode ? [{ debugName: "colsMd" }] : /* istanbul ignore next */ []);
 		this.colsSm = computed(() => ColumnsComponent.clampTier(this.countBelowSm()), ...ngDevMode ? [{ debugName: "colsSm" }] : /* istanbul ignore next */ []);
+		this.fromMode = computed(() => this.countFromSm() != null || this.countFromMd() != null || this.countFromLg() != null, ...ngDevMode ? [{ debugName: "fromMode" }] : /* istanbul ignore next */ []);
+		this.base = computed(() => this.fromMode() ? ColumnsComponent.clampTier(this.countBase()) ?? 1 : null, ...ngDevMode ? [{ debugName: "base" }] : /* istanbul ignore next */ []);
+		this.fromSm = computed(() => ColumnsComponent.clampTier(this.countFromSm()), ...ngDevMode ? [{ debugName: "fromSm" }] : /* istanbul ignore next */ []);
+		this.fromMd = computed(() => ColumnsComponent.clampTier(this.countFromMd()), ...ngDevMode ? [{ debugName: "fromMd" }] : /* istanbul ignore next */ []);
+		this.fromLg = computed(() => ColumnsComponent.clampTier(this.countFromLg()), ...ngDevMode ? [{ debugName: "fromLg" }] : /* istanbul ignore next */ []);
 		this.gapCss = computed(() => resolveLayoutGap(this.gap(), "lg"), ...ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []);
 		this.collapseClass = computed(() => {
+			if (this.fromMode()) return "cl cl-from";
 			const c = this.collapseAt();
 			return c === "never" ? "cl" : `cl cl-${c}`;
 		}, ...ngDevMode ? [{ debugName: "collapseClass" }] : /* istanbul ignore next */ []);
@@ -33141,13 +33703,41 @@ var ColumnsComponent = class ColumnsComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				countBase: {
+					classPropertyName: "countBase",
+					publicName: "countBase",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				countFromSm: {
+					classPropertyName: "countFromSm",
+					publicName: "countFromSm",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				countFromMd: {
+					classPropertyName: "countFromMd",
+					publicName: "countFromMd",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				countFromLg: {
+					classPropertyName: "countFromLg",
+					publicName: "countFromLg",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: { properties: { "attr.data-columns": "cols()" } },
 			ngImport: i0,
-			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.--cl-cols-lg]="colsLg()" [style.--cl-cols-md]="colsMd()" [style.--cl-cols-sm]="colsSm()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
+			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.--cl-cols-lg]="colsLg()" [style.--cl-cols-md]="colsMd()" [style.--cl-cols-sm]="colsSm()" [style.--cl-base]="base()" [style.--cl-from-sm]="fromSm()" [style.--cl-from-md]="fromMd()" [style.--cl-from-lg]="fromLg()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
 			isInline: true,
-			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:1024px){.cl{grid-template-columns:repeat(var(--cl-cols-lg, var(--cl-cols, 2)),minmax(0,1fr))}}@media(max-width:768px){.cl{grid-template-columns:repeat(var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2))),minmax(0,1fr))}}@media(max-width:480px){.cl{grid-template-columns:repeat(var(--cl-cols-sm, var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2)))),minmax(0,1fr))}}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"],
+			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:1024px){.cl{grid-template-columns:repeat(var(--cl-cols-lg, var(--cl-cols, 2)),minmax(0,1fr))}}@media(max-width:768px){.cl{grid-template-columns:repeat(var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2))),minmax(0,1fr))}}@media(max-width:480px){.cl{grid-template-columns:repeat(var(--cl-cols-sm, var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2)))),minmax(0,1fr))}}.cl.cl-from{grid-template-columns:repeat(var(--cl-base, 1),minmax(0,1fr))}@media(min-width:480px){.cl.cl-from{grid-template-columns:repeat(var(--cl-from-sm, var(--cl-base, 1)),minmax(0,1fr))}}@media(min-width:768px){.cl.cl-from{grid-template-columns:repeat(var(--cl-from-md, var(--cl-from-sm, var(--cl-base, 1))),minmax(0,1fr))}}@media(min-width:1024px){.cl.cl-from{grid-template-columns:repeat(var(--cl-from-lg, var(--cl-from-md, var(--cl-from-sm, var(--cl-base, 1)))),minmax(0,1fr))}}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -33164,8 +33754,8 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { "[attr.data-columns]": "cols()" },
-			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.--cl-cols-lg]="colsLg()" [style.--cl-cols-md]="colsMd()" [style.--cl-cols-sm]="colsSm()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
-			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:1024px){.cl{grid-template-columns:repeat(var(--cl-cols-lg, var(--cl-cols, 2)),minmax(0,1fr))}}@media(max-width:768px){.cl{grid-template-columns:repeat(var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2))),minmax(0,1fr))}}@media(max-width:480px){.cl{grid-template-columns:repeat(var(--cl-cols-sm, var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2)))),minmax(0,1fr))}}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"]
+			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.--cl-cols-lg]="colsLg()" [style.--cl-cols-md]="colsMd()" [style.--cl-cols-sm]="colsSm()" [style.--cl-base]="base()" [style.--cl-from-sm]="fromSm()" [style.--cl-from-md]="fromMd()" [style.--cl-from-lg]="fromLg()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
+			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:1024px){.cl{grid-template-columns:repeat(var(--cl-cols-lg, var(--cl-cols, 2)),minmax(0,1fr))}}@media(max-width:768px){.cl{grid-template-columns:repeat(var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2))),minmax(0,1fr))}}@media(max-width:480px){.cl{grid-template-columns:repeat(var(--cl-cols-sm, var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2)))),minmax(0,1fr))}}.cl.cl-from{grid-template-columns:repeat(var(--cl-base, 1),minmax(0,1fr))}@media(min-width:480px){.cl.cl-from{grid-template-columns:repeat(var(--cl-from-sm, var(--cl-base, 1)),minmax(0,1fr))}}@media(min-width:768px){.cl.cl-from{grid-template-columns:repeat(var(--cl-from-md, var(--cl-from-sm, var(--cl-base, 1))),minmax(0,1fr))}}@media(min-width:1024px){.cl.cl-from{grid-template-columns:repeat(var(--cl-from-lg, var(--cl-from-md, var(--cl-from-sm, var(--cl-base, 1)))),minmax(0,1fr))}}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -33224,6 +33814,38 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "countBelowSm",
 				required: false
 			}]
+		}],
+		countBase: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countBase",
+				required: false
+			}]
+		}],
+		countFromSm: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countFromSm",
+				required: false
+			}]
+		}],
+		countFromMd: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countFromMd",
+				required: false
+			}]
+		}],
+		countFromLg: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countFromLg",
+				required: false
+			}]
 		}]
 	}
 });
@@ -33246,6 +33868,11 @@ var StackComponent = class StackComponent {
 		this.align = input("stretch", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
 		this.justify = input("start", ...ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []);
 		this.wrap = input(false, ...ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []);
+		this.minHeight = input("", ...ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []);
+		this.width = input("", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.maxWidth = input("", ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
+		this.padding = input("", ...ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []);
+		this.centered = input(false, ...ngDevMode ? [{ debugName: "centered" }] : /* istanbul ignore next */ []);
 		this.gapCss = computed(() => resolveLayoutGap(this.gap(), "md"), ...ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []);
 		this.alignCss = computed(() => ALIGN[this.align()] ?? "stretch", ...ngDevMode ? [{ debugName: "alignCss" }] : /* istanbul ignore next */ []);
 		this.justifyCss = computed(() => JUSTIFY$1[this.justify()] ?? "flex-start", ...ngDevMode ? [{ debugName: "justifyCss" }] : /* istanbul ignore next */ []);
@@ -33302,11 +33929,46 @@ var StackComponent = class StackComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				minHeight: {
+					classPropertyName: "minHeight",
+					publicName: "minHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxWidth: {
+					classPropertyName: "maxWidth",
+					publicName: "maxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				padding: {
+					classPropertyName: "padding",
+					publicName: "padding",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				centered: {
+					classPropertyName: "centered",
+					publicName: "centered",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
 			template: `<div class="st" [class.st-h]="direction() === 'horizontal'" [style.flex-direction]="direction() === 'horizontal' ? 'row' : 'column'"
-      [style.gap]="gapCss()" [style.align-items]="alignCss()" [style.justify-content]="justifyCss()" [style.flex-wrap]="wrap() ? 'wrap' : 'nowrap'"><ng-content /></div>`,
+      [style.gap]="gapCss()" [style.align-items]="alignCss()" [style.justify-content]="justifyCss()" [style.flex-wrap]="wrap() ? 'wrap' : 'nowrap'" [style.min-height]="minHeight() || null" [style.width]="width() || null" [style.max-width]="maxWidth() || null" [style.padding]="padding() || null" [style.box-sizing]="padding() ? 'border-box' : null" [style.margin-inline]="centered() ? 'auto' : null"><ng-content /></div>`,
 			isInline: true,
 			styles: [":host{display:block}.st{display:flex}.st>::ng-deep *{margin:0!important}.st.st-h>::ng-deep *{min-width:0}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -33325,7 +33987,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `<div class="st" [class.st-h]="direction() === 'horizontal'" [style.flex-direction]="direction() === 'horizontal' ? 'row' : 'column'"
-      [style.gap]="gapCss()" [style.align-items]="alignCss()" [style.justify-content]="justifyCss()" [style.flex-wrap]="wrap() ? 'wrap' : 'nowrap'"><ng-content /></div>`,
+      [style.gap]="gapCss()" [style.align-items]="alignCss()" [style.justify-content]="justifyCss()" [style.flex-wrap]="wrap() ? 'wrap' : 'nowrap'" [style.min-height]="minHeight() || null" [style.width]="width() || null" [style.max-width]="maxWidth() || null" [style.padding]="padding() || null" [style.box-sizing]="padding() ? 'border-box' : null" [style.margin-inline]="centered() ? 'auto' : null"><ng-content /></div>`,
 			styles: [":host{display:block}.st{display:flex}.st>::ng-deep *{margin:0!important}.st.st-h>::ng-deep *{min-width:0}\n"]
 		}]
 	}],
@@ -33369,6 +34031,46 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "wrap",
 				required: false
 			}]
+		}],
+		minHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minHeight",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		maxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxWidth",
+				required: false
+			}]
+		}],
+		padding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "padding",
+				required: false
+			}]
+		}],
+		centered: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "centered",
+				required: false
+			}]
 		}]
 	}
 });
@@ -33556,6 +34258,2177 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, 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, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
+const WEEK_DAY_LABELS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+function toDateStr(d) {
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function fromDateStr(dateStr) {
+	return /* @__PURE__ */ new Date(dateStr + "T00:00");
+}
+function buildMonthCells(anchor, todayStr) {
+	const y = anchor.getFullYear();
+	const m = anchor.getMonth();
+	const start = new Date(y, m, 1 - new Date(y, m, 1).getDay());
+	const cells = [];
+	for (let i = 0; i < 42; i++) {
+		const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
+		const ds = toDateStr(d);
+		cells.push({
+			dateStr: ds,
+			dayNum: d.getDate(),
+			isToday: ds === todayStr,
+			isCurrentMonth: d.getMonth() === m,
+			isWeekend: d.getDay() === 0 || d.getDay() === 6
+		});
+	}
+	return cells;
+}
+function buildWeekDays(anchor, todayStr) {
+	const start = new Date(anchor.getFullYear(), anchor.getMonth(), anchor.getDate() - anchor.getDay());
+	return Array.from({ length: 7 }, (_, i) => {
+		const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
+		const ds = toDateStr(d);
+		return {
+			dateStr: ds,
+			dayNum: d.getDate(),
+			isToday: ds === todayStr,
+			isCurrentMonth: true,
+			isWeekend: i === 0 || i === 6
+		};
+	});
+}
+function rangeFor(view, anchor, todayStr) {
+	if (view === "week") {
+		const days = buildWeekDays(anchor, todayStr);
+		return {
+			view,
+			start: days[0].dateStr,
+			end: days[6].dateStr,
+			anchor
+		};
+	}
+	if (view === "month") {
+		const cells = buildMonthCells(anchor, todayStr);
+		return {
+			view,
+			start: cells[0].dateStr,
+			end: cells[41].dateStr,
+			anchor
+		};
+	}
+	const y = anchor.getFullYear();
+	const m = anchor.getMonth();
+	return {
+		view,
+		start: toDateStr(new Date(y, m, 1)),
+		end: toDateStr(new Date(y, m + 2, 0)),
+		anchor
+	};
+}
+function shiftAnchor(view, anchor, direction) {
+	if (view === "week") return new Date(anchor.getFullYear(), anchor.getMonth(), anchor.getDate() + 7 * direction);
+	if (view === "agenda") return new Date(anchor.getFullYear(), anchor.getMonth() + 2 * direction, 1);
+	const y = anchor.getFullYear();
+	const m = anchor.getMonth() + direction;
+	const lastDay = new Date(y, m + 1, 0).getDate();
+	return new Date(y, m, Math.min(anchor.getDate(), lastDay));
+}
+const DAY_LABEL = new Intl.DateTimeFormat("en-US", {
+	weekday: "long",
+	month: "long",
+	day: "numeric",
+	year: "numeric"
+});
+function formatDayLabel(dateStr) {
+	return DAY_LABEL.format(fromDateStr(dateStr));
+}
+function periodLabelFor(view, anchor, todayStr) {
+	if (view === "week") {
+		const days = buildWeekDays(anchor, todayStr);
+		const fs = fromDateStr(days[0].dateStr);
+		const ls = fromDateStr(days[6].dateStr);
+		if (fs.getMonth() === ls.getMonth()) return fs.toLocaleDateString("en-US", {
+			month: "long",
+			year: "numeric"
+		});
+		return `${fs.toLocaleDateString("en-US", { month: "short" })} – ${ls.toLocaleDateString("en-US", {
+			month: "short",
+			year: "numeric"
+		})}`;
+	}
+	if (view === "agenda") {
+		const start = new Date(anchor.getFullYear(), anchor.getMonth(), 1);
+		const end = new Date(anchor.getFullYear(), anchor.getMonth() + 1, 1);
+		return `${start.toLocaleDateString("en-US", { month: "long" })} – ${end.toLocaleDateString("en-US", {
+			month: "long",
+			year: "numeric"
+		})}`;
+	}
+	return anchor.toLocaleDateString("en-US", {
+		month: "long",
+		year: "numeric"
+	});
+}
+function formatTime$1(time) {
+	const [h, m] = time.split(":").map(Number);
+	return `${h % 12 || 12}:${String(m).padStart(2, "0")} ${h >= 12 ? "PM" : "AM"}`;
+}
+function formatHour(h) {
+	return `${h % 12 || 12} ${h >= 12 ? "PM" : "AM"}`;
+}
+const MIN_EVENT_HEIGHT = 20;
+function timedBox(startTime, endTime, startHour, endHour = 21) {
+	const gridMax = (Math.max(endHour, startHour) + 1 - startHour) * 60;
+	const [h, min] = (startTime ?? `${String(startHour).padStart(2, "0")}:00`).split(":").map(Number);
+	const s = (h - startHour) * 60 + min;
+	let e = s + 60;
+	if (endTime) {
+		const [eh, em] = endTime.split(":").map(Number);
+		e = (eh - startHour) * 60 + em;
+	}
+	const top = Math.min(Math.max(0, s), gridMax - MIN_EVENT_HEIGHT);
+	return {
+		top,
+		height: Math.max(MIN_EVENT_HEIGHT, Math.min(Math.max(e, 0), gridMax) - top)
+	};
+}
+function layoutLanes(boxes) {
+	const sorted = boxes.slice().sort((a, b) => a.top - b.top || b.height - a.height);
+	const result = {};
+	let cluster = [];
+	let laneEnds = [];
+	let clusterEnd = -1;
+	const flush = () => {
+		for (const id of cluster) result[id].lanes = laneEnds.length;
+		cluster = [];
+		laneEnds = [];
+	};
+	for (const b of sorted) {
+		if (cluster.length && b.top >= clusterEnd) flush();
+		let lane = laneEnds.findIndex((end) => end <= b.top);
+		if (lane === -1) {
+			lane = laneEnds.length;
+			laneEnds.push(0);
+		}
+		laneEnds[lane] = b.top + b.height;
+		clusterEnd = cluster.length ? Math.max(clusterEnd, b.top + b.height) : b.top + b.height;
+		cluster.push(b.id);
+		result[b.id] = {
+			lane,
+			lanes: 1
+		};
+	}
+	flush();
+	return result;
+}
+var CalendarComponent = class CalendarComponent {
+	clickable(dateStr) {
+		return this.canCreate() && !(this.disablePast() && dateStr < this.todayStr());
+	}
+	constructor() {
+		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.view = model("month", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+		this.views = input([
+			"week",
+			"month",
+			"agenda"
+		], ...ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []);
+		this.anchorDate = model(/* @__PURE__ */ new Date(), ...ngDevMode ? [{ debugName: "anchorDate" }] : /* istanbul ignore next */ []);
+		this.filters = input([], ...ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []);
+		this.filterLabel = input("", ...ngDevMode ? [{ debugName: "filterLabel" }] : /* istanbul ignore next */ []);
+		this.filterMode = input("multi", ...ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []);
+		this.activeFilters = model([], ...ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []);
+		this.showFilterCounts = input(false, ...ngDevMode ? [{ debugName: "showFilterCounts" }] : /* istanbul ignore next */ []);
+		this.canCreate = input(false, ...ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []);
+		this.disablePast = input(false, ...ngDevMode ? [{ debugName: "disablePast" }] : /* istanbul ignore next */ []);
+		this.maxVisible = input(3, ...ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []);
+		this.chipLayout = input("inline", ...ngDevMode ? [{ debugName: "chipLayout" }] : /* istanbul ignore next */ []);
+		this.sortByTime = input(true, ...ngDevMode ? [{ debugName: "sortByTime" }] : /* istanbul ignore next */ []);
+		this.startHour = input(7, ...ngDevMode ? [{ debugName: "startHour" }] : /* istanbul ignore next */ []);
+		this.endHour = input(21, ...ngDevMode ? [{ debugName: "endHour" }] : /* istanbul ignore next */ []);
+		this.emptyMessage = input("No events in this period.", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+		this.dayLabelFn = input(null, ...ngDevMode ? [{ debugName: "dayLabelFn" }] : /* istanbul ignore next */ []);
+		this.rangeChange = output();
+		this.itemClick = output();
+		this.dateClick = output();
+		this.slotClick = output();
+		this.moreClick = output();
+		this.host = inject(ElementRef);
+		this.weekDayLabels = WEEK_DAY_LABELS;
+		this.weekDayNames = [
+			"Sunday",
+			"Monday",
+			"Tuesday",
+			"Wednesday",
+			"Thursday",
+			"Friday",
+			"Saturday"
+		];
+		this.skeletonCells = Array.from({ length: 42 }, (_, i) => i);
+		this.formatHour = formatHour;
+		this.todayStr = signal(toDateStr(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "todayStr" }] : /* istanbul ignore next */ []);
+		this.focusedDate = signal(null, ...ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []);
+		this.lastRangeKey = "";
+		this.hours = computed(() => Array.from({ length: Math.max(1, this.endHour() - this.startHour() + 1) }, (_, i) => i + this.startHour()), ...ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []);
+		this.monthCells = computed(() => buildMonthCells(this.anchorDate(), this.todayStr()), ...ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []);
+		this.weekDays = computed(() => buildWeekDays(this.anchorDate(), this.todayStr()), ...ngDevMode ? [{ debugName: "weekDays" }] : /* istanbul ignore next */ []);
+		this.periodLabel = computed(() => periodLabelFor(this.view(), this.anchorDate(), this.todayStr()), ...ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []);
+		this.viewTabs = computed(() => this.views().map((v) => ({
+			key: v,
+			label: v === "week" ? "Week" : v === "month" ? "Month" : "Agenda"
+		})), ...ngDevMode ? [{ debugName: "viewTabs" }] : /* istanbul ignore next */ []);
+		this.typeCounts = computed(() => {
+			const counts = {};
+			for (const e of this.items()) if (e.type) counts[e.type] = (counts[e.type] ?? 0) + 1;
+			return counts;
+		}, ...ngDevMode ? [{ debugName: "typeCounts" }] : /* istanbul ignore next */ []);
+		this.byDate = computed(() => {
+			const active = this.activeFilters();
+			const map = {};
+			if (isDevMode()) {
+				const seen = /* @__PURE__ */ new Set();
+				for (const e of this.items()) {
+					if (seen.has(e.id)) {
+						console.warn(`ui-calendar: duplicate item id "${e.id}" — ids must be unique across all items (prefix them by source).`);
+						break;
+					}
+					seen.add(e.id);
+				}
+			}
+			for (const e of this.items()) {
+				if (active.length && !(e.type && active.includes(e.type))) continue;
+				(map[e.date] ??= []).push(e);
+			}
+			if (this.sortByTime()) for (const k of Object.keys(map)) map[k] = map[k].slice().sort((a, b) => (a.startTime ?? "").localeCompare(b.startTime ?? ""));
+			return map;
+		}, ...ngDevMode ? [{ debugName: "byDate" }] : /* istanbul ignore next */ []);
+		this.agendaGroups = computed(() => Object.entries(this.byDate()).sort(([a], [b]) => a.localeCompare(b)).map(([dateStr, items]) => ({
+			dateStr,
+			items
+		})), ...ngDevMode ? [{ debugName: "agendaGroups" }] : /* istanbul ignore next */ []);
+		this.monthRows = computed(() => {
+			const max = this.maxVisible();
+			const cells = this.monthCells().map((day) => {
+				const items = this.byDate()[day.dateStr] ?? [];
+				return {
+					day,
+					items,
+					visible: items.slice(0, max),
+					overflow: Math.max(0, items.length - max),
+					clickable: this.clickable(day.dateStr),
+					label: this.dayAriaLabel(day.dateStr, items)
+				};
+			});
+			return Array.from({ length: 6 }, (_, r) => ({
+				key: cells[r * 7].day.dateStr,
+				cells: cells.slice(r * 7, r * 7 + 7)
+			}));
+		}, ...ngDevMode ? [{ debugName: "monthRows" }] : /* istanbul ignore next */ []);
+		this.weekColumns = computed(() => {
+			const startHour = this.startHour(), endHour = this.endHour();
+			return this.weekDays().map((day) => {
+				const items = this.byDate()[day.dateStr] ?? [];
+				const boxes = items.filter((e) => !e.allDay && !!e.startTime).map((item) => ({
+					item,
+					...timedBox(item.startTime, item.endTime, startHour, endHour)
+				}));
+				const lanes = layoutLanes(boxes.map((b) => ({
+					id: b.item.id,
+					top: b.top,
+					height: b.height
+				})));
+				return {
+					day,
+					label: formatDayLabel(day.dateStr),
+					clickable: this.clickable(day.dateStr),
+					allDay: items.filter((e) => e.allDay || !e.startTime),
+					timed: boxes.map((b) => ({
+						...b,
+						lane: lanes[b.item.id]
+					}))
+				};
+			});
+		}, ...ngDevMode ? [{ debugName: "weekColumns" }] : /* istanbul ignore next */ []);
+		this.focusDate = computed(() => {
+			const cells = this.monthCells();
+			const f = this.focusedDate();
+			if (f && cells.some((c) => c.dateStr === f)) return f;
+			return (cells.find((c) => c.isToday) ?? cells.find((c) => c.isCurrentMonth) ?? cells[0]).dateStr;
+		}, ...ngDevMode ? [{ debugName: "focusDate" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const view = this.view();
+			const views = this.views();
+			if (views.length && !views.includes(view)) {
+				untracked(() => this.view.set(views[0]));
+				return;
+			}
+			const range = rangeFor(view, this.anchorDate(), this.todayStr());
+			const key = `${range.view}|${range.start}|${range.end}`;
+			if (key === this.lastRangeKey) return;
+			this.lastRangeKey = key;
+			untracked(() => this.rangeChange.emit(range));
+		});
+		const destroyRef = inject(DestroyRef);
+		const zone = inject(NgZone);
+		const doc = inject(DOCUMENT);
+		let timer;
+		const refreshToday = () => zone.run(() => this.todayStr.set(toDateStr(/* @__PURE__ */ new Date())));
+		const schedule = () => {
+			const now = /* @__PURE__ */ new Date();
+			const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1);
+			timer = setTimeout(() => {
+				refreshToday();
+				schedule();
+			}, next.getTime() - now.getTime());
+		};
+		const onVisible = () => {
+			if (doc.visibilityState === "visible") refreshToday();
+		};
+		if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
+		zone.runOutsideAngular(() => {
+			schedule();
+			doc.addEventListener("visibilitychange", onVisible);
+		});
+		destroyRef.onDestroy(() => {
+			clearTimeout(timer);
+			doc.removeEventListener("visibilitychange", onVisible);
+		});
+	}
+	isFilterActive(value) {
+		return this.activeFilters().includes(value);
+	}
+	toggleFilter(value) {
+		const active = this.activeFilters();
+		if (this.filterMode() === "single") {
+			this.activeFilters.set(active.includes(value) ? [] : [value]);
+			return;
+		}
+		this.activeFilters.set(active.includes(value) ? active.filter((v) => v !== value) : [...active, value]);
+	}
+	clearFilters() {
+		this.activeFilters.set([]);
+	}
+	setView(v) {
+		this.view.set(v);
+	}
+	navigate(direction) {
+		this.focusedDate.set(null);
+		this.anchorDate.set(shiftAnchor(this.view(), this.anchorDate(), direction));
+	}
+	goToday() {
+		this.focusedDate.set(null);
+		this.todayStr.set(toDateStr(/* @__PURE__ */ new Date()));
+		this.anchorDate.set(/* @__PURE__ */ new Date());
+	}
+	dowLabel(dateStr) {
+		return WEEK_DAY_LABELS[fromDateStr(dateStr).getDay()];
+	}
+	agendaDow(dateStr) {
+		return fromDateStr(dateStr).toLocaleDateString("en-US", { weekday: "short" }).toUpperCase();
+	}
+	agendaDate(dateStr) {
+		return fromDateStr(dateStr).toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric"
+		});
+	}
+	chipTime(e) {
+		if (e.timeLabel) return e.timeLabel;
+		return e.startTime && !e.allDay ? formatTime$1(e.startTime) : "";
+	}
+	timeRange(e) {
+		return e.startTime ? formatTime$1(e.startTime) + (e.endTime ? ` – ${formatTime$1(e.endTime)}` : "") : "";
+	}
+	itemLabel(e) {
+		return e.ariaLabel || [this.chipTime(e), e.title].filter(Boolean).join(" ");
+	}
+	agendaMeta(e) {
+		return [e.timeLabel ?? (!e.allDay && e.startTime ? this.timeRange(e) : ""), ...e.meta ?? []].filter(Boolean);
+	}
+	dayAriaLabel(dateStr, items) {
+		const fn = this.dayLabelFn();
+		if (fn) return fn(dateStr, items);
+		const label = formatDayLabel(dateStr);
+		return items.length ? `${label}, ${items.length} ${items.length === 1 ? "event" : "events"}` : label;
+	}
+	onDateClick(dateStr) {
+		if (this.clickable(dateStr)) this.dateClick.emit(dateStr);
+	}
+	onCellKey(event, dateStr) {
+		if (event.target !== event.currentTarget || event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.onDateClick(dateStr);
+			return;
+		}
+		const d = fromDateStr(dateStr);
+		const step = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7,
+			Home: -d.getDay(),
+			End: 6 - d.getDay()
+		};
+		if (!(event.key in step)) return;
+		event.preventDefault();
+		const target = toDateStr(new Date(d.getFullYear(), d.getMonth(), d.getDate() + step[event.key]));
+		if (!this.monthCells().some((c) => c.dateStr === target)) return;
+		this.focusedDate.set(target);
+		this.host.nativeElement.querySelector(`.month-cell[data-date="${target}"]`)?.focus();
+	}
+	onAddAllDay(dateStr, event) {
+		event.stopPropagation();
+		this.onDateClick(dateStr);
+	}
+	onAddTimed(dateStr, event) {
+		event.stopPropagation();
+		if (this.clickable(dateStr)) this.slotClick.emit({
+			date: dateStr,
+			time: `${String(this.startHour()).padStart(2, "0")}:00`
+		});
+	}
+	onSlotClick(dateStr, event) {
+		if (!this.clickable(dateStr)) return;
+		const rect = event.currentTarget.getBoundingClientRect();
+		const hour = Math.min(this.endHour(), Math.max(this.startHour(), this.startHour() + Math.floor((event.clientY - rect.top) / 60)));
+		this.slotClick.emit({
+			date: dateStr,
+			time: `${String(hour).padStart(2, "0")}:00`
+		});
+	}
+	onItemClick(item, event) {
+		event.stopPropagation();
+		this.itemClick.emit(item);
+	}
+	onMoreClick(dateStr, items, event) {
+		event.stopPropagation();
+		this.moreClick.emit({
+			date: dateStr,
+			items
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CalendarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: CalendarComponent,
+			isStandalone: true,
+			selector: "ui-calendar",
+			inputs: {
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				view: {
+					classPropertyName: "view",
+					publicName: "view",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				views: {
+					classPropertyName: "views",
+					publicName: "views",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				anchorDate: {
+					classPropertyName: "anchorDate",
+					publicName: "anchorDate",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filters: {
+					classPropertyName: "filters",
+					publicName: "filters",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filterLabel: {
+					classPropertyName: "filterLabel",
+					publicName: "filterLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filterMode: {
+					classPropertyName: "filterMode",
+					publicName: "filterMode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activeFilters: {
+					classPropertyName: "activeFilters",
+					publicName: "activeFilters",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showFilterCounts: {
+					classPropertyName: "showFilterCounts",
+					publicName: "showFilterCounts",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				canCreate: {
+					classPropertyName: "canCreate",
+					publicName: "canCreate",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disablePast: {
+					classPropertyName: "disablePast",
+					publicName: "disablePast",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxVisible: {
+					classPropertyName: "maxVisible",
+					publicName: "maxVisible",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				chipLayout: {
+					classPropertyName: "chipLayout",
+					publicName: "chipLayout",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sortByTime: {
+					classPropertyName: "sortByTime",
+					publicName: "sortByTime",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				startHour: {
+					classPropertyName: "startHour",
+					publicName: "startHour",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				endHour: {
+					classPropertyName: "endHour",
+					publicName: "endHour",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyMessage: {
+					classPropertyName: "emptyMessage",
+					publicName: "emptyMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dayLabelFn: {
+					classPropertyName: "dayLabelFn",
+					publicName: "dayLabelFn",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				view: "viewChange",
+				anchorDate: "anchorDateChange",
+				activeFilters: "activeFiltersChange",
+				rangeChange: "rangeChange",
+				itemClick: "itemClick",
+				dateClick: "dateClick",
+				slotClick: "slotClick",
+				moreClick: "moreClick"
+			},
+			ngImport: i0,
+			template: `
+    <div class="cal-toolbar">
+      <div class="toolbar-left">
+        <h2 class="period-label" aria-live="polite" aria-atomic="true">{{ periodLabel() }}</h2>
+        <div class="nav-controls">
+          <button type="button" class="btn-nav" (click)="navigate(-1)" aria-label="Previous">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
+          </button>
+          <button type="button" class="btn-today" (click)="goToday()">Today</button>
+          <button type="button" class="btn-nav" (click)="navigate(1)" aria-label="Next">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="toolbar-center"><ng-content select="[calendar-summary]" /></div>
+      <div class="toolbar-right">
+        @if (viewTabs().length > 1) {
+          <ui-pill-tabs ariaLabel="Calendar view" name="ui-calendar-view" [tabs]="viewTabs()" [activeKey]="view()" (tabChange)="setView($any($event))" />
+        }
+        <ng-content select="[calendar-actions]" />
+      </div>
+    </div>
+
+    @if (!loading()) {
+      <div class="mobile-summary"><ng-content select="[calendar-summary-mobile]" /></div>
+    }
+
+    @if (filters().length && !loading()) {
+      <div class="filter-bar">
+        @if (filterLabel()) { <div class="filter-bar-label">{{ filterLabel() }}</div> }
+        <div class="filter-chips" role="group" [attr.aria-label]="filterLabel() || 'Filter'">
+          <button type="button" class="filter-chip" [class.active-all]="!activeFilters().length" [attr.aria-pressed]="!activeFilters().length" (click)="clearFilters()">
+            All
+            @if (showFilterCounts()) { <span class="chip-count">{{ items().length }}</span> }
+          </button>
+          @for (f of filters(); track f.value) {
+            <button type="button" class="filter-chip"
+              [class.active-type]="isFilterActive(f.value)"
+              [attr.aria-pressed]="isFilterActive(f.value)"
+              [style.--chip-color]="f.color"
+              [style.--chip-bg]="f.bgColor ?? null"
+              (click)="toggleFilter(f.value)">
+              <span class="chip-dot" [style.background]="f.color" aria-hidden="true"></span>
+              {{ f.label }}
+              @if (showFilterCounts()) { <span class="chip-count">{{ typeCounts()[f.value] ?? 0 }}</span> }
+            </button>
+          }
+        </div>
+      </div>
+    }
+
+    @if (loading()) {
+      <div class="cal-skeleton" aria-busy="true" aria-label="Loading calendar" role="status">
+        <div class="skel-dow-row">
+          @for (d of weekDayLabels; track d) { <div class="skel-dow"><ui-skeleton [height]="16" width="36px" [radius]="4" /></div> }
+        </div>
+        <div class="skel-month-grid">
+          @for (i of skeletonCells; track i) {
+            <div class="skel-cell">
+              <ui-skeleton [height]="22" width="22px" [radius]="11" />
+              @if (i % 3 === 0) { <ui-skeleton [height]="14" [radius]="3" /> }
+              @if (i % 5 === 0) { <ui-skeleton [height]="14" width="72%" [radius]="3" /> }
+            </div>
+          }
+        </div>
+      </div>
+    } @else {
+      @switch (view()) {
+        @case ('month') {
+          <div class="month-view">
+            <div class="month-grid" role="grid" [attr.aria-label]="periodLabel()">
+              <div class="month-header" role="row">
+                @for (d of weekDayLabels; track d; let i = $index) {
+                  <div class="month-dow" role="columnheader" [attr.aria-label]="weekDayNames[i]">
+                    <span class="dow-full" aria-hidden="true">{{ d }}</span><span class="dow-short" aria-hidden="true">{{ d.slice(0, 2) }}</span>
+                  </div>
+                }
+              </div>
+              @for (row of monthRows(); track row.key) {
+                <div class="month-row" role="row">
+                  @for (c of row.cells; track c.day.dateStr) {
+                    <div class="month-cell" role="gridcell"
+                      [attr.data-date]="c.day.dateStr"
+                      [class.other-month]="!c.day.isCurrentMonth" [class.today]="c.day.isToday" [class.weekend]="c.day.isWeekend"
+                      [class.clickable]="c.clickable"
+                      [attr.tabindex]="c.day.dateStr === focusDate() ? 0 : -1"
+                      [attr.aria-label]="c.label"
+                      [attr.aria-current]="c.day.isToday ? 'date' : null"
+                      (click)="onDateClick(c.day.dateStr)"
+                      (focus)="focusedDate.set(c.day.dateStr)"
+                      (keydown)="onCellKey($event, c.day.dateStr)">
+                      <span class="day-num" [class.today-badge]="c.day.isToday">{{ c.day.dayNum }}</span>
+                      <div class="cell-events">
+                        @for (e of c.visible; track e.id) {
+                          <button type="button" class="event-chip" [class.stacked]="chipLayout() === 'stacked'" [class.has-head]="!!(e.iconPath || chipTime(e))" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
+                            [attr.aria-label]="itemLabel(e)" [title]="e.title"
+                            (click)="onItemClick(e, $event)">
+                            <span class="chip-head">
+                              @if (e.iconPath) {
+                                <svg class="chip-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path [attr.d]="e.iconPath"/></svg>
+                              }
+                              @if (chipTime(e); as t) { <span class="chip-time">{{ t }}</span> }
+                            </span>
+                            <span class="chip-title" [class.strike]="e.strike">{{ e.title }}</span>
+                            @if (e.tag) { <span class="chip-src">{{ e.tag }}</span> }
+                          </button>
+                        }
+                        @if (c.overflow > 0) {
+                          <button type="button" class="more-events" (click)="onMoreClick(c.day.dateStr, c.items, $event)">+{{ c.overflow }} more</button>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+        @case ('week') {
+          <div class="week-view">
+            <div class="week-header">
+              <div class="time-gutter"></div>
+              @for (col of weekColumns(); track col.day.dateStr) {
+                <div class="week-day-hdr" [class.today]="col.day.isToday">
+                  <span class="wdh-dow">{{ dowLabel(col.day.dateStr) }}</span>
+                  <span class="wdh-num" [class.today-badge]="col.day.isToday">{{ col.day.dayNum }}</span>
+                </div>
+              }
+            </div>
+            <div class="allday-row">
+              <div class="time-gutter allday-label">All day</div>
+              @for (col of weekColumns(); track col.day.dateStr) {
+                <div class="allday-cell" [class.clickable]="col.clickable" (click)="onDateClick(col.day.dateStr)">
+                  @if (col.clickable) {
+                    <button type="button" class="slot-add" [attr.aria-label]="'Add all-day event on ' + col.label" (click)="onAddAllDay(col.day.dateStr, $event)">+ Add</button>
+                  }
+                  @for (e of col.allDay; track e.id) {
+                    <button type="button" class="allday-chip" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
+                      [attr.aria-label]="itemLabel(e)" (click)="onItemClick(e, $event)">{{ e.title }}</button>
+                  }
+                </div>
+              }
+            </div>
+            <div class="week-body">
+              <div class="time-col">
+                @for (h of hours(); track h) { <div class="time-slot-label">{{ formatHour(h) }}</div> }
+              </div>
+              @for (col of weekColumns(); track col.day.dateStr) {
+                <div class="day-col" [class.today]="col.day.isToday" [class.clickable]="col.clickable" (click)="onSlotClick(col.day.dateStr, $event)">
+                  @if (col.clickable) {
+                    <button type="button" class="slot-add" [attr.aria-label]="'Add event on ' + col.label" (click)="onAddTimed(col.day.dateStr, $event)">+ Add</button>
+                  }
+                  @for (h of hours(); track h) { <div class="time-slot"></div> }
+                  @for (t of col.timed; track t.item.id) {
+                    <button type="button" class="timed-event"
+                      [style.top.px]="t.top" [style.height.px]="t.height"
+                      [style.left]="'calc(' + (t.lane.lane / t.lane.lanes * 100) + '% + 2px)'"
+                      [style.width]="'calc(' + (100 / t.lane.lanes) + '% - 4px)'"
+                      [style.background]="t.item.bgColor" [style.borderLeftColor]="t.item.color"
+                      [attr.aria-label]="itemLabel(t.item)" (click)="onItemClick(t.item, $event)">
+                      <span class="te-title" [class.strike]="t.item.strike">{{ t.item.title }}</span>
+                      @if (t.item.startTime) { <span class="te-time">{{ t.item.timeLabel || timeRange(t.item) }}</span> }
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+        @case ('agenda') {
+          <div class="agenda-view">
+            @if (agendaGroups().length === 0) {
+              <ui-empty-state iconType="task" [message]="emptyMessage()" />
+            }
+            @for (group of agendaGroups(); track group.dateStr) {
+              <div class="agenda-group">
+                <div class="agenda-date-hdr">
+                  <span class="ag-dow">{{ agendaDow(group.dateStr) }}</span>
+                  <span class="ag-date">{{ agendaDate(group.dateStr) }}</span>
+                  @if (group.dateStr === todayStr()) { <ui-badge label="Today" variant="blue" /> }
+                </div>
+                <div class="agenda-events">
+                  @for (e of group.items; track e.id) {
+                    <button type="button" class="agenda-event" [attr.aria-label]="e.ariaLabel || null" (click)="onItemClick(e, $event)">
+                      <span class="ae-color-bar" [style.background]="e.color"></span>
+                      <span class="ae-body">
+                        <span class="ae-top">
+                          <span class="ae-title" [class.strike]="e.strike">{{ e.title }}</span>
+                          @for (b of e.badges ?? []; track b.label) { <ui-badge [label]="b.label" [variant]="b.variant" /> }
+                        </span>
+                        @if (agendaMeta(e).length) {
+                          <span class="ae-meta">
+                            @for (m of agendaMeta(e); track $index) { <span class="ae-meta-item">{{ m }}</span> }
+                          </span>
+                        }
+                      </span>
+                    </button>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+    }
+    <ui-toast />
+  `,
+			isInline: true,
+			styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}.cal-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-bottom:16px;gap:16px;flex-shrink:0}.toolbar-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.toolbar-center{display:flex;align-items:center;justify-content:center;gap:10px}.toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.period-label{font-size:1.125rem;font-weight:700;color:#111827;margin:0}.nav-controls{display:flex;align-items:center;gap:8px}.btn-nav{width:32px;height:32px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569}.btn-nav:hover{background:#f8fafc}.btn-today{padding:6px 14px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:500;color:#374151;cursor:pointer}.btn-today:hover{background:#f8fafc}.btn-nav:focus-visible,.btn-today:focus-visible,.filter-chip:focus-visible,.event-chip:focus-visible,.more-events:focus-visible,.allday-chip:focus-visible,.timed-event:focus-visible,.agenda-event:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.month-cell:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.slot-add:focus,.slot-add:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.mobile-summary{display:none}.filter-bar{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid #e2e8f0;flex-shrink:0}.filter-bar-label{font-size:.6875rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}.filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}.filter-chip:hover{border-color:#cbd5e1;background:#f8fafc}.filter-chip.active-all{background:#1e293b;color:#fff;border-color:#1e293b}.filter-chip.active-all .chip-count{background:#fff3;color:#fff}.filter-chip.active-type{background:var(--chip-bg, #f1f5f9);color:#1e293b;border-color:var(--chip-color);font-weight:600}.filter-chip.active-type .chip-count{background:var(--chip-color);color:#fff}.chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.chip-count{font-size:.6875rem;font-weight:700;background:#f1f5f9;color:#64748b;padding:1px 7px;border-radius:999px}.cal-skeleton,.month-view,.week-view,.agenda-view{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.skel-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.skel-dow{display:flex;justify-content:center}.skel-month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,minmax(80px,1fr));flex:1}.skel-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:8px 6px;display:flex;flex-direction:column;gap:6px}.skel-cell:nth-child(7n){border-right:none}.month-grid{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;position:sticky;top:0;z-index:1}.month-dow{padding:10px 8px;font-size:.75rem;font-weight:600;color:#6b7280;text-align:center;text-transform:uppercase;letter-spacing:.04em}.dow-short{display:none}.month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1 0 120px}.month-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:6px 6px 4px;min-height:120px;transition:background .1s;min-width:0;box-sizing:border-box}.month-cell.clickable{cursor:pointer}.month-cell.clickable:hover{background:#f8fafc}.month-cell:nth-child(7n){border-right:none}.month-cell.other-month{background:#fafafa}.month-cell.other-month .day-num{color:#64748b}.month-cell.today{background:#eff6ff}.day-num{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-size:.8125rem;font-weight:500;color:#374151;margin-bottom:4px}.today-badge{background:#2563eb;color:#fff;font-weight:700}.cell-events{display:flex;flex-direction:column;gap:2px}.event-chip{display:flex;align-items:center;gap:3px;padding:2px 6px;width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;cursor:pointer;overflow:hidden}.event-chip:hover{opacity:.85}.event-chip.stacked{flex-direction:column;align-items:flex-start;gap:0}.chip-head{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.chip-icon{flex-shrink:0}.chip-time{font-weight:700;flex-shrink:0;color:#1e293b}.chip-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;min-width:0;max-width:100%}.strike{text-decoration:line-through}.chip-src{font-size:.625rem;font-weight:700;margin-left:auto;flex-shrink:0;color:#1e293b}.more-events{font-size:.6875rem;color:#2563eb;font-weight:600;cursor:pointer;padding:1px 6px;border:0;background:none;text-align:left;font-family:inherit}.more-events:hover{text-decoration:underline}.week-view{overflow:auto}.week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;overflow-y:scroll}.time-gutter{border-right:1px solid #e2e8f0}.week-day-hdr{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-right:1px solid #f1f5f9}.week-day-hdr.today{background:#eff6ff}.week-day-hdr:last-child{border-right:none}.wdh-dow{font-size:.6875rem;font-weight:600;color:#6b7280;text-transform:uppercase}.wdh-num{width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-size:.9375rem;font-weight:600;color:#374151;margin-top:2px}.wdh-num.today-badge{background:#2563eb;color:#fff;font-weight:700}.allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;min-height:32px;flex-shrink:0;overflow-y:scroll}.allday-label{font-size:.625rem;color:#64748b;font-weight:600;text-transform:uppercase;display:flex;align-items:center;justify-content:center}.slot-add{position:absolute;top:2px;left:2px;z-index:3;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap;font-family:inherit}.slot-add:focus,.slot-add:focus-visible{width:auto;height:auto;padding:2px 8px;clip-path:none;background:#1e293b;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}.allday-cell{position:relative;border-right:1px solid #f1f5f9;padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0}.allday-cell.clickable{cursor:pointer}.allday-cell:last-child{border-right:none}.allday-chip{padding:2px 6px;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;color:#1e293b;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-family:inherit}.allday-chip:hover{opacity:.85}.week-body{display:grid;grid-template-columns:60px repeat(7,1fr);flex:1;overflow-y:scroll}.time-col{display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0}.time-slot-label{height:60px;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0;font-size:.6875rem;color:#64748b;font-weight:500;border-bottom:1px solid #f1f5f9;flex-shrink:0;box-sizing:border-box}.day-col{position:relative;border-right:1px solid #f1f5f9;min-width:0}.day-col.clickable{cursor:pointer}.day-col:last-child{border-right:none}.day-col.today{background:#fafbff}.time-slot{height:60px;border-bottom:1px solid #f1f5f9;box-sizing:border-box}.day-col.clickable .time-slot:hover{background:#f8fafc}.timed-event{position:absolute;min-height:20px;border:0;border-radius:6px;padding:3px 6px;overflow:hidden;cursor:pointer;box-sizing:border-box;border-left:3px solid transparent;display:flex;flex-direction:column;align-items:flex-start;gap:1px;box-shadow:0 1px 3px #00000014;text-align:left;font-family:inherit}.timed-event:hover{opacity:.85}.te-title{font-size:.6875rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.te-time{font-size:.625rem;color:#475569}.agenda-view{overflow-y:auto}.agenda-group{display:flex;border-bottom:1px solid #f1f5f9}.agenda-date-hdr{width:100px;flex-shrink:0;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-right:2px solid #e2e8f0}.ag-dow{font-size:.6875rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.ag-date{font-size:.8125rem;font-weight:600;color:#374151}.agenda-events{flex:1;display:flex;flex-direction:column;min-width:0}.agenda-event{display:flex;align-items:stretch;padding:10px 12px;cursor:pointer;border:0;border-bottom:1px solid #f8fafc;background:none;text-align:left;width:100%;font-family:inherit;transition:background .1s}.agenda-event:hover{background:#f8fafc}.agenda-event:last-child{border-bottom:none}.ae-color-bar{display:block;width:4px;border-radius:4px;flex-shrink:0;margin-right:12px}.ae-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ae-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ae-title{font-size:.9375rem;font-weight:600;color:#111827}.ae-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ae-meta-item{font-size:.8125rem;color:#6b7280}@media(pointer:coarse),(max-width:480px){.btn-nav,.btn-today,.filter-chip,.event-chip,.more-events,.allday-chip,.agenda-event{min-height:44px}.btn-nav{min-width:44px}}@media(max-width:768px){.cal-toolbar{grid-template-columns:1fr}.toolbar-center{display:none}.toolbar-left{flex-wrap:wrap}.toolbar-right{justify-content:flex-start}.mobile-summary{display:block;margin-bottom:4px;flex-shrink:0}.mobile-summary:empty{display:none}.filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.month-view,.cal-skeleton,.week-view{overflow-x:auto;-webkit-overflow-scrolling:touch}.month-grid,.skel-month-grid,.skel-dow-row{min-width:560px}.month-row{flex-basis:80px}.month-cell{min-height:80px}.week-header,.allday-row,.week-body{min-width:640px}.agenda-date-hdr{width:76px;padding:12px 8px}.ae-title{font-size:.875rem}}@media(max-width:640px){.event-chip.stacked.has-head .chip-title{display:none}}@media(max-width:480px){.dow-full{display:none}.dow-short{display:inline}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: BadgeComponent,
+					selector: "ui-badge",
+					inputs: ["label", "variant"]
+				},
+				{
+					kind: "component",
+					type: EmptyStateComponent,
+					selector: "ui-empty-state",
+					inputs: [
+						"message",
+						"title",
+						"iconType"
+					]
+				},
+				{
+					kind: "component",
+					type: PillTabsComponent,
+					selector: "ui-pill-tabs",
+					inputs: [
+						"tabs",
+						"activeKey",
+						"ariaLabel",
+						"name"
+					],
+					outputs: ["tabChange"]
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"height",
+						"width",
+						"radius",
+						"mb",
+						"ariaLabel"
+					]
+				},
+				{
+					kind: "component",
+					type: ToastComponent,
+					selector: "ui-toast",
+					inputs: ["dismissible", "persistentLiveRegion"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CalendarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-calendar",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				BadgeComponent,
+				EmptyStateComponent,
+				PillTabsComponent,
+				SkeletonComponent,
+				ToastComponent
+			],
+			template: `
+    <div class="cal-toolbar">
+      <div class="toolbar-left">
+        <h2 class="period-label" aria-live="polite" aria-atomic="true">{{ periodLabel() }}</h2>
+        <div class="nav-controls">
+          <button type="button" class="btn-nav" (click)="navigate(-1)" aria-label="Previous">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
+          </button>
+          <button type="button" class="btn-today" (click)="goToday()">Today</button>
+          <button type="button" class="btn-nav" (click)="navigate(1)" aria-label="Next">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="toolbar-center"><ng-content select="[calendar-summary]" /></div>
+      <div class="toolbar-right">
+        @if (viewTabs().length > 1) {
+          <ui-pill-tabs ariaLabel="Calendar view" name="ui-calendar-view" [tabs]="viewTabs()" [activeKey]="view()" (tabChange)="setView($any($event))" />
+        }
+        <ng-content select="[calendar-actions]" />
+      </div>
+    </div>
+
+    @if (!loading()) {
+      <div class="mobile-summary"><ng-content select="[calendar-summary-mobile]" /></div>
+    }
+
+    @if (filters().length && !loading()) {
+      <div class="filter-bar">
+        @if (filterLabel()) { <div class="filter-bar-label">{{ filterLabel() }}</div> }
+        <div class="filter-chips" role="group" [attr.aria-label]="filterLabel() || 'Filter'">
+          <button type="button" class="filter-chip" [class.active-all]="!activeFilters().length" [attr.aria-pressed]="!activeFilters().length" (click)="clearFilters()">
+            All
+            @if (showFilterCounts()) { <span class="chip-count">{{ items().length }}</span> }
+          </button>
+          @for (f of filters(); track f.value) {
+            <button type="button" class="filter-chip"
+              [class.active-type]="isFilterActive(f.value)"
+              [attr.aria-pressed]="isFilterActive(f.value)"
+              [style.--chip-color]="f.color"
+              [style.--chip-bg]="f.bgColor ?? null"
+              (click)="toggleFilter(f.value)">
+              <span class="chip-dot" [style.background]="f.color" aria-hidden="true"></span>
+              {{ f.label }}
+              @if (showFilterCounts()) { <span class="chip-count">{{ typeCounts()[f.value] ?? 0 }}</span> }
+            </button>
+          }
+        </div>
+      </div>
+    }
+
+    @if (loading()) {
+      <div class="cal-skeleton" aria-busy="true" aria-label="Loading calendar" role="status">
+        <div class="skel-dow-row">
+          @for (d of weekDayLabels; track d) { <div class="skel-dow"><ui-skeleton [height]="16" width="36px" [radius]="4" /></div> }
+        </div>
+        <div class="skel-month-grid">
+          @for (i of skeletonCells; track i) {
+            <div class="skel-cell">
+              <ui-skeleton [height]="22" width="22px" [radius]="11" />
+              @if (i % 3 === 0) { <ui-skeleton [height]="14" [radius]="3" /> }
+              @if (i % 5 === 0) { <ui-skeleton [height]="14" width="72%" [radius]="3" /> }
+            </div>
+          }
+        </div>
+      </div>
+    } @else {
+      @switch (view()) {
+        @case ('month') {
+          <div class="month-view">
+            <div class="month-grid" role="grid" [attr.aria-label]="periodLabel()">
+              <div class="month-header" role="row">
+                @for (d of weekDayLabels; track d; let i = $index) {
+                  <div class="month-dow" role="columnheader" [attr.aria-label]="weekDayNames[i]">
+                    <span class="dow-full" aria-hidden="true">{{ d }}</span><span class="dow-short" aria-hidden="true">{{ d.slice(0, 2) }}</span>
+                  </div>
+                }
+              </div>
+              @for (row of monthRows(); track row.key) {
+                <div class="month-row" role="row">
+                  @for (c of row.cells; track c.day.dateStr) {
+                    <div class="month-cell" role="gridcell"
+                      [attr.data-date]="c.day.dateStr"
+                      [class.other-month]="!c.day.isCurrentMonth" [class.today]="c.day.isToday" [class.weekend]="c.day.isWeekend"
+                      [class.clickable]="c.clickable"
+                      [attr.tabindex]="c.day.dateStr === focusDate() ? 0 : -1"
+                      [attr.aria-label]="c.label"
+                      [attr.aria-current]="c.day.isToday ? 'date' : null"
+                      (click)="onDateClick(c.day.dateStr)"
+                      (focus)="focusedDate.set(c.day.dateStr)"
+                      (keydown)="onCellKey($event, c.day.dateStr)">
+                      <span class="day-num" [class.today-badge]="c.day.isToday">{{ c.day.dayNum }}</span>
+                      <div class="cell-events">
+                        @for (e of c.visible; track e.id) {
+                          <button type="button" class="event-chip" [class.stacked]="chipLayout() === 'stacked'" [class.has-head]="!!(e.iconPath || chipTime(e))" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
+                            [attr.aria-label]="itemLabel(e)" [title]="e.title"
+                            (click)="onItemClick(e, $event)">
+                            <span class="chip-head">
+                              @if (e.iconPath) {
+                                <svg class="chip-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path [attr.d]="e.iconPath"/></svg>
+                              }
+                              @if (chipTime(e); as t) { <span class="chip-time">{{ t }}</span> }
+                            </span>
+                            <span class="chip-title" [class.strike]="e.strike">{{ e.title }}</span>
+                            @if (e.tag) { <span class="chip-src">{{ e.tag }}</span> }
+                          </button>
+                        }
+                        @if (c.overflow > 0) {
+                          <button type="button" class="more-events" (click)="onMoreClick(c.day.dateStr, c.items, $event)">+{{ c.overflow }} more</button>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+        @case ('week') {
+          <div class="week-view">
+            <div class="week-header">
+              <div class="time-gutter"></div>
+              @for (col of weekColumns(); track col.day.dateStr) {
+                <div class="week-day-hdr" [class.today]="col.day.isToday">
+                  <span class="wdh-dow">{{ dowLabel(col.day.dateStr) }}</span>
+                  <span class="wdh-num" [class.today-badge]="col.day.isToday">{{ col.day.dayNum }}</span>
+                </div>
+              }
+            </div>
+            <div class="allday-row">
+              <div class="time-gutter allday-label">All day</div>
+              @for (col of weekColumns(); track col.day.dateStr) {
+                <div class="allday-cell" [class.clickable]="col.clickable" (click)="onDateClick(col.day.dateStr)">
+                  @if (col.clickable) {
+                    <button type="button" class="slot-add" [attr.aria-label]="'Add all-day event on ' + col.label" (click)="onAddAllDay(col.day.dateStr, $event)">+ Add</button>
+                  }
+                  @for (e of col.allDay; track e.id) {
+                    <button type="button" class="allday-chip" [style.background]="e.bgColor" [style.borderLeftColor]="e.color"
+                      [attr.aria-label]="itemLabel(e)" (click)="onItemClick(e, $event)">{{ e.title }}</button>
+                  }
+                </div>
+              }
+            </div>
+            <div class="week-body">
+              <div class="time-col">
+                @for (h of hours(); track h) { <div class="time-slot-label">{{ formatHour(h) }}</div> }
+              </div>
+              @for (col of weekColumns(); track col.day.dateStr) {
+                <div class="day-col" [class.today]="col.day.isToday" [class.clickable]="col.clickable" (click)="onSlotClick(col.day.dateStr, $event)">
+                  @if (col.clickable) {
+                    <button type="button" class="slot-add" [attr.aria-label]="'Add event on ' + col.label" (click)="onAddTimed(col.day.dateStr, $event)">+ Add</button>
+                  }
+                  @for (h of hours(); track h) { <div class="time-slot"></div> }
+                  @for (t of col.timed; track t.item.id) {
+                    <button type="button" class="timed-event"
+                      [style.top.px]="t.top" [style.height.px]="t.height"
+                      [style.left]="'calc(' + (t.lane.lane / t.lane.lanes * 100) + '% + 2px)'"
+                      [style.width]="'calc(' + (100 / t.lane.lanes) + '% - 4px)'"
+                      [style.background]="t.item.bgColor" [style.borderLeftColor]="t.item.color"
+                      [attr.aria-label]="itemLabel(t.item)" (click)="onItemClick(t.item, $event)">
+                      <span class="te-title" [class.strike]="t.item.strike">{{ t.item.title }}</span>
+                      @if (t.item.startTime) { <span class="te-time">{{ t.item.timeLabel || timeRange(t.item) }}</span> }
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+        @case ('agenda') {
+          <div class="agenda-view">
+            @if (agendaGroups().length === 0) {
+              <ui-empty-state iconType="task" [message]="emptyMessage()" />
+            }
+            @for (group of agendaGroups(); track group.dateStr) {
+              <div class="agenda-group">
+                <div class="agenda-date-hdr">
+                  <span class="ag-dow">{{ agendaDow(group.dateStr) }}</span>
+                  <span class="ag-date">{{ agendaDate(group.dateStr) }}</span>
+                  @if (group.dateStr === todayStr()) { <ui-badge label="Today" variant="blue" /> }
+                </div>
+                <div class="agenda-events">
+                  @for (e of group.items; track e.id) {
+                    <button type="button" class="agenda-event" [attr.aria-label]="e.ariaLabel || null" (click)="onItemClick(e, $event)">
+                      <span class="ae-color-bar" [style.background]="e.color"></span>
+                      <span class="ae-body">
+                        <span class="ae-top">
+                          <span class="ae-title" [class.strike]="e.strike">{{ e.title }}</span>
+                          @for (b of e.badges ?? []; track b.label) { <ui-badge [label]="b.label" [variant]="b.variant" /> }
+                        </span>
+                        @if (agendaMeta(e).length) {
+                          <span class="ae-meta">
+                            @for (m of agendaMeta(e); track $index) { <span class="ae-meta-item">{{ m }}</span> }
+                          </span>
+                        }
+                      </span>
+                    </button>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+    }
+    <ui-toast />
+  `,
+			styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}.cal-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-bottom:16px;gap:16px;flex-shrink:0}.toolbar-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.toolbar-center{display:flex;align-items:center;justify-content:center;gap:10px}.toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.period-label{font-size:1.125rem;font-weight:700;color:#111827;margin:0}.nav-controls{display:flex;align-items:center;gap:8px}.btn-nav{width:32px;height:32px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569}.btn-nav:hover{background:#f8fafc}.btn-today{padding:6px 14px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:500;color:#374151;cursor:pointer}.btn-today:hover{background:#f8fafc}.btn-nav:focus-visible,.btn-today:focus-visible,.filter-chip:focus-visible,.event-chip:focus-visible,.more-events:focus-visible,.allday-chip:focus-visible,.timed-event:focus-visible,.agenda-event:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.month-cell:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.slot-add:focus,.slot-add:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.mobile-summary{display:none}.filter-bar{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid #e2e8f0;flex-shrink:0}.filter-bar-label{font-size:.6875rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}.filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}.filter-chip:hover{border-color:#cbd5e1;background:#f8fafc}.filter-chip.active-all{background:#1e293b;color:#fff;border-color:#1e293b}.filter-chip.active-all .chip-count{background:#fff3;color:#fff}.filter-chip.active-type{background:var(--chip-bg, #f1f5f9);color:#1e293b;border-color:var(--chip-color);font-weight:600}.filter-chip.active-type .chip-count{background:var(--chip-color);color:#fff}.chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.chip-count{font-size:.6875rem;font-weight:700;background:#f1f5f9;color:#64748b;padding:1px 7px;border-radius:999px}.cal-skeleton,.month-view,.week-view,.agenda-view{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.skel-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.skel-dow{display:flex;justify-content:center}.skel-month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,minmax(80px,1fr));flex:1}.skel-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:8px 6px;display:flex;flex-direction:column;gap:6px}.skel-cell:nth-child(7n){border-right:none}.month-grid{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;position:sticky;top:0;z-index:1}.month-dow{padding:10px 8px;font-size:.75rem;font-weight:600;color:#6b7280;text-align:center;text-transform:uppercase;letter-spacing:.04em}.dow-short{display:none}.month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1 0 120px}.month-cell{border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:6px 6px 4px;min-height:120px;transition:background .1s;min-width:0;box-sizing:border-box}.month-cell.clickable{cursor:pointer}.month-cell.clickable:hover{background:#f8fafc}.month-cell:nth-child(7n){border-right:none}.month-cell.other-month{background:#fafafa}.month-cell.other-month .day-num{color:#64748b}.month-cell.today{background:#eff6ff}.day-num{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-size:.8125rem;font-weight:500;color:#374151;margin-bottom:4px}.today-badge{background:#2563eb;color:#fff;font-weight:700}.cell-events{display:flex;flex-direction:column;gap:2px}.event-chip{display:flex;align-items:center;gap:3px;padding:2px 6px;width:100%;box-sizing:border-box;text-align:left;font-family:inherit;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;cursor:pointer;overflow:hidden}.event-chip:hover{opacity:.85}.event-chip.stacked{flex-direction:column;align-items:flex-start;gap:0}.chip-head{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.chip-icon{flex-shrink:0}.chip-time{font-weight:700;flex-shrink:0;color:#1e293b}.chip-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;min-width:0;max-width:100%}.strike{text-decoration:line-through}.chip-src{font-size:.625rem;font-weight:700;margin-left:auto;flex-shrink:0;color:#1e293b}.more-events{font-size:.6875rem;color:#2563eb;font-weight:600;cursor:pointer;padding:1px 6px;border:0;background:none;text-align:left;font-family:inherit}.more-events:hover{text-decoration:underline}.week-view{overflow:auto}.week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0;overflow-y:scroll}.time-gutter{border-right:1px solid #e2e8f0}.week-day-hdr{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-right:1px solid #f1f5f9}.week-day-hdr.today{background:#eff6ff}.week-day-hdr:last-child{border-right:none}.wdh-dow{font-size:.6875rem;font-weight:600;color:#6b7280;text-transform:uppercase}.wdh-num{width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-size:.9375rem;font-weight:600;color:#374151;margin-top:2px}.wdh-num.today-badge{background:#2563eb;color:#fff;font-weight:700}.allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid #e2e8f0;min-height:32px;flex-shrink:0;overflow-y:scroll}.allday-label{font-size:.625rem;color:#64748b;font-weight:600;text-transform:uppercase;display:flex;align-items:center;justify-content:center}.slot-add{position:absolute;top:2px;left:2px;z-index:3;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap;font-family:inherit}.slot-add:focus,.slot-add:focus-visible{width:auto;height:auto;padding:2px 8px;clip-path:none;background:#1e293b;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}.allday-cell{position:relative;border-right:1px solid #f1f5f9;padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0}.allday-cell.clickable{cursor:pointer}.allday-cell:last-child{border-right:none}.allday-chip{padding:2px 6px;border:0;border-radius:4px;border-left:3px solid transparent;font-size:.6875rem;font-weight:500;color:#1e293b;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-family:inherit}.allday-chip:hover{opacity:.85}.week-body{display:grid;grid-template-columns:60px repeat(7,1fr);flex:1;overflow-y:scroll}.time-col{display:flex;flex-direction:column;border-right:1px solid #e2e8f0;flex-shrink:0}.time-slot-label{height:60px;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0;font-size:.6875rem;color:#64748b;font-weight:500;border-bottom:1px solid #f1f5f9;flex-shrink:0;box-sizing:border-box}.day-col{position:relative;border-right:1px solid #f1f5f9;min-width:0}.day-col.clickable{cursor:pointer}.day-col:last-child{border-right:none}.day-col.today{background:#fafbff}.time-slot{height:60px;border-bottom:1px solid #f1f5f9;box-sizing:border-box}.day-col.clickable .time-slot:hover{background:#f8fafc}.timed-event{position:absolute;min-height:20px;border:0;border-radius:6px;padding:3px 6px;overflow:hidden;cursor:pointer;box-sizing:border-box;border-left:3px solid transparent;display:flex;flex-direction:column;align-items:flex-start;gap:1px;box-shadow:0 1px 3px #00000014;text-align:left;font-family:inherit}.timed-event:hover{opacity:.85}.te-title{font-size:.6875rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.te-time{font-size:.625rem;color:#475569}.agenda-view{overflow-y:auto}.agenda-group{display:flex;border-bottom:1px solid #f1f5f9}.agenda-date-hdr{width:100px;flex-shrink:0;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-right:2px solid #e2e8f0}.ag-dow{font-size:.6875rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.ag-date{font-size:.8125rem;font-weight:600;color:#374151}.agenda-events{flex:1;display:flex;flex-direction:column;min-width:0}.agenda-event{display:flex;align-items:stretch;padding:10px 12px;cursor:pointer;border:0;border-bottom:1px solid #f8fafc;background:none;text-align:left;width:100%;font-family:inherit;transition:background .1s}.agenda-event:hover{background:#f8fafc}.agenda-event:last-child{border-bottom:none}.ae-color-bar{display:block;width:4px;border-radius:4px;flex-shrink:0;margin-right:12px}.ae-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ae-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ae-title{font-size:.9375rem;font-weight:600;color:#111827}.ae-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ae-meta-item{font-size:.8125rem;color:#6b7280}@media(pointer:coarse),(max-width:480px){.btn-nav,.btn-today,.filter-chip,.event-chip,.more-events,.allday-chip,.agenda-event{min-height:44px}.btn-nav{min-width:44px}}@media(max-width:768px){.cal-toolbar{grid-template-columns:1fr}.toolbar-center{display:none}.toolbar-left{flex-wrap:wrap}.toolbar-right{justify-content:flex-start}.mobile-summary{display:block;margin-bottom:4px;flex-shrink:0}.mobile-summary:empty{display:none}.filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.month-view,.cal-skeleton,.week-view{overflow-x:auto;-webkit-overflow-scrolling:touch}.month-grid,.skel-month-grid,.skel-dow-row{min-width:560px}.month-row{flex-basis:80px}.month-cell{min-height:80px}.week-header,.allday-row,.week-body{min-width:640px}.agenda-date-hdr{width:76px;padding:12px 8px}.ae-title{font-size:.875rem}}@media(max-width:640px){.event-chip.stacked.has-head .chip-title{display:none}}@media(max-width:480px){.dow-full{display:none}.dow-short{display:inline}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		view: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "view",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["viewChange"]
+		}],
+		views: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "views",
+				required: false
+			}]
+		}],
+		anchorDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "anchorDate",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["anchorDateChange"]
+		}],
+		filters: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filters",
+				required: false
+			}]
+		}],
+		filterLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterLabel",
+				required: false
+			}]
+		}],
+		filterMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterMode",
+				required: false
+			}]
+		}],
+		activeFilters: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeFilters",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeFiltersChange"]
+		}],
+		showFilterCounts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showFilterCounts",
+				required: false
+			}]
+		}],
+		canCreate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canCreate",
+				required: false
+			}]
+		}],
+		disablePast: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disablePast",
+				required: false
+			}]
+		}],
+		maxVisible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxVisible",
+				required: false
+			}]
+		}],
+		chipLayout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chipLayout",
+				required: false
+			}]
+		}],
+		sortByTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sortByTime",
+				required: false
+			}]
+		}],
+		startHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "startHour",
+				required: false
+			}]
+		}],
+		endHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endHour",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		dayLabelFn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dayLabelFn",
+				required: false
+			}]
+		}],
+		rangeChange: [{
+			type: i0.Output,
+			args: ["rangeChange"]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
+		dateClick: [{
+			type: i0.Output,
+			args: ["dateClick"]
+		}],
+		slotClick: [{
+			type: i0.Output,
+			args: ["slotClick"]
+		}],
+		moreClick: [{
+			type: i0.Output,
+			args: ["moreClick"]
+		}]
+	}
+});
+var PageComponent = class PageComponent {
+	constructor() {
+		this.maxWidth = input("", ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
+		this.padding = input("", ...ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []);
+		this.centered = input(true, ...ngDevMode ? [{ debugName: "centered" }] : /* istanbul ignore next */ []);
+		this.background = input("", ...ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []);
+		this.fillViewport = input(false, ...ngDevMode ? [{ debugName: "fillViewport" }] : /* istanbul ignore next */ []);
+		this.stickyHeader = input(false, ...ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []);
+		this.stickyFooter = input(false, ...ngDevMode ? [{ debugName: "stickyFooter" }] : /* istanbul ignore next */ []);
+		this.transparent = input(false, ...ngDevMode ? [{ debugName: "transparent" }] : /* istanbul ignore next */ []);
+		this.ownScroll = input(false, ...ngDevMode ? [{ debugName: "ownScroll" }] : /* istanbul ignore next */ []);
+		this.focusKey = input(void 0, ...ngDevMode ? [{ debugName: "focusKey" }] : /* istanbul ignore next */ []);
+		this.anchor = viewChild("anchor", ...ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []);
+		this.doc = inject(DOCUMENT);
+		this.injector = inject(Injector);
+		this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+		this.backgroundCss = computed(() => this.transparent() ? "transparent" : this.background() || null, ...ngDevMode ? [{ debugName: "backgroundCss" }] : /* istanbul ignore next */ []);
+		this.maxWidthCss = computed(() => this.transparent() ? null : this.maxWidth() || null, ...ngDevMode ? [{ debugName: "maxWidthCss" }] : /* istanbul ignore next */ []);
+		this.paddingCss = computed(() => {
+			const p = this.padding();
+			if (!p || p === "responsive") return null;
+			return this.transparent() ? "8px 0 16px" : p;
+		}, ...ngDevMode ? [{ debugName: "paddingCss" }] : /* istanbul ignore next */ []);
+		this.scrollSaved = [];
+		this.bgSaved = [];
+		this.focusInitialised = false;
+		effect(() => {
+			const own = this.ownScroll();
+			const transparent = this.transparent();
+			if (!this.browser) return;
+			untracked(() => {
+				if (own) this.applyScroll();
+				else this.releaseScroll();
+				if (own && transparent) this.applyBackground();
+				else this.releaseBackground();
+			});
+		});
+		effect(() => {
+			const key = this.focusKey();
+			untracked(() => {
+				if (!this.focusInitialised) {
+					this.focusInitialised = true;
+					this.lastFocusKey = key;
+					return;
+				}
+				if (Object.is(key, this.lastFocusKey)) return;
+				this.lastFocusKey = key;
+				afterNextRender(() => this.focusTop(), { injector: this.injector });
+			});
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.releaseScroll();
+			this.releaseBackground();
+		});
+	}
+	focusTop() {
+		const el = this.anchor()?.nativeElement;
+		if (!el) return;
+		const reduce = !!this.doc.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		el.scrollIntoView(reduce ? {
+			block: "start",
+			behavior: "instant"
+		} : { block: "start" });
+		el.focus({ preventScroll: true });
+	}
+	save(list, el, prop, value) {
+		if (!el) return;
+		if (!list.some((e) => e.el === el)) list.push({
+			el,
+			prop,
+			prev: el.style[prop]
+		});
+		el.style[prop] = value;
+	}
+	applyScroll() {
+		const root = this.doc.querySelector("app-root");
+		this.save(this.scrollSaved, this.doc.documentElement, "overflow", "auto");
+		this.save(this.scrollSaved, this.doc.body, "overflow", "visible");
+		this.save(this.scrollSaved, root, "overflow", "visible");
+	}
+	releaseScroll() {
+		for (const e of this.scrollSaved) e.el.style[e.prop] = e.prev;
+		this.scrollSaved = [];
+	}
+	applyBackground() {
+		this.save(this.bgSaved, this.doc.documentElement, "background", "transparent");
+		this.save(this.bgSaved, this.doc.body, "background", "transparent");
+	}
+	releaseBackground() {
+		for (const e of this.bgSaved) e.el.style[e.prop] = e.prev;
+		this.bgSaved = [];
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PageComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.2.0",
+			version: "22.2.2",
+			type: PageComponent,
+			isStandalone: true,
+			selector: "ui-page",
+			inputs: {
+				maxWidth: {
+					classPropertyName: "maxWidth",
+					publicName: "maxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				padding: {
+					classPropertyName: "padding",
+					publicName: "padding",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				centered: {
+					classPropertyName: "centered",
+					publicName: "centered",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				background: {
+					classPropertyName: "background",
+					publicName: "background",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fillViewport: {
+					classPropertyName: "fillViewport",
+					publicName: "fillViewport",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickyHeader: {
+					classPropertyName: "stickyHeader",
+					publicName: "stickyHeader",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickyFooter: {
+					classPropertyName: "stickyFooter",
+					publicName: "stickyFooter",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				transparent: {
+					classPropertyName: "transparent",
+					publicName: "transparent",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ownScroll: {
+					classPropertyName: "ownScroll",
+					publicName: "ownScroll",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				focusKey: {
+					classPropertyName: "focusKey",
+					publicName: "focusKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			viewQueries: [{
+				propertyName: "anchor",
+				first: true,
+				predicate: ["anchor"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `<div class="pg" [class.pg-fill]="fillViewport()" [class.pg-transparent]="transparent()" [style.background]="backgroundCss()">
+      <div class="pg-anchor" tabindex="-1" #anchor></div>
+      <div class="pg-header" [class.pg-sticky-h]="stickyHeader() && !transparent()"><ng-content select="[page-header]" /></div>
+      <main class="pg-main" [class.pg-pad-resp]="padding() === 'responsive'" [class.pg-centered]="centered()"
+        [style.max-width]="maxWidthCss()" [style.padding]="paddingCss()"><ng-content /></main>
+      <div class="pg-footer" [class.pg-sticky-f]="stickyFooter() && !transparent()"><ng-content select="[page-footer]" /></div>
+    </div>`,
+			isInline: true,
+			styles: [":host{display:block}.pg{box-sizing:border-box;display:flex;flex-direction:column}.pg.pg-fill{min-height:100vh;min-height:100dvh}.pg.pg-fill.pg-transparent{min-height:0}.pg.pg-transparent{background:transparent}.pg-anchor{height:0;outline:none}.pg-header:empty,.pg-footer:empty{display:none}.pg-header.pg-sticky-h{position:-webkit-sticky;position:sticky;top:0;z-index:20}.pg-footer.pg-sticky-f{position:-webkit-sticky;position:sticky;bottom:0;z-index:20}.pg-main{box-sizing:border-box;flex:1 0 auto;width:100%}.pg-main.pg-centered{margin-left:auto;margin-right:auto}.pg-main.pg-pad-resp{padding:32px 16px 16px}.pg-transparent .pg-main{max-width:none}.pg-transparent .pg-main.pg-pad-resp{padding:8px 0 16px}@media(min-width:640px){.pg-main.pg-pad-resp{padding:32px 24px 16px}.pg-transparent .pg-main.pg-pad-resp{padding:8px 0 16px}}@media(min-width:1024px){.pg-main.pg-pad-resp{padding:32px 0 16px}.pg-transparent .pg-main.pg-pad-resp{padding:8px 0 16px}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-page",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<div class="pg" [class.pg-fill]="fillViewport()" [class.pg-transparent]="transparent()" [style.background]="backgroundCss()">
+      <div class="pg-anchor" tabindex="-1" #anchor></div>
+      <div class="pg-header" [class.pg-sticky-h]="stickyHeader() && !transparent()"><ng-content select="[page-header]" /></div>
+      <main class="pg-main" [class.pg-pad-resp]="padding() === 'responsive'" [class.pg-centered]="centered()"
+        [style.max-width]="maxWidthCss()" [style.padding]="paddingCss()"><ng-content /></main>
+      <div class="pg-footer" [class.pg-sticky-f]="stickyFooter() && !transparent()"><ng-content select="[page-footer]" /></div>
+    </div>`,
+			styles: [":host{display:block}.pg{box-sizing:border-box;display:flex;flex-direction:column}.pg.pg-fill{min-height:100vh;min-height:100dvh}.pg.pg-fill.pg-transparent{min-height:0}.pg.pg-transparent{background:transparent}.pg-anchor{height:0;outline:none}.pg-header:empty,.pg-footer:empty{display:none}.pg-header.pg-sticky-h{position:-webkit-sticky;position:sticky;top:0;z-index:20}.pg-footer.pg-sticky-f{position:-webkit-sticky;position:sticky;bottom:0;z-index:20}.pg-main{box-sizing:border-box;flex:1 0 auto;width:100%}.pg-main.pg-centered{margin-left:auto;margin-right:auto}.pg-main.pg-pad-resp{padding:32px 16px 16px}.pg-transparent .pg-main{max-width:none}.pg-transparent .pg-main.pg-pad-resp{padding:8px 0 16px}@media(min-width:640px){.pg-main.pg-pad-resp{padding:32px 24px 16px}.pg-transparent .pg-main.pg-pad-resp{padding:8px 0 16px}}@media(min-width:1024px){.pg-main.pg-pad-resp{padding:32px 0 16px}.pg-transparent .pg-main.pg-pad-resp{padding:8px 0 16px}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		maxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxWidth",
+				required: false
+			}]
+		}],
+		padding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "padding",
+				required: false
+			}]
+		}],
+		centered: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "centered",
+				required: false
+			}]
+		}],
+		background: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "background",
+				required: false
+			}]
+		}],
+		fillViewport: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fillViewport",
+				required: false
+			}]
+		}],
+		stickyHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyHeader",
+				required: false
+			}]
+		}],
+		stickyFooter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyFooter",
+				required: false
+			}]
+		}],
+		transparent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "transparent",
+				required: false
+			}]
+		}],
+		ownScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ownScroll",
+				required: false
+			}]
+		}],
+		focusKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "focusKey",
+				required: false
+			}]
+		}],
+		anchor: [{
+			type: i0.ViewChild,
+			args: ["anchor", { isSignal: true }]
+		}]
+	}
+});
+var FadeComponent = class FadeComponent {
+	constructor() {
+		this.key = input(void 0, ...ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []);
+		this.duration = input(300, ...ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.odd = signal(false, ...ngDevMode ? [{ debugName: "odd" }] : /* istanbul ignore next */ []);
+		this.first = true;
+		effect(() => {
+			const k = this.key();
+			untracked(() => {
+				if (this.first) {
+					this.first = false;
+					this.last = k;
+					return;
+				}
+				if (Object.is(k, this.last)) return;
+				this.last = k;
+				this.odd.update((v) => !v);
+			});
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FadeComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: FadeComponent,
+			isStandalone: true,
+			selector: "ui-fade",
+			inputs: {
+				key: {
+					classPropertyName: "key",
+					publicName: "key",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				duration: {
+					classPropertyName: "duration",
+					publicName: "duration",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `<div class="fd" [class.fd-a]="!disabled() && !odd()" [class.fd-b]="!disabled() && odd()" [style.animation-duration.ms]="duration()"><ng-content /></div>`,
+			isInline: true,
+			styles: [":host{display:block}.fd.fd-a{animation:ui-fade-a .3s ease both}.fd.fd-b{animation:ui-fade-b .3s ease both}@keyframes ui-fade-a{0%{opacity:0}to{opacity:1}}@keyframes ui-fade-b{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.fd.fd-a,.fd.fd-b{animation:none}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FadeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-fade",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<div class="fd" [class.fd-a]="!disabled() && !odd()" [class.fd-b]="!disabled() && odd()" [style.animation-duration.ms]="duration()"><ng-content /></div>`,
+			styles: [":host{display:block}.fd.fd-a{animation:ui-fade-a .3s ease both}.fd.fd-b{animation:ui-fade-b .3s ease both}@keyframes ui-fade-a{0%{opacity:0}to{opacity:1}}@keyframes ui-fade-b{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.fd.fd-a,.fd.fd-b{animation:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		key: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "key",
+				required: false
+			}]
+		}],
+		duration: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "duration",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+const TOKEN_PX = {
+	sm: 480,
+	md: 768,
+	lg: 1024
+};
+var ShowComponent = class ShowComponent {
+	constructor() {
+		this.from = input(null, ...ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []);
+		this.below = input(null, ...ngDevMode ? [{ debugName: "below" }] : /* istanbul ignore next */ []);
+		this.win = inject(DOCUMENT).defaultView;
+		this.fromToken = computed(() => {
+			const f = this.from();
+			return typeof f === "string" && f in TOKEN_PX ? f : null;
+		}, ...ngDevMode ? [{ debugName: "fromToken" }] : /* istanbul ignore next */ []);
+		this.belowToken = computed(() => {
+			const b = this.below();
+			return typeof b === "string" && b in TOKEN_PX ? b : null;
+		}, ...ngDevMode ? [{ debugName: "belowToken" }] : /* istanbul ignore next */ []);
+		this.fromMatch = signal(true, ...ngDevMode ? [{ debugName: "fromMatch" }] : /* istanbul ignore next */ []);
+		this.belowMatch = signal(true, ...ngDevMode ? [{ debugName: "belowMatch" }] : /* istanbul ignore next */ []);
+		this.watch(() => {
+			const f = this.from();
+			return typeof f === "number" ? `(min-width: ${f}px)` : null;
+		}, this.fromMatch);
+		this.watch(() => {
+			const b = this.below();
+			return typeof b === "number" ? `(max-width: ${b - .02}px)` : null;
+		}, this.belowMatch);
+	}
+	watch(query, target) {
+		effect((onCleanup) => {
+			const q = query();
+			if (q === null || !this.win?.matchMedia) {
+				target.set(true);
+				return;
+			}
+			const mql = this.win.matchMedia(q);
+			target.set(mql.matches);
+			const handler = (e) => target.set(e.matches);
+			mql.addEventListener("change", handler);
+			onCleanup(() => mql.removeEventListener("change", handler));
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ShowComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: ShowComponent,
+			isStandalone: true,
+			selector: "ui-show",
+			inputs: {
+				from: {
+					classPropertyName: "from",
+					publicName: "from",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				below: {
+					classPropertyName: "below",
+					publicName: "below",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `<div class="sh" [class.sh-from-sm]="fromToken() === 'sm'" [class.sh-from-md]="fromToken() === 'md'" [class.sh-from-lg]="fromToken() === 'lg'"
+      [class.sh-below-sm]="belowToken() === 'sm'" [class.sh-below-md]="belowToken() === 'md'" [class.sh-below-lg]="belowToken() === 'lg'"
+      [class.sh-off]="!fromMatch() || !belowMatch()"><ng-content /></div>`,
+			isInline: true,
+			styles: [":host{display:block}.sh{display:block}.sh.sh-off{display:none}@media(max-width:479.98px){.sh.sh-from-sm{display:none}}@media(max-width:767.98px){.sh.sh-from-md{display:none}}@media(max-width:1023.98px){.sh.sh-from-lg{display:none}}@media(min-width:480px){.sh.sh-below-sm{display:none}}@media(min-width:768px){.sh.sh-below-md{display:none}}@media(min-width:1024px){.sh.sh-below-lg{display:none}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ShowComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-show",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<div class="sh" [class.sh-from-sm]="fromToken() === 'sm'" [class.sh-from-md]="fromToken() === 'md'" [class.sh-from-lg]="fromToken() === 'lg'"
+      [class.sh-below-sm]="belowToken() === 'sm'" [class.sh-below-md]="belowToken() === 'md'" [class.sh-below-lg]="belowToken() === 'lg'"
+      [class.sh-off]="!fromMatch() || !belowMatch()"><ng-content /></div>`,
+			styles: [":host{display:block}.sh{display:block}.sh.sh-off{display:none}@media(max-width:479.98px){.sh.sh-from-sm{display:none}}@media(max-width:767.98px){.sh.sh-from-md{display:none}}@media(max-width:1023.98px){.sh.sh-from-lg{display:none}}@media(min-width:480px){.sh.sh-below-sm{display:none}}@media(min-width:768px){.sh.sh-below-md{display:none}}@media(min-width:1024px){.sh.sh-below-lg{display:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		from: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "from",
+				required: false
+			}]
+		}],
+		below: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "below",
+				required: false
+			}]
+		}]
+	}
+});
+function formatCurrency(value, options = {}) {
+	const { currency = "USD", locale = "en-US", grouping = true, decimals = 2 } = options;
+	let n = typeof value === "string" ? parseFloat(value) : value ?? 0;
+	if (typeof n !== "number" || !Number.isFinite(n)) n = 0;
+	const formatter = new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency,
+		useGrouping: grouping,
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	});
+	n = Number(n.toFixed(Math.max(0, Math.min(100, decimals)))) + 0;
+	if (n === 0) n = 0;
+	return formatter.format(n);
+}
+const clean = (v) => (v ?? "").trim();
+function formatAddress(parts, options = {}) {
+	const separator = options.separator ?? ", ";
+	const street = clean(parts.street), apt = clean(parts.apt), city = clean(parts.city), state = clean(parts.state), zip = clean(parts.zip);
+	if (options.style === "usa") return [street ? street + (apt ? separator + "Apt " + apt : "") : "", ([city, state].filter(Boolean).join(separator) + (zip ? " " + zip : "")).trim()].filter(Boolean).join(separator);
+	return [
+		street,
+		apt,
+		city,
+		state,
+		zip
+	].filter(Boolean).join(separator);
+}
+function downloadBlob(blob, fileName) {
+	if (typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return;
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = fileName;
+	link.style.display = "none";
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+var ImageGalleryDialogComponent = class ImageGalleryDialogComponent {
+	constructor() {
+		this.open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.images = input([], ...ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []);
+		this.index = model(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.dialogTestId = input("", ...ngDevMode ? [{ debugName: "dialogTestId" }] : /* istanbul ignore next */ []);
+		this.closeLabel = input("Close", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+		this.closeTestId = input("", ...ngDevMode ? [{ debugName: "closeTestId" }] : /* istanbul ignore next */ []);
+		this.maxWidth = input("56rem", ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
+		this.galleryLabel = input("Image gallery", ...ngDevMode ? [{ debugName: "galleryLabel" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			if (this.open()) this.index.set(0);
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ImageGalleryDialogComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ImageGalleryDialogComponent,
+			isStandalone: true,
+			selector: "ui-image-gallery-dialog",
+			inputs: {
+				open: {
+					classPropertyName: "open",
+					publicName: "open",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				images: {
+					classPropertyName: "images",
+					publicName: "images",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				index: {
+					classPropertyName: "index",
+					publicName: "index",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dialogTestId: {
+					classPropertyName: "dialogTestId",
+					publicName: "dialogTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeLabel: {
+					classPropertyName: "closeLabel",
+					publicName: "closeLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeTestId: {
+					classPropertyName: "closeTestId",
+					publicName: "closeTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxWidth: {
+					classPropertyName: "maxWidth",
+					publicName: "maxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				galleryLabel: {
+					classPropertyName: "galleryLabel",
+					publicName: "galleryLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				open: "openChange",
+				index: "indexChange"
+			},
+			ngImport: i0,
+			template: `
+    <ui-modal [open]="open()" [title]="title()" [maxWidth]="maxWidth()" [dialogTestId]="dialogTestId()" [hideClose]="true" (close)="open.set(false)">
+      @if (open()) {
+        <ui-image-gallery [images]="images()" [(index)]="index" [ariaLabel]="galleryLabel()" [autofocus]="true" />
+      }
+      <ui-button modal-footer-right variant="secondary" size="sm" [attr.data-testid]="closeTestId() || null" (click)="open.set(false)">{{ closeLabel() }}</ui-button>
+    </ui-modal>
+  `,
+			isInline: true,
+			dependencies: [
+				{
+					kind: "component",
+					type: ModalComponent,
+					selector: "ui-modal",
+					inputs: [
+						"open",
+						"title",
+						"description",
+						"maxWidth",
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable"
+					],
+					outputs: ["close"]
+				},
+				{
+					kind: "component",
+					type: ImageGalleryComponent,
+					selector: "ui-image-gallery",
+					inputs: [
+						"images",
+						"index",
+						"loop",
+						"showDots",
+						"showCounter",
+						"aspectRatio",
+						"maxHeight",
+						"fit",
+						"ariaLabel",
+						"autofocus"
+					],
+					outputs: ["indexChange"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ImageGalleryDialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-image-gallery-dialog",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ModalComponent,
+				ImageGalleryComponent,
+				ButtonComponent
+			],
+			template: `
+    <ui-modal [open]="open()" [title]="title()" [maxWidth]="maxWidth()" [dialogTestId]="dialogTestId()" [hideClose]="true" (close)="open.set(false)">
+      @if (open()) {
+        <ui-image-gallery [images]="images()" [(index)]="index" [ariaLabel]="galleryLabel()" [autofocus]="true" />
+      }
+      <ui-button modal-footer-right variant="secondary" size="sm" [attr.data-testid]="closeTestId() || null" (click)="open.set(false)">{{ closeLabel() }}</ui-button>
+    </ui-modal>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		images: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "images",
+				required: false
+			}]
+		}],
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["indexChange"]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		dialogTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dialogTestId",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		closeTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeTestId",
+				required: false
+			}]
+		}],
+		maxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxWidth",
+				required: false
+			}]
+		}],
+		galleryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "galleryLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, 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, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, 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, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map