@forgeroute/ui 0.3.12 → 0.4.0

package/fesm2022/forgeroute-ui.mjs

@@ -11345,6 +11345,278 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var ProgressRingComponent = class ProgressRingComponent {
+	constructor() {
+		this.value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+		this.size = input(58, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.strokeWidth = input(5, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+		this.variant = input(null, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.showValue = input(true, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []);
+		this.valueText = input("", ...ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []);
+		this.safeMax = computed(() => {
+			const m = this.max();
+			return Number.isFinite(m) && m > 0 ? m : 0;
+		}, ...ngDevMode ? [{ debugName: "safeMax" }] : /* istanbul ignore next */ []);
+		this.clampedValue = computed(() => {
+			const v = this.value();
+			return Math.min(Math.max(Number.isNaN(v) ? 0 : v, 0), this.safeMax());
+		}, ...ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []);
+		this.exact = computed(() => this.safeMax() > 0 ? this.clampedValue() / this.safeMax() * 100 : 0, ...ngDevMode ? [{ debugName: "exact" }] : /* istanbul ignore next */ []);
+		this.percent = computed(() => Math.round(this.exact()), ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
+		this.center = computed(() => this.size() / 2, ...ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []);
+		this.radius = computed(() => Math.max((this.size() - this.strokeWidth()) / 2, 0), ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+		this.circumference = computed(() => 2 * Math.PI * this.radius(), ...ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []);
+		this.dashOffset = computed(() => this.circumference() * (1 - this.exact() / 100), ...ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []);
+		this.effectiveVariant = computed(() => {
+			const fixed = this.variant();
+			if (fixed) return fixed;
+			const e = this.exact();
+			return e <= 25 ? "red" : e <= 50 ? "amber" : e <= 75 ? "blue" : "green";
+		}, ...ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ProgressRingComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ProgressRingComponent,
+			isStandalone: true,
+			selector: "ui-progress-ring",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				max: {
+					classPropertyName: "max",
+					publicName: "max",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				strokeWidth: {
+					classPropertyName: "strokeWidth",
+					publicName: "strokeWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				variant: {
+					classPropertyName: "variant",
+					publicName: "variant",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showValue: {
+					classPropertyName: "showValue",
+					publicName: "showValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabelledby: {
+					classPropertyName: "ariaLabelledby",
+					publicName: "ariaLabelledby",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				valueText: {
+					classPropertyName: "valueText",
+					publicName: "valueText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    <div class="pr"
+         role="progressbar"
+         [style.width.px]="size()"
+         [style.height.px]="size()"
+         [attr.aria-valuemin]="0"
+         [attr.aria-valuemax]="safeMax()"
+         [attr.aria-valuenow]="clampedValue()"
+         [attr.aria-valuetext]="valueText() || null"
+         [attr.aria-labelledby]="ariaLabelledby() || null"
+         [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() || null)">
+      <svg [attr.width]="size()" [attr.height]="size()" [attr.viewBox]="'0 0 ' + size() + ' ' + size()" aria-hidden="true" focusable="false">
+        <circle class="pr-track" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none" [attr.stroke-width]="strokeWidth()" />
+        <circle [class]="'pr-arc pr-' + effectiveVariant()" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none"
+                [attr.stroke-width]="strokeWidth()" stroke-linecap="round"
+                [attr.stroke-dasharray]="circumference()" [attr.stroke-dashoffset]="dashOffset()"
+                [attr.transform]="'rotate(-90 ' + center() + ' ' + center() + ')'" />
+      </svg>
+      @if (showValue()) {
+        <span class="pr-value" [style.font-size.px]="size() * 0.21">{{ label() || percent() + '%' }}</span>
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:inline-block;line-height:0}.pr{position:relative;display:inline-flex;align-items:center;justify-content:center}.pr svg{position:absolute;inset:0}.pr-track{stroke:#e2e8f0}.pr-arc{transition:stroke-dashoffset .8s ease}@media(prefers-reduced-motion:reduce){.pr-arc{transition:none}}.pr-blue{stroke:#3b82f6}.pr-green{stroke:#16a34a}.pr-amber{stroke:#f59e0b}.pr-red{stroke:#ef4444}.pr-slate{stroke:#94a3b8}.pr-sky{stroke:#0ea5e9}@media(forced-colors:active){.pr-track{stroke:CanvasText;opacity:.35}.pr-arc{stroke:Highlight}}.pr-value{position:relative;font-weight:700;line-height:1;color:#1e293b}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ProgressRingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-progress-ring",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <div class="pr"
+         role="progressbar"
+         [style.width.px]="size()"
+         [style.height.px]="size()"
+         [attr.aria-valuemin]="0"
+         [attr.aria-valuemax]="safeMax()"
+         [attr.aria-valuenow]="clampedValue()"
+         [attr.aria-valuetext]="valueText() || null"
+         [attr.aria-labelledby]="ariaLabelledby() || null"
+         [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() || null)">
+      <svg [attr.width]="size()" [attr.height]="size()" [attr.viewBox]="'0 0 ' + size() + ' ' + size()" aria-hidden="true" focusable="false">
+        <circle class="pr-track" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none" [attr.stroke-width]="strokeWidth()" />
+        <circle [class]="'pr-arc pr-' + effectiveVariant()" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none"
+                [attr.stroke-width]="strokeWidth()" stroke-linecap="round"
+                [attr.stroke-dasharray]="circumference()" [attr.stroke-dashoffset]="dashOffset()"
+                [attr.transform]="'rotate(-90 ' + center() + ' ' + center() + ')'" />
+      </svg>
+      @if (showValue()) {
+        <span class="pr-value" [style.font-size.px]="size() * 0.21">{{ label() || percent() + '%' }}</span>
+      }
+    </div>
+  `,
+			styles: [":host{display:inline-block;line-height:0}.pr{position:relative;display:inline-flex;align-items:center;justify-content:center}.pr svg{position:absolute;inset:0}.pr-track{stroke:#e2e8f0}.pr-arc{transition:stroke-dashoffset .8s ease}@media(prefers-reduced-motion:reduce){.pr-arc{transition:none}}.pr-blue{stroke:#3b82f6}.pr-green{stroke:#16a34a}.pr-amber{stroke:#f59e0b}.pr-red{stroke:#ef4444}.pr-slate{stroke:#94a3b8}.pr-sky{stroke:#0ea5e9}@media(forced-colors:active){.pr-track{stroke:CanvasText;opacity:.35}.pr-arc{stroke:Highlight}}.pr-value{position:relative;font-weight:700;line-height:1;color:#1e293b}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		valueText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueText",
+				required: false
+			}]
+		}]
+	}
+});
 var AudioPlayerComponent = class AudioPlayerComponent {
 	constructor() {
 		this.src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
@@ -13619,6 +13891,8 @@ var AlertComponent = class AlertComponent {
 		this.variant = input("info", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.dismissible = input(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
+		this.quiet = input(false, ...ngDevMode ? [{ debugName: "quiet" }] : /* istanbul ignore next */ []);
+		this.compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
 		this.dismissed = output();
 	}
 	static {
@@ -13659,12 +13933,26 @@ var AlertComponent = class AlertComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				quiet: {
+					classPropertyName: "quiet",
+					publicName: "quiet",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				compact: {
+					classPropertyName: "compact",
+					publicName: "compact",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { dismissed: "dismissed" },
 			ngImport: i0,
 			template: `
-    <div class="alert" [class]="'alert alert--' + variant()" [attr.role]="variant() === 'danger' ? 'alert' : 'status'">
+    <div class="alert" [class]="'alert alert--' + variant()" [class.alert--compact]="compact()" [attr.role]="quiet() ? null : (variant() === 'danger' ? 'alert' : 'status')">
       <div class="alert-content">
         @if (title()) { <div class="alert-title">{{ title() }}</div> }
         <div class="alert-body"><ng-content /></div>
@@ -13679,7 +13967,7 @@ var AlertComponent = class AlertComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"],
+			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -13696,7 +13984,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
-    <div class="alert" [class]="'alert alert--' + variant()" [attr.role]="variant() === 'danger' ? 'alert' : 'status'">
+    <div class="alert" [class]="'alert alert--' + variant()" [class.alert--compact]="compact()" [attr.role]="quiet() ? null : (variant() === 'danger' ? 'alert' : 'status')">
       <div class="alert-content">
         @if (title()) { <div class="alert-title">{{ title() }}</div> }
         <div class="alert-body"><ng-content /></div>
@@ -13710,7 +13998,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"]
+			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -13738,6 +14026,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		quiet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "quiet",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
 		dismissed: [{
 			type: i0.Output,
 			args: ["dismissed"]
@@ -14291,7 +14595,9 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 					inputs: [
 						"variant",
 						"title",
-						"dismissible"
+						"dismissible",
+						"quiet",
+						"compact"
 					],
 					outputs: ["dismissed"]
 				},
@@ -22573,7 +22879,9 @@ var SendEmailComponent = class SendEmailComponent {
 					inputs: [
 						"variant",
 						"title",
-						"dismissible"
+						"dismissible",
+						"quiet",
+						"compact"
 					],
 					outputs: ["dismissed"]
 				}
@@ -24191,7 +24499,9 @@ var SendTextComponent = class SendTextComponent {
 					inputs: [
 						"variant",
 						"title",
-						"dismissible"
+						"dismissible",
+						"quiet",
+						"compact"
 					],
 					outputs: ["dismissed"]
 				}
@@ -26274,21 +26584,123 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var ImagePreviewComponent = class ImagePreviewComponent {
+const SIZE_REM = {
+	sm: "0.8125rem",
+	md: "0.875rem",
+	lg: "1rem"
+};
+var TextComponent = class TextComponent {
 	constructor() {
-		this.src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
-		this.alt = input("", ...ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []);
-		this.shape = input("rounded", ...ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []);
+		this.text = input("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
-		this.placeholder = input("image", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
-		this.loading = input("lazy", ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
-		this.positionX = input(50, ...ngDevMode ? [{ debugName: "positionX" }] : /* istanbul ignore next */ []);
-		this.positionY = input(50, ...ngDevMode ? [{ debugName: "positionY" }] : /* istanbul ignore next */ []);
-		this.retryKey = input(null, ...ngDevMode ? [{ debugName: "retryKey" }] : /* istanbul ignore next */ []);
-		this._failed = signal(false, ...ngDevMode ? [{ debugName: "_failed" }] : /* istanbul ignore next */ []);
-		this._url = computed(() => this.src()?.trim() || null, ...ngDevMode ? [{ debugName: "_url" }] : /* istanbul ignore next */ []);
-		this._objectPosition = computed(() => `${this.positionX() ?? 50}% ${this.positionY() ?? 50}%`, ...ngDevMode ? [{ debugName: "_objectPosition" }] : /* istanbul ignore next */ []);
-		this._cls = computed(() => `ip-${this.shape()}-${this.size()}`, ...ngDevMode ? [{ debugName: "_cls" }] : /* istanbul ignore next */ []);
+		this.tone = input("default", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+		this.fontSize = computed(() => SIZE_REM[this.size()] ?? SIZE_REM.md, ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TextComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: TextComponent,
+			isStandalone: true,
+			selector: "ui-text",
+			inputs: {
+				text: {
+					classPropertyName: "text",
+					publicName: "text",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tone: {
+					classPropertyName: "tone",
+					publicName: "tone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()">{{ text() }}</div>`,
+			isInline: true,
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TextComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-text",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()">{{ text() }}</div>`,
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}\n"]
+		}]
+	}],
+	propDecorators: {
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}]
+	}
+});
+var ImagePreviewComponent = class ImagePreviewComponent {
+	constructor() {
+		this.src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+		this.alt = input("", ...ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []);
+		this.shape = input("rounded", ...ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []);
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("image", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.loading = input("lazy", ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.positionX = input(50, ...ngDevMode ? [{ debugName: "positionX" }] : /* istanbul ignore next */ []);
+		this.positionY = input(50, ...ngDevMode ? [{ debugName: "positionY" }] : /* istanbul ignore next */ []);
+		this.retryKey = input(null, ...ngDevMode ? [{ debugName: "retryKey" }] : /* istanbul ignore next */ []);
+		this._failed = signal(false, ...ngDevMode ? [{ debugName: "_failed" }] : /* istanbul ignore next */ []);
+		this._url = computed(() => this.src()?.trim() || null, ...ngDevMode ? [{ debugName: "_url" }] : /* istanbul ignore next */ []);
+		this._objectPosition = computed(() => `${this.positionX() ?? 50}% ${this.positionY() ?? 50}%`, ...ngDevMode ? [{ debugName: "_objectPosition" }] : /* istanbul ignore next */ []);
+		this._cls = computed(() => `ip-${this.shape()}-${this.size()}`, ...ngDevMode ? [{ debugName: "_cls" }] : /* istanbul ignore next */ []);
 		effect(() => {
 			this.src();
 			this.retryKey();
@@ -29461,6 +29873,21 @@ function provideForgerouteToast(options = {}) {
 		});
 	})]);
 }
+const LAYOUT_GAP_PX = {
+	none: 0,
+	xs: 4,
+	sm: 8,
+	md: 16,
+	lg: 24,
+	xl: 32
+};
+const CSS_LENGTH = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
+function resolveLayoutGap(gap, fallback) {
+	const v = (gap ?? "").trim();
+	if (Object.prototype.hasOwnProperty.call(LAYOUT_GAP_PX, v)) return `${LAYOUT_GAP_PX[v]}px`;
+	if (v && CSS_LENGTH.test(v)) return v;
+	return `${LAYOUT_GAP_PX[fallback]}px`;
+}
 function reorderItems(items, order) {
 	return order.map((i) => items[i]);
 }
@@ -29480,30 +29907,69 @@ function defaultLabel(item, index) {
 	if (typeof item === "number") return String(item);
 	return `Item ${index + 1}`;
 }
+const DEFAULT_GAP_LIST = "0px";
+const DEFAULT_GAP_GRID = "12px";
+let nextId$2 = 0;
 var ListComponent = class ListComponent {
 	constructor() {
 		this.host = inject(ElementRef);
 		this.injector = inject(Injector);
 		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.ordered = input(false, ...ngDevMode ? [{ debugName: "ordered" }] : /* 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 */ []);
 		this.reorderable = input(false, ...ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []);
 		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.moveControls = input("auto", ...ngDevMode ? [{ debugName: "moveControls" }] : /* istanbul ignore next */ []);
+		this.dragDrop = input("auto", ...ngDevMode ? [{ debugName: "dragDrop" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.ariaLabelledby = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []);
 		this.itemLabelFn = input(defaultLabel, ...ngDevMode ? [{ debugName: "itemLabelFn" }] : /* istanbul ignore next */ []);
 		this.trackBy = input((item) => item, ...ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []);
+		this.moveEarlierLabel = input(void 0, ...ngDevMode ? [{ debugName: "moveEarlierLabel" }] : /* istanbul ignore next */ []);
+		this.moveLaterLabel = input(void 0, ...ngDevMode ? [{ debugName: "moveLaterLabel" }] : /* istanbul ignore next */ []);
+		this.helpText = input("Hold Shift and press the arrow keys to move this item. Shift plus Home or End moves it to the start or end.", ...ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []);
+		this.moveAnnouncement = input((label, position, total) => `${label} moved to position ${position} of ${total}`, ...ngDevMode ? [{ debugName: "moveAnnouncement" }] : /* istanbul ignore next */ []);
+		this.itemsChange = output();
 		this.reorder = output();
 		this.rowTemplate = contentChild(TemplateRef, ...ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []);
+		this.helpId = `ul-help-${nextId$2++}`;
 		this.announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
 		this.movedKey = signal(void 0, ...ngDevMode ? [{ debugName: "movedKey" }] : /* istanbul ignore next */ []);
+		this.dragIndex = signal(null, ...ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []);
+		this.overIndex = signal(null, ...ngDevMode ? [{ debugName: "overIndex" }] : /* istanbul ignore next */ []);
 		this.pendingFocus = null;
 		this.announceSeq = 0;
 		this.dupTokens = /* @__PURE__ */ new Map();
+		this.isGrid = computed(() => this.layout() === "grid", ...ngDevMode ? [{ debugName: "isGrid" }] : /* istanbul ignore next */ []);
+		this.canReorder = computed(() => this.reorderable() && !this.disabled(), ...ngDevMode ? [{ debugName: "canReorder" }] : /* istanbul ignore next */ []);
+		this.showControls = computed(() => {
+			if (!this.reorderable()) return false;
+			const m = this.moveControls();
+			return m === true || m === "auto" && !this.isGrid();
+		}, ...ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []);
+		this.direct = computed(() => {
+			if (!this.canReorder()) return false;
+			const d = this.dragDrop();
+			return d === true || d === "auto" && this.isGrid();
+		}, ...ngDevMode ? [{ debugName: "direct" }] : /* istanbul ignore next */ []);
+		this.gapCss = computed(() => {
+			const fallback = this.isGrid() ? DEFAULT_GAP_GRID : DEFAULT_GAP_LIST;
+			const g = this.gap();
+			if (g == null || String(g).trim() === "") return fallback;
+			const a = resolveLayoutGap(g, "none");
+			return a === resolveLayoutGap(g, "xl") ? a : fallback;
+		}, ...ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []);
 		this.rows = computed(() => {
 			const items = this.items();
 			const n = items.length;
 			const keyFn = this.trackBy();
 			const labelFn = this.itemLabelFn();
+			const grid = this.isGrid();
+			const earlier = this.moveEarlierLabel();
+			const later = this.moveLaterLabel();
+			const dragging = this.dragIndex();
 			const out = new Array(n);
 			const seen = /* @__PURE__ */ new Map();
 			const nextTokens = /* @__PURE__ */ new Map();
@@ -29523,14 +29989,18 @@ var ListComponent = class ListComponent {
 					key,
 					index: i,
 					label,
-					upLabel: `Move ${label} up`,
-					downLabel: `Move ${label} down`,
+					earlierLabel: earlier !== void 0 ? `${earlier} ${label}` : grid ? `Move earlier ${label}` : `Move ${label} up`,
+					laterLabel: later !== void 0 ? `${later} ${label}` : grid ? `Move later ${label}` : `Move ${label} down`,
 					first: i === 0,
 					last: i === n - 1,
+					dragging: dragging === i,
 					ctx: {
 						$implicit: item,
 						index: i,
-						count: n
+						count: n,
+						first: i === 0,
+						last: i === n - 1,
+						dragging: dragging === i
 					}
 				};
 			}
@@ -29538,23 +30008,52 @@ var ListComponent = class ListComponent {
 			return out;
 		}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
 	}
-	canReorder() {
-		return this.reorderable() && !this.disabled();
-	}
 	rowIndexOf(el, list) {
 		const li = el?.closest(".ul-item") ?? null;
 		if (!li || li.parentElement !== list) return -1;
 		return Number(li.getAttribute("data-index"));
 	}
+	move(from, to) {
+		return this.apply(from, to, null);
+	}
 	onKeydown(e) {
-		if (!e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-		if (!this.canReorder()) return;
+		if (!this.canReorder() || e.ctrlKey || e.metaKey) return;
+		const list = e.currentTarget;
 		const target = e.target;
-		if (target?.closest("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]")) return;
-		const idx = this.rowIndexOf(target, e.currentTarget);
-		if (idx < 0) return;
-		if (this.move(idx, e.key === "ArrowUp" ? -1 : 1)) e.preventDefault();
+		if (e.altKey && !e.shiftKey) {
+			if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+			if (target?.closest("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]")) return;
+			const idx = this.rowIndexOf(target, list);
+			if (idx < 0) return;
+			const onRow = this.direct() && target?.classList.contains("ul-item") === true;
+			if (this.apply(idx, idx + (e.key === "ArrowUp" ? -1 : 1), onRow ? "row" : "button")) e.preventDefault();
+			return;
+		}
+		if (e.shiftKey && !e.altKey && this.direct()) {
+			if (!target?.classList.contains("ul-item")) return;
+			const idx = this.rowIndexOf(target, list);
+			if (idx < 0) return;
+			let to;
+			switch (e.key) {
+				case "ArrowUp":
+				case "ArrowLeft":
+					to = idx - 1;
+					break;
+				case "ArrowDown":
+				case "ArrowRight":
+					to = idx + 1;
+					break;
+				case "Home":
+					to = 0;
+					break;
+				case "End":
+					to = this.rows().length - 1;
+					break;
+				default: return;
+			}
+			e.preventDefault();
+			this.apply(idx, to, "row");
+		}
 	}
 	onClick(e) {
 		if (!this.canReorder()) return;
@@ -29563,34 +30062,75 @@ var ListComponent = class ListComponent {
 		if (btn.querySelector("button")?.disabled) return;
 		const idx = this.rowIndexOf(btn, e.currentTarget);
 		if (idx < 0) return;
-		this.move(idx, btn.getAttribute("data-move") === "up" ? -1 : 1);
+		const dir = btn.getAttribute("data-move") === "up" ? -1 : 1;
+		this.apply(idx, idx + dir, "button");
 	}
 	onFocusOut(e) {
 		if (this.pendingFocus) return;
 		const next = e.relatedTarget;
 		if (!next || !e.currentTarget.contains(next)) this.movedKey.set(void 0);
 	}
-	move(from, dir) {
+	onDragStart(e) {
+		if (!this.direct()) return;
+		const idx = this.rowIndexOf(e.target, e.currentTarget);
+		if (idx < 0) return;
+		this.dragIndex.set(idx);
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", String(idx));
+		}
+	}
+	onDragOver(e) {
+		if (!this.direct() || this.dragIndex() === null) return;
+		const idx = this.rowIndexOf(e.target, e.currentTarget);
+		if (idx < 0) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		this.overIndex.set(idx);
+	}
+	onDrop(e) {
+		const from = this.dragIndex();
+		if (!this.direct() || from === null) return;
+		const idx = this.rowIndexOf(e.target, e.currentTarget);
+		if (idx < 0) return;
+		e.preventDefault();
+		this.onDragEnd();
+		this.apply(from, idx, null);
+	}
+	onDragEnd() {
+		this.dragIndex.set(null);
+		this.overIndex.set(null);
+	}
+	apply(from, to, focus) {
 		const rows = this.rows();
-		const to = from + dir;
-		if (to < 0 || to >= rows.length) return false;
+		const n = rows.length;
+		if (!this.canReorder() || !Number.isInteger(from) || from < 0 || from >= n) return false;
+		const target = Math.max(0, Math.min(n - 1, Number.isFinite(to) ? to : from));
+		if (target === from) return false;
 		const order = rows.map((r) => r.index);
 		const [moved] = order.splice(from, 1);
-		order.splice(to, 0, moved);
+		order.splice(target, 0, moved);
 		const row = rows[from];
-		this.movedKey.set(row.key);
-		this.announce(`${row.label} moved to position ${to + 1} of ${rows.length}`);
-		this.pendingFocus = {
-			key: row.key,
-			item: row.item,
-			to,
-			dir
-		};
-		afterNextRender(() => this.restoreFocus(), { injector: this.injector });
+		const items = reorderItems(this.items(), order);
+		this.announce(this.moveAnnouncement()(this.itemLabelFn()(row.item, target), target + 1, n));
+		if (focus) {
+			this.movedKey.set(row.key);
+			this.pendingFocus = {
+				key: row.key,
+				item: row.item,
+				to: target,
+				dir: target < from ? -1 : 1,
+				target: focus
+			};
+			afterNextRender(() => this.restoreFocus(), { injector: this.injector });
+		}
+		this.itemsChange.emit(items);
 		this.reorder.emit({
+			item: row.item,
 			from,
-			to,
-			order
+			to: target,
+			order,
+			items
 		});
 		return true;
 	}
@@ -29614,9 +30154,15 @@ var ListComponent = class ListComponent {
 		if (idx < 0) return;
 		const li = this.host.nativeElement.querySelector(`:scope > .ul-list > .ul-item[data-index="${idx}"]`);
 		if (!li) return;
+		if (p.target === "row") {
+			li.focus();
+			return;
+		}
 		const pick = (d) => li.querySelector(`:scope > .ul-row > .ul-controls > [data-move="${d}"] button:not(:disabled)`);
 		const preferred = p.dir === -1 ? "up" : "down";
-		(pick(preferred) ?? pick(preferred === "up" ? "down" : "up"))?.focus();
+		const btn = pick(preferred) ?? pick(preferred === "up" ? "down" : "up");
+		if (btn) btn.focus();
+		else if (this.direct()) li.focus();
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -29650,6 +30196,27 @@ var ListComponent = class ListComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				layout: {
+					classPropertyName: "layout",
+					publicName: "layout",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				gridMin: {
+					classPropertyName: "gridMin",
+					publicName: "gridMin",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				gap: {
+					classPropertyName: "gap",
+					publicName: "gap",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				reorderable: {
 					classPropertyName: "reorderable",
 					publicName: "reorderable",
@@ -29664,6 +30231,20 @@ var ListComponent = class ListComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				moveControls: {
+					classPropertyName: "moveControls",
+					publicName: "moveControls",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dragDrop: {
+					classPropertyName: "dragDrop",
+					publicName: "dragDrop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				ariaLabel: {
 					classPropertyName: "ariaLabel",
 					publicName: "ariaLabel",
@@ -29691,9 +30272,40 @@ var ListComponent = class ListComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				moveEarlierLabel: {
+					classPropertyName: "moveEarlierLabel",
+					publicName: "moveEarlierLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				moveLaterLabel: {
+					classPropertyName: "moveLaterLabel",
+					publicName: "moveLaterLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				helpText: {
+					classPropertyName: "helpText",
+					publicName: "helpText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				moveAnnouncement: {
+					classPropertyName: "moveAnnouncement",
+					publicName: "moveAnnouncement",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
-			outputs: { reorder: "reorder" },
+			outputs: {
+				itemsChange: "itemsChange",
+				reorder: "reorder"
+			},
 			queries: [{
 				propertyName: "rowTemplate",
 				first: true,
@@ -29705,7 +30317,17 @@ var ListComponent = class ListComponent {
 			template: `
     <ng-template #rowsTpl>
       @for (row of rows(); track row.key) {
-        <li class="ul-item" [class.ul-item--moved]="row.key === movedKey()" [attr.data-index]="row.index">
+        <li class="ul-item" role="listitem"
+            [class.ul-item--moved]="row.key === movedKey()"
+            [class.ul-item--draggable]="direct()"
+            [class.ul-item--dragging]="row.dragging"
+            [class.ul-item--over]="dragIndex() !== null && dragIndex() !== row.index && overIndex() === row.index"
+            [attr.data-index]="row.index"
+            [attr.draggable]="direct() ? 'true' : null"
+            [attr.tabindex]="direct() ? 0 : null"
+            [attr.aria-roledescription]="direct() ? 'sortable item' : null"
+            [attr.aria-label]="direct() ? row.label : null"
+            [attr.aria-describedby]="direct() ? helpId : null">
           <div class="ul-row">
             <div class="ul-content">
               @if (rowTemplate(); as tpl) {
@@ -29714,12 +30336,12 @@ var ListComponent = class ListComponent {
                 {{ row.label }}
               }
             </div>
-            @if (reorderable()) {
+            @if (showControls()) {
               <div class="ul-controls">
-                <ui-button variant="icon" data-move="up" [ariaLabel]="row.upLabel" [disabled]="disabled() || row.first">
+                <ui-button variant="icon" data-move="up" [ariaLabel]="row.earlierLabel" [disabled]="disabled() || row.first">
                   <svg 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 d="M18 15l-6-6-6 6"/></svg>
                 </ui-button>
-                <ui-button variant="icon" data-move="down" [ariaLabel]="row.downLabel" [disabled]="disabled() || row.last">
+                <ui-button variant="icon" data-move="down" [ariaLabel]="row.laterLabel" [disabled]="disabled() || row.last">
                   <svg 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 d="M6 9l6 6 6-6"/></svg>
                 </ui-button>
               </div>
@@ -29731,15 +30353,19 @@ var ListComponent = class ListComponent {
 
     @if (rows().length) {
       @if (ordered()) {
-        <ol class="ul-list ul-list--ordered" role="list"
+        <ol class="ul-list ul-list--ordered" role="list" [class.ul-list--grid]="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)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ol>
       } @else {
-        <ul class="ul-list ul-list--unordered" role="list"
+        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="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)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ul>
       }
@@ -29747,12 +30373,15 @@ var ListComponent = class ListComponent {
       <ng-content select="[list-empty]" />
     }
 
+    @if (direct() && rows().length) {
+      <span class="ul-sr" [id]="helpId">{{ helpText() }}</span>
+    }
     @if (reorderable()) {
-      <div class="ul-sr" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
+      <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
 			isInline: true,
-			styles: [":host{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-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}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}@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}}.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: [":host{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-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-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}:host ::ng-deep .ul-item--draggable img,:host ::ng-deep .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,
@@ -29807,7 +30436,17 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <ng-template #rowsTpl>
       @for (row of rows(); track row.key) {
-        <li class="ul-item" [class.ul-item--moved]="row.key === movedKey()" [attr.data-index]="row.index">
+        <li class="ul-item" role="listitem"
+            [class.ul-item--moved]="row.key === movedKey()"
+            [class.ul-item--draggable]="direct()"
+            [class.ul-item--dragging]="row.dragging"
+            [class.ul-item--over]="dragIndex() !== null && dragIndex() !== row.index && overIndex() === row.index"
+            [attr.data-index]="row.index"
+            [attr.draggable]="direct() ? 'true' : null"
+            [attr.tabindex]="direct() ? 0 : null"
+            [attr.aria-roledescription]="direct() ? 'sortable item' : null"
+            [attr.aria-label]="direct() ? row.label : null"
+            [attr.aria-describedby]="direct() ? helpId : null">
           <div class="ul-row">
             <div class="ul-content">
               @if (rowTemplate(); as tpl) {
@@ -29816,12 +30455,12 @@ i0.ɵɵngDeclareClassMetadata({
                 {{ row.label }}
               }
             </div>
-            @if (reorderable()) {
+            @if (showControls()) {
               <div class="ul-controls">
-                <ui-button variant="icon" data-move="up" [ariaLabel]="row.upLabel" [disabled]="disabled() || row.first">
+                <ui-button variant="icon" data-move="up" [ariaLabel]="row.earlierLabel" [disabled]="disabled() || row.first">
                   <svg 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 d="M18 15l-6-6-6 6"/></svg>
                 </ui-button>
-                <ui-button variant="icon" data-move="down" [ariaLabel]="row.downLabel" [disabled]="disabled() || row.last">
+                <ui-button variant="icon" data-move="down" [ariaLabel]="row.laterLabel" [disabled]="disabled() || row.last">
                   <svg 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 d="M6 9l6 6 6-6"/></svg>
                 </ui-button>
               </div>
@@ -29833,15 +30472,19 @@ i0.ɵɵngDeclareClassMetadata({
 
     @if (rows().length) {
       @if (ordered()) {
-        <ol class="ul-list ul-list--ordered" role="list"
+        <ol class="ul-list ul-list--ordered" role="list" [class.ul-list--grid]="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)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ol>
       } @else {
-        <ul class="ul-list ul-list--unordered" role="list"
+        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="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)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ul>
       }
@@ -29849,11 +30492,14 @@ i0.ɵɵngDeclareClassMetadata({
       <ng-content select="[list-empty]" />
     }
 
+    @if (direct() && rows().length) {
+      <span class="ul-sr" [id]="helpId">{{ helpText() }}</span>
+    }
     @if (reorderable()) {
-      <div class="ul-sr" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
+      <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
-			styles: [":host{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-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}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}@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}}.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: [":host{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-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-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}:host ::ng-deep .ul-item--draggable img,:host ::ng-deep .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: {
@@ -29873,6 +30519,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		gridMin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gridMin",
+				required: false
+			}]
+		}],
+		gap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gap",
+				required: false
+			}]
+		}],
 		reorderable: [{
 			type: i0.Input,
 			args: [{
@@ -29889,6 +30559,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		moveControls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveControls",
+				required: false
+			}]
+		}],
+		dragDrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dragDrop",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -29921,13 +30607,49 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		reorder: [{
-			type: i0.Output,
-			args: ["reorder"]
+		moveEarlierLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveEarlierLabel",
+				required: false
+			}]
 		}],
-		rowTemplate: [{
-			type: i0.ContentChild,
-			args: [i0.forwardRef(() => TemplateRef), { isSignal: true }]
+		moveLaterLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveLaterLabel",
+				required: false
+			}]
+		}],
+		helpText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helpText",
+				required: false
+			}]
+		}],
+		moveAnnouncement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveAnnouncement",
+				required: false
+			}]
+		}],
+		itemsChange: [{
+			type: i0.Output,
+			args: ["itemsChange"]
+		}],
+		reorder: [{
+			type: i0.Output,
+			args: ["reorder"]
+		}],
+		rowTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => TemplateRef), { isSignal: true }]
 		}]
 	}
 });
@@ -32535,450 +33257,55 @@ var IconComponent = class IconComponent {
 					transformFunction: null
 				},
 				disabled: {
-					classPropertyName: "disabled",
-					publicName: "disabled",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				loading: {
-					classPropertyName: "loading",
-					publicName: "loading",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				interactive: {
-					classPropertyName: "interactive",
-					publicName: "interactive",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				}
-			},
-			outputs: { iconClick: "iconClick" },
-			ngImport: i0,
-			template: `
-    @if (interactive()) {
-      <button type="button" class="icon-btn" [class.danger]="variant() === 'danger'"
-        [class.loading]="loading()" [disabled]="disabled() || loading()" [attr.aria-busy]="loading() ? 'true' : null"
-        [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" (click)="onClick($event)">
-        <ng-container *ngTemplateOutlet="glyph" />
-      </button>
-    } @else {
-      <span class="icon-static" [class.danger]="variant() === 'danger'" [attr.aria-busy]="loading() ? 'true' : null"
-        [attr.role]="accessibleName() ? 'img' : null" [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" [attr.aria-hidden]="accessibleName() ? null : 'true'">
-        <ng-container *ngTemplateOutlet="glyph" />
-      </span>
-    }
-    <ng-template #glyph>
-      @if (loading()) {
-        <span class="spinner" [style.width.px]="size()" [style.height.px]="size()" aria-hidden="true"></span>
-      } @else if (path(); as d) {
-        <svg viewBox="0 0 24 24" [attr.width]="size()" [attr.height]="size()" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
-          <path [attr.d]="d" />
-        </svg>
-      }
-    </ng-template>
-  `,
-			isInline: true,
-			styles: [":host{display:inline-flex}.icon-static{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon-static.danger{color:#b91c1c}.icon-static svg{display:block}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:#475569;cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit;transition:background .15s ease,color .15s ease}.icon-btn:hover:not(:disabled){background:#f1f5f9;color:#0f172a}.icon-btn.danger{color:#b91c1c}.icon-btn.danger:hover:not(:disabled){background:#fef2f2;color:#991b1b}.icon-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn.loading:disabled{opacity:1;cursor:progress}.spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:ui-icon-spin .6s linear infinite}@keyframes ui-icon-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}.icon-btn:after{content:\"\";position:absolute;inset:-8px}\n"],
-			dependencies: [{
-				kind: "directive",
-				type: NgTemplateOutlet,
-				selector: "[ngTemplateOutlet]",
-				inputs: [
-					"ngTemplateOutletContext",
-					"ngTemplateOutlet",
-					"ngTemplateOutletInjector"
-				]
-			}, {
-				kind: "directive",
-				type: TooltipDirective,
-				selector: "[uiTooltip]",
-				inputs: ["uiTooltip", "tooltipPosition"]
-			}],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: IconComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ui-icon",
-			standalone: true,
-			imports: [NgTemplateOutlet, TooltipDirective],
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `
-    @if (interactive()) {
-      <button type="button" class="icon-btn" [class.danger]="variant() === 'danger'"
-        [class.loading]="loading()" [disabled]="disabled() || loading()" [attr.aria-busy]="loading() ? 'true' : null"
-        [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" (click)="onClick($event)">
-        <ng-container *ngTemplateOutlet="glyph" />
-      </button>
-    } @else {
-      <span class="icon-static" [class.danger]="variant() === 'danger'" [attr.aria-busy]="loading() ? 'true' : null"
-        [attr.role]="accessibleName() ? 'img' : null" [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" [attr.aria-hidden]="accessibleName() ? null : 'true'">
-        <ng-container *ngTemplateOutlet="glyph" />
-      </span>
-    }
-    <ng-template #glyph>
-      @if (loading()) {
-        <span class="spinner" [style.width.px]="size()" [style.height.px]="size()" aria-hidden="true"></span>
-      } @else if (path(); as d) {
-        <svg viewBox="0 0 24 24" [attr.width]="size()" [attr.height]="size()" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
-          <path [attr.d]="d" />
-        </svg>
-      }
-    </ng-template>
-  `,
-			styles: [":host{display:inline-flex}.icon-static{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon-static.danger{color:#b91c1c}.icon-static svg{display:block}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:#475569;cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit;transition:background .15s ease,color .15s ease}.icon-btn:hover:not(:disabled){background:#f1f5f9;color:#0f172a}.icon-btn.danger{color:#b91c1c}.icon-btn.danger:hover:not(:disabled){background:#fef2f2;color:#991b1b}.icon-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn.loading:disabled{opacity:1;cursor:progress}.spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:ui-icon-spin .6s linear infinite}@keyframes ui-icon-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}.icon-btn:after{content:\"\";position:absolute;inset:-8px}\n"]
-		}]
-	}],
-	propDecorators: {
-		name: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "name",
-				required: true
-			}]
-		}],
-		tooltip: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "tooltip",
-				required: false
-			}]
-		}],
-		ariaLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "ariaLabel",
-				required: false
-			}]
-		}],
-		size: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "size",
-				required: false
-			}]
-		}],
-		variant: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "variant",
-				required: false
-			}]
-		}],
-		disabled: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "disabled",
-				required: false
-			}]
-		}],
-		loading: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "loading",
-				required: false
-			}]
-		}],
-		interactive: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "interactive",
-				required: false
-			}]
-		}],
-		iconClick: [{
-			type: i0.Output,
-			args: ["iconClick"]
-		}]
-	}
-});
-var SortableItemDirective = class SortableItemDirective {
-	constructor() {
-		this.template = inject(TemplateRef);
-	}
-	static ngTemplateContextGuard(_dir, _ctx) {
-		return true;
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: SortableItemDirective,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Directive
-		});
-	}
-	static {
-		this.ɵdir = i0.ɵɵngDeclareDirective({
-			minVersion: "14.0.0",
-			version: "22.2.2",
-			type: SortableItemDirective,
-			isStandalone: true,
-			selector: "ng-template[uiSortableItem]",
-			ngImport: i0
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: SortableItemDirective,
-	decorators: [{
-		type: Directive,
-		args: [{
-			selector: "ng-template[uiSortableItem]",
-			standalone: true
-		}]
-	}]
-});
-let nextId$2 = 0;
-var SortableListComponent = class SortableListComponent {
-	constructor() {
-		this.items = model([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
-		this.sortable = input(false, ...ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []);
-		this.layout = input("list", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
-		this.gridMin = input(130, ...ngDevMode ? [{ debugName: "gridMin" }] : /* istanbul ignore next */ []);
-		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
-		this.itemLabel = input((_item, index) => `Item ${index + 1}`, ...ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []);
-		this.moveControls = input(false, ...ngDevMode ? [{ debugName: "moveControls" }] : /* istanbul ignore next */ []);
-		this.moveEarlierLabel = input("Move earlier", ...ngDevMode ? [{ debugName: "moveEarlierLabel" }] : /* istanbul ignore next */ []);
-		this.moveLaterLabel = input("Move later", ...ngDevMode ? [{ debugName: "moveLaterLabel" }] : /* istanbul ignore next */ []);
-		this.helpText = input("Hold Shift and press the arrow keys to move this item. Shift plus Home or End moves it to the start or end.", ...ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []);
-		this.moveAnnouncement = input((label, position, total) => `${label} moved to position ${position} of ${total}`, ...ngDevMode ? [{ debugName: "moveAnnouncement" }] : /* istanbul ignore next */ []);
-		this.orderChange = output();
-		this.itemTemplate = contentChild.required(SortableItemDirective, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
-		this._helpId = `sl-help-${nextId$2++}`;
-		this._dragIndex = signal(null, ...ngDevMode ? [{ debugName: "_dragIndex" }] : /* istanbul ignore next */ []);
-		this._overIndex = signal(null, ...ngDevMode ? [{ debugName: "_overIndex" }] : /* istanbul ignore next */ []);
-		this._announcement = signal("", ...ngDevMode ? [{ debugName: "_announcement" }] : /* istanbul ignore next */ []);
-		this._count = computed(() => this.items().length, ...ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []);
-	}
-	move(from, to) {
-		const list = this.items();
-		if (!this.sortable() || from < 0 || from >= list.length) return;
-		const target = Math.max(0, Math.min(list.length - 1, to));
-		if (target === from) return;
-		const next = [...list];
-		const [item] = next.splice(from, 1);
-		next.splice(target, 0, item);
-		this.items.set(next);
-		this._announcement.set(this.moveAnnouncement()(this.itemLabel()(item, target), target + 1, next.length));
-		this.orderChange.emit({
-			item,
-			from,
-			to: target,
-			items: next
-		});
-	}
-	onDragStart(event, index) {
-		if (!this.sortable()) return;
-		this._dragIndex.set(index);
-		if (event.dataTransfer) {
-			event.dataTransfer.effectAllowed = "move";
-			event.dataTransfer.setData("text/plain", String(index));
-		}
-	}
-	onDragOver(event, index) {
-		if (!this.sortable() || this._dragIndex() === null) return;
-		event.preventDefault();
-		if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
-		this._overIndex.set(index);
-	}
-	onDrop(event, index) {
-		const from = this._dragIndex();
-		if (!this.sortable() || from === null) return;
-		event.preventDefault();
-		this.onDragEnd();
-		this.move(from, index);
-	}
-	onDragEnd() {
-		this._dragIndex.set(null);
-		this._overIndex.set(null);
-	}
-	onKeydown(event, index) {
-		if (!this.sortable() || event.target !== event.currentTarget || !event.shiftKey) return;
-		let to = null;
-		switch (event.key) {
-			case "ArrowUp":
-			case "ArrowLeft":
-				to = index - 1;
-				break;
-			case "ArrowDown":
-			case "ArrowRight":
-				to = index + 1;
-				break;
-			case "Home":
-				to = 0;
-				break;
-			case "End": to = this._count() - 1;
-		}
-		if (to === null) return;
-		event.preventDefault();
-		this.move(index, to);
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: SortableListComponent,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Component
-		});
-	}
-	static {
-		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.0.0",
-			version: "22.2.2",
-			type: SortableListComponent,
-			isStandalone: true,
-			selector: "ui-sortable-list",
-			inputs: {
-				items: {
-					classPropertyName: "items",
-					publicName: "items",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				sortable: {
-					classPropertyName: "sortable",
-					publicName: "sortable",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				layout: {
-					classPropertyName: "layout",
-					publicName: "layout",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				gridMin: {
-					classPropertyName: "gridMin",
-					publicName: "gridMin",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				ariaLabel: {
-					classPropertyName: "ariaLabel",
-					publicName: "ariaLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				itemLabel: {
-					classPropertyName: "itemLabel",
-					publicName: "itemLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				moveControls: {
-					classPropertyName: "moveControls",
-					publicName: "moveControls",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				moveEarlierLabel: {
-					classPropertyName: "moveEarlierLabel",
-					publicName: "moveEarlierLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				moveLaterLabel: {
-					classPropertyName: "moveLaterLabel",
-					publicName: "moveLaterLabel",
+					classPropertyName: "disabled",
+					publicName: "disabled",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				helpText: {
-					classPropertyName: "helpText",
-					publicName: "helpText",
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				moveAnnouncement: {
-					classPropertyName: "moveAnnouncement",
-					publicName: "moveAnnouncement",
+				interactive: {
+					classPropertyName: "interactive",
+					publicName: "interactive",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				}
 			},
-			outputs: {
-				items: "itemsChange",
-				orderChange: "orderChange"
-			},
-			queries: [{
-				propertyName: "itemTemplate",
-				first: true,
-				predicate: SortableItemDirective,
-				descendants: true,
-				isSignal: true
-			}],
+			outputs: { iconClick: "iconClick" },
 			ngImport: i0,
 			template: `
-    <div class="sl" [class.sl-grid]="layout() === 'grid'" [style.--sl-min.px]="gridMin()" role="list" [attr.aria-label]="ariaLabel() || null">
-      @for (item of items(); track item; let i = $index; let first = $first; let last = $last) {
-        <div class="sl-item" role="listitem"
-          [class.sl-sortable]="sortable()"
-          [class.sl-dragging]="_dragIndex() === i"
-          [class.sl-over]="_overIndex() === i && _dragIndex() !== null && _dragIndex() !== i"
-          [attr.draggable]="sortable() ? 'true' : null"
-          [attr.tabindex]="sortable() ? 0 : null"
-          [attr.aria-roledescription]="sortable() ? 'sortable item' : null"
-          [attr.aria-label]="sortable() ? itemLabel()(item, i) : null"
-          [attr.aria-describedby]="sortable() ? _helpId : null"
-          (dragstart)="onDragStart($event, i)" (dragover)="onDragOver($event, i)" (drop)="onDrop($event, i)" (dragend)="onDragEnd()"
-          (keydown)="onKeydown($event, i)">
-          <ng-container [ngTemplateOutlet]="itemTemplate().template"
-            [ngTemplateOutletContext]="{ $implicit: item, index: i, first: first, last: last, dragging: _dragIndex() === i }" />
-          @if (sortable() && moveControls()) {
-            <div class="sl-move">
-              <ui-icon name="chevron-up" [size]="16" [disabled]="first" [tooltip]="moveEarlierLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i - 1)" />
-              <ui-icon name="chevron-down" [size]="16" [disabled]="last" [tooltip]="moveLaterLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i + 1)" />
-            </div>
-          }
-        </div>
-      }
-    </div>
-    @if (sortable()) {
-      <span class="sl-sr" [id]="_helpId">{{ helpText() }}</span>
+    @if (interactive()) {
+      <button type="button" class="icon-btn" [class.danger]="variant() === 'danger'"
+        [class.loading]="loading()" [disabled]="disabled() || loading()" [attr.aria-busy]="loading() ? 'true' : null"
+        [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" (click)="onClick($event)">
+        <ng-container *ngTemplateOutlet="glyph" />
+      </button>
+    } @else {
+      <span class="icon-static" [class.danger]="variant() === 'danger'" [attr.aria-busy]="loading() ? 'true' : null"
+        [attr.role]="accessibleName() ? 'img' : null" [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" [attr.aria-hidden]="accessibleName() ? null : 'true'">
+        <ng-container *ngTemplateOutlet="glyph" />
+      </span>
     }
-    <span class="sl-sr" role="status" aria-live="polite">{{ _announcement() }}</span>
+    <ng-template #glyph>
+      @if (loading()) {
+        <span class="spinner" [style.width.px]="size()" [style.height.px]="size()" aria-hidden="true"></span>
+      } @else if (path(); as d) {
+        <svg viewBox="0 0 24 24" [attr.width]="size()" [attr.height]="size()" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path [attr.d]="d" />
+        </svg>
+      }
+    </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:12px}.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sl-min, 130px),1fr));gap:12px}.sl-item{position:relative;min-width:0}.sl-sortable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.sl-sortable{cursor:grab}.sl-sortable:active{cursor:grabbing}}.sl-sortable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}:host ::ng-deep .sl-sortable img,:host ::ng-deep .sl-sortable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.sl-dragging{opacity:.5}.sl-over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}.sl-move{display:flex;justify-content:center;gap:4px;margin-top:6px}.sl-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: [":host{display:inline-flex}.icon-static{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon-static.danger{color:#b91c1c}.icon-static svg{display:block}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:#475569;cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit;transition:background .15s ease,color .15s ease}.icon-btn:hover:not(:disabled){background:#f1f5f9;color:#0f172a}.icon-btn.danger{color:#b91c1c}.icon-btn.danger:hover:not(:disabled){background:#fef2f2;color:#991b1b}.icon-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn.loading:disabled{opacity:1;cursor:progress}.spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:ui-icon-spin .6s linear infinite}@keyframes ui-icon-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}.icon-btn:after{content:\"\";position:absolute;inset:-8px}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -32989,20 +33316,10 @@ var SortableListComponent = class SortableListComponent {
 					"ngTemplateOutletInjector"
 				]
 			}, {
-				kind: "component",
-				type: IconComponent,
-				selector: "ui-icon",
-				inputs: [
-					"name",
-					"tooltip",
-					"ariaLabel",
-					"size",
-					"variant",
-					"disabled",
-					"loading",
-					"interactive"
-				],
-				outputs: ["iconClick"]
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[uiTooltip]",
+				inputs: ["uiTooltip", "tooltipPosition"]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -33012,80 +33329,55 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: SortableListComponent,
+	type: IconComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-sortable-list",
+			selector: "ui-icon",
 			standalone: true,
+			imports: [NgTemplateOutlet, TooltipDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			imports: [NgTemplateOutlet, IconComponent],
 			template: `
-    <div class="sl" [class.sl-grid]="layout() === 'grid'" [style.--sl-min.px]="gridMin()" role="list" [attr.aria-label]="ariaLabel() || null">
-      @for (item of items(); track item; let i = $index; let first = $first; let last = $last) {
-        <div class="sl-item" role="listitem"
-          [class.sl-sortable]="sortable()"
-          [class.sl-dragging]="_dragIndex() === i"
-          [class.sl-over]="_overIndex() === i && _dragIndex() !== null && _dragIndex() !== i"
-          [attr.draggable]="sortable() ? 'true' : null"
-          [attr.tabindex]="sortable() ? 0 : null"
-          [attr.aria-roledescription]="sortable() ? 'sortable item' : null"
-          [attr.aria-label]="sortable() ? itemLabel()(item, i) : null"
-          [attr.aria-describedby]="sortable() ? _helpId : null"
-          (dragstart)="onDragStart($event, i)" (dragover)="onDragOver($event, i)" (drop)="onDrop($event, i)" (dragend)="onDragEnd()"
-          (keydown)="onKeydown($event, i)">
-          <ng-container [ngTemplateOutlet]="itemTemplate().template"
-            [ngTemplateOutletContext]="{ $implicit: item, index: i, first: first, last: last, dragging: _dragIndex() === i }" />
-          @if (sortable() && moveControls()) {
-            <div class="sl-move">
-              <ui-icon name="chevron-up" [size]="16" [disabled]="first" [tooltip]="moveEarlierLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i - 1)" />
-              <ui-icon name="chevron-down" [size]="16" [disabled]="last" [tooltip]="moveLaterLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i + 1)" />
-            </div>
-          }
-        </div>
-      }
-    </div>
-    @if (sortable()) {
-      <span class="sl-sr" [id]="_helpId">{{ helpText() }}</span>
+    @if (interactive()) {
+      <button type="button" class="icon-btn" [class.danger]="variant() === 'danger'"
+        [class.loading]="loading()" [disabled]="disabled() || loading()" [attr.aria-busy]="loading() ? 'true' : null"
+        [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" (click)="onClick($event)">
+        <ng-container *ngTemplateOutlet="glyph" />
+      </button>
+    } @else {
+      <span class="icon-static" [class.danger]="variant() === 'danger'" [attr.aria-busy]="loading() ? 'true' : null"
+        [attr.role]="accessibleName() ? 'img' : null" [attr.aria-label]="accessibleName() || null" [uiTooltip]="tooltip()" [attr.aria-hidden]="accessibleName() ? null : 'true'">
+        <ng-container *ngTemplateOutlet="glyph" />
+      </span>
     }
-    <span class="sl-sr" role="status" aria-live="polite">{{ _announcement() }}</span>
+    <ng-template #glyph>
+      @if (loading()) {
+        <span class="spinner" [style.width.px]="size()" [style.height.px]="size()" aria-hidden="true"></span>
+      } @else if (path(); as d) {
+        <svg viewBox="0 0 24 24" [attr.width]="size()" [attr.height]="size()" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path [attr.d]="d" />
+        </svg>
+      }
+    </ng-template>
   `,
-			styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:12px}.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sl-min, 130px),1fr));gap:12px}.sl-item{position:relative;min-width:0}.sl-sortable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.sl-sortable{cursor:grab}.sl-sortable:active{cursor:grabbing}}.sl-sortable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}:host ::ng-deep .sl-sortable img,:host ::ng-deep .sl-sortable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.sl-dragging{opacity:.5}.sl-over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}.sl-move{display:flex;justify-content:center;gap:4px;margin-top:6px}.sl-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: [":host{display:inline-flex}.icon-static{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon-static.danger{color:#b91c1c}.icon-static svg{display:block}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:#475569;cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit;transition:background .15s ease,color .15s ease}.icon-btn:hover:not(:disabled){background:#f1f5f9;color:#0f172a}.icon-btn.danger{color:#b91c1c}.icon-btn.danger:hover:not(:disabled){background:#fef2f2;color:#991b1b}.icon-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn.loading:disabled{opacity:1;cursor:progress}.spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:ui-icon-spin .6s linear infinite}@keyframes ui-icon-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}.icon-btn:after{content:\"\";position:absolute;inset:-8px}\n"]
 		}]
 	}],
 	propDecorators: {
-		items: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "items",
-				required: false
-			}]
-		}, {
-			type: i0.Output,
-			args: ["itemsChange"]
-		}],
-		sortable: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "sortable",
-				required: false
-			}]
-		}],
-		layout: [{
+		name: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "layout",
-				required: false
+				alias: "name",
+				required: true
 			}]
 		}],
-		gridMin: [{
+		tooltip: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "gridMin",
+				alias: "tooltip",
 				required: false
 			}]
 		}],
@@ -33097,61 +33389,49 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		itemLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "itemLabel",
-				required: false
-			}]
-		}],
-		moveControls: [{
+		size: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "moveControls",
+				alias: "size",
 				required: false
 			}]
 		}],
-		moveEarlierLabel: [{
+		variant: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "moveEarlierLabel",
+				alias: "variant",
 				required: false
 			}]
 		}],
-		moveLaterLabel: [{
+		disabled: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "moveLaterLabel",
+				alias: "disabled",
 				required: false
 			}]
 		}],
