@forgeroute/ui 0.4.6 → 0.4.8

package/fesm2022/forgeroute-ui.mjs

@@ -2552,6 +2552,8 @@ var CheckboxComponent = class CheckboxComponent {
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.testId = input("", ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.headingLevel = input(null, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
 		this.indeterminate = input(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
 		this.checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
 		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
@@ -2707,6 +2709,20 @@ var CheckboxComponent = class CheckboxComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				headingLevel: {
+					classPropertyName: "headingLevel",
+					publicName: "headingLevel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				indeterminate: {
 					classPropertyName: "indeterminate",
 					publicName: "indeterminate",
@@ -2899,6 +2915,7 @@ var CheckboxComponent = class CheckboxComponent {
         class="cb-hidden"
         [checked]="checked()"
         [disabled]="disabled()"
+        [attr.data-testid]="testId() || null"
         [attr.aria-label]="ariaLabel() || null"
         [attr.aria-checked]="indeterminate() && !checked() ? 'mixed' : null"
         [attr.aria-required]="required() ? 'true' : null"
@@ -2907,7 +2924,7 @@ var CheckboxComponent = class CheckboxComponent {
         (change)="onToggle($event)"
       />
       @if (label()) {
-        <span class="cb-label">{{ label() }}</span>
+        <span class="cb-label" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ label() }}</span>
       }
       <ng-content />
     </label>
@@ -3038,6 +3055,7 @@ i0.ɵɵngDeclareClassMetadata({
         class="cb-hidden"
         [checked]="checked()"
         [disabled]="disabled()"
+        [attr.data-testid]="testId() || null"
         [attr.aria-label]="ariaLabel() || null"
         [attr.aria-checked]="indeterminate() && !checked() ? 'mixed' : null"
         [attr.aria-required]="required() ? 'true' : null"
@@ -3046,7 +3064,7 @@ i0.ɵɵngDeclareClassMetadata({
         (change)="onToggle($event)"
       />
       @if (label()) {
-        <span class="cb-label">{{ label() }}</span>
+        <span class="cb-label" [attr.role]="headingLevel() ? 'heading' : null" [attr.aria-level]="headingLevel() || null">{{ label() }}</span>
       }
       <ng-content />
     </label>
@@ -3091,6 +3109,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
 		indeterminate: [{
 			type: i0.Input,
 			args: [{
@@ -3440,6 +3474,7 @@ var ButtonComponent = class ButtonComponent {
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></span>
       } @else {
@@ -3450,6 +3485,7 @@ var ButtonComponent = class ButtonComponent {
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></a>
       }
@@ -3461,6 +3497,7 @@ var ButtonComponent = class ButtonComponent {
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></span>
       } @else {
@@ -3471,6 +3508,7 @@ var ButtonComponent = class ButtonComponent {
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></a>
       }
@@ -3482,6 +3520,7 @@ var ButtonComponent = class ButtonComponent {
       [class.active]="active()"
       [disabled]="disabled() || loading()"
       [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
       [attr.aria-expanded]="ariaExpanded()"
       [attr.aria-pressed]="ariaPressed()"
       [attr.aria-describedby]="ariaDescribedBy() || null"
@@ -3491,7 +3530,7 @@ var ButtonComponent = class ButtonComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #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"],
+			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.btn-full{width:100%}.btn-primary{background:var(--ui-accent, #3B82F6);color:var(--ui-on-accent, #fff);border:1px solid var(--ui-accent, #3B82F6)}.btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #2563EB);border-color:var(--ui-accent-hover, #2563EB)}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:var(--ui-accent, #3b82f6);border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:var(--ui-accent-hover, #60a5fa)}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:var(--ui-accent, #3b82f6);border-bottom-color:var(--ui-accent, #3b82f6)}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -3553,6 +3592,7 @@ i0.ɵɵngDeclareClassMetadata({
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></span>
       } @else {
@@ -3563,6 +3603,7 @@ i0.ɵɵngDeclareClassMetadata({
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></a>
       }
@@ -3574,6 +3615,7 @@ i0.ɵɵngDeclareClassMetadata({
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></span>
       } @else {
@@ -3584,6 +3626,7 @@ i0.ɵɵngDeclareClassMetadata({
           [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
           [class.btn-full]="fullWidth()"
           [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-describedby]="ariaDescribedBy() || null"
         ><ng-container [ngTemplateOutlet]="content" /></a>
       }
@@ -3595,6 +3638,7 @@ i0.ɵɵngDeclareClassMetadata({
       [class.active]="active()"
       [disabled]="disabled() || loading()"
       [attr.aria-label]="ariaLabel()"
+          [attr.aria-busy]="loading() ? 'true' : null"
       [attr.aria-expanded]="ariaExpanded()"
       [attr.aria-pressed]="ariaPressed()"
       [attr.aria-describedby]="ariaDescribedBy() || null"
@@ -3603,7 +3647,7 @@ i0.ɵɵngDeclareClassMetadata({
     ><ng-container [ngTemplateOutlet]="content" /></button>
     }
   `,
-			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #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"]
+			styles: [":host{display:inline-flex}:host(.ui-btn-block){display:flex;width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.btn-full{width:100%}.btn-primary{background:var(--ui-accent, #3B82F6);color:var(--ui-on-accent, #fff);border:1px solid var(--ui-accent, #3B82F6)}.btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #2563EB);border-color:var(--ui-accent-hover, #2563EB)}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-ghost-start{display:flex;width:100%;justify-content:flex-start;text-align:start;white-space:normal;background:transparent;color:#334155;border:1px solid transparent}.btn-ghost-start:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:var(--ui-accent, #3b82f6);border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:var(--ui-accent-hover, #60a5fa)}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:var(--ui-accent, #3b82f6);border-bottom-color:var(--ui-accent, #3b82f6)}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -3786,6 +3830,7 @@ var TextInputComponent = class TextInputComponent {
 		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.valueChange = output();
 		this.focused = output();
 		this.blurred = output();
 		this.invalidChange = output();
@@ -3858,7 +3903,9 @@ var TextInputComponent = class TextInputComponent {
 		const format = this.formatter();
 		if (format) val = format(val);
 		this._value.set(val);
-		this._onChange(this._numeric() ? TextInputComponent._parse(val) : val);
+		const emitted = this._numeric() ? TextInputComponent._parse(val) : val;
+		this._onChange(emitted);
+		this.valueChange.emit(emitted);
 		const shown = this._value();
 		if (input.value !== shown) {
 			input.value = shown;
@@ -4111,6 +4158,7 @@ var TextInputComponent = class TextInputComponent {
 				}
 			},
 			outputs: {
+				valueChange: "valueChange",
 				focused: "focused",
 				blurred: "blurred",
 				invalidChange: "invalidChange"
@@ -4413,6 +4461,10 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
 		focused: [{
 			type: i0.Output,
 			args: ["focused"]
@@ -4826,6 +4878,8 @@ var TableToolbarComponent = class TableToolbarComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"testId",
+						"headingLevel",
 						"indeterminate",
 						"checked",
 						"options",
@@ -4902,6 +4956,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"disabled"
 					],
 					outputs: [
+						"valueChange",
 						"focused",
 						"blurred",
 						"invalidChange"
@@ -5781,6 +5836,7 @@ var ProgressBarComponent = class ProgressBarComponent {
 		this.max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.variant = input(null, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.color = input("", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 		this.tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []);
@@ -5850,6 +5906,13 @@ var ProgressBarComponent = class ProgressBarComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				color: {
+					classPropertyName: "color",
+					publicName: "color",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				tooltip: {
 					classPropertyName: "tooltip",
 					publicName: "tooltip",
@@ -5891,12 +5954,12 @@ var ProgressBarComponent = class ProgressBarComponent {
          [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() || label() || null)"
          [uiTooltip]="tooltip()"
          [attr.tabindex]="tooltip() ? 0 : null">
-      <div class="pb-track"><div class="pb-fill" [class]="'pb-fill pb-' + effectiveVariant()" [style.width.%]="percent()"></div></div>
+      <div class="pb-track"><div class="pb-fill" [class]="'pb-fill pb-' + effectiveVariant()" [style.width.%]="percent()" [style.background]="color() || null"></div></div>
       @if (label()) { <span class="pb-label">{{ label() }}</span> }
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.pb{display:flex;align-items:center;gap:8px;min-width:100px}.pb-track{flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}.pb-fill{height:100%;border-radius:3px;transition:width .3s}@media(prefers-reduced-motion:reduce){.pb-fill{transition:none}}.pb-blue{background:#3b82f6}.pb-green{background:#16a34a}.pb-amber{background:#f59e0b}.pb-red{background:#ef4444}.pb-slate{background:#94a3b8}@media(forced-colors:active){.pb-track{background:Canvas;border:1px solid CanvasText}.pb-fill{background:Highlight;forced-color-adjust:none}}.pb-label{font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap}\n"],
+			styles: [":host{display:block}.pb{display:flex;align-items:center;gap:8px;min-width:100px}.pb-track{flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}.pb-fill{height:100%;border-radius:3px;transition:width .3s}@media(prefers-reduced-motion:reduce){.pb-fill{transition:none}}.pb-blue{background:var(--ui-progress-fill, var(--ui-accent, #3b82f6))}.pb-green{background:#16a34a}.pb-amber{background:#f59e0b}.pb-red{background:#ef4444}.pb-slate{background:#94a3b8}@media(forced-colors:active){.pb-track{background:Canvas;border:1px solid CanvasText}.pb-fill{background:Highlight;forced-color-adjust:none}}.pb-label{font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: TooltipDirective,
@@ -5930,11 +5993,11 @@ i0.ɵɵngDeclareClassMetadata({
          [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() || label() || null)"
          [uiTooltip]="tooltip()"
          [attr.tabindex]="tooltip() ? 0 : null">
-      <div class="pb-track"><div class="pb-fill" [class]="'pb-fill pb-' + effectiveVariant()" [style.width.%]="percent()"></div></div>
+      <div class="pb-track"><div class="pb-fill" [class]="'pb-fill pb-' + effectiveVariant()" [style.width.%]="percent()" [style.background]="color() || null"></div></div>
       @if (label()) { <span class="pb-label">{{ label() }}</span> }
     </div>
   `,
-			styles: [":host{display:block}.pb{display:flex;align-items:center;gap:8px;min-width:100px}.pb-track{flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}.pb-fill{height:100%;border-radius:3px;transition:width .3s}@media(prefers-reduced-motion:reduce){.pb-fill{transition:none}}.pb-blue{background:#3b82f6}.pb-green{background:#16a34a}.pb-amber{background:#f59e0b}.pb-red{background:#ef4444}.pb-slate{background:#94a3b8}@media(forced-colors:active){.pb-track{background:Canvas;border:1px solid CanvasText}.pb-fill{background:Highlight;forced-color-adjust:none}}.pb-label{font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap}\n"]
+			styles: [":host{display:block}.pb{display:flex;align-items:center;gap:8px;min-width:100px}.pb-track{flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}.pb-fill{height:100%;border-radius:3px;transition:width .3s}@media(prefers-reduced-motion:reduce){.pb-fill{transition:none}}.pb-blue{background:var(--ui-progress-fill, var(--ui-accent, #3b82f6))}.pb-green{background:#16a34a}.pb-amber{background:#f59e0b}.pb-red{background:#ef4444}.pb-slate{background:#94a3b8}@media(forced-colors:active){.pb-track{background:Canvas;border:1px solid CanvasText}.pb-fill{background:Highlight;forced-color-adjust:none}}.pb-label{font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -5970,6 +6033,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
 		tooltip: [{
 			type: i0.Input,
 			args: [{
@@ -6034,6 +6105,7 @@ var SelectComponent = class SelectComponent {
 		this.invalid = computed(() => !!this.error() || !!this._issue(), ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 		this.errorMessage = computed(() => this._issue()?.message ?? "", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
 		this.invalidChange = output();
+		this.valueChange = output();
 		this._activeError = computed(() => this.error() || (this._reveal.revealed() ? this.errorMessage() : ""), ...ngDevMode ? [{ debugName: "_activeError" }] : /* istanbul ignore next */ []);
 		this._onValidatorChange = () => {};
 		this._selectId = `sl-${Math.random().toString(36).slice(2, 8)}`;
@@ -6080,7 +6152,9 @@ var SelectComponent = class SelectComponent {
 	onChange(event) {
 		const val = event.target.value;
 		this._value.set(val);
-		this._onChange(this._emitted(val));
+		const emitted = this._emitted(val);
+		this._onChange(emitted);
+		this.valueChange.emit(emitted);
 	}
 	_emitted(key) {
 		if (this.valueType() !== "number") return key;
@@ -6203,7 +6277,10 @@ var SelectComponent = class SelectComponent {
 					transformFunction: null
 				}
 			},
-			outputs: { invalidChange: "invalidChange" },
+			outputs: {
+				invalidChange: "invalidChange",
+				valueChange: "valueChange"
+			},
 			providers: [
 				{
 					provide: NG_VALUE_ACCESSOR,
@@ -6427,6 +6504,10 @@ i0.ɵɵngDeclareClassMetadata({
 		invalidChange: [{
 			type: i0.Output,
 			args: ["invalidChange"]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
 		}]
 	}
 });
@@ -6436,6 +6517,7 @@ var ToastService = class ToastService {
 		this.message = signal(null, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
 		this.type = signal("success", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
 		this.dismissible = signal(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
+		this.persistentLiveRegion = signal(false, ...ngDevMode ? [{ debugName: "persistentLiveRegion" }] : /* istanbul ignore next */ []);
 		this._timer = null;
 		this._deadline = 0;
 		this._remaining = 0;
@@ -6588,6 +6670,8 @@ var ToastComponent = class ToastComponent {
 		this.isHost = computed(() => this._registry.host() === this._id, ...ngDevMode ? [{ debugName: "isHost" }] : /* istanbul ignore next */ []);
 		this.dismissible = input(null, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
 		this.showClose = computed(() => this.dismissible() ?? this.toast.dismissible(), ...ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []);
+		this.persistentLiveRegion = input(null, ...ngDevMode ? [{ debugName: "persistentLiveRegion" }] : /* istanbul ignore next */ []);
+		this.persistent = computed(() => this.persistentLiveRegion() ?? this.toast.persistentLiveRegion(), ...ngDevMode ? [{ debugName: "persistent" }] : /* istanbul ignore next */ []);
 		this._adoptedMessage = signal(null, ...ngDevMode ? [{ debugName: "_adoptedMessage" }] : /* istanbul ignore next */ []);
 		this.adopted = computed(() => {
 			const m = this._adoptedMessage();
@@ -6634,23 +6718,44 @@ var ToastComponent = class ToastComponent {
 			type: ToastComponent,
 			isStandalone: true,
 			selector: "ui-toast",
-			inputs: { dismissible: {
-				classPropertyName: "dismissible",
-				publicName: "dismissible",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			} },
+			inputs: {
+				dismissible: {
+					classPropertyName: "dismissible",
+					publicName: "dismissible",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				persistentLiveRegion: {
+					classPropertyName: "persistentLiveRegion",
+					publicName: "persistentLiveRegion",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
 			ngImport: i0,
 			template: `
-    @if (isHost() && toast.message()) {
+    @if (isHost() && persistent()) {
+      <!-- Opt-in: the live regions are in the DOM before any message, so a screen reader (VoiceOver / Safari included) announces the text when it is added. -->
+      <div class="t-live" role="status" [attr.aria-live]="adopted() ? 'off' : 'polite'" aria-atomic="true" data-testid="toast-live-polite">
+        @if (toast.message() && toast.type() !== 'error') { <ng-container [ngTemplateOutlet]="card" /> }
+      </div>
+      <div class="t-live" role="alert" [attr.aria-live]="adopted() ? 'off' : 'assertive'" aria-atomic="true" data-testid="toast-live-assertive">
+        @if (toast.message() && toast.type() === 'error') { <ng-container [ngTemplateOutlet]="card" /> }
+      </div>
+    } @else if (isHost() && toast.message()) {
+      <ng-container [ngTemplateOutlet]="card" />
+    }
+
+    <ng-template #card>
       <div
         class="t-toast"
         [class.t-error]="toast.type() === 'error'"
         [class.t-info]="toast.type() === 'info'"
         [class.t-adopted]="adopted()"
-        [attr.role]="adopted() ? null : (toast.type() === 'error' ? 'alert' : 'status')"
-        [attr.aria-live]="adopted() ? null : (toast.type() === 'error' ? 'assertive' : 'polite')"
+        [attr.role]="adopted() || persistent() ? null : (toast.type() === 'error' ? 'alert' : 'status')"
+        [attr.aria-live]="adopted() || persistent() ? null : (toast.type() === 'error' ? 'assertive' : 'polite')"
         (mouseenter)="setHover(true)" (mouseleave)="setHover(false)"
         (focusin)="setFocus(true)" (focusout)="onFocusOut($event)"
         (keydown.escape)="onEscape($event)">
@@ -6676,10 +6781,20 @@ var ToastComponent = class ToastComponent {
         </button>
         }
       </div>
-    }
+    </ng-template>
   `,
 			isInline: true,
-			styles: [".t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"],
+			styles: [".t-live{position:absolute;width:0;height:0;margin:0;padding:0;overflow:visible}.t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -6694,16 +6809,29 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-toast",
 			standalone: true,
+			imports: [NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
-    @if (isHost() && toast.message()) {
+    @if (isHost() && persistent()) {
+      <!-- Opt-in: the live regions are in the DOM before any message, so a screen reader (VoiceOver / Safari included) announces the text when it is added. -->
+      <div class="t-live" role="status" [attr.aria-live]="adopted() ? 'off' : 'polite'" aria-atomic="true" data-testid="toast-live-polite">
+        @if (toast.message() && toast.type() !== 'error') { <ng-container [ngTemplateOutlet]="card" /> }
+      </div>
+      <div class="t-live" role="alert" [attr.aria-live]="adopted() ? 'off' : 'assertive'" aria-atomic="true" data-testid="toast-live-assertive">
+        @if (toast.message() && toast.type() === 'error') { <ng-container [ngTemplateOutlet]="card" /> }
+      </div>
+    } @else if (isHost() && toast.message()) {
+      <ng-container [ngTemplateOutlet]="card" />
+    }
+
+    <ng-template #card>
       <div
         class="t-toast"
         [class.t-error]="toast.type() === 'error'"
         [class.t-info]="toast.type() === 'info'"
         [class.t-adopted]="adopted()"
-        [attr.role]="adopted() ? null : (toast.type() === 'error' ? 'alert' : 'status')"
-        [attr.aria-live]="adopted() ? null : (toast.type() === 'error' ? 'assertive' : 'polite')"
+        [attr.role]="adopted() || persistent() ? null : (toast.type() === 'error' ? 'alert' : 'status')"
+        [attr.aria-live]="adopted() || persistent() ? null : (toast.type() === 'error' ? 'assertive' : 'polite')"
         (mouseenter)="setHover(true)" (mouseleave)="setHover(false)"
         (focusin)="setFocus(true)" (focusout)="onFocusOut($event)"
         (keydown.escape)="onEscape($event)">
@@ -6729,20 +6857,30 @@ i0.ɵɵngDeclareClassMetadata({
         </button>
         }
       </div>
-    }
+    </ng-template>
   `,
-			styles: [".t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"]
+			styles: [".t-live{position:absolute;width:0;height:0;margin:0;padding:0;overflow:visible}.t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
-	propDecorators: { dismissible: [{
-		type: i0.Input,
-		args: [{
-			isSignal: true,
-			alias: "dismissible",
-			required: false
+	propDecorators: {
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		persistentLiveRegion: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "persistentLiveRegion",
+				required: false
+			}]
 		}]
-	}] }
+	}
 });
 const MAX_LENGTH = 300;
 const TECHNICAL = [
@@ -7456,7 +7594,7 @@ var ImportExportComponent = class ImportExportComponent {
 						"size",
 						"disabled"
 					],
-					outputs: ["invalidChange"]
+					outputs: ["invalidChange", "valueChange"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -10593,6 +10731,7 @@ var DataTableComponent = class DataTableComponent {
 						"max",
 						"label",
 						"variant",
+						"color",
 						"tooltip",
 						"ariaLabel",
 						"ariaLabelledby",
@@ -10633,6 +10772,8 @@ var DataTableComponent = class DataTableComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"testId",
+						"headingLevel",
 						"indeterminate",
 						"checked",
 						"options",
@@ -10671,13 +10812,13 @@ var DataTableComponent = class DataTableComponent {
 						"size",
 						"disabled"
 					],
-					outputs: ["invalidChange"]
+					outputs: ["invalidChange", "valueChange"]
 				},
 				{
 					kind: "component",
 					type: ToastComponent,
 					selector: "ui-toast",
-					inputs: ["dismissible"]
+					inputs: ["dismissible", "persistentLiveRegion"]
 				},
 				{
 					kind: "component",
@@ -12997,6 +13138,8 @@ var StepperComponent = class StepperComponent {
 		this.clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
 		this.linear = input(true, ...ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []);
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.accentColor = input("", ...ngDevMode ? [{ debugName: "accentColor" }] : /* istanbul ignore next */ []);
+		this.completeColor = input("", ...ngDevMode ? [{ debugName: "completeColor" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("Progress", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.labelsOnSmallScreens = input("current", ...ngDevMode ? [{ debugName: "labelsOnSmallScreens" }] : /* istanbul ignore next */ []);
 		this.stepClick = output();
@@ -13007,10 +13150,11 @@ var StepperComponent = class StepperComponent {
 			const clickable = this.clickable();
 			const linear = this.linear();
 			return steps.map((step, i) => {
-				const state = cur < 0 ? "upcoming" : i < cur ? "complete" : i === cur ? "current" : "upcoming";
+				const derived = cur >= 0 && i < cur ? "complete" : "upcoming";
+				const state = i === cur ? "current" : step.complete === void 0 ? derived : step.complete ? "complete" : "upcoming";
 				const errorMessage = typeof step.error === "string" ? step.error : "";
 				const error = step.error === true || errorMessage !== "";
-				const selectable = clickable && !step.disabled && (linear ? cur >= 0 && i <= cur : true);
+				const selectable = clickable && !step.disabled && state !== "current" && (linear ? state === "complete" : true);
 				const status = state === "complete" ? "completed" : state === "current" ? "current step" : "not started";
 				return {
 					step,
@@ -13091,6 +13235,20 @@ var StepperComponent = class StepperComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				accentColor: {
+					classPropertyName: "accentColor",
+					publicName: "accentColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				completeColor: {
+					classPropertyName: "completeColor",
+					publicName: "completeColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				ariaLabel: {
 					classPropertyName: "ariaLabel",
 					publicName: "ariaLabel",
@@ -13110,6 +13268,10 @@ var StepperComponent = class StepperComponent {
 				current: "currentChange",
 				stepClick: "stepClick"
 			},
+			host: { properties: {
+				"style.--st-accent": "accentColor() || null",
+				"style.--st-complete": "completeColor() || null"
+			} },
 			ngImport: i0,
 			template: `
     <ol class="st"
@@ -13117,6 +13279,7 @@ var StepperComponent = class StepperComponent {
       [class.st-vertical]="orientation() === 'vertical'"
       [class.st-sm]="size() === 'sm'"
       [class.st-labels-current]="labelsOnSmallScreens() === 'current'"
+      [class.st-themed]="!!accentColor()"
       [attr.aria-label]="ariaLabel() || null">
       @for (r of rows(); track r.step.key) {
         <li class="st-step"
@@ -13157,7 +13320,7 @@ var StepperComponent = class StepperComponent {
     </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:block}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:#1d4ed8;border-color:#1d4ed8;color:#fff}.st-step[data-state=current] .st-ind{background:#1d4ed8;border-color:#1d4ed8;color:#fff;box-shadow:0 0 0 3px #bfdbfe}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:#1d4ed8;border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"],
+			styles: [":host{display:block}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current] .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -13184,12 +13347,17 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[style.--st-accent]": "accentColor() || null",
+				"[style.--st-complete]": "completeColor() || null"
+			},
 			template: `
     <ol class="st"
       [class.st-horizontal]="orientation() === 'horizontal'"
       [class.st-vertical]="orientation() === 'vertical'"
       [class.st-sm]="size() === 'sm'"
       [class.st-labels-current]="labelsOnSmallScreens() === 'current'"
+      [class.st-themed]="!!accentColor()"
       [attr.aria-label]="ariaLabel() || null">
       @for (r of rows(); track r.step.key) {
         <li class="st-step"
@@ -13229,7 +13397,7 @@ i0.ɵɵngDeclareClassMetadata({
       <span class="st-sr">{{ r.srText }}</span>
     </ng-template>
   `,
-			styles: [":host{display:block}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:#1d4ed8;border-color:#1d4ed8;color:#fff}.st-step[data-state=current] .st-ind{background:#1d4ed8;border-color:#1d4ed8;color:#fff;box-shadow:0 0 0 3px #bfdbfe}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:#1d4ed8;border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"]
+			styles: [":host{display:block}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current] .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -13284,6 +13452,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		accentColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accentColor",
+				required: false
+			}]
+		}],
+		completeColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "completeColor",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -13790,6 +13974,8 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"testId",
+						"headingLevel",
 						"indeterminate",
 						"checked",
 						"options",
@@ -13828,7 +14014,7 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 						"size",
 						"disabled"
 					],
-					outputs: ["invalidChange"]
+					outputs: ["invalidChange", "valueChange"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -14019,6 +14205,7 @@ var RadioComponent = class RadioComponent {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.testId = input("", ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
 		this.value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 		this.name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 		this.checked = input(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
@@ -14082,6 +14269,13 @@ var RadioComponent = class RadioComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				value: {
 					classPropertyName: "value",
 					publicName: "value",
@@ -14153,6 +14347,7 @@ var RadioComponent = class RadioComponent {
         [value]="value()"
         [checked]="checked()"
         [disabled]="disabled()"
+        [attr.data-testid]="testId() || null"
         [attr.aria-label]="ariaLabel() || null"
         [attr.aria-labelledby]="_labelledBy()"
         [attr.aria-invalid]="invalid() ? 'true' : null"
@@ -14196,6 +14391,7 @@ i0.ɵɵngDeclareClassMetadata({
         [value]="value()"
         [checked]="checked()"
         [disabled]="disabled()"
+        [attr.data-testid]="testId() || null"
         [attr.aria-label]="ariaLabel() || null"
         [attr.aria-labelledby]="_labelledBy()"
         [attr.aria-invalid]="invalid() ? 'true' : null"
@@ -14238,6 +14434,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
 		value: [{
 			type: i0.Input,
 			args: [{
@@ -14588,6 +14792,7 @@ var RadioGroupComponent = class RadioGroupComponent {
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
             [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
             [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
+            [testId]="opt.testId ?? ''"
             (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>
@@ -14611,6 +14816,7 @@ var RadioGroupComponent = class RadioGroupComponent {
 					"label",
 					"description",
 					"ariaLabel",
+					"testId",
 					"value",
 					"name",
 					"checked",
@@ -14693,6 +14899,7 @@ i0.ɵɵngDeclareClassMetadata({
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
             [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
             [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
+            [testId]="opt.testId ?? ''"
             (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>
@@ -14800,6 +15007,7 @@ var AlertComponent = class AlertComponent {
 		this.dismissible = input(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
 		this.quiet = input(false, ...ngDevMode ? [{ debugName: "quiet" }] : /* istanbul ignore next */ []);
 		this.compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+		this.inline = input(false, ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
 		this.dismissed = output();
 	}
 	static {
@@ -14854,6 +15062,13 @@ var AlertComponent = class AlertComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				inline: {
+					classPropertyName: "inline",
+					publicName: "inline",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { dismissed: "dismissed" },
@@ -14862,7 +15077,7 @@ var AlertComponent = class AlertComponent {
     <div class="alert" [class]="'alert alert--' + variant()" [class.alert--compact]="compact()" [attr.role]="quiet() ? null : (variant() === 'danger' ? 'alert' : 'status')">
       <div class="alert-content">
         @if (title()) { <div class="alert-title">{{ title() }}</div> }
-        <div class="alert-body"><ng-content /></div>
+        <div class="alert-body" [class.alert-body--inline]="inline()"><ng-content /></div>
       </div>
       @if (dismissible()) {
         <button class="alert-dismiss" type="button" aria-label="Dismiss" (click)="dismissed.emit()">
@@ -14874,7 +15089,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--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"],
+			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-body--inline{display:block}.alert-body--inline>*{vertical-align:middle}.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
 		});
 	}
@@ -14894,7 +15109,7 @@ i0.ɵɵngDeclareClassMetadata({
     <div class="alert" [class]="'alert alert--' + variant()" [class.alert--compact]="compact()" [attr.role]="quiet() ? null : (variant() === 'danger' ? 'alert' : 'status')">
       <div class="alert-content">
         @if (title()) { <div class="alert-title">{{ title() }}</div> }
-        <div class="alert-body"><ng-content /></div>
+        <div class="alert-body" [class.alert-body--inline]="inline()"><ng-content /></div>
       </div>
       @if (dismissible()) {
         <button class="alert-dismiss" type="button" aria-label="Dismiss" (click)="dismissed.emit()">
@@ -14905,7 +15120,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--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"]
+			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-body--inline{display:block}.alert-body--inline>*{vertical-align:middle}.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: {
@@ -14949,6 +15164,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
 		dismissed: [{
 			type: i0.Output,
 			args: ["dismissed"]
@@ -15452,6 +15675,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"disabled"
 					],
 					outputs: [
+						"valueChange",
 						"focused",
 						"blurred",
 						"invalidChange"
@@ -15510,7 +15734,8 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"title",
 						"dismissible",
 						"quiet",
-						"compact"
+						"compact",
+						"inline"
 					],
 					outputs: ["dismissed"]
 				},
@@ -16601,6 +16826,8 @@ var ContactPickerComponent = class ContactPickerComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"testId",
+						"headingLevel",
 						"indeterminate",
 						"checked",
 						"options",
@@ -17583,6 +17810,7 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 						"disabled"
 					],
 					outputs: [
+						"valueChange",
 						"focused",
 						"blurred",
 						"invalidChange"
@@ -17725,11 +17953,53 @@ const SIZE_REM = {
 	md: "0.875rem",
 	lg: "1rem"
 };
+const WEIGHT = {
+	normal: null,
+	medium: "500",
+	semibold: "600",
+	bold: "700"
+};
 var TextComponent = class TextComponent {
 	constructor() {
 		this.text = input("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 		this.tone = input("default", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+		this.strong = input(null, ...ngDevMode ? [{ debugName: "strong" }] : /* istanbul ignore next */ []);
+		this.segments = computed(() => {
+			const text = this.text() ?? "";
+			const raw = this.strong();
+			const needles = (Array.isArray(raw) ? raw : raw ? [raw] : []).filter((n) => typeof n === "string" && n !== "").sort((a, b) => b.length - a.length);
+			if (!text || !needles.length) return [];
+			const out = [];
+			let i = 0, plain = "";
+			while (i < text.length) {
+				const hit = needles.find((n) => text.startsWith(n, i));
+				if (hit) {
+					if (plain) {
+						out.push({
+							text: plain,
+							strong: false
+						});
+						plain = "";
+					}
+					out.push({
+						text: hit,
+						strong: true
+					});
+					i += hit.length;
+				} else {
+					plain += text[i];
+					i++;
+				}
+			}
+			if (plain) out.push({
+				text: plain,
+				strong: false
+			});
+			return out.some((s) => s.strong) ? out : [];
+		}, ...ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []);
+		this.weight = input("normal", ...ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []);
+		this.fontWeight = computed(() => WEIGHT[this.weight()] ?? null, ...ngDevMode ? [{ debugName: "fontWeight" }] : /* istanbul ignore next */ []);
 		this.fontSize = computed(() => SIZE_REM[this.size()] ?? SIZE_REM.md, ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
 	}
 	static {
@@ -17744,7 +18014,7 @@ var TextComponent = class TextComponent {
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.1.0",
+			minVersion: "17.0.0",
 			version: "22.2.2",
 			type: TextComponent,
 			isStandalone: true,
@@ -17770,12 +18040,26 @@ var TextComponent = class TextComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				strong: {
+					classPropertyName: "strong",
+					publicName: "strong",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				weight: {
+					classPropertyName: "weight",
+					publicName: "weight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
-			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()">{{ text() }}</div>`,
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()" [style.font-weight]="fontWeight()">{{ segments().length ? '' : text() }}@for (s of segments(); track $index) {@if (s.strong) {<strong>{{ s.text }}</strong>} @else {<ng-container>{{ s.text }}</ng-container>}}</div>`,
 			isInline: true,
-			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}\n"],
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}.tx strong{font-weight:700}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -17791,8 +18075,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-text",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()">{{ text() }}</div>`,
-			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}\n"]
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()" [style.font-weight]="fontWeight()">{{ segments().length ? '' : text() }}@for (s of segments(); track $index) {@if (s.strong) {<strong>{{ s.text }}</strong>} @else {<ng-container>{{ s.text }}</ng-container>}}</div>`,
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}.tx strong{font-weight:700}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -17819,6 +18103,22 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "tone",
 				required: false
 			}]
+		}],
+		strong: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strong",
+				required: false
+			}]
+		}],
+		weight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weight",
+				required: false
+			}]
 		}]
 	}
 });
@@ -18969,6 +19269,7 @@ var DateInputComponent = class DateInputComponent {
 		this.invalid = computed(() => !!this.error() || !!this._issue(), ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 		this.errorMessage = computed(() => this._issue()?.message ?? "", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
 		this.invalidChange = output();
+		this.valueChange = output();
 		this._activeError = computed(() => this.error() || (this._reveal.revealed() ? this.errorMessage() : ""), ...ngDevMode ? [{ debugName: "_activeError" }] : /* istanbul ignore next */ []);
 		this._onValidatorChange = () => {};
 		this._inputId = `di-${Math.random().toString(36).slice(2, 8)}`;
@@ -19004,6 +19305,7 @@ var DateInputComponent = class DateInputComponent {
 		const val = event.target.value;
 		this._value.set(val);
 		this._onChange(val);
+		this.valueChange.emit(val);
 	}
 	onBlur() {
 		this._onTouched();
@@ -19113,7 +19415,10 @@ var DateInputComponent = class DateInputComponent {
 					transformFunction: null
 				}
 			},
-			outputs: { invalidChange: "invalidChange" },
+			outputs: {
+				invalidChange: "invalidChange",
+				valueChange: "valueChange"
+			},
 			providers: [
 				{
 					provide: NG_VALUE_ACCESSOR,
@@ -19295,6 +19600,10 @@ i0.ɵɵngDeclareClassMetadata({
 		invalidChange: [{
 			type: i0.Output,
 			args: ["invalidChange"]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
 		}]
 	}
 });
@@ -21245,6 +21554,8 @@ var MultiSelectComponent = class MultiSelectComponent {
 				inputs: [
 					"label",
 					"ariaLabel",
+					"testId",
+					"headingLevel",
 					"indeterminate",
 					"checked",
 					"options",
@@ -21571,6 +21882,8 @@ var DiscountSelectorComponent = class DiscountSelectorComponent {
 				inputs: [
 					"label",
 					"ariaLabel",
+					"testId",
+					"headingLevel",
 					"indeterminate",
 					"checked",
 					"options",
@@ -22099,52 +22412,63 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var FormSectionComponent = class FormSectionComponent {
+var FormComponent = class FormComponent {
 	constructor() {
-		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
-		this.divider = input(false, ...ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []);
+		this.autocomplete = input("", ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+		this.submitted = output();
+	}
+	onSubmit(event) {
+		event.preventDefault();
+		this.submitted.emit(event);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
 			version: "22.2.2",
 			ngImport: i0,
-			type: FormSectionComponent,
+			type: FormComponent,
 			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.0.0",
+			minVersion: "17.1.0",
 			version: "22.2.2",
-			type: FormSectionComponent,
+			type: FormComponent,
 			isStandalone: true,
-			selector: "ui-form-section",
+			selector: "ui-form",
 			inputs: {
-				label: {
-					classPropertyName: "label",
-					publicName: "label",
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				divider: {
-					classPropertyName: "divider",
-					publicName: "divider",
+				ariaLabelledby: {
+					classPropertyName: "ariaLabelledby",
+					publicName: "ariaLabelledby",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				autocomplete: {
+					classPropertyName: "autocomplete",
+					publicName: "autocomplete",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				}
 			},
+			outputs: { submitted: "submitted" },
 			ngImport: i0,
-			template: `
-    @if (divider()) { <div class="fs-divider"></div> }
-    @if (label()) { <p class="fs-label">{{ label() }}</p> }
-    <div class="fs-fields"><ng-content /></div>
-  `,
+			template: `<form class="uf" novalidate [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
+    [attr.autocomplete]="autocomplete() || null" (submit)="onSubmit($event)"><ng-content /></form>`,
 			isInline: true,
-			styles: [":host{display:block}.fs-divider{height:1px;background:#f1f5f9;margin:8px -24px 16px}.fs-label{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin:0 0 12px}.fs-fields{display:flex;flex-direction:column;gap:14px}\n"],
+			styles: [":host{display:block}.uf{display:block;margin:0;padding:0}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -22153,27 +22477,124 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: FormSectionComponent,
+	type: FormComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-form-section",
+			selector: "ui-form",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `
-    @if (divider()) { <div class="fs-divider"></div> }
-    @if (label()) { <p class="fs-label">{{ label() }}</p> }
-    <div class="fs-fields"><ng-content /></div>
-  `,
-			styles: [":host{display:block}.fs-divider{height:1px;background:#f1f5f9;margin:8px -24px 16px}.fs-label{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin:0 0 12px}.fs-fields{display:flex;flex-direction:column;gap:14px}\n"]
+			template: `<form class="uf" novalidate [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
+    [attr.autocomplete]="autocomplete() || null" (submit)="onSubmit($event)"><ng-content /></form>`,
+			styles: [":host{display:block}.uf{display:block;margin:0;padding:0}\n"]
 		}]
 	}],
 	propDecorators: {
-		label: [{
+		ariaLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "label",
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}],
+		submitted: [{
+			type: i0.Output,
+			args: ["submitted"]
+		}]
+	}
+});
+var FormSectionComponent = class FormSectionComponent {
+	constructor() {
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.divider = input(false, ...ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormSectionComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: FormSectionComponent,
+			isStandalone: true,
+			selector: "ui-form-section",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				divider: {
+					classPropertyName: "divider",
+					publicName: "divider",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    @if (divider()) { <div class="fs-divider"></div> }
+    @if (label()) { <p class="fs-label">{{ label() }}</p> }
+    <div class="fs-fields"><ng-content /></div>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.fs-divider{height:1px;background:#f1f5f9;margin:8px -24px 16px}.fs-label{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin:0 0 12px}.fs-fields{display:flex;flex-direction:column;gap:14px}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FormSectionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-form-section",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (divider()) { <div class="fs-divider"></div> }
+    @if (label()) { <p class="fs-label">{{ label() }}</p> }
+    <div class="fs-fields"><ng-content /></div>
+  `,
+			styles: [":host{display:block}.fs-divider{height:1px;background:#f1f5f9;margin:8px -24px 16px}.fs-label{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin:0 0 12px}.fs-fields{display:flex;flex-direction:column;gap:14px}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
 				required: false
 			}]
 		}],
@@ -22216,9 +22637,9 @@ var FormRowComponent = class FormRowComponent {
 				transformFunction: null
 			} },
 			ngImport: i0,
-			template: `<div class="fr-row" [style.--fr-cols]="cols()"><ng-content /></div>`,
+			template: `<div class="fr-row" [class.fr-row--4]="cols() === 4" [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}.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"],
+			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:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>::ng-deep .ui-span-3{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
 		});
 	}
@@ -22234,8 +22655,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-form-row",
 			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}.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"]
+			template: `<div class="fr-row" [class.fr-row--4]="cols() === 4" [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}.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:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>::ng-deep .ui-span-3{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: [{
@@ -22705,6 +23126,7 @@ i0.ɵɵngDeclareClassMetadata({
 function provideForgerouteToast(options = {}) {
 	return makeEnvironmentProviders([provideEnvironmentInitializer(() => {
 		if (options.dismissible) inject(ToastService).dismissible.set(true);
+		if (options.persistentLiveRegion) inject(ToastService).persistentLiveRegion.set(true);
 		if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
 		const doc = inject(DOCUMENT);
 		const appRef = inject(ApplicationRef);
@@ -23637,6 +24059,7 @@ var BarRowComponent = class BarRowComponent {
 					"max",
 					"label",
 					"variant",
+					"color",
 					"tooltip",
 					"ariaLabel",
 					"ariaLabelledby",
@@ -24671,6 +25094,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 	constructor() {
 		this.sections = input([], ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
 		this.showEmptyState = input(false, ...ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []);
+		this.labelColon = input(false, ...ngDevMode ? [{ debugName: "labelColon" }] : /* istanbul ignore next */ []);
 		this.displaySections = computed(() => this.showEmptyState() ? this.sections() : this.sections().filter((s) => s.items.some((i) => !i.hidden)), ...ngDevMode ? [{ debugName: "displaySections" }] : /* istanbul ignore next */ []);
 	}
 	hrefOf(item) {
@@ -24729,6 +25153,13 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				labelColon: {
+					classPropertyName: "labelColon",
+					publicName: "labelColon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
@@ -24748,15 +25179,15 @@ var PanelInfoListComponent = class PanelInfoListComponent {
         } @else if (section.columns === 2) {
           <div class="pil-grid-2">
             @for (item of visibleItems(section); track item.label) {
-              <div class="pil-grid-cell">
-                <span class="pil-label">{{ item.label }}</span>
+              <div class="pil-grid-cell" [class.pil-strong]="item.emphasis">
+                <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
                 <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>
+                    <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
                   }
                 </span>
               </div>
@@ -24764,8 +25195,8 @@ var PanelInfoListComponent = class PanelInfoListComponent {
           </div>
         } @else {
           @for (item of visibleItems(section); track item.label) {
-            <div class="pil-row">
-              <span class="pil-label">{{ item.label }}</span>
+            <div class="pil-row" [class.pil-row--inline]="labelColon()" [class.pil-strong]="item.emphasis">
+              <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
               <span class="pil-value">
                 @if (item.badges) {
                   <span class="pil-badges">
@@ -24785,7 +25216,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
                 } @else if (item.link && item.value) {
                   <a class="pil-link" [routerLink]="item.link">{{ item.value }}</a>
                 } @else {
-                  <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger">{{ item.value || '—' }}</span>
+                  <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
                 }
                 @if (item.editAction) {
                   <ui-button class="pil-edit-btn" variant="icon" size="xs"
@@ -24802,7 +25233,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--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
+			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -24904,15 +25335,15 @@ i0.ɵɵngDeclareClassMetadata({
         } @else if (section.columns === 2) {
           <div class="pil-grid-2">
             @for (item of visibleItems(section); track item.label) {
-              <div class="pil-grid-cell">
-                <span class="pil-label">{{ item.label }}</span>
+              <div class="pil-grid-cell" [class.pil-strong]="item.emphasis">
+                <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
                 <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>
+                    <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
                   }
                 </span>
               </div>
@@ -24920,8 +25351,8 @@ i0.ɵɵngDeclareClassMetadata({
           </div>
         } @else {
           @for (item of visibleItems(section); track item.label) {
-            <div class="pil-row">
-              <span class="pil-label">{{ item.label }}</span>
+            <div class="pil-row" [class.pil-row--inline]="labelColon()" [class.pil-strong]="item.emphasis">
+              <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
               <span class="pil-value">
                 @if (item.badges) {
                   <span class="pil-badges">
@@ -24941,7 +25372,7 @@ i0.ɵɵngDeclareClassMetadata({
                 } @else if (item.link && item.value) {
                   <a class="pil-link" [routerLink]="item.link">{{ item.value }}</a>
                 } @else {
-                  <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger">{{ item.value || '—' }}</span>
+                  <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
                 }
                 @if (item.editAction) {
                   <ui-button class="pil-edit-btn" variant="icon" size="xs"
@@ -24957,7 +25388,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--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
+			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -24976,6 +25407,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "showEmptyState",
 				required: false
 			}]
+		}],
+		labelColon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelColon",
+				required: false
+			}]
 		}]
 	}
 });
@@ -26177,6 +26616,7 @@ const EXTRA_ICONS = {
 	"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",
+	"shield": "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
 	"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",
@@ -26444,13 +26884,787 @@ var TimelineComponent = class TimelineComponent {
 		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 */ []);
+		this.maxHeight = input("", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+		this.timePosition = input("below", ...ngDevMode ? [{ debugName: "timePosition" }] : /* istanbul ignore next */ []);
+	}
+	dotColor(item) {
+		return item.dotVariant ? BADGE_VARIANT_STYLES[item.dotVariant]?.color ?? null : null;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TimelineComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: TimelineComponent,
+			isStandalone: true,
+			selector: "ui-timeline",
+			inputs: {
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyMessage: {
+					classPropertyName: "emptyMessage",
+					publicName: "emptyMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxHeight: {
+					classPropertyName: "maxHeight",
+					publicName: "maxHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				timePosition: {
+					classPropertyName: "timePosition",
+					publicName: "timePosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    @if (items().length) {
+      @if (maxHeight()) {
+        <div class="tl-scroll" role="region" tabindex="0" [attr.aria-label]="ariaLabel() || 'Timeline'" [style.max-height]="maxHeight()">
+          <ng-container [ngTemplateOutlet]="listTpl" />
+        </div>
+      } @else {
+        <ng-container [ngTemplateOutlet]="listTpl" />
+      }
+    } @else if (emptyMessage()) {
+      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
+    }
+    <ng-template #listTpl>
+      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+        @for (item of items(); track item.id ?? $index) {
+          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
+            <span class="tl-marker" aria-hidden="true">
+              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+            </span>
+            <div class="tl-content">
+              <div class="tl-head">
+                <span class="tl-title">{{ item.title }}</span>
+                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+                }
+              </div>
+              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
+                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+              }
+            </div>
+          </li>
+        }
+      </ol>
+    </ng-template>
+    <ng-template #badgeTpl let-b>
+      @if (b.tooltip) {
+        <span class="tl-badge-tip" tabindex="0" [uiTooltip]="b.tooltip" [attr.data-testid]="b.testId || null"><ui-badge [label]="b.label" [variant]="b.variant" /></span>
+      } @else {
+        <ui-badge [label]="b.label" [variant]="b.variant" [attr.data-testid]="b.testId || null" />
+      }
+    </ng-template>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
+			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"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: TooltipDirective,
+					selector: "[uiTooltip]",
+					inputs: ["uiTooltip", "tooltipPosition"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-timeline",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				BadgeComponent,
+				HintComponent,
+				IconComponent,
+				NgTemplateOutlet,
+				TooltipDirective
+			],
+			template: `
+    @if (items().length) {
+      @if (maxHeight()) {
+        <div class="tl-scroll" role="region" tabindex="0" [attr.aria-label]="ariaLabel() || 'Timeline'" [style.max-height]="maxHeight()">
+          <ng-container [ngTemplateOutlet]="listTpl" />
+        </div>
+      } @else {
+        <ng-container [ngTemplateOutlet]="listTpl" />
+      }
+    } @else if (emptyMessage()) {
+      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
+    }
+    <ng-template #listTpl>
+      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+        @for (item of items(); track item.id ?? $index) {
+          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
+            <span class="tl-marker" aria-hidden="true">
+              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+            </span>
+            <div class="tl-content">
+              <div class="tl-head">
+                <span class="tl-title">{{ item.title }}</span>
+                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+                }
+              </div>
+              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
+                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+              }
+            </div>
+          </li>
+        }
+      </ol>
+    </ng-template>
+    <ng-template #badgeTpl let-b>
+      @if (b.tooltip) {
+        <span class="tl-badge-tip" tabindex="0" [uiTooltip]="b.tooltip" [attr.data-testid]="b.testId || null"><ui-badge [label]="b.label" [variant]="b.variant" /></span>
+      } @else {
+        <ui-badge [label]="b.label" [variant]="b.variant" [attr.data-testid]="b.testId || null" />
+      }
+    </ng-template>
+  `,
+			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}],
+		timePosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timePosition",
+				required: false
+			}]
+		}]
+	}
+});
+const RADIUS_PX = {
+	none: "0",
+	sm: "4px",
+	md: "8px",
+	lg: "12px",
+	full: "9999px"
+};
+var ImageComponent = class ImageComponent {
+	constructor() {
+		this.src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+		this.alt = input("", ...ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []);
+		this.fit = input("contain", ...ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []);
+		this.width = input("", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = input("", ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.maxWidth = input("100%", ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
+		this.maxHeight = input("", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+		this.aspectRatio = input("", ...ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []);
+		this.radius = input("none", ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+		this.bordered = input(false, ...ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []);
+		this.align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+		this.placeholder = input(true, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.priority = input(false, ...ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []);
+		this.retryKey = input(null, ...ngDevMode ? [{ debugName: "retryKey" }] : /* istanbul ignore next */ []);
+		this.loaded = output();
+		this.failed = output();
+		this._failed = signal(false, ...ngDevMode ? [{ debugName: "_failed" }] : /* istanbul ignore next */ []);
+		this._url = computed(() => this.src()?.trim() || null, ...ngDevMode ? [{ debugName: "_url" }] : /* istanbul ignore next */ []);
+		this.radiusCss = computed(() => RADIUS_PX[this.radius()] ?? "0", ...ngDevMode ? [{ debugName: "radiusCss" }] : /* istanbul ignore next */ []);
+		this.imgWidth = computed(() => this.width() || null, ...ngDevMode ? [{ debugName: "imgWidth" }] : /* istanbul ignore next */ []);
+		this.imgHeight = computed(() => this.height() || null, ...ngDevMode ? [{ debugName: "imgHeight" }] : /* istanbul ignore next */ []);
+		this.boxWidth = computed(() => this.width() || null, ...ngDevMode ? [{ debugName: "boxWidth" }] : /* istanbul ignore next */ []);
+		this.boxHeight = computed(() => this.height() || null, ...ngDevMode ? [{ debugName: "boxHeight" }] : /* istanbul ignore next */ []);
+		this.isBlock = computed(() => this.width() === "100%", ...ngDevMode ? [{ debugName: "isBlock" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			this.src();
+			this.retryKey();
+			untracked(() => this._failed.set(false));
+		});
+	}
+	_onError() {
+		this._failed.set(true);
+		this.failed.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ImageComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ImageComponent,
+			isStandalone: true,
+			selector: "ui-image",
+			inputs: {
+				src: {
+					classPropertyName: "src",
+					publicName: "src",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				alt: {
+					classPropertyName: "alt",
+					publicName: "alt",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fit: {
+					classPropertyName: "fit",
+					publicName: "fit",
+					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
+				},
+				maxWidth: {
+					classPropertyName: "maxWidth",
+					publicName: "maxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxHeight: {
+					classPropertyName: "maxHeight",
+					publicName: "maxHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				aspectRatio: {
+					classPropertyName: "aspectRatio",
+					publicName: "aspectRatio",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				radius: {
+					classPropertyName: "radius",
+					publicName: "radius",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				bordered: {
+					classPropertyName: "bordered",
+					publicName: "bordered",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				align: {
+					classPropertyName: "align",
+					publicName: "align",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				priority: {
+					classPropertyName: "priority",
+					publicName: "priority",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				retryKey: {
+					classPropertyName: "retryKey",
+					publicName: "retryKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				loaded: "loaded",
+				failed: "failed"
+			},
+			host: { properties: {
+				"style.text-align": "align()",
+				"class.im-block": "isBlock()"
+			} },
+			ngImport: i0,
+			template: `
+    @if (_url() && !_failed()) {
+      <img class="im-img" [src]="_url()" [attr.alt]="alt()" [attr.loading]="priority() ? 'eager' : 'lazy'"
+        [attr.fetchpriority]="priority() ? 'high' : null" decoding="async"
+        [style.width]="imgWidth()" [style.height]="imgHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.aspect-ratio]="aspectRatio() || null" [style.object-fit]="fit()" [style.border-radius]="radiusCss()"
+        [class.im-bordered]="bordered()" (load)="loaded.emit()" (error)="_onError()" />
+    } @else if (placeholder()) {
+      <span class="im-ph" [class.im-bordered]="bordered()" [attr.role]="alt() ? 'img' : null" [attr.aria-label]="alt() || null" [attr.aria-hidden]="alt() ? null : 'true'"
+        [style.width]="boxWidth()" [style.height]="boxHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.aspect-ratio]="aspectRatio() || null" [style.border-radius]="radiusCss()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="M21 16l-5-5-8 9"/></svg>
+      </span>
+    }
+  `,
+			isInline: true,
+			styles: [":host{display:inline-block;max-width:100%;line-height:0}:host(.im-block){display:block}.im-img{display:inline-block;max-width:100%;height:auto;vertical-align:top}.im-bordered{border:1px solid #e2e8f0;box-sizing:border-box}.im-ph{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:48px;min-height:48px;background:#f1f5f9;color:#94a3b8;vertical-align:top}.im-ph svg{width:32px;height:32px;max-width:55%;max-height:55%}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ImageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-image",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[style.text-align]": "align()",
+				"[class.im-block]": "isBlock()"
+			},
+			template: `
+    @if (_url() && !_failed()) {
+      <img class="im-img" [src]="_url()" [attr.alt]="alt()" [attr.loading]="priority() ? 'eager' : 'lazy'"
+        [attr.fetchpriority]="priority() ? 'high' : null" decoding="async"
+        [style.width]="imgWidth()" [style.height]="imgHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.aspect-ratio]="aspectRatio() || null" [style.object-fit]="fit()" [style.border-radius]="radiusCss()"
+        [class.im-bordered]="bordered()" (load)="loaded.emit()" (error)="_onError()" />
+    } @else if (placeholder()) {
+      <span class="im-ph" [class.im-bordered]="bordered()" [attr.role]="alt() ? 'img' : null" [attr.aria-label]="alt() || null" [attr.aria-hidden]="alt() ? null : 'true'"
+        [style.width]="boxWidth()" [style.height]="boxHeight()" [style.max-width]="maxWidth()" [style.max-height]="maxHeight() || null"
+        [style.aspect-ratio]="aspectRatio() || null" [style.border-radius]="radiusCss()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="M21 16l-5-5-8 9"/></svg>
+      </span>
+    }
+  `,
+			styles: [":host{display:inline-block;max-width:100%;line-height:0}:host(.im-block){display:block}.im-img{display:inline-block;max-width:100%;height:auto;vertical-align:top}.im-bordered{border:1px solid #e2e8f0;box-sizing:border-box}.im-ph{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:48px;min-height:48px;background:#f1f5f9;color:#94a3b8;vertical-align:top}.im-ph svg{width:32px;height:32px;max-width:55%;max-height:55%}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		alt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alt",
+				required: false
+			}]
+		}],
+		fit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fit",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		maxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxWidth",
+				required: false
+			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}],
+		aspectRatio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aspectRatio",
+				required: false
+			}]
+		}],
+		radius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "radius",
+				required: false
+			}]
+		}],
+		bordered: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bordered",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		priority: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "priority",
+				required: false
+			}]
+		}],
+		retryKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "retryKey",
+				required: false
+			}]
+		}],
+		loaded: [{
+			type: i0.Output,
+			args: ["loaded"]
+		}],
+		failed: [{
+			type: i0.Output,
+			args: ["failed"]
+		}]
+	}
+});
+var LiveRegionComponent = class LiveRegionComponent {
+	constructor() {
+		this.message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+		this.politeness = input("polite", ...ngDevMode ? [{ debugName: "politeness" }] : /* istanbul ignore next */ []);
+		this.atomic = input(true, ...ngDevMode ? [{ debugName: "atomic" }] : /* istanbul ignore next */ []);
+		this.visible = input(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+		this.role = computed(() => this.politeness() === "assertive" ? "alert" : "status", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: LiveRegionComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: LiveRegionComponent,
+			isStandalone: true,
+			selector: "ui-live-region",
+			inputs: {
+				message: {
+					classPropertyName: "message",
+					publicName: "message",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				politeness: {
+					classPropertyName: "politeness",
+					publicName: "politeness",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				atomic: {
+					classPropertyName: "atomic",
+					publicName: "atomic",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				visible: {
+					classPropertyName: "visible",
+					publicName: "visible",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `<div class="lr" [class.lr-hidden]="!visible()" [attr.role]="role()" [attr.aria-live]="politeness()" [attr.aria-atomic]="atomic() ? 'true' : 'false'">{{ message() }}</div>`,
+			isInline: true,
+			styles: [":host{display:block}.lr-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LiveRegionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-live-region",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<div class="lr" [class.lr-hidden]="!visible()" [attr.role]="role()" [attr.aria-live]="politeness()" [attr.aria-atomic]="atomic() ? 'true' : 'false'">{{ message() }}</div>`,
+			styles: [":host{display:block}.lr-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}\n"]
+		}]
+	}],
+	propDecorators: {
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		politeness: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "politeness",
+				required: false
+			}]
+		}],
+		atomic: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "atomic",
+				required: false
+			}]
+		}],
+		visible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visible",
+				required: false
+			}]
+		}]
+	}
+});
+var ImageGalleryComponent = class ImageGalleryComponent {
+	constructor() {
+		this.images = input([], ...ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []);
+		this.index = model(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+		this.loop = input(true, ...ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []);
+		this.showDots = input(true, ...ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []);
+		this.showCounter = input(true, ...ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []);
+		this.aspectRatio = input("4 / 3", ...ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []);
+		this.maxHeight = input("70vh", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+		this.fit = input("contain", ...ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("Image gallery", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.count = computed(() => this.images().length, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+		this.position = computed(() => {
+			const n = this.count();
+			const i = Math.trunc(Number(this.index()));
+			return n === 0 || !Number.isFinite(i) ? 0 : Math.min(n - 1, Math.max(0, i));
+		}, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+		this.current = computed(() => this.images()[this.position()] ?? { src: "" }, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+		this.currentAlt = computed(() => this.current().alt ?? `Image ${this.position() + 1} of ${this.count()}`, ...ngDevMode ? [{ debugName: "currentAlt" }] : /* istanbul ignore next */ []);
+		this.canPrev = computed(() => this.count() > 1 && (this.loop() || this.position() > 0), ...ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []);
+		this.canNext = computed(() => this.count() > 1 && (this.loop() || this.position() < this.count() - 1), ...ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []);
+		this.announcement = computed(() => this.count() > 1 ? `Image ${this.position() + 1} of ${this.count()}${this.current().alt ? ": " + this.current().alt : ""}` : "", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	}
+	prev() {
+		if (this.canPrev()) this.index.set((this.position() - 1 + this.count()) % this.count());
+	}
+	next() {
+		if (this.canNext()) this.index.set((this.position() + 1) % this.count());
+	}
+	go(i) {
+		if (i >= 0 && i < this.count()) this.index.set(i);
+	}
+	onKey(e) {
+		if (this.count() < 2 || e.altKey || e.ctrlKey || e.metaKey) return;
+		if (e.target?.closest("input, textarea, select, [contenteditable=\"true\"], [role=\"slider\"]")) return;
+		if (e.key === "ArrowLeft") {
+			this.prev();
+			e.preventDefault();
+		} else if (e.key === "ArrowRight") {
+			this.next();
+			e.preventDefault();
+		} else if (e.key === "Home") {
+			this.go(0);
+			e.preventDefault();
+		} else if (e.key === "End") {
+			this.go(this.count() - 1);
+			e.preventDefault();
+		}
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
 			version: "22.2.2",
 			ngImport: i0,
-			type: TimelineComponent,
+			type: ImageGalleryComponent,
 			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -26459,87 +27673,171 @@ var TimelineComponent = class TimelineComponent {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
 			version: "22.2.2",
-			type: TimelineComponent,
+			type: ImageGalleryComponent,
 			isStandalone: true,
-			selector: "ui-timeline",
+			selector: "ui-image-gallery",
 			inputs: {
-				items: {
-					classPropertyName: "items",
-					publicName: "items",
+				images: {
+					classPropertyName: "images",
+					publicName: "images",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				ariaLabel: {
-					classPropertyName: "ariaLabel",
-					publicName: "ariaLabel",
+				index: {
+					classPropertyName: "index",
+					publicName: "index",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				emptyMessage: {
-					classPropertyName: "emptyMessage",
-					publicName: "emptyMessage",
+				loop: {
+					classPropertyName: "loop",
+					publicName: "loop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showDots: {
+					classPropertyName: "showDots",
+					publicName: "showDots",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showCounter: {
+					classPropertyName: "showCounter",
+					publicName: "showCounter",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				aspectRatio: {
+					classPropertyName: "aspectRatio",
+					publicName: "aspectRatio",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxHeight: {
+					classPropertyName: "maxHeight",
+					publicName: "maxHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fit: {
+					classPropertyName: "fit",
+					publicName: "fit",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				}
 			},
+			outputs: { index: "indexChange" },
 			ngImport: i0,
 			template: `
-    @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" /> }
+    @if (count() > 0) {
+      <div class="ig" role="group" aria-roledescription="carousel" [attr.aria-label]="ariaLabel()" (keydown)="onKey($event)">
+        <div class="ig-stage">
+          @if (count() > 1) {
+            <ui-button class="ig-nav ig-prev" variant="secondary" size="sm" ariaLabel="Previous image" [disabled]="!canPrev()" (click)="prev()" data-testid="gallery-prev">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
+            </ui-button>
+          }
+          <ui-image class="ig-img" [src]="current().src" [alt]="currentAlt()" [fit]="fit()" width="100%" [maxHeight]="maxHeight()" [aspectRatio]="aspectRatio()" data-testid="gallery-image" />
+          @if (count() > 1) {
+            <ui-button class="ig-nav ig-next" variant="secondary" size="sm" ariaLabel="Next image" [disabled]="!canNext()" (click)="next()" data-testid="gallery-next">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+            </ui-button>
+          }
+        </div>
+        @if (count() > 1) {
+          <div class="ig-meta">
+            @if (showCounter()) { <span class="ig-counter" aria-hidden="true" data-testid="gallery-counter">{{ position() + 1 }} / {{ count() }}</span> }
+            @if (showDots()) {
+              <div class="ig-dots">
+                @for (img of images(); track $index) {
+                  <button type="button" class="ig-dot" [class.ig-dot-on]="$index === position()" [attr.aria-label]="'Show image ' + ($index + 1) + ' of ' + count()"
+                    [attr.aria-current]="$index === position() ? 'true' : null" [attr.data-testid]="'gallery-dot-' + $index" (click)="go($index)"></button>
+                }
               </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>
+            }
+          </div>
         }
-      </ol>
-    } @else if (emptyMessage()) {
-      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
+        <ui-live-region [message]="announcement()" />
+      </div>
     }
   `,
 			isInline: true,
-			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
+			styles: [":host{display:block}.ig{display:flex;flex-direction:column;gap:10px}.ig-stage{position:relative;display:flex;align-items:center;justify-content:center}.ig-img{flex:1 1 auto;min-width:0}.ig-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.ig-prev{left:8px}.ig-next{right:8px}.ig-meta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.ig-counter{font-size:.8125rem;color:#64748b}.ig-dots{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}.ig-dot{box-sizing:content-box;width:8px;height:8px;padding:18px;margin:-14px;border:0;border-radius:50%;background:#cbd5e1;background-clip:content-box;cursor:pointer;-webkit-appearance:none;appearance:none}.ig-dot-on{background:var(--ui-accent, #3b82f6);background-clip:content-box}.ig-dot:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:-4px}\n"],
 			dependencies: [
 				{
 					kind: "component",
-					type: BadgeComponent,
-					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					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"
+					]
 				},
 				{
 					kind: "component",
-					type: HintComponent,
-					selector: "ui-hint"
+					type: ImageComponent,
+					selector: "ui-image",
+					inputs: [
+						"src",
+						"alt",
+						"fit",
+						"width",
+						"height",
+						"maxWidth",
+						"maxHeight",
+						"aspectRatio",
+						"radius",
+						"bordered",
+						"align",
+						"placeholder",
+						"priority",
+						"retryKey"
+					],
+					outputs: ["loaded", "failed"]
 				},
 				{
 					kind: "component",
-					type: IconComponent,
-					selector: "ui-icon",
+					type: LiveRegionComponent,
+					selector: "ui-live-region",
 					inputs: [
-						"name",
-						"tooltip",
-						"ariaLabel",
-						"size",
-						"variant",
-						"disabled",
-						"loading",
-						"interactive"
-					],
-					outputs: ["iconClick"]
+						"message",
+						"politeness",
+						"atomic",
+						"visible"
+					]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -26550,68 +27848,127 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: TimelineComponent,
+	type: ImageGalleryComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-timeline",
+			selector: "ui-image-gallery",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			imports: [
-				BadgeComponent,
-				HintComponent,
-				IconComponent
+				ButtonComponent,
+				ImageComponent,
+				LiveRegionComponent
 			],
 			template: `
-    @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" /> }
+    @if (count() > 0) {
+      <div class="ig" role="group" aria-roledescription="carousel" [attr.aria-label]="ariaLabel()" (keydown)="onKey($event)">
+        <div class="ig-stage">
+          @if (count() > 1) {
+            <ui-button class="ig-nav ig-prev" variant="secondary" size="sm" ariaLabel="Previous image" [disabled]="!canPrev()" (click)="prev()" data-testid="gallery-prev">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
+            </ui-button>
+          }
+          <ui-image class="ig-img" [src]="current().src" [alt]="currentAlt()" [fit]="fit()" width="100%" [maxHeight]="maxHeight()" [aspectRatio]="aspectRatio()" data-testid="gallery-image" />
+          @if (count() > 1) {
+            <ui-button class="ig-nav ig-next" variant="secondary" size="sm" ariaLabel="Next image" [disabled]="!canNext()" (click)="next()" data-testid="gallery-next">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+            </ui-button>
+          }
+        </div>
+        @if (count() > 1) {
+          <div class="ig-meta">
+            @if (showCounter()) { <span class="ig-counter" aria-hidden="true" data-testid="gallery-counter">{{ position() + 1 }} / {{ count() }}</span> }
+            @if (showDots()) {
+              <div class="ig-dots">
+                @for (img of images(); track $index) {
+                  <button type="button" class="ig-dot" [class.ig-dot-on]="$index === position()" [attr.aria-label]="'Show image ' + ($index + 1) + ' of ' + count()"
+                    [attr.aria-current]="$index === position() ? 'true' : null" [attr.data-testid]="'gallery-dot-' + $index" (click)="go($index)"></button>
+                }
               </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>
+            }
+          </div>
         }
-      </ol>
-    } @else if (emptyMessage()) {
-      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
+        <ui-live-region [message]="announcement()" />
+      </div>
     }
   `,
-			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"]
+			styles: [":host{display:block}.ig{display:flex;flex-direction:column;gap:10px}.ig-stage{position:relative;display:flex;align-items:center;justify-content:center}.ig-img{flex:1 1 auto;min-width:0}.ig-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.ig-prev{left:8px}.ig-next{right:8px}.ig-meta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.ig-counter{font-size:.8125rem;color:#64748b}.ig-dots{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}.ig-dot{box-sizing:content-box;width:8px;height:8px;padding:18px;margin:-14px;border:0;border-radius:50%;background:#cbd5e1;background-clip:content-box;cursor:pointer;-webkit-appearance:none;appearance:none}.ig-dot-on{background:var(--ui-accent, #3b82f6);background-clip:content-box}.ig-dot:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:-4px}\n"]
 		}]
 	}],
 	propDecorators: {
-		items: [{
+		images: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "items",
+				alias: "images",
 				required: false
 			}]
 		}],
-		ariaLabel: [{
+		index: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "ariaLabel",
+				alias: "index",
 				required: false
 			}]
+		}, {
+			type: i0.Output,
+			args: ["indexChange"]
 		}],
-		emptyMessage: [{
+		loop: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "emptyMessage",
+				alias: "loop",
+				required: false
+			}]
+		}],
+		showDots: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDots",
+				required: false
+			}]
+		}],
+		showCounter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCounter",
+				required: false
+			}]
+		}],
+		aspectRatio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aspectRatio",
+				required: false
+			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}],
+		fit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fit",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
 				required: false
 			}]
 		}]
@@ -27297,7 +28654,7 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 						"showErrors",
 						"disabled"
 					],
-					outputs: ["invalidChange"]
+					outputs: ["invalidChange", "valueChange"]
 				},
 				{
 					kind: "component",
@@ -29116,6 +30473,7 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 					"label",
 					"description",
 					"ariaLabel",
+					"testId",
 					"value",
 					"name",
 					"checked",
@@ -30301,6 +31659,8 @@ var DetailCardComponent = class DetailCardComponent {
 		this.showEdit = input(false, ...ngDevMode ? [{ debugName: "showEdit" }] : /* istanbul ignore next */ []);
 		this.editLabel = input("Edit", ...ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []);
 		this.editClick = output();
+		this.editAriaLabel = input("", ...ngDevMode ? [{ debugName: "editAriaLabel" }] : /* istanbul ignore next */ []);
+		this.fill = input(false, ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
 	}
 	groupLabel() {
 		if (this.showHeader() && this.title()) return this.titleId() ? null : this.title();
@@ -30425,6 +31785,20 @@ var DetailCardComponent = class DetailCardComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				editAriaLabel: {
+					classPropertyName: "editAriaLabel",
+					publicName: "editAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fill: {
+					classPropertyName: "fill",
+					publicName: "fill",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -30434,13 +31808,14 @@ var DetailCardComponent = class DetailCardComponent {
 			host: {
 				attributes: { "role": "group" },
 				properties: {
+					"class.dc-fill-host": "fill()",
 					"attr.aria-labelledby": "showHeader() && title() && titleId() ? titleId() : null",
 					"attr.aria-label": "groupLabel()"
 				}
 			},
 			ngImport: i0,
 			template: `
-    <div class="dc" [class.dc-has-text-color]="!!textColor()" [style.background]="background() || null" [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
+    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [style.background]="background() || null" [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
       @if (showHeader()) {
         <div class="dc-header" [class.collapsible]="collapsible()" [class.open]="isOpen()" (click)="onHeaderClick($event)">
           @if (collapsible()) {
@@ -30461,7 +31836,7 @@ var DetailCardComponent = class DetailCardComponent {
             <ng-content select="[card-header]" />
           </div>
           @if (showEdit()) {
-            <ui-button class="dc-edit" variant="secondary" size="xs" (click)="$event.stopPropagation(); editClick.emit()">
+            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" (click)="$event.stopPropagation(); editClick.emit()">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                 <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                 <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
@@ -30480,7 +31855,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-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -30526,11 +31901,12 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [ButtonComponent],
 			host: {
 				"role": "group",
+				"[class.dc-fill-host]": "fill()",
 				"[attr.aria-labelledby]": "showHeader() && title() && titleId() ? titleId() : null",
 				"[attr.aria-label]": "groupLabel()"
 			},
 			template: `
-    <div class="dc" [class.dc-has-text-color]="!!textColor()" [style.background]="background() || null" [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
+    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [style.background]="background() || null" [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
       @if (showHeader()) {
         <div class="dc-header" [class.collapsible]="collapsible()" [class.open]="isOpen()" (click)="onHeaderClick($event)">
           @if (collapsible()) {
@@ -30551,7 +31927,7 @@ i0.ɵɵngDeclareClassMetadata({
             <ng-content select="[card-header]" />
           </div>
           @if (showEdit()) {
-            <ui-button class="dc-edit" variant="secondary" size="xs" (click)="$event.stopPropagation(); editClick.emit()">
+            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" (click)="$event.stopPropagation(); editClick.emit()">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                 <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                 <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
@@ -30569,7 +31945,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-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #94a3b8)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #94a3b8)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -30683,6 +32059,22 @@ i0.ɵɵngDeclareClassMetadata({
 		editClick: [{
 			type: i0.Output,
 			args: ["editClick"]
+		}],
+		editAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editAriaLabel",
+				required: false
+			}]
+		}],
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
 		}]
 	}
 });
@@ -31661,17 +33053,28 @@ var ColumnsComponent = class ColumnsComponent {
 		this.gap = input("lg", ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
 		this.collapseAt = input("md", ...ngDevMode ? [{ debugName: "collapseAt" }] : /* istanbul ignore next */ []);
 		this.align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+		this.countBelowLg = input(null, ...ngDevMode ? [{ debugName: "countBelowLg" }] : /* istanbul ignore next */ []);
+		this.countBelowMd = input(null, ...ngDevMode ? [{ debugName: "countBelowMd" }] : /* istanbul ignore next */ []);
+		this.countBelowSm = input(null, ...ngDevMode ? [{ debugName: "countBelowSm" }] : /* istanbul ignore next */ []);
 		this.cols = computed(() => {
 			const n = Math.trunc(Number(this.count()));
 			if (!Number.isFinite(n)) return 2;
 			return Math.min(4, Math.max(1, n));
 		}, ...ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []);
+		this.colsLg = computed(() => ColumnsComponent.clampTier(this.countBelowLg()), ...ngDevMode ? [{ debugName: "colsLg" }] : /* istanbul ignore next */ []);
+		this.colsMd = computed(() => ColumnsComponent.clampTier(this.countBelowMd()), ...ngDevMode ? [{ debugName: "colsMd" }] : /* istanbul ignore next */ []);
+		this.colsSm = computed(() => ColumnsComponent.clampTier(this.countBelowSm()), ...ngDevMode ? [{ debugName: "colsSm" }] : /* istanbul ignore next */ []);
 		this.gapCss = computed(() => resolveLayoutGap(this.gap(), "lg"), ...ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []);
 		this.collapseClass = computed(() => {
 			const c = this.collapseAt();
 			return c === "never" ? "cl" : `cl cl-${c}`;
 		}, ...ngDevMode ? [{ debugName: "collapseClass" }] : /* istanbul ignore next */ []);
 	}
+	static clampTier(v) {
+		if (v === null || v === void 0) return null;
+		const n = Math.trunc(Number(v));
+		return Number.isFinite(n) ? Math.min(4, Math.max(1, n)) : null;
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -31717,13 +33120,34 @@ var ColumnsComponent = class ColumnsComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				countBelowLg: {
+					classPropertyName: "countBelowLg",
+					publicName: "countBelowLg",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				countBelowMd: {
+					classPropertyName: "countBelowMd",
+					publicName: "countBelowMd",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				countBelowSm: {
+					classPropertyName: "countBelowSm",
+					publicName: "countBelowSm",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: { properties: { "attr.data-columns": "cols()" } },
 			ngImport: i0,
-			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
+			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.--cl-cols-lg]="colsLg()" [style.--cl-cols-md]="colsMd()" [style.--cl-cols-sm]="colsSm()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
 			isInline: true,
-			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"],
+			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:1024px){.cl{grid-template-columns:repeat(var(--cl-cols-lg, var(--cl-cols, 2)),minmax(0,1fr))}}@media(max-width:768px){.cl{grid-template-columns:repeat(var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2))),minmax(0,1fr))}}@media(max-width:480px){.cl{grid-template-columns:repeat(var(--cl-cols-sm, var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2)))),minmax(0,1fr))}}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -31740,8 +33164,8 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { "[attr.data-columns]": "cols()" },
-			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
-			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"]
+			template: `<div class="cl" [class]="collapseClass()" [style.--cl-cols]="cols()" [style.--cl-cols-lg]="colsLg()" [style.--cl-cols-md]="colsMd()" [style.--cl-cols-sm]="colsSm()" [style.gap]="gapCss()" [style.align-items]="align()"><ng-content /></div>`,
+			styles: [":host{display:block}.cl{display:grid;grid-template-columns:repeat(var(--cl-cols, 2),minmax(0,1fr))}@media(max-width:1024px){.cl{grid-template-columns:repeat(var(--cl-cols-lg, var(--cl-cols, 2)),minmax(0,1fr))}}@media(max-width:768px){.cl{grid-template-columns:repeat(var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2))),minmax(0,1fr))}}@media(max-width:480px){.cl{grid-template-columns:repeat(var(--cl-cols-sm, var(--cl-cols-md, var(--cl-cols-lg, var(--cl-cols, 2)))),minmax(0,1fr))}}@media(max-width:480px){.cl.cl-sm{grid-template-columns:minmax(0,1fr)}}@media(max-width:768px){.cl.cl-md{grid-template-columns:minmax(0,1fr)}}@media(max-width:1024px){.cl.cl-lg{grid-template-columns:minmax(0,1fr)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -31776,6 +33200,30 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "align",
 				required: false
 			}]
+		}],
+		countBelowLg: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countBelowLg",
+				required: false
+			}]
+		}],
+		countBelowMd: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countBelowMd",
+				required: false
+			}]
+		}],
+		countBelowSm: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countBelowSm",
+				required: false
+			}]
 		}]
 	}
 });
@@ -32108,6 +33556,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormColSpanDirective, 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 };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, SidePanelComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map