@forgeroute/ui 0.4.73 → 0.4.75

package/fesm2022/forgeroute-ui.mjs

@@ -1385,15 +1385,49 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const BADGE_INK_DARK = "#0f172a";
+const BADGE_INK_LIGHT = "#ffffff";
+function normalizeBadgeColor(value) {
+	const raw = (value ?? "").trim();
+	if (!HEX.test(raw)) return null;
+	const hex = raw.slice(1).toLowerCase();
+	return "#" + (hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex);
+}
+function channel(v) {
+	const s = v / 255;
+	return s <= .03928 ? s / 12.92 : Math.pow((s + .055) / 1.055, 2.4);
+}
+function relativeLuminance(hex) {
+	const n = parseInt(hex.slice(1), 16);
+	return .2126 * channel(n >> 16 & 255) + .7152 * channel(n >> 8 & 255) + .0722 * channel(n & 255);
+}
+function contrastRatio(a, b) {
+	const la = relativeLuminance(a), lb = relativeLuminance(b);
+	const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+	return (hi + .05) / (lo + .05);
+}
+function readableInk(background) {
+	return contrastRatio(background, "#0f172a") >= contrastRatio(background, "#ffffff") ? BADGE_INK_DARK : BADGE_INK_LIGHT;
+}
+function customBadgeStyles(value) {
+	const bg = normalizeBadgeColor(value);
+	return bg ? {
+		bg,
+		color: readableInk(bg)
+	} : null;
+}
 var BadgeComponent = class BadgeComponent {
 	constructor() {
 		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.variant = input(null, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.color = input(null, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 		this.resolvedVariant = computed(() => {
 			if (this.variant()) return this.variant();
 			return SEMANTIC_BADGE_MAP[this.label()] ?? autoVariant(this.label());
 		}, ...ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []);
-		this.styles = computed(() => BADGE_VARIANT_STYLES[this.resolvedVariant()] ?? BADGE_VARIANT_STYLES["gray"], ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+		this.customStyles = computed(() => customBadgeStyles(this.color()), ...ngDevMode ? [{ debugName: "customStyles" }] : /* istanbul ignore next */ []);
+		this.styles = computed(() => this.customStyles() ?? BADGE_VARIANT_STYLES[this.resolvedVariant()] ?? BADGE_VARIANT_STYLES["gray"], ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -1426,13 +1460,20 @@ var BadgeComponent = class BadgeComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				color: {
+					classPropertyName: "color",
+					publicName: "color",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
 			template: `
     <span
       class="badge"
-      [class.badge-gray]="resolvedVariant() === 'gray'"
+      [class.badge-gray]="!customStyles() && resolvedVariant() === 'gray'"
       [style.background]="styles().bg"
       [style.color]="styles().color">
       {{ label() }}
@@ -1458,7 +1499,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <span
       class="badge"
-      [class.badge-gray]="resolvedVariant() === 'gray'"
+      [class.badge-gray]="!customStyles() && resolvedVariant() === 'gray'"
       [style.background]="styles().bg"
       [style.color]="styles().color">
       {{ label() }}
@@ -1483,6 +1524,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "variant",
 				required: false
 			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
 		}]
 	}
 });
@@ -1829,6 +1878,9 @@ const BUILT_IN_ICONS = {
 	"create-invoice": "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8",
 	"create-estimate": "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M12 18v-6 M9 15h6",
 	"add-note": "M12 20h9 M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z",
+	"history": "M3 3v5h5 M3.05 13A9 9 0 1 0 6 5.3L3 8 M12 7v5l4 2",
+	"move-up": "M12 19V5 M5 12l7-7 7 7",
+	"move-down": "M12 5v14 M19 12l-7 7-7-7",
 	"invite-portal": "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M15 9l3 3-3 3 M18 12H8"
 };
 function builtInActionIcon(type) {
@@ -2085,6 +2137,7 @@ var MoreMenuComponent = class MoreMenuComponent {
     <div class="mm-wrapper">
       <button
         class="mm-trigger"
+        data-testid="more-menu-trigger"
         [attr.aria-expanded]="open()"
         aria-haspopup="menu"
         [attr.aria-label]="ariaLabel()"
@@ -2101,6 +2154,7 @@ var MoreMenuComponent = class MoreMenuComponent {
           @for (action of visibleActions(); track action.type) {
             <button
               class="mm-item"
+              data-testid="more-menu-item"
               [class.mm-danger]="action.variant === 'danger'"
               [disabled]="isDisabled(action)"
               role="menuitem"
@@ -2141,6 +2195,7 @@ i0.ɵɵngDeclareClassMetadata({
     <div class="mm-wrapper">
       <button
         class="mm-trigger"
+        data-testid="more-menu-trigger"
         [attr.aria-expanded]="open()"
         aria-haspopup="menu"
         [attr.aria-label]="ariaLabel()"
@@ -2157,6 +2212,7 @@ i0.ɵɵngDeclareClassMetadata({
           @for (action of visibleActions(); track action.type) {
             <button
               class="mm-item"
+              data-testid="more-menu-item"
               [class.mm-danger]="action.variant === 'danger'"
               [disabled]="isDisabled(action)"
               role="menuitem"
@@ -4647,6 +4703,8 @@ const EXTRA_ICONS = {
 	"refresh": "M23 4v6h-6 M1 20v-6h6 M3.51 9a9 9 0 0 1 14.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0 0 20.49 15",
 	"search": "M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16z M21 21l-4.35-4.35",
 	"cup": "M18 8h1a4 4 0 0 1 0 8h-1 M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z M6 1v3 M10 1v3 M14 1v3",
+	"cash": "M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M6 12h.01 M18 12h.01",
+	"dollar": "M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6",
 	"wrench": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
 };
 const ICON_NAMES = Object.freeze(Object.keys(EXTRA_ICONS));
@@ -7413,7 +7471,7 @@ var ProgressBarComponent = class ProgressBarComponent {
     </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: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"],
+			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-orange{background:#f97316}.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,
@@ -7451,7 +7509,7 @@ i0.ɵɵngDeclareClassMetadata({
       @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: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"]
+			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-orange{background:#f97316}.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: {
@@ -9905,6 +9963,48 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var HintComponent = class HintComponent {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HintComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: HintComponent,
+			isStandalone: true,
+			selector: "ui-hint",
+			ngImport: i0,
+			template: `<p class="hint"><ng-content /></p>`,
+			isInline: true,
+			styles: [":host{display:block}.hint{font-size:.75rem;line-height:1.4;color:#64748b;margin:0}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HintComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-hint",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<p class="hint"><ng-content /></p>`,
+			styles: [":host{display:block}.hint{font-size:.75rem;line-height:1.4;color:#64748b;margin:0}\n"]
+		}]
+	}]
+});
 function detectCsvDelimiter(text) {
 	const counts = {
 		",": 0,
@@ -10014,6 +10114,7 @@ var ImportExportComponent = class ImportExportComponent {
 		this.importing = false;
 		this.importResult = null;
 		this.csvFile = null;
+		this.idPrefix = `ie-ex-${ImportExportComponent.nextId++}-`;
 		this.destroyRef.onDestroy(() => this.stopImportTimer());
 		effect(() => {
 			const v = this._configInput();
@@ -10209,6 +10310,12 @@ var ImportExportComponent = class ImportExportComponent {
 			if (new Set(candidates).size === 1) this.columnMapping[field.key] = candidates[0];
 		}
 	}
+	static {
+		this.nextId = 0;
+	}
+	exampleId(field) {
+		return this.idPrefix + field.key;
+	}
 	get canSubmit() {
 		return (this.config.importFields ?? []).filter((f) => f.required).every((f) => !!this.columnMapping[f.key]);
 	}
@@ -10496,10 +10603,12 @@ var ImportExportComponent = class ImportExportComponent {
                   }
                   {{ field.label }}
                   @if (field.required) { <span class="ie-required" aria-hidden="true">*</span> }
+                  @if (field.example) { <ui-hint class="ie-field-example" [attr.id]="exampleId(field)">e.g. {{ field.example }}</ui-hint> }
                 </span>
                 <div role="cell">
                   <ui-select
                     [ariaLabel]="field.label + ' column' + (field.required ? ', required' : '')"
+                    [ariaDescribedBy]="field.example ? exampleId(field) : ''"
                     [options]="csvHeaderOptions"
                     [(ngModel)]="columnMapping[field.key]"
                     [error]="field.required && !columnMapping[field.key] ? 'Required' : ''" />
@@ -10653,7 +10762,7 @@ var ImportExportComponent = class ImportExportComponent {
     </ui-modal>
   `,
 			isInline: true,
-			styles: [".ie-actions{display:flex;gap:8px}.ie-steps{display:flex;align-items:center;margin-bottom:24px;gap:0;list-style:none;padding:0}.ie-step{display:flex;align-items:center;gap:6px;flex-shrink:0}.ie-step-num{width:24px;height:24px;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ie-step-label{font-size:.8125rem;color:#64748b;font-weight:500}.ie-step.active .ie-step-num{background:#3b82f6;color:#fff}.ie-step.active .ie-step-label{color:#1e293b;font-weight:600}.ie-step.done .ie-step-num{background:#22c55e;color:#fff}.ie-step.done .ie-step-label{color:#64748b}.ie-step:not(:last-child){flex:1 1 auto}.ie-step:not(:last-child):after{content:\"\";flex:1;height:1px;background:#e2e8f0;margin:0 8px;min-width:16px}.ie-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-source-step{display:flex;flex-direction:column;gap:16px}.ie-upload-area{display:flex;flex-direction:column;gap:12px}.ie-template-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.875rem;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px}.ie-file-hidden{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;overflow:hidden;cursor:pointer}.ie-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;border:2px dashed #7c8ba1;border-radius:10px;cursor:pointer;transition:border-color .18s ease,background .18s ease}.ie-dropzone:hover,.ie-dropzone:focus-within{border-color:#3b82f6;background:#f0f7ff}.ie-dropzone:focus-within{outline:2px solid #3b82f6;outline-offset:2px}.ie-dropzone.has-error{border-color:#ef4444}.ie-dropzone-text{font-size:.9375rem;font-weight:600;color:#1e293b}.ie-dropzone-sub{font-size:.8125rem;color:#64748b}.ie-mapping{display:flex;flex-direction:column;gap:12px}.ie-mapping-hint{font-size:.875rem;color:#64748b;margin:0}.ie-mapping-success{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:.875rem;color:#15803d}.ie-mapping-success svg{flex-shrink:0;margin-top:1px;color:#16a34a}.ie-mapping-unmatched{display:flex;align-items:flex-start;gap:6px;font-size:.8125rem;color:#64748b;margin:0;padding-top:4px}.ie-mapping-unmatched svg{flex-shrink:0;margin-top:1px}.ie-mapping-unmatched em{font-style:normal;color:#475569}.ie-mapping-table{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.ie-mapping-header{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase}.ie-mapping-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding:8px 12px;border-bottom:1px solid #f1f5f9;gap:8px}.ie-mapping-row:last-child{border-bottom:none}.ie-mapping-row.ie-mapping-row--required-missing{background:#fff7ed}.ie-mapping-row.ie-mapping-row--required-missing .ie-field-label{color:#c2410c}.ie-match-icon{color:#16a34a;margin-right:4px;vertical-align:-1px}.ie-field-label{display:flex;align-items:center;font-size:.875rem;color:#1e293b;font-weight:500}.ie-required{color:#dc2626;margin-left:2px}.ie-sample{font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview{display:flex;flex-direction:column;gap:12px}.ie-preview-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.ie-preview-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ie-result:focus,.ie-source-step:focus,.ie-upload-area:focus,.ie-mapping:focus,.ie-preview:focus{outline:none}.ie-result-list{list-style:none;margin:0;padding:0}.ie-preview-table{width:100%;border-collapse:collapse;font-size:.8125rem}.ie-preview-table th{background:#f8fafc;padding:8px 12px;text-align:left;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;border-bottom:1px solid #e2e8f0;white-space:nowrap}.ie-preview-table td{padding:7px 12px;color:#1e293b;border-bottom:1px solid #f1f5f9;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview-table tr:last-child td{border-bottom:none}.ie-result{display:flex;flex-direction:column;gap:16px}.ie-result-summary{display:flex;flex-direction:column;gap:8px}.ie-result-stat{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;font-size:.9375rem}.ie-result-stat.success{background:#f0fdf4;color:#15803d}.ie-result-stat.success svg{stroke:#22c55e}.ie-result-stat.error{background:#fef2f2;color:#b91c1c}.ie-result-stat.error svg{stroke:#ef4444}.ie-result-stat.warning{background:#fffbeb;color:#b45309}.ie-result-stat.warning svg{stroke:#f59e0b}.ie-progress{margin-top:14px}.ie-progress-track{height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden;position:relative}.ie-progress-bar{position:absolute;inset:0 auto 0 0;width:35%;border-radius:999px;background:#2563eb;animation:ie-progress-slide 1.2s ease-in-out infinite}.ie-progress-text{margin:8px 0 0;font-size:.8125rem;color:#475569}@keyframes ie-progress-slide{0%{left:-35%}to{left:100%}}@media(prefers-reduced-motion:reduce){.ie-progress-bar{animation:none;width:100%;opacity:.5}}.ie-errors-list{border:1px solid #fecaca;border-radius:8px;overflow:hidden}.ie-errors-title{font-size:.8125rem;font-weight:600;color:#b91c1c;padding:8px 12px;background:#fef2f2;margin:0;border-bottom:1px solid #fecaca}.ie-error-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fff1f2;font-size:.8125rem;color:#374151}.ie-error-row:last-child{border-bottom:none}.ie-error-row-num{font-weight:600;color:#b91c1c;flex-shrink:0}.ie-warnings-list{border:1px solid #fde68a;border-radius:8px;overflow:hidden}.ie-warnings-title{font-size:.8125rem;font-weight:600;color:#b45309;padding:8px 12px;background:#fffbeb;margin:0;border-bottom:1px solid #fde68a}.ie-warning-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fef3c7;font-size:.8125rem;color:#374151}.ie-warning-row:last-child{border-bottom:none}.ie-warning-row-num{font-weight:600;color:#b45309;flex-shrink:0}.ie-error{font-size:.875rem;color:#dc2626;margin:0}.ie-footer-right{display:flex;gap:8px;align-items:center}@media(max-width:600px){.ie-step-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-dropzone{padding:24px 16px}.ie-mapping-header{grid-template-columns:1fr 1fr}.ie-mapping-header span:last-child{display:none}.ie-mapping-row{grid-template-columns:1fr 1fr}.ie-mapping-row .ie-sample{display:none}}\n"],
+			styles: [".ie-actions{display:flex;gap:8px}.ie-steps{display:flex;align-items:center;margin-bottom:24px;gap:0;list-style:none;padding:0}.ie-step{display:flex;align-items:center;gap:6px;flex-shrink:0}.ie-step-num{width:24px;height:24px;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ie-step-label{font-size:.8125rem;color:#64748b;font-weight:500}.ie-step.active .ie-step-num{background:#3b82f6;color:#fff}.ie-step.active .ie-step-label{color:#1e293b;font-weight:600}.ie-step.done .ie-step-num{background:#22c55e;color:#fff}.ie-step.done .ie-step-label{color:#64748b}.ie-step:not(:last-child){flex:1 1 auto}.ie-step:not(:last-child):after{content:\"\";flex:1;height:1px;background:#e2e8f0;margin:0 8px;min-width:16px}.ie-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-source-step{display:flex;flex-direction:column;gap:16px}.ie-upload-area{display:flex;flex-direction:column;gap:12px}.ie-template-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.875rem;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px}.ie-file-hidden{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;overflow:hidden;cursor:pointer}.ie-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;border:2px dashed #7c8ba1;border-radius:10px;cursor:pointer;transition:border-color .18s ease,background .18s ease}.ie-dropzone:hover,.ie-dropzone:focus-within{border-color:#3b82f6;background:#f0f7ff}.ie-dropzone:focus-within{outline:2px solid #3b82f6;outline-offset:2px}.ie-dropzone.has-error{border-color:#ef4444}.ie-dropzone-text{font-size:.9375rem;font-weight:600;color:#1e293b}.ie-dropzone-sub{font-size:.8125rem;color:#64748b}.ie-mapping{display:flex;flex-direction:column;gap:12px}.ie-mapping-hint{font-size:.875rem;color:#64748b;margin:0}.ie-mapping-success{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:.875rem;color:#15803d}.ie-mapping-success svg{flex-shrink:0;margin-top:1px;color:#16a34a}.ie-mapping-unmatched{display:flex;align-items:flex-start;gap:6px;font-size:.8125rem;color:#64748b;margin:0;padding-top:4px}.ie-mapping-unmatched svg{flex-shrink:0;margin-top:1px}.ie-mapping-unmatched em{font-style:normal;color:#475569}.ie-mapping-table{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.ie-mapping-header{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase}.ie-mapping-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding:8px 12px;border-bottom:1px solid #f1f5f9;gap:8px}.ie-mapping-row:last-child{border-bottom:none}.ie-mapping-row.ie-mapping-row--required-missing{background:#fff7ed}.ie-mapping-row.ie-mapping-row--required-missing .ie-field-label{color:#c2410c}.ie-match-icon{color:#16a34a;margin-right:4px;vertical-align:-1px}.ie-field-label{display:flex;flex-wrap:wrap;align-items:center;font-size:.875rem;color:#1e293b;font-weight:500}.ie-field-example{flex-basis:100%;font-weight:400}.ie-required{color:#dc2626;margin-left:2px}.ie-sample{font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview{display:flex;flex-direction:column;gap:12px}.ie-preview-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.ie-preview-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ie-result:focus,.ie-source-step:focus,.ie-upload-area:focus,.ie-mapping:focus,.ie-preview:focus{outline:none}.ie-result-list{list-style:none;margin:0;padding:0}.ie-preview-table{width:100%;border-collapse:collapse;font-size:.8125rem}.ie-preview-table th{background:#f8fafc;padding:8px 12px;text-align:left;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;border-bottom:1px solid #e2e8f0;white-space:nowrap}.ie-preview-table td{padding:7px 12px;color:#1e293b;border-bottom:1px solid #f1f5f9;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview-table tr:last-child td{border-bottom:none}.ie-result{display:flex;flex-direction:column;gap:16px}.ie-result-summary{display:flex;flex-direction:column;gap:8px}.ie-result-stat{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;font-size:.9375rem}.ie-result-stat.success{background:#f0fdf4;color:#15803d}.ie-result-stat.success svg{stroke:#22c55e}.ie-result-stat.error{background:#fef2f2;color:#b91c1c}.ie-result-stat.error svg{stroke:#ef4444}.ie-result-stat.warning{background:#fffbeb;color:#b45309}.ie-result-stat.warning svg{stroke:#f59e0b}.ie-progress{margin-top:14px}.ie-progress-track{height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden;position:relative}.ie-progress-bar{position:absolute;inset:0 auto 0 0;width:35%;border-radius:999px;background:#2563eb;animation:ie-progress-slide 1.2s ease-in-out infinite}.ie-progress-text{margin:8px 0 0;font-size:.8125rem;color:#475569}@keyframes ie-progress-slide{0%{left:-35%}to{left:100%}}@media(prefers-reduced-motion:reduce){.ie-progress-bar{animation:none;width:100%;opacity:.5}}.ie-errors-list{border:1px solid #fecaca;border-radius:8px;overflow:hidden}.ie-errors-title{font-size:.8125rem;font-weight:600;color:#b91c1c;padding:8px 12px;background:#fef2f2;margin:0;border-bottom:1px solid #fecaca}.ie-error-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fff1f2;font-size:.8125rem;color:#374151}.ie-error-row:last-child{border-bottom:none}.ie-error-row-num{font-weight:600;color:#b91c1c;flex-shrink:0}.ie-warnings-list{border:1px solid #fde68a;border-radius:8px;overflow:hidden}.ie-warnings-title{font-size:.8125rem;font-weight:600;color:#b45309;padding:8px 12px;background:#fffbeb;margin:0;border-bottom:1px solid #fde68a}.ie-warning-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fef3c7;font-size:.8125rem;color:#374151}.ie-warning-row:last-child{border-bottom:none}.ie-warning-row-num{font-weight:600;color:#b45309;flex-shrink:0}.ie-error{font-size:.875rem;color:#dc2626;margin:0}.ie-footer-right{display:flex;gap:8px;align-items:center}@media(max-width:600px){.ie-step-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-dropzone{padding:24px 16px}.ie-mapping-header{grid-template-columns:1fr 1fr}.ie-mapping-header span:last-child{display:none}.ie-mapping-row{grid-template-columns:1fr 1fr}.ie-mapping-row .ie-sample{display:none}}\n"],
 			dependencies: [
 				{
 					kind: "ngmodule",
@@ -10764,6 +10873,11 @@ var ImportExportComponent = class ImportExportComponent {
 						"ariaLabel"
 					],
 					outputs: ["sourceSelect"]
+				},
+				{
+					kind: "component",
+					type: HintComponent,
+					selector: "ui-hint"
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -10786,7 +10900,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ModalComponent,
 				ButtonComponent,
 				SelectComponent,
-				ImportSourceGridComponent
+				ImportSourceGridComponent,
+				HintComponent
 			],
 			template: `
     <!-- Trigger buttons -->
@@ -10872,10 +10987,12 @@ i0.ɵɵngDeclareClassMetadata({
                   }
                   {{ field.label }}
                   @if (field.required) { <span class="ie-required" aria-hidden="true">*</span> }
+                  @if (field.example) { <ui-hint class="ie-field-example" [attr.id]="exampleId(field)">e.g. {{ field.example }}</ui-hint> }
                 </span>
                 <div role="cell">
                   <ui-select
                     [ariaLabel]="field.label + ' column' + (field.required ? ', required' : '')"
+                    [ariaDescribedBy]="field.example ? exampleId(field) : ''"
                     [options]="csvHeaderOptions"
                     [(ngModel)]="columnMapping[field.key]"
                     [error]="field.required && !columnMapping[field.key] ? 'Required' : ''" />
@@ -11028,7 +11145,7 @@ i0.ɵɵngDeclareClassMetadata({
 
     </ui-modal>
   `,
-			styles: [".ie-actions{display:flex;gap:8px}.ie-steps{display:flex;align-items:center;margin-bottom:24px;gap:0;list-style:none;padding:0}.ie-step{display:flex;align-items:center;gap:6px;flex-shrink:0}.ie-step-num{width:24px;height:24px;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ie-step-label{font-size:.8125rem;color:#64748b;font-weight:500}.ie-step.active .ie-step-num{background:#3b82f6;color:#fff}.ie-step.active .ie-step-label{color:#1e293b;font-weight:600}.ie-step.done .ie-step-num{background:#22c55e;color:#fff}.ie-step.done .ie-step-label{color:#64748b}.ie-step:not(:last-child){flex:1 1 auto}.ie-step:not(:last-child):after{content:\"\";flex:1;height:1px;background:#e2e8f0;margin:0 8px;min-width:16px}.ie-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-source-step{display:flex;flex-direction:column;gap:16px}.ie-upload-area{display:flex;flex-direction:column;gap:12px}.ie-template-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.875rem;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px}.ie-file-hidden{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;overflow:hidden;cursor:pointer}.ie-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;border:2px dashed #7c8ba1;border-radius:10px;cursor:pointer;transition:border-color .18s ease,background .18s ease}.ie-dropzone:hover,.ie-dropzone:focus-within{border-color:#3b82f6;background:#f0f7ff}.ie-dropzone:focus-within{outline:2px solid #3b82f6;outline-offset:2px}.ie-dropzone.has-error{border-color:#ef4444}.ie-dropzone-text{font-size:.9375rem;font-weight:600;color:#1e293b}.ie-dropzone-sub{font-size:.8125rem;color:#64748b}.ie-mapping{display:flex;flex-direction:column;gap:12px}.ie-mapping-hint{font-size:.875rem;color:#64748b;margin:0}.ie-mapping-success{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:.875rem;color:#15803d}.ie-mapping-success svg{flex-shrink:0;margin-top:1px;color:#16a34a}.ie-mapping-unmatched{display:flex;align-items:flex-start;gap:6px;font-size:.8125rem;color:#64748b;margin:0;padding-top:4px}.ie-mapping-unmatched svg{flex-shrink:0;margin-top:1px}.ie-mapping-unmatched em{font-style:normal;color:#475569}.ie-mapping-table{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.ie-mapping-header{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase}.ie-mapping-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding:8px 12px;border-bottom:1px solid #f1f5f9;gap:8px}.ie-mapping-row:last-child{border-bottom:none}.ie-mapping-row.ie-mapping-row--required-missing{background:#fff7ed}.ie-mapping-row.ie-mapping-row--required-missing .ie-field-label{color:#c2410c}.ie-match-icon{color:#16a34a;margin-right:4px;vertical-align:-1px}.ie-field-label{display:flex;align-items:center;font-size:.875rem;color:#1e293b;font-weight:500}.ie-required{color:#dc2626;margin-left:2px}.ie-sample{font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview{display:flex;flex-direction:column;gap:12px}.ie-preview-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.ie-preview-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ie-result:focus,.ie-source-step:focus,.ie-upload-area:focus,.ie-mapping:focus,.ie-preview:focus{outline:none}.ie-result-list{list-style:none;margin:0;padding:0}.ie-preview-table{width:100%;border-collapse:collapse;font-size:.8125rem}.ie-preview-table th{background:#f8fafc;padding:8px 12px;text-align:left;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;border-bottom:1px solid #e2e8f0;white-space:nowrap}.ie-preview-table td{padding:7px 12px;color:#1e293b;border-bottom:1px solid #f1f5f9;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview-table tr:last-child td{border-bottom:none}.ie-result{display:flex;flex-direction:column;gap:16px}.ie-result-summary{display:flex;flex-direction:column;gap:8px}.ie-result-stat{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;font-size:.9375rem}.ie-result-stat.success{background:#f0fdf4;color:#15803d}.ie-result-stat.success svg{stroke:#22c55e}.ie-result-stat.error{background:#fef2f2;color:#b91c1c}.ie-result-stat.error svg{stroke:#ef4444}.ie-result-stat.warning{background:#fffbeb;color:#b45309}.ie-result-stat.warning svg{stroke:#f59e0b}.ie-progress{margin-top:14px}.ie-progress-track{height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden;position:relative}.ie-progress-bar{position:absolute;inset:0 auto 0 0;width:35%;border-radius:999px;background:#2563eb;animation:ie-progress-slide 1.2s ease-in-out infinite}.ie-progress-text{margin:8px 0 0;font-size:.8125rem;color:#475569}@keyframes ie-progress-slide{0%{left:-35%}to{left:100%}}@media(prefers-reduced-motion:reduce){.ie-progress-bar{animation:none;width:100%;opacity:.5}}.ie-errors-list{border:1px solid #fecaca;border-radius:8px;overflow:hidden}.ie-errors-title{font-size:.8125rem;font-weight:600;color:#b91c1c;padding:8px 12px;background:#fef2f2;margin:0;border-bottom:1px solid #fecaca}.ie-error-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fff1f2;font-size:.8125rem;color:#374151}.ie-error-row:last-child{border-bottom:none}.ie-error-row-num{font-weight:600;color:#b91c1c;flex-shrink:0}.ie-warnings-list{border:1px solid #fde68a;border-radius:8px;overflow:hidden}.ie-warnings-title{font-size:.8125rem;font-weight:600;color:#b45309;padding:8px 12px;background:#fffbeb;margin:0;border-bottom:1px solid #fde68a}.ie-warning-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fef3c7;font-size:.8125rem;color:#374151}.ie-warning-row:last-child{border-bottom:none}.ie-warning-row-num{font-weight:600;color:#b45309;flex-shrink:0}.ie-error{font-size:.875rem;color:#dc2626;margin:0}.ie-footer-right{display:flex;gap:8px;align-items:center}@media(max-width:600px){.ie-step-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-dropzone{padding:24px 16px}.ie-mapping-header{grid-template-columns:1fr 1fr}.ie-mapping-header span:last-child{display:none}.ie-mapping-row{grid-template-columns:1fr 1fr}.ie-mapping-row .ie-sample{display:none}}\n"]
+			styles: [".ie-actions{display:flex;gap:8px}.ie-steps{display:flex;align-items:center;margin-bottom:24px;gap:0;list-style:none;padding:0}.ie-step{display:flex;align-items:center;gap:6px;flex-shrink:0}.ie-step-num{width:24px;height:24px;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ie-step-label{font-size:.8125rem;color:#64748b;font-weight:500}.ie-step.active .ie-step-num{background:#3b82f6;color:#fff}.ie-step.active .ie-step-label{color:#1e293b;font-weight:600}.ie-step.done .ie-step-num{background:#22c55e;color:#fff}.ie-step.done .ie-step-label{color:#64748b}.ie-step:not(:last-child){flex:1 1 auto}.ie-step:not(:last-child):after{content:\"\";flex:1;height:1px;background:#e2e8f0;margin:0 8px;min-width:16px}.ie-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-source-step{display:flex;flex-direction:column;gap:16px}.ie-upload-area{display:flex;flex-direction:column;gap:12px}.ie-template-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.875rem;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px}.ie-file-hidden{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;overflow:hidden;cursor:pointer}.ie-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;border:2px dashed #7c8ba1;border-radius:10px;cursor:pointer;transition:border-color .18s ease,background .18s ease}.ie-dropzone:hover,.ie-dropzone:focus-within{border-color:#3b82f6;background:#f0f7ff}.ie-dropzone:focus-within{outline:2px solid #3b82f6;outline-offset:2px}.ie-dropzone.has-error{border-color:#ef4444}.ie-dropzone-text{font-size:.9375rem;font-weight:600;color:#1e293b}.ie-dropzone-sub{font-size:.8125rem;color:#64748b}.ie-mapping{display:flex;flex-direction:column;gap:12px}.ie-mapping-hint{font-size:.875rem;color:#64748b;margin:0}.ie-mapping-success{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:.875rem;color:#15803d}.ie-mapping-success svg{flex-shrink:0;margin-top:1px;color:#16a34a}.ie-mapping-unmatched{display:flex;align-items:flex-start;gap:6px;font-size:.8125rem;color:#64748b;margin:0;padding-top:4px}.ie-mapping-unmatched svg{flex-shrink:0;margin-top:1px}.ie-mapping-unmatched em{font-style:normal;color:#475569}.ie-mapping-table{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.ie-mapping-header{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase}.ie-mapping-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding:8px 12px;border-bottom:1px solid #f1f5f9;gap:8px}.ie-mapping-row:last-child{border-bottom:none}.ie-mapping-row.ie-mapping-row--required-missing{background:#fff7ed}.ie-mapping-row.ie-mapping-row--required-missing .ie-field-label{color:#c2410c}.ie-match-icon{color:#16a34a;margin-right:4px;vertical-align:-1px}.ie-field-label{display:flex;flex-wrap:wrap;align-items:center;font-size:.875rem;color:#1e293b;font-weight:500}.ie-field-example{flex-basis:100%;font-weight:400}.ie-required{color:#dc2626;margin-left:2px}.ie-sample{font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview{display:flex;flex-direction:column;gap:12px}.ie-preview-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.ie-preview-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ie-result:focus,.ie-source-step:focus,.ie-upload-area:focus,.ie-mapping:focus,.ie-preview:focus{outline:none}.ie-result-list{list-style:none;margin:0;padding:0}.ie-preview-table{width:100%;border-collapse:collapse;font-size:.8125rem}.ie-preview-table th{background:#f8fafc;padding:8px 12px;text-align:left;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;border-bottom:1px solid #e2e8f0;white-space:nowrap}.ie-preview-table td{padding:7px 12px;color:#1e293b;border-bottom:1px solid #f1f5f9;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ie-preview-table tr:last-child td{border-bottom:none}.ie-result{display:flex;flex-direction:column;gap:16px}.ie-result-summary{display:flex;flex-direction:column;gap:8px}.ie-result-stat{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;font-size:.9375rem}.ie-result-stat.success{background:#f0fdf4;color:#15803d}.ie-result-stat.success svg{stroke:#22c55e}.ie-result-stat.error{background:#fef2f2;color:#b91c1c}.ie-result-stat.error svg{stroke:#ef4444}.ie-result-stat.warning{background:#fffbeb;color:#b45309}.ie-result-stat.warning svg{stroke:#f59e0b}.ie-progress{margin-top:14px}.ie-progress-track{height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden;position:relative}.ie-progress-bar{position:absolute;inset:0 auto 0 0;width:35%;border-radius:999px;background:#2563eb;animation:ie-progress-slide 1.2s ease-in-out infinite}.ie-progress-text{margin:8px 0 0;font-size:.8125rem;color:#475569}@keyframes ie-progress-slide{0%{left:-35%}to{left:100%}}@media(prefers-reduced-motion:reduce){.ie-progress-bar{animation:none;width:100%;opacity:.5}}.ie-errors-list{border:1px solid #fecaca;border-radius:8px;overflow:hidden}.ie-errors-title{font-size:.8125rem;font-weight:600;color:#b91c1c;padding:8px 12px;background:#fef2f2;margin:0;border-bottom:1px solid #fecaca}.ie-error-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fff1f2;font-size:.8125rem;color:#374151}.ie-error-row:last-child{border-bottom:none}.ie-error-row-num{font-weight:600;color:#b91c1c;flex-shrink:0}.ie-warnings-list{border:1px solid #fde68a;border-radius:8px;overflow:hidden}.ie-warnings-title{font-size:.8125rem;font-weight:600;color:#b45309;padding:8px 12px;background:#fffbeb;margin:0;border-bottom:1px solid #fde68a}.ie-warning-row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid #fef3c7;font-size:.8125rem;color:#374151}.ie-warning-row:last-child{border-bottom:none}.ie-warning-row-num{font-weight:600;color:#b45309;flex-shrink:0}.ie-error{font-size:.875rem;color:#dc2626;margin:0}.ie-footer-right{display:flex;gap:8px;align-items:center}@media(max-width:600px){.ie-step-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ie-dropzone{padding:24px 16px}.ie-mapping-header{grid-template-columns:1fr 1fr}.ie-mapping-header span:last-child{display:none}.ie-mapping-row{grid-template-columns:1fr 1fr}.ie-mapping-row .ie-sample{display:none}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -13991,7 +14108,9 @@ var DataTableComponent = class DataTableComponent {
                               <span class="dt-tags">
                                 <ui-badge
                                   [label]="tags[0].name"
-                                  [variant]="tags[0].variant ?? null" />
+                                  [variant]="tags[0].variant ?? null"
+                                  [color]="tags[0].color ?? null" />
+                                @if (tags[0].colorName) {<span class="dt-sr-only">, {{ tags[0].colorName }}</span>}
                                 @if (tags.length > 1) {
                                   <span
                                     class="dt-tags-more"
@@ -14000,7 +14119,7 @@ var DataTableComponent = class DataTableComponent {
                                     (focus)="showTagTooltip($event, tags.slice(1))"
                                     (blur)="hideTagTooltip()"
                                     tabindex="0"
-                                    [attr.aria-label]="tags.slice(1).map(t => t.name).join(', ')">
+                                    [attr.aria-label]="tags.slice(1).map(t => t.colorName ? t.name + ' (' + t.colorName + ')' : t.name).join(', ')">
                                     +{{ tags.length - 1 }}
                                   </span>
                                 }
@@ -14212,6 +14331,7 @@ var DataTableComponent = class DataTableComponent {
                     <div class="dt-card-tags">
                       @for (tag of tagItems; track tag.name) {
                         <ui-badge [label]="tag.name" [variant]="tag.variant ?? 'gray'" size="sm" />
+                        @if (tag.colorName) {<span class="dt-sr-only">, {{ tag.colorName }}</span>}
                       }
                     </div>
                   }
@@ -14304,7 +14424,7 @@ var DataTableComponent = class DataTableComponent {
           [style.left.px]="_tagTooltip()!.x"
           [style.top.px]="_tagTooltip()!.y">
           @for (tag of _tagTooltip()!.tags; track tag.name) {
-            <ui-badge [label]="tag.name" [variant]="tag.variant ?? 'gray'" />
+            <ui-badge [label]="tag.name" [variant]="tag.variant ?? 'gray'" [color]="tag.color ?? null" />
           }
         </div>
       }
@@ -14440,7 +14560,11 @@ var DataTableComponent = class DataTableComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -15081,7 +15205,9 @@ i0.ɵɵngDeclareClassMetadata({
                               <span class="dt-tags">
                                 <ui-badge
                                   [label]="tags[0].name"
-                                  [variant]="tags[0].variant ?? null" />
+                                  [variant]="tags[0].variant ?? null"
+                                  [color]="tags[0].color ?? null" />
+                                @if (tags[0].colorName) {<span class="dt-sr-only">, {{ tags[0].colorName }}</span>}
                                 @if (tags.length > 1) {
                                   <span
                                     class="dt-tags-more"
@@ -15090,7 +15216,7 @@ i0.ɵɵngDeclareClassMetadata({
                                     (focus)="showTagTooltip($event, tags.slice(1))"
                                     (blur)="hideTagTooltip()"
                                     tabindex="0"
-                                    [attr.aria-label]="tags.slice(1).map(t => t.name).join(', ')">
+                                    [attr.aria-label]="tags.slice(1).map(t => t.colorName ? t.name + ' (' + t.colorName + ')' : t.name).join(', ')">
                                     +{{ tags.length - 1 }}
                                   </span>
                                 }
@@ -15302,6 +15428,7 @@ i0.ɵɵngDeclareClassMetadata({
                     <div class="dt-card-tags">
                       @for (tag of tagItems; track tag.name) {
                         <ui-badge [label]="tag.name" [variant]="tag.variant ?? 'gray'" size="sm" />
+                        @if (tag.colorName) {<span class="dt-sr-only">, {{ tag.colorName }}</span>}
                       }
                     </div>
                   }
@@ -15394,7 +15521,7 @@ i0.ɵɵngDeclareClassMetadata({
           [style.left.px]="_tagTooltip()!.x"
           [style.top.px]="_tagTooltip()!.y">
           @for (tag of _tagTooltip()!.tags; track tag.name) {
-            <ui-badge [label]="tag.name" [variant]="tag.variant ?? 'gray'" />
+            <ui-badge [label]="tag.name" [variant]="tag.variant ?? 'gray'" [color]="tag.color ?? null" />
           }
         </div>
       }
@@ -16002,8 +16129,8 @@ var SidePanelComponent = class SidePanelComponent {
         <!-- Header -->
         <div class="sp-header">
           <div class="sp-header-text">
-            <h2 class="sp-title" [id]="titleId">{{ title() }}</h2>
-            @if (subtitle()) { <p class="sp-subtitle">{{ subtitle() }}</p> }
+            <h2 class="sp-title" data-testid="side-panel-title" [id]="titleId">{{ title() }}</h2>
+            @if (subtitle()) { <p class="sp-subtitle" data-testid="side-panel-subtitle">{{ subtitle() }}</p> }
           </div>
           <button class="sp-close" type="button" (click)="closed.emit()" aria-label="Dismiss panel">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -16094,8 +16221,8 @@ i0.ɵɵngDeclareClassMetadata({
         <!-- Header -->
         <div class="sp-header">
           <div class="sp-header-text">
-            <h2 class="sp-title" [id]="titleId">{{ title() }}</h2>
-            @if (subtitle()) { <p class="sp-subtitle">{{ subtitle() }}</p> }
+            <h2 class="sp-title" data-testid="side-panel-title" [id]="titleId">{{ title() }}</h2>
+            @if (subtitle()) { <p class="sp-subtitle" data-testid="side-panel-subtitle">{{ subtitle() }}</p> }
           </div>
           <button class="sp-close" type="button" (click)="closed.emit()" aria-label="Dismiss panel">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -20098,7 +20225,11 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -20503,6 +20634,12 @@ function pillTabId(name, key) {
 function pillTabPanelId(name, key) {
 	return `${name}-panel-${key}`;
 }
+function pillTabTitleId(name) {
+	return `${name}--title`;
+}
+function pillTabDescriptionId(name) {
+	return `${name}--description`;
+}
 var PillTabPanelDirective = class PillTabPanelDirective {
 	constructor() {
 		this.key = input.required({
@@ -20512,6 +20649,10 @@ var PillTabPanelDirective = class PillTabPanelDirective {
 		this.tabsName = input.required(...ngDevMode ? [{ debugName: "tabsName" }] : /* istanbul ignore next */ []);
 		this.activeKey = input(null, ...ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []);
 		this.tabbable = input(false, ...ngDevMode ? [{ debugName: "tabbable" }] : /* istanbul ignore next */ []);
+		this.describedByHeader = input(false, ...ngDevMode ? [{ debugName: "describedByHeader" }] : /* istanbul ignore next */ []);
+	}
+	describedId() {
+		return this.describedByHeader() && !this.isHidden() ? pillTabDescriptionId(this.tabsName()) : null;
 	}
 	panelId() {
 		return pillTabPanelId(this.tabsName(), this.key());
@@ -20568,6 +20709,13 @@ var PillTabPanelDirective = class PillTabPanelDirective {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				describedByHeader: {
+					classPropertyName: "describedByHeader",
+					publicName: "describedByHeader",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: {
@@ -20576,6 +20724,7 @@ var PillTabPanelDirective = class PillTabPanelDirective {
 					"id": "panelId()",
 					"attr.aria-labelledby": "tabId()",
 					"attr.hidden": "isHidden() ? '' : null",
+					"attr.aria-describedby": "describedId()",
 					"attr.tabindex": "tabbable() ? 0 : null"
 				}
 			},
@@ -20598,6 +20747,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[id]": "panelId()",
 				"[attr.aria-labelledby]": "tabId()",
 				"[attr.hidden]": "isHidden() ? '' : null",
+				"[attr.aria-describedby]": "describedId()",
 				"[attr.tabindex]": "tabbable() ? 0 : null"
 			}
 		}]
@@ -20634,10 +20784,24 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "tabbable",
 				required: false
 			}]
+		}],
+		describedByHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedByHeader",
+				required: false
+			}]
 		}]
 	}
 });
 var PillTabsComponent = class PillTabsComponent {
+	titleId() {
+		return pillTabTitleId(this.name());
+	}
+	descriptionId() {
+		return pillTabDescriptionId(this.name());
+	}
 	constructor() {
 		this.host = inject(ElementRef);
 		this.tabs = input([], ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
@@ -20648,7 +20812,10 @@ var PillTabsComponent = class PillTabsComponent {
 		this.orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
 		this.vertical = () => this.orientation() === "vertical";
 		this.controlsPanels = input(false, ...ngDevMode ? [{ debugName: "controlsPanels" }] : /* istanbul ignore next */ []);
+		this.showDescription = input(false, ...ngDevMode ? [{ debugName: "showDescription" }] : /* istanbul ignore next */ []);
+		this.headingLevel = input(2, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
 		this.tabChange = output();
+		this.activeTab = computed(() => this.tabs().find((t) => t.key === this.activeKey()) ?? null, ...ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []);
 		this.canScrollStart = signal(false, ...ngDevMode ? [{ debugName: "canScrollStart" }] : /* istanbul ignore next */ []);
 		this.canScrollEnd = signal(false, ...ngDevMode ? [{ debugName: "canScrollEnd" }] : /* istanbul ignore next */ []);
 		const destroyRef = inject(DestroyRef);
@@ -20782,6 +20949,20 @@ var PillTabsComponent = class PillTabsComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				showDescription: {
+					classPropertyName: "showDescription",
+					publicName: "showDescription",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				headingLevel: {
+					classPropertyName: "headingLevel",
+					publicName: "headingLevel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { tabChange: "tabChange" },
@@ -20816,9 +20997,23 @@ var PillTabsComponent = class PillTabsComponent {
     <span class="pill-fade pill-fade--start" [class.visible]="canScrollStart()" aria-hidden="true" data-testid="pill-fade-start"></span>
     <span class="pill-fade pill-fade--end" [class.visible]="canScrollEnd()" aria-hidden="true" data-testid="pill-fade-end"></span>
     </div>
+    @if (showDescription() && (activeTab()?.title || activeTab()?.description)) {
+      <div class="pill-header" data-testid="pill-header">
+        @if (activeTab()?.title) {
+          @if (headingLevel() === 3) {
+            <h3 class="pill-header-title" [id]="titleId()" data-testid="pill-header-title">{{ activeTab()!.title }}</h3>
+          } @else {
+            <h2 class="pill-header-title" [id]="titleId()" data-testid="pill-header-title">{{ activeTab()!.title }}</h2>
+          }
+        }
+        @if (activeTab()?.description) {
+          <p class="pill-header-description" [id]="descriptionId()" data-testid="pill-header-description">{{ activeTab()!.description }}</p>
+        }
+      </div>
+    }
   `,
 			isInline: true,
-			styles: [".pill-wrap{position:relative}.pill-fade{position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .15s}.pill-fade.visible{opacity:1}.pill-fade--start{left:0;background:linear-gradient(to right,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-fade--end{right:0;background:linear-gradient(to left,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-tabs{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:768px){.pill-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}.pill-tabs::-webkit-scrollbar{display:none}}.pill-tabs--nowrap .pill-tab{flex:0 0 auto;white-space:nowrap}.pill-tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .15s;font-family:inherit}.pill-tab:hover:not(.disabled):not(.active){background:#f8fafc;border-color:#94a3b8}.pill-tab:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pill-tab .pill-count{background:#e2e8f0;color:#475569;font-size:.7rem;font-weight:600;padding:1px 6px;border-radius:999px;line-height:1.4}.pill-tab.active{background:#1e293b;color:#fff;border-color:#1e293b}.pill-tab.active .pill-count{background:#fff3;color:#fff}.pill-tab.active:hover{background:#1e293b;color:#fff}.pill-tab.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.pill-tab .pill-info-icon{flex-shrink:0;opacity:.7}.pill-tab:hover .pill-info-icon,.pill-tab:focus-visible .pill-info-icon{opacity:1}.pill-tab .pill-info-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:280px;padding:8px 12px;border-radius:8px;background:#1e293b;color:#fff;font-size:.75rem;font-weight:400;line-height:1.45;text-align:left;white-space:normal;box-shadow:0 4px 12px #0f172a40;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,visibility .12s}.pill-tab:hover .pill-info-tip,.pill-tab:focus-visible .pill-info-tip{opacity:1;visibility:visible}.pill-tab:last-child .pill-info-tip{left:auto;right:0}.pill-wrap--vertical .pill-fade{display:none}.pill-tabs.pill-tabs--vertical{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:4px;padding-bottom:0}.pill-tabs--vertical .pill-tab{width:100%;justify-content:flex-start;border-radius:10px;text-align:left}.pill-tabs--vertical .pill-tab .pill-count{margin-left:auto}.pill-tabs--vertical .pill-tab .pill-info-tip{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.pill-tabs--vertical .pill-tab:last-child .pill-info-tip{left:calc(100% + 8px);right:auto}@media(pointer:coarse),(max-width:480px){.pill-tab{min-height:44px}}\n"],
+			styles: [".pill-header{margin-top:16px;min-width:0}.pill-header-title{margin:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--ui-text, #1e293b);overflow-wrap:anywhere}.pill-header-description{margin:4px 0 0;font-size:.875rem;line-height:1.5;color:var(--ui-text-muted, #475569);overflow-wrap:anywhere}.pill-wrap{position:relative}.pill-fade{position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .15s}.pill-fade.visible{opacity:1}.pill-fade--start{left:0;background:linear-gradient(to right,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-fade--end{right:0;background:linear-gradient(to left,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-tabs{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:768px){.pill-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}.pill-tabs::-webkit-scrollbar{display:none}}.pill-tabs--nowrap .pill-tab{flex:0 0 auto;white-space:nowrap}.pill-tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .15s;font-family:inherit}.pill-tab:hover:not(.disabled):not(.active){background:#f8fafc;border-color:#94a3b8}.pill-tab:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pill-tab .pill-count{background:#e2e8f0;color:#475569;font-size:.7rem;font-weight:600;padding:1px 6px;border-radius:999px;line-height:1.4}.pill-tab.active{background:#1e293b;color:#fff;border-color:#1e293b}.pill-tab.active .pill-count{background:#fff3;color:#fff}.pill-tab.active:hover{background:#1e293b;color:#fff}.pill-tab.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.pill-tab .pill-info-icon{flex-shrink:0;opacity:.7}.pill-tab:hover .pill-info-icon,.pill-tab:focus-visible .pill-info-icon{opacity:1}.pill-tab .pill-info-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:280px;padding:8px 12px;border-radius:8px;background:#1e293b;color:#fff;font-size:.75rem;font-weight:400;line-height:1.45;text-align:left;white-space:normal;box-shadow:0 4px 12px #0f172a40;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,visibility .12s}.pill-tab:hover .pill-info-tip,.pill-tab:focus-visible .pill-info-tip{opacity:1;visibility:visible}.pill-tab:last-child .pill-info-tip{left:auto;right:0}.pill-wrap--vertical .pill-fade{display:none}.pill-tabs.pill-tabs--vertical{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:4px;padding-bottom:0}.pill-tabs--vertical .pill-tab{width:100%;justify-content:flex-start;border-radius:10px;text-align:left}.pill-tabs--vertical .pill-tab .pill-count{margin-left:auto}.pill-tabs--vertical .pill-tab .pill-info-tip{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.pill-tabs--vertical .pill-tab:last-child .pill-info-tip{left:calc(100% + 8px);right:auto}@media(pointer:coarse),(max-width:480px){.pill-tab{min-height:44px}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -20864,8 +21059,22 @@ i0.ɵɵngDeclareClassMetadata({
     <span class="pill-fade pill-fade--start" [class.visible]="canScrollStart()" aria-hidden="true" data-testid="pill-fade-start"></span>
     <span class="pill-fade pill-fade--end" [class.visible]="canScrollEnd()" aria-hidden="true" data-testid="pill-fade-end"></span>
     </div>
+    @if (showDescription() && (activeTab()?.title || activeTab()?.description)) {
+      <div class="pill-header" data-testid="pill-header">
+        @if (activeTab()?.title) {
+          @if (headingLevel() === 3) {
+            <h3 class="pill-header-title" [id]="titleId()" data-testid="pill-header-title">{{ activeTab()!.title }}</h3>
+          } @else {
+            <h2 class="pill-header-title" [id]="titleId()" data-testid="pill-header-title">{{ activeTab()!.title }}</h2>
+          }
+        }
+        @if (activeTab()?.description) {
+          <p class="pill-header-description" [id]="descriptionId()" data-testid="pill-header-description">{{ activeTab()!.description }}</p>
+        }
+      </div>
+    }
   `,
-			styles: [".pill-wrap{position:relative}.pill-fade{position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .15s}.pill-fade.visible{opacity:1}.pill-fade--start{left:0;background:linear-gradient(to right,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-fade--end{right:0;background:linear-gradient(to left,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-tabs{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:768px){.pill-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}.pill-tabs::-webkit-scrollbar{display:none}}.pill-tabs--nowrap .pill-tab{flex:0 0 auto;white-space:nowrap}.pill-tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .15s;font-family:inherit}.pill-tab:hover:not(.disabled):not(.active){background:#f8fafc;border-color:#94a3b8}.pill-tab:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pill-tab .pill-count{background:#e2e8f0;color:#475569;font-size:.7rem;font-weight:600;padding:1px 6px;border-radius:999px;line-height:1.4}.pill-tab.active{background:#1e293b;color:#fff;border-color:#1e293b}.pill-tab.active .pill-count{background:#fff3;color:#fff}.pill-tab.active:hover{background:#1e293b;color:#fff}.pill-tab.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.pill-tab .pill-info-icon{flex-shrink:0;opacity:.7}.pill-tab:hover .pill-info-icon,.pill-tab:focus-visible .pill-info-icon{opacity:1}.pill-tab .pill-info-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:280px;padding:8px 12px;border-radius:8px;background:#1e293b;color:#fff;font-size:.75rem;font-weight:400;line-height:1.45;text-align:left;white-space:normal;box-shadow:0 4px 12px #0f172a40;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,visibility .12s}.pill-tab:hover .pill-info-tip,.pill-tab:focus-visible .pill-info-tip{opacity:1;visibility:visible}.pill-tab:last-child .pill-info-tip{left:auto;right:0}.pill-wrap--vertical .pill-fade{display:none}.pill-tabs.pill-tabs--vertical{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:4px;padding-bottom:0}.pill-tabs--vertical .pill-tab{width:100%;justify-content:flex-start;border-radius:10px;text-align:left}.pill-tabs--vertical .pill-tab .pill-count{margin-left:auto}.pill-tabs--vertical .pill-tab .pill-info-tip{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.pill-tabs--vertical .pill-tab:last-child .pill-info-tip{left:calc(100% + 8px);right:auto}@media(pointer:coarse),(max-width:480px){.pill-tab{min-height:44px}}\n"]
+			styles: [".pill-header{margin-top:16px;min-width:0}.pill-header-title{margin:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--ui-text, #1e293b);overflow-wrap:anywhere}.pill-header-description{margin:4px 0 0;font-size:.875rem;line-height:1.5;color:var(--ui-text-muted, #475569);overflow-wrap:anywhere}.pill-wrap{position:relative}.pill-fade{position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .15s}.pill-fade.visible{opacity:1}.pill-fade--start{left:0;background:linear-gradient(to right,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-fade--end{right:0;background:linear-gradient(to left,var(--ui-pill-tabs-fade, #fff),transparent)}.pill-tabs{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:768px){.pill-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}.pill-tabs::-webkit-scrollbar{display:none}}.pill-tabs--nowrap .pill-tab{flex:0 0 auto;white-space:nowrap}.pill-tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .15s;font-family:inherit}.pill-tab:hover:not(.disabled):not(.active){background:#f8fafc;border-color:#94a3b8}.pill-tab:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pill-tab .pill-count{background:#e2e8f0;color:#475569;font-size:.7rem;font-weight:600;padding:1px 6px;border-radius:999px;line-height:1.4}.pill-tab.active{background:#1e293b;color:#fff;border-color:#1e293b}.pill-tab.active .pill-count{background:#fff3;color:#fff}.pill-tab.active:hover{background:#1e293b;color:#fff}.pill-tab.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.pill-tab .pill-info-icon{flex-shrink:0;opacity:.7}.pill-tab:hover .pill-info-icon,.pill-tab:focus-visible .pill-info-icon{opacity:1}.pill-tab .pill-info-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:280px;padding:8px 12px;border-radius:8px;background:#1e293b;color:#fff;font-size:.75rem;font-weight:400;line-height:1.45;text-align:left;white-space:normal;box-shadow:0 4px 12px #0f172a40;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,visibility .12s}.pill-tab:hover .pill-info-tip,.pill-tab:focus-visible .pill-info-tip{opacity:1;visibility:visible}.pill-tab:last-child .pill-info-tip{left:auto;right:0}.pill-wrap--vertical .pill-fade{display:none}.pill-tabs.pill-tabs--vertical{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:4px;padding-bottom:0}.pill-tabs--vertical .pill-tab{width:100%;justify-content:flex-start;border-radius:10px;text-align:left}.pill-tabs--vertical .pill-tab .pill-count{margin-left:auto}.pill-tabs--vertical .pill-tab .pill-info-tip{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.pill-tabs--vertical .pill-tab:last-child .pill-info-tip{left:calc(100% + 8px);right:auto}@media(pointer:coarse),(max-width:480px){.pill-tab{min-height:44px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -20926,6 +21135,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showDescription: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDescription",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
 		tabChange: [{
 			type: i0.Output,
 			args: ["tabChange"]
@@ -24078,6 +24303,8 @@ var FileInputComponent = class FileInputComponent {
 		this.showField = input(true, ...ngDevMode ? [{ debugName: "showField" }] : /* istanbul ignore next */ []);
 		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
 		this.toastOnReject = input(false, ...ngDevMode ? [{ debugName: "toastOnReject" }] : /* istanbul ignore next */ []);
+		this.listRejections = input(false, ...ngDevMode ? [{ debugName: "listRejections" }] : /* istanbul ignore next */ []);
+		this.ariaDescribedBy = input("", ...ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
 		this.clearable = input(false, ...ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []);
 		this.removeLabel = input("Remove", ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
 		this.maxSize = input(null, ...ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []);
@@ -24095,6 +24322,7 @@ var FileInputComponent = class FileInputComponent {
 		this.loadingText = input("", ...ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []);
 		this.filesSelected = output();
 		this.fileRejected = output();
+		this.filesRejected = output();
 		this.fileRemoved = output();
 		this.invalidChange = output();
 		this._disabledInput = input(false, {
@@ -24109,10 +24337,15 @@ var FileInputComponent = class FileInputComponent {
 		this._dragging = signal(false, ...ngDevMode ? [{ debugName: "_dragging" }] : /* istanbul ignore next */ []);
 		this._toast = inject(ToastService);
 		this._rejection = signal("", ...ngDevMode ? [{ debugName: "_rejection" }] : /* istanbul ignore next */ []);
+		this._describedBy = computed(() => mergeDescribedBy(this._shownError() ? this._inputId + "-desc" : "", this.ariaDescribedBy()), ...ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []);
+		this._rejected = signal([], ...ngDevMode ? [{ debugName: "_rejected" }] : /* istanbul ignore next */ []);
+		this.rejections = this._rejected.asReadonly();
+		this.rejectionLines = computed(() => this._rejected().map((r) => `"${r.file.name}" was not added. ${r.message}`), ...ngDevMode ? [{ debugName: "rejectionLines" }] : /* istanbul ignore next */ []);
+		this._showRejectList = computed(() => this.listRejections() && this._rejected().length > 0 && !(this.showField() && this.error()), ...ngDevMode ? [{ debugName: "_showRejectList" }] : /* istanbul ignore next */ []);
 		this._reveal = createFieldReveal(this.showErrors);
 		this._issue = computed(() => this.disabled() || !this.required() || this._files().length > 0 ? null : requiredIssue(this.label() || "File"), ...ngDevMode ? [{ debugName: "_issue" }] : /* istanbul ignore next */ []);
 		this.invalid = computed(() => !!this.error() || !!this._rejection() || !!this._issue(), ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
-		this.errorMessage = computed(() => this._rejection() || this._issue()?.message || "", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+		this.errorMessage = computed(() => (this.listRejections() && this._rejected().length > 0 ? this.rejectionLines().join(" ") : this._rejection()) || this._issue()?.message || "", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
 		this._shownError = computed(() => (this.showField() ? this.error() : "") || this._rejection() || (this._reveal.revealed() ? this._issue()?.message ?? "" : ""), ...ngDevMode ? [{ debugName: "_shownError" }] : /* istanbul ignore next */ []);
 		this.summary = computed(() => {
 			const f = this._files();
@@ -24161,7 +24394,7 @@ var FileInputComponent = class FileInputComponent {
 		const el = this.fileEl()?.nativeElement;
 		if (el) el.value = "";
 		this._files.set([]);
-		this._rejection.set("");
+		this.setRejections([]);
 		this._onChange(this.multiple() ? [] : null);
 	}
 	remove() {
@@ -24172,7 +24405,7 @@ var FileInputComponent = class FileInputComponent {
 	writeValue(val) {
 		const files = Array.isArray(val) ? val : val ? [val] : [];
 		this._files.set(files);
-		if (files.length > 0) this._rejection.set("");
+		if (files.length > 0) this.setRejections([]);
 		const el = this.fileEl()?.nativeElement;
 		if (files.length === 0 && el) el.value = "";
 	}
@@ -24215,6 +24448,10 @@ var FileInputComponent = class FileInputComponent {
 		if (dropped.length === 0) return;
 		this.accept$(this.multiple() ? dropped : dropped.slice(0, 1), this.fileEl()?.nativeElement ?? null);
 	}
+	setRejections(list) {
+		this._rejected.set(list);
+		this._rejection.set(list[0]?.message ?? "");
+	}
 	rejectionFor(file) {
 		const accept = this.accept();
 		if (this.enforceAccept() && accept && !fileMatchesAccept(file, accept)) return {
@@ -24244,7 +24481,7 @@ var FileInputComponent = class FileInputComponent {
 	accept$(files, native) {
 		if (files.length === 0) {
 			this._files.set([]);
-			this._rejection.set("");
+			this.setRejections([]);
 			this._onChange(this.multiple() ? [] : null);
 			this._onTouched();
 			return;
@@ -24256,8 +24493,9 @@ var FileInputComponent = class FileInputComponent {
 			if (r) rejected.push(r);
 			else ok.push(f);
 		}
-		this._rejection.set(rejected[0]?.message ?? "");
+		this.setRejections(rejected);
 		rejected.forEach((r) => this.fileRejected.emit(r));
+		if (rejected.length > 0) this.filesRejected.emit(rejected);
 		if (this.toastOnReject() && rejected.length > 0) this._toast.error(rejected.map((r) => `"${r.file.name}" was not added. ${r.message}`).join(" "));
 		if (ok.length === 0) {
 			if (native) native.value = "";
@@ -24373,6 +24611,20 @@ var FileInputComponent = class FileInputComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				listRejections: {
+					classPropertyName: "listRejections",
+					publicName: "listRejections",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaDescribedBy: {
+					classPropertyName: "ariaDescribedBy",
+					publicName: "ariaDescribedBy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				clearable: {
 					classPropertyName: "clearable",
 					publicName: "clearable",
@@ -24489,6 +24741,7 @@ var FileInputComponent = class FileInputComponent {
 			outputs: {
 				filesSelected: "filesSelected",
 				fileRejected: "fileRejected",
+				filesRejected: "filesRejected",
 				fileRemoved: "fileRemoved",
 				invalidChange: "invalidChange"
 			},
@@ -24537,14 +24790,14 @@ var FileInputComponent = class FileInputComponent {
         [attr.required]="required() || null"
         [attr.aria-label]="ariaLabel() || null"
         [attr.aria-invalid]="_shownError() ? 'true' : null"
-        [attr.aria-describedby]="_shownError() ? _inputId + '-desc' : null"
+        [attr.aria-describedby]="_describedBy()"
         [attr.tabindex]="showField() ? -1 : null"
         (change)="onChange($event)"
         (blur)="_onTouched()" />
       @if (showField()) {
         <div class="fi-row">
           <button type="button" class="fi-control" [disabled]="disabled() || loading()" [attr.aria-busy]="loading() ? 'true' : null"
-            [attr.aria-describedby]="_shownError() ? _inputId + '-desc' : null"
+            [attr.aria-describedby]="_describedBy()"
             (click)="open()" (blur)="_touch()"
             (dragenter)="onDragOver($event)" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
             @if (_previewUrl(); as src) {
@@ -24564,12 +24817,18 @@ var FileInputComponent = class FileInputComponent {
         </div>
       }
       @if (_shownError()) {
-        <p class="fi-desc fi-desc-error" [id]="_inputId + '-desc'" role="alert">{{ _shownError() }}</p>
+        @if (_showRejectList()) {
+          <ul class="fi-desc fi-desc-error fi-reject-list" [id]="_inputId + '-desc'" role="alert">
+            @for (line of rejectionLines(); track $index) { <li>{{ line }}</li> }
+          </ul>
+        } @else {
+          <p class="fi-desc fi-desc-error" [id]="_inputId + '-desc'" role="alert">{{ _shownError() }}</p>
+        }
       }
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}:host(:has(.fi-hidden)){display:contents}.fi-field{display:flex;flex-direction:column;gap:6px}.fi-hidden{display:contents}.fi-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.fi-required{color:#dc2626;margin-left:2px}.fi-hint-inline{font-size:.75rem;color:#94a3b8;font-weight:400;margin-left:4px}.fi-native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fi-row{display:flex;align-items:stretch;gap:8px}.fi-control{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;min-width:0;box-sizing:border-box;text-align:left;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.fi-control:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.fi-control:has(ui-image-preview){padding-top:6px;padding-bottom:6px}.fi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fi-loading{overflow:visible}.fi-placeholder{color:#64748b}.fi-browse{flex-shrink:0;font-size:.75rem;font-weight:600;color:#374151;padding:3px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc}.fi-remove{flex-shrink:0;align-self:center;font-family:inherit;font-size:.75rem;font-weight:600;color:#b91c1c;padding:6px 10px;border:1px solid #fecaca;border-radius:6px;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}.fi-remove:hover{background:#fef2f2}.fi-remove:focus-visible{outline:2px solid #ef4444;outline-offset:2px}.fi-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fi-error .fi-control{border-color:#ef4444}.fi-error .fi-control:focus-visible{box-shadow:0 0 0 3px #ef44441f}.fi-drag .fi-control{border-color:#3b82f6;border-style:dashed;background:#eff6ff}.fi-disabled .fi-control{opacity:.5;cursor:not-allowed}.fi-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.fi-desc-error{color:#dc2626}@media(max-width:480px){.fi-control{font-size:1rem}.fi-remove{padding:10px 12px}}@media(pointer:coarse){.fi-control,.fi-remove{min-height:44px}}\n"],
+			styles: [":host{display:block}:host(:has(.fi-hidden)){display:contents}.fi-field{display:flex;flex-direction:column;gap:6px}.fi-hidden{display:contents}.fi-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.fi-required{color:#dc2626;margin-left:2px}.fi-hint-inline{font-size:.75rem;color:#94a3b8;font-weight:400;margin-left:4px}.fi-native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fi-row{display:flex;align-items:stretch;gap:8px}.fi-control{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;min-width:0;box-sizing:border-box;text-align:left;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.fi-control:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.fi-control:has(ui-image-preview){padding-top:6px;padding-bottom:6px}.fi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fi-loading{overflow:visible}.fi-placeholder{color:#64748b}.fi-browse{flex-shrink:0;font-size:.75rem;font-weight:600;color:#374151;padding:3px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc}.fi-remove{flex-shrink:0;align-self:center;font-family:inherit;font-size:.75rem;font-weight:600;color:#b91c1c;padding:6px 10px;border:1px solid #fecaca;border-radius:6px;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}.fi-remove:hover{background:#fef2f2}.fi-remove:focus-visible{outline:2px solid #ef4444;outline-offset:2px}.fi-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fi-error .fi-control{border-color:#ef4444}.fi-error .fi-control:focus-visible{box-shadow:0 0 0 3px #ef44441f}.fi-drag .fi-control{border-color:#3b82f6;border-style:dashed;background:#eff6ff}.fi-disabled .fi-control{opacity:.5;cursor:not-allowed}.fi-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.fi-desc-error{color:#dc2626}.fi-reject-list{margin:4px 0 0;padding-left:18px}.fi-reject-list li{margin:0 0 2px}@media(max-width:480px){.fi-control{font-size:1rem}.fi-remove{padding:10px 12px}}@media(pointer:coarse){.fi-control,.fi-remove{min-height:44px}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ImagePreviewComponent,
@@ -24649,14 +24908,14 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.required]="required() || null"
         [attr.aria-label]="ariaLabel() || null"
         [attr.aria-invalid]="_shownError() ? 'true' : null"
-        [attr.aria-describedby]="_shownError() ? _inputId + '-desc' : null"
+        [attr.aria-describedby]="_describedBy()"
         [attr.tabindex]="showField() ? -1 : null"
         (change)="onChange($event)"
         (blur)="_onTouched()" />
       @if (showField()) {
         <div class="fi-row">
           <button type="button" class="fi-control" [disabled]="disabled() || loading()" [attr.aria-busy]="loading() ? 'true' : null"
-            [attr.aria-describedby]="_shownError() ? _inputId + '-desc' : null"
+            [attr.aria-describedby]="_describedBy()"
             (click)="open()" (blur)="_touch()"
             (dragenter)="onDragOver($event)" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
             @if (_previewUrl(); as src) {
@@ -24676,11 +24935,17 @@ i0.ɵɵngDeclareClassMetadata({
         </div>
       }
       @if (_shownError()) {
-        <p class="fi-desc fi-desc-error" [id]="_inputId + '-desc'" role="alert">{{ _shownError() }}</p>
+        @if (_showRejectList()) {
+          <ul class="fi-desc fi-desc-error fi-reject-list" [id]="_inputId + '-desc'" role="alert">
+            @for (line of rejectionLines(); track $index) { <li>{{ line }}</li> }
+          </ul>
+        } @else {
+          <p class="fi-desc fi-desc-error" [id]="_inputId + '-desc'" role="alert">{{ _shownError() }}</p>
+        }
       }
     </div>
   `,
-			styles: [":host{display:block}:host(:has(.fi-hidden)){display:contents}.fi-field{display:flex;flex-direction:column;gap:6px}.fi-hidden{display:contents}.fi-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.fi-required{color:#dc2626;margin-left:2px}.fi-hint-inline{font-size:.75rem;color:#94a3b8;font-weight:400;margin-left:4px}.fi-native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fi-row{display:flex;align-items:stretch;gap:8px}.fi-control{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;min-width:0;box-sizing:border-box;text-align:left;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.fi-control:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.fi-control:has(ui-image-preview){padding-top:6px;padding-bottom:6px}.fi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fi-loading{overflow:visible}.fi-placeholder{color:#64748b}.fi-browse{flex-shrink:0;font-size:.75rem;font-weight:600;color:#374151;padding:3px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc}.fi-remove{flex-shrink:0;align-self:center;font-family:inherit;font-size:.75rem;font-weight:600;color:#b91c1c;padding:6px 10px;border:1px solid #fecaca;border-radius:6px;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}.fi-remove:hover{background:#fef2f2}.fi-remove:focus-visible{outline:2px solid #ef4444;outline-offset:2px}.fi-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fi-error .fi-control{border-color:#ef4444}.fi-error .fi-control:focus-visible{box-shadow:0 0 0 3px #ef44441f}.fi-drag .fi-control{border-color:#3b82f6;border-style:dashed;background:#eff6ff}.fi-disabled .fi-control{opacity:.5;cursor:not-allowed}.fi-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.fi-desc-error{color:#dc2626}@media(max-width:480px){.fi-control{font-size:1rem}.fi-remove{padding:10px 12px}}@media(pointer:coarse){.fi-control,.fi-remove{min-height:44px}}\n"]
+			styles: [":host{display:block}:host(:has(.fi-hidden)){display:contents}.fi-field{display:flex;flex-direction:column;gap:6px}.fi-hidden{display:contents}.fi-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.fi-required{color:#dc2626;margin-left:2px}.fi-hint-inline{font-size:.75rem;color:#94a3b8;font-weight:400;margin-left:4px}.fi-native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fi-row{display:flex;align-items:stretch;gap:8px}.fi-control{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;min-width:0;box-sizing:border-box;text-align:left;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.fi-control:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.fi-control:has(ui-image-preview){padding-top:6px;padding-bottom:6px}.fi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fi-loading{overflow:visible}.fi-placeholder{color:#64748b}.fi-browse{flex-shrink:0;font-size:.75rem;font-weight:600;color:#374151;padding:3px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc}.fi-remove{flex-shrink:0;align-self:center;font-family:inherit;font-size:.75rem;font-weight:600;color:#b91c1c;padding:6px 10px;border:1px solid #fecaca;border-radius:6px;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}.fi-remove:hover{background:#fef2f2}.fi-remove:focus-visible{outline:2px solid #ef4444;outline-offset:2px}.fi-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fi-error .fi-control{border-color:#ef4444}.fi-error .fi-control:focus-visible{box-shadow:0 0 0 3px #ef44441f}.fi-drag .fi-control{border-color:#3b82f6;border-style:dashed;background:#eff6ff}.fi-disabled .fi-control{opacity:.5;cursor:not-allowed}.fi-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.fi-desc-error{color:#dc2626}.fi-reject-list{margin:4px 0 0;padding-left:18px}.fi-reject-list li{margin:0 0 2px}@media(max-width:480px){.fi-control{font-size:1rem}.fi-remove{padding:10px 12px}}@media(pointer:coarse){.fi-control,.fi-remove{min-height:44px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -24781,6 +25046,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		listRejections: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listRejections",
+				required: false
+			}]
+		}],
+		ariaDescribedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaDescribedBy",
+				required: false
+			}]
+		}],
 		clearable: [{
 			type: i0.Input,
 			args: [{
@@ -24909,6 +25190,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["fileRejected"]
 		}],
+		filesRejected: [{
+			type: i0.Output,
+			args: ["filesRejected"]
+		}],
 		fileRemoved: [{
 			type: i0.Output,
 			args: ["fileRemoved"]
@@ -24931,6 +25216,361 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var CopyFieldComponent = class CopyFieldComponent {
+	constructor() {
+		this.value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.copyLabel = input("Copy", ...ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []);
+		this.copiedLabel = input("Copied", ...ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []);
+		this.buttonAriaLabel = input("", ...ngDevMode ? [{ debugName: "buttonAriaLabel" }] : /* istanbul ignore next */ []);
+		this.copiedMessage = input("Copied to clipboard", ...ngDevMode ? [{ debugName: "copiedMessage" }] : /* istanbul ignore next */ []);
+		this.failedMessage = input("Could not copy automatically. The text is selected: press Ctrl+C (Cmd+C on a Mac) to copy it.", ...ngDevMode ? [{ debugName: "failedMessage" }] : /* istanbul ignore next */ []);
+		this.hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.ariaDescribedBy = input("", ...ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
+		this.inputTestId = input("", ...ngDevMode ? [{ debugName: "inputTestId" }] : /* istanbul ignore next */ []);
+		this.buttonTestId = input("", ...ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []);
+		this.copied = output();
+		this.copyFailed = output();
+		this._id = `cf-${Math.random().toString(36).slice(2, 8)}`;
+		this._state = signal("idle", ...ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []);
+		this._announcement = computed(() => this._state() === "copied" ? this.copiedMessage() : this._state() === "failed" ? this.failedMessage() : "", ...ngDevMode ? [{ debugName: "_announcement" }] : /* istanbul ignore next */ []);
+		this._buttonName = computed(() => this.buttonAriaLabel() || [this.copyLabel(), this.label()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "_buttonName" }] : /* istanbul ignore next */ []);
+		this._describedBy = computed(() => {
+			const ids = `${this.hint() ? this._id + "-hint" : ""} ${this._state() === "failed" ? this._id + "-fail" : ""} ${this.ariaDescribedBy()}`.split(/\s+/).filter(Boolean);
+			const unique = ids.filter((id, i) => ids.indexOf(id) === i);
+			return unique.length ? unique.join(" ") : null;
+		}, ...ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []);
+		this.fieldEl = viewChild("field", ...ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []);
+		this._timer = null;
+	}
+	ngOnDestroy() {
+		if (this._timer) clearTimeout(this._timer);
+	}
+	selectAll() {
+		this.fieldEl()?.nativeElement.select();
+	}
+	async copy() {
+		const text = this.value();
+		if (!text || this.disabled()) return false;
+		let ok = false;
+		try {
+			if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+				await navigator.clipboard.writeText(text);
+				ok = true;
+			}
+		} catch {
+			ok = false;
+		}
+		if (!ok) ok = this.legacyCopy();
+		if (this._timer) {
+			clearTimeout(this._timer);
+			this._timer = null;
+		}
+		if (ok) {
+			this._state.set("copied");
+			this.copied.emit(text);
+			this._timer = setTimeout(() => {
+				this._state.set("idle");
+				this._timer = null;
+			}, 2e3);
+		} else {
+			this.selectAll();
+			this._state.set("failed");
+			this.copyFailed.emit();
+		}
+		return ok;
+	}
+	legacyCopy() {
+		const el = this.fieldEl()?.nativeElement;
+		if (!el || typeof document === "undefined" || typeof document.execCommand !== "function") return false;
+		try {
+			el.focus();
+			el.select();
+			el.setSelectionRange(0, el.value.length);
+			return document.execCommand("copy");
+		} catch {
+			return false;
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CopyFieldComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: CopyFieldComponent,
+			isStandalone: true,
+			selector: "ui-copy-field",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				copyLabel: {
+					classPropertyName: "copyLabel",
+					publicName: "copyLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				copiedLabel: {
+					classPropertyName: "copiedLabel",
+					publicName: "copiedLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				buttonAriaLabel: {
+					classPropertyName: "buttonAriaLabel",
+					publicName: "buttonAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				copiedMessage: {
+					classPropertyName: "copiedMessage",
+					publicName: "copiedMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				failedMessage: {
+					classPropertyName: "failedMessage",
+					publicName: "failedMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hint: {
+					classPropertyName: "hint",
+					publicName: "hint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaDescribedBy: {
+					classPropertyName: "ariaDescribedBy",
+					publicName: "ariaDescribedBy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				inputTestId: {
+					classPropertyName: "inputTestId",
+					publicName: "inputTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				buttonTestId: {
+					classPropertyName: "buttonTestId",
+					publicName: "buttonTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				copied: "copied",
+				copyFailed: "copyFailed"
+			},
+			viewQueries: [{
+				propertyName: "fieldEl",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="cf-field">
+      @if (label()) { <label class="cf-label" [for]="_id">{{ label() }}</label> }
+      <div class="cf-row">
+        <input #field class="cf-input" type="text" readonly [id]="_id" [value]="value()" [attr.aria-describedby]="_describedBy()"
+               [attr.data-testid]="inputTestId() || null" (focus)="selectAll()" />
+        <button type="button" class="cf-btn" [disabled]="disabled() || !value()" [attr.aria-label]="_buttonName()"
+                [attr.data-testid]="buttonTestId() || null" (click)="copy()">
+          {{ _state() === 'copied' ? copiedLabel() : copyLabel() }}
+        </button>
+      </div>
+      @if (hint()) { <p class="cf-hint" [id]="_id + '-hint'">{{ hint() }}</p> }
+      <span class="cf-sr" role="status" aria-live="polite" aria-atomic="true">{{ _announcement() }}</span>
+      @if (_state() === 'failed') { <p class="cf-fail" [id]="_id + '-fail'">{{ failedMessage() }}</p> }
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.cf-field{display:flex;flex-direction:column;gap:4px}.cf-label{font-size:.8125rem;font-weight:500;color:#334155}.cf-row{display:flex;gap:8px;align-items:stretch}.cf-input{flex:1 1 auto;min-width:0;box-sizing:border-box;min-height:40px;padding:8px 12px;font:inherit;font-size:.875rem;color:#0f172a;background:#f8fafc;border:1px solid #94a3b8;border-radius:8px;text-overflow:ellipsis}.cf-input:focus-visible{outline:2px solid #1d4ed8;outline-offset:1px}.cf-btn{flex:0 0 auto;min-height:40px;padding:0 16px;font:inherit;font-size:.875rem;font-weight:600;color:#0f172a;background:#fff;border:1px solid #94a3b8;border-radius:8px;cursor:pointer}.cf-btn:hover:not(:disabled){background:#f1f5f9}.cf-btn:focus-visible{outline:2px solid #1d4ed8;outline-offset:1px}.cf-btn:disabled{opacity:.55;cursor:not-allowed}.cf-hint{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.cf-fail{margin:0;font-size:.75rem;line-height:1.4;color:#b91c1c}.cf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(pointer:coarse),(max-width:480px){.cf-input,.cf-btn{min-height:44px}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CopyFieldComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-copy-field",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <div class="cf-field">
+      @if (label()) { <label class="cf-label" [for]="_id">{{ label() }}</label> }
+      <div class="cf-row">
+        <input #field class="cf-input" type="text" readonly [id]="_id" [value]="value()" [attr.aria-describedby]="_describedBy()"
+               [attr.data-testid]="inputTestId() || null" (focus)="selectAll()" />
+        <button type="button" class="cf-btn" [disabled]="disabled() || !value()" [attr.aria-label]="_buttonName()"
+                [attr.data-testid]="buttonTestId() || null" (click)="copy()">
+          {{ _state() === 'copied' ? copiedLabel() : copyLabel() }}
+        </button>
+      </div>
+      @if (hint()) { <p class="cf-hint" [id]="_id + '-hint'">{{ hint() }}</p> }
+      <span class="cf-sr" role="status" aria-live="polite" aria-atomic="true">{{ _announcement() }}</span>
+      @if (_state() === 'failed') { <p class="cf-fail" [id]="_id + '-fail'">{{ failedMessage() }}</p> }
+    </div>
+  `,
+			styles: [":host{display:block}.cf-field{display:flex;flex-direction:column;gap:4px}.cf-label{font-size:.8125rem;font-weight:500;color:#334155}.cf-row{display:flex;gap:8px;align-items:stretch}.cf-input{flex:1 1 auto;min-width:0;box-sizing:border-box;min-height:40px;padding:8px 12px;font:inherit;font-size:.875rem;color:#0f172a;background:#f8fafc;border:1px solid #94a3b8;border-radius:8px;text-overflow:ellipsis}.cf-input:focus-visible{outline:2px solid #1d4ed8;outline-offset:1px}.cf-btn{flex:0 0 auto;min-height:40px;padding:0 16px;font:inherit;font-size:.875rem;font-weight:600;color:#0f172a;background:#fff;border:1px solid #94a3b8;border-radius:8px;cursor:pointer}.cf-btn:hover:not(:disabled){background:#f1f5f9}.cf-btn:focus-visible{outline:2px solid #1d4ed8;outline-offset:1px}.cf-btn:disabled{opacity:.55;cursor:not-allowed}.cf-hint{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.cf-fail{margin:0;font-size:.75rem;line-height:1.4;color:#b91c1c}.cf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(pointer:coarse),(max-width:480px){.cf-input,.cf-btn{min-height:44px}}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		copyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copyLabel",
+				required: false
+			}]
+		}],
+		copiedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copiedLabel",
+				required: false
+			}]
+		}],
+		buttonAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttonAriaLabel",
+				required: false
+			}]
+		}],
+		copiedMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copiedMessage",
+				required: false
+			}]
+		}],
+		failedMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "failedMessage",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaDescribedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaDescribedBy",
+				required: false
+			}]
+		}],
+		inputTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputTestId",
+				required: false
+			}]
+		}],
+		buttonTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttonTestId",
+				required: false
+			}]
+		}],
+		copied: [{
+			type: i0.Output,
+			args: ["copied"]
+		}],
+		copyFailed: [{
+			type: i0.Output,
+			args: ["copyFailed"]
+		}],
+		fieldEl: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}]
+	}
+});
 var DateInputComponent = class DateInputComponent {
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
@@ -25893,6 +26533,7 @@ var TimeInputComponent = class TimeInputComponent {
         [id]="_inputId"
         [value]="_value()"
         [disabled]="disabled()"
+        [attr.aria-disabled]="disabled() ? 'true' : null"
         [attr.min]="min() || null"
         [attr.max]="max() || null"
         [attr.required]="required() || null"
@@ -25957,6 +26598,7 @@ i0.ɵɵngDeclareClassMetadata({
         [id]="_inputId"
         [value]="_value()"
         [disabled]="disabled()"
+        [attr.aria-disabled]="disabled() ? 'true' : null"
         [attr.min]="min() || null"
         [attr.max]="max() || null"
         [attr.required]="required() || null"
@@ -26142,6 +26784,14 @@ var ComboboxComponent = class ComboboxComponent {
 		effect(() => {
 			this.invalidChange.emit(this.invalid());
 		});
+		effect(() => {
+			if (this.disabled()) untracked(() => {
+				this._cancelTimer();
+				this._open.set(false);
+				this._editing.set(false);
+				this._text.set("");
+			});
+		});
 		this._destroyRef.onDestroy(() => this._cancelTimer());
 	}
 	ngOnChanges() {
@@ -26218,6 +26868,7 @@ var ComboboxComponent = class ComboboxComponent {
 		}, { injector: this._injector });
 	}
 	onInput(event) {
+		if (this.disabled()) return;
 		this._text.set(event.target.value);
 		this._editing.set(true);
 		this._open.set(true);
@@ -26297,6 +26948,7 @@ var ComboboxComponent = class ComboboxComponent {
 		if (!o.disabled && i !== this._activeIndex()) this._activeIndex.set(i);
 	}
 	choose(o) {
+		if (this.disabled()) return;
 		const sel = {
 			value: o.value,
 			label: o.label
@@ -26308,6 +26960,7 @@ var ComboboxComponent = class ComboboxComponent {
 		this.valueChange.emit(o);
 	}
 	clear() {
+		if (this.disabled()) return;
 		this._selected.set(null);
 		this._revert();
 		this._open.set(false);
@@ -26499,6 +27152,7 @@ var ComboboxComponent = class ComboboxComponent {
           [placeholder]="placeholder()"
           [value]="_inputText()"
           [disabled]="disabled()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
           [attr.aria-label]="ariaLabel() || null"
           [attr.aria-expanded]="_open() ? 'true' : 'false'"
           [attr.aria-controls]="_open() ? _listId : null"
@@ -26603,6 +27257,7 @@ i0.ɵɵngDeclareClassMetadata({
           [placeholder]="placeholder()"
           [value]="_inputText()"
           [disabled]="disabled()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
           [attr.aria-label]="ariaLabel() || null"
           [attr.aria-expanded]="_open() ? 'true' : 'false'"
           [attr.aria-controls]="_open() ? _listId : null"
@@ -29063,7 +29718,7 @@ var ListItemComponent = class ListItemComponent {
     </ng-template>
     <ng-template #content>
       <div class="li-title-row">
-        <span class="li-title">{{ title() }}</span>
+        <span class="li-title" data-testid="list-item-title">{{ title() }}</span>
         @if (badge() && (checked() || alwaysShowBadge())) {
           <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
         }
@@ -29075,7 +29730,7 @@ var ListItemComponent = class ListItemComponent {
               @if (detail.d) {
                 <svg class="li-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="detail.d" /></svg>
               }
-              <span class="li-detail-text">{{ detail.text }}</span>
+              <span class="li-detail-text" data-testid="list-item-detail">{{ detail.text }}</span>
             </span>
           }
         </div>
@@ -29139,7 +29794,11 @@ var ListItemComponent = class ListItemComponent {
 				kind: "component",
 				type: BadgeComponent,
 				selector: "ui-badge",
-				inputs: ["label", "variant"]
+				inputs: [
+					"label",
+					"variant",
+					"color"
+				]
 			}, {
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -29178,7 +29837,7 @@ i0.ɵɵngDeclareClassMetadata({
     </ng-template>
     <ng-template #content>
       <div class="li-title-row">
-        <span class="li-title">{{ title() }}</span>
+        <span class="li-title" data-testid="list-item-title">{{ title() }}</span>
         @if (badge() && (checked() || alwaysShowBadge())) {
           <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
         }
@@ -29190,7 +29849,7 @@ i0.ɵɵngDeclareClassMetadata({
               @if (detail.d) {
                 <svg class="li-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="detail.d" /></svg>
               }
-              <span class="li-detail-text">{{ detail.text }}</span>
+              <span class="li-detail-text" data-testid="list-item-detail">{{ detail.text }}</span>
             </span>
           }
         </div>
@@ -29685,7 +30344,11 @@ var CardListItemComponent = class CardListItemComponent {
 				kind: "component",
 				type: BadgeComponent,
 				selector: "ui-badge",
-				inputs: ["label", "variant"]
+				inputs: [
+					"label",
+					"variant",
+					"color"
+				]
 			}, {
 				kind: "directive",
 				type: TooltipDirective,
@@ -31580,12 +32243,12 @@ var BarRowComponent = class BarRowComponent {
 			ngImport: i0,
 			template: `
     <div class="br">
-      <span class="br-label" [attr.id]="labelId">{{ label() }}</span>
+      <span class="br-label" data-testid="bar-row-label" [attr.id]="labelId">{{ label() }}</span>
       <ui-progress-bar class="br-bar" [value]="barValue()" [max]="barMax()" [variant]="variant()"
         [ariaLabelledby]="label() ? labelId : ''" [valueText]="effectiveValueText()" />
       <span class="br-value">
-        <span class="br-count">{{ countText() }}</span>
-        @if (share()) { <span class="br-share">{{ share() }}</span> }
+        <span class="br-count" data-testid="bar-row-count">{{ countText() }}</span>
+        @if (share()) { <span class="br-share" data-testid="bar-row-share">{{ share() }}</span> }
       </span>
     </div>
   `,
@@ -31625,12 +32288,12 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
     <div class="br">
-      <span class="br-label" [attr.id]="labelId">{{ label() }}</span>
+      <span class="br-label" data-testid="bar-row-label" [attr.id]="labelId">{{ label() }}</span>
       <ui-progress-bar class="br-bar" [value]="barValue()" [max]="barMax()" [variant]="variant()"
         [ariaLabelledby]="label() ? labelId : ''" [valueText]="effectiveValueText()" />
       <span class="br-value">
-        <span class="br-count">{{ countText() }}</span>
-        @if (share()) { <span class="br-share">{{ share() }}</span> }
+        <span class="br-count" data-testid="bar-row-count">{{ countText() }}</span>
+        @if (share()) { <span class="br-share" data-testid="bar-row-share">{{ share() }}</span> }
       </span>
     </div>
   `,
@@ -32812,7 +33475,11 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -34977,48 +35644,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var HintComponent = class HintComponent {
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: HintComponent,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Component
-		});
-	}
-	static {
-		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "14.0.0",
-			version: "22.2.2",
-			type: HintComponent,
-			isStandalone: true,
-			selector: "ui-hint",
-			ngImport: i0,
-			template: `<p class="hint"><ng-content /></p>`,
-			isInline: true,
-			styles: [":host{display:block}.hint{font-size:.75rem;line-height:1.4;color:#64748b;margin:0}\n"],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: HintComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ui-hint",
-			standalone: true,
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `<p class="hint"><ng-content /></p>`,
-			styles: [":host{display:block}.hint{font-size:.75rem;line-height:1.4;color:#64748b;margin:0}\n"]
-		}]
-	}]
-});
 var TimelineComponent = class TimelineComponent {
 	constructor() {
 		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
@@ -35275,7 +35900,11 @@ var TimelineComponent = class TimelineComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -37777,12 +38406,12 @@ var KpiCardComponent = class KpiCardComponent {
       }
       @if (hasProgress()) {
         <div class="kpi-top">
-          <span class="kpi-label">{{ label() }}</span>
+          <span class="kpi-label" data-testid="kpi-label">{{ label() }}</span>
           <ui-progress-ring class="kpi-ring" [attr.aria-hidden]="loading() ? 'true' : null" [value]="progress()!" [max]="progressMax()" [size]="progressSize()" [strokeWidth]="progressStrokeWidth()"
                             [variant]="progressVariant()" [ariaLabel]="progressAriaLabel() || (label() + ' progress')" [valueText]="progressValueText()" />
         </div>
       } @else {
-        <span class="kpi-label">{{ label() }}</span>
+        <span class="kpi-label" data-testid="kpi-label">{{ label() }}</span>
       }
       @if (loading()) {
         <span class="kpi-value kpi-value--loading" aria-hidden="true" data-testid="kpi-value-placeholder"><span class="kpi-bar"></span></span>
@@ -37791,7 +38420,7 @@ var KpiCardComponent = class KpiCardComponent {
           <span class="kpi-subtitle kpi-subtitle--loading" aria-hidden="true" data-testid="kpi-subtitle-placeholder">{{ subtitle() }}</span>
         }
       } @else {
-        <span class="kpi-value"
+        <span class="kpi-value" data-testid="kpi-value"
               [class.green-value]="highlight() || valueColor() === 'green'"
               [class.blue-value]="valueColor() === 'blue'"
               [class.red-value]="valueColor() === 'red'">{{ value() }}</span>
@@ -37854,12 +38483,12 @@ i0.ɵɵngDeclareClassMetadata({
       }
       @if (hasProgress()) {
         <div class="kpi-top">
-          <span class="kpi-label">{{ label() }}</span>
+          <span class="kpi-label" data-testid="kpi-label">{{ label() }}</span>
           <ui-progress-ring class="kpi-ring" [attr.aria-hidden]="loading() ? 'true' : null" [value]="progress()!" [max]="progressMax()" [size]="progressSize()" [strokeWidth]="progressStrokeWidth()"
                             [variant]="progressVariant()" [ariaLabel]="progressAriaLabel() || (label() + ' progress')" [valueText]="progressValueText()" />
         </div>
       } @else {
-        <span class="kpi-label">{{ label() }}</span>
+        <span class="kpi-label" data-testid="kpi-label">{{ label() }}</span>
       }
       @if (loading()) {
         <span class="kpi-value kpi-value--loading" aria-hidden="true" data-testid="kpi-value-placeholder"><span class="kpi-bar"></span></span>
@@ -37868,7 +38497,7 @@ i0.ɵɵngDeclareClassMetadata({
           <span class="kpi-subtitle kpi-subtitle--loading" aria-hidden="true" data-testid="kpi-subtitle-placeholder">{{ subtitle() }}</span>
         }
       } @else {
-        <span class="kpi-value"
+        <span class="kpi-value" data-testid="kpi-value"
               [class.green-value]="highlight() || valueColor() === 'green'"
               [class.blue-value]="valueColor() === 'blue'"
               [class.red-value]="valueColor() === 'red'">{{ value() }}</span>
@@ -38278,7 +38907,9 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -39982,19 +40613,19 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var RadioMatrixComponent = class RadioMatrixComponent {
+var SwatchPickerComponent = class SwatchPickerComponent {
 	get _name() {
 		return this.name() || this._generatedName;
 	}
 	constructor() {
+		this._el = inject(ElementRef);
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
-		this.rowHeader = input("", ...ngDevMode ? [{ debugName: "rowHeader" }] : /* istanbul ignore next */ []);
-		this.rows = input([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
-		this.columns = input([], ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 		this.hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
 		this.error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
 		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
+		this.columns = input(0, ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
 		this.name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 		this._disabledInput = input(false, {
 			...ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {},
@@ -40002,14 +40633,15 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 		});
 		this._cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []);
 		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
-		this._generatedName = `rm-${Math.random().toString(36).slice(2, 8)}`;
+		this._generatedName = `sp-${Math.random().toString(36).slice(2, 8)}`;
 		this._descId = `${this._generatedName}-desc`;
-		this._value = signal({}, ...ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []);
+		this._value = signal("", ...ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []);
 		this._reveal = createFieldReveal(this.showErrors);
 		this._issue = computed(() => this._check(this._value()), ...ngDevMode ? [{ debugName: "_issue" }] : /* istanbul ignore next */ []);
 		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._onChange = (_) => {};
@@ -40022,13 +40654,14 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 		this._onValidatorChange();
 	}
 	validate(control) {
-		return issueToErrors(this._check(this._toRecord(control.value)));
+		const v = control.value;
+		return issueToErrors(this._check(v == null ? "" : String(v)));
 	}
 	registerOnValidatorChange(fn) {
 		this._onValidatorChange = fn;
 	}
 	writeValue(val) {
-		this._value.set(this._toRecord(val));
+		this._value.set(val ?? "");
 	}
 	registerOnChange(fn) {
 		this._onChange = fn;
@@ -40039,18 +40672,21 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 	setDisabledState(d) {
 		this._cvaDisabled.set(d);
 	}
-	onSelect(row, column) {
-		const next = {
-			...this._value(),
-			[row]: column
-		};
-		this._value.set(next);
-		this._onChange(next);
+	onSelect(value) {
+		if (this.disabled()) return;
+		this._value.set(value);
+		this._onChange(value);
+		this.valueChange.emit(value);
 	}
-	_rowInvalid(row) {
-		if (this.disabled() || row.disabled || !this._reveal.revealed()) return false;
-		const v = this._value()[row.value] ?? "";
-		return v ? !this.columns().some((c) => c.value === v) : this.required();
+	onKeydown(e) {
+		if (e.key !== "Home" && e.key !== "End" || this.disabled()) return;
+		const opts = this.options();
+		const enabled = opts.filter((o) => !o.disabled);
+		if (!enabled.length) return;
+		e.preventDefault();
+		const target = e.key === "Home" ? enabled[0] : enabled[enabled.length - 1];
+		this.onSelect(target.value);
+		this._el.nativeElement.querySelectorAll("input[type=radio]")[opts.indexOf(target)]?.focus();
 	}
 	onFocusOut(event) {
 		const next = event.relatedTarget;
@@ -40058,24 +40694,14 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 		this._onTouched();
 		this._reveal.touched.set(true);
 	}
-	_toRecord(val) {
-		return val && typeof val === "object" ? { ...val } : {};
-	}
 	_check(value) {
 		if (this.disabled()) return null;
-		const cols = this.columns();
-		const rows = this.rows().filter((r) => !r.disabled);
-		if (cols.length > 0 && rows.some((r) => value[r.value] && !cols.some((c) => c.value === value[r.value]))) return {
+		if (!value) return this.required() ? requiredIssue(this.label()) : null;
+		const opts = this.options();
+		if (opts.length > 0 && !opts.some((o) => o.value === value)) return {
 			key: "option",
 			message: "Select a valid option."
 		};
-		if (this.required() && rows.some((r) => !value[r.value])) {
-			const label = this.label().trim();
-			return {
-				key: "required",
-				message: label ? `${label}: choose an option in every row.` : "Choose an option in every row."
-			};
-		}
 		return null;
 	}
 	static {
@@ -40083,7 +40709,7 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 			minVersion: "12.0.0",
 			version: "22.2.2",
 			ngImport: i0,
-			type: RadioMatrixComponent,
+			type: SwatchPickerComponent,
 			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -40092,9 +40718,9 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
 			version: "22.2.2",
-			type: RadioMatrixComponent,
+			type: SwatchPickerComponent,
 			isStandalone: true,
-			selector: "ui-radio-matrix",
+			selector: "ui-swatch-picker",
 			inputs: {
 				label: {
 					classPropertyName: "label",
@@ -40103,23 +40729,9 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				rowHeader: {
-					classPropertyName: "rowHeader",
-					publicName: "rowHeader",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				rows: {
-					classPropertyName: "rows",
-					publicName: "rows",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				columns: {
-					classPropertyName: "columns",
-					publicName: "columns",
+				options: {
+					classPropertyName: "options",
+					publicName: "options",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
@@ -40152,6 +40764,13 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				columns: {
+					classPropertyName: "columns",
+					publicName: "columns",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				name: {
 					classPropertyName: "name",
 					publicName: "name",
@@ -40167,103 +40786,77 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 					transformFunction: null
 				}
 			},
-			outputs: { invalidChange: "invalidChange" },
+			outputs: {
+				invalidChange: "invalidChange",
+				valueChange: "valueChange"
+			},
 			providers: [
 				{
 					provide: NG_VALUE_ACCESSOR,
-					useExisting: forwardRef(() => RadioMatrixComponent),
+					useExisting: forwardRef(() => SwatchPickerComponent),
 					multi: true
 				},
 				{
 					provide: NG_VALIDATORS,
-					useExisting: forwardRef(() => RadioMatrixComponent),
+					useExisting: forwardRef(() => SwatchPickerComponent),
 					multi: true
 				},
 				{
 					provide: UiFieldValidity,
-					useExisting: forwardRef(() => RadioMatrixComponent)
+					useExisting: forwardRef(() => SwatchPickerComponent)
 				}
 			],
 			usesOnChanges: true,
 			ngImport: i0,
 			template: `
     <fieldset
-      class="rm-field"
-      [class.rm-error]="_activeError()"
-      [class.rm-disabled]="disabled()"
+      class="sp-field"
+      role="radiogroup"
+      [class.sp-error]="_activeError()"
+      [class.sp-disabled]="disabled()"
       [disabled]="disabled()"
       [attr.aria-required]="required() ? 'true' : null"
       [attr.aria-invalid]="_activeError() ? 'true' : null"
       [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
-      (focusout)="onFocusOut($event)">
+      (focusout)="onFocusOut($event)"
+      (keydown)="onKeydown($event)">
       @if (label()) {
-        <legend class="rm-label">
+        <legend class="sp-label">
           {{ label() }}
-          @if (required()) { <span class="rm-required" aria-hidden="true">*</span> }
+          @if (required()) { <span class="sp-required" aria-hidden="true">*</span> }
         </legend>
       }
-      <div class="rm-scroll">
-        <table class="rm-table">
-          <thead>
-            <tr>
-              <th scope="col" class="rm-corner">{{ rowHeader() }}</th>
-              @for (col of columns(); track col.value) {
-                <th scope="col" class="rm-col">{{ col.label }}</th>
+      <div class="sp-options" [class.sp-grid]="columns() > 0" [style.--sp-cols]="columns() > 0 ? columns() : null">
+        @for (opt of options(); track opt.value) {
+          <label class="sp-option" [class.sp-selected]="_value() === opt.value" [class.sp-option-disabled]="disabled() || !!opt.disabled" [attr.title]="opt.label">
+            <input class="sp-input" type="radio"
+              [name]="_name"
+              [value]="opt.value"
+              [checked]="_value() === opt.value"
+              [disabled]="disabled() || !!opt.disabled"
+              [attr.aria-label]="opt.label"
+              [attr.data-testid]="opt.testId || null"
+              (change)="onSelect(opt.value)" />
+            <span class="sp-swatch" [style.background-color]="opt.color" aria-hidden="true">
+              @if (_value() === opt.value) {
+                <svg class="sp-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12.5l4.5 4.5L19 7.5" class="sp-check-outline" stroke-width="5"/>
+                  <path d="M5 12.5l4.5 4.5L19 7.5" class="sp-check-mark" stroke-width="3"/>
+                </svg>
               }
-            </tr>
-          </thead>
-          <tbody>
-            @for (row of rows(); track row.value) {
-              <tr class="rm-row" [class.rm-row-missing]="_rowInvalid(row)">
-                <th scope="row" class="rm-row-label">{{ row.label }}</th>
-                @for (col of columns(); track col.value) {
-                  <td class="rm-cell">
-                    <ui-radio
-                      [name]="_name + '-' + row.value"
-                      [value]="col.value"
-                      [ariaLabel]="row.label + ': ' + col.label"
-                      [checked]="_value()[row.value] === col.value"
-                      [disabled]="disabled() || !!row.disabled || !!col.disabled"
-                      [invalid]="_rowInvalid(row)"
-                      [describedBy]="(_activeError() || hint()) ? _descId : ''"
-                      (selected)="onSelect(row.value, $event)" />
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
+            </span>
+          </label>
+        }
       </div>
       @if (_activeError()) {
-        <p class="rm-desc rm-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+        <p class="sp-desc sp-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
       } @else if (hint()) {
-        <p class="rm-desc" [id]="_descId">{{ hint() }}</p>
+        <p class="sp-desc" [id]="_descId">{{ hint() }}</p>
       }
     </fieldset>
   `,
 			isInline: true,
-			styles: [":host{display:block}.rm-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rm-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rm-required{color:#dc2626;margin-left:2px}.rm-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.rm-table{width:100%;border-collapse:collapse;font-size:.875rem}.rm-table th,.rm-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9;text-align:left}.rm-table tbody tr:last-child th,.rm-table tbody tr:last-child td{border-bottom:0}.rm-table thead th{position:sticky;top:0;background:#f8fafc;font-size:.75rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.rm-col,.rm-cell{text-align:center!important;width:1%;white-space:nowrap}.rm-cell ui-radio{display:inline-block}.rm-row-label{font-weight:500;color:#1e293b}.rm-row:hover{background:#f8fafc}.rm-row-missing .rm-row-label{color:#b91c1c}.rm-disabled .rm-scroll{opacity:.6}.rm-error .rm-scroll{border-color:#ef4444}.rm-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rm-desc-error{color:#dc2626}@media(max-width:480px){.rm-table th,.rm-table td{padding:6px 8px}.rm-table thead th{font-size:.6875rem}}\n"],
-			dependencies: [{
-				kind: "component",
-				type: RadioComponent,
-				selector: "ui-radio",
-				inputs: [
-					"label",
-					"description",
-					"icon",
-					"ariaLabel",
-					"testId",
-					"value",
-					"name",
-					"checked",
-					"invalid",
-					"describedBy",
-					"controls",
-					"disabled",
-					"labelId"
-				],
-				outputs: ["selected"]
-			}],
+			styles: [":host{display:block}.sp-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.sp-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.sp-required{color:#dc2626;margin-left:2px}.sp-options{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.sp-options.sp-grid{display:grid;grid-template-columns:repeat(var(--sp-cols),max-content)}.sp-option{position:relative;display:inline-flex;cursor:pointer}.sp-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}.sp-swatch{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 1px #94a3b8;transition:box-shadow .12s}.sp-option:hover .sp-swatch{box-shadow:0 0 0 2px #64748b}.sp-option.sp-selected .sp-swatch{box-shadow:0 0 0 3px #1e293b}.sp-input:focus-visible+.sp-swatch{outline:2px solid #3b82f6;outline-offset:3px}.sp-check-outline{stroke:#0f172abf}.sp-check-mark{stroke:#fff}.sp-option-disabled{cursor:not-allowed;opacity:.45}.sp-error .sp-option .sp-swatch{box-shadow:0 0 0 1px #dc2626}.sp-error .sp-option.sp-selected .sp-swatch{box-shadow:0 0 0 3px #dc2626}.sp-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b;overflow-wrap:anywhere}.sp-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.sp-options{gap:4px}.sp-option{min-width:44px;min-height:44px;align-items:center;justify-content:center}.sp-options.sp-grid{grid-template-columns:repeat(auto-fill,44px)}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -40272,86 +40865,77 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: RadioMatrixComponent,
+	type: SwatchPickerComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-radio-matrix",
+			selector: "ui-swatch-picker",
 			standalone: true,
-			imports: [RadioComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [
 				{
 					provide: NG_VALUE_ACCESSOR,
-					useExisting: forwardRef(() => RadioMatrixComponent),
+					useExisting: forwardRef(() => SwatchPickerComponent),
 					multi: true
 				},
 				{
 					provide: NG_VALIDATORS,
-					useExisting: forwardRef(() => RadioMatrixComponent),
+					useExisting: forwardRef(() => SwatchPickerComponent),
 					multi: true
 				},
 				{
 					provide: UiFieldValidity,
-					useExisting: forwardRef(() => RadioMatrixComponent)
+					useExisting: forwardRef(() => SwatchPickerComponent)
 				}
 			],
 			template: `
     <fieldset
-      class="rm-field"
-      [class.rm-error]="_activeError()"
-      [class.rm-disabled]="disabled()"
+      class="sp-field"
+      role="radiogroup"
+      [class.sp-error]="_activeError()"
+      [class.sp-disabled]="disabled()"
       [disabled]="disabled()"
       [attr.aria-required]="required() ? 'true' : null"
       [attr.aria-invalid]="_activeError() ? 'true' : null"
       [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
-      (focusout)="onFocusOut($event)">
+      (focusout)="onFocusOut($event)"
+      (keydown)="onKeydown($event)">
       @if (label()) {
-        <legend class="rm-label">
+        <legend class="sp-label">
           {{ label() }}
-          @if (required()) { <span class="rm-required" aria-hidden="true">*</span> }
+          @if (required()) { <span class="sp-required" aria-hidden="true">*</span> }
         </legend>
       }
-      <div class="rm-scroll">
-        <table class="rm-table">
-          <thead>
-            <tr>
-              <th scope="col" class="rm-corner">{{ rowHeader() }}</th>
-              @for (col of columns(); track col.value) {
-                <th scope="col" class="rm-col">{{ col.label }}</th>
+      <div class="sp-options" [class.sp-grid]="columns() > 0" [style.--sp-cols]="columns() > 0 ? columns() : null">
+        @for (opt of options(); track opt.value) {
+          <label class="sp-option" [class.sp-selected]="_value() === opt.value" [class.sp-option-disabled]="disabled() || !!opt.disabled" [attr.title]="opt.label">
+            <input class="sp-input" type="radio"
+              [name]="_name"
+              [value]="opt.value"
+              [checked]="_value() === opt.value"
+              [disabled]="disabled() || !!opt.disabled"
+              [attr.aria-label]="opt.label"
+              [attr.data-testid]="opt.testId || null"
+              (change)="onSelect(opt.value)" />
+            <span class="sp-swatch" [style.background-color]="opt.color" aria-hidden="true">
+              @if (_value() === opt.value) {
+                <svg class="sp-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12.5l4.5 4.5L19 7.5" class="sp-check-outline" stroke-width="5"/>
+                  <path d="M5 12.5l4.5 4.5L19 7.5" class="sp-check-mark" stroke-width="3"/>
+                </svg>
               }
-            </tr>
-          </thead>
-          <tbody>
-            @for (row of rows(); track row.value) {
-              <tr class="rm-row" [class.rm-row-missing]="_rowInvalid(row)">
-                <th scope="row" class="rm-row-label">{{ row.label }}</th>
-                @for (col of columns(); track col.value) {
-                  <td class="rm-cell">
-                    <ui-radio
-                      [name]="_name + '-' + row.value"
-                      [value]="col.value"
-                      [ariaLabel]="row.label + ': ' + col.label"
-                      [checked]="_value()[row.value] === col.value"
-                      [disabled]="disabled() || !!row.disabled || !!col.disabled"
-                      [invalid]="_rowInvalid(row)"
-                      [describedBy]="(_activeError() || hint()) ? _descId : ''"
-                      (selected)="onSelect(row.value, $event)" />
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
+            </span>
+          </label>
+        }
       </div>
       @if (_activeError()) {
-        <p class="rm-desc rm-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+        <p class="sp-desc sp-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
       } @else if (hint()) {
-        <p class="rm-desc" [id]="_descId">{{ hint() }}</p>
+        <p class="sp-desc" [id]="_descId">{{ hint() }}</p>
       }
     </fieldset>
   `,
-			styles: [":host{display:block}.rm-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rm-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rm-required{color:#dc2626;margin-left:2px}.rm-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.rm-table{width:100%;border-collapse:collapse;font-size:.875rem}.rm-table th,.rm-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9;text-align:left}.rm-table tbody tr:last-child th,.rm-table tbody tr:last-child td{border-bottom:0}.rm-table thead th{position:sticky;top:0;background:#f8fafc;font-size:.75rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.rm-col,.rm-cell{text-align:center!important;width:1%;white-space:nowrap}.rm-cell ui-radio{display:inline-block}.rm-row-label{font-weight:500;color:#1e293b}.rm-row:hover{background:#f8fafc}.rm-row-missing .rm-row-label{color:#b91c1c}.rm-disabled .rm-scroll{opacity:.6}.rm-error .rm-scroll{border-color:#ef4444}.rm-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rm-desc-error{color:#dc2626}@media(max-width:480px){.rm-table th,.rm-table td{padding:6px 8px}.rm-table thead th{font-size:.6875rem}}\n"]
+			styles: [":host{display:block}.sp-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.sp-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.sp-required{color:#dc2626;margin-left:2px}.sp-options{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.sp-options.sp-grid{display:grid;grid-template-columns:repeat(var(--sp-cols),max-content)}.sp-option{position:relative;display:inline-flex;cursor:pointer}.sp-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}.sp-swatch{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 1px #94a3b8;transition:box-shadow .12s}.sp-option:hover .sp-swatch{box-shadow:0 0 0 2px #64748b}.sp-option.sp-selected .sp-swatch{box-shadow:0 0 0 3px #1e293b}.sp-input:focus-visible+.sp-swatch{outline:2px solid #3b82f6;outline-offset:3px}.sp-check-outline{stroke:#0f172abf}.sp-check-mark{stroke:#fff}.sp-option-disabled{cursor:not-allowed;opacity:.45}.sp-error .sp-option .sp-swatch{box-shadow:0 0 0 1px #dc2626}.sp-error .sp-option.sp-selected .sp-swatch{box-shadow:0 0 0 3px #dc2626}.sp-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b;overflow-wrap:anywhere}.sp-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.sp-options{gap:4px}.sp-option{min-width:44px;min-height:44px;align-items:center;justify-content:center}.sp-options.sp-grid{grid-template-columns:repeat(auto-fill,44px)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -40364,27 +40948,899 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		rowHeader: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "rowHeader",
-				required: false
-			}]
-		}],
-		rows: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "rows",
-				required: false
-			}]
-		}],
-		columns: [{
+		options: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "columns",
+				alias: "options",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		showErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showErrors",
+				required: false
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		_disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalidChange: [{
+			type: i0.Output,
+			args: ["invalidChange"]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}]
+	}
+});
+var IconPickerComponent = class IconPickerComponent {
+	_path(o) {
+		return o.path || iconPath(o.iconKey || o.value) || "";
+	}
+	get _name() {
+		return this.name() || this._generatedName;
+	}
+	constructor() {
+		this._el = inject(ElementRef);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+		this.hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+		this.error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
+		this.columns = input(0, ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+		this.name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this._disabledInput = input(false, {
+			...ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {},
+			alias: "disabled"
+		});
+		this._cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []);
+		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this._generatedName = `ip-${Math.random().toString(36).slice(2, 8)}`;
+		this._descId = `${this._generatedName}-desc`;
+		this._value = signal("", ...ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []);
+		this._reveal = createFieldReveal(this.showErrors);
+		this._issue = computed(() => this._check(this._value()), ...ngDevMode ? [{ debugName: "_issue" }] : /* istanbul ignore next */ []);
+		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._onChange = (_) => {};
+		this._onTouched = () => {};
+		effect(() => {
+			this.invalidChange.emit(this.invalid());
+		});
+	}
+	ngOnChanges() {
+		this._onValidatorChange();
+	}
+	validate(control) {
+		const v = control.value;
+		return issueToErrors(this._check(v == null ? "" : String(v)));
+	}
+	registerOnValidatorChange(fn) {
+		this._onValidatorChange = fn;
+	}
+	writeValue(val) {
+		this._value.set(val ?? "");
+	}
+	registerOnChange(fn) {
+		this._onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this._onTouched = fn;
+	}
+	setDisabledState(d) {
+		this._cvaDisabled.set(d);
+	}
+	onSelect(value) {
+		if (this.disabled()) return;
+		this._value.set(value);
+		this._onChange(value);
+		this.valueChange.emit(value);
+	}
+	onKeydown(e) {
+		if (e.key !== "Home" && e.key !== "End" || this.disabled()) return;
+		const opts = this.options();
+		const enabled = opts.filter((o) => !o.disabled);
+		if (!enabled.length) return;
+		e.preventDefault();
+		const target = e.key === "Home" ? enabled[0] : enabled[enabled.length - 1];
+		this.onSelect(target.value);
+		this._el.nativeElement.querySelectorAll("input[type=radio]")[opts.indexOf(target)]?.focus();
+	}
+	onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next && event.currentTarget.contains(next)) return;
+		this._onTouched();
+		this._reveal.touched.set(true);
+	}
+	_check(value) {
+		if (this.disabled()) return null;
+		if (!value) return this.required() ? requiredIssue(this.label()) : null;
+		const opts = this.options();
+		if (opts.length > 0 && !opts.some((o) => o.value === value)) return {
+			key: "option",
+			message: "Select a valid option."
+		};
+		return null;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IconPickerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: IconPickerComponent,
+			isStandalone: true,
+			selector: "ui-icon-picker",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				options: {
+					classPropertyName: "options",
+					publicName: "options",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hint: {
+					classPropertyName: "hint",
+					publicName: "hint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				error: {
+					classPropertyName: "error",
+					publicName: "error",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showErrors: {
+					classPropertyName: "showErrors",
+					publicName: "showErrors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				columns: {
+					classPropertyName: "columns",
+					publicName: "columns",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				name: {
+					classPropertyName: "name",
+					publicName: "name",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				_disabledInput: {
+					classPropertyName: "_disabledInput",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				invalidChange: "invalidChange",
+				valueChange: "valueChange"
+			},
+			providers: [
+				{
+					provide: NG_VALUE_ACCESSOR,
+					useExisting: forwardRef(() => IconPickerComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => IconPickerComponent),
+					multi: true
+				},
+				{
+					provide: UiFieldValidity,
+					useExisting: forwardRef(() => IconPickerComponent)
+				}
+			],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: `
+    <fieldset
+      class="ip-field"
+      role="radiogroup"
+      [class.ip-error]="_activeError()"
+      [class.ip-disabled]="disabled()"
+      [disabled]="disabled()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="_activeError() ? 'true' : null"
+      [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
+      (focusout)="onFocusOut($event)"
+      (keydown)="onKeydown($event)">
+      @if (label()) {
+        <legend class="ip-label">
+          {{ label() }}
+          @if (required()) { <span class="ip-required" aria-hidden="true">*</span> }
+        </legend>
+      }
+      <div class="ip-options" [class.ip-grid]="columns() > 0" [style.--ip-cols]="columns() > 0 ? columns() : null">
+        @for (opt of options(); track opt.value) {
+          <label class="ip-option" [class.ip-selected]="_value() === opt.value" [class.ip-option-disabled]="disabled() || !!opt.disabled" [attr.title]="opt.label">
+            <input class="ip-input" type="radio"
+              [name]="_name"
+              [value]="opt.value"
+              [checked]="_value() === opt.value"
+              [disabled]="disabled() || !!opt.disabled"
+              [attr.aria-label]="opt.label"
+              [attr.data-testid]="opt.testId || null"
+              (change)="onSelect(opt.value)" />
+            <span class="ip-swatch" aria-hidden="true">
+              <svg class="ip-glyph" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path [attr.d]="_path(opt)"/>
+              </svg>
+              @if (_value() === opt.value) {
+                <svg class="ip-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12.5l4.5 4.5L19 7.5"/>
+                </svg>
+              }
+            </span>
+          </label>
+        }
+      </div>
+      @if (_activeError()) {
+        <p class="ip-desc ip-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+      } @else if (hint()) {
+        <p class="ip-desc" [id]="_descId">{{ hint() }}</p>
+      }
+    </fieldset>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.ip-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.ip-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ip-required{color:#dc2626;margin-left:2px}.ip-options{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.ip-options.ip-grid{display:grid;grid-template-columns:repeat(var(--ip-cols),max-content)}.ip-option{position:relative;display:inline-flex;cursor:pointer}.ip-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}.ip-swatch{display:inline-flex;align-items:center;justify-content:center;position:relative;width:36px;height:36px;border-radius:8px;box-sizing:border-box;background:#fff;color:#334155;border:1px solid #cbd5e1;box-shadow:0 0 0 0 transparent;transition:box-shadow .12s}.ip-option:hover .ip-swatch{border-color:#64748b}.ip-input:focus-visible+.ip-swatch{outline:2px solid #3b82f6;outline-offset:3px}.ip-option.ip-selected .ip-swatch{background:#1e293b;color:#fff;border-color:#1e293b}.ip-check{position:absolute;right:2px;bottom:2px;padding:1px;border-radius:50%;background:#fff;color:#1e293b;border:1px solid #1e293b;box-sizing:content-box}.ip-option-disabled{cursor:not-allowed;opacity:.45}.ip-error .ip-option .ip-swatch{border-color:#dc2626}.ip-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b;overflow-wrap:anywhere}.ip-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.ip-options{gap:4px}.ip-option{min-width:44px;min-height:44px;align-items:center;justify-content:center}.ip-options.ip-grid{grid-template-columns:repeat(auto-fill,44px)}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: IconPickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-icon-picker",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [
+				{
+					provide: NG_VALUE_ACCESSOR,
+					useExisting: forwardRef(() => IconPickerComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => IconPickerComponent),
+					multi: true
+				},
+				{
+					provide: UiFieldValidity,
+					useExisting: forwardRef(() => IconPickerComponent)
+				}
+			],
+			template: `
+    <fieldset
+      class="ip-field"
+      role="radiogroup"
+      [class.ip-error]="_activeError()"
+      [class.ip-disabled]="disabled()"
+      [disabled]="disabled()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="_activeError() ? 'true' : null"
+      [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
+      (focusout)="onFocusOut($event)"
+      (keydown)="onKeydown($event)">
+      @if (label()) {
+        <legend class="ip-label">
+          {{ label() }}
+          @if (required()) { <span class="ip-required" aria-hidden="true">*</span> }
+        </legend>
+      }
+      <div class="ip-options" [class.ip-grid]="columns() > 0" [style.--ip-cols]="columns() > 0 ? columns() : null">
+        @for (opt of options(); track opt.value) {
+          <label class="ip-option" [class.ip-selected]="_value() === opt.value" [class.ip-option-disabled]="disabled() || !!opt.disabled" [attr.title]="opt.label">
+            <input class="ip-input" type="radio"
+              [name]="_name"
+              [value]="opt.value"
+              [checked]="_value() === opt.value"
+              [disabled]="disabled() || !!opt.disabled"
+              [attr.aria-label]="opt.label"
+              [attr.data-testid]="opt.testId || null"
+              (change)="onSelect(opt.value)" />
+            <span class="ip-swatch" aria-hidden="true">
+              <svg class="ip-glyph" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path [attr.d]="_path(opt)"/>
+              </svg>
+              @if (_value() === opt.value) {
+                <svg class="ip-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12.5l4.5 4.5L19 7.5"/>
+                </svg>
+              }
+            </span>
+          </label>
+        }
+      </div>
+      @if (_activeError()) {
+        <p class="ip-desc ip-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+      } @else if (hint()) {
+        <p class="ip-desc" [id]="_descId">{{ hint() }}</p>
+      }
+    </fieldset>
+  `,
+			styles: [":host{display:block}.ip-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.ip-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ip-required{color:#dc2626;margin-left:2px}.ip-options{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.ip-options.ip-grid{display:grid;grid-template-columns:repeat(var(--ip-cols),max-content)}.ip-option{position:relative;display:inline-flex;cursor:pointer}.ip-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}.ip-swatch{display:inline-flex;align-items:center;justify-content:center;position:relative;width:36px;height:36px;border-radius:8px;box-sizing:border-box;background:#fff;color:#334155;border:1px solid #cbd5e1;box-shadow:0 0 0 0 transparent;transition:box-shadow .12s}.ip-option:hover .ip-swatch{border-color:#64748b}.ip-input:focus-visible+.ip-swatch{outline:2px solid #3b82f6;outline-offset:3px}.ip-option.ip-selected .ip-swatch{background:#1e293b;color:#fff;border-color:#1e293b}.ip-check{position:absolute;right:2px;bottom:2px;padding:1px;border-radius:50%;background:#fff;color:#1e293b;border:1px solid #1e293b;box-sizing:content-box}.ip-option-disabled{cursor:not-allowed;opacity:.45}.ip-error .ip-option .ip-swatch{border-color:#dc2626}.ip-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b;overflow-wrap:anywhere}.ip-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.ip-options{gap:4px}.ip-option{min-width:44px;min-height:44px;align-items:center;justify-content:center}.ip-options.ip-grid{grid-template-columns:repeat(auto-fill,44px)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		showErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showErrors",
+				required: false
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		_disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalidChange: [{
+			type: i0.Output,
+			args: ["invalidChange"]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}]
+	}
+});
+var RadioMatrixComponent = class RadioMatrixComponent {
+	get _name() {
+		return this.name() || this._generatedName;
+	}
+	constructor() {
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.rowHeader = input("", ...ngDevMode ? [{ debugName: "rowHeader" }] : /* istanbul ignore next */ []);
+		this.rows = input([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		this.columns = input([], ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+		this.hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+		this.error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
+		this.name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this._disabledInput = input(false, {
+			...ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {},
+			alias: "disabled"
+		});
+		this._cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []);
+		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this._generatedName = `rm-${Math.random().toString(36).slice(2, 8)}`;
+		this._descId = `${this._generatedName}-desc`;
+		this._value = signal({}, ...ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []);
+		this._reveal = createFieldReveal(this.showErrors);
+		this._issue = computed(() => this._check(this._value()), ...ngDevMode ? [{ debugName: "_issue" }] : /* istanbul ignore next */ []);
+		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._activeError = computed(() => this.error() || (this._reveal.revealed() ? this.errorMessage() : ""), ...ngDevMode ? [{ debugName: "_activeError" }] : /* istanbul ignore next */ []);
+		this._onValidatorChange = () => {};
+		this._onChange = (_) => {};
+		this._onTouched = () => {};
+		effect(() => {
+			this.invalidChange.emit(this.invalid());
+		});
+	}
+	ngOnChanges() {
+		this._onValidatorChange();
+	}
+	validate(control) {
+		return issueToErrors(this._check(this._toRecord(control.value)));
+	}
+	registerOnValidatorChange(fn) {
+		this._onValidatorChange = fn;
+	}
+	writeValue(val) {
+		this._value.set(this._toRecord(val));
+	}
+	registerOnChange(fn) {
+		this._onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this._onTouched = fn;
+	}
+	setDisabledState(d) {
+		this._cvaDisabled.set(d);
+	}
+	onSelect(row, column) {
+		const next = {
+			...this._value(),
+			[row]: column
+		};
+		this._value.set(next);
+		this._onChange(next);
+	}
+	_rowInvalid(row) {
+		if (this.disabled() || row.disabled || !this._reveal.revealed()) return false;
+		const v = this._value()[row.value] ?? "";
+		return v ? !this.columns().some((c) => c.value === v) : this.required();
+	}
+	onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next && event.currentTarget.contains(next)) return;
+		this._onTouched();
+		this._reveal.touched.set(true);
+	}
+	_toRecord(val) {
+		return val && typeof val === "object" ? { ...val } : {};
+	}
+	_check(value) {
+		if (this.disabled()) return null;
+		const cols = this.columns();
+		const rows = this.rows().filter((r) => !r.disabled);
+		if (cols.length > 0 && rows.some((r) => value[r.value] && !cols.some((c) => c.value === value[r.value]))) return {
+			key: "option",
+			message: "Select a valid option."
+		};
+		if (this.required() && rows.some((r) => !value[r.value])) {
+			const label = this.label().trim();
+			return {
+				key: "required",
+				message: label ? `${label}: choose an option in every row.` : "Choose an option in every row."
+			};
+		}
+		return null;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RadioMatrixComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RadioMatrixComponent,
+			isStandalone: true,
+			selector: "ui-radio-matrix",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rowHeader: {
+					classPropertyName: "rowHeader",
+					publicName: "rowHeader",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rows: {
+					classPropertyName: "rows",
+					publicName: "rows",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				columns: {
+					classPropertyName: "columns",
+					publicName: "columns",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hint: {
+					classPropertyName: "hint",
+					publicName: "hint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				error: {
+					classPropertyName: "error",
+					publicName: "error",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showErrors: {
+					classPropertyName: "showErrors",
+					publicName: "showErrors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				name: {
+					classPropertyName: "name",
+					publicName: "name",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				_disabledInput: {
+					classPropertyName: "_disabledInput",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { invalidChange: "invalidChange" },
+			providers: [
+				{
+					provide: NG_VALUE_ACCESSOR,
+					useExisting: forwardRef(() => RadioMatrixComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => RadioMatrixComponent),
+					multi: true
+				},
+				{
+					provide: UiFieldValidity,
+					useExisting: forwardRef(() => RadioMatrixComponent)
+				}
+			],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: `
+    <fieldset
+      class="rm-field"
+      [class.rm-error]="_activeError()"
+      [class.rm-disabled]="disabled()"
+      [disabled]="disabled()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="_activeError() ? 'true' : null"
+      [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
+      (focusout)="onFocusOut($event)">
+      @if (label()) {
+        <legend class="rm-label">
+          {{ label() }}
+          @if (required()) { <span class="rm-required" aria-hidden="true">*</span> }
+        </legend>
+      }
+      <div class="rm-scroll">
+        <table class="rm-table">
+          <thead>
+            <tr>
+              <th scope="col" class="rm-corner">{{ rowHeader() }}</th>
+              @for (col of columns(); track col.value) {
+                <th scope="col" class="rm-col">{{ col.label }}</th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of rows(); track row.value) {
+              <tr class="rm-row" [class.rm-row-missing]="_rowInvalid(row)">
+                <th scope="row" class="rm-row-label">{{ row.label }}</th>
+                @for (col of columns(); track col.value) {
+                  <td class="rm-cell">
+                    <ui-radio
+                      [name]="_name + '-' + row.value"
+                      [value]="col.value"
+                      [ariaLabel]="row.label + ': ' + col.label"
+                      [checked]="_value()[row.value] === col.value"
+                      [disabled]="disabled() || !!row.disabled || !!col.disabled"
+                      [invalid]="_rowInvalid(row)"
+                      [describedBy]="(_activeError() || hint()) ? _descId : ''"
+                      (selected)="onSelect(row.value, $event)" />
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      @if (_activeError()) {
+        <p class="rm-desc rm-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+      } @else if (hint()) {
+        <p class="rm-desc" [id]="_descId">{{ hint() }}</p>
+      }
+    </fieldset>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.rm-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rm-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rm-required{color:#dc2626;margin-left:2px}.rm-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.rm-table{width:100%;border-collapse:collapse;font-size:.875rem}.rm-table th,.rm-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9;text-align:left}.rm-table tbody tr:last-child th,.rm-table tbody tr:last-child td{border-bottom:0}.rm-table thead th{position:sticky;top:0;background:#f8fafc;font-size:.75rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.rm-col,.rm-cell{text-align:center!important;width:1%;white-space:nowrap}.rm-cell ui-radio{display:inline-block}.rm-row-label{font-weight:500;color:#1e293b}.rm-row:hover{background:#f8fafc}.rm-row-missing .rm-row-label{color:#b91c1c}.rm-disabled .rm-scroll{opacity:.6}.rm-error .rm-scroll{border-color:#ef4444}.rm-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rm-desc-error{color:#dc2626}@media(max-width:480px){.rm-table th,.rm-table td{padding:6px 8px}.rm-table thead th{font-size:.6875rem}}\n"],
+			dependencies: [{
+				kind: "component",
+				type: RadioComponent,
+				selector: "ui-radio",
+				inputs: [
+					"label",
+					"description",
+					"icon",
+					"ariaLabel",
+					"testId",
+					"value",
+					"name",
+					"checked",
+					"invalid",
+					"describedBy",
+					"controls",
+					"disabled",
+					"labelId"
+				],
+				outputs: ["selected"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RadioMatrixComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-radio-matrix",
+			standalone: true,
+			imports: [RadioComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [
+				{
+					provide: NG_VALUE_ACCESSOR,
+					useExisting: forwardRef(() => RadioMatrixComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => RadioMatrixComponent),
+					multi: true
+				},
+				{
+					provide: UiFieldValidity,
+					useExisting: forwardRef(() => RadioMatrixComponent)
+				}
+			],
+			template: `
+    <fieldset
+      class="rm-field"
+      [class.rm-error]="_activeError()"
+      [class.rm-disabled]="disabled()"
+      [disabled]="disabled()"
+      [attr.aria-required]="required() ? 'true' : null"
+      [attr.aria-invalid]="_activeError() ? 'true' : null"
+      [attr.aria-describedby]="(_activeError() || hint()) ? _descId : null"
+      (focusout)="onFocusOut($event)">
+      @if (label()) {
+        <legend class="rm-label">
+          {{ label() }}
+          @if (required()) { <span class="rm-required" aria-hidden="true">*</span> }
+        </legend>
+      }
+      <div class="rm-scroll">
+        <table class="rm-table">
+          <thead>
+            <tr>
+              <th scope="col" class="rm-corner">{{ rowHeader() }}</th>
+              @for (col of columns(); track col.value) {
+                <th scope="col" class="rm-col">{{ col.label }}</th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of rows(); track row.value) {
+              <tr class="rm-row" [class.rm-row-missing]="_rowInvalid(row)">
+                <th scope="row" class="rm-row-label">{{ row.label }}</th>
+                @for (col of columns(); track col.value) {
+                  <td class="rm-cell">
+                    <ui-radio
+                      [name]="_name + '-' + row.value"
+                      [value]="col.value"
+                      [ariaLabel]="row.label + ': ' + col.label"
+                      [checked]="_value()[row.value] === col.value"
+                      [disabled]="disabled() || !!row.disabled || !!col.disabled"
+                      [invalid]="_rowInvalid(row)"
+                      [describedBy]="(_activeError() || hint()) ? _descId : ''"
+                      (selected)="onSelect(row.value, $event)" />
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      @if (_activeError()) {
+        <p class="rm-desc rm-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+      } @else if (hint()) {
+        <p class="rm-desc" [id]="_descId">{{ hint() }}</p>
+      }
+    </fieldset>
+  `,
+			styles: [":host{display:block}.rm-field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}.rm-label{padding:0;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.rm-required{color:#dc2626;margin-left:2px}.rm-scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}.rm-table{width:100%;border-collapse:collapse;font-size:.875rem}.rm-table th,.rm-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9;text-align:left}.rm-table tbody tr:last-child th,.rm-table tbody tr:last-child td{border-bottom:0}.rm-table thead th{position:sticky;top:0;background:#f8fafc;font-size:.75rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.rm-col,.rm-cell{text-align:center!important;width:1%;white-space:nowrap}.rm-cell ui-radio{display:inline-block}.rm-row-label{font-weight:500;color:#1e293b}.rm-row:hover{background:#f8fafc}.rm-row-missing .rm-row-label{color:#b91c1c}.rm-disabled .rm-scroll{opacity:.6}.rm-error .rm-scroll{border-color:#ef4444}.rm-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.rm-desc-error{color:#dc2626}@media(max-width:480px){.rm-table th,.rm-table td{padding:6px 8px}.rm-table thead th{font-size:.6875rem}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		rowHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowHeader",
+				required: false
+			}]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: false
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
 				required: false
 			}]
 		}],
@@ -45769,7 +47225,11 @@ var CalendarComponent = class CalendarComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -45802,7 +47262,9 @@ var CalendarComponent = class CalendarComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -49983,7 +51445,11 @@ var SetupWizardComponent = class SetupWizardComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -50110,7 +51576,9 @@ var SetupWizardComponent = class SetupWizardComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -52312,7 +53780,9 @@ var EmailTemplateEditorComponent = class EmailTemplateEditorComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -54092,7 +55562,11 @@ var ReminderAlertsComponent = class ReminderAlertsComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -55783,7 +57257,11 @@ var ConversationsComponent = class ConversationsComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -55842,6 +57320,8 @@ var ConversationsComponent = class ConversationsComponent {
 						"showField",
 						"showErrors",
 						"toastOnReject",
+						"listRejections",
+						"ariaDescribedBy",
 						"clearable",
 						"removeLabel",
 						"maxSize",
@@ -55862,6 +57342,7 @@ var ConversationsComponent = class ConversationsComponent {
 					outputs: [
 						"filesSelected",
 						"fileRejected",
+						"filesRejected",
 						"fileRemoved",
 						"invalidChange"
 					]
@@ -59417,6 +60898,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ALLOCATION_CUSTOM, ASCII_SPECIAL_PASSWORD_RULES, ActionBarComponent, AddressInputComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BankAccountFormComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, COMMON_DETAIL_GROUP_STYLES, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, ConversationRichBodyComponent, ConversationsComponent, DEFAULT_ALLOCATION_MODES, DEFAULT_BANK_ACCOUNT_TYPE_OPTIONS, DEFAULT_BANK_HOLDER_TYPE_OPTIONS, DEFAULT_BANK_MANDATE_TEXT, DEFAULT_EMAIL_TEMPLATE_BLOCK_GROUPS, DEFAULT_EMAIL_TEMPLATE_VARIABLE_GROUPS, DEFAULT_PASSWORD_RULES, DEFAULT_PAYMENT_METHODS, DETAIL_CARD_HEADER_BG, DETAIL_GROUP_HEADER_BG, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EMAIL_BLOCK_DRAG_TYPE, EMAIL_TEMPLATE_MAX_BODY, EMAIL_TEMPLATE_MAX_TEXT, EMAIL_TEMPLATE_START_TEXT, EmailTemplateEditorComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FillViewportDirective, FixedFooterComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, ICON_NAMES, IDX_BEHAVIOR_SIGNALS, INTEGRATION_CATALOG, INTEGRATION_FIELD_DEFS, INTEGRATION_GROUP_ORDER, INTEGRATION_OPTION_DEFS, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, ImportSourceGridComponent, KeypadComponent, KpiCardComponent, LAYOUT_GAP_PX, LISTED_SPECIAL_PASSWORD_RULES, ListComponent, ListItemComponent, LiveRegionComponent, MAX_EMAIL_ADDRESS_LENGTH, MAX_PAYMENT_AMOUNT, MIN_PAYMENT_AMOUNT, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, OfflineBannerComponent, OptionCardComponent, PASSWORD_MAX_LENGTH, PAYMENT_METHOD, PAYMENT_METHOD_PLUGIN, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PaymentCustomMethodComponent, PaymentMethodPlugin, PaymentSidePanelComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabPanelDirective, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, ReminderAlertsComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SETUP_DONE_KEY, SETUP_INTEGRATIONS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SetupWizardComponent, SetupWizardStepDirective, SetupWizardStepHeaderDirective, ShareMenuComponent, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, SnackbarComponent, SnackbarService, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextTemplatePickerComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_LOCATIONS, US_STATES, US_STATE_OPTIONS, US_ZIP_PATTERN, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, blockHasContent, buildDefaultSchedule, buildPreviewDocument, buildVideoBlockHtml, builtInActionIcon, businessTimeOptions, callHost, conversationDateLabel, conversationHtmlToText, conversationInitial, conversationMessageStatusLabel, conversationMessageStatusMark, createFieldReveal, createPasswordPolicyValidator, decodeFilterValues, digitsOnly, downloadBlob, emailShareUrl, emptyAddress, encodeFilterValue, encodeFilterValues, errorContextInterceptor, escapeHtml, facebookShareUrl, fileMatchesAccept, fileNameFromContentDisposition, formatAddress, formatAddressValue, formatAddressValueOneLine, formatCategoryLabel, formatConversationPhone, formatConversationTime, formatCurrency, formatDuration, formatFileSize, formatIsoDate, formatIsoDateTime, formatMessageTime, formatPhone, formatPhoneDisplay, formatShortDate, formatTime, formatVideoDuration, getEligibleIds, getEligibleOptions, getErrorMessage, getInitials, gmailShareUrl, groupMessagesByDay, hostErrorMessage, humanReadableMessage, iconPath, insideEditorBlock, integrationPlainText, integrationsForApp, integrationsOnlyFor, isBlockDrag, isEmptyAddress, isValidAmount, isValidEmailAddress, isValidZip, isWebUrl, isoKey, issueToErrors, last4Error, linkedInShareUrl, maxLengthIssue, mergeDescribedBy, normalizeAddress, normalizeHexColor, outlookShareUrl, parseAddressOneLine, parseAddressValue, parseBizHours, parseIso, parseTime, passwordMeetsRules, periodGroup, pillTabId, pillTabPanelId, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours, serializedTextLength, setupIntegrations, splitIntro, terminalTimeoutText, terminalVerdict, todayInTimezone, truncateConversationText, xShareUrl };
+export { ALLOCATION_CUSTOM, ASCII_SPECIAL_PASSWORD_RULES, ActionBarComponent, AddressInputComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BankAccountFormComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, COMMON_DETAIL_GROUP_STYLES, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, ConversationRichBodyComponent, ConversationsComponent, CopyFieldComponent, DEFAULT_ALLOCATION_MODES, DEFAULT_BANK_ACCOUNT_TYPE_OPTIONS, DEFAULT_BANK_HOLDER_TYPE_OPTIONS, DEFAULT_BANK_MANDATE_TEXT, DEFAULT_EMAIL_TEMPLATE_BLOCK_GROUPS, DEFAULT_EMAIL_TEMPLATE_VARIABLE_GROUPS, DEFAULT_PASSWORD_RULES, DEFAULT_PAYMENT_METHODS, DETAIL_CARD_HEADER_BG, DETAIL_GROUP_HEADER_BG, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EMAIL_BLOCK_DRAG_TYPE, EMAIL_TEMPLATE_MAX_BODY, EMAIL_TEMPLATE_MAX_TEXT, EMAIL_TEMPLATE_START_TEXT, EmailTemplateEditorComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FillViewportDirective, FixedFooterComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, ICON_NAMES, IDX_BEHAVIOR_SIGNALS, INTEGRATION_CATALOG, INTEGRATION_FIELD_DEFS, INTEGRATION_GROUP_ORDER, INTEGRATION_OPTION_DEFS, IconComponent, IconPickerComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, ImportSourceGridComponent, KeypadComponent, KpiCardComponent, LAYOUT_GAP_PX, LISTED_SPECIAL_PASSWORD_RULES, ListComponent, ListItemComponent, LiveRegionComponent, MAX_EMAIL_ADDRESS_LENGTH, MAX_PAYMENT_AMOUNT, MIN_PAYMENT_AMOUNT, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, OfflineBannerComponent, OptionCardComponent, PASSWORD_MAX_LENGTH, PAYMENT_METHOD, PAYMENT_METHOD_PLUGIN, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PaymentCustomMethodComponent, PaymentMethodPlugin, PaymentSidePanelComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabPanelDirective, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, ReminderAlertsComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SETUP_DONE_KEY, SETUP_INTEGRATIONS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SetupWizardComponent, SetupWizardStepDirective, SetupWizardStepHeaderDirective, ShareMenuComponent, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, SnackbarComponent, SnackbarService, StackComponent, StarComponent, StepperComponent, SwatchPickerComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextTemplatePickerComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_LOCATIONS, US_STATES, US_STATE_OPTIONS, US_ZIP_PATTERN, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, blockHasContent, buildDefaultSchedule, buildPreviewDocument, buildVideoBlockHtml, builtInActionIcon, businessTimeOptions, callHost, conversationDateLabel, conversationHtmlToText, conversationInitial, conversationMessageStatusLabel, conversationMessageStatusMark, createFieldReveal, createPasswordPolicyValidator, decodeFilterValues, digitsOnly, downloadBlob, emailShareUrl, emptyAddress, encodeFilterValue, encodeFilterValues, errorContextInterceptor, escapeHtml, facebookShareUrl, fileMatchesAccept, fileNameFromContentDisposition, formatAddress, formatAddressValue, formatAddressValueOneLine, formatCategoryLabel, formatConversationPhone, formatConversationTime, formatCurrency, formatDuration, formatFileSize, formatIsoDate, formatIsoDateTime, formatMessageTime, formatPhone, formatPhoneDisplay, formatShortDate, formatTime, formatVideoDuration, getEligibleIds, getEligibleOptions, getErrorMessage, getInitials, gmailShareUrl, groupMessagesByDay, hostErrorMessage, humanReadableMessage, iconPath, insideEditorBlock, integrationPlainText, integrationsForApp, integrationsOnlyFor, isBlockDrag, isEmptyAddress, isValidAmount, isValidEmailAddress, isValidZip, isWebUrl, isoKey, issueToErrors, last4Error, linkedInShareUrl, maxLengthIssue, mergeDescribedBy, normalizeAddress, normalizeHexColor, outlookShareUrl, parseAddressOneLine, parseAddressValue, parseBizHours, parseIso, parseTime, passwordMeetsRules, periodGroup, pillTabDescriptionId, pillTabId, pillTabPanelId, pillTabTitleId, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours, serializedTextLength, setupIntegrations, splitIntro, terminalTimeoutText, terminalVerdict, todayInTimezone, truncateConversationText, xShareUrl };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map