@forgeroute/ui 0.4.73 → 0.4.74

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"
@@ -7413,7 +7469,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 +7507,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 +9961,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 +10112,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 +10308,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 +10601,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 +10760,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 +10871,11 @@ var ImportExportComponent = class ImportExportComponent {
 						"ariaLabel"
 					],
 					outputs: ["sourceSelect"]
+				},
+				{
+					kind: "component",
+					type: HintComponent,
+					selector: "ui-hint"
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -10786,7 +10898,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ModalComponent,
 				ButtonComponent,
 				SelectComponent,
-				ImportSourceGridComponent
+				ImportSourceGridComponent,
+				HintComponent
 			],
 			template: `
     <!-- Trigger buttons -->
@@ -10872,10 +10985,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 +11143,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 +14106,8 @@ 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.length > 1) {
                                   <span
                                     class="dt-tags-more"
@@ -14304,7 +14420,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 +14556,11 @@ var DataTableComponent = class DataTableComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -15081,7 +15201,8 @@ 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.length > 1) {
                                   <span
                                     class="dt-tags-more"
@@ -15394,7 +15515,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 +16123,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 +16215,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 +20219,11 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -20503,6 +20628,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 +20643,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 +20703,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 +20718,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 +20741,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[id]": "panelId()",
 				"[attr.aria-labelledby]": "tabId()",
 				"[attr.hidden]": "isHidden() ? '' : null",
+				"[attr.aria-describedby]": "describedId()",
 				"[attr.tabindex]": "tabbable() ? 0 : null"
 			}
 		}]
@@ -20634,10 +20778,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 +20806,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 +20943,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 +20991,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 +21053,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 +21129,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"]
@@ -25893,6 +26112,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 +26177,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 +26363,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 +26447,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 +26527,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 +26539,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 +26731,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 +26836,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 +29297,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 +29309,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 +29373,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 +29416,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 +29428,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 +29923,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 +31822,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 +31867,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 +33054,11 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -34977,48 +35223,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 +35479,11 @@ var TimelineComponent = class TimelineComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -37777,12 +37985,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 +37999,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 +38062,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 +38076,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 +38486,9 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -39982,19 +40192,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 +40212,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 +40233,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 +40251,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 +40273,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 +40288,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 +40297,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 +40308,853 @@ 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
+				},
+				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(() => SwatchPickerComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => SwatchPickerComponent),
+					multi: true
+				},
+				{
+					provide: UiFieldValidity,
+					useExisting: forwardRef(() => SwatchPickerComponent)
+				}
+			],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: `
+    <fieldset
+      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)"
+      (keydown)="onKeydown($event)">
+      @if (label()) {
+        <legend class="sp-label">
+          {{ label() }}
+          @if (required()) { <span class="sp-required" aria-hidden="true">*</span> }
+        </legend>
+      }
+      <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>
+              }
+            </span>
+          </label>
+        }
+      </div>
+      @if (_activeError()) {
+        <p class="sp-desc sp-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+      } @else if (hint()) {
+        <p class="sp-desc" [id]="_descId">{{ hint() }}</p>
+      }
+    </fieldset>
+  `,
+			isInline: true,
+			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
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SwatchPickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-swatch-picker",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [
+				{
+					provide: NG_VALUE_ACCESSOR,
+					useExisting: forwardRef(() => SwatchPickerComponent),
+					multi: true
+				},
+				{
+					provide: NG_VALIDATORS,
+					useExisting: forwardRef(() => SwatchPickerComponent),
+					multi: true
+				},
+				{
+					provide: UiFieldValidity,
+					useExisting: forwardRef(() => SwatchPickerComponent)
+				}
+			],
+			template: `
+    <fieldset
+      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)"
+      (keydown)="onKeydown($event)">
+      @if (label()) {
+        <legend class="sp-label">
+          {{ label() }}
+          @if (required()) { <span class="sp-required" aria-hidden="true">*</span> }
+        </legend>
+      }
+      <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>
+              }
+            </span>
+          </label>
+        }
+      </div>
+      @if (_activeError()) {
+        <p class="sp-desc sp-desc-error" [id]="_descId" role="alert">{{ _activeError() }}</p>
+      } @else if (hint()) {
+        <p class="sp-desc" [id]="_descId">{{ hint() }}</p>
+      }
+    </fieldset>
+  `,
+			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: () => [],
+	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 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
@@ -45769,7 +46804,11 @@ var CalendarComponent = class CalendarComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -45802,7 +46841,9 @@ var CalendarComponent = class CalendarComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -49983,7 +51024,11 @@ var SetupWizardComponent = class SetupWizardComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -50110,7 +51155,9 @@ var SetupWizardComponent = class SetupWizardComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -52312,7 +53359,9 @@ var EmailTemplateEditorComponent = class EmailTemplateEditorComponent {
 						"name",
 						"noWrap",
 						"orientation",
-						"controlsPanels"
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -54092,7 +55141,11 @@ var ReminderAlertsComponent = class ReminderAlertsComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -55783,7 +56836,11 @@ var ConversationsComponent = class ConversationsComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -59417,6 +60474,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, 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