@area8975/ui 0.2.2-dev.40 → 0.2.2-dev.42

package/fesm2022/area8975-ui.mjs

@@ -304,13 +304,43 @@ function chartSeriesStyle(index, dashes, dark = false) {
 		dashed: false
 	};
 }
-var UiAxisChartBase = class UiAxisChartBase {
+const HEX_COLOUR = /^#([0-9a-f]{6})$/i;
+function hexChannels(colour) {
+	const digits = HEX_COLOUR.exec(colour)?.[1];
+	return digits ? [
+		0,
+		2,
+		4
+	].map((at) => parseInt(digits.slice(at, at + 2), 16)) : null;
+}
+function mixChartColours(colour, towards, strength) {
+	const from = hexChannels(colour);
+	const to = hexChannels(towards);
+	if (!from || !to) return null;
+	return `#${from.map((channel, index) => Math.round(channel * strength + to[index] * (1 - strength))).map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+const DARK_LABEL = CHART_INK.text;
+const LIGHT_LABEL = "#ffffff";
+function chartLabelInk(background) {
+	const channels = hexChannels(background);
+	if (!channels) return DARK_LABEL;
+	const backgroundLuminance = screenLuminance(channels);
+	return lightnessContrast(screenLuminance(hexChannels(LIGHT_LABEL)), backgroundLuminance) > lightnessContrast(screenLuminance(hexChannels(DARK_LABEL)), backgroundLuminance) ? LIGHT_LABEL : DARK_LABEL;
+}
+function screenLuminance(channels) {
+	const [red, green, blue] = channels.map((channel) => (channel / 255) ** 2.4);
+	const luminance = .2126729 * red + .7151522 * green + .072175 * blue;
+	return luminance < .022 ? luminance + (.022 - luminance) ** 1.414 : luminance;
+}
+function lightnessContrast(textLuminance, backgroundLuminance) {
+	const contrast = backgroundLuminance > textLuminance ? (backgroundLuminance ** .56 - textLuminance ** .57) * 1.14 : (backgroundLuminance ** .65 - textLuminance ** .62) * 1.14;
+	return Math.max(Math.abs(contrast) - .027, 0) * 100;
+}
+var UiChartBase = class UiChartBase {
 	uiFormat = inject(UI_FORMAT);
 	privacy = inject(UI_PRIVACY);
 	dark = inject(UiDarkClass).isDark;
 	ink = computed(() => chartInk(this.dark()), ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
-	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
-	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
 	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	height = input(300, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
 	valueFormatter = input(numberFormatter(this.uiFormat.locale), ...ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []);
@@ -329,15 +359,9 @@ var UiAxisChartBase = class UiAxisChartBase {
 		transform: booleanAttribute
 	});
 	options = input(null, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
-	highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
-	highlightKeepsColours = input(false, {
-		...ngDevMode ? { debugName: "highlightKeepsColours" } : /* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
 	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;
 	money = computed(() => moneyFormatterParts(this.valueFormatter()), ...ngDevMode ? [{ debugName: "money" }] : /* istanbul ignore next */ []);
 	privacyMode = computed(() => this.sensitive() ?? !!this.money() ? this.privacy() : "visible", ...ngDevMode ? [{ debugName: "privacyMode" }] : /* istanbul ignore next */ []);
 	masked = computed(() => this.privacyMode() !== "visible", ...ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []);
@@ -352,42 +376,6 @@ var UiAxisChartBase = class UiAxisChartBase {
 		const height = this.height();
 		return height === "fill" ? "100%" : height;
 	}, ...ngDevMode ? [{ debugName: "apexHeight" }] : /* istanbul ignore next */ []);
-	isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
-	isMuted = computed(() => {
-		const highlight = this.highlight();
-		return this.series().map((item) => !!highlight && !highlight.includes(item.name));
-	}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
-	colourOrder = computed(() => this.highlightKeepsColours() ? null : this.highlight(), ...ngDevMode ? [{ debugName: "colourOrder" }] : /* istanbul ignore next */ []);
-	styles = computed(() => {
-		const order = this.colourOrder();
-		const muted = this.isMuted();
-		return this.series().map((item, index) => {
-			const dashed = this.supportsDashes && !!item.dashed;
-			if (muted[index]) return {
-				colour: this.ink().context,
-				dashed
-			};
-			const style = chartSeriesStyle(order ? order.indexOf(item.name) : index, this.supportsDashes, this.dark());
-			return {
-				colour: item.colour ?? style.colour,
-				dashed: style.dashed || dashed
-			};
-		});
-	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
-	colours = computed(() => this.styles().map((style) => style.colour), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
-	dashed = computed(() => this.styles().map((style) => style.dashed), ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
-	legendItems = computed(() => {
-		const order = this.colourOrder();
-		const items = this.series().map((item, index) => ({
-			name: item.name,
-			...this.styles()[index]
-		})).filter((_, index) => !this.isMuted()[index]);
-		return order ? items.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) : items;
-	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
-	legendNote = computed(() => {
-		const count = this.isMuted().filter(Boolean).length;
-		return count ? `${count} more in grey` : "";
-	}, ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
 	formatValue(value) {
 		return value === null || value === void 0 ? "-" : this.displayFormatter()(value);
 	}
@@ -395,30 +383,16 @@ var UiAxisChartBase = class UiAxisChartBase {
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: UiAxisChartBase,
+		type: UiChartBase,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Directive
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
 		version: "22.2.1",
-		type: UiAxisChartBase,
+		type: UiChartBase,
 		isStandalone: true,
 		inputs: {
-			series: {
-				classPropertyName: "series",
-				publicName: "series",
-				isSignal: true,
-				isRequired: true,
-				transformFunction: null
-			},
-			categories: {
-				classPropertyName: "categories",
-				publicName: "categories",
-				isSignal: true,
-				isRequired: true,
-				transformFunction: null
-			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "ariaLabel",
@@ -482,20 +456,6 @@ var UiAxisChartBase = class UiAxisChartBase {
 				isRequired: false,
 				transformFunction: null
 			},
-			highlight: {
-				classPropertyName: "highlight",
-				publicName: "highlight",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			highlightKeepsColours: {
-				classPropertyName: "highlightKeepsColours",
-				publicName: "highlightKeepsColours",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
 			legend: {
 				classPropertyName: "legend",
 				publicName: "legend",
@@ -511,25 +471,9 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: UiAxisChartBase,
+	type: UiChartBase,
 	decorators: [{ type: Directive }],
 	propDecorators: {
-		series: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "series",
-				required: true
-			}]
-		}],
-		categories: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "categories",
-				required: true
-			}]
-		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -602,36 +546,153 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		highlight: [{
+		legend: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "highlight",
+				alias: "legend",
 				required: false
 			}]
+		}]
+	}
+});
+function numberFormatter(locale) {
+	const formatter = new Intl.NumberFormat(locale);
+	return (value) => formatter.format(value);
+}
+var UiAxisChartBase = class UiAxisChartBase extends UiChartBase {
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
+	highlightKeepsColours = input(false, {
+		...ngDevMode ? { debugName: "highlightKeepsColours" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	supportsDashes = false;
+	isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	isMuted = computed(() => {
+		const highlight = this.highlight();
+		return this.series().map((item) => !!highlight && !highlight.includes(item.name));
+	}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
+	colourOrder = computed(() => this.highlightKeepsColours() ? null : this.highlight(), ...ngDevMode ? [{ debugName: "colourOrder" }] : /* istanbul ignore next */ []);
+	styles = computed(() => {
+		const order = this.colourOrder();
+		const muted = this.isMuted();
+		return this.series().map((item, index) => {
+			const dashed = this.supportsDashes && !!item.dashed;
+			if (muted[index]) return {
+				colour: this.ink().context,
+				dashed
+			};
+			const style = chartSeriesStyle(order ? order.indexOf(item.name) : index, this.supportsDashes, this.dark());
+			return {
+				colour: item.colour ?? style.colour,
+				dashed: style.dashed || dashed
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	colours = computed(() => this.styles().map((style) => style.colour), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	dashed = computed(() => this.styles().map((style) => style.dashed), ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		const order = this.colourOrder();
+		const items = this.series().map((item, index) => ({
+			name: item.name,
+			...this.styles()[index]
+		})).filter((_, index) => !this.isMuted()[index]);
+		return order ? items.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) : items;
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	legendNote = computed(() => {
+		const count = this.isMuted().filter(Boolean).length;
+		return count ? `${count} more in grey` : "";
+	}, ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiAxisChartBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiAxisChartBase,
+		isStandalone: true,
+		inputs: {
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			highlight: {
+				classPropertyName: "highlight",
+				publicName: "highlight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			highlightKeepsColours: {
+				classPropertyName: "highlightKeepsColours",
+				publicName: "highlightKeepsColours",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiAxisChartBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
 		}],
-		highlightKeepsColours: [{
+		categories: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "highlightKeepsColours",
+				alias: "categories",
+				required: true
+			}]
+		}],
+		highlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlight",
 				required: false
 			}]
 		}],
-		legend: [{
+		highlightKeepsColours: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "legend",
+				alias: "highlightKeepsColours",
 				required: false
 			}]
 		}]
 	}
 });
-function numberFormatter(locale) {
-	const formatter = new Intl.NumberFormat(locale);
-	return (value) => formatter.format(value);
-}
 function chartAxisLabels(ink) {
 	return { style: {
 		colors: ink.muted,
@@ -1208,7 +1269,7 @@ var UiChartComponent = class UiChartComponent {
         ></div>
     `,
 		isInline: true,
-		styles: ["@layer properties;.ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-tooltip.apexcharts-theme-light{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));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-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}@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-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		styles: [".ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));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-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@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-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
@@ -1231,7 +1292,7 @@ i0.ɵɵngDeclareClassMetadata({
     `,
 			encapsulation: ViewEncapsulation.None,
 			host: { class: "ui-chart" },
-			styles: ["@layer properties;.ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-tooltip.apexcharts-theme-light{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));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-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}@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-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			styles: [".ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));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-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@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-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1711,14 +1772,18 @@ var UiChartFrameComponent = class UiChartFrameComponent {
                 />
             }
 
-            <ui-chart
-                [class.grow]="fill()"
-                [class.min-h-0]="fill()"
-                [options]="options()"
-                [ariaLabel]="ariaLabel()"
-                [hiddenSeries]="hiddenSeries()"
-                [emphasis]="emphasis()"
-            />
+            @if (options(); as options) {
+                <ui-chart
+                    [class.grow]="fill()"
+                    [class.min-h-0]="fill()"
+                    [options]="options"
+                    [ariaLabel]="ariaLabel()"
+                    [hiddenSeries]="hiddenSeries()"
+                    [emphasis]="emphasis()"
+                />
+            } @else {
+                <ng-content />
+            }
 
             <ui-chart-table
                 [caption]="ariaLabel()"
@@ -1821,14 +1886,18 @@ i0.ɵɵngDeclareClassMetadata({
                 />
             }
 
-            <ui-chart
-                [class.grow]="fill()"
-                [class.min-h-0]="fill()"
-                [options]="options()"
-                [ariaLabel]="ariaLabel()"
-                [hiddenSeries]="hiddenSeries()"
-                [emphasis]="emphasis()"
-            />
+            @if (options(); as options) {
+                <ui-chart
+                    [class.grow]="fill()"
+                    [class.min-h-0]="fill()"
+                    [options]="options"
+                    [ariaLabel]="ariaLabel()"
+                    [hiddenSeries]="hiddenSeries()"
+                    [emphasis]="emphasis()"
+                />
+            } @else {
+                <ng-content />
+            }
 
             <ui-chart-table
                 [caption]="ariaLabel()"
@@ -2004,16 +2073,7 @@ i0.ɵɵngDeclareClassMetadata({
 const MAX_BAR_THICKNESS = 24;
 const FADED_STRENGTH = .3;
 function fade(colour, ink) {
-	const hex = /^#([0-9a-f]{6})$/i;
-	const from = hex.exec(colour)?.[1];
-	const to = hex.exec(ink.surface)?.[1];
-	if (!from || !to) return ink.context;
-	const channel = (value, at) => parseInt(value.slice(at, at + 2), 16);
-	return `rgb(${[
-		0,
-		2,
-		4
-	].map((at) => Math.round(channel(from, at) * FADED_STRENGTH + channel(to, at) * .7)).join(", ")})`;
+	return mixChartColours(colour, ink.surface, FADED_STRENGTH) ?? ink.context;
 }
 var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
@@ -2537,98 +2597,535 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 			color: ink.muted,
 			offsetY: -4
 		};
-		return mergeChartOptions({
-			...base,
-			chart: {
-				...base.chart,
-				type: donut ? "donut" : "pie",
-				height: this.apexHeight()
-			},
-			colors: drawn.map((slice) => slice.colour),
-			labels: drawn.map((slice) => slice.name),
-			series: drawn.map((slice) => slice.value),
-			stroke: {
-				show: true,
-				width: 2,
-				colors: [ink.surface]
-			},
-			states: {
-				...base.states,
-				hover: { filter: { type: concealed ? "none" : "darken" } }
-			},
-			plotOptions: { pie: {
-				expandOnClick: false,
-				donut: {
-					size: "65%",
-					labels: {
-						show: donut,
-						name: centreText,
-						value: {
-							fontSize: "20px",
-							fontWeight: 600,
-							color: ink.text,
-							offsetY: 4,
-							formatter: (value) => this.formatValue(Number(value))
-						},
-						total: {
-							show: true,
-							showAlways: true,
-							label: this.totalLabel(),
-							...centreText,
-							formatter: () => this.formatValue(total)
-						}
-					}
-				}
-			} },
-			tooltip: concealed ? { enabled: false } : {
-				theme: "light",
-				fillSeriesColor: false,
-				custom: ({ seriesIndex }) => {
-					const slice = slices[seriesIndex];
-					return slice ? chartTooltipHtml("", [{
-						colour: slice.colour,
-						name: slice.name,
-						value: this.masked() ? void 0 : this.formatValue(slice.value)
-					}], total ? `${this.percentFormatter.format(slice.value / total)} of total` : "") : "";
-				}
-			}
-		}, this.options());
-	}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
+		return mergeChartOptions({
+			...base,
+			chart: {
+				...base.chart,
+				type: donut ? "donut" : "pie",
+				height: this.apexHeight()
+			},
+			colors: drawn.map((slice) => slice.colour),
+			labels: drawn.map((slice) => slice.name),
+			series: drawn.map((slice) => slice.value),
+			stroke: {
+				show: true,
+				width: 2,
+				colors: [ink.surface]
+			},
+			states: {
+				...base.states,
+				hover: { filter: { type: concealed ? "none" : "darken" } }
+			},
+			plotOptions: { pie: {
+				expandOnClick: false,
+				donut: {
+					size: "65%",
+					labels: {
+						show: donut,
+						name: centreText,
+						value: {
+							fontSize: "20px",
+							fontWeight: 600,
+							color: ink.text,
+							offsetY: 4,
+							formatter: (value) => this.formatValue(Number(value))
+						},
+						total: {
+							show: true,
+							showAlways: true,
+							label: this.totalLabel(),
+							...centreText,
+							formatter: () => this.formatValue(total)
+						}
+					}
+				}
+			} },
+			tooltip: concealed ? { enabled: false } : {
+				theme: "light",
+				fillSeriesColor: false,
+				custom: ({ seriesIndex }) => {
+					const slice = slices[seriesIndex];
+					return slice ? chartTooltipHtml("", [{
+						colour: slice.colour,
+						name: slice.name,
+						value: this.masked() ? void 0 : this.formatValue(slice.value)
+					}], total ? `${this.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]=\"displayFormatter()\"\n    [masked]=\"masked()\"\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",
+				"masked",
+				"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]=\"displayFormatter()\"\n    [masked]=\"masked()\"\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"];
+const SHADE_STEP = .16;
+const PALEST_SHADE = .4;
+const HEADER_MIN_WIDTH = 56;
+const HEADER_MIN_HEIGHT = 56;
+const NAME_MIN_WIDTH = 48;
+const NAME_MIN_HEIGHT = 24;
+const VALUE_MIN_HEIGHT = 42;
+function treemapGroupColours(groups, dark) {
+	return groups.map((group, index) => group.colour ?? chartColour(index, dark));
+}
+function drawnTreemapGroups(groups, colours, hidden, shades, ink) {
+	return groups.map((group, index) => drawnGroup(group, colours[index], shades, ink)).filter((group) => group.blocks.length > 0 && !hidden.includes(group.name));
+}
+function drawnGroup(group, colour, shades, ink) {
+	const items = group.items.filter((item) => item.value > 0);
+	const ranks = rankByValue(items.map((item) => item.value));
+	const blocks = items.map((item, index) => {
+		const fill = shades ? shadeOf(colour, ranks[index], ink) : colour;
+		return {
+			group: group.name,
+			item: item.name,
+			value: item.value,
+			fill,
+			labelInk: chartLabelInk(fill)
+		};
+	});
+	return {
+		name: group.name,
+		colour,
+		total: blocks.reduce((sum, block) => sum + block.value, 0),
+		blocks
+	};
+}
+function rankByValue(values) {
+	const biggestFirst = values.map((value, index) => ({
+		value,
+		index
+	})).sort((a, b) => b.value - a.value);
+	const ranks = [];
+	biggestFirst.forEach((entry, rank) => {
+		ranks[entry.index] = rank;
+	});
+	return ranks;
+}
+function shadeOf(colour, rank, ink) {
+	const strength = Math.max(1 - rank * SHADE_STEP, PALEST_SHADE);
+	return mixChartColours(colour, ink.surface, strength) ?? colour;
+}
+function treemapTableRows(groups) {
+	const items = groups.flatMap((group) => group.items.filter((item) => item.value > 0).map((item) => ({
+		name: `${group.name} – ${item.name}`,
+		value: item.value
+	})));
+	return {
+		categories: items.map((item) => item.name),
+		values: items.map((item) => item.value)
+	};
+}
+function placeTreemapGroups(groups, bounds) {
+	const groupRects = squarify(groups.map((group) => group.total), bounds, 8);
+	return groups.map((group, index) => placeGroup(group, groupRects[index]));
+}
+function placeGroup(group, rect) {
+	const hasHeader = rect.width >= HEADER_MIN_WIDTH && rect.height >= HEADER_MIN_HEIGHT;
+	const headerHeight = hasHeader ? 24 : 0;
+	const blockArea = {
+		x: 0,
+		y: headerHeight,
+		width: rect.width,
+		height: rect.height - headerHeight
+	};
+	const blockRects = squarify(group.blocks.map((block) => block.value), blockArea, 3);
+	return {
+		...group,
+		rect,
+		hasHeader,
+		placedBlocks: group.blocks.map((block, index) => ({
+			...block,
+			rect: blockRects[index],
+			label: labelFor(blockRects[index])
+		}))
+	};
+}
+function labelFor(rect) {
+	if (rect.width < NAME_MIN_WIDTH || rect.height < NAME_MIN_HEIGHT) return "none";
+	return rect.height < VALUE_MIN_HEIGHT ? "name" : "full";
+}
+function squarify(values, bounds, gap = 0) {
+	const total = values.reduce((sum, value) => sum + value, 0);
+	const rects = values.map(() => ({
+		x: bounds.x,
+		y: bounds.y,
+		width: 0,
+		height: 0
+	}));
+	if (total <= 0 || bounds.width <= 0 || bounds.height <= 0) return rects;
+	const outer = grow(bounds, gap / 2);
+	const scale = outer.width * outer.height / total;
+	const biggestFirst = values.map((value, index) => ({
+		index,
+		area: value * scale
+	})).sort((a, b) => b.area - a.area);
+	let remaining = outer;
+	let row = [];
+	for (const entry of biggestFirst) {
+		const side = Math.min(remaining.width, remaining.height);
+		const longer = [...row, entry];
+		if (row.length === 0 || worstAspect(longer, side) <= worstAspect(row, side)) row = longer;
+		else {
+			remaining = placeRow(row, remaining, rects);
+			row = [entry];
+		}
+	}
+	placeRow(row, remaining, rects);
+	return rects.map((rect) => rect.width > 0 ? grow(rect, -gap / 2) : rect);
+}
+function worstAspect(row, side) {
+	const sum = row.reduce((total, entry) => total + entry.area, 0);
+	const largest = Math.max(...row.map((entry) => entry.area));
+	const smallest = Math.min(...row.map((entry) => entry.area));
+	return Math.max(side * side * largest / (sum * sum), sum * sum / (side * side * smallest));
+}
+function placeRow(row, area, rects) {
+	const sum = row.reduce((total, entry) => total + entry.area, 0);
+	if (area.width >= area.height) {
+		const width = sum / area.height;
+		let y = area.y;
+		for (const entry of row) {
+			const height = entry.area / width;
+			rects[entry.index] = {
+				x: area.x,
+				y,
+				width,
+				height
+			};
+			y += height;
+		}
+		return {
+			x: area.x + width,
+			y: area.y,
+			width: area.width - width,
+			height: area.height
+		};
+	}
+	const height = sum / area.width;
+	let x = area.x;
+	for (const entry of row) {
+		const width = entry.area / height;
+		rects[entry.index] = {
+			x,
+			y: area.y,
+			width,
+			height
+		};
+		x += width;
+	}
+	return {
+		x: area.x,
+		y: area.y + height,
+		width: area.width,
+		height: area.height - height
+	};
+}
+function grow(rect, by) {
+	return {
+		x: rect.x - by,
+		y: rect.y - by,
+		width: Math.max(rect.width + by * 2, 0),
+		height: Math.max(rect.height + by * 2, 0)
+	};
+}
+const TOOLTIP_OFFSET = 12;
+var UiTreemapChartComponent = class UiTreemapChartComponent extends UiChartBase {
+	groups = input.required(...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
+	height = input(360, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	shades = input(true, {
+		...ngDevMode ? { debugName: "shades" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectable = input(false, {
+		...ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	valueLabel = input("Value", ...ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []);
+	itemSelect = output();
+	canvas = viewChild("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+	size = signal({
+		width: 0,
+		height: 0
+	}, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	pointed = signal(null, ...ngDevMode ? [{ debugName: "pointed" }] : /* istanbul ignore next */ []);
+	settled = signal(false, ...ngDevMode ? [{ debugName: "settled" }] : /* istanbul ignore next */ []);
+	percentFormatter = new Intl.NumberFormat(this.uiFormat.locale, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	fill = computed(() => this.height() === "fill", ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
+	fixedHeight = computed(() => {
+		const height = this.height();
+		return height === "fill" ? null : height;
+	}, ...ngDevMode ? [{ debugName: "fixedHeight" }] : /* istanbul ignore next */ []);
+	colours = computed(() => treemapGroupColours(this.groups(), this.dark()), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	drawnGroups = computed(() => drawnTreemapGroups(this.groups(), this.colours(), this.hiddenSeries(), this.shades(), this.ink()), ...ngDevMode ? [{ debugName: "drawnGroups" }] : /* istanbul ignore next */ []);
+	placedGroups = computed(() => {
+		const { width, height } = this.size();
+		return placeTreemapGroups(this.drawnGroups(), {
+			x: 0,
+			y: 0,
+			width,
+			height
+		});
+	}, ...ngDevMode ? [{ debugName: "placedGroups" }] : /* istanbul ignore next */ []);
+	total = computed(() => this.drawnGroups().reduce((sum, group) => sum + group.total, 0), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	tableRows = computed(() => treemapTableRows(this.groups()), ...ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []);
+	categories = computed(() => this.tableRows().categories, ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	series = computed(() => [{
+		name: this.valueLabel(),
+		data: this.tableRows().values
+	}], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => this.categories().length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => this.groups().map((group, index) => ({
+		group,
+		colour: this.colours()[index]
+	})).filter(({ group }) => group.items.some((item) => item.value > 0)).map(({ group, colour }) => ({
+		name: group.name,
+		colour
+	})), ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	legendNote = computed(() => "", ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
+	emphasised = computed(() => {
+		const emphasis = this.emphasis();
+		return this.drawnGroups().some((group) => group.name === emphasis) ? emphasis : null;
+	}, ...ngDevMode ? [{ debugName: "emphasised" }] : /* istanbul ignore next */ []);
+	tooltipFooter = computed(() => {
+		const pointed = this.pointed();
+		if (!pointed) return "";
+		const { group, block } = pointed;
+		const shareOfTotal = `${this.percent(block.value / this.total())} of total`;
+		return group.blocks.length > 1 ? `${this.percent(block.value / group.total)} of ${group.name} · ${shareOfTotal}` : shareOfTotal;
+	}, ...ngDevMode ? [{ debugName: "tooltipFooter" }] : /* istanbul ignore next */ []);
+	tooltipPosition = computed(() => {
+		const pointed = this.pointed();
+		const { width } = this.size();
+		if (!pointed) return null;
+		const flipped = pointed.x > width / 2;
+		return {
+			left: flipped ? null : pointed.x + TOOLTIP_OFFSET,
+			right: flipped ? width - pointed.x + TOOLTIP_OFFSET : null,
+			top: pointed.y + TOOLTIP_OFFSET
+		};
+	}, ...ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		effect((onCleanup) => {
+			const canvas = this.canvas()?.nativeElement;
+			if (!canvas) return;
+			const observer = new ResizeObserver(([entry]) => {
+				const { width, height } = entry.contentRect;
+				this.size.set({
+					width,
+					height
+				});
+				if (!this.settled()) requestAnimationFrame(() => this.settled.set(true));
+			});
+			observer.observe(canvas);
+			onCleanup(() => observer.disconnect());
+		});
+	}
+	isFaded(group) {
+		const emphasised = this.emphasised();
+		return !!emphasised && group.name !== emphasised;
+	}
+	point(event, group, block) {
+		const canvas = this.canvas()?.nativeElement;
+		if (!canvas || event.pointerType === "touch") return;
+		const bounds = canvas.getBoundingClientRect();
+		this.pointed.set({
+			group,
+			block,
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top
+		});
+	}
+	focus(group, block) {
+		this.pointed.set({
+			group,
+			block,
+			x: group.rect.x + block.rect.x + block.rect.width / 2,
+			y: group.rect.y + block.rect.y + block.rect.height / 2
+		});
+	}
+	select(block) {
+		this.itemSelect.emit({
+			group: block.group,
+			item: block.item
+		});
+	}
+	accessibleName(block) {
+		const name = `${block.item}, ${block.group}`;
+		return this.masked() ? name : `${name}, ${this.formatValue(block.value)}`;
+	}
+	percent(share) {
+		return this.percentFormatter.format(share);
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: UiPieChartComponent,
-		deps: null,
+		type: UiTreemapChartComponent,
+		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
+		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: UiPieChartComponent,
+		type: UiTreemapChartComponent,
 		isStandalone: true,
-		selector: "ui-pie-chart",
+		selector: "ui-treemap-chart",
 		inputs: {
-			variant: {
-				classPropertyName: "variant",
-				publicName: "variant",
+			groups: {
+				classPropertyName: "groups",
+				publicName: "groups",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			totalLabel: {
-				classPropertyName: "totalLabel",
-				publicName: "totalLabel",
+			shades: {
+				classPropertyName: "shades",
+				publicName: "shades",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectable: {
+				classPropertyName: "selectable",
+				publicName: "selectable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueLabel: {
+				classPropertyName: "valueLabel",
+				publicName: "valueLabel",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
+		outputs: { itemSelect: "itemSelect" },
 		host: { classAttribute: "block w-full min-w-0" },
+		viewQueries: [{
+			propertyName: "canvas",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
 		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]=\"displayFormatter()\"\n    [masked]=\"masked()\"\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]=\"null\"\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]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n>\n    <div\n        #canvas\n        class=\"ui-treemap\"\n        [class.ui-treemap--settled]=\"settled()\"\n        [class.grow]=\"fill()\"\n        [class.min-h-0]=\"fill()\"\n        [style.height.px]=\"fixedHeight()\"\n        [attr.role]=\"selectable() ? 'group' : 'img'\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (pointerleave)=\"pointed.set(null)\"\n    >\n        @if (concealed()) {\n            <!-- the proportions alone would give the amounts away, so one grey block stands in for them all -->\n            <div class=\"ui-treemap-concealed\" [style.background-color]=\"ink().grid\"></div>\n        } @else {\n            @for (group of placedGroups(); track group.name) {\n                <div\n                    class=\"ui-treemap-group\"\n                    [class.ui-treemap-group--faded]=\"isFaded(group)\"\n                    [style.left.px]=\"group.rect.x\"\n                    [style.top.px]=\"group.rect.y\"\n                    [style.width.px]=\"group.rect.width\"\n                    [style.height.px]=\"group.rect.height\"\n                >\n                    @if (group.hasHeader) {\n                        <div class=\"ui-treemap-header ui-text-caption\" aria-hidden=\"true\">\n                            <span class=\"ui-treemap-header-name\">{{ group.name }}</span>\n                            <span class=\"ui-treemap-header-total\">{{ formatValue(group.total) }}</span>\n                        </div>\n                    }\n\n                    @for (block of group.placedBlocks; track block.item) {\n                        @if (selectable()) {\n                            <button\n                                type=\"button\"\n                                class=\"ui-treemap-block ui-treemap-block--selectable ui-text-caption\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                [attr.aria-label]=\"accessibleName(block)\"\n                                (pointermove)=\"point($event, group, block)\"\n                                (focus)=\"focus(group, block)\"\n                                (blur)=\"pointed.set(null)\"\n                                (click)=\"select(block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </button>\n                        } @else {\n                            <div\n                                class=\"ui-treemap-block ui-text-caption\"\n                                aria-hidden=\"true\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                (pointermove)=\"point($event, group, block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </div>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pointed(); as pointed) {\n                <div\n                    class=\"ui-chart-tooltip-panel ui-treemap-tooltip\"\n                    aria-hidden=\"true\"\n                    [style.left.px]=\"tooltipPosition()?.left\"\n                    [style.right.px]=\"tooltipPosition()?.right\"\n                    [style.top.px]=\"tooltipPosition()?.top\"\n                >\n                    <div class=\"ui-chart-tooltip\">\n                        <div class=\"ui-chart-tooltip-title ui-text-caption\">{{ pointed.group.name }}</div>\n                        <div class=\"ui-chart-tooltip-row ui-text-body-alt\">\n                            <span\n                                class=\"ui-chart-tooltip-dot\"\n                                [style.--ui-chart-tooltip-colour]=\"pointed.block.fill\"\n                            ></span>\n                            <span class=\"ui-chart-tooltip-name\">{{ pointed.block.item }}</span>\n                            @if (!masked()) {\n                                <span class=\"ui-chart-tooltip-value\">{{ formatValue(pointed.block.value) }}</span>\n                            }\n                        </div>\n                        <div class=\"ui-chart-tooltip-footer ui-text-caption\">{{ tooltipFooter() }}</div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n</ui-chart-frame>\n\n<ng-template #label let-block>\n    @if (block.label !== 'none') {\n        <span class=\"ui-treemap-block-name\">{{ block.item }}</span>\n    }\n    @if (block.label === 'full') {\n        <span class=\"ui-treemap-block-value\">{{ formatValue(block.value) }}</span>\n    }\n</ng-template>\n",
+		styles: ["@layer properties;.ui-treemap{position:relative;display:block;width:100%}.ui-treemap-concealed{position:absolute;inset:0;border-radius:var(--radius-md, .375rem)}.ui-treemap-group,.ui-treemap-block{position:absolute}@media(prefers-reduced-motion:no-preference){.ui-treemap--settled .ui-treemap-group,.ui-treemap--settled .ui-treemap-block{transition-property:left,top,width,height,opacity;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: .3s;transition-duration:.3s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1))}}.ui-treemap-group--faded{opacity:.15}.ui-treemap-header{display:flex;height:calc(var(--spacing, .25rem) * 6);align-items:baseline;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * .5)}.ui-treemap-header-name{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-treemap-header-total{margin-inline-start:auto;flex-shrink:0;color:var(--muted-foreground-1);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-treemap-header-name,.ui-treemap-header-total{--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.ui-treemap-block{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:start}.ui-treemap-block--selectable{cursor:pointer}.ui-treemap-block--selectable:focus{--tw-outline-style: none;outline-style:none}.ui-treemap-block--selectable: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-treemap-block--selectable: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-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-treemap-block--selectable:focus-visible{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui-treemap-block:hover{filter:brightness(1.06)}.ui-treemap-block-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ui-treemap-block-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:85%}.ui-treemap-tooltip{pointer-events:none;position:absolute;z-index:10}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-leading{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;}@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-ease: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-leading: 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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));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-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@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-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
 			kind: "component",
 			type: UiChartFrameComponent,
 			selector: "ui-chart-frame",
@@ -2652,43 +3149,78 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 				"emphasis"
 			],
 			outputs: ["hiddenSeriesChange", "emphasisChange"]
-		}]
+		}],
+		encapsulation: i0.ViewEncapsulation.None
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: UiPieChartComponent,
+	type: UiTreemapChartComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-pie-chart",
-			imports: [UiChartFrameComponent],
+			selector: "ui-treemap-chart",
+			encapsulation: ViewEncapsulation.None,
+			imports: [NgTemplateOutlet, 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]=\"displayFormatter()\"\n    [masked]=\"masked()\"\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]=\"null\"\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]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n>\n    <div\n        #canvas\n        class=\"ui-treemap\"\n        [class.ui-treemap--settled]=\"settled()\"\n        [class.grow]=\"fill()\"\n        [class.min-h-0]=\"fill()\"\n        [style.height.px]=\"fixedHeight()\"\n        [attr.role]=\"selectable() ? 'group' : 'img'\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (pointerleave)=\"pointed.set(null)\"\n    >\n        @if (concealed()) {\n            <!-- the proportions alone would give the amounts away, so one grey block stands in for them all -->\n            <div class=\"ui-treemap-concealed\" [style.background-color]=\"ink().grid\"></div>\n        } @else {\n            @for (group of placedGroups(); track group.name) {\n                <div\n                    class=\"ui-treemap-group\"\n                    [class.ui-treemap-group--faded]=\"isFaded(group)\"\n                    [style.left.px]=\"group.rect.x\"\n                    [style.top.px]=\"group.rect.y\"\n                    [style.width.px]=\"group.rect.width\"\n                    [style.height.px]=\"group.rect.height\"\n                >\n                    @if (group.hasHeader) {\n                        <div class=\"ui-treemap-header ui-text-caption\" aria-hidden=\"true\">\n                            <span class=\"ui-treemap-header-name\">{{ group.name }}</span>\n                            <span class=\"ui-treemap-header-total\">{{ formatValue(group.total) }}</span>\n                        </div>\n                    }\n\n                    @for (block of group.placedBlocks; track block.item) {\n                        @if (selectable()) {\n                            <button\n                                type=\"button\"\n                                class=\"ui-treemap-block ui-treemap-block--selectable ui-text-caption\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                [attr.aria-label]=\"accessibleName(block)\"\n                                (pointermove)=\"point($event, group, block)\"\n                                (focus)=\"focus(group, block)\"\n                                (blur)=\"pointed.set(null)\"\n                                (click)=\"select(block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </button>\n                        } @else {\n                            <div\n                                class=\"ui-treemap-block ui-text-caption\"\n                                aria-hidden=\"true\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                (pointermove)=\"point($event, group, block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </div>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pointed(); as pointed) {\n                <div\n                    class=\"ui-chart-tooltip-panel ui-treemap-tooltip\"\n                    aria-hidden=\"true\"\n                    [style.left.px]=\"tooltipPosition()?.left\"\n                    [style.right.px]=\"tooltipPosition()?.right\"\n                    [style.top.px]=\"tooltipPosition()?.top\"\n                >\n                    <div class=\"ui-chart-tooltip\">\n                        <div class=\"ui-chart-tooltip-title ui-text-caption\">{{ pointed.group.name }}</div>\n                        <div class=\"ui-chart-tooltip-row ui-text-body-alt\">\n                            <span\n                                class=\"ui-chart-tooltip-dot\"\n                                [style.--ui-chart-tooltip-colour]=\"pointed.block.fill\"\n                            ></span>\n                            <span class=\"ui-chart-tooltip-name\">{{ pointed.block.item }}</span>\n                            @if (!masked()) {\n                                <span class=\"ui-chart-tooltip-value\">{{ formatValue(pointed.block.value) }}</span>\n                            }\n                        </div>\n                        <div class=\"ui-chart-tooltip-footer ui-text-caption\">{{ tooltipFooter() }}</div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n</ui-chart-frame>\n\n<ng-template #label let-block>\n    @if (block.label !== 'none') {\n        <span class=\"ui-treemap-block-name\">{{ block.item }}</span>\n    }\n    @if (block.label === 'full') {\n        <span class=\"ui-treemap-block-value\">{{ formatValue(block.value) }}</span>\n    }\n</ng-template>\n",
+			styles: ["@layer properties;.ui-treemap{position:relative;display:block;width:100%}.ui-treemap-concealed{position:absolute;inset:0;border-radius:var(--radius-md, .375rem)}.ui-treemap-group,.ui-treemap-block{position:absolute}@media(prefers-reduced-motion:no-preference){.ui-treemap--settled .ui-treemap-group,.ui-treemap--settled .ui-treemap-block{transition-property:left,top,width,height,opacity;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: .3s;transition-duration:.3s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1))}}.ui-treemap-group--faded{opacity:.15}.ui-treemap-header{display:flex;height:calc(var(--spacing, .25rem) * 6);align-items:baseline;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * .5)}.ui-treemap-header-name{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-treemap-header-total{margin-inline-start:auto;flex-shrink:0;color:var(--muted-foreground-1);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-treemap-header-name,.ui-treemap-header-total{--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.ui-treemap-block{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:start}.ui-treemap-block--selectable{cursor:pointer}.ui-treemap-block--selectable:focus{--tw-outline-style: none;outline-style:none}.ui-treemap-block--selectable: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-treemap-block--selectable: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-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-treemap-block--selectable:focus-visible{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui-treemap-block:hover{filter:brightness(1.06)}.ui-treemap-block-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ui-treemap-block-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:85%}.ui-treemap-tooltip{pointer-events:none;position:absolute;z-index:10}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-leading{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;}@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-ease: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-leading: 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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));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-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@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-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
-		variant: [{
+		groups: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "variant",
+				alias: "groups",
+				required: true
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
 				required: false
 			}]
 		}],
-		totalLabel: [{
+		shades: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "totalLabel",
+				alias: "shades",
+				required: false
+			}]
+		}],
+		selectable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectable",
+				required: false
+			}]
+		}],
+		valueLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueLabel",
 				required: false
 			}]
+		}],
+		itemSelect: [{
+			type: i0.Output,
+			args: ["itemSelect"]
+		}],
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
 		}]
 	}
 });
-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 */ []);
@@ -5122,6 +5654,7 @@ var UiSelectComponent = class UiSelectComponent {
 	hasMore = signal(true, ...ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []);
 	optionTemplate = contentChild("option", ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
 	triggerTemplate = contentChild("trigger", ...ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []);
+	leadingTemplate = contentChild("leading", ...ngDevMode ? [{ debugName: "leadingTemplate" }] : /* istanbul ignore next */ []);
 	activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
 	listId = `ui-select-${nextId$4++}`;
 	hasSelection = computed(() => this.multiple() ? this.selectedItems().length > 0 : this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
@@ -5138,6 +5671,8 @@ var UiSelectComponent = class UiSelectComponent {
 	}, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
 	isEmpty = computed(() => this.multiple() ? !this.selectedItems().length : this.selectedItem() === null, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
 	showTags = computed(() => this.multiple() && this.multipleDisplay() === "tags" && this.searchMode() !== "inline", ...ngDevMode ? [{ debugName: "showTags" }] : /* istanbul ignore next */ []);
+	showLeading = computed(() => !!this.leadingTemplate() && !this.multiple() && this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "showLeading" }] : /* istanbul ignore next */ []);
+	leadingHidden = computed(() => this.isOpen() && this.query() !== "", ...ngDevMode ? [{ debugName: "leadingHidden" }] : /* istanbul ignore next */ []);
 	createQuery = computed(() => {
 		const query = this.query().trim();
 		const display = this.displayWith();
@@ -5563,22 +6098,32 @@ var UiSelectComponent = class UiSelectComponent {
 			heroCheck,
 			heroPlus
 		})],
-		queries: [{
-			propertyName: "optionTemplate",
-			first: true,
-			predicate: ["option"],
-			descendants: true,
-			isSignal: true
-		}, {
-			propertyName: "triggerTemplate",
-			first: true,
-			predicate: ["trigger"],
-			descendants: true,
-			isSignal: true
-		}],
+		queries: [
+			{
+				propertyName: "optionTemplate",
+				first: true,
+				predicate: ["option"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "triggerTemplate",
+				first: true,
+				predicate: ["trigger"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "leadingTemplate",
+				first: true,
+				predicate: ["leading"],
+				descendants: true,
+				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! py-1.5!\"\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-1.5 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\" [class.text-muted-foreground-1]=\"isEmpty()\">\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\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\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                            class=\"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;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);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) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);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(--border-line-2)}@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"],
+		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]=\"showLeading() ? 'h-auto! py-1.5! ps-2!' : 'h-auto! py-1.5!'\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            @if (showLeading()) {\n                <ng-template #leading>\n                    <!-- hidden rather than removed, so the text doesn't move -->\n                    <span class=\"ui-select-leading\" [class.invisible]=\"leadingHidden()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"leadingTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                </ng-template>\n            }\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-1.5 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\" [class.text-muted-foreground-1]=\"isEmpty()\">\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\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\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                            class=\"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;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);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-leading{margin-inline-start:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.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) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);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(--border-line-2)}@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: [
 			{
 				kind: "component",
@@ -5708,8 +6253,8 @@ i0.ɵɵngDeclareClassMetadata({
 				heroCheck,
 				heroPlus
 			})],
-			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! py-1.5!\"\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-1.5 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\" [class.text-muted-foreground-1]=\"isEmpty()\">\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\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\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                            class=\"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;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);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) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);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(--border-line-2)}@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"]
+			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]=\"showLeading() ? 'h-auto! py-1.5! ps-2!' : 'h-auto! py-1.5!'\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            @if (showLeading()) {\n                <ng-template #leading>\n                    <!-- hidden rather than removed, so the text doesn't move -->\n                    <span class=\"ui-select-leading\" [class.invisible]=\"leadingHidden()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"leadingTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                </ng-template>\n            }\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-1.5 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\" [class.text-muted-foreground-1]=\"isEmpty()\">\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\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\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                            class=\"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;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);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-leading{margin-inline-start:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.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) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);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(--border-line-2)}@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"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -5930,6 +6475,10 @@ i0.ɵɵngDeclareClassMetadata({
 		triggerTemplate: [{
 			type: i0.ContentChild,
 			args: ["trigger", { isSignal: true }]
+		}],
+		leadingTemplate: [{
+			type: i0.ContentChild,
+			args: ["leading", { isSignal: true }]
 		}]
 	}
 });
@@ -9627,6 +10176,54 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var UiTableCellDirective = class UiTableCellDirective {
+	columnId = input.required({
+		...ngDevMode ? { debugName: "columnId" } : /* istanbul ignore next */ {},
+		alias: "uiTableCell"
+	});
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTableCellDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiTableCellDirective,
+		isStandalone: true,
+		selector: "ng-template[uiTableCell]",
+		inputs: { columnId: {
+			classPropertyName: "columnId",
+			publicName: "uiTableCell",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTableCellDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[uiTableCell]" }]
+	}],
+	propDecorators: { columnId: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiTableCell",
+			required: true
+		}]
+	}] }
+});
 var UiTableRegistry = class UiTableRegistry {
 	tables = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "tables" }] : /* istanbul ignore next */ []);
 	get(id) {
@@ -9732,6 +10329,8 @@ var UiTableComponent = class UiTableComponent {
 	dragOverColumnId = signal(null, ...ngDevMode ? [{ debugName: "dragOverColumnId" }] : /* istanbul ignore next */ []);
 	dragPreview = signal(null, ...ngDevMode ? [{ debugName: "dragPreview" }] : /* istanbul ignore next */ []);
 	draggedRowIndex = signal(null, ...ngDevMode ? [{ debugName: "draggedRowIndex" }] : /* istanbul ignore next */ []);
+	cellDirectives = contentChildren(UiTableCellDirective, ...ngDevMode ? [{ debugName: "cellDirectives" }] : /* istanbul ignore next */ []);
+	cellTemplates = computed(() => new Map(this.cellDirectives().map((cell) => [cell.columnId(), cell.template])), ...ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []);
 	isEmpty = computed(() => !this.loading() && !this.error() && this.rows().length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
 	generatedClasses = computed(() => [
 		"ui-table",
@@ -9804,6 +10403,7 @@ var UiTableComponent = class UiTableComponent {
 	registry = inject(UiTableRegistry);
 	uiFormat = inject(UI_FORMAT);
 	privateText = injectPrivateText();
+	privacy = inject(UI_PRIVACY);
 	loadedQuery = "";
 	loadedFilters = {};
 	resizeState = null;
@@ -10256,8 +10856,13 @@ var UiTableComponent = class UiTableComponent {
 			heroViewColumns,
 			heroBars2
 		})],
+		queries: [{
+			propertyName: "cellDirectives",
+			predicate: UiTableCellDirective,
+			isSignal: true
+		}],
 		ngImport: i0,
-		template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+		template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (cellTemplates().get(column.id); as template) {\n                                    @if (column.sensitive && privacy() !== 'visible') {\n                                        <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                    } @else {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: { $implicit: row, value: cellValue(column, row) }\"\n                                        />\n                                    }\n                                } @else if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
 		styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;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))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--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)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{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;}@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-divide-y-reverse: 0;--tw-font-weight: 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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [
 			{
@@ -10272,6 +10877,16 @@ var UiTableComponent = class UiTableComponent {
 					"color"
 				]
 			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
 			{
 				kind: "component",
 				type: UiButtonComponent,
@@ -10457,6 +11072,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-table",
 			imports: [
 				NgIcon,
+				NgTemplateOutlet,
 				UiButtonComponent,
 				UiCheckboxComponent,
 				UiDropdownComponent,
@@ -10475,7 +11091,7 @@ i0.ɵɵngDeclareClassMetadata({
 				heroViewColumns,
 				heroBars2
 			})],
-			template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+			template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (cellTemplates().get(column.id); as template) {\n                                    @if (column.sensitive && privacy() !== 'visible') {\n                                        <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                    } @else {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: { $implicit: row, value: cellValue(column, row) }\"\n                                        />\n                                    }\n                                } @else if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
 			styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;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))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--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)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{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;}@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-divide-y-reverse: 0;--tw-font-weight: 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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
@@ -10646,6 +11262,10 @@ i0.ɵɵngDeclareClassMetadata({
 		rowsReordered: [{
 			type: i0.Output,
 			args: ["rowsReordered"]
+		}],
+		cellDirectives: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UiTableCellDirective), { isSignal: true }]
 		}]
 	}
 });
@@ -14796,6 +15416,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, DisclosureTriggerAppearances, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
+export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, DisclosureTriggerAppearances, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableCellDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiTreemapChartComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartLabelInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, mixChartColours, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
 
 //# sourceMappingURL=area8975-ui.mjs.map