@forgeroute/ui 0.4.4 → 0.4.6

package/fesm2022/forgeroute-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, PLATFORM_ID, Renderer2, TemplateRef, afterNextRender, computed, contentChild, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, PLATFORM_ID, Renderer2, TemplateRef, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
 import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { catchError, debounceTime, distinctUntilChanged, skip, switchMap } from "rxjs/operators";
@@ -2108,6 +2108,9 @@ var ModalComponent = class ModalComponent {
 		this.description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
 		this.maxWidth = input("460px", ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
 		this.bodyOverflow = input("auto", ...ngDevMode ? [{ debugName: "bodyOverflow" }] : /* istanbul ignore next */ []);
+		this.dialogTestId = input("", ...ngDevMode ? [{ debugName: "dialogTestId" }] : /* istanbul ignore next */ []);
+		this.hideClose = input(false, ...ngDevMode ? [{ debugName: "hideClose" }] : /* istanbul ignore next */ []);
+		this.closable = input(true, ...ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []);
 		this.close = output();
 		this.titleId = `m-title-${Math.random().toString(36).slice(2, 8)}`;
 		this.el = inject(ElementRef);
@@ -2141,7 +2144,7 @@ var ModalComponent = class ModalComponent {
 		if (!this.open() || !this._overlays.isTop(this)) return;
 		if (event.key === "Escape") {
 			event.preventDefault();
-			this.close.emit();
+			if (this.closable()) this.close.emit();
 			return;
 		}
 		if (event.key === "Tab") {
@@ -2233,6 +2236,27 @@ var ModalComponent = class ModalComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				dialogTestId: {
+					classPropertyName: "dialogTestId",
+					publicName: "dialogTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hideClose: {
+					classPropertyName: "hideClose",
+					publicName: "hideClose",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closable: {
+					classPropertyName: "closable",
+					publicName: "closable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { close: "close" },
@@ -2240,8 +2264,8 @@ var ModalComponent = class ModalComponent {
 			ngImport: i0,
 			template: `
     @if (open()) {
-      <div class="m-backdrop" (click)="close.emit()"></div>
-      <div class="m-modal" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [style.max-width]="maxWidth()">
+      <div class="m-backdrop" (click)="closable() && close.emit()"></div>
+      <div class="m-modal" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.data-testid]="dialogTestId() || null" [style.max-width]="maxWidth()">
         <div class="m-header">
           <div class="m-header-text">
             <h3 class="m-title" [id]="titleId">{{ title() }}</h3>
@@ -2249,24 +2273,27 @@ var ModalComponent = class ModalComponent {
               <p class="m-description">{{ description() }}</p>
             }
           </div>
-          <button class="m-close" type="button" aria-label="Close" (click)="close.emit()">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          </button>
+          @if (!hideClose() && closable()) {
+            <button class="m-close" type="button" aria-label="Close" (click)="close.emit()">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          }
         </div>
         <div class="m-body" [style.overflow-y]="bodyOverflow()">
           <ng-content />
         </div>
         <div class="m-footer">
           <div class="m-footer-left"><ng-content select="[modal-footer-left]" /></div>
+          <div class="m-footer-center"><ng-content select="[modal-footer-center]" /></div>
           <div class="m-footer-right"><ng-content select="[modal-footer-right]" /></div>
         </div>
       </div>
     }
   `,
 			isInline: true,
-			styles: [".m-backdrop{position:fixed;inset:0;background:#02081773;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;animation:m-fade .18s ease}.m-modal:focus{outline:none}.m-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.07);z-index:201;width:calc(100% - 32px);box-shadow:0 4px 6px #0000000a,0 16px 32px #0000001f,0 48px 96px #0000001a;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;animation:m-scale .22s cubic-bezier(.16,1,.3,1)}.m-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;border-radius:16px 16px 0 0;flex-shrink:0}.m-header-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.m-title{font-size:1.125rem;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.02em;line-height:1.3}.m-description{font-size:.8125rem;color:#64748b;margin:0;line-height:1.4}.m-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:none;background:none;cursor:pointer;color:#94a3b8;flex-shrink:0;margin-left:12px;transition:background .13s,color .13s}.m-close:hover{background:#f1f5f9;color:#1e293b}.m-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.m-body{padding:20px 24px;overflow-y:auto;flex:1;min-height:0;font-size:.9rem;color:#475569;line-height:1.65}.m-footer{padding:14px 24px 18px;background:#f8fafc;border-top:1px solid #e2e8f0;border-radius:0 0 16px 16px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.m-footer:not(:has(*)){display:none}.m-footer-left{display:flex;align-items:center;gap:8px}.m-footer-right{display:flex;align-items:center;gap:8px;margin-left:auto}@media(max-width:480px){.m-modal{top:auto;bottom:var(--ui-kb, 0px);left:0;right:0;transform:none;width:100vw;max-width:none!important;max-height:min(85dvh,var(--ui-vvh, 100dvh));border-radius:20px 20px 0 0;animation:m-up .24s cubic-bezier(.16,1,.3,1)}.m-footer{border-radius:0;flex-direction:column-reverse;align-items:stretch;padding-bottom:max(18px,env(safe-area-inset-bottom))}}@media(pointer:coarse),(max-width:480px){.m-close{position:relative}.m-close:after{content:\"\";position:absolute;inset:-7px}}@keyframes m-fade{0%{opacity:0}to{opacity:1}}@keyframes m-scale{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes m-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"],
+			styles: [".m-backdrop{position:fixed;inset:0;background:#02081773;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;animation:m-fade .18s ease}.m-modal:focus{outline:none}.m-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.07);z-index:201;width:calc(100% - 32px);box-shadow:0 4px 6px #0000000a,0 16px 32px #0000001f,0 48px 96px #0000001a;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;animation:m-scale .22s cubic-bezier(.16,1,.3,1)}.m-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;border-radius:16px 16px 0 0;flex-shrink:0}.m-header-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.m-title{font-size:1.125rem;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.02em;line-height:1.3}.m-description{font-size:.8125rem;color:#64748b;margin:0;line-height:1.4}.m-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:none;background:none;cursor:pointer;color:#94a3b8;flex-shrink:0;margin-left:12px;transition:background .13s,color .13s}.m-close:hover{background:#f1f5f9;color:#1e293b}.m-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.m-body{padding:20px 24px;overflow-y:auto;flex:1;min-height:0;font-size:.9rem;color:#475569;line-height:1.65}.m-footer{padding:14px 24px 18px;background:#f8fafc;border-top:1px solid #e2e8f0;border-radius:0 0 16px 16px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.m-footer:not(:has(*)){display:none}.m-footer-left{display:flex;align-items:center;gap:8px}.m-footer-right{display:flex;align-items:center;gap:8px;margin-left:auto}.m-footer-center{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px}.m-footer-center:empty{display:none}@media(max-width:480px){.m-modal{top:auto;bottom:var(--ui-kb, 0px);left:0;right:0;transform:none;width:100vw;max-width:none!important;max-height:min(85dvh,var(--ui-vvh, 100dvh));border-radius:20px 20px 0 0;animation:m-up .24s cubic-bezier(.16,1,.3,1)}.m-footer{border-radius:0;flex-direction:column-reverse;align-items:stretch;padding-bottom:max(18px,env(safe-area-inset-bottom))}}@media(pointer:coarse),(max-width:480px){.m-close{position:relative}.m-close:after{content:\"\";position:absolute;inset:-7px}}@keyframes m-fade{0%{opacity:0}to{opacity:1}}@keyframes m-scale{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes m-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -2285,8 +2312,8 @@ i0.ɵɵngDeclareClassMetadata({
 			host: { "(document:keydown)": "onKeydown($event)" },
 			template: `
     @if (open()) {
-      <div class="m-backdrop" (click)="close.emit()"></div>
-      <div class="m-modal" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [style.max-width]="maxWidth()">
+      <div class="m-backdrop" (click)="closable() && close.emit()"></div>
+      <div class="m-modal" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.data-testid]="dialogTestId() || null" [style.max-width]="maxWidth()">
         <div class="m-header">
           <div class="m-header-text">
             <h3 class="m-title" [id]="titleId">{{ title() }}</h3>
@@ -2294,23 +2321,26 @@ i0.ɵɵngDeclareClassMetadata({
               <p class="m-description">{{ description() }}</p>
             }
           </div>
-          <button class="m-close" type="button" aria-label="Close" (click)="close.emit()">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          </button>
+          @if (!hideClose() && closable()) {
+            <button class="m-close" type="button" aria-label="Close" (click)="close.emit()">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          }
         </div>
         <div class="m-body" [style.overflow-y]="bodyOverflow()">
           <ng-content />
         </div>
         <div class="m-footer">
           <div class="m-footer-left"><ng-content select="[modal-footer-left]" /></div>
+          <div class="m-footer-center"><ng-content select="[modal-footer-center]" /></div>
           <div class="m-footer-right"><ng-content select="[modal-footer-right]" /></div>
         </div>
       </div>
     }
   `,
-			styles: [".m-backdrop{position:fixed;inset:0;background:#02081773;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;animation:m-fade .18s ease}.m-modal:focus{outline:none}.m-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.07);z-index:201;width:calc(100% - 32px);box-shadow:0 4px 6px #0000000a,0 16px 32px #0000001f,0 48px 96px #0000001a;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;animation:m-scale .22s cubic-bezier(.16,1,.3,1)}.m-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;border-radius:16px 16px 0 0;flex-shrink:0}.m-header-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.m-title{font-size:1.125rem;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.02em;line-height:1.3}.m-description{font-size:.8125rem;color:#64748b;margin:0;line-height:1.4}.m-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:none;background:none;cursor:pointer;color:#94a3b8;flex-shrink:0;margin-left:12px;transition:background .13s,color .13s}.m-close:hover{background:#f1f5f9;color:#1e293b}.m-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.m-body{padding:20px 24px;overflow-y:auto;flex:1;min-height:0;font-size:.9rem;color:#475569;line-height:1.65}.m-footer{padding:14px 24px 18px;background:#f8fafc;border-top:1px solid #e2e8f0;border-radius:0 0 16px 16px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.m-footer:not(:has(*)){display:none}.m-footer-left{display:flex;align-items:center;gap:8px}.m-footer-right{display:flex;align-items:center;gap:8px;margin-left:auto}@media(max-width:480px){.m-modal{top:auto;bottom:var(--ui-kb, 0px);left:0;right:0;transform:none;width:100vw;max-width:none!important;max-height:min(85dvh,var(--ui-vvh, 100dvh));border-radius:20px 20px 0 0;animation:m-up .24s cubic-bezier(.16,1,.3,1)}.m-footer{border-radius:0;flex-direction:column-reverse;align-items:stretch;padding-bottom:max(18px,env(safe-area-inset-bottom))}}@media(pointer:coarse),(max-width:480px){.m-close{position:relative}.m-close:after{content:\"\";position:absolute;inset:-7px}}@keyframes m-fade{0%{opacity:0}to{opacity:1}}@keyframes m-scale{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes m-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"]
+			styles: [".m-backdrop{position:fixed;inset:0;background:#02081773;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;animation:m-fade .18s ease}.m-modal:focus{outline:none}.m-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.07);z-index:201;width:calc(100% - 32px);box-shadow:0 4px 6px #0000000a,0 16px 32px #0000001f,0 48px 96px #0000001a;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;animation:m-scale .22s cubic-bezier(.16,1,.3,1)}.m-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;border-radius:16px 16px 0 0;flex-shrink:0}.m-header-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.m-title{font-size:1.125rem;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.02em;line-height:1.3}.m-description{font-size:.8125rem;color:#64748b;margin:0;line-height:1.4}.m-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:none;background:none;cursor:pointer;color:#94a3b8;flex-shrink:0;margin-left:12px;transition:background .13s,color .13s}.m-close:hover{background:#f1f5f9;color:#1e293b}.m-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.m-body{padding:20px 24px;overflow-y:auto;flex:1;min-height:0;font-size:.9rem;color:#475569;line-height:1.65}.m-footer{padding:14px 24px 18px;background:#f8fafc;border-top:1px solid #e2e8f0;border-radius:0 0 16px 16px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.m-footer:not(:has(*)){display:none}.m-footer-left{display:flex;align-items:center;gap:8px}.m-footer-right{display:flex;align-items:center;gap:8px;margin-left:auto}.m-footer-center{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px}.m-footer-center:empty{display:none}@media(max-width:480px){.m-modal{top:auto;bottom:var(--ui-kb, 0px);left:0;right:0;transform:none;width:100vw;max-width:none!important;max-height:min(85dvh,var(--ui-vvh, 100dvh));border-radius:20px 20px 0 0;animation:m-up .24s cubic-bezier(.16,1,.3,1)}.m-footer{border-radius:0;flex-direction:column-reverse;align-items:stretch;padding-bottom:max(18px,env(safe-area-inset-bottom))}}@media(pointer:coarse),(max-width:480px){.m-close{position:relative}.m-close:after{content:\"\";position:absolute;inset:-7px}}@keyframes m-fade{0%{opacity:0}to{opacity:1}}@keyframes m-scale{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes m-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -2355,12 +2385,71 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		dialogTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dialogTestId",
+				required: false
+			}]
+		}],
+		hideClose: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideClose",
+				required: false
+			}]
+		}],
+		closable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closable",
+				required: false
+			}]
+		}],
 		close: [{
 			type: i0.Output,
 			args: ["close"]
 		}]
 	}
 });