-		helpText: [{
+		loading: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "helpText",
+				alias: "loading",
 				required: false
 			}]
 		}],
-		moveAnnouncement: [{
+		interactive: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "moveAnnouncement",
+				alias: "interactive",
 				required: false
 			}]
 		}],
-		orderChange: [{
+		iconClick: [{
 			type: i0.Output,
-			args: ["orderChange"]
-		}],
-		itemTemplate: [{
-			type: i0.ContentChild,
-			args: [i0.forwardRef(() => SortableItemDirective), { isSignal: true }]
+			args: ["iconClick"]
 		}]
 	}
 });
@@ -33167,6 +33447,14 @@ 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.progress = input(null, ...ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []);
+		this.progressMax = input(100, ...ngDevMode ? [{ debugName: "progressMax" }] : /* istanbul ignore next */ []);
+		this.progressSize = input(58, ...ngDevMode ? [{ debugName: "progressSize" }] : /* istanbul ignore next */ []);
+		this.progressStrokeWidth = input(5, ...ngDevMode ? [{ debugName: "progressStrokeWidth" }] : /* istanbul ignore next */ []);
+		this.progressVariant = input(null, ...ngDevMode ? [{ debugName: "progressVariant" }] : /* istanbul ignore next */ []);
+		this.progressAriaLabel = input("", ...ngDevMode ? [{ debugName: "progressAriaLabel" }] : /* istanbul ignore next */ []);
+		this.progressValueText = input("", ...ngDevMode ? [{ debugName: "progressValueText" }] : /* istanbul ignore next */ []);
+		this.hasProgress = computed(() => this.progress() !== null && this.progress() !== void 0, ...ngDevMode ? [{ debugName: "hasProgress" }] : /* istanbul ignore next */ []);
 		this.iconSvg = computed(() => {
 			const svg = KPI_ICONS[this.icon()];
 			return svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;
@@ -33250,6 +33538,55 @@ var KpiCardComponent = class KpiCardComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				progress: {
+					classPropertyName: "progress",
+					publicName: "progress",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressMax: {
+					classPropertyName: "progressMax",
+					publicName: "progressMax",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressSize: {
+					classPropertyName: "progressSize",
+					publicName: "progressSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressStrokeWidth: {
+					classPropertyName: "progressStrokeWidth",
+					publicName: "progressStrokeWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressVariant: {
+					classPropertyName: "progressVariant",
+					publicName: "progressVariant",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressAriaLabel: {
+					classPropertyName: "progressAriaLabel",
+					publicName: "progressAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressValueText: {
+					classPropertyName: "progressValueText",
+					publicName: "progressValueText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: {
@@ -33268,20 +33605,46 @@ var KpiCardComponent = class KpiCardComponent {
       @if (iconSvg()) {
         <div [class]="'kpi-icon ' + color() + '-icon'" aria-hidden="true" [innerHTML]="iconSvg()"></div>
       }
-      <span class="kpi-label">{{ label() }}</span>
+      @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()"
+                            [variant]="progressVariant()" [ariaLabel]="progressAriaLabel() || (label() + ' progress')" [valueText]="progressValueText()" />
+        </div>
+      } @else {
+        <span class="kpi-label">{{ label() }}</span>
+      }
       <span class="kpi-value"
             [class.green-value]="highlight() || valueColor() === 'green'"
             [class.blue-value]="valueColor() === 'blue'">{{ value() }}</span>
       @if (subtitle()) {
         <span class="kpi-subtitle">{{ subtitle() }}</span>
       }
+      <ng-content select="[kpi-footer]" />
       @if (clickable()) {
         <svg class="kpi-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
       }
     </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-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-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-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-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"],
+			dependencies: [{
+				kind: "component",
+				type: ProgressRingComponent,
+				selector: "ui-progress-ring",
+				inputs: [
+					"value",
+					"max",
+					"size",
+					"strokeWidth",
+					"variant",
+					"label",
+					"showValue",
+					"ariaLabel",
+					"ariaLabelledby",
+					"valueText"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -33296,6 +33659,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-kpi-card",
 			standalone: true,
+			imports: [ProgressRingComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"[attr.role]": "clickable() ? \"button\" : null",
@@ -33308,19 +33672,28 @@ i0.ɵɵngDeclareClassMetadata({
       @if (iconSvg()) {
         <div [class]="'kpi-icon ' + color() + '-icon'" aria-hidden="true" [innerHTML]="iconSvg()"></div>
       }
-      <span class="kpi-label">{{ label() }}</span>
+      @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()"
+                            [variant]="progressVariant()" [ariaLabel]="progressAriaLabel() || (label() + ' progress')" [valueText]="progressValueText()" />
+        </div>
+      } @else {
+        <span class="kpi-label">{{ label() }}</span>
+      }
       <span class="kpi-value"
             [class.green-value]="highlight() || valueColor() === 'green'"
             [class.blue-value]="valueColor() === 'blue'">{{ value() }}</span>
       @if (subtitle()) {
         <span class="kpi-subtitle">{{ subtitle() }}</span>
       }
+      <ng-content select="[kpi-footer]" />
       @if (clickable()) {
         <svg class="kpi-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
       }
     </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-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-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-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-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -33387,6 +33760,62 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "valueColor",
 				required: false
 			}]
+		}],
+		progress: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progress",
+				required: false
+			}]
+		}],
+		progressMax: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressMax",
+				required: false
+			}]
+		}],
+		progressSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressSize",
+				required: false
+			}]
+		}],
+		progressStrokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressStrokeWidth",
+				required: false
+			}]
+		}],
+		progressVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressVariant",
+				required: false
+			}]
+		}],
+		progressAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressAriaLabel",
+				required: false
+			}]
+		}],
+		progressValueText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressValueText",
+				required: false
+			}]
 		}]
 	}
 });
