@area8975/ui 0.1.0 → 0.1.1-dev.11

package/fesm2022/area8975-ui.mjs

@@ -56,7 +56,9 @@ var UiAxisChartBase = class UiAxisChartBase {
 	});
 	options = input(null, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 	highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
+	legend = input("auto", ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
 	hiddenSeries = signal([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
+	emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
 	supportsDashes = false;
 	isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
 	isMuted = computed(() => {
@@ -185,6 +187,13 @@ var UiAxisChartBase = class UiAxisChartBase {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		ngImport: i0
@@ -284,6 +293,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "highlight",
 				required: false
 			}]
+		}],
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
 		}]
 	}
 });
@@ -498,7 +515,9 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 var UiChartLegendComponent = class UiChartLegendComponent {
-	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	note = input("", ...ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []);
+	for = input(null, ...ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []);
 	hidden = model([], ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
 	toggleable = input(false, {
 		...ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {},
@@ -508,11 +527,17 @@ var UiChartLegendComponent = class UiChartLegendComponent {
 	hovered = signal(null, ...ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []);
 	focused = signal(null, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
 	pointedAt = computed(() => this.hovered() ?? this.focused(), ...ngDevMode ? [{ debugName: "pointedAt" }] : /* istanbul ignore next */ []);
-	visibleCount = computed(() => this.items().filter((item) => !this.hidden().includes(item.name)).length, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
+	shownItems = computed(() => this.for()?.legendItems() ?? this.items(), ...ngDevMode ? [{ debugName: "shownItems" }] : /* istanbul ignore next */ []);
+	shownNote = computed(() => this.for()?.legendNote() ?? this.note(), ...ngDevMode ? [{ debugName: "shownNote" }] : /* istanbul ignore next */ []);
+	hiddenNames = computed(() => this.for()?.hiddenSeries() ?? this.hidden(), ...ngDevMode ? [{ debugName: "hiddenNames" }] : /* istanbul ignore next */ []);
+	visibleCount = computed(() => this.shownItems().filter((item) => !this.hiddenNames().includes(item.name)).length, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
 	constructor() {
 		effect(() => {
 			const name = this.pointedAt();
-			untracked(() => this.focusChange.emit(name));
+			untracked(() => {
+				this.for()?.emphasis.set(name);
+				this.focusChange.emit(name);
+			});
 		});
 	}
 	hover(name) {
@@ -522,14 +547,18 @@ var UiChartLegendComponent = class UiChartLegendComponent {
 		this.focused.set(name);
 	}
 	isHidden(item) {
-		return this.hidden().includes(item.name);
+		return this.hiddenNames().includes(item.name);
 	}
 	isLocked(item) {
 		return !this.isHidden(item) && this.visibleCount() === 1;
 	}
 	toggle(item) {
 		if (this.isLocked(item)) return;
-		this.hidden.update((hidden) => hidden.includes(item.name) ? hidden.filter((name) => name !== item.name) : [...hidden, item.name]);
+		const hidden = this.hiddenNames();
+		const next = hidden.includes(item.name) ? hidden.filter((name) => name !== item.name) : [...hidden, item.name];
+		const source = this.for();
+		if (source) source.hiddenSeries.set(next);
+		else this.hidden.set(next);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -550,7 +579,21 @@ var UiChartLegendComponent = class UiChartLegendComponent {
 				classPropertyName: "items",
 				publicName: "items",
 				isSignal: true,
-				isRequired: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			note: {
+				classPropertyName: "note",
+				publicName: "note",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			for: {
+				classPropertyName: "for",
+				publicName: "for",
+				isSignal: true,
+				isRequired: false,
 				transformFunction: null
 			},
 			hidden: {
@@ -573,8 +616,8 @@ var UiChartLegendComponent = class UiChartLegendComponent {
 			focusChange: "focusChange"
 		},
 		ngImport: i0,
-		template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of items(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n",
-		styles: ["@layer properties;.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--color-gray-800, oklch(27.8% .033 256.848))}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--color-gray-100, oklch(96.7% .003 264.542))}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--color-gray-500, oklch(55.1% .027 264.364))}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
+		styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--color-gray-800, oklch(27.8% .033 256.848))}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--color-gray-100, oklch(96.7% .003 264.542))}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--color-gray-500, oklch(55.1% .027 264.364))}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -586,8 +629,8 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ui-chart-legend",
-			template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of items(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n",
-			styles: ["@layer properties;.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--color-gray-800, oklch(27.8% .033 256.848))}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--color-gray-100, oklch(96.7% .003 264.542))}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--color-gray-500, oklch(55.1% .027 264.364))}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
+			styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--color-gray-800, oklch(27.8% .033 256.848))}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--color-gray-100, oklch(96.7% .003 264.542))}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--color-gray-500, oklch(55.1% .027 264.364))}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -597,7 +640,23 @@ i0.ɵɵngDeclareClassMetadata({
 			args: [{
 				isSignal: true,
 				alias: "items",
-				required: true
+				required: false
+			}]
+		}],
+		note: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "note",
+				required: false
+			}]
+		}],
+		for: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "for",
+				required: false
 			}]
 		}],
 		hidden: [{
@@ -657,7 +716,10 @@ var UiChartComponent = class UiChartComponent {
 		});
 		effect(() => {
 			const chart = this.chart();
-			if (chart) this.applyHidden(chart);
+			if (chart) {
+				this.applyHidden(chart);
+				this.applyEmphasis();
+			}
 		});
 		inject(DestroyRef).onDestroy(() => {
 			this.destroyed = true;
@@ -673,16 +735,18 @@ var UiChartComponent = class UiChartComponent {
 		}
 	}
 	applyEmphasis() {
-		const emphasis = untracked(this.emphasis);
 		const names = this.seriesNames();
+		const emphasis = untracked(this.emphasis);
+		const active = emphasis && names.includes(emphasis) && !untracked(this.hiddenSeries).includes(emphasis) ? emphasis : null;
 		const groups = this.canvas().nativeElement.querySelectorAll(".apexcharts-series[data\\:realIndex]");
 		for (const group of groups) {
 			const name = names[Number(group.getAttribute("data:realIndex"))];
-			group.classList.toggle("ui-chart-series--faded", !!emphasis && name !== emphasis);
+			group.classList.toggle("ui-chart-series--faded", !!active && name !== active);
 		}
 	}
 	seriesNames() {
-		return (untracked(this.options).series ?? []).map((item) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : null);
+		const { series = [], labels = [] } = untracked(this.options);
+		return series.map((item, index) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : labels[index] ?? null);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -1027,7 +1091,11 @@ var UiChartFrameComponent = class UiChartFrameComponent {
 		...ngDevMode ? { debugName: "showTable" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
-	emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
+	showLegend = input(true, {
+		...ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	emphasis = model(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -1140,9 +1208,26 @@ var UiChartFrameComponent = class UiChartFrameComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emphasis: {
+				classPropertyName: "emphasis",
+				publicName: "emphasis",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
-		outputs: { hiddenSeries: "hiddenSeriesChange" },
+		outputs: {
+			hiddenSeries: "hiddenSeriesChange",
+			emphasis: "emphasisChange"
+		},
 		host: { classAttribute: "block w-full min-w-0" },
 		ngImport: i0,
 		template: `
@@ -1160,19 +1245,15 @@ var UiChartFrameComponent = class UiChartFrameComponent {
             </div>
         } @else {
             <!-- one series needs no legend, the chart's title already names it -->
-            @if (legendItems().length > 1 || legendNote()) {
-                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mb-3">
-                    <ui-chart-legend
-                        [items]="legendItems()"
-                        [(hidden)]="hiddenSeries"
-                        (focusChange)="emphasis.set($event)"
-                        toggleable
-                    />
-
-                    @if (legendNote()) {
-                        <span class="text-muted-foreground-1 ui-text-caption">{{ legendNote() }}</span>
-                    }
-                </div>
+            @if (showLegend() && (legendItems().length > 1 || legendNote())) {
+                <ui-chart-legend
+                    class="mb-3"
+                    [items]="legendItems()"
+                    [note]="legendNote()"
+                    [(hidden)]="hiddenSeries"
+                    (focusChange)="emphasis.set($event)"
+                    toggleable
+                />
             }
 
             <ui-chart
@@ -1224,6 +1305,8 @@ var UiChartFrameComponent = class UiChartFrameComponent {
 				selector: "ui-chart-legend",
 				inputs: [
 					"items",
+					"note",
+					"for",
 					"hidden",
 					"toggleable"
 				],
@@ -1267,19 +1350,15 @@ i0.ɵɵngDeclareClassMetadata({
             </div>
         } @else {
             <!-- one series needs no legend, the chart's title already names it -->
-            @if (legendItems().length > 1 || legendNote()) {
-                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mb-3">
-                    <ui-chart-legend
-                        [items]="legendItems()"
-                        [(hidden)]="hiddenSeries"
-                        (focusChange)="emphasis.set($event)"
-                        toggleable
-                    />
-
-                    @if (legendNote()) {
-                        <span class="text-muted-foreground-1 ui-text-caption">{{ legendNote() }}</span>
-                    }
-                </div>
+            @if (showLegend() && (legendItems().length > 1 || legendNote())) {
+                <ui-chart-legend
+                    class="mb-3"
+                    [items]="legendItems()"
+                    [note]="legendNote()"
+                    [(hidden)]="hiddenSeries"
+                    (focusChange)="emphasis.set($event)"
+                    toggleable
+                />
             }
 
             <ui-chart
@@ -1423,6 +1502,25 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "showTable",
 				required: false
 			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		emphasis: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emphasis",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["emphasisChange"]
 		}]
 	}
 });
@@ -1531,7 +1629,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 		host: { classAttribute: "block w-full min-w-0" },
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
+		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
 		dependencies: [{
 			kind: "component",
 			type: UiChartFrameComponent,
@@ -1550,9 +1648,11 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 				"emptyText",
 				"loading",
 				"empty",
-				"showTable"
+				"showTable",
+				"showLegend",
+				"emphasis"
 			],
-			outputs: ["hiddenSeriesChange"]
+			outputs: ["hiddenSeriesChange", "emphasisChange"]
 		}]
 	});
 };
@@ -1567,7 +1667,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-bar-chart",
 			imports: [UiChartFrameComponent],
 			host: { class: "block w-full min-w-0" },
-			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
+			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
 		}]
 	}],
 	propDecorators: {
@@ -1725,7 +1825,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 		host: { classAttribute: "block w-full min-w-0" },
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
+		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
 		dependencies: [{
 			kind: "component",
 			type: UiChartFrameComponent,
@@ -1744,9 +1844,11 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 				"emptyText",
 				"loading",
 				"empty",
-				"showTable"
+				"showTable",
+				"showLegend",
+				"emphasis"
 			],
-			outputs: ["hiddenSeriesChange"]
+			outputs: ["hiddenSeriesChange", "emphasisChange"]
 		}]
 	});
 };
@@ -1761,7 +1863,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-line-chart",
 			imports: [UiChartFrameComponent],
 			host: { class: "block w-full min-w-0" },
-			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
+			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
 		}]
 	}],
 	propDecorators: {
@@ -1788,6 +1890,206 @@ const LineChartCurves = [
 	"smooth",
 	"stepline"
 ];
+const percentFormatter = new Intl.NumberFormat("en-GB", {
+	style: "percent",
+	maximumFractionDigits: 1
+});
+var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
+	variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
+	values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	isMuted = computed(() => {
+		const highlight = this.highlight();
+		return this.categories().map((name) => !!highlight && !highlight.includes(name));
+	}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
+	styles = computed(() => {
+		const highlight = this.highlight();
+		const muted = this.isMuted();
+		return this.categories().map((name, index) => muted[index] ? {
+			colour: CHART_INK.context,
+			dashed: false
+		} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false));
+	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		const highlight = this.highlight();
+		const items = this.categories().map((name, index) => ({
+			name,
+			...this.styles()[index]
+		})).filter((_, index) => !this.isMuted()[index]);
+		return highlight ? items.sort((a, b) => highlight.indexOf(a.name) - highlight.indexOf(b.name)) : items;
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	slices = computed(() => {
+		const hidden = this.hiddenSeries();
+		const values = this.values();
+		const colours = this.colours();
+		return this.categories().map((name, index) => ({
+			name,
+			value: values[index] ?? 0,
+			colour: colours[index]
+		})).filter((slice) => !hidden.includes(slice.name));
+	}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
+	chartOptions = computed(() => {
+		const base = baseChartOptions();
+		const slices = this.slices();
+		const donut = this.variant() === "donut";
+		const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+		const centreText = {
+			fontSize: "12px",
+			color: CHART_INK.muted,
+			offsetY: -4
+		};
+		return mergeChartOptions({
+			...base,
+			chart: {
+				...base.chart,
+				type: donut ? "donut" : "pie",
+				height: this.height()
+			},
+			colors: slices.map((slice) => slice.colour),
+			labels: slices.map((slice) => slice.name),
+			series: slices.map((slice) => slice.value),
+			stroke: {
+				show: true,
+				width: 2,
+				colors: [CHART_INK.surface]
+			},
+			states: {
+				...base.states,
+				hover: { filter: { type: "darken" } }
+			},
+			plotOptions: { pie: {
+				expandOnClick: false,
+				donut: {
+					size: "65%",
+					labels: {
+						show: donut,
+						name: centreText,
+						value: {
+							fontSize: "20px",
+							fontWeight: 600,
+							color: CHART_INK.text,
+							offsetY: 4,
+							formatter: (value) => this.formatValue(Number(value))
+						},
+						total: {
+							show: true,
+							showAlways: true,
+							label: this.totalLabel(),
+							...centreText,
+							formatter: () => this.formatValue(total)
+						}
+					}
+				}
+			} },
+			tooltip: {
+				theme: "light",
+				fillSeriesColor: false,
+				custom: ({ seriesIndex }) => {
+					const slice = slices[seriesIndex];
+					return slice ? chartTooltipHtml("", [{
+						colour: slice.colour,
+						name: slice.name,
+						value: this.formatValue(slice.value)
+					}], total ? `${percentFormatter.format(slice.value / total)} of total` : "") : "";
+				}
+			}
+		}, this.options());
+	}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiPieChartComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiPieChartComponent,
+		isStandalone: true,
+		selector: "ui-pie-chart",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			totalLabel: {
+				classPropertyName: "totalLabel",
+				publicName: "totalLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block w-full min-w-0" },
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
+		dependencies: [{
+			kind: "component",
+			type: UiChartFrameComponent,
+			selector: "ui-chart-frame",
+			inputs: [
+				"options",
+				"ariaLabel",
+				"categories",
+				"series",
+				"legendItems",
+				"legendNote",
+				"hiddenSeries",
+				"valueFormatter",
+				"categoryLabel",
+				"height",
+				"emptyText",
+				"loading",
+				"empty",
+				"showTable",
+				"showLegend",
+				"emphasis"
+			],
+			outputs: ["hiddenSeriesChange", "emphasisChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiPieChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-pie-chart",
+			imports: [UiChartFrameComponent],
+			host: { class: "block w-full min-w-0" },
+			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		totalLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalLabel",
+				required: false
+			}]
+		}]
+	}
+});
+const PieChartVariants = ["pie", "donut"];
 var UiCheckboxComponent = class UiCheckboxComponent {
 	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
@@ -3554,6 +3856,67 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const radiusClasses = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl"
+};
+var UiCardComponent = class UiCardComponent {
+	radius = input("md", ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => radiusClasses[this.radius()], ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiCardComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiCardComponent,
+		isStandalone: true,
+		selector: "ui-card",
+		inputs: { radius: {
+			classPropertyName: "radius",
+			publicName: "radius",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "generatedClasses()" } },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: ["@layer properties;:host{display:block;border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-card",
+			template: "<ng-content />",
+			host: { "[class]": "generatedClasses()" },
+			styles: ["@layer properties;:host{display:block;border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: { radius: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "radius",
+			required: false
+		}]
+	}] }
+});
 var UiOverlayPositioner = class UiOverlayPositioner {
 	position = (reference, overlay, options) => computePosition(reference, overlay, {
 		placement: options.placement,
@@ -3591,36 +3954,82 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
-var UiOverlayComponent = class UiOverlayComponent {
-	positioner = inject(UiOverlayPositioner);
-	content = input(...ngDevMode ? [void 0, { debugName: "content" }] : /* istanbul ignore next */ []);
-	anchor = input(...ngDevMode ? [void 0, { debugName: "anchor" }] : /* istanbul ignore next */ []);
-	closeBehaviour = input("whenClickAnywhere", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
-	isOpen = input.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
-	placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
-	offset = input(0, ...ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []);
-	viewportPadding = input(0, ...ngDevMode ? [{ debugName: "viewportPadding" }] : /* istanbul ignore next */ []);
-	matchWidth = input(null, ...ngDevMode ? [{ debugName: "matchWidth" }] : /* istanbul ignore next */ []);
+var UiOverlayStack = class UiOverlayStack {
+	entries = [];
 	constructor() {
-		effect((onCleanup) => {
-			document.addEventListener("click", this.onDocumentClick);
-			document.addEventListener("keydown", this.onKeyDown);
-			onCleanup(() => {
-				document.removeEventListener("click", this.onDocumentClick);
-				document.removeEventListener("keydown", this.onKeyDown);
-			});
+		document.addEventListener("click", this.onDocumentClick);
+		document.addEventListener("keydown", this.onKeyDown);
+		inject(DestroyRef).onDestroy(() => {
+			document.removeEventListener("click", this.onDocumentClick);
+			document.removeEventListener("keydown", this.onKeyDown);
 		});
-		effect((onCleanup) => {
-			const anchor = this.anchor();
-			const content = this.content();
-			if (!this.isOpen()() || !anchor || !content) return;
-			const referenceElement = anchor.nativeElement;
-			const floatingElement = content.nativeElement;
-			const update = () => {
-				const matchWidth = this.matchWidth();
-				if (matchWidth) {
-					const width = `${referenceElement.offsetWidth}px`;
-					if (matchWidth === "both") {
+	}
+	push = (entry) => {
+		this.remove(entry);
+		this.entries.push(entry);
+	};
+	remove = (entry) => {
+		const index = this.entries.indexOf(entry);
+		if (index !== -1) this.entries.splice(index, 1);
+	};
+	top = () => this.entries.at(-1);
+	onDocumentClick = (event) => this.top()?.onDocumentClick(event);
+	onKeyDown = (event) => this.top()?.onKeyDown(event);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayStack,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayStack,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiOverlayStack,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var UiOverlayComponent = class UiOverlayComponent {
+	positioner = inject(UiOverlayPositioner);
+	stack = inject(UiOverlayStack);
+	content = input(...ngDevMode ? [void 0, { debugName: "content" }] : /* istanbul ignore next */ []);
+	anchor = input(...ngDevMode ? [void 0, { debugName: "anchor" }] : /* istanbul ignore next */ []);
+	closeBehaviour = input("whenClickAnywhere", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
+	isOpen = input.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	offset = input(0, ...ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []);
+	viewportPadding = input(0, ...ngDevMode ? [{ debugName: "viewportPadding" }] : /* istanbul ignore next */ []);
+	matchWidth = input(null, ...ngDevMode ? [{ debugName: "matchWidth" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			if (!this.isOpen()()) return;
+			this.stack.push(this);
+			onCleanup(() => this.stack.remove(this));
+		});
+		effect((onCleanup) => {
+			const anchor = this.anchor();
+			const content = this.content();
+			if (!this.isOpen()() || !anchor || !content) return;
+			const referenceElement = anchor.nativeElement;
+			const floatingElement = content.nativeElement;
+			const update = () => {
+				const matchWidth = this.matchWidth();
+				if (matchWidth) {
+					const width = `${referenceElement.offsetWidth}px`;
+					if (matchWidth === "both") {
 						floatingElement.style.maxWidth = width;
 						floatingElement.style.minWidth = width;
 					} else floatingElement.style[matchWidth] = width;
@@ -4516,7 +4925,7 @@ var UiSelectComponent = class UiSelectComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    [placement]=\"placement()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    matchWidth=\"minWidth\"\n    class=\"w-full\"\n>\n    @if (searchMode() === 'inline') {\n        <ui-input\n            [value]=\"isOpen() ? query() : triggerLabel()\"\n            (valueChange)=\"onQueryChange($event)\"\n            [placeholder]=\"triggerLabel()\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [describedBy]=\"describedBy()\"\n            [ariaExpanded]=\"isOpen()\"\n            [ariaControls]=\"listId\"\n            [ariaActiveDescendant]=\"activeId()\"\n            inputRole=\"combobox\"\n            ariaAutocomplete=\"list\"\n            ariaHasPopup=\"listbox\"\n            class=\"border-0!\"\n            classes=\"h-auto!\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            <ng-template #trailing>\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"mx-3 size-4 text-muted-foreground shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </ng-template>\n        </ui-input>\n    } @else {\n        <div class=\"ui-select-trigger\" [class.ui-select-trigger--tags]=\"showTags()\">\n            <button\n                type=\"button\"\n                class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n                aria-haspopup=\"listbox\"\n                [attr.id]=\"id() || null\"\n                [attr.aria-describedby]=\"describedBy() || null\"\n                [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-controls]=\"listId\"\n                [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n                [disabled]=\"disabled()\"\n                [attr.data-invalid]=\"validationState() === false ? '' : null\"\n                [attr.data-valid]=\"validationState() === true ? '' : null\"\n                (click)=\"toggle()\"\n                (keydown)=\"onKeydown($event)\"\n            >\n                @if (showTags()) {\n                    <!-- the visible tags sit on top, this names the button for screen readers -->\n                    <span class=\"sr-only\">{{ triggerLabel() }}</span>\n                } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n                    <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n                        <ng-container\n                            *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                } @else if (multiple()) {\n                    <span class=\"ui-select-label ui-text-body\">\n                        <span class=\"ui-select-label-sizer\" aria-hidden=\"true\">{{ placeholder() }}</span>\n                        <span class=\"ui-select-label-text\">{{ triggerLabel() }}</span>\n                    </span>\n                } @else {\n                    <span class=\"truncate ui-text-body\">{{ triggerLabel() }}</span>\n                }\n\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"ms-auto size-4 text-muted-foreground shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </button>\n\n            @if (showTags()) {\n                <span class=\"ui-select-tags-sizer ui-text-body\" aria-hidden=\"true\">\n                    {{ placeholder() }}\n                </span>\n\n                <div class=\"ui-select-tags\">\n                    @for (item of selectedItems(); track $index) {\n                        <ui-badge\n                            intent=\"secondary\"\n                            appearance=\"soft\"\n                            size=\"xs\"\n                            classes=\"ui-select-tag ui-text-caption\"\n                        >\n                            <span class=\"truncate\">{{ displayWith()(item) }}</span>\n\n                            @if (!disabled()) {\n                                <button\n                                    type=\"button\"\n                                    class=\"ui-select-tag-remove\"\n                                    [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n                                    (click)=\"removeItem(item)\"\n                                >\n                                    <ng-icon name=\"heroXMark\" class=\"size-3 shrink-0\" />\n                                </button>\n                            }\n                        </ui-badge>\n                    } @empty {\n                        <span class=\"text-muted-foreground-1 truncate ui-text-body\">\n                            {{ placeholder() }}\n                        </span>\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\n                @if (searchMode() === 'dropdown') {\n                    <div class=\"p-2\">\n                        <ui-input\n                            [value]=\"query()\"\n                            (valueChange)=\"onQueryChange($event)\"\n                            (keydown)=\"onKeydown($event)\"\n                            [ariaExpanded]=\"true\"\n                            [ariaControls]=\"listId\"\n                            [ariaActiveDescendant]=\"activeId()\"\n                            inputRole=\"combobox\"\n                            ariaAutocomplete=\"list\"\n                            ariaLabel=\"Search options\"\n                            autocomplete=\"off\"\n                            placeholder=\"Search...\"\n                        />\n                    </div>\n                }\n\n                <div\n                    #scrollContainer\n                    class=\"py-1 max-h-60 overflow-y-auto\"\n                    role=\"listbox\"\n                    [attr.id]=\"listId\"\n                    [attr.aria-multiselectable]=\"multiple() || null\"\n                    (scroll)=\"onScroll(scrollContainer)\"\n                >\n                    @for (row of rows(); track row.id) {\n                        @switch (row.kind) {\n                            @case ('group') {\n                                <div\n                                    class=\"ui-select-group ui-text-caption\"\n                                    role=\"presentation\"\n                                >\n                                    {{ row.label }}\n                                </div>\n                            }\n                            @case ('clear') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"text-muted-foreground-1 ui-select-option ui-text-body-alt\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"clear()\"\n                                >\n                                    <span class=\"truncate\">{{ clearLabel() }}</span>\n                                </button>\n                            }\n                            @case ('item') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    tabindex=\"-1\"\n                                    class=\"text-dropdown-item-foreground ui-select-option ui-text-body-alt\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.aria-selected]=\"row.selected\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onItemClick(row.item)\"\n                                >\n                                    @if (optionTemplate(); as template) {\n                                        <span class=\"flex items-center gap-2 min-w-0 grow\">\n                                            <ng-container\n                                                *ngTemplateOutlet=\"template; context: {\n                                                    $implicit: row.item,\n                                                    selected: row.selected,\n                                                    active: row.index === activeIndex()\n                                                }\"\n                                            />\n                                        </span>\n                                    } @else {\n                                        <span class=\"truncate\">{{ row.label }}</span>\n                                    }\n\n                                    @if (row.selected) {\n                                        <ng-icon\n                                            name=\"heroCheck\"\n                                            class=\"size-4 text-primary-600! shrink-0\"\n                                            strokeWidth=\"2.5\"\n                                        />\n                                    }\n                                </button>\n                            }\n                            @case ('create') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"justify-start! text-primary-600 ui-select-option ui-text-body-alt\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onCreate()\"\n                                >\n                                    <ng-icon name=\"heroPlus\" class=\"size-4 shrink-0\" />\n                                    <span class=\"truncate\">{{ createLabel()(row.query) }}</span>\n                                </button>\n                            }\n                        }\n                    }\n\n                    @if (loading()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            Loading...\n                        </div>\n                    }\n\n                    @if (!loading() && items().length === 0 && !createQuery()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            No results\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ui-dropdown>\n",
+		template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    [placement]=\"placement()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    matchWidth=\"minWidth\"\n    class=\"w-full\"\n>\n    @if (searchMode() === 'inline') {\n        <ui-input\n            [value]=\"isOpen() ? query() : triggerLabel()\"\n            (valueChange)=\"onQueryChange($event)\"\n            [placeholder]=\"triggerLabel()\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [describedBy]=\"describedBy()\"\n            [ariaExpanded]=\"isOpen()\"\n            [ariaControls]=\"listId\"\n            [ariaActiveDescendant]=\"activeId()\"\n            inputRole=\"combobox\"\n            ariaAutocomplete=\"list\"\n            ariaHasPopup=\"listbox\"\n            class=\"border-0!\"\n            classes=\"h-auto!\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            <ng-template #trailing>\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </ng-template>\n        </ui-input>\n    } @else {\n        <div\n            class=\"ui-select-trigger\"\n            [class.ui-select-trigger--tags]=\"showTags()\"\n        >\n            <button\n                type=\"button\"\n                class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n                aria-haspopup=\"listbox\"\n                [attr.id]=\"id() || null\"\n                [attr.aria-describedby]=\"describedBy() || null\"\n                [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-controls]=\"listId\"\n                [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n                [disabled]=\"disabled()\"\n                [attr.data-invalid]=\"validationState() === false ? '' : null\"\n                [attr.data-valid]=\"validationState() === true ? '' : null\"\n                (click)=\"toggle()\"\n                (keydown)=\"onKeydown($event)\"\n            >\n                @if (showTags()) {\n                    <!-- the visible tags sit on top, this names the button for screen readers -->\n                    <span class=\"sr-only\">{{ triggerLabel() }}</span>\n                } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n                    <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n                        <ng-container\n                            *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                } @else if (multiple()) {\n                    <span class=\"ui-text-body ui-select-label\">\n                        <span\n                            class=\"ui-select-label-sizer\"\n                            aria-hidden=\"true\"\n                        >{{ placeholder() }}</span>\n                        <span class=\"ui-select-label-text\">{{\n                                triggerLabel()\n                            }}</span>\n                    </span>\n                } @else {\n                    <span class=\"ui-text-body truncate\">{{\n                            triggerLabel()\n                        }}</span>\n                }\n\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </button>\n\n            @if (showTags()) {\n                <span\n                    class=\"ui-text-body ui-select-tags-sizer\"\n                    aria-hidden=\"true\"\n                >\n                    {{ placeholder() }}\n                </span>\n\n                <div class=\"ui-select-tags\">\n                    @for (item of selectedItems(); track $index) {\n                        <ui-badge\n                            intent=\"secondary\"\n                            appearance=\"soft\"\n                            size=\"xs\"\n                            classes=\"ui-select-tag ui-text-caption\"\n                        >\n                            <span class=\"truncate\">{{\n                                    displayWith()(item)\n                                }}</span>\n\n                            @if (!disabled()) {\n                                <button\n                                    type=\"button\"\n                                    class=\"ui-select-tag-remove\"\n                                    [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n                                    (click)=\"removeItem(item)\"\n                                >\n                                    <ng-icon\n                                        name=\"heroXMark\"\n                                        class=\"size-3 shrink-0\"\n                                    />\n                                </button>\n                            }\n                        </ui-badge>\n                    } @empty {\n                        <span\n                            class=\"text-muted-foreground-1 ui-text-body truncate\"\n                        >\n                            {{ placeholder() }}\n                        </span>\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n                @if (searchMode() === 'dropdown') {\n                    <div class=\"p-2\">\n                        <ui-input\n                            [value]=\"query()\"\n                            (valueChange)=\"onQueryChange($event)\"\n                            (keydown)=\"onKeydown($event)\"\n                            [ariaExpanded]=\"true\"\n                            [ariaControls]=\"listId\"\n                            [ariaActiveDescendant]=\"activeId()\"\n                            inputRole=\"combobox\"\n                            ariaAutocomplete=\"list\"\n                            ariaLabel=\"Search options\"\n                            autocomplete=\"off\"\n                            placeholder=\"Search...\"\n                        />\n                    </div>\n                }\n\n                <div\n                    #scrollContainer\n                    class=\"py-1 max-h-60 overflow-y-auto\"\n                    role=\"listbox\"\n                    [attr.id]=\"listId\"\n                    [attr.aria-multiselectable]=\"multiple() || null\"\n                    (scroll)=\"onScroll(scrollContainer)\"\n                >\n                    @for (row of rows(); track row.id) {\n                        @switch (row.kind) {\n                            @case ('group') {\n                                <div\n                                    class=\"ui-text-caption ui-select-group\"\n                                    role=\"presentation\"\n                                >\n                                    {{ row.label }}\n                                </div>\n                            }\n                            @case ('clear') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"clear()\"\n                                >\n                                    <span class=\"truncate\">{{\n                                            clearLabel()\n                                        }}</span>\n                                </button>\n                            }\n                            @case ('item') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    tabindex=\"-1\"\n                                    class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.aria-selected]=\"row.selected\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onItemClick(row.item)\"\n                                >\n                                    @if (optionTemplate(); as template) {\n                                        <span\n                                            class=\"flex items-center gap-2 min-w-0 grow\"\n                                        >\n                                            <ng-container\n                                                *ngTemplateOutlet=\"template; context: {\n                                                    $implicit: row.item,\n                                                    selected: row.selected,\n                                                    active: row.index === activeIndex()\n                                                }\"\n                                            />\n                                        </span>\n                                    } @else {\n                                        <span class=\"truncate\">{{\n                                                row.label\n                                            }}</span>\n                                    }\n\n                                    @if (row.selected) {\n                                        <ng-icon\n                                            name=\"heroCheck\"\n                                            class=\"size-4 text-primary-600! shrink-0\"\n                                            strokeWidth=\"2.5\"\n                                        />\n                                    }\n                                </button>\n                            }\n                            @case ('create') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onCreate()\"\n                                >\n                                    <ng-icon\n                                        name=\"heroPlus\"\n                                        class=\"size-4 shrink-0\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            createLabel()(row.query)\n                                        }}</span>\n                                </button>\n                            }\n                        }\n                    }\n\n                    @if (loading()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            Loading...\n                        </div>\n                    }\n\n                    @if (!loading() && items().length === 0 && !createQuery()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            No results\n                        </div>\n                    }\n                </div>\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n",
 		styles: ["@layer properties;:host{position:relative;display:inline-flex;width:100%;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 10);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [
 			{
@@ -4591,6 +5000,12 @@ var UiSelectComponent = class UiSelectComponent {
 					"classes"
 				]
 			},
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
+			},
 			{
 				kind: "component",
 				type: NgIcon,
@@ -4630,11 +5045,12 @@ i0.ɵɵngDeclareClassMetadata({
 				UiDropdownDirective,
 				UiInputComponent,
 				UiBadgeComponent,
+				UiCardComponent,
 				NgIcon,
 				NgTemplateOutlet
 			],
 			host: { "(focusout)": "onFocusOut($event)" },
-			template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    [placement]=\"placement()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    matchWidth=\"minWidth\"\n    class=\"w-full\"\n>\n    @if (searchMode() === 'inline') {\n        <ui-input\n            [value]=\"isOpen() ? query() : triggerLabel()\"\n            (valueChange)=\"onQueryChange($event)\"\n            [placeholder]=\"triggerLabel()\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [describedBy]=\"describedBy()\"\n            [ariaExpanded]=\"isOpen()\"\n            [ariaControls]=\"listId\"\n            [ariaActiveDescendant]=\"activeId()\"\n            inputRole=\"combobox\"\n            ariaAutocomplete=\"list\"\n            ariaHasPopup=\"listbox\"\n            class=\"border-0!\"\n            classes=\"h-auto!\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            <ng-template #trailing>\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"mx-3 size-4 text-muted-foreground shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </ng-template>\n        </ui-input>\n    } @else {\n        <div class=\"ui-select-trigger\" [class.ui-select-trigger--tags]=\"showTags()\">\n            <button\n                type=\"button\"\n                class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n                aria-haspopup=\"listbox\"\n                [attr.id]=\"id() || null\"\n                [attr.aria-describedby]=\"describedBy() || null\"\n                [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-controls]=\"listId\"\n                [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n                [disabled]=\"disabled()\"\n                [attr.data-invalid]=\"validationState() === false ? '' : null\"\n                [attr.data-valid]=\"validationState() === true ? '' : null\"\n                (click)=\"toggle()\"\n                (keydown)=\"onKeydown($event)\"\n            >\n                @if (showTags()) {\n                    <!-- the visible tags sit on top, this names the button for screen readers -->\n                    <span class=\"sr-only\">{{ triggerLabel() }}</span>\n                } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n                    <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n                        <ng-container\n                            *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                } @else if (multiple()) {\n                    <span class=\"ui-select-label ui-text-body\">\n                        <span class=\"ui-select-label-sizer\" aria-hidden=\"true\">{{ placeholder() }}</span>\n                        <span class=\"ui-select-label-text\">{{ triggerLabel() }}</span>\n                    </span>\n                } @else {\n                    <span class=\"truncate ui-text-body\">{{ triggerLabel() }}</span>\n                }\n\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"ms-auto size-4 text-muted-foreground shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </button>\n\n            @if (showTags()) {\n                <span class=\"ui-select-tags-sizer ui-text-body\" aria-hidden=\"true\">\n                    {{ placeholder() }}\n                </span>\n\n                <div class=\"ui-select-tags\">\n                    @for (item of selectedItems(); track $index) {\n                        <ui-badge\n                            intent=\"secondary\"\n                            appearance=\"soft\"\n                            size=\"xs\"\n                            classes=\"ui-select-tag ui-text-caption\"\n                        >\n                            <span class=\"truncate\">{{ displayWith()(item) }}</span>\n\n                            @if (!disabled()) {\n                                <button\n                                    type=\"button\"\n                                    class=\"ui-select-tag-remove\"\n                                    [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n                                    (click)=\"removeItem(item)\"\n                                >\n                                    <ng-icon name=\"heroXMark\" class=\"size-3 shrink-0\" />\n                                </button>\n                            }\n                        </ui-badge>\n                    } @empty {\n                        <span class=\"text-muted-foreground-1 truncate ui-text-body\">\n                            {{ placeholder() }}\n                        </span>\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\n                @if (searchMode() === 'dropdown') {\n                    <div class=\"p-2\">\n                        <ui-input\n                            [value]=\"query()\"\n                            (valueChange)=\"onQueryChange($event)\"\n                            (keydown)=\"onKeydown($event)\"\n                            [ariaExpanded]=\"true\"\n                            [ariaControls]=\"listId\"\n                            [ariaActiveDescendant]=\"activeId()\"\n                            inputRole=\"combobox\"\n                            ariaAutocomplete=\"list\"\n                            ariaLabel=\"Search options\"\n                            autocomplete=\"off\"\n                            placeholder=\"Search...\"\n                        />\n                    </div>\n                }\n\n                <div\n                    #scrollContainer\n                    class=\"py-1 max-h-60 overflow-y-auto\"\n                    role=\"listbox\"\n                    [attr.id]=\"listId\"\n                    [attr.aria-multiselectable]=\"multiple() || null\"\n                    (scroll)=\"onScroll(scrollContainer)\"\n                >\n                    @for (row of rows(); track row.id) {\n                        @switch (row.kind) {\n                            @case ('group') {\n                                <div\n                                    class=\"ui-select-group ui-text-caption\"\n                                    role=\"presentation\"\n                                >\n                                    {{ row.label }}\n                                </div>\n                            }\n                            @case ('clear') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"text-muted-foreground-1 ui-select-option ui-text-body-alt\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"clear()\"\n                                >\n                                    <span class=\"truncate\">{{ clearLabel() }}</span>\n                                </button>\n                            }\n                            @case ('item') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    tabindex=\"-1\"\n                                    class=\"text-dropdown-item-foreground ui-select-option ui-text-body-alt\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.aria-selected]=\"row.selected\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onItemClick(row.item)\"\n                                >\n                                    @if (optionTemplate(); as template) {\n                                        <span class=\"flex items-center gap-2 min-w-0 grow\">\n                                            <ng-container\n                                                *ngTemplateOutlet=\"template; context: {\n                                                    $implicit: row.item,\n                                                    selected: row.selected,\n                                                    active: row.index === activeIndex()\n                                                }\"\n                                            />\n                                        </span>\n                                    } @else {\n                                        <span class=\"truncate\">{{ row.label }}</span>\n                                    }\n\n                                    @if (row.selected) {\n                                        <ng-icon\n                                            name=\"heroCheck\"\n                                            class=\"size-4 text-primary-600! shrink-0\"\n                                            strokeWidth=\"2.5\"\n                                        />\n                                    }\n                                </button>\n                            }\n                            @case ('create') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"justify-start! text-primary-600 ui-select-option ui-text-body-alt\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onCreate()\"\n                                >\n                                    <ng-icon name=\"heroPlus\" class=\"size-4 shrink-0\" />\n                                    <span class=\"truncate\">{{ createLabel()(row.query) }}</span>\n                                </button>\n                            }\n                        }\n                    }\n\n                    @if (loading()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            Loading...\n                        </div>\n                    }\n\n                    @if (!loading() && items().length === 0 && !createQuery()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            No results\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ui-dropdown>\n",
+			template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    [placement]=\"placement()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    matchWidth=\"minWidth\"\n    class=\"w-full\"\n>\n    @if (searchMode() === 'inline') {\n        <ui-input\n            [value]=\"isOpen() ? query() : triggerLabel()\"\n            (valueChange)=\"onQueryChange($event)\"\n            [placeholder]=\"triggerLabel()\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [describedBy]=\"describedBy()\"\n            [ariaExpanded]=\"isOpen()\"\n            [ariaControls]=\"listId\"\n            [ariaActiveDescendant]=\"activeId()\"\n            inputRole=\"combobox\"\n            ariaAutocomplete=\"list\"\n            ariaHasPopup=\"listbox\"\n            class=\"border-0!\"\n            classes=\"h-auto!\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            <ng-template #trailing>\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </ng-template>\n        </ui-input>\n    } @else {\n        <div\n            class=\"ui-select-trigger\"\n            [class.ui-select-trigger--tags]=\"showTags()\"\n        >\n            <button\n                type=\"button\"\n                class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n                aria-haspopup=\"listbox\"\n                [attr.id]=\"id() || null\"\n                [attr.aria-describedby]=\"describedBy() || null\"\n                [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-controls]=\"listId\"\n                [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n                [disabled]=\"disabled()\"\n                [attr.data-invalid]=\"validationState() === false ? '' : null\"\n                [attr.data-valid]=\"validationState() === true ? '' : null\"\n                (click)=\"toggle()\"\n                (keydown)=\"onKeydown($event)\"\n            >\n                @if (showTags()) {\n                    <!-- the visible tags sit on top, this names the button for screen readers -->\n                    <span class=\"sr-only\">{{ triggerLabel() }}</span>\n                } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n                    <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n                        <ng-container\n                            *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                } @else if (multiple()) {\n                    <span class=\"ui-text-body ui-select-label\">\n                        <span\n                            class=\"ui-select-label-sizer\"\n                            aria-hidden=\"true\"\n                        >{{ placeholder() }}</span>\n                        <span class=\"ui-select-label-text\">{{\n                                triggerLabel()\n                            }}</span>\n                    </span>\n                } @else {\n                    <span class=\"ui-text-body truncate\">{{\n                            triggerLabel()\n                        }}</span>\n                }\n\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </button>\n\n            @if (showTags()) {\n                <span\n                    class=\"ui-text-body ui-select-tags-sizer\"\n                    aria-hidden=\"true\"\n                >\n                    {{ placeholder() }}\n                </span>\n\n                <div class=\"ui-select-tags\">\n                    @for (item of selectedItems(); track $index) {\n                        <ui-badge\n                            intent=\"secondary\"\n                            appearance=\"soft\"\n                            size=\"xs\"\n                            classes=\"ui-select-tag ui-text-caption\"\n                        >\n                            <span class=\"truncate\">{{\n                                    displayWith()(item)\n                                }}</span>\n\n                            @if (!disabled()) {\n                                <button\n                                    type=\"button\"\n                                    class=\"ui-select-tag-remove\"\n                                    [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n                                    (click)=\"removeItem(item)\"\n                                >\n                                    <ng-icon\n                                        name=\"heroXMark\"\n                                        class=\"size-3 shrink-0\"\n                                    />\n                                </button>\n                            }\n                        </ui-badge>\n                    } @empty {\n                        <span\n                            class=\"text-muted-foreground-1 ui-text-body truncate\"\n                        >\n                            {{ placeholder() }}\n                        </span>\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n                @if (searchMode() === 'dropdown') {\n                    <div class=\"p-2\">\n                        <ui-input\n                            [value]=\"query()\"\n                            (valueChange)=\"onQueryChange($event)\"\n                            (keydown)=\"onKeydown($event)\"\n                            [ariaExpanded]=\"true\"\n                            [ariaControls]=\"listId\"\n                            [ariaActiveDescendant]=\"activeId()\"\n                            inputRole=\"combobox\"\n                            ariaAutocomplete=\"list\"\n                            ariaLabel=\"Search options\"\n                            autocomplete=\"off\"\n                            placeholder=\"Search...\"\n                        />\n                    </div>\n                }\n\n                <div\n                    #scrollContainer\n                    class=\"py-1 max-h-60 overflow-y-auto\"\n                    role=\"listbox\"\n                    [attr.id]=\"listId\"\n                    [attr.aria-multiselectable]=\"multiple() || null\"\n                    (scroll)=\"onScroll(scrollContainer)\"\n                >\n                    @for (row of rows(); track row.id) {\n                        @switch (row.kind) {\n                            @case ('group') {\n                                <div\n                                    class=\"ui-text-caption ui-select-group\"\n                                    role=\"presentation\"\n                                >\n                                    {{ row.label }}\n                                </div>\n                            }\n                            @case ('clear') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"clear()\"\n                                >\n                                    <span class=\"truncate\">{{\n                                            clearLabel()\n                                        }}</span>\n                                </button>\n                            }\n                            @case ('item') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    tabindex=\"-1\"\n                                    class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.aria-selected]=\"row.selected\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onItemClick(row.item)\"\n                                >\n                                    @if (optionTemplate(); as template) {\n                                        <span\n                                            class=\"flex items-center gap-2 min-w-0 grow\"\n                                        >\n                                            <ng-container\n                                                *ngTemplateOutlet=\"template; context: {\n                                                    $implicit: row.item,\n                                                    selected: row.selected,\n                                                    active: row.index === activeIndex()\n                                                }\"\n                                            />\n                                        </span>\n                                    } @else {\n                                        <span class=\"truncate\">{{\n                                                row.label\n                                            }}</span>\n                                    }\n\n                                    @if (row.selected) {\n                                        <ng-icon\n                                            name=\"heroCheck\"\n                                            class=\"size-4 text-primary-600! shrink-0\"\n                                            strokeWidth=\"2.5\"\n                                        />\n                                    }\n                                </button>\n                            }\n                            @case ('create') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onCreate()\"\n                                >\n                                    <ng-icon\n                                        name=\"heroPlus\"\n                                        class=\"size-4 shrink-0\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            createLabel()(row.query)\n                                        }}</span>\n                                </button>\n                            }\n                        }\n                    }\n\n                    @if (loading()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            Loading...\n                        </div>\n                    }\n\n                    @if (!loading() && items().length === 0 && !createQuery()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            No results\n                        </div>\n                    }\n                </div>\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n",
 			styles: ["@layer properties;:host{position:relative;display:inline-flex;width:100%;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 10);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
@@ -6209,69 +6625,120 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var UiKpiComponent = class UiKpiComponent {
-	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
-	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
-	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
-	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+var UiTooltipComponent = class UiTooltipComponent {
+	anchor = inject(ElementRef);
+	content = viewChild("content", {
+		...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	placement = input("top", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	trigger = input("hover", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	isOpen = input(signal(false), ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	closeBehaviour = computed(() => this.trigger() === "click" ? "whenClickOutside" : "none", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-tooltip",
+		"ui-text-caption",
+		this.classes()
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	onHover(isHovering) {
+		if (this.trigger() === "hover") this.isOpen().set(isHovering);
+	}
+	onFocus(isFocused) {
+		if (["hover", "focus"].includes(this.trigger())) this.isOpen().set(isFocused);
+	}
+	onClick() {
+		if (this.trigger() === "click") this.isOpen().update((value) => !value);
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: UiKpiComponent,
+		type: UiTooltipComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: UiKpiComponent,
+		type: UiTooltipComponent,
 		isStandalone: true,
-		selector: "ui-kpi",
+		selector: "ui-tooltip",
 		inputs: {
-			title: {
-				classPropertyName: "title",
-				publicName: "title",
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			value: {
-				classPropertyName: "value",
-				publicName: "value",
+			trigger: {
+				classPropertyName: "trigger",
+				publicName: "trigger",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			hint: {
-				classPropertyName: "hint",
-				publicName: "hint",
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			icon: {
-				classPropertyName: "icon",
-				publicName: "icon",
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
+		host: {
+			listeners: {
+				"mouseenter": "onHover(true)",
+				"mouseleave": "onHover(false)",
+				"focusin": "onFocus(true)",
+				"focusout": "onFocus(false)",
+				"click": "onClick()"
+			},
+			classAttribute: "inline-flex size-fit"
+		},
+		viewQueries: [{
+			propertyName: "content",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		exportAs: ["uiTooltip"],
 		ngImport: i0,
-		template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n    @if (icon()) {\n        <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n            <ng-icon\n                [name]=\"icon()\"\n                size=\"32\"\n                class=\"size-8 text-muted-foreground-2 shrink-0\"\n                strokeWidth=\"1.5\"\n            />\n        </div>\n    }\n\n    <div class=\"grow\">\n        <div class=\"flex items-center gap-x-2\">\n            <p class=\"text-muted-foreground-2 ui-text-h4 uppercase\">\n                {{ title() }}\n            </p>\n            <!-- todo: insert tooltip component later -->\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n            <h3 class=\"text-foreground ui-text-h3\">\n                <!-- falls back to the plain value when nothing is projected -->\n                <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n            </h3>\n            <ng-content select=\"[kpi-badge]\"></ng-content>\n        </div>\n    </div>\n</div>\n",
-		styles: ["@layer properties;:host{display:flex;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		template: "<ui-overlay\n    [isOpen]=\"isOpen()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    [content]=\"content()\"\n    [anchor]=\"anchor\"\n    [placement]=\"placement()\"\n>\n    <ng-content />\n\n    @if (isOpen()()) {\n        <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n            <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n        </div>\n    }\n</ui-overlay>\n",
+		styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [{
 			kind: "component",
-			type: NgIcon,
-			selector: "ng-icon",
+			type: UiOverlayComponent,
+			selector: "ui-overlay",
 			inputs: [
-				"name",
-				"svg",
-				"size",
-				"strokeWidth",
-				"color"
-			]
+				"content",
+				"anchor",
+				"closeBehaviour",
+				"isOpen",
+				"placement",
+				"offset",
+				"viewportPadding",
+				"matchWidth"
+			],
+			exportAs: ["uiOverlay"]
 		}]
 	});
 };
@@ -6279,101 +6746,279 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: UiKpiComponent,
+	type: UiTooltipComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-kpi",
-			imports: [NgIcon],
-			template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n    @if (icon()) {\n        <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n            <ng-icon\n                [name]=\"icon()\"\n                size=\"32\"\n                class=\"size-8 text-muted-foreground-2 shrink-0\"\n                strokeWidth=\"1.5\"\n            />\n        </div>\n    }\n\n    <div class=\"grow\">\n        <div class=\"flex items-center gap-x-2\">\n            <p class=\"text-muted-foreground-2 ui-text-h4 uppercase\">\n                {{ title() }}\n            </p>\n            <!-- todo: insert tooltip component later -->\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n            <h3 class=\"text-foreground ui-text-h3\">\n                <!-- falls back to the plain value when nothing is projected -->\n                <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n            </h3>\n            <ng-content select=\"[kpi-badge]\"></ng-content>\n        </div>\n    </div>\n</div>\n",
-			styles: ["@layer properties;:host{display:flex;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			selector: "ui-tooltip",
+			exportAs: "uiTooltip",
+			imports: [UiOverlayComponent],
+			host: {
+				class: "inline-flex size-fit",
+				"(mouseenter)": "onHover(true)",
+				"(mouseleave)": "onHover(false)",
+				"(focusin)": "onFocus(true)",
+				"(focusout)": "onFocus(false)",
+				"(click)": "onClick()"
+			},
+			template: "<ui-overlay\n    [isOpen]=\"isOpen()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    [content]=\"content()\"\n    [anchor]=\"anchor\"\n    [placement]=\"placement()\"\n>\n    <ng-content />\n\n    @if (isOpen()()) {\n        <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n            <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n        </div>\n    }\n</ui-overlay>\n",
+			styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	propDecorators: {
-		title: [{
+		content: [{
+			type: i0.ViewChild,
+			args: ["content", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		text: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "title",
+				alias: "text",
+				required: true
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
 				required: false
 			}]
 		}],
-		value: [{
+		trigger: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "value",
+				alias: "trigger",
 				required: false
 			}]
 		}],
-		hint: [{
+		classes: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "hint",
+				alias: "classes",
 				required: false
 			}]
 		}],
-		icon: [{
+		isOpen: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "icon",
+				alias: "isOpen",
 				required: false
 			}]
 		}]
 	}
 });
-const TEXT_TYPES = [
-	"blinking-caret",
-	"shimmer-text",
-	"loading-dots"
-];
-var UiLoadingComponent = class UiLoadingComponent {
-	type = input("spinner", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
-	hasText = computed(() => TEXT_TYPES.includes(this.type()), ...ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []);
-	throbberSpokes = Array.from({ length: 12 }, (_, i) => i);
+var UiKpiComponent = class UiKpiComponent {
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconPosition = input("left", ...ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: UiLoadingComponent,
+		type: UiKpiComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: UiLoadingComponent,
+		type: UiKpiComponent,
 		isStandalone: true,
-		selector: "ui-loading",
-		inputs: { type: {
-			classPropertyName: "type",
-			publicName: "type",
-			isSignal: true,
-			isRequired: false,
-			transformFunction: null
-		} },
-		ngImport: i0,
-		template: "<div class=\"ui-loading\" role=\"status\">\n    @switch (type()) {\n        @case ('throbber') {\n            <svg\n                class=\"ui-loading--throbber\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                @for (i of throbberSpokes; track i) {\n                    <line\n                        x1=\"12\"\n                        y1=\"2.5\"\n                        x2=\"12\"\n                        y2=\"7\"\n                        [attr.transform]=\"'rotate(' + i * (360 / throbberSpokes.length) + ' 12 12)'\"\n                        [style.animation-delay.s]=\"i / throbberSpokes.length - 1\"\n                    />\n                }\n            </svg>\n        }\n        @case ('pulse-ring') {\n            <span\n                class=\"ui-loading--pulse-ring ui-loading--pulse\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('pulse-dot') {\n            <span\n                class=\"ui-loading--pulse ui-loading--pulse-dot\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('wave') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('equaliser') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger ui-loading--bars\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('terminal') {\n            <span class=\"ui-loading--prompt\" aria-hidden=\"true\">&gt;</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('blinking-caret') {\n            <span>Loading</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('shimmer-text') {\n            <span class=\"ui-loading--shimmer\">Loading</span>\n        }\n        @case ('loading-dots') {\n            <span>Loading</span>\n            <span\n                class=\"ui-loading--text-dots ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--text-dot\">.</span>\n                }\n            </span>\n        }\n        @case ('bouncing-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-bounce\"></span>\n                }\n            </span>\n        }\n        @case ('fading-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-fade\"></span>\n                }\n            </span>\n        }\n        @default {\n            <span class=\"ui-loading--spinner\" aria-hidden=\"true\"></span>\n        }\n    }\n\n    @if (!hasText()) {\n        <span class=\"sr-only\">Loading</span>\n    }\n</div>\n",
-		styles: ["@layer properties;.ui-loading{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-leading: 1;line-height:1}.ui-loading--row{display:inline-flex;height:1em;align-items:center;column-gap:.2em}.ui-loading--spinner{display:inline-block;width:1em;height:1em;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:.15em;border-color:currentcolor;border-top-color:currentcolor;animation:ui-loading-spin .8s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--spinner{border-color:color-mix(in oklab,currentcolor 20%,transparent)}}.ui-loading--throbber{width:1em;height:1em}.ui-loading--throbber line{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:ui-loading-spoke 1s linear infinite}.ui-loading--pulse{position:relative;display:inline-block;width:1em;height:1em}.ui-loading--pulse:before,.ui-loading--pulse:after{position:absolute;inset:0;border-radius:var(--radius-full, calc(infinity * 1px));content:\"\"}.ui-loading--pulse-ring:before,.ui-loading--pulse-ring:after{border-style:var(--tw-border-style);border-width:.12em;border-color:currentcolor}.ui-loading--pulse-dot:before,.ui-loading--pulse-dot:after{background-color:currentcolor}.ui-loading--pulse-dot:before{inset:.25em}.ui-loading--pulse:after{animation:ui-loading-echo 1.4s ease-out infinite}.ui-loading--bar{height:100%;width:.15em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor;animation:ui-loading-stretch 1s ease-in-out infinite}.ui-loading--bars{align-items:flex-end}.ui-loading--bars>.ui-loading--bar{transform-origin:bottom}.ui-loading--prompt{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace)}.ui-loading--caret{margin-inline-start:calc(var(--spacing, .25rem) * -1.5);height:1em;width:.5em;background-color:currentcolor;animation:ui-loading-blink 1s steps(1) infinite}.ui-loading--prompt+.ui-loading--caret{margin-inline-start:0px}.ui-loading--shimmer{-webkit-background-clip:text;background-clip:text;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,currentColor 35%,currentColor 50%,currentColor 65%);background-size:250% 100%;animation:ui-loading-shimmer 1.6s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--shimmer{background-image:linear-gradient(90deg,color-mix(in oklab,currentColor 35%,transparent) 35%,currentColor 50%,color-mix(in oklab,currentColor 35%,transparent) 65%)}}.ui-loading--text-dots{margin-inline-start:calc(var(--spacing, .25rem) * -2)}.ui-loading--text-dot{display:inline-block;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot{width:.3em;height:.3em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor}.ui-loading--dot-bounce{opacity:60%;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot-fade{animation:ui-loading-fade 1.2s ease-in-out infinite}.ui-loading--stagger>:nth-child(2){animation-delay:.15s}.ui-loading--stagger>:nth-child(3){animation-delay:.3s}.ui-loading--stagger>:nth-child(4){animation-delay:.45s}.ui-loading--stagger>:nth-child(5){animation-delay:.6s}@keyframes ui-loading-spin{to{transform:rotate(360deg)}}@keyframes ui-loading-spoke{0%{opacity:1}to{opacity:.15}}@keyframes ui-loading-echo{0%{transform:scale(1);opacity:.6}to{transform:scale(2);opacity:0}}@keyframes ui-loading-stretch{0%,60%,to{transform:scaleY(.3)}30%{transform:scaleY(1)}}@keyframes ui-loading-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.25em)}}@keyframes ui-loading-blink{0%{opacity:1}50%{opacity:0}}@keyframes ui-loading-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ui-loading-fade{0%,to{opacity:.25}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.ui-loading *,.ui-loading *:before,.ui-loading *:after{animation-duration:3s!important}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: UiLoadingComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ui-loading",
-			template: "<div class=\"ui-loading\" role=\"status\">\n    @switch (type()) {\n        @case ('throbber') {\n            <svg\n                class=\"ui-loading--throbber\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                @for (i of throbberSpokes; track i) {\n                    <line\n                        x1=\"12\"\n                        y1=\"2.5\"\n                        x2=\"12\"\n                        y2=\"7\"\n                        [attr.transform]=\"'rotate(' + i * (360 / throbberSpokes.length) + ' 12 12)'\"\n                        [style.animation-delay.s]=\"i / throbberSpokes.length - 1\"\n                    />\n                }\n            </svg>\n        }\n        @case ('pulse-ring') {\n            <span\n                class=\"ui-loading--pulse-ring ui-loading--pulse\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('pulse-dot') {\n            <span\n                class=\"ui-loading--pulse ui-loading--pulse-dot\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('wave') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('equaliser') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger ui-loading--bars\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('terminal') {\n            <span class=\"ui-loading--prompt\" aria-hidden=\"true\">&gt;</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('blinking-caret') {\n            <span>Loading</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('shimmer-text') {\n            <span class=\"ui-loading--shimmer\">Loading</span>\n        }\n        @case ('loading-dots') {\n            <span>Loading</span>\n            <span\n                class=\"ui-loading--text-dots ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--text-dot\">.</span>\n                }\n            </span>\n        }\n        @case ('bouncing-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-bounce\"></span>\n                }\n            </span>\n        }\n        @case ('fading-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-fade\"></span>\n                }\n            </span>\n        }\n        @default {\n            <span class=\"ui-loading--spinner\" aria-hidden=\"true\"></span>\n        }\n    }\n\n    @if (!hasText()) {\n        <span class=\"sr-only\">Loading</span>\n    }\n</div>\n",
-			styles: ["@layer properties;.ui-loading{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-leading: 1;line-height:1}.ui-loading--row{display:inline-flex;height:1em;align-items:center;column-gap:.2em}.ui-loading--spinner{display:inline-block;width:1em;height:1em;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:.15em;border-color:currentcolor;border-top-color:currentcolor;animation:ui-loading-spin .8s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--spinner{border-color:color-mix(in oklab,currentcolor 20%,transparent)}}.ui-loading--throbber{width:1em;height:1em}.ui-loading--throbber line{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:ui-loading-spoke 1s linear infinite}.ui-loading--pulse{position:relative;display:inline-block;width:1em;height:1em}.ui-loading--pulse:before,.ui-loading--pulse:after{position:absolute;inset:0;border-radius:var(--radius-full, calc(infinity * 1px));content:\"\"}.ui-loading--pulse-ring:before,.ui-loading--pulse-ring:after{border-style:var(--tw-border-style);border-width:.12em;border-color:currentcolor}.ui-loading--pulse-dot:before,.ui-loading--pulse-dot:after{background-color:currentcolor}.ui-loading--pulse-dot:before{inset:.25em}.ui-loading--pulse:after{animation:ui-loading-echo 1.4s ease-out infinite}.ui-loading--bar{height:100%;width:.15em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor;animation:ui-loading-stretch 1s ease-in-out infinite}.ui-loading--bars{align-items:flex-end}.ui-loading--bars>.ui-loading--bar{transform-origin:bottom}.ui-loading--prompt{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace)}.ui-loading--caret{margin-inline-start:calc(var(--spacing, .25rem) * -1.5);height:1em;width:.5em;background-color:currentcolor;animation:ui-loading-blink 1s steps(1) infinite}.ui-loading--prompt+.ui-loading--caret{margin-inline-start:0px}.ui-loading--shimmer{-webkit-background-clip:text;background-clip:text;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,currentColor 35%,currentColor 50%,currentColor 65%);background-size:250% 100%;animation:ui-loading-shimmer 1.6s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--shimmer{background-image:linear-gradient(90deg,color-mix(in oklab,currentColor 35%,transparent) 35%,currentColor 50%,color-mix(in oklab,currentColor 35%,transparent) 65%)}}.ui-loading--text-dots{margin-inline-start:calc(var(--spacing, .25rem) * -2)}.ui-loading--text-dot{display:inline-block;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot{width:.3em;height:.3em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor}.ui-loading--dot-bounce{opacity:60%;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot-fade{animation:ui-loading-fade 1.2s ease-in-out infinite}.ui-loading--stagger>:nth-child(2){animation-delay:.15s}.ui-loading--stagger>:nth-child(3){animation-delay:.3s}.ui-loading--stagger>:nth-child(4){animation-delay:.45s}.ui-loading--stagger>:nth-child(5){animation-delay:.6s}@keyframes ui-loading-spin{to{transform:rotate(360deg)}}@keyframes ui-loading-spoke{0%{opacity:1}to{opacity:.15}}@keyframes ui-loading-echo{0%{transform:scale(1);opacity:.6}to{transform:scale(2);opacity:0}}@keyframes ui-loading-stretch{0%,60%,to{transform:scaleY(.3)}30%{transform:scaleY(1)}}@keyframes ui-loading-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.25em)}}@keyframes ui-loading-blink{0%{opacity:1}50%{opacity:0}}@keyframes ui-loading-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ui-loading-fade{0%,to{opacity:.25}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.ui-loading *,.ui-loading *:before,.ui-loading *:after{animation-duration:3s!important}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
-		}]
-	}],
-	propDecorators: { type: [{
-		type: i0.Input,
+		selector: "ui-kpi",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconPosition: {
+				classPropertyName: "iconPosition",
+				publicName: "iconPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<ui-card radius=\"xl\">\n    <div class=\"flex gap-x-4 p-4 md:p-5\">\n        @if (icon() && iconPosition() === 'left') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n\n        <div class=\"grow\">\n            <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n                <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n                    {{ title() }}\n                </span>\n\n                @if (hint()) {\n                    <ui-tooltip\n                        [text]=\"hint()\"\n                        placement=\"top\"\n                        trigger=\"hover\"\n                    >\n                        <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n                    </ui-tooltip>\n                }\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n                <h3 class=\"font-semibold text-foreground ui-text-h2\">\n                    <!-- falls back to the plain value when nothing is projected -->\n                    <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n                </h3>\n                <ng-content select=\"[kpi-badge]\"></ng-content>\n            </div>\n        </div>\n\n        @if (icon() && iconPosition() === 'right') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n    </div>\n</ui-card>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			},
+			{
+				kind: "component",
+				type: UiTooltipComponent,
+				selector: "ui-tooltip",
+				inputs: [
+					"text",
+					"placement",
+					"trigger",
+					"classes",
+					"isOpen"
+				],
+				exportAs: ["uiTooltip"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiKpiComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-kpi",
+			imports: [
+				UiCardComponent,
+				NgIcon,
+				UiTooltipComponent
+			],
+			template: "<ui-card radius=\"xl\">\n    <div class=\"flex gap-x-4 p-4 md:p-5\">\n        @if (icon() && iconPosition() === 'left') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n\n        <div class=\"grow\">\n            <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n                <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n                    {{ title() }}\n                </span>\n\n                @if (hint()) {\n                    <ui-tooltip\n                        [text]=\"hint()\"\n                        placement=\"top\"\n                        trigger=\"hover\"\n                    >\n                        <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n                    </ui-tooltip>\n                }\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n                <h3 class=\"font-semibold text-foreground ui-text-h2\">\n                    <!-- falls back to the plain value when nothing is projected -->\n                    <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n                </h3>\n                <ng-content select=\"[kpi-badge]\"></ng-content>\n            </div>\n        </div>\n\n        @if (icon() && iconPosition() === 'right') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n    </div>\n</ui-card>\n"
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconPosition",
+				required: false
+			}]
+		}]
+	}
+});
+const TEXT_TYPES = [
+	"blinking-caret",
+	"shimmer-text",
+	"loading-dots"
+];
+var UiLoadingComponent = class UiLoadingComponent {
+	type = input("spinner", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	hasText = computed(() => TEXT_TYPES.includes(this.type()), ...ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []);
+	throbberSpokes = Array.from({ length: 12 }, (_, i) => i);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiLoadingComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiLoadingComponent,
+		isStandalone: true,
+		selector: "ui-loading",
+		inputs: { type: {
+			classPropertyName: "type",
+			publicName: "type",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "<div class=\"ui-loading\" role=\"status\">\n    @switch (type()) {\n        @case ('throbber') {\n            <svg\n                class=\"ui-loading--throbber\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                @for (i of throbberSpokes; track i) {\n                    <line\n                        x1=\"12\"\n                        y1=\"2.5\"\n                        x2=\"12\"\n                        y2=\"7\"\n                        [attr.transform]=\"'rotate(' + i * (360 / throbberSpokes.length) + ' 12 12)'\"\n                        [style.animation-delay.s]=\"i / throbberSpokes.length - 1\"\n                    />\n                }\n            </svg>\n        }\n        @case ('pulse-ring') {\n            <span\n                class=\"ui-loading--pulse-ring ui-loading--pulse\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('pulse-dot') {\n            <span\n                class=\"ui-loading--pulse ui-loading--pulse-dot\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('wave') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('equaliser') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger ui-loading--bars\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('terminal') {\n            <span class=\"ui-loading--prompt\" aria-hidden=\"true\">&gt;</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('blinking-caret') {\n            <span>Loading</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('shimmer-text') {\n            <span class=\"ui-loading--shimmer\">Loading</span>\n        }\n        @case ('loading-dots') {\n            <span>Loading</span>\n            <span\n                class=\"ui-loading--text-dots ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--text-dot\">.</span>\n                }\n            </span>\n        }\n        @case ('bouncing-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-bounce\"></span>\n                }\n            </span>\n        }\n        @case ('fading-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-fade\"></span>\n                }\n            </span>\n        }\n        @default {\n            <span class=\"ui-loading--spinner\" aria-hidden=\"true\"></span>\n        }\n    }\n\n    @if (!hasText()) {\n        <span class=\"sr-only\">Loading</span>\n    }\n</div>\n",
+		styles: ["@layer properties;.ui-loading{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-leading: 1;line-height:1}.ui-loading--row{display:inline-flex;height:1em;align-items:center;column-gap:.2em}.ui-loading--spinner{display:inline-block;width:1em;height:1em;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:.15em;border-color:currentcolor;border-top-color:currentcolor;animation:ui-loading-spin .8s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--spinner{border-color:color-mix(in oklab,currentcolor 20%,transparent)}}.ui-loading--throbber{width:1em;height:1em}.ui-loading--throbber line{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:ui-loading-spoke 1s linear infinite}.ui-loading--pulse{position:relative;display:inline-block;width:1em;height:1em}.ui-loading--pulse:before,.ui-loading--pulse:after{position:absolute;inset:0;border-radius:var(--radius-full, calc(infinity * 1px));content:\"\"}.ui-loading--pulse-ring:before,.ui-loading--pulse-ring:after{border-style:var(--tw-border-style);border-width:.12em;border-color:currentcolor}.ui-loading--pulse-dot:before,.ui-loading--pulse-dot:after{background-color:currentcolor}.ui-loading--pulse-dot:before{inset:.25em}.ui-loading--pulse:after{animation:ui-loading-echo 1.4s ease-out infinite}.ui-loading--bar{height:100%;width:.15em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor;animation:ui-loading-stretch 1s ease-in-out infinite}.ui-loading--bars{align-items:flex-end}.ui-loading--bars>.ui-loading--bar{transform-origin:bottom}.ui-loading--prompt{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace)}.ui-loading--caret{margin-inline-start:calc(var(--spacing, .25rem) * -1.5);height:1em;width:.5em;background-color:currentcolor;animation:ui-loading-blink 1s steps(1) infinite}.ui-loading--prompt+.ui-loading--caret{margin-inline-start:0px}.ui-loading--shimmer{-webkit-background-clip:text;background-clip:text;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,currentColor 35%,currentColor 50%,currentColor 65%);background-size:250% 100%;animation:ui-loading-shimmer 1.6s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--shimmer{background-image:linear-gradient(90deg,color-mix(in oklab,currentColor 35%,transparent) 35%,currentColor 50%,color-mix(in oklab,currentColor 35%,transparent) 65%)}}.ui-loading--text-dots{margin-inline-start:calc(var(--spacing, .25rem) * -2)}.ui-loading--text-dot{display:inline-block;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot{width:.3em;height:.3em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor}.ui-loading--dot-bounce{opacity:60%;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot-fade{animation:ui-loading-fade 1.2s ease-in-out infinite}.ui-loading--stagger>:nth-child(2){animation-delay:.15s}.ui-loading--stagger>:nth-child(3){animation-delay:.3s}.ui-loading--stagger>:nth-child(4){animation-delay:.45s}.ui-loading--stagger>:nth-child(5){animation-delay:.6s}@keyframes ui-loading-spin{to{transform:rotate(360deg)}}@keyframes ui-loading-spoke{0%{opacity:1}to{opacity:.15}}@keyframes ui-loading-echo{0%{transform:scale(1);opacity:.6}to{transform:scale(2);opacity:0}}@keyframes ui-loading-stretch{0%,60%,to{transform:scaleY(.3)}30%{transform:scaleY(1)}}@keyframes ui-loading-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.25em)}}@keyframes ui-loading-blink{0%{opacity:1}50%{opacity:0}}@keyframes ui-loading-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ui-loading-fade{0%,to{opacity:.25}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.ui-loading *,.ui-loading *:before,.ui-loading *:after{animation-duration:3s!important}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiLoadingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-loading",
+			template: "<div class=\"ui-loading\" role=\"status\">\n    @switch (type()) {\n        @case ('throbber') {\n            <svg\n                class=\"ui-loading--throbber\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                @for (i of throbberSpokes; track i) {\n                    <line\n                        x1=\"12\"\n                        y1=\"2.5\"\n                        x2=\"12\"\n                        y2=\"7\"\n                        [attr.transform]=\"'rotate(' + i * (360 / throbberSpokes.length) + ' 12 12)'\"\n                        [style.animation-delay.s]=\"i / throbberSpokes.length - 1\"\n                    />\n                }\n            </svg>\n        }\n        @case ('pulse-ring') {\n            <span\n                class=\"ui-loading--pulse-ring ui-loading--pulse\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('pulse-dot') {\n            <span\n                class=\"ui-loading--pulse ui-loading--pulse-dot\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('wave') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('equaliser') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger ui-loading--bars\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('terminal') {\n            <span class=\"ui-loading--prompt\" aria-hidden=\"true\">&gt;</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('blinking-caret') {\n            <span>Loading</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('shimmer-text') {\n            <span class=\"ui-loading--shimmer\">Loading</span>\n        }\n        @case ('loading-dots') {\n            <span>Loading</span>\n            <span\n                class=\"ui-loading--text-dots ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--text-dot\">.</span>\n                }\n            </span>\n        }\n        @case ('bouncing-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-bounce\"></span>\n                }\n            </span>\n        }\n        @case ('fading-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-fade\"></span>\n                }\n            </span>\n        }\n        @default {\n            <span class=\"ui-loading--spinner\" aria-hidden=\"true\"></span>\n        }\n    }\n\n    @if (!hasText()) {\n        <span class=\"sr-only\">Loading</span>\n    }\n</div>\n",
+			styles: ["@layer properties;.ui-loading{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-leading: 1;line-height:1}.ui-loading--row{display:inline-flex;height:1em;align-items:center;column-gap:.2em}.ui-loading--spinner{display:inline-block;width:1em;height:1em;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:.15em;border-color:currentcolor;border-top-color:currentcolor;animation:ui-loading-spin .8s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--spinner{border-color:color-mix(in oklab,currentcolor 20%,transparent)}}.ui-loading--throbber{width:1em;height:1em}.ui-loading--throbber line{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:ui-loading-spoke 1s linear infinite}.ui-loading--pulse{position:relative;display:inline-block;width:1em;height:1em}.ui-loading--pulse:before,.ui-loading--pulse:after{position:absolute;inset:0;border-radius:var(--radius-full, calc(infinity * 1px));content:\"\"}.ui-loading--pulse-ring:before,.ui-loading--pulse-ring:after{border-style:var(--tw-border-style);border-width:.12em;border-color:currentcolor}.ui-loading--pulse-dot:before,.ui-loading--pulse-dot:after{background-color:currentcolor}.ui-loading--pulse-dot:before{inset:.25em}.ui-loading--pulse:after{animation:ui-loading-echo 1.4s ease-out infinite}.ui-loading--bar{height:100%;width:.15em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor;animation:ui-loading-stretch 1s ease-in-out infinite}.ui-loading--bars{align-items:flex-end}.ui-loading--bars>.ui-loading--bar{transform-origin:bottom}.ui-loading--prompt{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace)}.ui-loading--caret{margin-inline-start:calc(var(--spacing, .25rem) * -1.5);height:1em;width:.5em;background-color:currentcolor;animation:ui-loading-blink 1s steps(1) infinite}.ui-loading--prompt+.ui-loading--caret{margin-inline-start:0px}.ui-loading--shimmer{-webkit-background-clip:text;background-clip:text;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,currentColor 35%,currentColor 50%,currentColor 65%);background-size:250% 100%;animation:ui-loading-shimmer 1.6s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--shimmer{background-image:linear-gradient(90deg,color-mix(in oklab,currentColor 35%,transparent) 35%,currentColor 50%,color-mix(in oklab,currentColor 35%,transparent) 65%)}}.ui-loading--text-dots{margin-inline-start:calc(var(--spacing, .25rem) * -2)}.ui-loading--text-dot{display:inline-block;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot{width:.3em;height:.3em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor}.ui-loading--dot-bounce{opacity:60%;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot-fade{animation:ui-loading-fade 1.2s ease-in-out infinite}.ui-loading--stagger>:nth-child(2){animation-delay:.15s}.ui-loading--stagger>:nth-child(3){animation-delay:.3s}.ui-loading--stagger>:nth-child(4){animation-delay:.45s}.ui-loading--stagger>:nth-child(5){animation-delay:.6s}@keyframes ui-loading-spin{to{transform:rotate(360deg)}}@keyframes ui-loading-spoke{0%{opacity:1}to{opacity:.15}}@keyframes ui-loading-echo{0%{transform:scale(1);opacity:.6}to{transform:scale(2);opacity:0}}@keyframes ui-loading-stretch{0%,60%,to{transform:scaleY(.3)}30%{transform:scaleY(1)}}@keyframes ui-loading-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.25em)}}@keyframes ui-loading-blink{0%{opacity:1}50%{opacity:0}}@keyframes ui-loading-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ui-loading-fade{0%,to{opacity:.25}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.ui-loading *,.ui-loading *:before,.ui-loading *:after{animation-duration:3s!important}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: { type: [{
+		type: i0.Input,
 		args: [{
 			isSignal: true,
 			alias: "type",
@@ -6420,7 +7065,7 @@ var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
 		} },
 		outputs: { isOpen: "isOpenChange" },
 		ngImport: i0,
-		template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
+		template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent! shadow-none!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
 		dependencies: [{
 			kind: "component",
 			type: UiButtonComponent,
@@ -6459,7 +7104,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-modal-close-btn",
 			imports: [UiButtonComponent, NgIcon],
-			template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
+			template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent! shadow-none!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
 		}]
 	}],
 	propDecorators: { isOpen: [{
@@ -6478,6 +7123,7 @@ var UiModalComponent = class UiModalComponent {
 	isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
 	closeBehaviour = input("whenClickOutside", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
 	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	headerElement = contentChild("header", {
 		...ngDevMode ? { debugName: "headerElement" } : /* istanbul ignore next */ {},
@@ -6491,7 +7137,11 @@ var UiModalComponent = class UiModalComponent {
 		...ngDevMode ? { debugName: "panelElement" } : /* istanbul ignore next */ {},
 		read: ElementRef
 	});
-	generatedClasses = computed(() => ["ui-modal", this.classes()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-modal",
+		`ui-modal--${this.size()}`,
+		this.classes()
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -6528,6 +7178,13 @@ var UiModalComponent = class UiModalComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			classes: {
 				classPropertyName: "classes",
 				publicName: "classes",
@@ -6557,8 +7214,8 @@ var UiModalComponent = class UiModalComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <div #panel [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </div>\n        </ui-overlay>\n    </div>\n}\n",
-		styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <ui-card #panel radius=\"xl\" [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </ui-card>\n        </ui-overlay>\n    </div>\n}\n",
+		styles: [".ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;max-height:100vh;overflow:hidden}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -6592,6 +7249,12 @@ var UiModalComponent = class UiModalComponent {
 					"ngTemplateOutlet",
 					"ngTemplateOutletInjector"
 				]
+			},
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
 			}
 		]
 	});
@@ -6608,10 +7271,11 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				UiOverlayComponent,
 				UiModalCloseButtonComponent,
-				NgTemplateOutlet
+				NgTemplateOutlet,
+				UiCardComponent
 			],
-			template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <div #panel [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </div>\n        </ui-overlay>\n    </div>\n}\n",
-			styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <ui-card #panel radius=\"xl\" [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </ui-card>\n        </ui-overlay>\n    </div>\n}\n",
+			styles: [".ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;max-height:100vh;overflow:hidden}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	propDecorators: {
@@ -6642,6 +7306,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
 		classes: [{
 			type: i0.Input,
 			args: [{
@@ -8580,7 +9252,7 @@ var UiToastComponent = class UiToastComponent {
 			"focusout": "setFocused(false)"
 		} },
 		ngImport: i0,
-		template: "<div\n    class=\"bg-layer shadow-lg p-4 border border-layer-line rounded-xl w-full max-w-xs\"\n    [class]=\"classes()\"\n    [attr.role]=\"role()\"\n    tabindex=\"-1\"\n>\n    <div class=\"flex gap-x-3\">\n        <div class=\"inline-flex\" [class]=\"iconColour()\">\n            <ng-icon\n                [name]=\"icon()\"\n                class=\"shrink-0\"\n                size=\"24\"\n            />\n        </div>\n        <div class=\"grow\">\n            <p class=\"text-layer-foreground ui-text-body\">\n                <ng-content />\n            </p>\n        </div>\n        @if (dismissable()) {\n            <button\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                (click)=\"dismissed.emit()\"\n            >\n                <ng-icon name=\"heroXMark\" />\n            </button>\n        }\n    </div>\n</div>\n",
+		template: "<ui-card\n    radius=\"xl\"\n    class=\"p-4 w-full max-w-xs\"\n    [class]=\"classes()\"\n    [attr.role]=\"role()\"\n    tabindex=\"-1\"\n>\n    <div class=\"flex gap-x-3\">\n        <div class=\"inline-flex\" [class]=\"iconColour()\">\n            <ng-icon\n                [name]=\"icon()\"\n                class=\"shrink-0\"\n                size=\"24\"\n            />\n        </div>\n        <div class=\"grow\">\n            <p class=\"text-layer-foreground ui-text-body\">\n                <ng-content />\n            </p>\n        </div>\n        @if (dismissable()) {\n            <button\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                (click)=\"dismissed.emit()\"\n            >\n                <ng-icon name=\"heroXMark\" />\n            </button>\n        }\n    </div>\n</ui-card>\n",
 		dependencies: [{
 			kind: "component",
 			type: NgIcon,
@@ -8592,6 +9264,11 @@ var UiToastComponent = class UiToastComponent {
 				"strokeWidth",
 				"color"
 			]
+		}, {
+			kind: "component",
+			type: UiCardComponent,
+			selector: "ui-card",
+			inputs: ["radius"]
 		}]
 	});
 };
@@ -8604,14 +9281,14 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ui-toast",
-			imports: [NgIcon],
+			imports: [NgIcon, UiCardComponent],
 			host: {
 				"(mouseenter)": "setHovered(true)",
 				"(mouseleave)": "setHovered(false)",
 				"(focusin)": "setFocused(true)",
 				"(focusout)": "setFocused(false)"
 			},
-			template: "<div\n    class=\"bg-layer shadow-lg p-4 border border-layer-line rounded-xl w-full max-w-xs\"\n    [class]=\"classes()\"\n    [attr.role]=\"role()\"\n    tabindex=\"-1\"\n>\n    <div class=\"flex gap-x-3\">\n        <div class=\"inline-flex\" [class]=\"iconColour()\">\n            <ng-icon\n                [name]=\"icon()\"\n                class=\"shrink-0\"\n                size=\"24\"\n            />\n        </div>\n        <div class=\"grow\">\n            <p class=\"text-layer-foreground ui-text-body\">\n                <ng-content />\n            </p>\n        </div>\n        @if (dismissable()) {\n            <button\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                (click)=\"dismissed.emit()\"\n            >\n                <ng-icon name=\"heroXMark\" />\n            </button>\n        }\n    </div>\n</div>\n"
+			template: "<ui-card\n    radius=\"xl\"\n    class=\"p-4 w-full max-w-xs\"\n    [class]=\"classes()\"\n    [attr.role]=\"role()\"\n    tabindex=\"-1\"\n>\n    <div class=\"flex gap-x-3\">\n        <div class=\"inline-flex\" [class]=\"iconColour()\">\n            <ng-icon\n                [name]=\"icon()\"\n                class=\"shrink-0\"\n                size=\"24\"\n            />\n        </div>\n        <div class=\"grow\">\n            <p class=\"text-layer-foreground ui-text-body\">\n                <ng-content />\n            </p>\n        </div>\n        @if (dismissable()) {\n            <button\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                (click)=\"dismissed.emit()\"\n            >\n                <ng-icon name=\"heroXMark\" />\n            </button>\n        }\n    </div>\n</ui-card>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -8819,196 +9496,6 @@ const ToasterPositions = [
 	"bottom-center",
 	"bottom-right"
 ];
-var UiTooltipComponent = class UiTooltipComponent {
-	anchor = inject(ElementRef);
-	content = viewChild("content", {
-		...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
-		read: ElementRef
-	});
-	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
-	placement = input("top", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
-	trigger = input("hover", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
-	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
-	isOpen = input(signal(false), ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
-	closeBehaviour = computed(() => this.trigger() === "click" ? "whenClickOutside" : "none", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
-	generatedClasses = computed(() => [
-		"ui-tooltip",
-		"ui-text-caption",
-		this.classes()
-	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
-	onHover(isHovering) {
-		if (this.trigger() === "hover") this.isOpen().set(isHovering);
-	}
-	onFocus(isFocused) {
-		if (["hover", "focus"].includes(this.trigger())) this.isOpen().set(isFocused);
-	}
-	onClick() {
-		if (this.trigger() === "click") this.isOpen().update((value) => !value);
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.1",
-		ngImport: i0,
-		type: UiTooltipComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.1",
-		type: UiTooltipComponent,
-		isStandalone: true,
-		selector: "ui-tooltip",
-		inputs: {
-			text: {
-				classPropertyName: "text",
-				publicName: "text",
-				isSignal: true,
-				isRequired: true,
-				transformFunction: null
-			},
-			placement: {
-				classPropertyName: "placement",
-				publicName: "placement",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			trigger: {
-				classPropertyName: "trigger",
-				publicName: "trigger",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			classes: {
-				classPropertyName: "classes",
-				publicName: "classes",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			isOpen: {
-				classPropertyName: "isOpen",
-				publicName: "isOpen",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		host: {
-			listeners: {
-				"mouseenter": "onHover(true)",
-				"mouseleave": "onHover(false)",
-				"focusin": "onFocus(true)",
-				"focusout": "onFocus(false)",
-				"click": "onClick()"
-			},
-			classAttribute: "inline-flex size-fit"
-		},
-		viewQueries: [{
-			propertyName: "content",
-			first: true,
-			predicate: ["content"],
-			descendants: true,
-			read: ElementRef,
-			isSignal: true
-		}],
-		exportAs: ["uiTooltip"],
-		ngImport: i0,
-		template: "<ui-overlay\n    [isOpen]=\"isOpen()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    [content]=\"content()\"\n    [anchor]=\"anchor\"\n    [placement]=\"placement()\"\n>\n    <ng-content />\n\n    @if (isOpen()()) {\n        <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n            <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n        </div>\n    }\n</ui-overlay>\n",
-		styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
-		dependencies: [{
-			kind: "component",
-			type: UiOverlayComponent,
-			selector: "ui-overlay",
-			inputs: [
-				"content",
-				"anchor",
-				"closeBehaviour",
-				"isOpen",
-				"placement",
-				"offset",
-				"viewportPadding",
-				"matchWidth"
-			],
-			exportAs: ["uiOverlay"]
-		}]
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: UiTooltipComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ui-tooltip",
-			exportAs: "uiTooltip",
-			imports: [UiOverlayComponent],
-			host: {
-				class: "inline-flex size-fit",
-				"(mouseenter)": "onHover(true)",
-				"(mouseleave)": "onHover(false)",
-				"(focusin)": "onFocus(true)",
-				"(focusout)": "onFocus(false)",
-				"(click)": "onClick()"
-			},
-			template: "<ui-overlay\n    [isOpen]=\"isOpen()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    [content]=\"content()\"\n    [anchor]=\"anchor\"\n    [placement]=\"placement()\"\n>\n    <ng-content />\n\n    @if (isOpen()()) {\n        <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n            <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n        </div>\n    }\n</ui-overlay>\n",
-			styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
-		}]
-	}],
-	propDecorators: {
-		content: [{
-			type: i0.ViewChild,
-			args: ["content", {
-				read: ElementRef,
-				isSignal: true
-			}]
-		}],
-		text: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "text",
-				required: true
-			}]
-		}],
-		placement: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "placement",
-				required: false
-			}]
-		}],
-		trigger: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "trigger",
-				required: false
-			}]
-		}],
-		classes: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "classes",
-				required: false
-			}]
-		}],
-		isOpen: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "isOpen",
-				required: false
-			}]
-		}]
-	}
-});
 var UiLayoutComponent = class UiLayoutComponent {
 	sidebar = contentChild("sidebar", ...ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -10578,7 +11065,7 @@ var UiDatepickerComponent = class UiDatepickerComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    placement=\"bottom-start\"\n    closeBehaviour=\"whenClickOutside\"\n    class=\"w-full\"\n>\n    <ui-input\n        [value]=\"display()\"\n        [id]=\"id()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [describedBy]=\"describedBy()\"\n        [ariaExpanded]=\"isOpen()\"\n        ariaHasPopup=\"dialog\"\n        [validationState]=\"validationState()\"\n        classes=\"cursor-pointer\"\n        autocomplete=\"off\"\n        readonly\n        (click)=\"toggle()\"\n        (keydown)=\"handleInputKeydown($event)\"\n    >\n        <ng-template #leading>\n            <ng-icon\n                name=\"heroCalendar\"\n                class=\"ms-3 text-muted-foreground-1 shrink-0\"\n            />\n        </ng-template>\n\n        <ng-template #trailing>\n            @if (clearable() && value() && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear date\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <div class=\"bg-layer shadow-lg p-3 border border-gray-200 rounded-xl\">\n                <ui-calendar\n                    [value]=\"datePart()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [isDateDisabled]=\"isDateDisabled()\"\n                    [weekStart]=\"weekStart()\"\n                    [locale]=\"locale()\"\n                    (valueChange)=\"handlePick($event)\"\n                    (keydown)=\"handlePanelKeydown($event)\"\n                />\n\n                @if (withTime()) {\n                    <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-gray-200 border-t\">\n                        <ui-time-select\n                            [value]=\"timePart()\"\n                            [minuteStep]=\"minuteStep()\"\n                            (valueChange)=\"handleTime($event)\"\n                            (keydown)=\"handlePanelKeydown($event)\"\n                        />\n\n                        <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n                    </div>\n                }\n            </div>\n        </div>\n    }\n</ui-dropdown>\n",
+		template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    placement=\"bottom-start\"\n    closeBehaviour=\"whenClickOutside\"\n    class=\"w-full\"\n>\n    <ui-input\n        [value]=\"display()\"\n        [id]=\"id()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [describedBy]=\"describedBy()\"\n        [ariaExpanded]=\"isOpen()\"\n        ariaHasPopup=\"dialog\"\n        [validationState]=\"validationState()\"\n        classes=\"cursor-pointer\"\n        autocomplete=\"off\"\n        readonly\n        (click)=\"toggle()\"\n        (keydown)=\"handleInputKeydown($event)\"\n    >\n        <ng-template #leading>\n            <ng-icon\n                name=\"heroCalendar\"\n                class=\"ms-3 text-muted-foreground-1 shrink-0\"\n            />\n        </ng-template>\n\n        <ng-template #trailing>\n            @if (clearable() && value() && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear date\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"xl\" class=\"p-3\">\n                <ui-calendar\n                    [value]=\"datePart()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [isDateDisabled]=\"isDateDisabled()\"\n                    [weekStart]=\"weekStart()\"\n                    [locale]=\"locale()\"\n                    (valueChange)=\"handlePick($event)\"\n                    (keydown)=\"handlePanelKeydown($event)\"\n                />\n\n                @if (withTime()) {\n                    <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-gray-200 border-t\">\n                        <ui-time-select\n                            [value]=\"timePart()\"\n                            [minuteStep]=\"minuteStep()\"\n                            (valueChange)=\"handleTime($event)\"\n                            (keydown)=\"handlePanelKeydown($event)\"\n                        />\n\n                        <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n                    </div>\n                }\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -10694,6 +11181,12 @@ var UiDatepickerComponent = class UiDatepickerComponent {
 					"strokeWidth",
 					"color"
 				]
+			},
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
 			}
 		]
 	});
@@ -10714,10 +11207,11 @@ i0.ɵɵngDeclareClassMetadata({
 				UiDropdownDirective,
 				UiButtonComponent,
 				UiTimeSelectComponent,
-				NgIcon
+				NgIcon,
+				UiCardComponent
 			],
 			host: { class: "block w-full" },
-			template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    placement=\"bottom-start\"\n    closeBehaviour=\"whenClickOutside\"\n    class=\"w-full\"\n>\n    <ui-input\n        [value]=\"display()\"\n        [id]=\"id()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [describedBy]=\"describedBy()\"\n        [ariaExpanded]=\"isOpen()\"\n        ariaHasPopup=\"dialog\"\n        [validationState]=\"validationState()\"\n        classes=\"cursor-pointer\"\n        autocomplete=\"off\"\n        readonly\n        (click)=\"toggle()\"\n        (keydown)=\"handleInputKeydown($event)\"\n    >\n        <ng-template #leading>\n            <ng-icon\n                name=\"heroCalendar\"\n                class=\"ms-3 text-muted-foreground-1 shrink-0\"\n            />\n        </ng-template>\n\n        <ng-template #trailing>\n            @if (clearable() && value() && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear date\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <div class=\"bg-layer shadow-lg p-3 border border-gray-200 rounded-xl\">\n                <ui-calendar\n                    [value]=\"datePart()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [isDateDisabled]=\"isDateDisabled()\"\n                    [weekStart]=\"weekStart()\"\n                    [locale]=\"locale()\"\n                    (valueChange)=\"handlePick($event)\"\n                    (keydown)=\"handlePanelKeydown($event)\"\n                />\n\n                @if (withTime()) {\n                    <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-gray-200 border-t\">\n                        <ui-time-select\n                            [value]=\"timePart()\"\n                            [minuteStep]=\"minuteStep()\"\n                            (valueChange)=\"handleTime($event)\"\n                            (keydown)=\"handlePanelKeydown($event)\"\n                        />\n\n                        <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n                    </div>\n                }\n            </div>\n        </div>\n    }\n</ui-dropdown>\n"
+			template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    placement=\"bottom-start\"\n    closeBehaviour=\"whenClickOutside\"\n    class=\"w-full\"\n>\n    <ui-input\n        [value]=\"display()\"\n        [id]=\"id()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [describedBy]=\"describedBy()\"\n        [ariaExpanded]=\"isOpen()\"\n        ariaHasPopup=\"dialog\"\n        [validationState]=\"validationState()\"\n        classes=\"cursor-pointer\"\n        autocomplete=\"off\"\n        readonly\n        (click)=\"toggle()\"\n        (keydown)=\"handleInputKeydown($event)\"\n    >\n        <ng-template #leading>\n            <ng-icon\n                name=\"heroCalendar\"\n                class=\"ms-3 text-muted-foreground-1 shrink-0\"\n            />\n        </ng-template>\n\n        <ng-template #trailing>\n            @if (clearable() && value() && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear date\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"xl\" class=\"p-3\">\n                <ui-calendar\n                    [value]=\"datePart()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [isDateDisabled]=\"isDateDisabled()\"\n                    [weekStart]=\"weekStart()\"\n                    [locale]=\"locale()\"\n                    (valueChange)=\"handlePick($event)\"\n                    (keydown)=\"handlePanelKeydown($event)\"\n                />\n\n                @if (withTime()) {\n                    <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-gray-200 border-t\">\n                        <ui-time-select\n                            [value]=\"timePart()\"\n                            [minuteStep]=\"minuteStep()\"\n                            (valueChange)=\"handleTime($event)\"\n                            (keydown)=\"handlePanelKeydown($event)\"\n                        />\n\n                        <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n                    </div>\n                }\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n"
 		}]
 	}],
 	propDecorators: {
@@ -10909,7 +11403,7 @@ var UiDropdownButtonComponent = class UiDropdownButtonComponent {
 		},
 		outputs: { isOpen: "isOpenChange" },
 		ngImport: i0,
-		template: "<ui-button\n    [intent]=\"intent()\"\n    [appearance]=\"appearance()\"\n    (click)=\"isOpen.update(value => !value)\"\n>\n    <ng-content />\n    <ng-icon\n        name=\"heroChevronDown\"\n        class=\"size-4 shrink-0\"\n        [class.rotate-180]=\"isOpen()\"\n    />\n</ui-button>\n",
+		template: "<ui-button\n    [intent]=\"intent()\"\n    [appearance]=\"appearance()\"\n    (click)=\"isOpen.update(value => !value)\"\n>\n    <ng-content />\n    <ng-icon\n        name=\"heroChevronDown\"\n        class=\"size-4 transition-transform duration-100 shrink-0\"\n        [class.rotate-180]=\"isOpen()\"\n    />\n</ui-button>\n",
 		dependencies: [{
 			kind: "component",
 			type: UiButtonComponent,
@@ -10948,7 +11442,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-dropdown-button",
 			imports: [UiButtonComponent, NgIcon],
-			template: "<ui-button\n    [intent]=\"intent()\"\n    [appearance]=\"appearance()\"\n    (click)=\"isOpen.update(value => !value)\"\n>\n    <ng-content />\n    <ng-icon\n        name=\"heroChevronDown\"\n        class=\"size-4 shrink-0\"\n        [class.rotate-180]=\"isOpen()\"\n    />\n</ui-button>\n"
+			template: "<ui-button\n    [intent]=\"intent()\"\n    [appearance]=\"appearance()\"\n    (click)=\"isOpen.update(value => !value)\"\n>\n    <ng-content />\n    <ng-icon\n        name=\"heroChevronDown\"\n        class=\"size-4 transition-transform duration-100 shrink-0\"\n        [class.rotate-180]=\"isOpen()\"\n    />\n</ui-button>\n"
 		}]
 	}],
 	propDecorators: {
@@ -11013,33 +11507,42 @@ var UiDropdownMenuComponent = class UiDropdownMenuComponent {
 			transformFunction: null
 		} },
 		ngImport: i0,
-		template: "<div\n    class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y w-3xs max-w-md\"\n    role=\"menu\"\n>\n    @for (item of items(); track $index) {\n        @if ('divider' in item) {\n            <div class=\"my-1 border-border border-t\"></div>\n        } @else if ('children' in item) {\n            <div class=\"flex flex-col gap-y-0.5 p-1\">\n                <span\n                    class=\"block px-4 pt-2 pb-1 font-medium text-muted-foreground ui-text-caption uppercase\"\n                >\n                    {{ item.label }}\n                </span>\n\n                @for (child of item.children; track child.label) {\n                    <ui-button\n                        appearance=\"none\"\n                        classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                        (click)=\"child.onClick()\"\n                    >\n                        @if (child.icon) {\n                            <ng-icon\n                                [name]=\"child.icon\"\n                                size=\"18\"\n                                strokeWidth=\"1.5\"\n                                class=\"size-4 shrink-0\"\n                            />\n                        }\n\n                        {{ child.label }}\n                    </ui-button>\n                }\n            </div>\n        } @else {\n            <div class=\"p-1\">\n                <ui-button\n                    appearance=\"none\"\n                    classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                    (click)=\"item.onClick()\"\n                >\n                    @if (item.icon) {\n                        <ng-icon\n                            [name]=\"item.icon\"\n                            size=\"18\"\n                            strokeWidth=\"2\"\n                            class=\"size-4 shrink-0\"\n                        />\n                    }\n\n                    {{ item.label }}\n                </ui-button>\n            </div>\n        }\n    }\n</div>\n",
-		dependencies: [{
-			kind: "component",
-			type: UiButtonComponent,
-			selector: "ui-button",
-			inputs: [
-				"appearance",
-				"intent",
-				"size",
-				"classes",
-				"type",
-				"ariaLabel",
-				"disabled",
-				"loading"
-			]
-		}, {
-			kind: "component",
-			type: NgIcon,
-			selector: "ng-icon",
-			inputs: [
-				"name",
-				"svg",
-				"size",
-				"strokeWidth",
-				"color"
-			]
-		}]
+		template: "<ui-card radius=\"lg\" class=\"divide-y w-3xs max-w-md\" role=\"menu\">\n    @for (item of items(); track $index) {\n        @if ('divider' in item) {\n            <div class=\"my-1 border-border border-t\"></div>\n        } @else if ('children' in item) {\n            <div class=\"flex flex-col gap-y-0.5 p-1\">\n                <span\n                    class=\"block px-4 pt-2 pb-1 font-medium text-muted-foreground ui-text-caption uppercase\"\n                >\n                    {{ item.label }}\n                </span>\n\n                @for (child of item.children; track child.label) {\n                    <ui-button\n                        appearance=\"none\"\n                        classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                        (click)=\"child.onClick()\"\n                    >\n                        @if (child.icon) {\n                            <ng-icon\n                                [name]=\"child.icon\"\n                                size=\"18\"\n                                strokeWidth=\"1.5\"\n                                class=\"size-4 shrink-0\"\n                            />\n                        }\n\n                        {{ child.label }}\n                    </ui-button>\n                }\n            </div>\n        } @else {\n            <div class=\"p-1\">\n                <ui-button\n                    appearance=\"none\"\n                    classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                    (click)=\"item.onClick()\"\n                >\n                    @if (item.icon) {\n                        <ng-icon\n                            [name]=\"item.icon\"\n                            size=\"18\"\n                            strokeWidth=\"2\"\n                            class=\"size-4 shrink-0\"\n                        />\n                    }\n\n                    {{ item.label }}\n                </ui-button>\n            </div>\n        }\n    }\n</ui-card>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: UiButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"appearance",
+					"intent",
+					"size",
+					"classes",
+					"type",
+					"ariaLabel",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			}
+		]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -11051,8 +11554,12 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ui-dropdown-menu",
-			imports: [UiButtonComponent, NgIcon],
-			template: "<div\n    class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y w-3xs max-w-md\"\n    role=\"menu\"\n>\n    @for (item of items(); track $index) {\n        @if ('divider' in item) {\n            <div class=\"my-1 border-border border-t\"></div>\n        } @else if ('children' in item) {\n            <div class=\"flex flex-col gap-y-0.5 p-1\">\n                <span\n                    class=\"block px-4 pt-2 pb-1 font-medium text-muted-foreground ui-text-caption uppercase\"\n                >\n                    {{ item.label }}\n                </span>\n\n                @for (child of item.children; track child.label) {\n                    <ui-button\n                        appearance=\"none\"\n                        classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                        (click)=\"child.onClick()\"\n                    >\n                        @if (child.icon) {\n                            <ng-icon\n                                [name]=\"child.icon\"\n                                size=\"18\"\n                                strokeWidth=\"1.5\"\n                                class=\"size-4 shrink-0\"\n                            />\n                        }\n\n                        {{ child.label }}\n                    </ui-button>\n                }\n            </div>\n        } @else {\n            <div class=\"p-1\">\n                <ui-button\n                    appearance=\"none\"\n                    classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                    (click)=\"item.onClick()\"\n                >\n                    @if (item.icon) {\n                        <ng-icon\n                            [name]=\"item.icon\"\n                            size=\"18\"\n                            strokeWidth=\"2\"\n                            class=\"size-4 shrink-0\"\n                        />\n                    }\n\n                    {{ item.label }}\n                </ui-button>\n            </div>\n        }\n    }\n</div>\n"
+			imports: [
+				UiButtonComponent,
+				UiCardComponent,
+				NgIcon
+			],
+			template: "<ui-card radius=\"lg\" class=\"divide-y w-3xs max-w-md\" role=\"menu\">\n    @for (item of items(); track $index) {\n        @if ('divider' in item) {\n            <div class=\"my-1 border-border border-t\"></div>\n        } @else if ('children' in item) {\n            <div class=\"flex flex-col gap-y-0.5 p-1\">\n                <span\n                    class=\"block px-4 pt-2 pb-1 font-medium text-muted-foreground ui-text-caption uppercase\"\n                >\n                    {{ item.label }}\n                </span>\n\n                @for (child of item.children; track child.label) {\n                    <ui-button\n                        appearance=\"none\"\n                        classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                        (click)=\"child.onClick()\"\n                    >\n                        @if (child.icon) {\n                            <ng-icon\n                                [name]=\"child.icon\"\n                                size=\"18\"\n                                strokeWidth=\"1.5\"\n                                class=\"size-4 shrink-0\"\n                            />\n                        }\n\n                        {{ child.label }}\n                    </ui-button>\n                }\n            </div>\n        } @else {\n            <div class=\"p-1\">\n                <ui-button\n                    appearance=\"none\"\n                    classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n                    (click)=\"item.onClick()\"\n                >\n                    @if (item.icon) {\n                        <ng-icon\n                            [name]=\"item.icon\"\n                            size=\"18\"\n                            strokeWidth=\"2\"\n                            class=\"size-4 shrink-0\"\n                        />\n                    }\n\n                    {{ item.label }}\n                </ui-button>\n            </div>\n        }\n    }\n</ui-card>\n"
 		}]
 	}],
 	propDecorators: { items: [{
@@ -11506,6 +12013,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
+export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
 
 //# sourceMappingURL=area8975-ui.mjs.map