@forgeroute/ui 0.4.72 → 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"
@@ -3827,6 +3883,9 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 var ButtonComponent = class ButtonComponent {
+	focus(options) {
+		this._hostEl.nativeElement.querySelector("button.btn, a.btn")?.focus(options);
+	}
 	constructor() {
 		this.variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 		this.routerLink = input(null, ...ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []);
@@ -3878,6 +3937,7 @@ var ButtonComponent = class ButtonComponent {
 		this.ariaExpanded = input(void 0, ...ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []);
 		this.ariaPressed = input(void 0, ...ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []);
 		this.ariaDescribedBy = input(void 0, ...ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
+		this._hostEl = inject(ElementRef);
 		effect((onCleanup) => {
 			const below = this.shortBelow();
 			if (!this.shortLabel() || typeof below !== "number" || !Number.isFinite(below) || typeof window === "undefined" || typeof window.matchMedia !== "function") {
@@ -4640,8 +4700,12 @@ const EXTRA_ICONS = {
 	"bank": "M3 21h18 M3 10h18 M5 6l7-3 7 3 M4 10v11 M20 10v11 M8 14v3 M12 14v3 M16 14v3",
 	"unlink": "M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-1.72 1.71 M5.17 11.75l-1.72 1.71a5 5 0 0 0 7.07 7.07l1.71-1.71 M3 3l18 18",
 	"send": "M22 2L11 13 M22 2l-7 20-4-9-9-4 20-7z",
-	"refresh": "M23 4v6h-6 M1 20v-6h6 M3.51 9a9 9 0 0 1 14.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0 0 20.49 15"
+	"refresh": "M23 4v6h-6 M1 20v-6h6 M3.51 9a9 9 0 0 1 14.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0 0 20.49 15",
+	"search": "M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16z M21 21l-4.35-4.35",
+	"cup": "M18 8h1a4 4 0 0 1 0 8h-1 M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z M6 1v3 M10 1v3 M14 1v3",
+	"wrench": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
 };
+const ICON_NAMES = Object.freeze(Object.keys(EXTRA_ICONS));
 function iconPath(name) {
 	return Object.prototype.hasOwnProperty.call(EXTRA_ICONS, name) ? EXTRA_ICONS[name] : builtInActionIcon(name);
 }
@@ -5063,6 +5127,9 @@ var TextInputComponent = class TextInputComponent {
 	static {
 		this._EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 	}
+	focus(options) {
+		this._fieldEl()?.nativeElement.focus(options);
+	}
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
@@ -5070,6 +5137,7 @@ var TextInputComponent = class TextInputComponent {
 		this.inputName = input("", ...ngDevMode ? [{ debugName: "inputName" }] : /* istanbul ignore next */ []);
 		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 		this.prefix = input("", ...ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []);
+		this.leadingIcon = input("", ...ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []);
 		this.revealable = input(false, ...ngDevMode ? [{ debugName: "revealable" }] : /* istanbul ignore next */ []);
 		this.passwordRequirements = input(false, ...ngDevMode ? [{ debugName: "passwordRequirements" }] : /* istanbul ignore next */ []);
 		this.passwordRules = input(void 0, ...ngDevMode ? [{ debugName: "passwordRules" }] : /* istanbul ignore next */ []);
@@ -5103,7 +5171,16 @@ var TextInputComponent = class TextInputComponent {
 		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this._value = signal("", ...ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []);
 		this._reveal = createFieldReveal(this.showErrors);
-		this._prefixPadding = computed(() => this.prefix() ? `calc(12px + ${this.prefix().length}ch + 6px)` : null, ...ngDevMode ? [{ debugName: "_prefixPadding" }] : /* istanbul ignore next */ []);
+		this._leadingD = computed(() => {
+			const key = this.leadingIcon().trim();
+			return key ? iconPath(key) ?? null : null;
+		}, ...ngDevMode ? [{ debugName: "_leadingD" }] : /* istanbul ignore next */ []);
+		this._prefixPadding = computed(() => {
+			const icon = !!this._leadingD();
+			if (this.prefix()) return icon ? `calc(36px + ${this.prefix().length}ch + 6px)` : `calc(12px + ${this.prefix().length}ch + 6px)`;
+			return icon ? "36px" : null;
+		}, ...ngDevMode ? [{ debugName: "_prefixPadding" }] : /* istanbul ignore next */ []);
+		this._fieldEl = viewChild("field", ...ngDevMode ? [{ debugName: "_fieldEl" }] : /* istanbul ignore next */ []);
 		this._numeric = computed(() => this.valueType() === "number" && this.type() === "number", ...ngDevMode ? [{ debugName: "_numeric" }] : /* istanbul ignore next */ []);
 		this._stepAttr = computed(() => {
 			const step = this.step();
@@ -5348,6 +5425,13 @@ var TextInputComponent = class TextInputComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				leadingIcon: {
+					classPropertyName: "leadingIcon",
+					publicName: "leadingIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				revealable: {
 					classPropertyName: "revealable",
 					publicName: "revealable",
@@ -5525,11 +5609,18 @@ var TextInputComponent = class TextInputComponent {
 					useExisting: forwardRef(() => TextInputComponent)
 				}
 			],
+			viewQueries: [{
+				propertyName: "_fieldEl",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			}],
 			usesOnChanges: true,
 			ngImport: i0,
 			template: `
     <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()"
-         [class.ti-prefixed]="!!prefix() || _revealable()" [style.--ti-input-row]="(prefix() || _revealable()) ? (label() ? 2 : 1) : null">
+         [class.ti-prefixed]="!!prefix() || _revealable() || !!_leadingD()" [style.--ti-input-row]="(prefix() || _revealable() || _leadingD()) ? (label() ? 2 : 1) : null">
       @if (label()) {
         <div class="ti-label-row">
           <label class="ti-label" [for]="_inputId">
@@ -5540,6 +5631,7 @@ var TextInputComponent = class TextInputComponent {
         </div>
       }
       <input
+        #field
         class="ti-input"
         [style.padding-left]="_prefixPadding()"
         [style.padding-right]="_revealable() ? '44px' : null"
@@ -5563,9 +5655,13 @@ var TextInputComponent = class TextInputComponent {
         (focus)="onFocus()"
         (blur)="onBlur()"
       />
+      @if (_leadingD(); as d) {
+        <!-- Optional leading icon (library source 2026-11-04): decorative, laid over the input's left padding by the same grid as the prefix. -->
+        <svg class="ti-leading-icon" width="16" height="16" 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]="d" /></svg>
+      }
       @if (prefix()) {
         <!-- Optional leading mark ("$"): a sibling after the input, laid over it by the grid of .ti-prefixed, so toggling it never recreates the input (focus and caret stay). -->
-        <span class="ti-prefix" aria-hidden="true">{{ prefix() }}</span>
+        <span class="ti-prefix" aria-hidden="true" [style.margin-left]="_leadingD() ? '36px' : null">{{ prefix() }}</span>
       }
       @if (_revealable()) {
         <!-- Show / hide toggle laid over the end of the input by the grid of .ti-prefixed. The name stays "Show password"; aria-pressed carries the state. -->
@@ -5587,7 +5683,7 @@ var TextInputComponent = class TextInputComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(pointer:coarse),(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#64748b;opacity:1}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"],
+			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(pointer:coarse),(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-leading-icon{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;color:#64748b;pointer-events:none}.ti-disabled .ti-leading-icon{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#64748b;opacity:1}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: PasswordRequirementsComponent,
@@ -5632,7 +5728,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			template: `
     <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()"
-         [class.ti-prefixed]="!!prefix() || _revealable()" [style.--ti-input-row]="(prefix() || _revealable()) ? (label() ? 2 : 1) : null">
+         [class.ti-prefixed]="!!prefix() || _revealable() || !!_leadingD()" [style.--ti-input-row]="(prefix() || _revealable() || _leadingD()) ? (label() ? 2 : 1) : null">
       @if (label()) {
         <div class="ti-label-row">
           <label class="ti-label" [for]="_inputId">
@@ -5643,6 +5739,7 @@ i0.ɵɵngDeclareClassMetadata({
         </div>
       }
       <input
+        #field
         class="ti-input"
         [style.padding-left]="_prefixPadding()"
         [style.padding-right]="_revealable() ? '44px' : null"
@@ -5666,9 +5763,13 @@ i0.ɵɵngDeclareClassMetadata({
         (focus)="onFocus()"
         (blur)="onBlur()"
       />
+      @if (_leadingD(); as d) {
+        <!-- Optional leading icon (library source 2026-11-04): decorative, laid over the input's left padding by the same grid as the prefix. -->
+        <svg class="ti-leading-icon" width="16" height="16" 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]="d" /></svg>
+      }
       @if (prefix()) {
         <!-- Optional leading mark ("$"): a sibling after the input, laid over it by the grid of .ti-prefixed, so toggling it never recreates the input (focus and caret stay). -->
-        <span class="ti-prefix" aria-hidden="true">{{ prefix() }}</span>
+        <span class="ti-prefix" aria-hidden="true" [style.margin-left]="_leadingD() ? '36px' : null">{{ prefix() }}</span>
       }
       @if (_revealable()) {
         <!-- Show / hide toggle laid over the end of the input by the grid of .ti-prefixed. The name stays "Show password"; aria-pressed carries the state. -->
@@ -5689,7 +5790,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(pointer:coarse),(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#64748b;opacity:1}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"]
+			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(pointer:coarse),(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-leading-icon{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;color:#64748b;pointer-events:none}.ti-disabled .ti-leading-icon{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #7c8ba1;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#64748b;opacity:1}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(pointer:coarse),(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -5742,6 +5843,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		leadingIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leadingIcon",
+				required: false
+			}]
+		}],
 		revealable: [{
 			type: i0.Input,
 			args: [{
@@ -5933,6 +6042,10 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "disabled",
 				required: false
 			}]
+		}],
+		_fieldEl: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
 		}]
 	}
 });
@@ -6274,7 +6387,7 @@ var TableToolbarComponent = class TableToolbarComponent {
     </ui-modal>
   `,
 			isInline: true,
-			styles: [":host{display:inline-flex;max-width:100%}.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.toolbar-item{position:relative}.toolbar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s,border-color .1s}.toolbar-btn:hover{background:#f8fafc}.toolbar-btn.toolbar-btn-active{border-color:#1e293b;background:#f8fafc}.toolbar-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.toolbar-badge{display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.toolbar-primary-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s}.toolbar-primary-btn:hover{background:#1d4ed8}.toolbar-primary-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.more-dropdown{position:absolute;top:calc(100% + 6px);right:0;z-index:200;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 4px 6px #0000000a,0 12px 28px #0000001a;min-width:200px;overflow:hidden}.more-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;border:none;border-bottom:1px solid #f1f5f9;font-size:.875rem;color:#1e293b;font-family:inherit;text-align:left;cursor:pointer;transition:background .1s}.more-option:last-child{border-bottom:none}.more-option:hover{background:#f8fafc}.more-option:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.more-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.more-divider{height:1px;background:#f1f5f9;margin:2px 0}.more-view-name{font-size:.75rem;color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-list{display:grid;grid-template-columns:1fr 1fr;max-height:340px;overflow-y:auto}@media(max-width:480px){.col-list{grid-template-columns:1fr}}@media(max-width:1024px){.toolbar-btn{padding:8px 12px}.toolbar-primary-btn{padding:8px 14px}}@media(pointer:coarse){.toolbar-btn,.toolbar-primary-btn{min-height:44px}}@media(max-width:640px){:host{display:flex;width:100%}.toolbar{width:100%;justify-content:flex-end}.toolbar-btn{padding:10px 12px;font-size:.8125rem;min-height:44px}.toolbar-primary-btn{padding:10px 14px;font-size:.8125rem;min-height:44px}.more-dropdown{max-height:calc(100vh - 140px);overflow-y:auto}.more-option{padding:12px 16px;font-size:.9375rem}}.col-option{display:flex;padding:9px 4px;border-bottom:1px solid #f1f5f9;transition:background .1s;border-radius:6px}.col-option:hover{background:#f8fafc}.col-option:nth-last-child(-n+2){border-bottom:none}.view-list{max-height:360px;overflow-y:auto;margin:0 -24px}.view-empty{padding:16px 24px;font-size:.9rem;color:#94a3b8;margin:0}.view-option{display:flex;align-items:center;padding-right:16px;border-bottom:1px solid #f1f5f9;transition:background .1s}.view-option:last-child{border-bottom:none}.view-option:hover{background:#f8fafc}.view-option.view-active{background:#eff6ff}.view-select-btn{flex:1;padding:12px 8px 12px 24px;background:none;border:none;font-size:.9rem;color:#334155;cursor:pointer;font-family:inherit;text-align:left}.view-delete-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;background:none;border:none;cursor:pointer;color:#94a3b8}.view-delete-btn:hover{color:#dc2626;background:#fef2f2}\n"],
+			styles: [":host{display:inline-flex;max-width:100%}.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.toolbar-item{position:relative}.toolbar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s,border-color .1s}.toolbar-btn:hover{background:#f8fafc}.toolbar-btn.toolbar-btn-active{border-color:#1e293b;background:#f8fafc}.toolbar-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.toolbar-badge{display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.toolbar-primary-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s}.toolbar-primary-btn:hover{background:#1d4ed8}.toolbar-primary-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.more-dropdown{position:absolute;top:calc(100% + 6px);right:0;z-index:200;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 4px 6px #0000000a,0 12px 28px #0000001a;min-width:200px;overflow:hidden}.more-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;border:none;border-bottom:1px solid #f1f5f9;font-size:.875rem;color:#1e293b;font-family:inherit;text-align:left;cursor:pointer;transition:background .1s}.more-option:last-child{border-bottom:none}.more-option:hover{background:#f8fafc}.more-option:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.more-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.more-divider{height:1px;background:#f1f5f9;margin:2px 0}.more-view-name{font-size:.75rem;color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-list{display:grid;grid-template-columns:1fr 1fr;max-height:340px;overflow-y:auto}@media(max-width:480px){.col-list{grid-template-columns:1fr}}@media(max-width:1024px){.toolbar-btn{padding:8px 12px}.toolbar-primary-btn{padding:8px 14px}}@media(pointer:coarse){.toolbar-btn,.toolbar-primary-btn{min-height:44px}}@media(max-width:640px){:host{display:flex;width:100%;min-width:0}.toolbar{width:100%;min-width:0;justify-content:flex-end;flex-wrap:wrap}.toolbar-btn{padding:10px 12px;font-size:.8125rem;min-height:44px}.toolbar-primary-btn{padding:10px 14px;font-size:.8125rem;min-height:44px}.toolbar-btn,.toolbar-primary-btn{max-width:100%;white-space:normal;text-align:center;justify-content:center;line-height:1.25;overflow-wrap:anywhere}.toolbar-item{min-width:0;max-width:100%;display:flex}.more-dropdown{max-height:calc(100vh - 140px);overflow-y:auto}.more-option{padding:12px 16px;font-size:.9375rem}}.col-option{display:flex;padding:9px 4px;border-bottom:1px solid #f1f5f9;transition:background .1s;border-radius:6px}.col-option:hover{background:#f8fafc}.col-option:nth-last-child(-n+2){border-bottom:none}.view-list{max-height:360px;overflow-y:auto;margin:0 -24px}.view-empty{padding:16px 24px;font-size:.9rem;color:#94a3b8;margin:0}.view-option{display:flex;align-items:center;padding-right:16px;border-bottom:1px solid #f1f5f9;transition:background .1s}.view-option:last-child{border-bottom:none}.view-option:hover{background:#f8fafc}.view-option.view-active{background:#eff6ff}.view-select-btn{flex:1;padding:12px 8px 12px 24px;background:none;border:none;font-size:.9rem;color:#334155;cursor:pointer;font-family:inherit;text-align:left}.view-delete-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;background:none;border:none;cursor:pointer;color:#94a3b8}.view-delete-btn:hover{color:#dc2626;background:#fef2f2}\n"],
 			dependencies: [
 				{
 					kind: "ngmodule",
@@ -6398,6 +6511,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -6594,7 +6708,7 @@ i0.ɵɵngDeclareClassMetadata({
       <ui-button modal-footer-right variant="primary" size="sm" [disabled]="!_saveViewName.trim()" (click)="confirmSaveName()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Save</ui-button>
     </ui-modal>
   `,
-			styles: [":host{display:inline-flex;max-width:100%}.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.toolbar-item{position:relative}.toolbar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s,border-color .1s}.toolbar-btn:hover{background:#f8fafc}.toolbar-btn.toolbar-btn-active{border-color:#1e293b;background:#f8fafc}.toolbar-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.toolbar-badge{display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.toolbar-primary-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s}.toolbar-primary-btn:hover{background:#1d4ed8}.toolbar-primary-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.more-dropdown{position:absolute;top:calc(100% + 6px);right:0;z-index:200;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 4px 6px #0000000a,0 12px 28px #0000001a;min-width:200px;overflow:hidden}.more-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;border:none;border-bottom:1px solid #f1f5f9;font-size:.875rem;color:#1e293b;font-family:inherit;text-align:left;cursor:pointer;transition:background .1s}.more-option:last-child{border-bottom:none}.more-option:hover{background:#f8fafc}.more-option:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.more-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.more-divider{height:1px;background:#f1f5f9;margin:2px 0}.more-view-name{font-size:.75rem;color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-list{display:grid;grid-template-columns:1fr 1fr;max-height:340px;overflow-y:auto}@media(max-width:480px){.col-list{grid-template-columns:1fr}}@media(max-width:1024px){.toolbar-btn{padding:8px 12px}.toolbar-primary-btn{padding:8px 14px}}@media(pointer:coarse){.toolbar-btn,.toolbar-primary-btn{min-height:44px}}@media(max-width:640px){:host{display:flex;width:100%}.toolbar{width:100%;justify-content:flex-end}.toolbar-btn{padding:10px 12px;font-size:.8125rem;min-height:44px}.toolbar-primary-btn{padding:10px 14px;font-size:.8125rem;min-height:44px}.more-dropdown{max-height:calc(100vh - 140px);overflow-y:auto}.more-option{padding:12px 16px;font-size:.9375rem}}.col-option{display:flex;padding:9px 4px;border-bottom:1px solid #f1f5f9;transition:background .1s;border-radius:6px}.col-option:hover{background:#f8fafc}.col-option:nth-last-child(-n+2){border-bottom:none}.view-list{max-height:360px;overflow-y:auto;margin:0 -24px}.view-empty{padding:16px 24px;font-size:.9rem;color:#94a3b8;margin:0}.view-option{display:flex;align-items:center;padding-right:16px;border-bottom:1px solid #f1f5f9;transition:background .1s}.view-option:last-child{border-bottom:none}.view-option:hover{background:#f8fafc}.view-option.view-active{background:#eff6ff}.view-select-btn{flex:1;padding:12px 8px 12px 24px;background:none;border:none;font-size:.9rem;color:#334155;cursor:pointer;font-family:inherit;text-align:left}.view-delete-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;background:none;border:none;cursor:pointer;color:#94a3b8}.view-delete-btn:hover{color:#dc2626;background:#fef2f2}\n"]
+			styles: [":host{display:inline-flex;max-width:100%}.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.toolbar-item{position:relative}.toolbar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s,border-color .1s}.toolbar-btn:hover{background:#f8fafc}.toolbar-btn.toolbar-btn-active{border-color:#1e293b;background:#f8fafc}.toolbar-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.toolbar-badge{display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.toolbar-primary-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s}.toolbar-primary-btn:hover{background:#1d4ed8}.toolbar-primary-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.more-dropdown{position:absolute;top:calc(100% + 6px);right:0;z-index:200;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 4px 6px #0000000a,0 12px 28px #0000001a;min-width:200px;overflow:hidden}.more-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;border:none;border-bottom:1px solid #f1f5f9;font-size:.875rem;color:#1e293b;font-family:inherit;text-align:left;cursor:pointer;transition:background .1s}.more-option:last-child{border-bottom:none}.more-option:hover{background:#f8fafc}.more-option:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.more-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;border-radius:999px;font-size:.625rem;font-weight:700;min-width:16px;height:16px;padding:0 4px}.more-divider{height:1px;background:#f1f5f9;margin:2px 0}.more-view-name{font-size:.75rem;color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-list{display:grid;grid-template-columns:1fr 1fr;max-height:340px;overflow-y:auto}@media(max-width:480px){.col-list{grid-template-columns:1fr}}@media(max-width:1024px){.toolbar-btn{padding:8px 12px}.toolbar-primary-btn{padding:8px 14px}}@media(pointer:coarse){.toolbar-btn,.toolbar-primary-btn{min-height:44px}}@media(max-width:640px){:host{display:flex;width:100%;min-width:0}.toolbar{width:100%;min-width:0;justify-content:flex-end;flex-wrap:wrap}.toolbar-btn{padding:10px 12px;font-size:.8125rem;min-height:44px}.toolbar-primary-btn{padding:10px 14px;font-size:.8125rem;min-height:44px}.toolbar-btn,.toolbar-primary-btn{max-width:100%;white-space:normal;text-align:center;justify-content:center;line-height:1.25;overflow-wrap:anywhere}.toolbar-item{min-width:0;max-width:100%;display:flex}.more-dropdown{max-height:calc(100vh - 140px);overflow-y:auto}.more-option{padding:12px 16px;font-size:.9375rem}}.col-option{display:flex;padding:9px 4px;border-bottom:1px solid #f1f5f9;transition:background .1s;border-radius:6px}.col-option:hover{background:#f8fafc}.col-option:nth-last-child(-n+2){border-bottom:none}.view-list{max-height:360px;overflow-y:auto;margin:0 -24px}.view-empty{padding:16px 24px;font-size:.9rem;color:#94a3b8;margin:0}.view-option{display:flex;align-items:center;padding-right:16px;border-bottom:1px solid #f1f5f9;transition:background .1s}.view-option:last-child{border-bottom:none}.view-option:hover{background:#f8fafc}.view-option.view-active{background:#eff6ff}.view-select-btn{flex:1;padding:12px 8px 12px 24px;background:none;border:none;font-size:.9rem;color:#334155;cursor:pointer;font-family:inherit;text-align:left}.view-delete-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;background:none;border:none;cursor:pointer;color:#94a3b8}.view-delete-btn:hover{color:#dc2626;background:#fef2f2}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -7355,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,
@@ -7393,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: {
@@ -7475,6 +7589,7 @@ var SelectComponent = class SelectComponent {
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.labelHidden = input(false, ...ngDevMode ? [{ debugName: "labelHidden" }] : /* istanbul ignore next */ []);
 		this.inputName = input("", ...ngDevMode ? [{ debugName: "inputName" }] : /* istanbul ignore next */ []);
 		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
@@ -7507,6 +7622,7 @@ var SelectComponent = class SelectComponent {
 		this._activeError = computed(() => this.error() || (this._reveal.revealed() ? this.errorMessage() : ""), ...ngDevMode ? [{ debugName: "_activeError" }] : /* istanbul ignore next */ []);
 		this._onValidatorChange = () => {};
 		this._selectId = `sl-${Math.random().toString(36).slice(2, 8)}`;
+		this._hostEl = inject(ElementRef);
 		this._onChange = (_) => {};
 		this._warned = false;
 		this._onTouched = () => {};
@@ -7523,6 +7639,9 @@ var SelectComponent = class SelectComponent {
 	registerOnValidatorChange(fn) {
 		this._onValidatorChange = fn;
 	}
+	focus(options) {
+		this._hostEl.nativeElement.querySelector("select")?.focus(options);
+	}
 	_norm(key) {
 		if (this.valueType() !== "number") return key;
 		const t = key.trim();
@@ -7611,6 +7730,13 @@ var SelectComponent = class SelectComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				labelHidden: {
+					classPropertyName: "labelHidden",
+					publicName: "labelHidden",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				inputName: {
 					classPropertyName: "inputName",
 					publicName: "inputName",
@@ -7713,7 +7839,7 @@ var SelectComponent = class SelectComponent {
 			ngImport: i0,
 			template: `
     <div class="sl-field" [class.sl-error]="_activeError()" [class.sl-disabled]="disabled()">
-      @if (label()) {
+      @if (label() && !labelHidden()) {
         <label class="sl-label" [for]="_selectId">
           {{ label() }}
           @if (required()) { <span class="sl-required" aria-hidden="true">*</span> }
@@ -7726,7 +7852,7 @@ var SelectComponent = class SelectComponent {
           [attr.name]="inputName() || null"
           [disabled]="disabled()"
           [attr.required]="required() || null"
-          [attr.aria-label]="ariaLabel() || null"
+          [attr.aria-label]="ariaLabel() || (labelHidden() ? label() : '') || null"
           [attr.aria-invalid]="_activeError() ? 'true' : null"
           [attr.aria-describedby]="_describedBy() || null"
           (change)="onChange($event)"
@@ -7785,7 +7911,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			template: `
     <div class="sl-field" [class.sl-error]="_activeError()" [class.sl-disabled]="disabled()">
-      @if (label()) {
+      @if (label() && !labelHidden()) {
         <label class="sl-label" [for]="_selectId">
           {{ label() }}
           @if (required()) { <span class="sl-required" aria-hidden="true">*</span> }
@@ -7798,7 +7924,7 @@ i0.ɵɵngDeclareClassMetadata({
           [attr.name]="inputName() || null"
           [disabled]="disabled()"
           [attr.required]="required() || null"
-          [attr.aria-label]="ariaLabel() || null"
+          [attr.aria-label]="ariaLabel() || (labelHidden() ? label() : '') || null"
           [attr.aria-invalid]="_activeError() ? 'true' : null"
           [attr.aria-describedby]="_describedBy() || null"
           (change)="onChange($event)"
@@ -7843,6 +7969,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHidden",
+				required: false
+			}]
+		}],
 		inputName: [{
 			type: i0.Input,
 			args: [{
@@ -7952,6 +8086,7 @@ var ToastService = class ToastService {
 		this.dismissible = signal(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
 		this.persistentLiveRegion = signal(false, ...ngDevMode ? [{ debugName: "persistentLiveRegion" }] : /* istanbul ignore next */ []);
 		this.details = signal(null, ...ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []);
+		this.repeatTick = signal(0, ...ngDevMode ? [{ debugName: "repeatTick" }] : /* istanbul ignore next */ []);
 		this.queuedCount = signal(0, ...ngDevMode ? [{ debugName: "queuedCount" }] : /* istanbul ignore next */ []);
 		this.queueDefault = signal(false, ...ngDevMode ? [{ debugName: "queueDefault" }] : /* istanbul ignore next */ []);
 		this.countdownDefault = signal(false, ...ngDevMode ? [{ debugName: "countdownDefault" }] : /* istanbul ignore next */ []);
@@ -8069,6 +8204,12 @@ var ToastService = class ToastService {
 			duration: options.duration ?? defaultDuration,
 			details
 		};
+		if (options.repeat && this.message() === msg && this.type() === type) {
+			this._clearAdvance();
+			this.repeatTick.update((n) => n + 1);
+			this._present(pending);
+			return;
+		}
 		const queue = options.queue ?? this.queueDefault();
 		const busy = this.message() !== null || this._advanceTimer !== null;
 		if (queue && busy) {
@@ -8202,6 +8343,7 @@ var ToastComponent = class ToastComponent {
 		this.countdownLabel = input("Dismissing in {n}s", ...ngDevMode ? [{ debugName: "countdownLabel" }] : /* istanbul ignore next */ []);
 		this.queueLabel = input("+{n} more", ...ngDevMode ? [{ debugName: "queueLabel" }] : /* istanbul ignore next */ []);
 		this.action = output();
+		this.repeatKeys = computed(() => [this.toast.repeatTick()], ...ngDevMode ? [{ debugName: "repeatKeys" }] : /* istanbul ignore next */ []);
 		this.isRich = computed(() => {
 			const d = this.toast.details();
 			return !!d && (!!d.title || d.actions.length > 0 || d.countdown);
@@ -8217,6 +8359,7 @@ var ToastComponent = class ToastComponent {
 			const m = this._adoptedMessage();
 			return m !== null && m === this.toast.message();
 		}, ...ngDevMode ? [{ debugName: "adopted" }] : /* istanbul ignore next */ []);
+		this._lastRepeatTick = this.toast.repeatTick();
 		this._wasWaiting = false;
 		this._hover = false;
 		this._focus = false;
@@ -8237,7 +8380,13 @@ var ToastComponent = class ToastComponent {
 		effect(() => {
 			const host = this.isHost();
 			const msg = this.toast.message();
+			const tick = this.toast.repeatTick();
 			untracked(() => {
+				if (tick !== this._lastRepeatTick) {
+					this._lastRepeatTick = tick;
+					if (host) this._adoptedMessage.set(null);
+					this._focus = false;
+				}
 				if (msg === null) {
 					this._hover = false;
 					this._focus = false;
@@ -8337,6 +8486,7 @@ var ToastComponent = class ToastComponent {
     }
 
     <ng-template #card>
+      @for (k of repeatKeys(); track k) {
       <div
         class="t-toast"
         [class.t-rich]="isRich()"
@@ -8397,6 +8547,7 @@ var ToastComponent = class ToastComponent {
           }
         }
       </div>
+      }
     </ng-template>
   `,
 			isInline: true,
@@ -8441,6 +8592,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
 
     <ng-template #card>
+      @for (k of repeatKeys(); track k) {
       <div
         class="t-toast"
         [class.t-rich]="isRich()"
@@ -8501,6 +8653,7 @@ i0.ɵɵngDeclareClassMetadata({
           }
         }
       </div>
+      }
     </ng-template>
   `,
 			styles: [".t-live{position:absolute;width:0;height:0;margin:0;padding:0;overflow:visible}.t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}.t-rich{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:8px;row-gap:10px;min-width:min(320px,calc(100vw - 32px))}.t-rich>svg:first-child{margin-top:2px}.t-content{display:flex;flex-direction:column;gap:2px;min-width:0}.t-title{font-weight:700}.t-queue{grid-column:1 / -1;justify-self:end;font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:999px;background:#ffffff38}.t-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}.t-action{min-height:32px;padding:6px 14px;border-radius:8px;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;color:#fff;background:#ffffff2e;border:1px solid rgba(255,255,255,.6)}.t-action:hover:not(:disabled){background:#ffffff4d}.t-action:focus-visible{outline:2px solid #fff;outline-offset:2px}.t-action:disabled{opacity:.5;cursor:not-allowed}.t-action-primary{background:#fff;color:#0f172a;border-color:#fff}.t-action-primary:hover:not(:disabled){background:#f1f5f9}.t-action-danger{background:#7f1d1d;border-color:#ffffffb3}.t-action-danger:hover:not(:disabled){background:#991b1b}.t-countdown{grid-column:1 / -1;display:flex;flex-direction:column;gap:4px}.t-countdown-bar{height:4px;border-radius:2px;background:#ffffff47;overflow:hidden}.t-countdown-fill{height:100%;background:#fff;transition:width .2s linear}.t-countdown-label{font-size:.75rem;opacity:.85;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){.t-countdown-fill{transition:none}}@media(pointer:coarse),(max-width:480px){.t-action{min-height:44px}}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"]
@@ -8636,6 +8789,7 @@ var DetailCardComponent = class DetailCardComponent {
 		this.background = input("", ...ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []);
 		this.headerBackground = input("", ...ngDevMode ? [{ debugName: "headerBackground" }] : /* istanbul ignore next */ []);
 		this.footerBackground = input("", ...ngDevMode ? [{ debugName: "footerBackground" }] : /* istanbul ignore next */ []);
+		this.footerAlign = input("start", ...ngDevMode ? [{ debugName: "footerAlign" }] : /* istanbul ignore next */ []);
 		this.textColor = input("", ...ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []);
 		this.showHeader = input(true, ...ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []);
 		this.collapsible = input(true, ...ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []);
@@ -8760,6 +8914,13 @@ var DetailCardComponent = class DetailCardComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				footerAlign: {
+					classPropertyName: "footerAlign",
+					publicName: "footerAlign",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				textColor: {
 					classPropertyName: "textColor",
 					publicName: "textColor",
@@ -8924,11 +9085,11 @@ var DetailCardComponent = class DetailCardComponent {
           <ng-content />
         </div>
       </div>
-      <div class="dc-footer" [class.dc-footer--hidden]="!isOpen()" [style.background]="footerBackground() || null"><ng-content select="[card-footer]" /></div>
+      <div class="dc-footer" [class.dc-footer--hidden]="!isOpen()" [class.dc-footer--end]="footerAlign() === 'end'" [style.background]="footerBackground() || null"><ng-content select="[card-footer]" /></div>
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.8125rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{box-sizing:border-box;padding:16px 18px;min-height:0;overflow-x:hidden;overflow-y:auto;max-height:var(--dc-body-max-height, none)}.dc-footer{padding:10px 18px;border-top:1px solid #f1f5f9}.dc-footer:empty,.dc-footer.dc-footer--hidden{display:none}.dc-has-bg .dc-footer{border-top-color:#94a3b859}@media(max-width:480px){.dc-footer{padding:10px 14px}.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.8125rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{box-sizing:border-box;padding:16px 18px;min-height:0;overflow-x:hidden;overflow-y:auto;max-height:var(--dc-body-max-height, none)}.dc-footer{padding:10px 18px;border-top:1px solid #f1f5f9}.dc-footer:empty,.dc-footer.dc-footer--hidden{display:none}.dc-footer.dc-footer--end:not(:empty):not(.dc-footer--hidden){display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.dc-has-bg .dc-footer{border-top-color:#94a3b859}@media(max-width:480px){.dc-footer{padding:10px 14px}.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -9025,10 +9186,10 @@ i0.ɵɵngDeclareClassMetadata({
           <ng-content />
         </div>
       </div>
-      <div class="dc-footer" [class.dc-footer--hidden]="!isOpen()" [style.background]="footerBackground() || null"><ng-content select="[card-footer]" /></div>
+      <div class="dc-footer" [class.dc-footer--hidden]="!isOpen()" [class.dc-footer--end]="footerAlign() === 'end'" [style.background]="footerBackground() || null"><ng-content select="[card-footer]" /></div>
     </div>
   `,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.8125rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{box-sizing:border-box;padding:16px 18px;min-height:0;overflow-x:hidden;overflow-y:auto;max-height:var(--dc-body-max-height, none)}.dc-footer{padding:10px 18px;border-top:1px solid #f1f5f9}.dc-footer:empty,.dc-footer.dc-footer--hidden{display:none}.dc-has-bg .dc-footer{border-top-color:#94a3b859}@media(max-width:480px){.dc-footer{padding:10px 14px}.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.8125rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{box-sizing:border-box;padding:16px 18px;min-height:0;overflow-x:hidden;overflow-y:auto;max-height:var(--dc-body-max-height, none)}.dc-footer{padding:10px 18px;border-top:1px solid #f1f5f9}.dc-footer:empty,.dc-footer.dc-footer--hidden{display:none}.dc-footer.dc-footer--end:not(:empty):not(.dc-footer--hidden){display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.dc-has-bg .dc-footer{border-top-color:#94a3b859}@media(max-width:480px){.dc-footer{padding:10px 14px}.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -9104,6 +9265,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		footerAlign: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "footerAlign",
+				required: false
+			}]
+		}],
 		textColor: [{
 			type: i0.Input,
 			args: [{
@@ -9415,6 +9584,7 @@ var OptionCardComponent = class OptionCardComponent {
 					"background",
 					"headerBackground",
 					"footerBackground",
+					"footerAlign",
 					"textColor",
 					"showHeader",
 					"collapsible",
@@ -9791,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,
@@ -9900,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();
@@ -10095,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]);
 	}
@@ -10382,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' : ''" />
@@ -10539,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",
@@ -10622,6 +10843,7 @@ var ImportExportComponent = class ImportExportComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"labelHidden",
 						"inputName",
 						"placeholder",
 						"options",
@@ -10649,6 +10871,11 @@ var ImportExportComponent = class ImportExportComponent {
 						"ariaLabel"
 					],
 					outputs: ["sourceSelect"]
+				},
+				{
+					kind: "component",
+					type: HintComponent,
+					selector: "ui-hint"
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -10671,7 +10898,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ModalComponent,
 				ButtonComponent,
 				SelectComponent,
-				ImportSourceGridComponent
+				ImportSourceGridComponent,
+				HintComponent
 			],
 			template: `
     <!-- Trigger buttons -->
@@ -10757,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' : ''" />
@@ -10913,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: () => [],
@@ -10984,73 +11214,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var ConfirmService = class ConfirmService {
-	constructor() {
-		this._open = signal(false, ...ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []);
-		this._active = signal(null, ...ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []);
-		this._resolve = null;
-		this.open = this._open.asReadonly();
-		this.active = this._active.asReadonly();
-		this._outlets = signal([], ...ngDevMode ? [{ debugName: "_outlets" }] : /* istanbul ignore next */ []);
-		this.primaryOutlet = computed(() => this._outlets()[0] ?? null, ...ngDevMode ? [{ debugName: "primaryOutlet" }] : /* istanbul ignore next */ []);
-	}
-	registerOutlet(outlet) {
-		this._outlets.update((list) => [...list, outlet]);
-	}
-	unregisterOutlet(outlet) {
-		this._outlets.update((list) => list.filter((o) => o !== outlet));
-	}
-	confirm(config) {
-		return new Promise((resolve) => {
-			this._resolve = resolve;
-			this._active.set({
-				title: config.title,
-				message: config.message,
-				confirmLabel: config.confirmLabel ?? "Confirm",
-				cancelLabel: config.cancelLabel ?? "Cancel",
-				variant: config.variant ?? "danger",
-				details: config.details ?? []
-			});
-			this._open.set(true);
-		});
-	}
-	dismiss(confirmed) {
-		this._open.set(false);
-		const res = this._resolve;
-		this._resolve = null;
-		this._active.set(null);
-		res?.(confirmed);
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: ConfirmService,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Injectable
-		});
-	}
-	static {
-		this.ɵprov = i0.ɵɵngDeclareInjectable({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: ConfirmService,
-			providedIn: "root"
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: ConfirmService,
-	decorators: [{
-		type: Injectable,
-		args: [{ providedIn: "root" }]
-	}]
-});
 var ConfirmOutletComponent = class ConfirmOutletComponent {
 	constructor() {
 		this.svc = inject(ConfirmService);
@@ -11088,6 +11251,7 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
     @if (_isPrimary() && svc.active()) {
       <ui-modal
         data-testid="confirm-modal"
+        dialogTestId="confirm-dialog"
         [open]="svc.open()"
         [title]="svc.active()!.title"
         maxWidth="420px"
@@ -11186,6 +11350,7 @@ i0.ɵɵngDeclareClassMetadata({
     @if (_isPrimary() && svc.active()) {
       <ui-modal
         data-testid="confirm-modal"
+        dialogTestId="confirm-dialog"
         [open]="svc.open()"
         [title]="svc.active()!.title"
         maxWidth="420px"
@@ -11215,6 +11380,107 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+var ConfirmService = class ConfirmService {
+	constructor() {
+		this._appRef = inject(ApplicationRef);
+		this._envInjector = inject(EnvironmentInjector);
+		this._doc = inject(DOCUMENT);
+		this._browser = isPlatformBrowser(inject(PLATFORM_ID));
+		this._open = signal(false, ...ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []);
+		this._active = signal(null, ...ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []);
+		this._resolve = null;
+		this.open = this._open.asReadonly();
+		this.active = this._active.asReadonly();
+		this._outlets = signal([], ...ngDevMode ? [{ debugName: "_outlets" }] : /* istanbul ignore next */ []);
+		this.primaryOutlet = computed(() => this._outlets()[0] ?? null, ...ngDevMode ? [{ debugName: "primaryOutlet" }] : /* istanbul ignore next */ []);
+		this._auto = null;
+		this._retireAutoOnDismiss = false;
+	}
+	registerOutlet(outlet) {
+		this._outlets.update((list) => [...list, outlet]);
+		if (this._auto && outlet !== this._auto.instance) {
+			if (this._open()) this._retireAutoOnDismiss = true;
+			else this._destroyAuto();
+		}
+	}
+	unregisterOutlet(outlet) {
+		this._outlets.update((list) => list.filter((o) => o !== outlet));
+	}
+	ngOnDestroy() {
+		this._destroyAuto();
+	}
+	_ensureOutlet() {
+		if (this._outlets().length > 0) return;
+		if (!this._browser) return;
+		const body = this._doc.body;
+		const ref = createComponent(ConfirmOutletComponent, { environmentInjector: this._envInjector });
+		this._appRef.attachView(ref.hostView);
+		body.appendChild(ref.location.nativeElement);
+		this._auto = ref;
+		ref.changeDetectorRef.detectChanges();
+	}
+	_destroyAuto() {
+		const ref = this._auto;
+		if (!ref) return;
+		this._auto = null;
+		this._retireAutoOnDismiss = false;
+		const el = ref.location.nativeElement;
+		ref.destroy();
+		el.remove();
+	}
+	confirm(config) {
+		return new Promise((resolve) => {
+			this._resolve = resolve;
+			this._active.set({
+				title: config.title,
+				message: config.message,
+				confirmLabel: config.confirmLabel ?? "Confirm",
+				cancelLabel: config.cancelLabel ?? "Cancel",
+				variant: config.variant ?? "danger",
+				details: config.details ?? []
+			});
+			this._open.set(true);
+			this._ensureOutlet();
+		});
+	}
+	dismiss(confirmed) {
+		this._open.set(false);
+		const res = this._resolve;
+		this._resolve = null;
+		this._active.set(null);
+		res?.(confirmed);
+		if (this._retireAutoOnDismiss) this._destroyAuto();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ConfirmService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ConfirmService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ConfirmService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
 var EmptyStateComponent = class EmptyStateComponent {
 	constructor() {
 		this.message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
@@ -11443,6 +11709,7 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var ErrorStateComponent = class ErrorStateComponent {
 	constructor() {
+		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
 		this.retryLabel = input("Try again", ...ngDevMode ? [{ debugName: "retryLabel" }] : /* istanbul ignore next */ []);
 		this.retrying = input(false, ...ngDevMode ? [{ debugName: "retrying" }] : /* istanbul ignore next */ []);
@@ -11466,6 +11733,13 @@ var ErrorStateComponent = class ErrorStateComponent {
 			isStandalone: true,
 			selector: "ui-error-state",
 			inputs: {
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				message: {
 					classPropertyName: "message",
 					publicName: "message",
@@ -11499,6 +11773,9 @@ var ErrorStateComponent = class ErrorStateComponent {
           <line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2.5"/>
         </svg>
       </div>
+      @if (title()) {
+        <p class="es-title">{{ title() }}</p>
+      }
       <p class="es-message">{{ message() || 'Something went wrong. Please try again.' }}</p>
       @if (retryLabel()) {
         <ui-button variant="secondary" size="sm" [loading]="retrying()" (click)="retry.emit()">
@@ -11508,7 +11785,7 @@ var ErrorStateComponent = class ErrorStateComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex:1}.es-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;text-align:center;flex:1;min-height:160px}.es-icon{width:56px;height:56px;border-radius:50%;background:#fee2e2;color:#ef4444;display:flex;align-items:center;justify-content:center;flex-shrink:0}.es-message{margin:0;font-size:.875rem;color:#64748b;max-width:360px;line-height:1.5}\n"],
+			styles: [":host{display:flex;flex:1}.es-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;text-align:center;flex:1;min-height:160px}.es-icon{width:56px;height:56px;border-radius:50%;background:#fee2e2;color:#ef4444;display:flex;align-items:center;justify-content:center;flex-shrink:0}.es-title{margin:0;font-size:1rem;font-weight:600;color:#1e293b;line-height:1.4}.es-message{margin:0;font-size:.875rem;color:#64748b;max-width:360px;line-height:1.5}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -11564,6 +11841,9 @@ i0.ɵɵngDeclareClassMetadata({
           <line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2.5"/>
         </svg>
       </div>
+      @if (title()) {
+        <p class="es-title">{{ title() }}</p>
+      }
       <p class="es-message">{{ message() || 'Something went wrong. Please try again.' }}</p>
       @if (retryLabel()) {
         <ui-button variant="secondary" size="sm" [loading]="retrying()" (click)="retry.emit()">
@@ -11572,10 +11852,18 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:flex;flex:1}.es-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;text-align:center;flex:1;min-height:160px}.es-icon{width:56px;height:56px;border-radius:50%;background:#fee2e2;color:#ef4444;display:flex;align-items:center;justify-content:center;flex-shrink:0}.es-message{margin:0;font-size:.875rem;color:#64748b;max-width:360px;line-height:1.5}\n"]
+			styles: [":host{display:flex;flex:1}.es-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;text-align:center;flex:1;min-height:160px}.es-icon{width:56px;height:56px;border-radius:50%;background:#fee2e2;color:#ef4444;display:flex;align-items:center;justify-content:center;flex-shrink:0}.es-title{margin:0;font-size:1rem;font-weight:600;color:#1e293b;line-height:1.4}.es-message{margin:0;font-size:.875rem;color:#64748b;max-width:360px;line-height:1.5}\n"]
 		}]
 	}],
 	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
 		message: [{
 			type: i0.Input,
 			args: [{
@@ -12284,6 +12572,7 @@ var DataTableComponent = class DataTableComponent {
 		this.tabChange = output();
 		this.bulkAction = output();
 		this.bulkPanelClick = output();
+		this.loaded = output();
 		this.rowDeleted = output();
 		this.reorderable = input(false, ...ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []);
 		this.rowReorder = output();
@@ -12312,7 +12601,7 @@ var DataTableComponent = class DataTableComponent {
 			const active = this._activeTab();
 			const keys = Object.keys(counts).length > 0 && active && !present.includes(active) ? [...present, active] : present;
 			if (!keys.length) return [];
-			const toLabel = (s) => this._columnBadgeLabel(s) ?? (/[a-z]/.test(s) ? s : s.toLowerCase()).replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+			const toLabel = (s) => this._columnBadgeLabel(s) ?? (/[a-z]/.test(s) ? s : s.toLowerCase()).replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").replace(/(^|\s)\p{L}/gu, (c) => c.toUpperCase());
 			const singleValue = keys.length === 1;
 			return [{
 				value: "",
@@ -12653,6 +12942,10 @@ var DataTableComponent = class DataTableComponent {
 			}
 			this._loading.set(false);
 			this._searchLoading.set(false);
+			this.loaded.emit({
+				ok: response !== null,
+				total: this._total()
+			});
 		});
 	}
 	_countParams() {
@@ -13431,6 +13724,7 @@ var DataTableComponent = class DataTableComponent {
 				tabChange: "tabChange",
 				bulkAction: "bulkAction",
 				bulkPanelClick: "bulkPanelClick",
+				loaded: "loaded",
 				rowDeleted: "rowDeleted",
 				rowReorder: "rowReorder"
 			},
@@ -13812,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"
@@ -14125,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>
       }
@@ -14261,7 +14556,11 @@ var DataTableComponent = class DataTableComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -14393,6 +14692,7 @@ var DataTableComponent = class DataTableComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"labelHidden",
 						"inputName",
 						"placeholder",
 						"options",
@@ -14478,6 +14778,7 @@ var DataTableComponent = class DataTableComponent {
 					type: ErrorStateComponent,
 					selector: "ui-error-state",
 					inputs: [
+						"title",
 						"message",
 						"retryLabel",
 						"retrying"
@@ -14900,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"
@@ -15213,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>
       }
@@ -15512,6 +15814,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["bulkPanelClick"]
 		}],
+		loaded: [{
+			type: i0.Output,
+			args: ["loaded"]
+		}],
 		rowDeleted: [{
 			type: i0.Output,
 			args: ["rowDeleted"]
@@ -15552,6 +15858,9 @@ var SidePanelComponent = class SidePanelComponent {
 		this.closed = output();
 		this.primaryClick = output();
 		this.titleId = `sp-title-${Math.random().toString(36).slice(2, 8)}`;
+		this.bodyScrollable = signal(false, ...ngDevMode ? [{ debugName: "bodyScrollable" }] : /* istanbul ignore next */ []);
+		this._bodyRef = viewChild("spBody", ...ngDevMode ? [{ debugName: "_bodyRef" }] : /* istanbul ignore next */ []);
+		this._bodyObservers = null;
 		this._el = inject(ElementRef);
 		this._doc = inject(DOCUMENT);
 		this._overlays = inject(OverlayStack);
@@ -15561,6 +15870,10 @@ var SidePanelComponent = class SidePanelComponent {
 		this._stopIframeKeys = null;
 		this._interaction = inject(LastInteraction);
 		this._interaction.acquire(this._doc);
+		effect(() => {
+			const body = this._bodyRef()?.nativeElement ?? null;
+			untracked(() => this._watchBody(body));
+		});
 		effect(() => {
 			if (this.open()) {
 				this._overlays.push(this);
@@ -15588,6 +15901,41 @@ var SidePanelComponent = class SidePanelComponent {
 			}
 		});
 	}
+	refreshScrollable() {
+		const el = this._bodyRef()?.nativeElement;
+		this.bodyScrollable.set(!!el && el.scrollHeight - el.clientHeight > 1);
+	}
+	_watchBody(body) {
+		this._stopWatchingBody();
+		if (!body) {
+			this.bodyScrollable.set(false);
+			return;
+		}
+		this.refreshScrollable();
+		const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => this.refreshScrollable());
+		const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
+			if (ro) for (const child of Array.from(body.children)) ro.observe(child);
+			this.refreshScrollable();
+		});
+		if (ro) {
+			ro.observe(body);
+			for (const child of Array.from(body.children)) ro.observe(child);
+		}
+		mo?.observe(body, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		this._bodyObservers = {
+			ro,
+			mo
+		};
+	}
+	_stopWatchingBody() {
+		this._bodyObservers?.ro?.disconnect();
+		this._bodyObservers?.mo?.disconnect();
+		this._bodyObservers = null;
+	}
 	onKeydown(event) {
 		if (!this.open() || !this._overlays.isTop(this)) return;
 		if (event.key === "Escape") {
@@ -15627,6 +15975,7 @@ var SidePanelComponent = class SidePanelComponent {
 		return tabbables(this._el.nativeElement);
 	}
 	ngOnDestroy() {
+		this._stopWatchingBody();
 		this._interaction.release();
 		this._stopIframeKeys?.();
 		this._stopIframeKeys = null;
@@ -15750,6 +16099,13 @@ var SidePanelComponent = class SidePanelComponent {
 				primaryClick: "primaryClick"
 			},
 			host: { listeners: { "document:keydown": "onKeydown($event)" } },
+			viewQueries: [{
+				propertyName: "_bodyRef",
+				first: true,
+				predicate: ["spBody"],
+				descendants: true,
+				isSignal: true
+			}],
 			ngImport: i0,
 			template: `
     @if (open()) {
@@ -15767,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">
@@ -15778,7 +16134,12 @@ var SidePanelComponent = class SidePanelComponent {
         </div>
 
         <!-- Body -->
-        <div class="sp-body">
+        <div
+          class="sp-body"
+          #spBody
+          [attr.tabindex]="bodyScrollable() ? 0 : null"
+          [attr.role]="bodyScrollable() ? 'group' : null"
+          [attr.aria-labelledby]="bodyScrollable() ? titleId : null">
           <ng-content />
         </div>
 
@@ -15821,7 +16182,7 @@ var SidePanelComponent = class SidePanelComponent {
     }
   `,
 			isInline: true,
-			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-focus-guard{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-footer-extra{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px;min-width:0}.sp-footer-extra:empty{display:none}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:var(--ui-accent, #2563eb);border:1px solid var(--ui-accent, #2563eb);color:var(--ui-on-accent, #fff)}.sp-btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #1d4ed8);border-color:var(--ui-accent-hover, #1d4ed8)}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sp-backdrop,.sp-panel,.sp-wide,.sp-extra-wide{animation:none}.sp-spinner{animation-duration:2s}}\n"],
+			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-focus-guard{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-body:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-footer-extra{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px;min-width:0}.sp-footer-extra:empty{display:none}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:var(--ui-accent, #2563eb);border:1px solid var(--ui-accent, #2563eb);color:var(--ui-on-accent, #fff)}.sp-btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #1d4ed8);border-color:var(--ui-accent-hover, #1d4ed8)}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sp-backdrop,.sp-panel,.sp-wide,.sp-extra-wide{animation:none}.sp-spinner{animation-duration:2s}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -15854,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">
@@ -15865,7 +16226,12 @@ i0.ɵɵngDeclareClassMetadata({
         </div>
 
         <!-- Body -->
-        <div class="sp-body">
+        <div
+          class="sp-body"
+          #spBody
+          [attr.tabindex]="bodyScrollable() ? 0 : null"
+          [attr.role]="bodyScrollable() ? 'group' : null"
+          [attr.aria-labelledby]="bodyScrollable() ? titleId : null">
           <ng-content />
         </div>
 
@@ -15907,7 +16273,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     }
   `,
-			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-focus-guard{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-footer-extra{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px;min-width:0}.sp-footer-extra:empty{display:none}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:var(--ui-accent, #2563eb);border:1px solid var(--ui-accent, #2563eb);color:var(--ui-on-accent, #fff)}.sp-btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #1d4ed8);border-color:var(--ui-accent-hover, #1d4ed8)}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sp-backdrop,.sp-panel,.sp-wide,.sp-extra-wide{animation:none}.sp-spinner{animation-duration:2s}}\n"]
+			styles: [".sp-backdrop{position:fixed;inset:0;background:#0000004d;z-index:90;animation:sp-fade .2s ease}.sp-panel{position:fixed;top:0;right:0;bottom:var(--ui-kb, 0px);width:480px;max-width:100vw;max-height:100vh;max-height:var(--ui-vvh, 100dvh);background:#fff;z-index:100;box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;animation:sp-slide .25s ease}.sp-panel:focus{outline:none}.sp-focus-guard{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;outline:none}.sp-wide{width:620px}.sp-extra-wide{width:760px}.sp-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 20px;gap:12px;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#334155)}.sp-header-text{flex:1;min-width:0}.sp-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0}.sp-subtitle{font-size:.8125rem;color:#94a3b8;margin:4px 0 0}.sp-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;cursor:pointer;color:#cbd5e1;transition:background .15s,border-color .15s}.sp-close:hover{background:#fff3;border-color:#ffffff4d;color:#fff}.sp-close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-body{padding:20px 24px 24px;flex:1;overflow-y:auto;overflow-x:hidden}.sp-body:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.sp-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#f8fafc}.sp-footer-extra{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;margin:0 8px;min-width:0}.sp-footer-extra:empty{display:none}.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,opacity .1s}.sp-btn:disabled{opacity:.5;cursor:default}.sp-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sp-btn-cancel{background:#fff;border:1px solid #e2e8f0;color:#475569}.sp-btn-cancel:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.sp-btn-primary{background:var(--ui-accent, #2563eb);border:1px solid var(--ui-accent, #2563eb);color:var(--ui-on-accent, #fff)}.sp-btn-primary:hover:not(:disabled){background:var(--ui-accent-hover, #1d4ed8);border-color:var(--ui-accent-hover, #1d4ed8)}.sp-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.sp-btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.sp-btn-warning{background:#d97706;border:1px solid #d97706;color:#fff}.sp-btn-warning:hover:not(:disabled){background:#b45309;border-color:#b45309}.sp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp-spin .55s linear infinite;flex-shrink:0}@media(max-width:768px){.sp-panel,.sp-wide,.sp-extra-wide{width:100vw}}@media(max-width:480px){.sp-panel,.sp-wide,.sp-extra-wide{inset:auto 0 0;width:100vw;max-height:90vh;max-height:min(90dvh,var(--ui-vvh, 100dvh));border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #00000026;animation:sp-up .25s ease}.sp-header{padding:16px 16px 14px}.sp-body{padding:16px}.sp-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}}@media(pointer:coarse),(max-width:480px){.sp-close{position:relative}.sp-close:after{content:\"\";position:absolute;inset:-5px}.sp-btn{min-height:44px;justify-content:center}}@keyframes sp-slide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sp-fade{0%{opacity:0}to{opacity:1}}@keyframes sp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sp-backdrop,.sp-panel,.sp-wide,.sp-extra-wide{animation:none}.sp-spinner{animation-duration:2s}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -16023,6 +16389,10 @@ i0.ɵɵngDeclareClassMetadata({
 		primaryClick: [{
 			type: i0.Output,
 			args: ["primaryClick"]
+		}],
+		_bodyRef: [{
+			type: i0.ViewChild,
+			args: ["spBody", { isSignal: true }]
 		}]
 	}
 });
@@ -16680,6 +17050,7 @@ var ToggleComponent = class ToggleComponent {
 		this.hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.ariaDescribedBy = input("", ...ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
+		this.inputTestId = input("", ...ngDevMode ? [{ debugName: "inputTestId" }] : /* istanbul ignore next */ []);
 		this.checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
 		this._disabledInput = input(false, {
 			...ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {},
@@ -16769,6 +17140,13 @@ var ToggleComponent = class ToggleComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				inputTestId: {
+					classPropertyName: "inputTestId",
+					publicName: "inputTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				checked: {
 					classPropertyName: "checked",
 					publicName: "checked",
@@ -16805,6 +17183,7 @@ var ToggleComponent = class ToggleComponent {
           role="switch"
           class="tg-input"
           [id]="_inputId"
+          [attr.data-testid]="inputTestId() || null"
           [checked]="checked()"
           [disabled]="disabled()"
           [attr.aria-checked]="checked() ? 'true' : 'false'"
@@ -16853,6 +17232,7 @@ i0.ɵɵngDeclareClassMetadata({
           role="switch"
           class="tg-input"
           [id]="_inputId"
+          [attr.data-testid]="inputTestId() || null"
           [checked]="checked()"
           [disabled]="disabled()"
           [attr.aria-checked]="checked() ? 'true' : 'false'"
@@ -16901,6 +17281,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		inputTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputTestId",
+				required: false
+			}]
+		}],
 		checked: [{
 			type: i0.Input,
 			args: [{
@@ -18006,6 +18394,7 @@ var BusinessHoursComponent = class BusinessHoursComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"labelHidden",
 						"inputName",
 						"placeholder",
 						"options",
@@ -18208,6 +18597,7 @@ var RadioComponent = class RadioComponent {
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+		this.icon = input("", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.testId = input("", ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
 		this.value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
@@ -18221,6 +18611,11 @@ var RadioComponent = class RadioComponent {
 			alias: "disabled"
 		});
 		this.disabled = this._disabledInput;
+		this._iconD = computed(() => {
+			const v = this.icon().trim();
+			if (!v) return null;
+			return iconPath(v) ?? (/^[Mm][\d\s.,\-MmLlHhVvCcSsQqTtAaZz]+$/.test(v) ? v : null);
+		}, ...ngDevMode ? [{ debugName: "_iconD" }] : /* istanbul ignore next */ []);
 		this.labelId = input("", ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
 		this._generatedLabelId = `rd-${Math.random().toString(36).slice(2, 8)}-label`;
 		this._labelId = computed(() => this.labelId() || this._generatedLabelId, ...ngDevMode ? [{ debugName: "_labelId" }] : /* istanbul ignore next */ []);
@@ -18266,6 +18661,13 @@ var RadioComponent = class RadioComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				ariaLabel: {
 					classPropertyName: "ariaLabel",
 					publicName: "ariaLabel",
@@ -18359,6 +18761,10 @@ var RadioComponent = class RadioComponent {
         [attr.aria-controls]="controls() || null"
         (change)="onChange($event)"
       />
+      @if (_iconD(); as d) {
+        <!-- Optional icon in front of the label (library source 2026-11-04): decorative, so the radio's accessible name is unchanged. -->
+        <svg class="rd-icon" width="18" height="18" 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]="d" /></svg>
+      }
       <span class="rd-text">
         @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
@@ -18367,7 +18773,7 @@ var RadioComponent = class RadioComponent {
     </label>
   `,
 			isInline: true,
-			styles: [":host{display:block}.rd-wrap{position:relative;display:inline-flex;align-items:flex-start;gap:9px;vertical-align:top;cursor:pointer;-webkit-user-select:none;user-select:none}.rd-wrap.rd-disabled{cursor:not-allowed;opacity:.5}.rd-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rd-wrap:has(.rd-hidden:focus-visible) .rd-dot{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.rd-wrap{position:relative}.rd-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:-2px;opacity:0;cursor:pointer;z-index:1}.rd-wrap.rd-disabled .rd-hidden{cursor:not-allowed}}.rd-dot{flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border:2px solid #7c8ba1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.rd-dot.rd-checked{background:#3b82f6;border-color:#3b82f6}.rd-dot.rd-invalid:not(.rd-checked){border-color:#ef4444}.rd-wrap:hover .rd-dot:not(.rd-checked):not(.rd-disabled){border-color:#3b82f6}.rd-core{width:8px;height:8px;border-radius:50%;background:#fff}@media(max-width:640px),(pointer:coarse){.rd-dot{position:relative}.rd-dot:after{content:\"\";position:absolute;inset:-12px}}.rd-text{display:flex;flex-direction:column;gap:2px}.rd-label{font-size:.875rem;color:#334155;line-height:1.4}.rd-description{font-size:.75rem;color:#64748b;line-height:1.4}\n"],
+			styles: [":host{display:block}.rd-wrap{position:relative;display:inline-flex;align-items:flex-start;gap:9px;vertical-align:top;cursor:pointer;-webkit-user-select:none;user-select:none}.rd-wrap.rd-disabled{cursor:not-allowed;opacity:.5}.rd-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rd-wrap:has(.rd-hidden:focus-visible) .rd-dot{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.rd-wrap{position:relative}.rd-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:-2px;opacity:0;cursor:pointer;z-index:1}.rd-wrap.rd-disabled .rd-hidden{cursor:not-allowed}}.rd-dot{flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border:2px solid #7c8ba1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.rd-dot.rd-checked{background:#3b82f6;border-color:#3b82f6}.rd-dot.rd-invalid:not(.rd-checked){border-color:#ef4444}.rd-wrap:hover .rd-dot:not(.rd-checked):not(.rd-disabled){border-color:#3b82f6}.rd-core{width:8px;height:8px;border-radius:50%;background:#fff}@media(max-width:640px),(pointer:coarse){.rd-dot{position:relative}.rd-dot:after{content:\"\";position:absolute;inset:-12px}}.rd-icon{flex-shrink:0;margin-top:1px;color:#64748b}.rd-text{display:flex;flex-direction:column;gap:2px}.rd-label{font-size:.875rem;color:#334155;line-height:1.4}.rd-description{font-size:.75rem;color:#64748b;line-height:1.4}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -18403,6 +18809,10 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.aria-controls]="controls() || null"
         (change)="onChange($event)"
       />
+      @if (_iconD(); as d) {
+        <!-- Optional icon in front of the label (library source 2026-11-04): decorative, so the radio's accessible name is unchanged. -->
+        <svg class="rd-icon" width="18" height="18" 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]="d" /></svg>
+      }
       <span class="rd-text">
         @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
@@ -18410,7 +18820,7 @@ i0.ɵɵngDeclareClassMetadata({
       </span>
     </label>
   `,
-			styles: [":host{display:block}.rd-wrap{position:relative;display:inline-flex;align-items:flex-start;gap:9px;vertical-align:top;cursor:pointer;-webkit-user-select:none;user-select:none}.rd-wrap.rd-disabled{cursor:not-allowed;opacity:.5}.rd-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rd-wrap:has(.rd-hidden:focus-visible) .rd-dot{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.rd-wrap{position:relative}.rd-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:-2px;opacity:0;cursor:pointer;z-index:1}.rd-wrap.rd-disabled .rd-hidden{cursor:not-allowed}}.rd-dot{flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border:2px solid #7c8ba1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.rd-dot.rd-checked{background:#3b82f6;border-color:#3b82f6}.rd-dot.rd-invalid:not(.rd-checked){border-color:#ef4444}.rd-wrap:hover .rd-dot:not(.rd-checked):not(.rd-disabled){border-color:#3b82f6}.rd-core{width:8px;height:8px;border-radius:50%;background:#fff}@media(max-width:640px),(pointer:coarse){.rd-dot{position:relative}.rd-dot:after{content:\"\";position:absolute;inset:-12px}}.rd-text{display:flex;flex-direction:column;gap:2px}.rd-label{font-size:.875rem;color:#334155;line-height:1.4}.rd-description{font-size:.75rem;color:#64748b;line-height:1.4}\n"]
+			styles: [":host{display:block}.rd-wrap{position:relative;display:inline-flex;align-items:flex-start;gap:9px;vertical-align:top;cursor:pointer;-webkit-user-select:none;user-select:none}.rd-wrap.rd-disabled{cursor:not-allowed;opacity:.5}.rd-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rd-wrap:has(.rd-hidden:focus-visible) .rd-dot{outline:2px solid #3b82f6;outline-offset:2px}@media(pointer:coarse),(max-width:480px){.rd-wrap{position:relative}.rd-hidden{width:44px;height:44px;margin:0;clip:auto;overflow:visible;left:-12px;top:-2px;opacity:0;cursor:pointer;z-index:1}.rd-wrap.rd-disabled .rd-hidden{cursor:not-allowed}}.rd-dot{flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border:2px solid #7c8ba1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}.rd-dot.rd-checked{background:#3b82f6;border-color:#3b82f6}.rd-dot.rd-invalid:not(.rd-checked){border-color:#ef4444}.rd-wrap:hover .rd-dot:not(.rd-checked):not(.rd-disabled){border-color:#3b82f6}.rd-core{width:8px;height:8px;border-radius:50%;background:#fff}@media(max-width:640px),(pointer:coarse){.rd-dot{position:relative}.rd-dot:after{content:\"\";position:absolute;inset:-12px}}.rd-icon{flex-shrink:0;margin-top:1px;color:#64748b}.rd-text{display:flex;flex-direction:column;gap:2px}.rd-label{font-size:.875rem;color:#334155;line-height:1.4}.rd-description{font-size:.75rem;color:#64748b;line-height:1.4}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -18430,6 +18840,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -18790,6 +19208,7 @@ var RadioGroupComponent = class RadioGroupComponent {
             [value]="opt.value"
             [label]="opt.label"
             [description]="opt.description ?? ''"
+            [icon]="opt.icon ?? ''"
             [checked]="_value() === opt.value"
             [disabled]="disabled() || !!opt.disabled"
             [invalid]="!!_activeError()"
@@ -18819,6 +19238,7 @@ var RadioGroupComponent = class RadioGroupComponent {
 				inputs: [
 					"label",
 					"description",
+					"icon",
 					"ariaLabel",
 					"testId",
 					"value",
@@ -18897,6 +19317,7 @@ i0.ɵɵngDeclareClassMetadata({
             [value]="opt.value"
             [label]="opt.label"
             [description]="opt.description ?? ''"
+            [icon]="opt.icon ?? ''"
             [checked]="_value() === opt.value"
             [disabled]="disabled() || !!opt.disabled"
             [invalid]="!!_activeError()"
@@ -19700,6 +20121,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -19797,7 +20219,11 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -20196,7 +20622,180 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+function pillTabId(name, key) {
+	return `${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({
+			...ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {},
+			alias: "uiTabPanel"
+		});
+		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());
+	}
+	tabId() {
+		return pillTabId(this.tabsName(), this.key());
+	}
+	isHidden() {
+		const a = this.activeKey();
+		return a !== null && a !== this.key();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PillTabPanelDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: PillTabPanelDirective,
+			isStandalone: true,
+			selector: "[uiTabPanel]",
+			inputs: {
+				key: {
+					classPropertyName: "key",
+					publicName: "uiTabPanel",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				tabsName: {
+					classPropertyName: "tabsName",
+					publicName: "tabsName",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				activeKey: {
+					classPropertyName: "activeKey",
+					publicName: "activeKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tabbable: {
+					classPropertyName: "tabbable",
+					publicName: "tabbable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				describedByHeader: {
+					classPropertyName: "describedByHeader",
+					publicName: "describedByHeader",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				attributes: { "role": "tabpanel" },
+				properties: {
+					"id": "panelId()",
+					"attr.aria-labelledby": "tabId()",
+					"attr.hidden": "isHidden() ? '' : null",
+					"attr.aria-describedby": "describedId()",
+					"attr.tabindex": "tabbable() ? 0 : null"
+				}
+			},
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PillTabPanelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTabPanel]",
+			standalone: true,
+			host: {
+				role: "tabpanel",
+				"[id]": "panelId()",
+				"[attr.aria-labelledby]": "tabId()",
+				"[attr.hidden]": "isHidden() ? '' : null",
+				"[attr.aria-describedby]": "describedId()",
+				"[attr.tabindex]": "tabbable() ? 0 : null"
+			}
+		}]
+	}],
+	propDecorators: {
+		key: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uiTabPanel",
+				required: true
+			}]
+		}],
+		tabsName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabsName",
+				required: true
+			}]
+		}],
+		activeKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeKey",
+				required: false
+			}]
+		}],
+		tabbable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				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 */ []);
@@ -20206,10 +20805,26 @@ var PillTabsComponent = class PillTabsComponent {
 		this.noWrap = input(false, ...ngDevMode ? [{ debugName: "noWrap" }] : /* istanbul ignore next */ []);
 		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);
+		const warned = /* @__PURE__ */ new Set();
+		effect(() => {
+			const on = this.controlsPanels(), tabs = this.tabs(), name = this.name();
+			if (!on || !isDevMode()) return;
+			untracked(() => {
+				for (const t of tabs) {
+					if (!t.key.startsWith("panel-") || warned.has(name + "|" + t.key)) continue;
+					warned.add(name + "|" + t.key);
+					console.warn(`ui-pill-tabs "${name}": the tab key "${t.key}" starts with "panel-", so its id "${pillTabId(name, t.key)}" can equal the panel id of the key "${t.key.slice(6)}" (${pillTabPanelId(name, t.key.slice(6))}) when controlsPanels is on. Rename the key.`);
+				}
+			});
+		});
 		effect(() => {
 			this.tabs();
 			queueMicrotask(() => this.updateOverflow());
@@ -20224,6 +20839,12 @@ var PillTabsComponent = class PillTabsComponent {
 			}
 		});
 	}
+	tabId(key) {
+		return pillTabId(this.name(), key);
+	}
+	panelId(key) {
+		return pillTabPanelId(this.name(), key);
+	}
 	updateOverflow() {
 		const el = this.host.nativeElement.querySelector(".pill-tabs");
 		if (!el) return;
@@ -20254,7 +20875,7 @@ var PillTabsComponent = class PillTabsComponent {
 		e.preventDefault();
 		const key = enabled[next].key;
 		this.select(key);
-		this.host.nativeElement.querySelector(`#${CSS.escape(this.name() + "-" + key)}`)?.focus();
+		this.host.nativeElement.querySelector(`#${CSS.escape(this.tabId(key))}`)?.focus();
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -20315,6 +20936,27 @@ var PillTabsComponent = class PillTabsComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				controlsPanels: {
+					classPropertyName: "controlsPanels",
+					publicName: "controlsPanels",
+					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" },
@@ -20324,13 +20966,14 @@ var PillTabsComponent = class PillTabsComponent {
     <div class="pill-tabs" [class.pill-tabs--nowrap]="noWrap()" [class.pill-tabs--vertical]="vertical()" role="tablist" [attr.aria-label]="ariaLabel()" [attr.aria-orientation]="vertical() ? 'vertical' : null" (keydown)="onKeydown($event)" (scroll)="updateOverflow()">
       @for (tab of tabs(); track tab.key) {
         <button type="button" class="pill-tab" role="tab"
-          [id]="name() + '-' + tab.key"
+          [id]="tabId(tab.key)"
           [class.active]="activeKey() === tab.key"
           [class.disabled]="tab.disabled"
           [disabled]="tab.disabled ?? false"
           [attr.aria-selected]="activeKey() === tab.key"
           [attr.tabindex]="tabIndexFor(tab)"
-          [attr.aria-describedby]="tab.info ? name() + '-' + tab.key + '-info' : null"
+          [attr.aria-describedby]="tab.info ? tabId(tab.key) + '-info' : null"
+          [attr.aria-controls]="controlsPanels() ? panelId(tab.key) : null"
           (click)="select(tab.key)">
           <span>{{ tab.label }}</span>
           @if (tab.count !== undefined) {
@@ -20340,7 +20983,7 @@ var PillTabsComponent = class PillTabsComponent {
             <svg class="pill-info-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" data-testid="pill-info-icon">
               <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
             </svg>
-            <span class="pill-info-tip" role="tooltip" aria-hidden="true" [id]="name() + '-' + tab.key + '-info'" data-testid="pill-info-tip">{{ tab.info }}</span>
+            <span class="pill-info-tip" role="tooltip" aria-hidden="true" [id]="tabId(tab.key) + '-info'" data-testid="pill-info-tip">{{ tab.info }}</span>
           }
         </button>
       }
@@ -20348,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
 		});
 	}
@@ -20371,13 +21028,14 @@ i0.ɵɵngDeclareClassMetadata({
     <div class="pill-tabs" [class.pill-tabs--nowrap]="noWrap()" [class.pill-tabs--vertical]="vertical()" role="tablist" [attr.aria-label]="ariaLabel()" [attr.aria-orientation]="vertical() ? 'vertical' : null" (keydown)="onKeydown($event)" (scroll)="updateOverflow()">
       @for (tab of tabs(); track tab.key) {
         <button type="button" class="pill-tab" role="tab"
-          [id]="name() + '-' + tab.key"
+          [id]="tabId(tab.key)"
           [class.active]="activeKey() === tab.key"
           [class.disabled]="tab.disabled"
           [disabled]="tab.disabled ?? false"
           [attr.aria-selected]="activeKey() === tab.key"
           [attr.tabindex]="tabIndexFor(tab)"
-          [attr.aria-describedby]="tab.info ? name() + '-' + tab.key + '-info' : null"
+          [attr.aria-describedby]="tab.info ? tabId(tab.key) + '-info' : null"
+          [attr.aria-controls]="controlsPanels() ? panelId(tab.key) : null"
           (click)="select(tab.key)">
           <span>{{ tab.label }}</span>
           @if (tab.count !== undefined) {
@@ -20387,7 +21045,7 @@ i0.ɵɵngDeclareClassMetadata({
             <svg class="pill-info-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" data-testid="pill-info-icon">
               <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
             </svg>
-            <span class="pill-info-tip" role="tooltip" aria-hidden="true" [id]="name() + '-' + tab.key + '-info'" data-testid="pill-info-tip">{{ tab.info }}</span>
+            <span class="pill-info-tip" role="tooltip" aria-hidden="true" [id]="tabId(tab.key) + '-info'" data-testid="pill-info-tip">{{ tab.info }}</span>
           }
         </button>
       }
@@ -20395,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: () => [],
@@ -20449,6 +21121,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		controlsPanels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "controlsPanels",
+				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"]
@@ -21338,6 +22034,7 @@ var TextareaInputComponent = class TextareaInputComponent {
 		this._activeError = computed(() => this.error() || (this._reveal.revealed() ? this.errorMessage() : ""), ...ngDevMode ? [{ debugName: "_activeError" }] : /* istanbul ignore next */ []);
 		this._onValidatorChange = () => {};
 		this._inputId = `ta-${Math.random().toString(36).slice(2, 8)}`;
+		this._hostEl = inject(ElementRef);
 		this._onChange = (_) => {};
 		this._onTouched = () => {};
 		effect(() => {
@@ -21354,6 +22051,9 @@ var TextareaInputComponent = class TextareaInputComponent {
 	registerOnValidatorChange(fn) {
 		this._onValidatorChange = fn;
 	}
+	focus(options) {
+		this._hostEl.nativeElement.querySelector("textarea")?.focus(options);
+	}
 	writeValue(val) {
 		this._value.set(val ?? "");
 	}
@@ -21984,6 +22684,7 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -22630,6 +23331,7 @@ var BankAccountFormComponent = class BankAccountFormComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"labelHidden",
 						"inputName",
 						"placeholder",
 						"options",
@@ -22655,6 +23357,7 @@ var BankAccountFormComponent = class BankAccountFormComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -25409,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"
@@ -25473,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"
@@ -25658,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() {
@@ -25734,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);
@@ -25813,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
@@ -25824,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);
@@ -26015,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"
@@ -26119,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"
@@ -28351,6 +29069,7 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var ListItemComponent = class ListItemComponent {
 	constructor() {
+		this.host = inject(ElementRef);
 		this.leading = input("none", ...ngDevMode ? [{ debugName: "leading" }] : /* istanbul ignore next */ []);
 		this.inputName = input("", ...ngDevMode ? [{ debugName: "inputName" }] : /* istanbul ignore next */ []);
 		this.inputId = input("", ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
@@ -28360,6 +29079,8 @@ var ListItemComponent = class ListItemComponent {
 		this.interactive = input(true, ...ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []);
 		this.alwaysShowBadge = input(false, ...ngDevMode ? [{ debugName: "alwaysShowBadge" }] : /* istanbul ignore next */ []);
 		this.wrapText = input(false, ...ngDevMode ? [{ debugName: "wrapText" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.busy = input(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
 		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.badge = input(null, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
 		this.badgeVariant = input("green", ...ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []);
@@ -28369,6 +29090,7 @@ var ListItemComponent = class ListItemComponent {
 		this.iconD = () => this.icon() ? iconPath(this.icon()) ?? null : null;
 		this.select = output();
 		this.pressable = () => this.interactive() && this.leading() === "none";
+		this.hasImage = signal(false, ...ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []);
 		this.visibleDetails = () => this.details().map((d) => typeof d === "string" ? {
 			text: d,
 			d: null,
@@ -28382,14 +29104,43 @@ var ListItemComponent = class ListItemComponent {
 	get _borderedClass() {
 		return this.bordered();
 	}
+	get _disabledClass() {
+		return this.disabled();
+	}
+	ngAfterContentChecked() {
+		const kids = this.host.nativeElement.firstElementChild?.children;
+		let has = false;
+		if (kids) {
+			for (let i = 0; i < kids.length; i++) if (kids[i].hasAttribute("list-item-image")) {
+				has = true;
+				break;
+			}
+		}
+		if (has !== this.hasImage()) this.hasImage.set(has);
+	}
+	onInputClick(e) {
+		if (this.disabled() || this.busy()) e.preventDefault();
+	}
+	onInputKey(e) {
+		if ((this.disabled() || this.busy()) && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")) e.preventDefault();
+	}
+	onInputChange(e) {
+		const input = e.target;
+		if (this.disabled() || this.busy()) {
+			input.checked = this.checked();
+			return;
+		}
+		this.select.emit();
+	}
 	onRowClick(e) {
-		if (!this.pressable()) return;
+		if (!this.pressable() || this.disabled() || this.busy()) return;
 		if (e.target.closest("[list-item-action], [li-action]")) return;
 		this.select.emit();
 	}
 	onRowKey(e) {
 		if (!this.pressable() || e.target !== e.currentTarget) return;
 		e.preventDefault();
+		if (this.disabled() || this.busy()) return;
 		this.select.emit();
 	}
 	static {
@@ -28473,6 +29224,20 @@ var ListItemComponent = class ListItemComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				busy: {
+					classPropertyName: "busy",
+					publicName: "busy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				title: {
 					classPropertyName: "title",
 					publicName: "title",
@@ -28517,7 +29282,10 @@ var ListItemComponent = class ListItemComponent {
 				}
 			},
 			outputs: { select: "select" },
-			host: { properties: { "class.li-bordered": "this._borderedClass" } },
+			host: { properties: {
+				"class.li-bordered": "this._borderedClass",
+				"class.li-disabled": "this._disabledClass"
+			} },
 			ngImport: i0,
 			template: `
     <ng-template #tile>
@@ -28529,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()" />
         }
@@ -28541,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>
@@ -28549,51 +29317,67 @@ var ListItemComponent = class ListItemComponent {
     </ng-template>
 
     <div class="li-row" [class.li-row--highlighted]="highlighted()" [class.li-row--pressable]="pressable()"
-         [attr.role]="pressable() ? 'button' : null" [attr.tabindex]="pressable() ? 0 : null"
+         [class.li-row--disabled]="disabled()" [class.li-row--busy]="busy()"
+         [attr.role]="pressable() ? 'button' : null" [attr.tabindex]="pressable() && !disabled() ? 0 : null"
+         [attr.aria-disabled]="disabled() && pressable() ? 'true' : null" [attr.aria-busy]="busy() ? 'true' : null"
          (click)="onRowClick($event)" (keydown.enter)="onRowKey($event)" (keydown.space)="onRowKey($event)" [class.li-row--static]="!interactive()" [class.li-row--wrap]="wrapText() || !interactive()">
 
-      @if (!interactive()) {
-        <ng-container [ngTemplateOutlet]="tile" />
-        <div class="li-body li-body--static">
-          <ng-container [ngTemplateOutlet]="content" />
-        </div>
-      } @else {
-      @if (leading() === 'radio') {
+      @if (interactive() && leading() === 'radio') {
         <input
           type="radio"
           class="li-input"
           [id]="inputId()"
           [name]="inputName()"
           [checked]="checked()"
-          (change)="select.emit()"
+          [disabled]="disabled()"
+          (click)="onInputClick($event)"
+          (keydown)="onInputKey($event)"
+          (change)="onInputChange($event)"
         />
-      } @else if (leading() === 'checkbox') {
+      } @else if (interactive() && leading() === 'checkbox') {
         <input
           type="checkbox"
           class="li-input"
           [id]="inputId()"
           [checked]="checked()"
-          (change)="select.emit()"
+          [disabled]="disabled()"
+          (click)="onInputClick($event)"
+          (keydown)="onInputKey($event)"
+          (change)="onInputChange($event)"
         />
       }
 
-      <ng-container [ngTemplateOutlet]="tile" />
-      <label class="li-body" [attr.for]="inputId() || null">
-        <ng-container [ngTemplateOutlet]="content" />
-      </label>
+      <!-- Leading image slot (library source 2026-11-04): a product photo in front of the text. Replaces the icon tile. -->
+      <ng-content select="[list-item-image]" />
+      @if (!hasImage()) { <ng-container [ngTemplateOutlet]="tile" /> }
+      @if (!interactive()) {
+        <div class="li-body li-body--static">
+          <ng-container [ngTemplateOutlet]="content" />
+        </div>
+      } @else {
+        <label class="li-body" [attr.for]="inputId() || null">
+          <ng-container [ngTemplateOutlet]="content" />
+        </label>
       }
 
+      @if (busy()) {
+        <span class="li-spinner" aria-hidden="true"></span>
+      }
       <ng-content select="[list-item-action], [li-action]" />
 
     </div>
   `,
 			isInline: true,
-			styles: ["ui-list-item{display:block}ui-list-item.li-bordered{border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);box-shadow:0 1px 2px #0f172a0a;margin-bottom:8px;transition:border-color .15s ease,box-shadow .15s ease}ui-list-item.li-bordered:last-child{margin-bottom:0}ui-list-item.li-bordered:hover{border-color:#cbd5e1;box-shadow:0 2px 6px #0f172a12}@media(prefers-reduced-motion:reduce){ui-list-item.li-bordered{transition:none}}.li-row{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}ui-list-item.li-bordered .li-row{border-bottom:none;padding:14px 16px}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-row.li-row--pressable{cursor:pointer}.li-row.li-row--pressable:focus-visible{outline:2px solid var(--primary, #2563eb);outline-offset:-2px}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:6px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:3px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"],
+			styles: ["ui-list-item{display:block}ui-list-item.li-bordered{border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);box-shadow:0 1px 2px #0f172a0a;margin-bottom:8px;transition:border-color .15s ease,box-shadow .15s ease}ui-list-item.li-bordered:last-child{margin-bottom:0}ui-list-item.li-bordered:hover{border-color:#cbd5e1;box-shadow:0 2px 6px #0f172a12}@media(prefers-reduced-motion:reduce){ui-list-item.li-bordered{transition:none}}.li-row{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}ui-list-item.li-bordered .li-row{border-bottom:none;padding:14px 16px}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-row.li-row--pressable{cursor:pointer}.li-row.li-row--pressable:focus-visible{outline:2px solid var(--primary, #2563eb);outline-offset:-2px}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-row>[list-item-image]{flex:0 0 auto;align-self:center}.li-row.li-row--disabled,.li-row.li-row--disabled:hover{opacity:.72;cursor:not-allowed;background-color:var(--surface-muted, #f8fafc);background-image:repeating-linear-gradient(135deg,transparent 0,transparent 6px,rgba(100,116,139,.1) 6px,rgba(100,116,139,.1) 12px)}.li-row.li-row--disabled .li-body,.li-row.li-row--disabled .li-input,.li-row.li-row--disabled.li-row--pressable{cursor:not-allowed}ui-list-item.li-disabled.li-bordered,ui-list-item.li-disabled.li-bordered:hover{border-style:dashed;box-shadow:none}.li-row.li-row--busy,.li-row.li-row--busy .li-body{cursor:progress}.li-spinner{flex:0 0 auto;align-self:center;box-sizing:border-box;width:16px;height:16px;border:2px solid rgba(100,116,139,.3);border-top-color:var(--text-secondary, #475569);border-radius:50%;animation:li-spin .6s linear infinite}@keyframes li-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.li-spinner{animation-duration:2s}}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:6px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:3px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"],
 			dependencies: [{
 				kind: "component",
 				type: BadgeComponent,
 				selector: "ui-badge",
-				inputs: ["label", "variant"]
+				inputs: [
+					"label",
+					"variant",
+					"color"
+				]
 			}, {
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -28632,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()" />
         }
@@ -28644,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>
@@ -28652,45 +29436,57 @@ i0.ɵɵngDeclareClassMetadata({
     </ng-template>
 
     <div class="li-row" [class.li-row--highlighted]="highlighted()" [class.li-row--pressable]="pressable()"
-         [attr.role]="pressable() ? 'button' : null" [attr.tabindex]="pressable() ? 0 : null"
+         [class.li-row--disabled]="disabled()" [class.li-row--busy]="busy()"
+         [attr.role]="pressable() ? 'button' : null" [attr.tabindex]="pressable() && !disabled() ? 0 : null"
+         [attr.aria-disabled]="disabled() && pressable() ? 'true' : null" [attr.aria-busy]="busy() ? 'true' : null"
          (click)="onRowClick($event)" (keydown.enter)="onRowKey($event)" (keydown.space)="onRowKey($event)" [class.li-row--static]="!interactive()" [class.li-row--wrap]="wrapText() || !interactive()">
 
-      @if (!interactive()) {
-        <ng-container [ngTemplateOutlet]="tile" />
-        <div class="li-body li-body--static">
-          <ng-container [ngTemplateOutlet]="content" />
-        </div>
-      } @else {
-      @if (leading() === 'radio') {
+      @if (interactive() && leading() === 'radio') {
         <input
           type="radio"
           class="li-input"
           [id]="inputId()"
           [name]="inputName()"
           [checked]="checked()"
-          (change)="select.emit()"
+          [disabled]="disabled()"
+          (click)="onInputClick($event)"
+          (keydown)="onInputKey($event)"
+          (change)="onInputChange($event)"
         />
-      } @else if (leading() === 'checkbox') {
+      } @else if (interactive() && leading() === 'checkbox') {
         <input
           type="checkbox"
           class="li-input"
           [id]="inputId()"
           [checked]="checked()"
-          (change)="select.emit()"
+          [disabled]="disabled()"
+          (click)="onInputClick($event)"
+          (keydown)="onInputKey($event)"
+          (change)="onInputChange($event)"
         />
       }
 
-      <ng-container [ngTemplateOutlet]="tile" />
-      <label class="li-body" [attr.for]="inputId() || null">
-        <ng-container [ngTemplateOutlet]="content" />
-      </label>
+      <!-- Leading image slot (library source 2026-11-04): a product photo in front of the text. Replaces the icon tile. -->
+      <ng-content select="[list-item-image]" />
+      @if (!hasImage()) { <ng-container [ngTemplateOutlet]="tile" /> }
+      @if (!interactive()) {
+        <div class="li-body li-body--static">
+          <ng-container [ngTemplateOutlet]="content" />
+        </div>
+      } @else {
+        <label class="li-body" [attr.for]="inputId() || null">
+          <ng-container [ngTemplateOutlet]="content" />
+        </label>
       }
 
+      @if (busy()) {
+        <span class="li-spinner" aria-hidden="true"></span>
+      }
       <ng-content select="[list-item-action], [li-action]" />
 
     </div>
   `,
-			styles: ["ui-list-item{display:block}ui-list-item.li-bordered{border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);box-shadow:0 1px 2px #0f172a0a;margin-bottom:8px;transition:border-color .15s ease,box-shadow .15s ease}ui-list-item.li-bordered:last-child{margin-bottom:0}ui-list-item.li-bordered:hover{border-color:#cbd5e1;box-shadow:0 2px 6px #0f172a12}@media(prefers-reduced-motion:reduce){ui-list-item.li-bordered{transition:none}}.li-row{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}ui-list-item.li-bordered .li-row{border-bottom:none;padding:14px 16px}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-row.li-row--pressable{cursor:pointer}.li-row.li-row--pressable:focus-visible{outline:2px solid var(--primary, #2563eb);outline-offset:-2px}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:6px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:3px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"]
+			styles: ["ui-list-item{display:block}ui-list-item.li-bordered{border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);box-shadow:0 1px 2px #0f172a0a;margin-bottom:8px;transition:border-color .15s ease,box-shadow .15s ease}ui-list-item.li-bordered:last-child{margin-bottom:0}ui-list-item.li-bordered:hover{border-color:#cbd5e1;box-shadow:0 2px 6px #0f172a12}@media(prefers-reduced-motion:reduce){ui-list-item.li-bordered{transition:none}}.li-row{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}ui-list-item.li-bordered .li-row{border-bottom:none;padding:14px 16px}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-row.li-row--pressable{cursor:pointer}.li-row.li-row--pressable:focus-visible{outline:2px solid var(--primary, #2563eb);outline-offset:-2px}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-row>[list-item-image]{flex:0 0 auto;align-self:center}.li-row.li-row--disabled,.li-row.li-row--disabled:hover{opacity:.72;cursor:not-allowed;background-color:var(--surface-muted, #f8fafc);background-image:repeating-linear-gradient(135deg,transparent 0,transparent 6px,rgba(100,116,139,.1) 6px,rgba(100,116,139,.1) 12px)}.li-row.li-row--disabled .li-body,.li-row.li-row--disabled .li-input,.li-row.li-row--disabled.li-row--pressable{cursor:not-allowed}ui-list-item.li-disabled.li-bordered,ui-list-item.li-disabled.li-bordered:hover{border-style:dashed;box-shadow:none}.li-row.li-row--busy,.li-row.li-row--busy .li-body{cursor:progress}.li-spinner{flex:0 0 auto;align-self:center;box-sizing:border-box;width:16px;height:16px;border:2px solid rgba(100,116,139,.3);border-top-color:var(--text-secondary, #475569);border-radius:50%;animation:li-spin .6s linear infinite}@keyframes li-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.li-spinner{animation-duration:2s}}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:6px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:3px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -28766,10 +29562,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
 		_borderedClass: [{
 			type: HostBinding,
 			args: ["class.li-bordered"]
 		}],
+		_disabledClass: [{
+			type: HostBinding,
+			args: ["class.li-disabled"]
+		}],
 		title: [{
 			type: i0.Input,
 			args: [{
@@ -29107,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,
@@ -30066,6 +30886,7 @@ var ListComponent = class ListComponent {
 		this.injector = inject(Injector);
 		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.ordered = input(false, ...ngDevMode ? [{ debugName: "ordered" }] : /* istanbul ignore next */ []);
+		this.bulleted = input(false, ...ngDevMode ? [{ debugName: "bulleted" }] : /* istanbul ignore next */ []);
 		this.layout = input("list", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
 		this.gridMin = input(130, ...ngDevMode ? [{ debugName: "gridMin" }] : /* istanbul ignore next */ []);
 		this.gap = input(void 0, ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
@@ -30361,6 +31182,13 @@ var ListComponent = class ListComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				bulleted: {
+					classPropertyName: "bulleted",
+					publicName: "bulleted",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				layout: {
 					classPropertyName: "layout",
 					publicName: "layout",
@@ -30545,7 +31373,7 @@ var ListComponent = class ListComponent {
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ol>
       } @else {
-        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="isGrid()"
+        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="isGrid()" [class.ul-list--bulleted]="bulleted() && !isGrid()"
             [style.--ul-gap]="gapCss()" [style.--ul-min.px]="isGrid() ? gridMin() : null"
             [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
             (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
@@ -30565,7 +31393,7 @@ var ListComponent = class ListComponent {
     }
   `,
 			isInline: true,
-			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row{position:relative;padding-inline-end:0}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row>.ul-chevron{position:absolute;inset-inline-end:12px;top:50%;margin-top:-10px;pointer-events:none}.ul-item--nav>.ul-row>.ul-content>ui-list-item.li-bordered .li-row{padding-inline-end:40px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--unordered.ul-list--bulleted{list-style:disc;-webkit-padding-start:1.25rem;padding-inline-start:1.25rem}.ul-list--bulleted>.ul-item::marker{color:var(--text-secondary, #64748b)}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row{position:relative;padding-inline-end:0}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row>.ul-chevron{position:absolute;inset-inline-end:12px;top:50%;margin-top:-10px;pointer-events:none}.ul-item--nav>.ul-row>.ul-content>ui-list-item.li-bordered .li-row{padding-inline-end:40px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -30674,7 +31502,7 @@ i0.ɵɵngDeclareClassMetadata({
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ol>
       } @else {
-        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="isGrid()"
+        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="isGrid()" [class.ul-list--bulleted]="bulleted() && !isGrid()"
             [style.--ul-gap]="gapCss()" [style.--ul-min.px]="isGrid() ? gridMin() : null"
             [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
             (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
@@ -30693,7 +31521,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
-			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row{position:relative;padding-inline-end:0}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row>.ul-chevron{position:absolute;inset-inline-end:12px;top:50%;margin-top:-10px;pointer-events:none}.ul-item--nav>.ul-row>.ul-content>ui-list-item.li-bordered .li-row{padding-inline-end:40px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--unordered.ul-list--bulleted{list-style:disc;-webkit-padding-start:1.25rem;padding-inline-start:1.25rem}.ul-list--bulleted>.ul-item::marker{color:var(--text-secondary, #64748b)}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row{position:relative;padding-inline-end:0}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row>.ul-chevron{position:absolute;inset-inline-end:12px;top:50%;margin-top:-10px;pointer-events:none}.ul-item--nav>.ul-row>.ul-content>ui-list-item.li-bordered .li-row{padding-inline-end:40px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -30713,6 +31541,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		bulleted: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bulleted",
+				required: false
+			}]
+		}],
 		layout: [{
 			type: i0.Input,
 			args: [{
@@ -30986,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>
   `,
@@ -31031,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>
   `,
@@ -32218,7 +33054,11 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -34383,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 */ []);
@@ -34681,7 +35479,11 @@ var TimelineComponent = class TimelineComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -35645,6 +36447,7 @@ var AddressInputComponent = class AddressInputComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -35682,6 +36485,7 @@ var AddressInputComponent = class AddressInputComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"labelHidden",
 						"inputName",
 						"placeholder",
 						"options",
@@ -36093,8 +36897,10 @@ var ImageComponent = class ImageComponent {
 		this.placeholder = input(true, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 		this.priority = input(false, ...ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []);
 		this.retryKey = input(null, ...ngDevMode ? [{ debugName: "retryKey" }] : /* istanbul ignore next */ []);
+		this.interactive = input(false, ...ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []);
 		this.loaded = output();
 		this.failed = output();
+		this.activate = output();
 		this._failed = signal(false, ...ngDevMode ? [{ debugName: "_failed" }] : /* istanbul ignore next */ []);
 		this._url = computed(() => this.src()?.trim() || null, ...ngDevMode ? [{ debugName: "_url" }] : /* istanbul ignore next */ []);
 		this.radiusCss = computed(() => RADIUS_PX[this.radius()] ?? "0", ...ngDevMode ? [{ debugName: "radiusCss" }] : /* istanbul ignore next */ []);
@@ -36113,6 +36919,14 @@ var ImageComponent = class ImageComponent {
 		this._failed.set(true);
 		this.failed.emit();
 	}
+	onActivate() {
+		if (this.interactive()) this.activate.emit();
+	}
+	onKey(event) {
+		if (!this.interactive()) return;
+		event.preventDefault();
+		this.activate.emit();
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -36235,16 +37049,35 @@ var ImageComponent = class ImageComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				interactive: {
+					classPropertyName: "interactive",
+					publicName: "interactive",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
 				loaded: "loaded",
-				failed: "failed"
+				failed: "failed",
+				activate: "activate"
+			},
+			host: {
+				listeners: {
+					"click": "onActivate()",
+					"keydown.enter": "onKey($event)",
+					"keydown.space": "onKey($event)"
+				},
+				properties: {
+					"style.text-align": "align()",
+					"class.im-block": "isBlock()",
+					"class.im-interactive": "interactive()",
+					"attr.role": "interactive() ? 'button' : null",
+					"attr.tabindex": "interactive() ? 0 : null",
+					"attr.aria-label": "interactive() ? (alt() || null) : null"
+				}
 			},
-			host: { properties: {
-				"style.text-align": "align()",
-				"class.im-block": "isBlock()"
-			} },
 			ngImport: i0,
 			template: `
     @if (_url() && !_failed()) {
@@ -36262,7 +37095,7 @@ var ImageComponent = class ImageComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:inline-block;max-width:100%;line-height:0}:host(.im-block){display:block}.im-img{display:inline-block;max-width:100%;height:auto;vertical-align:top}.im-bordered{border:1px solid #e2e8f0;box-sizing:border-box}.im-ph{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:48px;min-height:48px;background:#f1f5f9;color:#94a3b8;vertical-align:top}.im-ph svg{width:32px;height:32px;max-width:55%;max-height:55%}\n"],
+			styles: [":host{display:inline-block;max-width:100%;line-height:0}:host(.im-block){display:block}:host(.im-interactive){cursor:pointer}:host(.im-interactive:focus-visible){outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.im-img{display:inline-block;max-width:100%;height:auto;vertical-align:top}.im-bordered{border:1px solid #e2e8f0;box-sizing:border-box}.im-ph{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:48px;min-height:48px;background:#f1f5f9;color:#94a3b8;vertical-align:top}.im-ph svg{width:32px;height:32px;max-width:55%;max-height:55%}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -36280,7 +37113,14 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"[style.text-align]": "align()",
-				"[class.im-block]": "isBlock()"
+				"[class.im-block]": "isBlock()",
+				"[class.im-interactive]": "interactive()",
+				"[attr.role]": "interactive() ? 'button' : null",
+				"[attr.tabindex]": "interactive() ? 0 : null",
+				"[attr.aria-label]": "interactive() ? (alt() || null) : null",
+				"(click)": "onActivate()",
+				"(keydown.enter)": "onKey($event)",
+				"(keydown.space)": "onKey($event)"
 			},
 			template: `
     @if (_url() && !_failed()) {
@@ -36297,7 +37137,7 @@ i0.ɵɵngDeclareClassMetadata({
       </span>
     }
   `,
-			styles: [":host{display:inline-block;max-width:100%;line-height:0}:host(.im-block){display:block}.im-img{display:inline-block;max-width:100%;height:auto;vertical-align:top}.im-bordered{border:1px solid #e2e8f0;box-sizing:border-box}.im-ph{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:48px;min-height:48px;background:#f1f5f9;color:#94a3b8;vertical-align:top}.im-ph svg{width:32px;height:32px;max-width:55%;max-height:55%}\n"]
+			styles: [":host{display:inline-block;max-width:100%;line-height:0}:host(.im-block){display:block}:host(.im-interactive){cursor:pointer}:host(.im-interactive:focus-visible){outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}.im-img{display:inline-block;max-width:100%;height:auto;vertical-align:top}.im-bordered{border:1px solid #e2e8f0;box-sizing:border-box}.im-ph{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:48px;min-height:48px;background:#f1f5f9;color:#94a3b8;vertical-align:top}.im-ph svg{width:32px;height:32px;max-width:55%;max-height:55%}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -36422,6 +37262,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		interactive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "interactive",
+				required: false
+			}]
+		}],
 		loaded: [{
 			type: i0.Output,
 			args: ["loaded"]
@@ -36429,6 +37277,10 @@ i0.ɵɵngDeclareClassMetadata({
 		failed: [{
 			type: i0.Output,
 			args: ["failed"]
+		}],
+		activate: [{
+			type: i0.Output,
+			args: ["activate"]
 		}]
 	}
 });
@@ -36773,9 +37625,14 @@ var ImageGalleryComponent = class ImageGalleryComponent {
 						"align",
 						"placeholder",
 						"priority",
-						"retryKey"
+						"retryKey",
+						"interactive"
 					],
-					outputs: ["loaded", "failed"]
+					outputs: [
+						"loaded",
+						"failed",
+						"activate"
+					]
 				},
 				{
 					kind: "component",
@@ -36943,6 +37800,8 @@ var KpiCardComponent = class KpiCardComponent {
 		this.highlight = input(false, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
 		this.clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
 		this.valueColor = input("default", ...ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.loadingLabel = input("Loading", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
 		this.background = input("", ...ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []);
 		this.progress = input(null, ...ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []);
 		this.progressMax = input(100, ...ngDevMode ? [{ debugName: "progressMax" }] : /* istanbul ignore next */ []);
@@ -37036,6 +37895,20 @@ var KpiCardComponent = class KpiCardComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadingLabel: {
+					classPropertyName: "loadingLabel",
+					publicName: "loadingLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				background: {
 					classPropertyName: "background",
 					publicName: "background",
@@ -37100,6 +37973,7 @@ var KpiCardComponent = class KpiCardComponent {
 				},
 				properties: {
 					"attr.role": "clickable() ? \"button\" : null",
+					"attr.aria-busy": "loading() ? \"true\" : null",
 					"attr.tabindex": "clickable() ? 0 : null"
 				}
 			},
@@ -37111,19 +37985,27 @@ var KpiCardComponent = class KpiCardComponent {
       }
       @if (hasProgress()) {
         <div class="kpi-top">
-          <span class="kpi-label">{{ label() }}</span>
-          <ui-progress-ring class="kpi-ring" [value]="progress()!" [max]="progressMax()" [size]="progressSize()" [strokeWidth]="progressStrokeWidth()"
+          <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>
       }
-      <span class="kpi-value"
-            [class.green-value]="highlight() || valueColor() === 'green'"
-            [class.blue-value]="valueColor() === 'blue'"
-            [class.red-value]="valueColor() === 'red'">{{ value() }}</span>
-      @if (subtitle()) {
-        <span class="kpi-subtitle">{{ subtitle() }}</span>
+      @if (loading()) {
+        <span class="kpi-value kpi-value--loading" aria-hidden="true" data-testid="kpi-value-placeholder"><span class="kpi-bar"></span></span>
+        <span class="kpi-loading-text">{{ loadingLabel() }}</span>
+        @if (subtitle()) {
+          <span class="kpi-subtitle kpi-subtitle--loading" aria-hidden="true" data-testid="kpi-subtitle-placeholder">{{ subtitle() }}</span>
+        }
+      } @else {
+        <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>
+        @if (subtitle()) {
+          <span class="kpi-subtitle">{{ subtitle() }}</span>
+        }
       }
       <ng-content select="[kpi-footer]" />
       @if (clickable()) {
@@ -37132,7 +38014,7 @@ var KpiCardComponent = class KpiCardComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-card.ring-corner .kpi-top{display:contents}.kpi-card.ring-corner .kpi-ring{position:absolute;top:12px;right:12px}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"],
+			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-card.ring-corner .kpi-top{display:contents}.kpi-card.ring-corner .kpi-ring{position:absolute;top:12px;right:12px}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}.kpi-value--loading{display:flex;align-items:center;height:1.65rem}.kpi-bar{display:block;width:60%;max-width:8rem;height:1.1rem;border-radius:6px;background:#e2e8f0;animation:kpi-pulse 1.4s ease-in-out infinite}.kpi-subtitle--loading{align-self:flex-start;max-width:100%;border-radius:4px;background:#e2e8f0;color:transparent;-webkit-user-select:none;user-select:none;animation:kpi-pulse 1.4s ease-in-out infinite}.kpi-loading-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes kpi-pulse{50%{opacity:.55}}@media(prefers-reduced-motion:reduce){.kpi-bar,.kpi-subtitle--loading{animation:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ProgressRingComponent,
@@ -37168,6 +38050,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"[attr.role]": "clickable() ? \"button\" : null",
+				"[attr.aria-busy]": "loading() ? \"true\" : null",
 				"[attr.tabindex]": "clickable() ? 0 : null",
 				"(keydown.enter)": "onActivateKey($event)",
 				"(keydown.space)": "onActivateKey($event)"
@@ -37179,19 +38062,27 @@ i0.ɵɵngDeclareClassMetadata({
       }
       @if (hasProgress()) {
         <div class="kpi-top">
-          <span class="kpi-label">{{ label() }}</span>
-          <ui-progress-ring class="kpi-ring" [value]="progress()!" [max]="progressMax()" [size]="progressSize()" [strokeWidth]="progressStrokeWidth()"
+          <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>
       }
-      <span class="kpi-value"
-            [class.green-value]="highlight() || valueColor() === 'green'"
-            [class.blue-value]="valueColor() === 'blue'"
-            [class.red-value]="valueColor() === 'red'">{{ value() }}</span>
-      @if (subtitle()) {
-        <span class="kpi-subtitle">{{ subtitle() }}</span>
+      @if (loading()) {
+        <span class="kpi-value kpi-value--loading" aria-hidden="true" data-testid="kpi-value-placeholder"><span class="kpi-bar"></span></span>
+        <span class="kpi-loading-text">{{ loadingLabel() }}</span>
+        @if (subtitle()) {
+          <span class="kpi-subtitle kpi-subtitle--loading" aria-hidden="true" data-testid="kpi-subtitle-placeholder">{{ subtitle() }}</span>
+        }
+      } @else {
+        <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>
+        @if (subtitle()) {
+          <span class="kpi-subtitle">{{ subtitle() }}</span>
+        }
       }
       <ng-content select="[kpi-footer]" />
       @if (clickable()) {
@@ -37199,7 +38090,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-card.ring-corner .kpi-top{display:contents}.kpi-card.ring-corner .kpi-ring{position:absolute;top:12px;right:12px}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"]
+			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-card.ring-corner .kpi-top{display:contents}.kpi-card.ring-corner .kpi-ring{position:absolute;top:12px;right:12px}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}.kpi-value--loading{display:flex;align-items:center;height:1.65rem}.kpi-bar{display:block;width:60%;max-width:8rem;height:1.1rem;border-radius:6px;background:#e2e8f0;animation:kpi-pulse 1.4s ease-in-out infinite}.kpi-subtitle--loading{align-self:flex-start;max-width:100%;border-radius:4px;background:#e2e8f0;color:transparent;-webkit-user-select:none;user-select:none;animation:kpi-pulse 1.4s ease-in-out infinite}.kpi-loading-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes kpi-pulse{50%{opacity:.55}}@media(prefers-reduced-motion:reduce){.kpi-bar,.kpi-subtitle--loading{animation:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -37267,6 +38158,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
 		background: [{
 			type: i0.Input,
 			args: [{
@@ -37578,7 +38485,10 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 						"ariaLabel",
 						"name",
 						"noWrap",
-						"orientation"
+						"orientation",
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -39282,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 */ {},
@@ -39302,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 = (_) => {};
@@ -39322,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;
@@ -39339,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;
@@ -39358,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 {
@@ -39383,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
 		});
@@ -39392,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",
@@ -39403,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
@@ -39550,6 +41285,7 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 				inputs: [
 					"label",
 					"description",
+					"icon",
 					"ariaLabel",
 					"testId",
 					"value",
@@ -45068,7 +46804,11 @@ var CalendarComponent = class CalendarComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -45100,7 +46840,10 @@ var CalendarComponent = class CalendarComponent {
 						"ariaLabel",
 						"name",
 						"noWrap",
-						"orientation"
+						"orientation",
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -49281,7 +51024,11 @@ var SetupWizardComponent = class SetupWizardComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -49341,6 +51088,7 @@ var SetupWizardComponent = class SetupWizardComponent {
 						"background",
 						"headerBackground",
 						"footerBackground",
+						"footerAlign",
 						"textColor",
 						"showHeader",
 						"collapsible",
@@ -49406,7 +51154,10 @@ var SetupWizardComponent = class SetupWizardComponent {
 						"ariaLabel",
 						"name",
 						"noWrap",
-						"orientation"
+						"orientation",
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -49493,6 +51244,7 @@ var SetupWizardComponent = class SetupWizardComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -51606,7 +53358,10 @@ var EmailTemplateEditorComponent = class EmailTemplateEditorComponent {
 						"ariaLabel",
 						"name",
 						"noWrap",
-						"orientation"
+						"orientation",
+						"controlsPanels",
+						"showDescription",
+						"headingLevel"
 					],
 					outputs: ["tabChange"]
 				},
@@ -51652,6 +53407,7 @@ var EmailTemplateEditorComponent = class EmailTemplateEditorComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"labelHidden",
 						"inputName",
 						"placeholder",
 						"options",
@@ -51710,6 +53466,7 @@ var EmailTemplateEditorComponent = class EmailTemplateEditorComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -53384,7 +55141,11 @@ var ReminderAlertsComponent = class ReminderAlertsComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -55075,7 +56836,11 @@ var ConversationsComponent = class ConversationsComponent {
 					kind: "component",
 					type: BadgeComponent,
 					selector: "ui-badge",
-					inputs: ["label", "variant"]
+					inputs: [
+						"label",
+						"variant",
+						"color"
+					]
 				},
 				{
 					kind: "component",
@@ -55165,6 +56930,7 @@ var ConversationsComponent = class ConversationsComponent {
 					inputs: [
 						"items",
 						"ordered",
+						"bulleted",
 						"layout",
 						"gridMin",
 						"gap",
@@ -58136,6 +59902,8 @@ var PaymentSidePanelComponent = class PaymentSidePanelComponent {
 						"highlight",
 						"clickable",
 						"valueColor",
+						"loading",
+						"loadingLabel",
 						"background",
 						"progress",
 						"progressMax",
@@ -58159,6 +59927,7 @@ var PaymentSidePanelComponent = class PaymentSidePanelComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"labelHidden",
 						"inputName",
 						"placeholder",
 						"options",
@@ -58205,6 +59974,7 @@ var PaymentSidePanelComponent = class PaymentSidePanelComponent {
 						"inputName",
 						"placeholder",
 						"prefix",
+						"leadingIcon",
 						"revealable",
 						"passwordRequirements",
 						"passwordRules",
@@ -58704,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, 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, 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, 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