@forgeroute/ui 0.4.9 → 0.4.10

package/fesm2022/forgeroute-ui.mjs

@@ -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)"
 			} },
@@ -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)"
 			},
@@ -3275,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 */ []);
@@ -3301,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 */ []);
@@ -3312,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({
@@ -3359,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",
@@ -3380,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",
@@ -3479,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()) {
@@ -3498,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()"
@@ -3546,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, #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}}.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,
@@ -3597,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()) {
@@ -3616,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()"
@@ -3663,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, #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}}.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,
@@ -3699,6 +3766,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: false
+			}]
+		}],
 		href: [{
 			type: i0.Input,
 			args: [{
@@ -3723,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: [{
@@ -3845,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();
@@ -3862,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 */ []);
@@ -3916,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);
@@ -3969,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}`,
@@ -4158,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",
@@ -4211,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()"
@@ -4285,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()"
@@ -4469,6 +4570,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		integer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "integer",
+				required: false
+			}]
+		}],
 		showErrors: [{
 			type: i0.Input,
 			args: [{
@@ -4927,9 +5036,12 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -4969,6 +5081,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"step",
 						"valueType",
 						"formatter",
+						"integer",
 						"showErrors",
 						"disabled"
 					],
@@ -7576,9 +7689,12 @@ var ImportExportComponent = class ImportExportComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -8073,9 +8189,12 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -8424,9 +8543,12 @@ var ErrorStateComponent = class ErrorStateComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -10764,9 +10886,12 @@ var DataTableComponent = class DataTableComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -11863,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;
@@ -13161,8 +13287,31 @@ var StepperComponent = class StepperComponent {
 		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());
@@ -13188,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;
@@ -13288,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: {
@@ -13300,7 +13487,12 @@ 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'"
@@ -13333,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">
@@ -13347,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]: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"],
+			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,
@@ -13357,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
 		});
@@ -13372,14 +13590,19 @@ 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'"
@@ -13412,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">
@@ -13425,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]: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"]
+			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,
@@ -13520,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"]
@@ -13985,9 +14252,12 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -15708,6 +15978,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"step",
 						"valueType",
 						"formatter",
+						"integer",
 						"showErrors",
 						"disabled"
 					],
@@ -15744,9 +16015,12 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -17844,6 +18118,7 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 						"step",
 						"valueType",
 						"formatter",
+						"integer",
 						"showErrors",
 						"disabled"
 					],
@@ -22468,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();
@@ -23722,9 +24022,12 @@ var ListComponent = class ListComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -25027,9 +25330,12 @@ var QrCodeComponent = class QrCodeComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -25335,9 +25641,12 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -27870,9 +28179,12 @@ var ImageGalleryComponent = class ImageGalleryComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -28756,9 +29068,12 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 						"routerLink",
 						"queryParams",
 						"fragment",
+						"state",
 						"href",
 						"target",
 						"rel",
+						"shortLabel",
+						"shortBelow",
 						"color",
 						"active",
 						"size",
@@ -31238,9 +31553,12 @@ var SignaturePadComponent = class SignaturePadComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -31734,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 */ []);
@@ -31743,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 */ []);
@@ -31754,6 +32074,10 @@ var DetailCardComponent = class DetailCardComponent {
 		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();
@@ -31762,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());
 	}
@@ -31837,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",
@@ -31906,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'"
@@ -31964,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%;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{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"],
+			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,
@@ -31974,9 +32349,12 @@ var DetailCardComponent = class DetailCardComponent {
 					"routerLink",
 					"queryParams",
 					"fragment",
+					"state",
 					"href",
 					"target",
 					"rel",
+					"shortLabel",
+					"shortBelow",
 					"color",
 					"active",
 					"size",
@@ -32011,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'"
@@ -32056,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%;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{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"]
+			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: {
@@ -32116,6 +32498,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		headerBackground: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headerBackground",
+				required: false
+			}]
+		}],
 		textColor: [{
 			type: i0.Input,
 			args: [{
@@ -32202,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
+			}]
 		}]
 	}
 });
@@ -33445,6 +33870,9 @@ var StackComponent = class StackComponent {
 		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 */ []);
@@ -33515,11 +33943,32 @@ var StackComponent = class StackComponent {
 					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'" [style.min-height]="minHeight() || null" [style.width]="width() || null"><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
@@ -33538,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'" [style.min-height]="minHeight() || null" [style.width]="width() || null"><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"]
 		}]
 	}],
@@ -33598,6 +34047,30 @@ i0.ɵɵngDeclareClassMetadata({
 				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
+			}]
 		}]
 	}
 });
@@ -35081,6 +35554,881 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-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, 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 };
+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