@@ -36918,21 +37347,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const LAYOUT_GAP_PX = {
-	none: 0,
-	xs: 4,
-	sm: 8,
-	md: 16,
-	lg: 24,
-	xl: 32
-};
-const CSS_LENGTH = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
-function resolveLayoutGap(gap, fallback) {
-	const v = (gap ?? "").trim();
-	if (Object.prototype.hasOwnProperty.call(LAYOUT_GAP_PX, v)) return `${LAYOUT_GAP_PX[v]}px`;
-	if (v && CSS_LENGTH.test(v)) return v;
-	return `${LAYOUT_GAP_PX[fallback]}px`;
-}
 var ColumnsComponent = class ColumnsComponent {
 	constructor() {
 		this.count = input(2, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
@@ -37386,6 +37800,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DEFAULT_SIGNING_OPTIONS, DOCUMENT_PROVIDER_OPTIONS, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentMergeCheckComponent, DocumentSendOptionsComponent, DocumentSignersComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, MAX_CC, MERGE_CHECK_DEBOUNCE_MS, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SIGNER_ROLES, SIGNER_ROLE_LABEL_DEFAULT, SIGNING_LIMITS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, SortableItemDirective, SortableListComponent, StackComponent, StepperComponent, TableToolbarComponent, TemplatePickerComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, acceptLabel, appShellGroupsStorageKey, appendVideoLink, applyVideoLine, autoVariant, buildDefaultSchedule, buildSigners, buildVideoLink, builtInActionIcon, businessTimeOptions, countersignLine, countersignPlaceLabel, createFieldReveal, decodeFilterValues, describeDocumentSigners, digitsOnly, effectiveRoles, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, forwardContext, getEligibleIds, getEligibleOptions, getErrorMessage, hasMappedDataFields, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, mergeFieldText, mergeWarningLines, messagePreviewHtml, normalizeHexColor, normalizeRoles, parseBizHours, parseCcList, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, roleNumber, sendExistingEnvelope, serializeBizHours, signerProblems, signerRoleLabel, stripVideoLink, suggestDocumentSubject, videoMessageLine };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DEFAULT_SIGNING_OPTIONS, DOCUMENT_PROVIDER_OPTIONS, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentMergeCheckComponent, DocumentSendOptionsComponent, DocumentSignersComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, MAX_CC, MERGE_CHECK_DEBOUNCE_MS, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SIGNER_ROLES, SIGNER_ROLE_LABEL_DEFAULT, SIGNING_LIMITS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, StackComponent, StepperComponent, TableToolbarComponent, TemplatePickerComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, acceptLabel, appShellGroupsStorageKey, appendVideoLink, applyVideoLine, autoVariant, buildDefaultSchedule, buildSigners, buildVideoLink, builtInActionIcon, businessTimeOptions, countersignLine, countersignPlaceLabel, createFieldReveal, decodeFilterValues, describeDocumentSigners, digitsOnly, effectiveRoles, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, forwardContext, getEligibleIds, getEligibleOptions, getErrorMessage, hasMappedDataFields, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, mergeFieldText, mergeWarningLines, messagePreviewHtml, normalizeHexColor, normalizeRoles, parseBizHours, parseCcList, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, roleNumber, sendExistingEnvelope, serializeBizHours, signerProblems, signerRoleLabel, stripVideoLink, suggestDocumentSubject, videoMessageLine };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map