+var CheckboxTrailingDirective = class CheckboxTrailingDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CheckboxTrailingDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: CheckboxTrailingDirective,
+			isStandalone: true,
+			selector: "[checkbox-trailing]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CheckboxTrailingDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[checkbox-trailing]",
+			standalone: true
+		}]
+	}]
+});
 var UiFieldValidity = class {};
 function issueToErrors(issue) {
 	return issue ? { [issue.key]: issue.value ?? true } : null;
@@ -2467,6 +2556,17 @@ var CheckboxComponent = class CheckboxComponent {
 		this.checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
 		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 		this.legend = input("", ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
+		this._legend = computed(() => this.legend() || (this._host.nativeElement.tagName === "UI-CHECKBOX-GROUP" ? this.label() : ""), ...ngDevMode ? [{ debugName: "_legend" }] : /* istanbul ignore next */ []);
+		this.orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+		this.values = model(void 0, ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+		this.description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+		this._trailingContent = contentChild(CheckboxTrailingDirective, ...ngDevMode ? [{ debugName: "_trailingContent" }] : /* istanbul ignore next */ []);
+		this._trailing = computed(() => !this.groupMode() && !!this._trailingContent(), ...ngDevMode ? [{ debugName: "_trailing" }] : /* istanbul ignore next */ []);
+		this._host = inject(ElementRef);
+		this._singleDescribedBy = computed(() => {
+			const ids = [this.description() ? this._descId + "-d" : "", this._activeError() || this.hint() ? this._descId : ""].filter(Boolean);
+			return ids.length ? ids.join(" ") : null;
+		}, ...ngDevMode ? [{ debugName: "_singleDescribedBy" }] : /* istanbul ignore next */ []);
 		this.indent = input(false, ...ngDevMode ? [{ debugName: "indent" }] : /* istanbul ignore next */ []);
 		this.groupMode = computed(() => this.options().length > 0, ...ngDevMode ? [{ debugName: "groupMode" }] : /* istanbul ignore next */ []);
 		this._selected = signal([], ...ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []);
@@ -2494,6 +2594,32 @@ var CheckboxComponent = class CheckboxComponent {
 		effect(() => {
 			this.invalidChange.emit(this.invalid());
 		});
+		effect(() => {
+			const v = this.values();
+			if (!v) return;
+			const next = this.inOptionOrder(v);
+			const cur = this._selected();
+			if (next.length !== cur.length || next.some((x, i) => x !== cur[i])) this._selected.set(next);
+		});
+	}
+	reset(value = false) {
+		if (this.groupMode()) {
+			const next = this.inOptionOrder(Array.isArray(value) ? value : []);
+			this._selected.set(next);
+			if (this.values() !== void 0) this.values.set(next);
+			this._syncNative((opt) => next.includes(opt));
+			this.onChange(next);
+		} else {
+			const on = Array.isArray(value) ? value.length > 0 : !!value;
+			this.checked.set(on);
+			this._syncNative(() => on);
+			this.onChange(on);
+		}
+	}
+	_syncNative(isOn) {
+		this._host.nativeElement.querySelectorAll("input[type=\"checkbox\"]").forEach((el) => {
+			el.checked = this.groupMode() ? isOn(el.getAttribute("value") ?? "") : isOn("");
+		});
 	}
 	ngOnChanges() {
 		this._onValidatorChange();
@@ -2511,7 +2637,7 @@ var CheckboxComponent = class CheckboxComponent {
 		return rm ? {
 			key: "required",
 			message: rm
-		} : requiredIssue(this.groupMode() ? this.legend() : this.label());
+		} : requiredIssue(this.groupMode() ? this._legend() : this.label());
 	}
 	writeValue(val) {
 		if (Array.isArray(val)) this._selected.set(this.inOptionOrder(val));
@@ -2544,6 +2670,7 @@ var CheckboxComponent = class CheckboxComponent {
 		const on = event.target.checked;
 		const next = this.inOptionOrder(on ? [...this._selected(), value] : this._selected().filter((v) => v !== value));
 		this._selected.set(next);
+		if (this.values() !== void 0) this.values.set(next);
 		this.onChange(next);
 		this.onTouched();
 		this._reveal.touched.set(true);
@@ -2564,7 +2691,7 @@ var CheckboxComponent = class CheckboxComponent {
 			version: "22.2.2",
 			type: CheckboxComponent,
 			isStandalone: true,
-			selector: "ui-checkbox",
+			selector: "ui-checkbox, ui-checkbox-group",
 			inputs: {
 				label: {
 					classPropertyName: "label",
@@ -2608,6 +2735,27 @@ var CheckboxComponent = class CheckboxComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				orientation: {
+					classPropertyName: "orientation",
+					publicName: "orientation",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				values: {
+					classPropertyName: "values",
+					publicName: "values",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				description: {
+					classPropertyName: "description",
+					publicName: "description",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				indent: {
 					classPropertyName: "indent",
 					publicName: "indent",
@@ -2660,6 +2808,7 @@ var CheckboxComponent = class CheckboxComponent {
 			},
 			outputs: {
 				checked: "checkedChange",
+				values: "valuesChange",
 				invalidChange: "invalidChange"
 			},
 			providers: [
@@ -2678,6 +2827,13 @@ var CheckboxComponent = class CheckboxComponent {
 					useExisting: forwardRef(() => CheckboxComponent)
 				}
 			],
+			queries: [{
+				propertyName: "_trailingContent",
+				first: true,
+				predicate: CheckboxTrailingDirective,
+				descendants: true,
+				isSignal: true
+			}],
 			usesOnChanges: true,
 			ngImport: i0,
 			template: `
@@ -2685,10 +2841,10 @@ var CheckboxComponent = class CheckboxComponent {
     <fieldset class="cb-group" [class.cb-indent]="indent()" [class.cb-error]="_activeError()" [disabled]="disabled()"
       [attr.aria-required]="required() ? 'true' : null" [attr.aria-invalid]="_activeError() ? 'true' : null"
       [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null">
-      @if (legend()) {
-        <legend class="cb-legend">{{ legend() }}@if (required()) { <span class="cb-required" aria-hidden="true">*</span> }</legend>
+      @if (_legend()) {
+        <legend class="cb-legend">{{ _legend() }}@if (required()) { <span class="cb-required" aria-hidden="true">*</span> }</legend>
       }
-      <div class="cb-options">
+      <div class="cb-options" [class.cb-horizontal]="orientation() === 'horizontal'">
         @for (opt of options(); track opt.value; let i = $index) {
           <div class="cb-option">
             <label class="cb-wrap" [class.cb-disabled]="disabled() || opt.disabled">
@@ -2703,6 +2859,8 @@ var CheckboxComponent = class CheckboxComponent {
                 type="checkbox"
                 class="cb-hidden"
                 [checked]="isSelected(opt.value)"
+                [attr.value]="opt.value"
+                [attr.data-testid]="opt.testId || null"
                 [disabled]="disabled() || !!opt.disabled"
                 [attr.aria-describedby]="opt.description ? _descId + '-' + i : null"
                 (change)="onToggleOption(opt.value, $event)"
@@ -2722,7 +2880,8 @@ var CheckboxComponent = class CheckboxComponent {
       }
     </fieldset>
     } @else {
-    <div class="cb-field" [class.cb-indent]="indent()" [class.cb-error]="_activeError()">
+    <div class="cb-field" [class.cb-indent]="indent()" [class.cb-error]="_activeError()" [class.cb-has-trailing]="_trailing()">
+    <ng-template #labelRow>
     <label class="cb-wrap" [class.cb-disabled]="disabled()">
       <span class="cb-box" [class.cb-checked]="checked()" [class.cb-indeterminate]="indeterminate() && !checked()" [class.cb-disabled]="disabled()">
         @if (checked()) {
@@ -2744,7 +2903,7 @@ var CheckboxComponent = class CheckboxComponent {
         [attr.aria-checked]="indeterminate() && !checked() ? 'mixed' : null"
         [attr.aria-required]="required() ? 'true' : null"
         [attr.aria-invalid]="_activeError() ? 'true' : null"
-        [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
+        [attr.aria-describedby]="_singleDescribedBy()"
         (change)="onToggle($event)"
       />
       @if (label()) {
@@ -2752,6 +2911,18 @@ var CheckboxComponent = class CheckboxComponent {
       }
       <ng-content />
     </label>
+    </ng-template>
+    @if (_trailing()) {
+      <div class="cb-row">
+        <ng-container [ngTemplateOutlet]="labelRow" />
+        <span class="cb-trailing"><ng-content select="[checkbox-trailing]" /></span>
+      </div>
+    } @else {
+      <ng-container [ngTemplateOutlet]="labelRow" />
+    }
+    @if (description()) {
+      <p class="cb-desc" [id]="_descId + '-d'">{{ description() }}</p>
+    }
     @if (_activeError()) {
       <p class="cb-desc cb-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
     } @else if (hint()) {
@@ -2761,7 +2932,17 @@ var CheckboxComponent = class CheckboxComponent {
     }
   `,
 			isInline: true,
-			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"],
+			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-options.cb-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.cb-field.cb-has-trailing{display:flex}.cb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.cb-trailing{display:inline-flex;align-items:center;flex-shrink:0}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -2774,8 +2955,9 @@ i0.ɵɵngDeclareClassMetadata({
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-checkbox",
+			selector: "ui-checkbox, ui-checkbox-group",
 			standalone: true,
+			imports: [NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [
 				{
@@ -2798,10 +2980,10 @@ i0.ɵɵngDeclareClassMetadata({
     <fieldset class="cb-group" [class.cb-indent]="indent()" [class.cb-error]="_activeError()" [disabled]="disabled()"
       [attr.aria-required]="required() ? 'true' : null" [attr.aria-invalid]="_activeError() ? 'true' : null"
       [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null">
-      @if (legend()) {
-        <legend class="cb-legend">{{ legend() }}@if (required()) { <span class="cb-required" aria-hidden="true">*</span> }</legend>
+      @if (_legend()) {
+        <legend class="cb-legend">{{ _legend() }}@if (required()) { <span class="cb-required" aria-hidden="true">*</span> }</legend>
       }
-      <div class="cb-options">
+      <div class="cb-options" [class.cb-horizontal]="orientation() === 'horizontal'">
         @for (opt of options(); track opt.value; let i = $index) {
           <div class="cb-option">
             <label class="cb-wrap" [class.cb-disabled]="disabled() || opt.disabled">
@@ -2816,6 +2998,8 @@ i0.ɵɵngDeclareClassMetadata({
                 type="checkbox"
                 class="cb-hidden"
                 [checked]="isSelected(opt.value)"
+                [attr.value]="opt.value"
+                [attr.data-testid]="opt.testId || null"
                 [disabled]="disabled() || !!opt.disabled"
                 [attr.aria-describedby]="opt.description ? _descId + '-' + i : null"
                 (change)="onToggleOption(opt.value, $event)"
@@ -2835,7 +3019,8 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </fieldset>
     } @else {
-    <div class="cb-field" [class.cb-indent]="indent()" [class.cb-error]="_activeError()">
+    <div class="cb-field" [class.cb-indent]="indent()" [class.cb-error]="_activeError()" [class.cb-has-trailing]="_trailing()">
+    <ng-template #labelRow>
     <label class="cb-wrap" [class.cb-disabled]="disabled()">
       <span class="cb-box" [class.cb-checked]="checked()" [class.cb-indeterminate]="indeterminate() && !checked()" [class.cb-disabled]="disabled()">
         @if (checked()) {
@@ -2857,7 +3042,7 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.aria-checked]="indeterminate() && !checked() ? 'mixed' : null"
         [attr.aria-required]="required() ? 'true' : null"
         [attr.aria-invalid]="_activeError() ? 'true' : null"
-        [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
+        [attr.aria-describedby]="_singleDescribedBy()"
         (change)="onToggle($event)"
       />
       @if (label()) {
@@ -2865,6 +3050,18 @@ i0.ɵɵngDeclareClassMetadata({
       }
       <ng-content />
     </label>
+    </ng-template>
+    @if (_trailing()) {
+      <div class="cb-row">
+        <ng-container [ngTemplateOutlet]="labelRow" />
+        <span class="cb-trailing"><ng-content select="[checkbox-trailing]" /></span>
+      </div>
+    } @else {
+      <ng-container [ngTemplateOutlet]="labelRow" />
+    }
+    @if (description()) {
+      <p class="cb-desc" [id]="_descId + '-d'">{{ description() }}</p>
+    }
     @if (_activeError()) {
       <p class="cb-desc cb-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
     } @else if (hint()) {
@@ -2873,7 +3070,7 @@ i0.ɵɵngDeclareClassMetadata({
     </div>
     }
   `,
-			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"]
+			styles: [".cb-field{display:inline-flex;flex-direction:column;gap:4px}.cb-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}.cb-legend{padding:0;margin:0 0 8px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.2}.cb-required{color:#ef4444;margin-left:2px}.cb-options{display:flex;flex-direction:column;gap:10px}.cb-options.cb-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.cb-field.cb-has-trailing{display:flex}.cb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.cb-trailing{display:inline-flex;align-items:center;flex-shrink:0}.cb-option{display:flex;flex-direction:column;gap:4px}.cb-group-desc{margin-left:0}.cb-indent{margin-left:29px}.cb-desc{margin:0 0 0 29px;font-size:.75rem;line-height:1.4;color:#64748b}.cb-desc-error{color:#ef4444}.cb-error .cb-box:not(.cb-checked){border-color:#ef4444}.cb-wrap{display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.cb-wrap.cb-disabled{cursor:not-allowed;opacity:.5}.cb-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cb-wrap:has(.cb-hidden:focus-visible) .cb-box{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.cb-wrap{position:relative}.cb-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;z-index:1}.cb-wrap.cb-disabled .cb-hidden{cursor:not-allowed}}.cb-box{flex-shrink:0;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.cb-box.cb-checked,.cb-box.cb-indeterminate{background:#3b82f6;border-color:#3b82f6}.cb-wrap:hover .cb-box:not(.cb-checked):not(.cb-disabled){border-color:#3b82f6}@media(max-width:640px),(pointer:coarse){.cb-box{position:relative}.cb-box:after{content:\"\";position:absolute;inset:-12px}}.cb-label{font-size:.875rem;color:#334155;line-height:1.4}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -2929,6 +3126,37 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valuesChange"]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		_trailingContent: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => CheckboxTrailingDirective), { isSignal: true }]
+		}],
 		indent: [{
 			type: i0.Input,
 			args: [{
@@ -2996,6 +3224,7 @@ var ButtonComponent = class ButtonComponent {
 		this.variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 		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.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 */ []);
@@ -3073,6 +3302,13 @@ var ButtonComponent = class ButtonComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				fragment: {
+					classPropertyName: "fragment",
+					publicName: "fragment",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				href: {
 					classPropertyName: "href",
 					publicName: "href",
@@ -3186,6 +3422,7 @@ var ButtonComponent = class ButtonComponent {
 					transformFunction: null
 				}
 			},
+			host: { properties: { "class.ui-btn-block": "variant() === 'ghost-start'" } },
 			ngImport: i0,
 			template: `
     <ng-template #content>
@@ -3196,14 +3433,26 @@ var ButtonComponent = class ButtonComponent {
     </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. -->
-      <a
-        [routerLink]="routerLink()"
-        [queryParams]="queryParams()"
-        [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
-        [class.btn-full]="fullWidth()"
-        [attr.aria-label]="ariaLabel()"
-        [attr.aria-describedby]="ariaDescribedBy() || null"
-      ><ng-container [ngTemplateOutlet]="content" /></a>
+      @if (disabled() || loading()) {
+        <!-- Like a disabled href: no href, so it cannot be clicked, middle-clicked or opened in a new tab. -->
+        <span
+          role="link" aria-disabled="true"
+          [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
+          [class.btn-full]="fullWidth()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-describedby]="ariaDescribedBy() || null"
+        ><ng-container [ngTemplateOutlet]="content" /></span>
+      } @else {
+        <a
+          [routerLink]="routerLink()"
+          [queryParams]="queryParams()"
+          [fragment]="fragment() ?? undefined"
+          [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
+          [class.btn-full]="fullWidth()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-describedby]="ariaDescribedBy() || null"
+        ><ng-container [ngTemplateOutlet]="content" /></a>
+      }
     } @else if (_safeHref() !== null) {
       <!-- A plain link (mailto:, tel:, https://…): the browser handles it, so middle-click, copy-link and "open in new tab" work. -->
       @if (disabled() || loading()) {
@@ -3242,7 +3491,7 @@ var ButtonComponent = class ButtonComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:inline-flex}.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 #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"],
+			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -3286,6 +3535,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-button",
 			standalone: true,
 			imports: [NgTemplateOutlet, RouterLink],
+			host: { "[class.ui-btn-block]": "variant() === 'ghost-start'" },
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
     <ng-template #content>
@@ -3296,14 +3546,26 @@ i0.ɵɵngDeclareClassMetadata({
     </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. -->
-      <a
-        [routerLink]="routerLink()"
-        [queryParams]="queryParams()"
-        [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
-        [class.btn-full]="fullWidth()"
-        [attr.aria-label]="ariaLabel()"
-        [attr.aria-describedby]="ariaDescribedBy() || null"
-      ><ng-container [ngTemplateOutlet]="content" /></a>
+      @if (disabled() || loading()) {
+        <!-- Like a disabled href: no href, so it cannot be clicked, middle-clicked or opened in a new tab. -->
+        <span
+          role="link" aria-disabled="true"
+          [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
+          [class.btn-full]="fullWidth()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-describedby]="ariaDescribedBy() || null"
+        ><ng-container [ngTemplateOutlet]="content" /></span>
+      } @else {
+        <a
+          [routerLink]="routerLink()"
+          [queryParams]="queryParams()"
+          [fragment]="fragment() ?? undefined"
+          [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
+          [class.btn-full]="fullWidth()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-describedby]="ariaDescribedBy() || null"
+        ><ng-container [ngTemplateOutlet]="content" /></a>
+      }
     } @else if (_safeHref() !== null) {
       <!-- A plain link (mailto:, tel:, https://…): the browser handles it, so middle-click, copy-link and "open in new tab" work. -->
       @if (disabled() || loading()) {
@@ -3341,7 +3603,7 @@ i0.ɵɵngDeclareClassMetadata({
     ><ng-container [ngTemplateOutlet]="content" /></button>
     }
   `,
-			styles: [":host{display:inline-flex}.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 #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"]
+			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -3369,6 +3631,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		fragment: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fragment",
+				required: false
+			}]
+		}],
 		href: [{
 			type: i0.Input,
 			args: [{
@@ -3499,6 +3769,7 @@ var TextInputComponent = class TextInputComponent {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.prefix = input("", ...ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []);
 		this.type = input("text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
 		this.maxlength = input(void 0, ...ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []);
 		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
@@ -3513,6 +3784,7 @@ var TextInputComponent = class TextInputComponent {
 		this.maxDecimals = input(void 0, ...ngDevMode ? [{ debugName: "maxDecimals" }] : /* istanbul ignore next */ []);
 		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.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
 		this.focused = output();
 		this.blurred = output();
@@ -3525,6 +3797,7 @@ var TextInputComponent = class TextInputComponent {
 		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this._value = signal("", ...ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []);
 		this._reveal = createFieldReveal(this.showErrors);
+		this._prefixPadding = computed(() => this.prefix() ? `calc(12px + ${this.prefix().length}ch + 6px)` : null, ...ngDevMode ? [{ debugName: "_prefixPadding" }] : /* istanbul ignore next */ []);
 		this._numeric = computed(() => this.valueType() === "number" && this.type() === "number", ...ngDevMode ? [{ debugName: "_numeric" }] : /* istanbul ignore next */ []);
 		this._stepAttr = computed(() => {
 			const step = this.step();
@@ -3579,10 +3852,20 @@ var TextInputComponent = class TextInputComponent {
 		this._cvaDisabled.set(d);
 	}
 	onInput(event) {
-		const raw = event.target.value;
-		const val = this._formatting() ? TextInputComponent._formatPhone(raw) : raw;
+		const input = event.target;
+		const raw = input.value;
+		let val = this._formatting() ? TextInputComponent._formatPhone(raw) : raw;
+		const format = this.formatter();
+		if (format) val = format(val);
 		this._value.set(val);
 		this._onChange(this._numeric() ? TextInputComponent._parse(val) : val);
+		const shown = this._value();
+		if (input.value !== shown) {
+			input.value = shown;
+			try {
+				input.setSelectionRange(shown.length, shown.length);
+			} catch {}
+		}
 	}
 	static _parse(text) {
 		const t = text.trim();
@@ -3700,6 +3983,13 @@ var TextInputComponent = class TextInputComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				prefix: {
+					classPropertyName: "prefix",
+					publicName: "prefix",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				type: {
 					classPropertyName: "type",
 					publicName: "type",
@@ -3798,6 +4088,13 @@ var TextInputComponent = class TextInputComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				formatter: {
+					classPropertyName: "formatter",
+					publicName: "formatter",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				showErrors: {
 					classPropertyName: "showErrors",
 					publicName: "showErrors",
@@ -3837,7 +4134,8 @@ var TextInputComponent = class TextInputComponent {
 			usesOnChanges: true,
 			ngImport: i0,
 			template: `
-    <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()">
+    <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()"
+         [class.ti-prefixed]="!!prefix()" [style.--ti-input-row]="prefix() ? (label() ? 2 : 1) : null">
       @if (label()) {
         <label class="ti-label" [for]="_inputId">
           {{ label() }}
@@ -3846,6 +4144,7 @@ var TextInputComponent = class TextInputComponent {
       }
       <input
         class="ti-input"
+        [style.padding-left]="_prefixPadding()"
         [id]="_inputId"
         [type]="type()"
         [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : null)"
@@ -3864,6 +4163,10 @@ var TextInputComponent = class TextInputComponent {
         (focus)="onFocus()"
         (blur)="onBlur()"
       />
+      @if (prefix()) {
+        <!-- Optional leading mark ("$"): a sibling after the input, laid over it by the grid of .ti-prefixed, so toggling it never recreates the input (focus and caret stay). -->
+        <span class="ti-prefix" aria-hidden="true">{{ prefix() }}</span>
+      }
       @if (_activeError()) {
         <p class="ti-desc ti-desc-error" [id]="_inputId + '-desc'" role="alert">{{ _activeError() }}</p>
       } @else if (hint()) {
@@ -3872,7 +4175,7 @@ var TextInputComponent = class TextInputComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#ef4444;margin-left:2px}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#ef4444}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"],
+			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#ef4444;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#ef4444}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -3905,7 +4208,8 @@ i0.ɵɵngDeclareClassMetadata({
 				}
 			],
 			template: `
-    <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()">
+    <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()"
+         [class.ti-prefixed]="!!prefix()" [style.--ti-input-row]="prefix() ? (label() ? 2 : 1) : null">
       @if (label()) {
         <label class="ti-label" [for]="_inputId">
           {{ label() }}
@@ -3914,6 +4218,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
       <input
         class="ti-input"
+        [style.padding-left]="_prefixPadding()"
         [id]="_inputId"
         [type]="type()"
         [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : null)"
@@ -3932,6 +4237,10 @@ i0.ɵɵngDeclareClassMetadata({
         (focus)="onFocus()"
         (blur)="onBlur()"
       />
+      @if (prefix()) {
+        <!-- Optional leading mark ("$"): a sibling after the input, laid over it by the grid of .ti-prefixed, so toggling it never recreates the input (focus and caret stay). -->
+        <span class="ti-prefix" aria-hidden="true">{{ prefix() }}</span>
+      }
       @if (_activeError()) {
         <p class="ti-desc ti-desc-error" [id]="_inputId + '-desc'" role="alert">{{ _activeError() }}</p>
       } @else if (hint()) {
@@ -3939,7 +4248,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#ef4444;margin-left:2px}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#ef4444}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"]
+			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#ef4444;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#ef4444}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -3968,6 +4277,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		prefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prefix",
+				required: false
+			}]
+		}],
 		type: [{
 			type: i0.Input,
 			args: [{
@@ -4080,6 +4397,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		formatter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatter",
+				required: false
+			}]
+		}],
 		showErrors: [{
 			type: i0.Input,
 			args: [{
@@ -4487,14 +4812,17 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"title",
 						"description",
 						"maxWidth",
-						"bodyOverflow"
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable"
 					],
 					outputs: ["close"]
 				},
 				{
 					kind: "component",
 					type: CheckboxComponent,
-					selector: "ui-checkbox",
+					selector: "ui-checkbox, ui-checkbox-group",
 					inputs: [
 						"label",
 						"ariaLabel",
@@ -4502,6 +4830,9 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"checked",
 						"options",
 						"legend",
+						"orientation",
+						"values",
+						"description",
 						"indent",
 						"required",
 						"requiredMessage",
@@ -4510,7 +4841,11 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"showErrors",
 						"disabled"
 					],
-					outputs: ["checkedChange", "invalidChange"]
+					outputs: [
+						"checkedChange",
+						"valuesChange",
+						"invalidChange"
+					]
 				},
 				{
 					kind: "component",
@@ -4520,6 +4855,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -4546,6 +4882,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"label",
 						"ariaLabel",
 						"placeholder",
+						"prefix",
 						"type",
 						"maxlength",
 						"required",
@@ -4560,6 +4897,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"maxDecimals",
 						"step",
 						"valueType",
+						"formatter",
 						"showErrors",
 						"disabled"
 					],
@@ -5907,7 +6245,7 @@ var SelectComponent = class SelectComponent {
             <option value="" [disabled]="true" [selected]="_value() === ''">{{ placeholder() }}</option>
           }
           @for (opt of options(); track opt.value; let i = $index) {
-            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [attr.title]="opt.description || null">{{ opt.label }}</option>
+            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [attr.title]="opt.description || null">{{ opt.badge ? opt.label + ' — ' + opt.badge : opt.label }}</option>
           }
         </select>
         <svg class="sl-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
@@ -5978,7 +6316,7 @@ i0.ɵɵngDeclareClassMetadata({
             <option value="" [disabled]="true" [selected]="_value() === ''">{{ placeholder() }}</option>
           }
           @for (opt of options(); track opt.value; let i = $index) {
-            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [attr.title]="opt.description || null">{{ opt.label }}</option>
+            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [attr.title]="opt.description || null">{{ opt.badge ? opt.label + ' — ' + opt.badge : opt.label }}</option>
           }
         </select>
         <svg class="sl-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
@@ -7067,7 +7405,10 @@ var ImportExportComponent = class ImportExportComponent {
 						"title",
 						"description",
 						"maxWidth",
-						"bodyOverflow"
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable"
 					],
 					outputs: ["close"]
 				},
@@ -7079,6 +7420,7 @@ var ImportExportComponent = class ImportExportComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -7561,7 +7903,10 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 					"title",
 					"description",
 					"maxWidth",
-					"bodyOverflow"
+					"bodyOverflow",
+					"dialogTestId",
+					"hideClose",
+					"closable"
 				],
 				outputs: ["close"]
 			}, {
@@ -7572,6 +7917,7 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 					"variant",
 					"routerLink",
 					"queryParams",
+					"fragment",
 					"href",
 					"target",
 					"rel",
@@ -7922,6 +8268,7 @@ var ErrorStateComponent = class ErrorStateComponent {
 					"variant",
 					"routerLink",
 					"queryParams",
+					"fragment",
 					"href",
 					"target",
 					"rel",
@@ -10260,6 +10607,7 @@ var DataTableComponent = class DataTableComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -10281,7 +10629,7 @@ var DataTableComponent = class DataTableComponent {
 				{
 					kind: "component",
 					type: CheckboxComponent,
-					selector: "ui-checkbox",
+					selector: "ui-checkbox, ui-checkbox-group",
 					inputs: [
 						"label",
 						"ariaLabel",
@@ -10289,6 +10637,9 @@ var DataTableComponent = class DataTableComponent {
 						"checked",
 						"options",
 						"legend",
+						"orientation",
+						"values",
+						"description",
 						"indent",
 						"required",
 						"requiredMessage",
@@ -10297,7 +10648,11 @@ var DataTableComponent = class DataTableComponent {
 						"showErrors",
 						"disabled"
 					],
-					outputs: ["checkedChange", "invalidChange"]
+					outputs: [
+						"checkedChange",
+						"valuesChange",
+						"invalidChange"
+					]
 				},
 				{
 					kind: "component",
@@ -10350,7 +10705,10 @@ var DataTableComponent = class DataTableComponent {
 						"title",
 						"description",
 						"maxWidth",
-						"bodyOverflow"
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable"
 					],
 					outputs: ["close"]
 				},
@@ -11312,6 +11670,8 @@ var SidePanelComponent = class SidePanelComponent {
 		this.primaryVariant = input("primary", ...ngDevMode ? [{ debugName: "primaryVariant" }] : /* istanbul ignore next */ []);
 		this.primaryLoading = input(false, ...ngDevMode ? [{ debugName: "primaryLoading" }] : /* istanbul ignore next */ []);
 		this.primaryDisabled = input(false, ...ngDevMode ? [{ debugName: "primaryDisabled" }] : /* istanbul ignore next */ []);
+		this.cancelTestId = input("", ...ngDevMode ? [{ debugName: "cancelTestId" }] : /* istanbul ignore next */ []);
+		this.primaryTestId = input("", ...ngDevMode ? [{ debugName: "primaryTestId" }] : /* istanbul ignore next */ []);
 		this.closed = output();
 		this.primaryClick = output();
 		this.titleId = `sp-title-${Math.random().toString(36).slice(2, 8)}`;
@@ -11467,6 +11827,20 @@ var SidePanelComponent = class SidePanelComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				cancelTestId: {
+					classPropertyName: "cancelTestId",
+					publicName: "cancelTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				primaryTestId: {
+					classPropertyName: "primaryTestId",
+					publicName: "primaryTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -11509,14 +11883,16 @@ var SidePanelComponent = class SidePanelComponent {
         @if (cancelLabel() || primaryLabel()) {
           <div class="sp-footer">
             @if (cancelLabel()) {
-              <button class="sp-btn sp-btn-cancel" type="button" (click)="closed.emit()">
+              <button class="sp-btn sp-btn-cancel" type="button" [attr.data-testid]="cancelTestId() || null" (click)="closed.emit()">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                 {{ cancelLabel() }}
               </button>
             }
+            <div class="sp-footer-extra"><ng-content select="[panel-footer-extra]" /></div>
             @if (primaryLabel()) {
               <button
                 class="sp-btn"
+                [attr.data-testid]="primaryTestId() || null"
                 [class.sp-btn-primary]="primaryVariant() === 'primary'"
                 [class.sp-btn-danger]="primaryVariant() === 'danger'"
                 [class.sp-btn-warning]="primaryVariant() === 'warning'"
@@ -11541,7 +11917,7 @@ var SidePanelComponent = class SidePanelComponent {
     }
   `,
 			isInline: true,
-			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:#3b82f6;border:1px solid #3b82f6;color:#fff}.sp-btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}\n"],
+			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-footer-extra{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px;min-width:0}.sp-footer-extra:empty{display:none}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:#3b82f6;border:1px solid #3b82f6;color:#fff}.sp-btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -11592,14 +11968,16 @@ i0.ɵɵngDeclareClassMetadata({
         @if (cancelLabel() || primaryLabel()) {
           <div class="sp-footer">
             @if (cancelLabel()) {
-              <button class="sp-btn sp-btn-cancel" type="button" (click)="closed.emit()">
+              <button class="sp-btn sp-btn-cancel" type="button" [attr.data-testid]="cancelTestId() || null" (click)="closed.emit()">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                 {{ cancelLabel() }}
               </button>
             }
+            <div class="sp-footer-extra"><ng-content select="[panel-footer-extra]" /></div>
             @if (primaryLabel()) {
               <button
                 class="sp-btn"
+                [attr.data-testid]="primaryTestId() || null"
                 [class.sp-btn-primary]="primaryVariant() === 'primary'"
                 [class.sp-btn-danger]="primaryVariant() === 'danger'"
                 [class.sp-btn-warning]="primaryVariant() === 'warning'"
@@ -11623,7 +12001,7 @@ i0.ɵɵngDeclareClassMetadata({
       </aside>
     }
   `,
-			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:#3b82f6;border:1px solid #3b82f6;color:#fff}.sp-btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}\n"]
+			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-footer-extra{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px;min-width:0}.sp-footer-extra:empty{display:none}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:#3b82f6;border:1px solid #3b82f6;color:#fff}.sp-btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -11708,13 +12086,29 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		closed: [{
-			type: i0.Output,
-			args: ["closed"]
+		cancelTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cancelTestId",
+				required: false
+			}]
 		}],
-		primaryClick: [{
-			type: i0.Output,
-			args: ["primaryClick"]
+		primaryTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primaryTestId",
+				required: false
+			}]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		primaryClick: [{
+			type: i0.Output,
+			args: ["primaryClick"]
 		}]
 	}
 });
@@ -13370,6 +13764,7 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -13391,7 +13786,7 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 				{
 					kind: "component",
 					type: CheckboxComponent,
-					selector: "ui-checkbox",
+					selector: "ui-checkbox, ui-checkbox-group",
 					inputs: [
 						"label",
 						"ariaLabel",
@@ -13399,6 +13794,9 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 						"checked",
 						"options",
 						"legend",
+						"orientation",
+						"values",
+						"description",
 						"indent",
 						"required",
 						"requiredMessage",
@@ -13407,7 +13805,11 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 						"showErrors",
 						"disabled"
 					],
-					outputs: ["checkedChange", "invalidChange"]
+					outputs: [
+						"checkedChange",
+						"valuesChange",
+						"invalidChange"
+					]
 				},
 				{
 					kind: "component",
@@ -13622,13 +14024,16 @@ var RadioComponent = class RadioComponent {
 		this.checked = input(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
 		this.invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 		this.describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+		this.controls = input("", ...ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []);
 		this._disabledInput = input(false, {
 			...ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {},
 			alias: "disabled"
 		});
 		this.disabled = this._disabledInput;
-		this._labelId = `rd-${Math.random().toString(36).slice(2, 8)}-label`;
-		this._labelledBy = computed(() => this.label() && this.description() && !this.ariaLabel() ? this._labelId : null, ...ngDevMode ? [{ debugName: "_labelledBy" }] : /* istanbul ignore next */ []);
+		this.labelId = input("", ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
+		this._generatedLabelId = `rd-${Math.random().toString(36).slice(2, 8)}-label`;
+		this._labelId = computed(() => this.labelId() || this._generatedLabelId, ...ngDevMode ? [{ debugName: "_labelId" }] : /* istanbul ignore next */ []);
+		this._labelledBy = computed(() => this.label() && this.description() && !this.ariaLabel() ? this._labelId() : null, ...ngDevMode ? [{ debugName: "_labelledBy" }] : /* istanbul ignore next */ []);
 		this._descriptionId = `rd-${Math.random().toString(36).slice(2, 8)}-desc`;
 		this._describedByIds = computed(() => {
 			return [this.describedBy(), this.description() ? this._descriptionId : ""].filter(Boolean).join(" ") || null;
@@ -13712,12 +14117,26 @@ var RadioComponent = class RadioComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				controls: {
+					classPropertyName: "controls",
+					publicName: "controls",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				_disabledInput: {
 					classPropertyName: "_disabledInput",
 					publicName: "disabled",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				labelId: {
+					classPropertyName: "labelId",
+					publicName: "labelId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { selected: "selected" },
@@ -13738,10 +14157,11 @@ var RadioComponent = class RadioComponent {
         [attr.aria-labelledby]="_labelledBy()"
         [attr.aria-invalid]="invalid() ? 'true' : null"
         [attr.aria-describedby]="_describedByIds()"
+        [attr.aria-controls]="controls() || null"
         (change)="onChange($event)"
       />
       <span class="rd-text">
-        @if (label()) { <span class="rd-label" [id]="_labelId">{{ label() }}</span> }
+        @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
         <ng-content />
       </span>
@@ -13780,10 +14200,11 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.aria-labelledby]="_labelledBy()"
         [attr.aria-invalid]="invalid() ? 'true' : null"
         [attr.aria-describedby]="_describedByIds()"
+        [attr.aria-controls]="controls() || null"
         (change)="onChange($event)"
       />
       <span class="rd-text">
-        @if (label()) { <span class="rd-label" [id]="_labelId">{{ label() }}</span> }
+        @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
         <ng-content />
       </span>
@@ -13857,6 +14278,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		controls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "controls",
+				required: false
+			}]
+		}],
 		_disabledInput: [{
 			type: i0.Input,
 			args: [{
@@ -13865,16 +14294,84 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelId",
+				required: false
+			}]
+		}],
 		selected: [{
 			type: i0.Output,
 			args: ["selected"]
 		}]
 	}
 });
+var RadioOptionContentDirective = class RadioOptionContentDirective {
+	constructor() {
+		this.value = input.required({
+			...ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {},
+			alias: "uiRadioOptionContent"
+		});
+		this.template = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RadioOptionContentDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RadioOptionContentDirective,
+			isStandalone: true,
+			selector: "ng-template[uiRadioOptionContent]",
+			inputs: { value: {
+				classPropertyName: "value",
+				publicName: "uiRadioOptionContent",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			} },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RadioOptionContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[uiRadioOptionContent]",
+			standalone: true
+		}]
+	}],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiRadioOptionContent",
+			required: true
+		}]
+	}] }
+});
 var RadioGroupComponent = class RadioGroupComponent {
 	get _name() {
 		return this.name() || this._generatedName;
 	}
+	_optionLabelId(index) {
+		return `${this._generatedName}-opt-${index}-label`;
+	}
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
@@ -13884,6 +14381,12 @@ var RadioGroupComponent = class RadioGroupComponent {
 		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
 		this.orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
 		this.name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this._optionContent = contentChildren(RadioOptionContentDirective, ...ngDevMode ? [{ debugName: "_optionContent" }] : /* istanbul ignore next */ []);
+		this._nestedContent = computed(() => {
+			const byValue = /* @__PURE__ */ new Map();
+			for (const content of this._optionContent()) byValue.set(content.value(), content.template);
+			return byValue;
+		}, ...ngDevMode ? [{ debugName: "_nestedContent" }] : /* istanbul ignore next */ []);
 		this._disabledInput = input(false, {
 			...ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {},
 			alias: "disabled"
@@ -13892,6 +14395,7 @@ var RadioGroupComponent = class RadioGroupComponent {
 		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this._generatedName = `rg-${Math.random().toString(36).slice(2, 8)}`;
 		this._descId = `${this._generatedName}-desc`;
+		this._nestedId = `${this._generatedName}-nested`;
 		this._value = signal("", ...ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []);
 		this._reveal = createFieldReveal(this.showErrors);
 		this._issue = computed(() => this._check(this._value()), ...ngDevMode ? [{ debugName: "_issue" }] : /* istanbul ignore next */ []);
@@ -14047,6 +14551,11 @@ var RadioGroupComponent = class RadioGroupComponent {
 					useExisting: forwardRef(() => RadioGroupComponent)
 				}
 			],
+			queries: [{
+				propertyName: "_optionContent",
+				predicate: RadioOptionContentDirective,
+				isSignal: true
+			}],
 			usesOnChanges: true,
 			ngImport: i0,
 			template: `
@@ -14077,7 +14586,12 @@ var RadioGroupComponent = class RadioGroupComponent {
             [disabled]="disabled() || !!opt.disabled"
             [invalid]="!!_activeError()"
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
+            [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
+            [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
             (selected)="onSelect($event)" />
+          @if (_value() === opt.value && _nestedContent().get(opt.value); as nested) {
+            <div class="rg-nested" role="group" [id]="_nestedId" [attr.aria-labelledby]="opt.label ? _optionLabelId($index) : null"><ng-container [ngTemplateOutlet]="nested" /></div>
+          }
         }
       </div>
       @if (_activeError()) {
@@ -14088,7 +14602,7 @@ var RadioGroupComponent = class RadioGroupComponent {
     </fieldset>
   `,
 			isInline: true,
-			styles: [":host{display:block}.rg-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rg-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rg-required{color:#ef4444;margin-left:2px}.rg-options{display:flex;flex-direction:column;gap:10px}.rg-options.rg-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.rg-disabled{cursor:not-allowed}.rg-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rg-desc-error{color:#ef4444}@media(pointer:coarse),(max-width:480px){.rg-options{gap:4px}}\n"],
+			styles: [":host{display:block}.rg-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rg-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rg-required{color:#ef4444;margin-left:2px}.rg-options{display:flex;flex-direction:column;gap:10px}.rg-options.rg-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.rg-nested{padding-left:29px;min-width:0}.rg-options.rg-horizontal .rg-nested{flex:1 0 100%}.rg-disabled{cursor:not-allowed}.rg-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rg-desc-error{color:#ef4444}@media(pointer:coarse),(max-width:480px){.rg-options{gap:4px}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: RadioComponent,
@@ -14102,9 +14616,20 @@ var RadioGroupComponent = class RadioGroupComponent {
 					"checked",
 					"invalid",
 					"describedBy",
-					"disabled"
+					"controls",
+					"disabled",
+					"labelId"
 				],
 				outputs: ["selected"]
+			}, {
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -14120,7 +14645,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-radio-group",
 			standalone: true,
-			imports: [RadioComponent],
+			imports: [RadioComponent, NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [
 				{
@@ -14166,7 +14691,12 @@ i0.ɵɵngDeclareClassMetadata({
             [disabled]="disabled() || !!opt.disabled"
             [invalid]="!!_activeError()"
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
+            [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
+            [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
             (selected)="onSelect($event)" />
+          @if (_value() === opt.value && _nestedContent().get(opt.value); as nested) {
+            <div class="rg-nested" role="group" [id]="_nestedId" [attr.aria-labelledby]="opt.label ? _optionLabelId($index) : null"><ng-container [ngTemplateOutlet]="nested" /></div>
+          }
         }
       </div>
       @if (_activeError()) {
@@ -14176,7 +14706,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </fieldset>
   `,
-			styles: [":host{display:block}.rg-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rg-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rg-required{color:#ef4444;margin-left:2px}.rg-options{display:flex;flex-direction:column;gap:10px}.rg-options.rg-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.rg-disabled{cursor:not-allowed}.rg-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rg-desc-error{color:#ef4444}@media(pointer:coarse),(max-width:480px){.rg-options{gap:4px}}\n"]
+			styles: [":host{display:block}.rg-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rg-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rg-required{color:#ef4444;margin-left:2px}.rg-options{display:flex;flex-direction:column;gap:10px}.rg-options.rg-horizontal{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.rg-nested{padding-left:29px;min-width:0}.rg-options.rg-horizontal .rg-nested{flex:1 0 100%}.rg-disabled{cursor:not-allowed}.rg-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rg-desc-error{color:#ef4444}@media(pointer:coarse),(max-width:480px){.rg-options{gap:4px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -14245,6 +14775,10 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		_optionContent: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RadioOptionContentDirective), { isSignal: true }]
+		}],
 		_disabledInput: [{
 			type: i0.Input,
 			args: [{
@@ -14340,7 +14874,7 @@ var AlertComponent = class AlertComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"],
+			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--neutral{background:#f1f5f9;border-color:#64748b;color:#334155}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -14371,7 +14905,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"]
+			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--neutral{background:#f1f5f9;border-color:#64748b;color:#334155}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -14884,7 +15418,9 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"primaryLabel",
 						"primaryVariant",
 						"primaryLoading",
-						"primaryDisabled"
+						"primaryDisabled",
+						"cancelTestId",
+						"primaryTestId"
 					],
 					outputs: ["closed", "primaryClick"]
 				},
@@ -14896,6 +15432,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"label",
 						"ariaLabel",
 						"placeholder",
+						"prefix",
 						"type",
 						"maxlength",
 						"required",
@@ -14910,6 +15447,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"maxDecimals",
 						"step",
 						"valueType",
+						"formatter",
 						"showErrors",
 						"disabled"
 					],
@@ -14944,6 +15482,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -16058,7 +16597,7 @@ var ContactPickerComponent = class ContactPickerComponent {
 				{
 					kind: "component",
 					type: CheckboxComponent,
-					selector: "ui-checkbox",
+					selector: "ui-checkbox, ui-checkbox-group",
 					inputs: [
 						"label",
 						"ariaLabel",
@@ -16066,6 +16605,9 @@ var ContactPickerComponent = class ContactPickerComponent {
 						"checked",
 						"options",
 						"legend",
+						"orientation",
+						"values",
+						"description",
 						"indent",
 						"required",
 						"requiredMessage",
@@ -16074,7 +16616,11 @@ var ContactPickerComponent = class ContactPickerComponent {
 						"showErrors",
 						"disabled"
 					],
-					outputs: ["checkedChange", "invalidChange"]
+					outputs: [
+						"checkedChange",
+						"valuesChange",
+						"invalidChange"
+					]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -16996,7 +17542,9 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 						"primaryLabel",
 						"primaryVariant",
 						"primaryLoading",
-						"primaryDisabled"
+						"primaryDisabled",
+						"cancelTestId",
+						"primaryTestId"
 					],
 					outputs: ["closed", "primaryClick"]
 				},
@@ -17015,6 +17563,7 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 						"label",
 						"ariaLabel",
 						"placeholder",
+						"prefix",
 						"type",
 						"maxlength",
 						"required",
@@ -17029,6 +17578,7 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 						"maxDecimals",
 						"step",
 						"valueType",
+						"formatter",
 						"showErrors",
 						"disabled"
 					],
@@ -17544,6 +18094,7 @@ var FileInputComponent = class FileInputComponent {
 		this.error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
 		this.showField = input(true, ...ngDevMode ? [{ debugName: "showField" }] : /* istanbul ignore next */ []);
 		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
+		this.toastOnReject = input(false, ...ngDevMode ? [{ debugName: "toastOnReject" }] : /* istanbul ignore next */ []);
 		this.clearable = input(false, ...ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []);
 		this.removeLabel = input("Remove", ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
 		this.maxSize = input(null, ...ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []);
@@ -17573,6 +18124,7 @@ var FileInputComponent = class FileInputComponent {
 		this._inputId = `fi-${Math.random().toString(36).slice(2, 8)}`;
 		this.fileEl = viewChild("fileEl", ...ngDevMode ? [{ debugName: "fileEl" }] : /* istanbul ignore next */ []);
 		this._dragging = signal(false, ...ngDevMode ? [{ debugName: "_dragging" }] : /* istanbul ignore next */ []);
+		this._toast = inject(ToastService);
 		this._rejection = signal("", ...ngDevMode ? [{ debugName: "_rejection" }] : /* istanbul ignore next */ []);
 		this._reveal = createFieldReveal(this.showErrors);
 		this._issue = computed(() => this.disabled() || !this.required() || this._files().length > 0 ? null : requiredIssue(this.label() || "File"), ...ngDevMode ? [{ debugName: "_issue" }] : /* istanbul ignore next */ []);
@@ -17723,6 +18275,7 @@ var FileInputComponent = class FileInputComponent {
 		}
 		this._rejection.set(rejected[0]?.message ?? "");
 		rejected.forEach((r) => this.fileRejected.emit(r));
+		if (this.toastOnReject() && rejected.length > 0) this._toast.error(rejected.map((r) => `"${r.file.name}" was not added. ${r.message}`).join(" "));
 		if (ok.length === 0) {
 			if (native) native.value = "";
 			this._files.set([]);
@@ -17830,6 +18383,13 @@ var FileInputComponent = class FileInputComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				toastOnReject: {
+					classPropertyName: "toastOnReject",
+					publicName: "toastOnReject",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				clearable: {
 					classPropertyName: "clearable",
 					publicName: "clearable",
@@ -18230,6 +18790,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		toastOnReject: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toastOnReject",
+				required: false
+			}]
+		}],
 		clearable: [{
 			type: i0.Input,
 			args: [{
@@ -20673,7 +21241,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 			}, {
 				kind: "component",
 				type: CheckboxComponent,
-				selector: "ui-checkbox",
+				selector: "ui-checkbox, ui-checkbox-group",
 				inputs: [
 					"label",
 					"ariaLabel",
@@ -20681,6 +21249,9 @@ var MultiSelectComponent = class MultiSelectComponent {
 					"checked",
 					"options",
 					"legend",
+					"orientation",
+					"values",
+					"description",
 					"indent",
 					"required",
 					"requiredMessage",
@@ -20689,7 +21260,11 @@ var MultiSelectComponent = class MultiSelectComponent {
 					"showErrors",
 					"disabled"
 				],
-				outputs: ["checkedChange", "invalidChange"]
+				outputs: [
+					"checkedChange",
+					"valuesChange",
+					"invalidChange"
+				]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -20992,7 +21567,7 @@ var DiscountSelectorComponent = class DiscountSelectorComponent {
 			dependencies: [{
 				kind: "component",
 				type: CheckboxComponent,
-				selector: "ui-checkbox",
+				selector: "ui-checkbox, ui-checkbox-group",
 				inputs: [
 					"label",
 					"ariaLabel",
@@ -21000,6 +21575,9 @@ var DiscountSelectorComponent = class DiscountSelectorComponent {
 					"checked",
 					"options",
 					"legend",
+					"orientation",
+					"values",
+					"description",
 					"indent",
 					"required",
 					"requiredMessage",
@@ -21008,7 +21586,11 @@ var DiscountSelectorComponent = class DiscountSelectorComponent {
 					"showErrors",
 					"disabled"
 				],
-				outputs: ["checkedChange", "invalidChange"]
+				outputs: [
+					"checkedChange",
+					"valuesChange",
+					"invalidChange"
+				]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -21636,7 +22218,7 @@ var FormRowComponent = class FormRowComponent {
 			ngImport: i0,
 			template: `<div class="fr-row" [style.--fr-cols]="cols()"><ng-content /></div>`,
 			isInline: true,
-			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}@media(max-width:480px){.fr-row{grid-template-columns:1fr}}\n"],
+			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -21653,7 +22235,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `<div class="fr-row" [style.--fr-cols]="cols()"><ng-content /></div>`,
-			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}@media(max-width:480px){.fr-row{grid-template-columns:1fr}}\n"]
+			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"]
 		}]
 	}],
 	propDecorators: { cols: [{
@@ -21665,6 +22247,65 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+var FormColSpanDirective = class FormColSpanDirective {
+	constructor() {
+		this.uiColSpan = input("", ...ngDevMode ? [{ debugName: "uiColSpan" }] : /* istanbul ignore next */ []);
+		this._class = computed(() => {
+			const v = String(this.uiColSpan());
+			return v === "2" || v === "3" || v === "all" ? `ui-span-${v}` : "";
+		}, ...ngDevMode ? [{ debugName: "_class" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormColSpanDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: FormColSpanDirective,
+			isStandalone: true,
+			selector: "[uiColSpan]",
+			inputs: { uiColSpan: {
+				classPropertyName: "uiColSpan",
+				publicName: "uiColSpan",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			host: { properties: { "class": "_class()" } },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FormColSpanDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiColSpan]",
+			standalone: true,
+			host: { "[class]": "_class()" }
+		}]
+	}],
+	propDecorators: { uiColSpan: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiColSpan",
+			required: false
+		}]
+	}] }
+});
 var ListItemComponent = class ListItemComponent {
 	constructor() {
 		this.leading = input("none", ...ngDevMode ? [{ debugName: "leading" }] : /* istanbul ignore next */ []);
@@ -22602,6 +23243,7 @@ var ListComponent = class ListComponent {
 					"variant",
 					"routerLink",
 					"queryParams",
+					"fragment",
 					"href",
 					"target",
 					"rel",
@@ -23905,6 +24547,7 @@ var QrCodeComponent = class QrCodeComponent {
 					"variant",
 					"routerLink",
 					"queryParams",
+					"fragment",
 					"href",
 					"target",
 					"rel",
@@ -24030,6 +24673,28 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 		this.showEmptyState = input(false, ...ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []);
 		this.displaySections = computed(() => this.showEmptyState() ? this.sections() : this.sections().filter((s) => s.items.some((i) => !i.hidden)), ...ngDevMode ? [{ debugName: "displaySections" }] : /* istanbul ignore next */ []);
 	}
+	hrefOf(item) {
+		let raw = item.href?.trim() ?? "";
+		if (!raw && item.email?.trim()) raw = "mailto:" + item.email.trim();
+		if (!raw && item.phone?.trim()) {
+			const p = item.phone.trim();
+			raw = "tel:" + (p.startsWith("+") ? "+" : "") + p.replace(/\D/g, "");
+		}
+		if (!raw) return null;
+		const scheme = /^([a-z][a-z0-9+.\-]*):/i.exec(raw.replace(/[\u0000-\u0020]/g, ""));
+		return scheme && [
+			"mailto",
+			"tel",
+			"http",
+			"https"
+		].includes(scheme[1].toLowerCase()) ? raw : null;
+	}
+	isWeb(href) {
+		return /^https?:/i.test(href.replace(/[\u0000-\u0020]/g, ""));
+	}
+	textOf(item) {
+		return item.value || item.email || item.phone || item.href || "";
+	}
 	visibleItems(section) {
 		return section.items.filter((i) => !i.hidden);
 	}
@@ -24088,6 +24753,8 @@ var PanelInfoListComponent = class PanelInfoListComponent {
                 <span class="pil-value pil-value--block">
                   @if (item.badge) {
                     <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
+                  } @else if (hrefOf(item); as h) {
+                    <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
                   } @else {
                     <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger">{{ item.value || '—' }}</span>
                   }
@@ -24108,6 +24775,8 @@ var PanelInfoListComponent = class PanelInfoListComponent {
                   </span>
                 } @else if (item.badge) {
                   <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
+                } @else if (hrefOf(item); as h) {
+                  <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
                 } @else if (item.link && item.value && item.linkIcon) {
                   <a class="pil-link-icon" [routerLink]="item.link">
                     {{ item.value }}
@@ -24133,7 +24802,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
+			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -24178,6 +24847,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -24239,6 +24909,8 @@ i0.ɵɵngDeclareClassMetadata({
                 <span class="pil-value pil-value--block">
                   @if (item.badge) {
                     <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
+                  } @else if (hrefOf(item); as h) {
+                    <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
                   } @else {
                     <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger">{{ item.value || '—' }}</span>
                   }
@@ -24259,6 +24931,8 @@ i0.ɵɵngDeclareClassMetadata({
                   </span>
                 } @else if (item.badge) {
                   <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
+                } @else if (hrefOf(item); as h) {
+                  <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
                 } @else if (item.link && item.value && item.linkIcon) {
                   <a class="pil-link-icon" [routerLink]="item.link">
                     {{ item.value }}
@@ -24283,7 +24957,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     }
   `,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
+			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -25502,7 +26176,15 @@ const EXTRA_ICONS = {
 	"chevron-down": "M6 9l6 6 6-6",
 	"arrow-left": "M19 12H5 M12 19l-7-7 7-7",
 	"bell": "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0",
-	"print": "M6 9V2h12v7 M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2 M6 14h12v8H6z"
+	"print": "M6 9V2h12v7 M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2 M6 14h12v8H6z",
+	"lock": "M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z M7 11V7a5 5 0 0 1 10 0v4",
+	"arrow-up": "M12 19V5 M5 12l7-7 7 7",
+	"arrow-down": "M12 5v14 M19 12l-7 7-7-7",
+	"arrow-right": "M5 12h14 M12 5l7 7-7 7",
+	"document": "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8",
+	"grip": "M9 5h.01 M15 5h.01 M9 12h.01 M15 12h.01 M9 19h.01 M15 19h.01",
+	"card": "M3 4h18a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M1 10h22",
+	"bank": "M3 21h18 M3 10h18 M5 6l7-3 7 3 M4 10v11 M20 10v11 M8 14v3 M12 14v3 M16 14v3"
 };
 function iconPath(name) {
 	return Object.prototype.hasOwnProperty.call(EXTRA_ICONS, name) ? EXTRA_ICONS[name] : builtInActionIcon(name);
@@ -25757,17 +26439,18 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var ErrorComponent = class ErrorComponent {
+var TimelineComponent = class TimelineComponent {
 	constructor() {
-		this.message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
-		this.errorId = input("", ...ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []);
+		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.emptyMessage = input("", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
 			version: "22.2.2",
 			ngImport: i0,
-			type: ErrorComponent,
+			type: TimelineComponent,
 			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -25776,20 +26459,27 @@ var ErrorComponent = class ErrorComponent {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
 			version: "22.2.2",
-			type: ErrorComponent,
+			type: TimelineComponent,
 			isStandalone: true,
-			selector: "ui-error",
+			selector: "ui-timeline",
 			inputs: {
-				message: {
-					classPropertyName: "message",
-					publicName: "message",
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				errorId: {
-					classPropertyName: "errorId",
-					publicName: "errorId",
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyMessage: {
+					classPropertyName: "emptyMessage",
+					publicName: "emptyMessage",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
@@ -25797,12 +26487,61 @@ var ErrorComponent = class ErrorComponent {
 			},
 			ngImport: i0,
 			template: `
-    @if (message()) {
-      <p class="ui-error" role="alert" [attr.id]="errorId() || null">{{ message() }}</p>
+    @if (items().length) {
+      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+        @for (item of items(); track item.id ?? $index) {
+          <li class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon">
+            <span class="tl-marker" aria-hidden="true">
+              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+            </span>
+            <div class="tl-content">
+              <div class="tl-head">
+                <span class="tl-title">{{ item.title }}</span>
+                @if (item.badge) { <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" /> }
+              </div>
+              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+              @if (item.time || item.dateTime) {
+                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+              }
+            </div>
+          </li>
+        }
+      </ol>
+    } @else if (emptyMessage()) {
+      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
     }
   `,
 			isInline: true,
-			styles: [":host{display:block}.ui-error{margin:6px 0 0;font-size:.75rem;line-height:1.4;color:#ef4444}\n"],
+			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: BadgeComponent,
+					selector: "ui-badge",
+					inputs: ["label", "variant"]
+				},
+				{
+					kind: "component",
+					type: HintComponent,
+					selector: "ui-hint"
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"name",
+						"tooltip",
+						"ariaLabel",
+						"size",
+						"variant",
+						"disabled",
+						"loading",
+						"interactive"
+					],
+					outputs: ["iconClick"]
+				}
+			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -25811,43 +26550,164 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: ErrorComponent,
+	type: TimelineComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-error",
+			selector: "ui-timeline",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				BadgeComponent,
+				HintComponent,
+				IconComponent
+			],
 			template: `
-    @if (message()) {
-      <p class="ui-error" role="alert" [attr.id]="errorId() || null">{{ message() }}</p>
+    @if (items().length) {
+      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+        @for (item of items(); track item.id ?? $index) {
+          <li class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon">
+            <span class="tl-marker" aria-hidden="true">
+              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+            </span>
+            <div class="tl-content">
+              <div class="tl-head">
+                <span class="tl-title">{{ item.title }}</span>
+                @if (item.badge) { <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" /> }
+              </div>
+              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+              @if (item.time || item.dateTime) {
+                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+              }
+            </div>
+          </li>
+        }
+      </ol>
+    } @else if (emptyMessage()) {
+      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
     }
   `,
-			styles: [":host{display:block}.ui-error{margin:6px 0 0;font-size:.75rem;line-height:1.4;color:#ef4444}\n"]
+			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
 		}]
 	}],
 	propDecorators: {
-		message: [{
+		items: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "message",
+				alias: "items",
 				required: false
 			}]
 		}],
-		errorId: [{
+		ariaLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "errorId",
+				alias: "ariaLabel",
 				required: false
 			}]
-		}]
-	}
-});
-var KpiCardComponent = class KpiCardComponent {
-	constructor() {
-		this.sanitizer = inject(DomSanitizer);
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}]
+	}
+});
+var ErrorComponent = class ErrorComponent {
+	constructor() {
+		this.message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+		this.errorId = input("", ...ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ErrorComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ErrorComponent,
+			isStandalone: true,
+			selector: "ui-error",
+			inputs: {
+				message: {
+					classPropertyName: "message",
+					publicName: "message",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				errorId: {
+					classPropertyName: "errorId",
+					publicName: "errorId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    @if (message()) {
+      <p class="ui-error" role="alert" [attr.id]="errorId() || null">{{ message() }}</p>
+    }
+  `,
+			isInline: true,
+			styles: [":host{display:block}.ui-error{margin:6px 0 0;font-size:.75rem;line-height:1.4;color:#ef4444}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ErrorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-error",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (message()) {
+      <p class="ui-error" role="alert" [attr.id]="errorId() || null">{{ message() }}</p>
+    }
+  `,
+			styles: [":host{display:block}.ui-error{margin:6px 0 0;font-size:.75rem;line-height:1.4;color:#ef4444}\n"]
+		}]
+	}],
+	propDecorators: {
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		errorId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorId",
+				required: false
+			}]
+		}]
+	}
+});
+var KpiCardComponent = class KpiCardComponent {
+	constructor() {
+		this.sanitizer = inject(DomSanitizer);
 		this.host = inject(ElementRef);
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
@@ -26447,6 +27307,7 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 						"variant",
 						"routerLink",
 						"queryParams",
+						"fragment",
 						"href",
 						"target",
 						"rel",
@@ -28260,7 +29121,9 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 					"checked",
 					"invalid",
 					"describedBy",
-					"disabled"
+					"controls",
+					"disabled",
+					"labelId"
 				],
 				outputs: ["selected"]
 			}],
@@ -28442,43 +29305,318 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var DetailCardComponent = class DetailCardComponent {
+let nextPadId = 0;
+var SignaturePadComponent = class SignaturePadComponent {
 	constructor() {
-		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
-		this.headingLevel = input(null, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
-		this.titleId = input("", ...ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		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.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 */ []);
-		this.expanded = model(true, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
-		this.showEdit = input(false, ...ngDevMode ? [{ debugName: "showEdit" }] : /* istanbul ignore next */ []);
-		this.editLabel = input("Edit", ...ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []);
-		this.editClick = output();
+		this.hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+		this.error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.width = input(600, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = input(120, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.outputWidth = input(600, ...ngDevMode ? [{ debugName: "outputWidth" }] : /* istanbul ignore next */ []);
+		this.outputHeight = input(60, ...ngDevMode ? [{ debugName: "outputHeight" }] : /* istanbul ignore next */ []);
+		this.penColor = input("#000000", ...ngDevMode ? [{ debugName: "penColor" }] : /* istanbul ignore next */ []);
+		this.penWidth = input(3, ...ngDevMode ? [{ debugName: "penWidth" }] : /* istanbul ignore next */ []);
+		this.showClear = input(true, ...ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []);
+		this.clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+		this._disabledInput = input(false, {
+			...ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {},
+			alias: "disabled"
+		});
+		this.signatureChange = output();
+		this._canvas = viewChild("canvas", ...ngDevMode ? [{ debugName: "_canvas" }] : /* istanbul ignore next */ []);
+		this._cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []);
+		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this._empty = signal(true, ...ngDevMode ? [{ debugName: "_empty" }] : /* istanbul ignore next */ []);
+		this._cursorVisible = signal(false, ...ngDevMode ? [{ debugName: "_cursorVisible" }] : /* istanbul ignore next */ []);
+		this._cursorX = signal(0, ...ngDevMode ? [{ debugName: "_cursorX" }] : /* istanbul ignore next */ []);
+		this._cursorY = signal(0, ...ngDevMode ? [{ debugName: "_cursorY" }] : /* istanbul ignore next */ []);
+		this._keyboardDrawing = signal(false, ...ngDevMode ? [{ debugName: "_keyboardDrawing" }] : /* istanbul ignore next */ []);
+		this._announcement = signal("", ...ngDevMode ? [{ debugName: "_announcement" }] : /* istanbul ignore next */ []);
+		this._keyboardHelp = "Use the arrow keys to move the cursor, hold Space to draw, press Escape to hide the cursor.";
+		this._injector = inject(Injector);
+		this._id = ++nextPadId;
+		this._labelId = `sp-label-${this._id}`;
+		this._descId = `sp-desc-${this._id}`;
+		this._helpId = `sp-help-${this._id}`;
+		this._accessibleName = computed(() => this.ariaLabel() || (this.label() ? null : "Signature pad"), ...ngDevMode ? [{ debugName: "_accessibleName" }] : /* istanbul ignore next */ []);
+		this._describedBy = computed(() => (this.error() || this.hint() ? this._descId + " " : "") + this._helpId, ...ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []);
+		this._ctx = null;
+		this._pointerId = null;
+		this._dirty = false;
+		this._pendingImage = false;
+		this._value = null;
+		this._loading = false;
+		this._sizeKey = null;
+		this._onChange = () => {};
+		this._onTouched = () => {};
+		effect(() => {
+			const canvas = this._canvas()?.nativeElement;
+			const sizeKey = `${this.width()}x${this.height()}`;
+			this.penColor();
+			this.penWidth();
+			if (canvas) untracked(() => {
+				this._setUpContext(canvas);
+				if (this._sizeKey !== null && this._sizeKey !== sizeKey) this._repaintAfterResize();
+				this._sizeKey = sizeKey;
+				if (this._pendingImage && this._value && this._ctx) {
+					this._pendingImage = false;
+					this._paint(this._value, canvas, this._ctx);
+				}
+			});
+		});
 	}
-	groupLabel() {
-		if (this.showHeader() && this.title()) return this.titleId() ? null : this.title();
-		return this.ariaLabel().trim() || null;
+	isEmpty() {
+		return this._empty();
 	}
-	isOpen() {
-		return !(this.showHeader() && this.collapsible()) || this.expanded();
+	toDataUrl() {
+		if (this._empty()) return null;
+		return this._loading || this._pendingImage ? this._value : this._normalize();
 	}
-	toggle() {
-		this.expanded.set(!this.expanded());
+	clear() {
+		this._clearBitmap();
+		this._value = null;
+		this._pendingImage = false;
+		this._loading = false;
+		const wasEmpty = this._empty();
+		this._empty.set(true);
+		this._dirty = false;
+		this._keyboardDrawing.set(false);
+		this._cursorVisible.set(false);
+		if (!wasEmpty) this._announcement.set("Signature cleared");
+		this._onChange(null);
+		this.signatureChange.emit(null);
+	}
+	writeValue(value) {
+		this._value = value || null;
+		this._pendingImage = false;
+		this._loading = false;
+		this._clearBitmap();
+		this._announcement.set("");
+		this._dirty = false;
+		if (!value) {
+			this._empty.set(true);
+			return;
+		}
+		this._empty.set(false);
+		const canvas = this._canvas()?.nativeElement;
+		const ctx = canvas ? this._contextOf(canvas) : null;
+		if (!canvas || !ctx) {
+			this._pendingImage = true;
+			return;
+		}
+		this._paint(value, canvas, ctx);
 	}
-	onHeaderClick(event) {
-		if (!this.showHeader() || !this.collapsible()) return;
-		if (event.target?.closest("button, a, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [tabindex]:not([tabindex=\"-1\"])")?.closest(".dc-header")) return;
-		this.toggle();
+	_paint(value, canvas, ctx) {
+		const image = new Image();
+		this._loading = true;
+		image.onerror = () => {
+			if (this._value === value) this._loading = false;
+		};
+		image.onload = () => {
+			if (this._value !== value) return;
+			this._loading = false;
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			const scale = Math.min(canvas.width / image.width, canvas.height / image.height);
+			const drawWidth = image.width * scale;
+			const drawHeight = image.height * scale;
+			ctx.drawImage(image, 0, (canvas.height - drawHeight) / 2, drawWidth, drawHeight);
+		};
+		image.src = value;
+	}
+	_repaintAfterResize() {
+		afterNextRender(() => {
+			const canvas = this._canvas()?.nativeElement;
+			const ctx = canvas ? this._contextOf(canvas) : null;
+			if (!canvas || !ctx || this._empty() || !this._value) return;
+			this._paint(this._value, canvas, ctx);
+		}, { injector: this._injector });
+	}
+	registerOnChange(fn) {
+		this._onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this._onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this._cvaDisabled.set(disabled);
+	}
+	onPointerDown(event) {
+		if (this.disabled() || event.pointerType === "mouse" && event.button !== 0) return;
+		if (!event.isPrimary) return;
+		if (this._pointerId !== null) {
+			if (event.pointerId !== this._pointerId) return;
+			this._pointerId = null;
+			this._commit();
+		}
+		const canvas = this._canvas()?.nativeElement;
+		const ctx = canvas ? this._contextOf(canvas) : null;
+		if (!canvas || !ctx) return;
+		event.preventDefault();
+		this._applyPen(ctx);
+		this._pointerId = event.pointerId;
+		canvas.setPointerCapture?.(event.pointerId);
+		this._cursorVisible.set(false);
+		const point = this._pointOf(event.clientX, event.clientY, canvas);
+		ctx.beginPath();
+		ctx.moveTo(point.x, point.y);
+		ctx.lineTo(point.x + .01, point.y);
+		ctx.stroke();
+		this._dirty = true;
+	}
+	onPointerMove(event) {
+		if (this._pointerId === null || event.pointerId !== this._pointerId) return;
+		const canvas = this._canvas()?.nativeElement;
+		const ctx = this._ctx;
+		if (!canvas || !ctx) return;
+		event.preventDefault();
+		const point = this._pointOf(event.clientX, event.clientY, canvas);
+		ctx.lineTo(point.x, point.y);
+		ctx.stroke();
+	}
+	onPointerEnd(event) {
+		if (this._pointerId === null || event.pointerId !== this._pointerId) return;
+		this._pointerId = null;
+		this._commit();
+	}
+	onKeyDown(event) {
+		if (this.disabled()) return;
+		const canvas = this._canvas()?.nativeElement;
+		const ctx = canvas ? this._contextOf(canvas) : null;
+		if (!ctx) return;
+		if (event.key === "Escape") {
+			if (this._cursorVisible()) {
+				event.stopPropagation();
+				this._stopKeyboardStroke();
+				this._cursorVisible.set(false);
+			}
+			return;
+		}
+		const isArrow = [
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		].includes(event.key);
+		if (!isArrow && event.key !== " ") return;
+		event.preventDefault();
+		if (!this._cursorVisible()) {
+			this._cursorVisible.set(true);
+			this._cursorX.set(this.width() / 2);
+			this._cursorY.set(this.height() / 2);
+		}
+		if (isArrow) {
+			const step = event.shiftKey ? 10 : 2;
+			if (event.key === "ArrowUp") this._cursorY.set(Math.max(0, this._cursorY() - step));
+			if (event.key === "ArrowDown") this._cursorY.set(Math.min(this.height(), this._cursorY() + step));
+			if (event.key === "ArrowLeft") this._cursorX.set(Math.max(0, this._cursorX() - step));
+			if (event.key === "ArrowRight") this._cursorX.set(Math.min(this.width(), this._cursorX() + step));
+			if (this._keyboardDrawing()) {
+				ctx.lineTo(this._cursorX(), this._cursorY());
+				ctx.stroke();
+				this._dirty = true;
+			}
+			return;
+		}
+		if (!this._keyboardDrawing()) {
+			this._keyboardDrawing.set(true);
+			this._applyPen(ctx);
+			ctx.beginPath();
+			ctx.moveTo(this._cursorX(), this._cursorY());
+			ctx.lineTo(this._cursorX() + .01, this._cursorY());
+			ctx.stroke();
+			this._dirty = true;
+		}
+	}
+	onKeyUp(event) {
+		if (event.key !== " " || this.disabled()) return;
+		event.preventDefault();
+		this._stopKeyboardStroke();
+	}
+	onBlur() {
+		this._stopKeyboardStroke();
+		this._cursorVisible.set(false);
+		this._onTouched();
+	}
+	_stopKeyboardStroke() {
+		if (!this._keyboardDrawing()) return;
+		this._keyboardDrawing.set(false);
+		this._commit();
+	}
+	_commit() {
+		if (!this._dirty) return;
+		this._dirty = false;
+		const wasEmpty = this._empty();
+		this._empty.set(false);
+		this._loading = false;
+		this._value = this._normalize();
+		if (wasEmpty) this._announcement.set("Signature captured");
+		this._onChange(this._value);
+		this.signatureChange.emit(this._value);
+	}
+	_setUpContext(canvas) {
+		this._ctx = canvas.getContext("2d");
+		if (this._ctx) this._applyPen(this._ctx);
+	}
+	_contextOf(canvas) {
+		if (!this._ctx) this._setUpContext(canvas);
+		return this._ctx;
+	}
+	_applyPen(ctx) {
+		ctx.strokeStyle = this.penColor();
+		ctx.lineWidth = this.penWidth();
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+	}
+	_clearBitmap() {
+		const canvas = this._canvas()?.nativeElement;
+		this._ctx?.clearRect(0, 0, canvas?.width ?? this.width(), canvas?.height ?? this.height());
+	}
+	_pointOf(clientX, clientY, canvas) {
+		const rect = canvas.getBoundingClientRect();
+		const scaleX = rect.width ? canvas.width / rect.width : 1;
+		const scaleY = rect.height ? canvas.height / rect.height : 1;
+		return {
+			x: (clientX - rect.left) * scaleX,
+			y: (clientY - rect.top) * scaleY
+		};
+	}
+	_normalize() {
+		const source = this._canvas()?.nativeElement;
+		const sourceCtx = this._ctx;
+		if (!source || !sourceCtx) return null;
+		const { data, width, height } = sourceCtx.getImageData(0, 0, source.width, source.height);
+		let minX = width, minY = height, maxX = -1, maxY = -1;
+		for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) if (data[(y * width + x) * 4 + 3] > 0) {
+			if (x < minX) minX = x;
+			if (x > maxX) maxX = x;
+			if (y < minY) minY = y;
+			if (y > maxY) maxY = y;
+		}
+		if (maxX < 0) return null;
+		const padding = 4;
+		minX = Math.max(0, minX - padding);
+		minY = Math.max(0, minY - padding);
+		maxX = Math.min(width - 1, maxX + padding);
+		maxY = Math.min(height - 1, maxY + padding);
+		const cropWidth = maxX - minX + 1;
+		const cropHeight = maxY - minY + 1;
+		const out = document.createElement("canvas");
+		out.width = this.outputWidth();
+		out.height = this.outputHeight();
+		const scale = Math.min(out.width / cropWidth, out.height / cropHeight);
+		const drawWidth = cropWidth * scale;
+		const drawHeight = cropHeight * scale;
+		out.getContext("2d").drawImage(source, minX, minY, cropWidth, cropHeight, 0, (out.height - drawHeight) / 2, drawWidth, drawHeight);
+		return out.toDataURL("image/png");
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
 			version: "22.2.2",
 			ngImport: i0,
-			type: DetailCardComponent,
+			type: SignaturePadComponent,
 			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -28487,99 +29625,812 @@ var DetailCardComponent = class DetailCardComponent {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
 			version: "22.2.2",
-			type: DetailCardComponent,
+			type: SignaturePadComponent,
 			isStandalone: true,
-			selector: "ui-detail-card",
+			selector: "ui-signature-pad",
 			inputs: {
-				title: {
-					classPropertyName: "title",
-					publicName: "title",
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				headingLevel: {
-					classPropertyName: "headingLevel",
-					publicName: "headingLevel",
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				titleId: {
-					classPropertyName: "titleId",
-					publicName: "titleId",
+				hint: {
+					classPropertyName: "hint",
+					publicName: "hint",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				ariaLabel: {
-					classPropertyName: "ariaLabel",
-					publicName: "ariaLabel",
+				error: {
+					classPropertyName: "error",
+					publicName: "error",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				subtitle: {
-					classPropertyName: "subtitle",
-					publicName: "subtitle",
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				background: {
-					classPropertyName: "background",
-					publicName: "background",
+				height: {
+					classPropertyName: "height",
+					publicName: "height",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				textColor: {
-					classPropertyName: "textColor",
-					publicName: "textColor",
+				outputWidth: {
+					classPropertyName: "outputWidth",
+					publicName: "outputWidth",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				showHeader: {
-					classPropertyName: "showHeader",
-					publicName: "showHeader",
+				outputHeight: {
+					classPropertyName: "outputHeight",
+					publicName: "outputHeight",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				collapsible: {
-					classPropertyName: "collapsible",
-					publicName: "collapsible",
+				penColor: {
+					classPropertyName: "penColor",
+					publicName: "penColor",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				expanded: {
-					classPropertyName: "expanded",
-					publicName: "expanded",
+				penWidth: {
+					classPropertyName: "penWidth",
+					publicName: "penWidth",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				showEdit: {
-					classPropertyName: "showEdit",
-					publicName: "showEdit",
+				showClear: {
+					classPropertyName: "showClear",
+					publicName: "showClear",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				editLabel: {
-					classPropertyName: "editLabel",
-					publicName: "editLabel",
+				clearLabel: {
+					classPropertyName: "clearLabel",
+					publicName: "clearLabel",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
-				}
-			},
-			outputs: {
-				expanded: "expandedChange",
-				editClick: "editClick"
-			},
+				},
+				_disabledInput: {
+					classPropertyName: "_disabledInput",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { signatureChange: "signatureChange" },
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => SignaturePadComponent),
+				multi: true
+			}],
+			viewQueries: [{
+				propertyName: "_canvas",
+				first: true,
+				predicate: ["canvas"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="sp-field" [class.sp-disabled]="disabled()" [class.sp-error]="!!error()">
+      @if (label()) {
+        <span class="sp-label" [id]="_labelId">{{ label() }}</span>
+      }
+      <div class="sp-pad">
+        <canvas
+          #canvas
+          class="sp-canvas"
+          role="application"
+          [width]="width()"
+          [height]="height()"
+          [style.aspect-ratio]="width() + ' / ' + height()"
+          [attr.tabindex]="disabled() ? null : 0"
+          [attr.aria-label]="_accessibleName()"
+          [attr.aria-labelledby]="!ariaLabel() && label() ? _labelId : null"
+          [attr.aria-describedby]="_describedBy()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          (pointerdown)="onPointerDown($event)"
+          (pointermove)="onPointerMove($event)"
+          (pointerup)="onPointerEnd($event)"
+          (pointercancel)="onPointerEnd($event)"
+          (lostpointercapture)="onPointerEnd($event)"
+          (keydown)="onKeyDown($event)"
+          (keyup)="onKeyUp($event)"
+          (blur)="onBlur()"></canvas>
+        @if (_cursorVisible()) {
+          <span class="sp-cursor" [class.is-drawing]="_keyboardDrawing()" [style.left.%]="_cursorX() / width() * 100" [style.top.%]="_cursorY() / height() * 100"></span>
+        }
+      </div>
+      <span class="sp-sr" [id]="_helpId">{{ _keyboardHelp }}</span>
+      <span class="sp-sr" role="status" aria-live="polite">{{ _announcement() }}</span>
+      @if (error()) {
+        <p class="sp-desc sp-desc-error" [id]="_descId" role="alert">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="sp-desc" [id]="_descId">{{ hint() }}</p>
+      }
+      @if (showClear()) {
+        <ui-button variant="secondary" size="sm" [disabled]="disabled() || _empty()" (click)="clear()">{{ clearLabel() }}</ui-button>
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.sp-field{display:flex;flex-direction:column;gap:6px}.sp-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.sp-pad{position:relative;border:2px solid #d1d5db;border-radius:8px;background:#f9fafb}.sp-error .sp-pad{border-color:#ef4444}.sp-canvas{display:block;width:100%;height:auto;cursor:crosshair;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:6px}.sp-canvas:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-disabled .sp-pad{opacity:.5}.sp-disabled .sp-canvas{cursor:not-allowed}.sp-cursor{position:absolute;width:8px;height:8px;border-radius:9999px;pointer-events:none;background:#2563eb;border:2px solid #fff;box-shadow:0 1px 4px #00000059;transform:translate(-50%,-50%)}.sp-cursor.is-drawing{animation:sp-pulse 1s ease-in-out infinite}@keyframes sp-pulse{50%{opacity:.5}}@media(prefers-reduced-motion:reduce){.sp-cursor.is-drawing{animation:none}}.sp-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.sp-desc-error{color:#ef4444}.sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"],
+			dependencies: [{
+				kind: "component",
+				type: ButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"variant",
+					"routerLink",
+					"queryParams",
+					"fragment",
+					"href",
+					"target",
+					"rel",
+					"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: SignaturePadComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-signature-pad",
+			standalone: true,
+			imports: [ButtonComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => SignaturePadComponent),
+				multi: true
+			}],
+			template: `
+    <div class="sp-field" [class.sp-disabled]="disabled()" [class.sp-error]="!!error()">
+      @if (label()) {
+        <span class="sp-label" [id]="_labelId">{{ label() }}</span>
+      }
+      <div class="sp-pad">
+        <canvas
+          #canvas
+          class="sp-canvas"
+          role="application"
+          [width]="width()"
+          [height]="height()"
+          [style.aspect-ratio]="width() + ' / ' + height()"
+          [attr.tabindex]="disabled() ? null : 0"
+          [attr.aria-label]="_accessibleName()"
+          [attr.aria-labelledby]="!ariaLabel() && label() ? _labelId : null"
+          [attr.aria-describedby]="_describedBy()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          (pointerdown)="onPointerDown($event)"
+          (pointermove)="onPointerMove($event)"
+          (pointerup)="onPointerEnd($event)"
+          (pointercancel)="onPointerEnd($event)"
+          (lostpointercapture)="onPointerEnd($event)"
+          (keydown)="onKeyDown($event)"
+          (keyup)="onKeyUp($event)"
+          (blur)="onBlur()"></canvas>
+        @if (_cursorVisible()) {
+          <span class="sp-cursor" [class.is-drawing]="_keyboardDrawing()" [style.left.%]="_cursorX() / width() * 100" [style.top.%]="_cursorY() / height() * 100"></span>
+        }
+      </div>
+      <span class="sp-sr" [id]="_helpId">{{ _keyboardHelp }}</span>
+      <span class="sp-sr" role="status" aria-live="polite">{{ _announcement() }}</span>
+      @if (error()) {
+        <p class="sp-desc sp-desc-error" [id]="_descId" role="alert">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="sp-desc" [id]="_descId">{{ hint() }}</p>
+      }
+      @if (showClear()) {
+        <ui-button variant="secondary" size="sm" [disabled]="disabled() || _empty()" (click)="clear()">{{ clearLabel() }}</ui-button>
+      }
+    </div>
+  `,
+			styles: [":host{display:block}.sp-field{display:flex;flex-direction:column;gap:6px}.sp-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.sp-pad{position:relative;border:2px solid #d1d5db;border-radius:8px;background:#f9fafb}.sp-error .sp-pad{border-color:#ef4444}.sp-canvas{display:block;width:100%;height:auto;cursor:crosshair;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:6px}.sp-canvas:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-disabled .sp-pad{opacity:.5}.sp-disabled .sp-canvas{cursor:not-allowed}.sp-cursor{position:absolute;width:8px;height:8px;border-radius:9999px;pointer-events:none;background:#2563eb;border:2px solid #fff;box-shadow:0 1px 4px #00000059;transform:translate(-50%,-50%)}.sp-cursor.is-drawing{animation:sp-pulse 1s ease-in-out infinite}@keyframes sp-pulse{50%{opacity:.5}}@media(prefers-reduced-motion:reduce){.sp-cursor.is-drawing{animation:none}}.sp-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.sp-desc-error{color:#ef4444}.sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		outputWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "outputWidth",
+				required: false
+			}]
+		}],
+		outputHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "outputHeight",
+				required: false
+			}]
+		}],
+		penColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "penColor",
+				required: false
+			}]
+		}],
+		penWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "penWidth",
+				required: false
+			}]
+		}],
+		showClear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showClear",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		_disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		signatureChange: [{
+			type: i0.Output,
+			args: ["signatureChange"]
+		}],
+		_canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+var PdfHotspotComponent = class PdfHotspotComponent {
+	constructor() {
+		this.x = input(0, ...ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []);
+		this.y = input(0, ...ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []);
+		this.width = input(0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = input(0, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.state = input("ready", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+		this.tone = input("primary", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+		this.label = input("Sign Here", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.blockedLabel = input("", ...ngDevMode ? [{ debugName: "blockedLabel" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.image = input(null, ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
+		this.imageAlt = input("Applied signature", ...ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []);
+		this.scale = input(1, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+		this.activate = output();
+		this._scaleVar = computed(() => {
+			const s = this.scale();
+			return typeof s === "number" && Number.isFinite(s) && s > 0 && s !== 1 ? String(s) : null;
+		}, ...ngDevMode ? [{ debugName: "_scaleVar" }] : /* istanbul ignore next */ []);
+		this.fontSize = computed(() => Math.min(11, Math.max(7, this.height() * .25)), ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PdfHotspotComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: PdfHotspotComponent,
+			isStandalone: true,
+			selector: "ui-pdf-hotspot",
+			inputs: {
+				x: {
+					classPropertyName: "x",
+					publicName: "x",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				y: {
+					classPropertyName: "y",
+					publicName: "y",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				height: {
+					classPropertyName: "height",
+					publicName: "height",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				state: {
+					classPropertyName: "state",
+					publicName: "state",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tone: {
+					classPropertyName: "tone",
+					publicName: "tone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				blockedLabel: {
+					classPropertyName: "blockedLabel",
+					publicName: "blockedLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				image: {
+					classPropertyName: "image",
+					publicName: "image",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				imageAlt: {
+					classPropertyName: "imageAlt",
+					publicName: "imageAlt",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				scale: {
+					classPropertyName: "scale",
+					publicName: "scale",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { activate: "activate" },
+			host: { properties: {
+				"style.left.px": "x()",
+				"style.top.px": "y()",
+				"style.width.px": "width()",
+				"style.height.px": "height()",
+				"attr.data-state": "state()",
+				"style.--ph-scale": "_scaleVar()"
+			} },
+			ngImport: i0,
+			template: `
+    @if (state() === 'signed' && image()) {
+      <img class="ph-image" [src]="image()" [alt]="imageAlt()" />
+    } @else {
+      <button
+        type="button"
+        class="ph-button"
+        [class.ph-ready]="state() === 'ready'"
+        [class.ph-warning]="tone() === 'warning'"
+        [disabled]="state() !== 'ready'"
+        [attr.aria-label]="ariaLabel() || null"
+        [style.font-size.px]="fontSize()"
+        (click)="activate.emit()"><span class="ph-text">{{ state() === 'blocked' ? blockedLabel() : label() }}</span></button>
+    }
+  `,
+			isInline: true,
+			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:calc(44px / var(--ph-scale, 1));transform:translateY(-50%)}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PdfHotspotComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-pdf-hotspot",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[style.left.px]": "x()",
+				"[style.top.px]": "y()",
+				"[style.width.px]": "width()",
+				"[style.height.px]": "height()",
+				"[attr.data-state]": "state()",
+				"[style.--ph-scale]": "_scaleVar()"
+			},
+			template: `
+    @if (state() === 'signed' && image()) {
+      <img class="ph-image" [src]="image()" [alt]="imageAlt()" />
+    } @else {
+      <button
+        type="button"
+        class="ph-button"
+        [class.ph-ready]="state() === 'ready'"
+        [class.ph-warning]="tone() === 'warning'"
+        [disabled]="state() !== 'ready'"
+        [attr.aria-label]="ariaLabel() || null"
+        [style.font-size.px]="fontSize()"
+        (click)="activate.emit()"><span class="ph-text">{{ state() === 'blocked' ? blockedLabel() : label() }}</span></button>
+    }
+  `,
+			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:calc(44px / var(--ph-scale, 1));transform:translateY(-50%)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		x: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "x",
+				required: false
+			}]
+		}],
+		y: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "y",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		blockedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "blockedLabel",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		image: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "image",
+				required: false
+			}]
+		}],
+		imageAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageAlt",
+				required: false
+			}]
+		}],
+		scale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scale",
+				required: false
+			}]
+		}],
+		activate: [{
+			type: i0.Output,
+			args: ["activate"]
+		}]
+	}
+});
+var DetailCardComponent = class DetailCardComponent {
+	constructor() {
+		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.uppercaseTitle = input(true, ...ngDevMode ? [{ debugName: "uppercaseTitle" }] : /* istanbul ignore next */ []);
+		this.headingLevel = input(null, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+		this.titleId = input("", ...ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []);
+		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.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 */ []);
+		this.expanded = model(true, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+		this.showEdit = input(false, ...ngDevMode ? [{ debugName: "showEdit" }] : /* istanbul ignore next */ []);
+		this.editLabel = input("Edit", ...ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []);
+		this.editClick = output();
+	}
+	groupLabel() {
+		if (this.showHeader() && this.title()) return this.titleId() ? null : this.title();
+		return this.ariaLabel().trim() || null;
+	}
+	isOpen() {
+		return !(this.showHeader() && this.collapsible()) || this.expanded();
+	}
+	toggle() {
+		this.expanded.set(!this.expanded());
+	}
+	onHeaderClick(event) {
+		if (!this.showHeader() || !this.collapsible()) return;
+		if (event.target?.closest("button, a, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [tabindex]:not([tabindex=\"-1\"])")?.closest(".dc-header")) return;
+		this.toggle();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DetailCardComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: DetailCardComponent,
+			isStandalone: true,
+			selector: "ui-detail-card",
+			inputs: {
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				uppercaseTitle: {
+					classPropertyName: "uppercaseTitle",
+					publicName: "uppercaseTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				headingLevel: {
+					classPropertyName: "headingLevel",
+					publicName: "headingLevel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				titleId: {
+					classPropertyName: "titleId",
+					publicName: "titleId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				subtitle: {
+					classPropertyName: "subtitle",
+					publicName: "subtitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				background: {
+					classPropertyName: "background",
+					publicName: "background",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				textColor: {
+					classPropertyName: "textColor",
+					publicName: "textColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showHeader: {
+					classPropertyName: "showHeader",
+					publicName: "showHeader",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapsible: {
+					classPropertyName: "collapsible",
+					publicName: "collapsible",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				expanded: {
+					classPropertyName: "expanded",
+					publicName: "expanded",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showEdit: {
+					classPropertyName: "showEdit",
+					publicName: "showEdit",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editLabel: {
+					classPropertyName: "editLabel",
+					publicName: "editLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				expanded: "expandedChange",
+				editClick: "editClick"
+			},
 			host: {
 				attributes: { "role": "group" },
 				properties: {
@@ -28605,7 +30456,7 @@ var DetailCardComponent = class DetailCardComponent {
           }
           <ng-content select="[card-header-leading]" />
           <div class="dc-header-text">
-            @if (title()) { <span class="dc-title" [attr.id]="titleId() || null" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ title() }}</span> }
+            @if (title()) { <span class="dc-title" [class.dc-title--as-written]="!uppercaseTitle()" [attr.id]="titleId() || null" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ title() }}</span> }
             @if (subtitle()) { <span class="dc-subtitle">{{ subtitle() }}</span> }
             <ng-content select="[card-header]" />
           </div>
@@ -28629,7 +30480,7 @@ var DetailCardComponent = class DetailCardComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -28638,6 +30489,7 @@ var DetailCardComponent = class DetailCardComponent {
 					"variant",
 					"routerLink",
 					"queryParams",
+					"fragment",
 					"href",
 					"target",
 					"rel",
@@ -28694,7 +30546,7 @@ i0.ɵɵngDeclareClassMetadata({
           }
           <ng-content select="[card-header-leading]" />
           <div class="dc-header-text">
-            @if (title()) { <span class="dc-title" [attr.id]="titleId() || null" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ title() }}</span> }
+            @if (title()) { <span class="dc-title" [class.dc-title--as-written]="!uppercaseTitle()" [attr.id]="titleId() || null" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ title() }}</span> }
             @if (subtitle()) { <span class="dc-subtitle">{{ subtitle() }}</span> }
             <ng-content select="[card-header]" />
           </div>
@@ -28717,7 +30569,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     </div>
   `,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -28729,6 +30581,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		uppercaseTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uppercaseTitle",
+				required: false
+			}]
+		}],
 		headingLevel: [{
 			type: i0.Input,
 			args: [{
@@ -30248,6 +32108,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, 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, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, SidePanelComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, 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 };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormColSpanDirective, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, 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 };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map