@area8975/ui 0.2.1 → 0.2.2-dev.35

package/fesm2022/area8975-ui.mjs

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
 import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 import { NgIcon, provideIcons } from "@ng-icons/core";
-import { heroArrowUp, heroArrowUpTray, heroBars2, heroBars3, heroCalendar, heroCalendarDateRange, heroCheck, heroChevronDoubleLeft, heroChevronDown, heroChevronLeft, heroChevronRight, heroChevronUp, heroChevronUpDown, heroClock, heroDocument, heroEye, heroEyeSlash, heroFunnel, heroMagnifyingGlass, heroMinus, heroPlus, heroQuestionMarkCircle, heroViewColumns, heroXMark } from "@ng-icons/heroicons/outline";
+import { heroArrowUp, heroArrowUpTray, heroBars2, heroBars3, heroCalendar, heroCalendarDateRange, heroCheck, heroChevronDoubleLeft, heroChevronDown, heroChevronLeft, heroChevronRight, heroClock, heroDocument, heroEye, heroEyeSlash, heroFunnel, heroMagnifyingGlass, heroMinus, heroPlus, heroQuestionMarkCircle, heroViewColumns, heroXMark } from "@ng-icons/heroicons/outline";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { Subject, catchError, debounceTime, filter, of, skip, switchMap } from "rxjs";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
@@ -638,6 +638,31 @@ function chartAxisLabels(ink) {
 		fontSize: "12px"
 	} };
 }
+const LABEL_GAP = 16;
+const AXIS_FONT_SIZE = 12;
+function categoryLabelStep(count, width, labelWidth) {
+	if (count <= 1 || width <= 0) return 1;
+	return Math.max(1, Math.ceil((labelWidth + LABEL_GAP) / (width / count)));
+}
+function thinnedCategoryLabels(categories) {
+	const widest = Math.max(0, ...categories.map(measureLabel));
+	return (value, _, context) => {
+		const position = typeof value === "number" ? Math.floor(value) - 1 : null;
+		const index = position ?? context?.i;
+		const label = position === null ? String(value) : categories[position] ?? "";
+		const width = context?.w?.globals?.gridWidth ?? 0;
+		if (index === void 0) return label;
+		const step = categoryLabelStep(categories.length, width, widest);
+		return (categories.length - 1 - index) % step === 0 ? label : "";
+	};
+}
+let measuringContext;
+function measureLabel(label) {
+	if (measuringContext === void 0) measuringContext = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	if (!measuringContext) return label.length * AXIS_FONT_SIZE * .6;
+	measuringContext.font = `${AXIS_FONT_SIZE}px ${getComputedStyle(document.body).fontFamily}`;
+	return measuringContext.measureText(label).width;
+}
 function baseChartOptions(ink) {
 	const labels = chartAxisLabels(ink);
 	return {
@@ -869,7 +894,8 @@ var UiChartLegendComponent = class UiChartLegendComponent {
 	hover(name) {
 		this.hovered.set(name);
 	}
-	focus(name) {
+	focus(name, event) {
+		if (name && !event?.target?.matches(":focus-visible")) return;
 		this.focused.set(name);
 	}
 	isHidden(item) {
@@ -949,7 +975,7 @@ var UiChartLegendComponent = class UiChartLegendComponent {
 			focusChange: "focusChange"
 		},
 		ngImport: i0,
-		template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
+		template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name, $event)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
 		styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 	});
 };
@@ -962,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ui-chart-legend",
-			template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
+			template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name, $event)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
 			styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
@@ -2017,7 +2043,11 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 			xaxis: {
 				...base.xaxis,
 				categories,
-				labels: horizontal ? valueLabels : labels
+				labels: horizontal ? valueLabels : {
+					...labels,
+					formatter: thinnedCategoryLabels(categories),
+					rotate: 0
+				}
 			},
 			yaxis: {
 				...base.yaxis,
@@ -2167,7 +2197,6 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const BarChartOrientations = ["vertical", "horizontal"];
-const MAX_AXIS_LABELS = 8;
 const MAX_CONTEXT_ROWS = 5;
 const SORT_ROWS_AFTER = 8;
 var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
@@ -2244,11 +2273,9 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 			},
 			xaxis: {
 				...base.xaxis,
-				categories,
-				tickAmount: categories.length > MAX_AXIS_LABELS ? MAX_AXIS_LABELS : void 0,
 				labels: {
 					...labels,
-					hideOverlappingLabels: true,
+					formatter: thinnedCategoryLabels(categories),
 					rotate: 0
 				},
 				crosshairs: {
@@ -4397,7 +4424,7 @@ var UiBadgeComponent = class UiBadgeComponent {
 		host: { properties: { "class": "generatedClasses()" } },
 		ngImport: i0,
 		template: "<ng-content />\n",
-		styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--muted);color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -4411,7 +4438,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-badge",
 			host: { "[class]": "generatedClasses()" },
 			template: "<ng-content />\n",
-			styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--muted);color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	propDecorators: {
@@ -6525,6 +6552,8 @@ const BadgeSizes = [
 	"md",
 	"lg"
 ];
+const ButtonGroupAppearances = ["attached", "segmented"];
+const UI_BUTTON_GROUP = new InjectionToken("UI_BUTTON_GROUP");
 var UiButtonComponent = class UiButtonComponent {
 	appearance = input("solid", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
 	intent = input("primary", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
@@ -6541,6 +6570,8 @@ var UiButtonComponent = class UiButtonComponent {
 		transform: booleanAttribute
 	});
 	isDisabled = computed(() => this.disabled() || this.loading(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	group = inject(UI_BUTTON_GROUP, { optional: true });
+	segmented = computed(() => this.group?.appearance() === "segmented", ...ngDevMode ? [{ debugName: "segmented" }] : /* istanbul ignore next */ []);
 	generatedClasses = computed(() => [
 		"ui-button",
 		this.intentAndAppearanceClasses(),
@@ -6549,16 +6580,17 @@ var UiButtonComponent = class UiButtonComponent {
 		this.classes()
 	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
 	intentAndAppearanceClasses = computed(() => {
+		if (this.segmented()) return "ui-button--segmented";
 		const intent = this.intent();
 		const appearance = this.appearance();
 		return [intent, appearance].includes("none") ? "" : `ui-button--${intent}-${appearance}`;
 	}, ...ngDevMode ? [{ debugName: "intentAndAppearanceClasses" }] : /* istanbul ignore next */ []);
-	sizeClasses = computed(() => `ui-button--${this.size()}`, ...ngDevMode ? [{ debugName: "sizeClasses" }] : /* istanbul ignore next */ []);
-	textClasses = computed(() => ({
+	sizeClasses = computed(() => this.segmented() ? "" : `ui-button--${this.size()}`, ...ngDevMode ? [{ debugName: "sizeClasses" }] : /* istanbul ignore next */ []);
+	textClasses = computed(() => this.segmented() ? "ui-text-body-alt" : {
 		sm: "ui-text-caption",
 		md: "ui-text-body",
 		lg: "ui-text-body"
-	})[this.size()], ...ngDevMode ? [{ debugName: "textClasses" }] : /* istanbul ignore next */ []);
+	}[this.size()], ...ngDevMode ? [{ debugName: "textClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -6631,9 +6663,10 @@ var UiButtonComponent = class UiButtonComponent {
 				transformFunction: null
 			}
 		},
+		host: { properties: { "class.pointer-events-none": "isDisabled()" } },
 		ngImport: i0,
 		template: "<button\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"generatedClasses()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-busy]=\"loading() || null\"\n>\n    <ng-content></ng-content>\n\n    @if (loading()) {\n        <span class=\"sr-only\">Loading</span>\n\n        <span class=\"flex items-end justify-center\" aria-hidden=\"true\">\n            <span class=\"ms-0.5 inline-flex items-end gap-px pb-px\">\n                <span class=\"ui-button__loading-dot\">.</span>\n                <span class=\"ui-button__loading-dot\">.</span>\n                <span class=\"ui-button__loading-dot\">.</span>\n            </span>\n        </span>\n    }\n</button>\n",
-		styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !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-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !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-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !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-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !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-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link: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-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link: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-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link: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-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link: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-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group:not(.ui-button-group--segmented)>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !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-button-group:not(.ui-button-group--segmented)>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !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-button-group:not(.ui-button-group--segmented)>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !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-button-group:not(.ui-button-group--segmented)>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}.ui-button--segmented{min-height:calc(1lh + calc(var(--spacing, .25rem) * 3));cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none;justify-content:center;border-color:transparent;--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--segmented:hover{color:var(--foreground)}.ui-button--segmented:hover,.ui-button--segmented:focus-visible{background-color:var(--surface)}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !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-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link: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-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link: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-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link: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-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link: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-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -6645,8 +6678,9 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ui-button",
+			host: { "[class.pointer-events-none]": "isDisabled()" },
 			template: "<button\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"generatedClasses()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-busy]=\"loading() || null\"\n>\n    <ng-content></ng-content>\n\n    @if (loading()) {\n        <span class=\"sr-only\">Loading</span>\n\n        <span class=\"flex items-end justify-center\" aria-hidden=\"true\">\n            <span class=\"ms-0.5 inline-flex items-end gap-px pb-px\">\n                <span class=\"ui-button__loading-dot\">.</span>\n                <span class=\"ui-button__loading-dot\">.</span>\n                <span class=\"ui-button__loading-dot\">.</span>\n            </span>\n        </span>\n    }\n</button>\n",
-			styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !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-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !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-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !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-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !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-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link: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-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link: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-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link: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-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link: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-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group:not(.ui-button-group--segmented)>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !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-button-group:not(.ui-button-group--segmented)>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !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-button-group:not(.ui-button-group--segmented)>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !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-button-group:not(.ui-button-group--segmented)>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}.ui-button--segmented{min-height:calc(1lh + calc(var(--spacing, .25rem) * 3));cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none;justify-content:center;border-color:transparent;--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--segmented:hover{color:var(--foreground)}.ui-button--segmented:hover,.ui-button--segmented:focus-visible{background-color:var(--surface)}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !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-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link: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-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link: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-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link: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-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link: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-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	propDecorators: {
@@ -6743,6 +6777,7 @@ const ButtonTypes = [
 	"reset"
 ];
 var UiButtonGroupComponent = class UiButtonGroupComponent {
+	appearance = input("attached", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
 	buttons = contentChildren(UiButtonComponent, {
 		...ngDevMode ? { debugName: "buttons" } : /* istanbul ignore next */ {},
 		descendants: false
@@ -6761,7 +6796,21 @@ var UiButtonGroupComponent = class UiButtonGroupComponent {
 		type: UiButtonGroupComponent,
 		isStandalone: true,
 		selector: "ui-button-group",
-		host: { classAttribute: "inline-flex" },
+		inputs: { appearance: {
+			classPropertyName: "appearance",
+			publicName: "appearance",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "group" },
+			properties: { "class.ui-button-group--segmented": "appearance() === \"segmented\"" }
+		},
+		providers: [{
+			provide: UI_BUTTON_GROUP,
+			useExisting: UiButtonGroupComponent
+		}],
 		queries: [{
 			propertyName: "buttons",
 			predicate: UiButtonComponent,
@@ -6769,7 +6818,8 @@ var UiButtonGroupComponent = class UiButtonGroupComponent {
 		}],
 		ngImport: i0,
 		template: "<ng-content></ng-content>",
-		isInline: true
+		isInline: true,
+		styles: ["@layer properties;:host{display:inline-flex}:host(.ui-button-group--segmented){display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -6782,16 +6832,34 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-button-group",
 			template: "<ng-content></ng-content>",
-			host: { class: "inline-flex" }
+			host: {
+				role: "group",
+				"[class.ui-button-group--segmented]": "appearance() === \"segmented\""
+			},
+			providers: [{
+				provide: UI_BUTTON_GROUP,
+				useExisting: UiButtonGroupComponent
+			}],
+			styles: ["@layer properties;:host{display:inline-flex}:host(.ui-button-group--segmented){display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
-	propDecorators: { buttons: [{
-		type: i0.ContentChildren,
-		args: [i0.forwardRef(() => UiButtonComponent), {
-			descendants: false,
-			isSignal: true
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		buttons: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UiButtonComponent), {
+				descendants: false,
+				isSignal: true
+			}]
 		}]
-	}] }
+	}
 });
 const ISO_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
 const TIME_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/;
@@ -8945,7 +9013,7 @@ var UiSegmentedComponent = class UiSegmentedComponent {
 		host: { properties: { "class.block": "fill()" } },
 		ngImport: i0,
 		template: "<div class=\"ui-segmented\" [class.ui-segmented--fill]=\"fill()\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <label\n            class=\"ui-segmented-option ui-text-body-alt\"\n            [class.ui-segmented-option--selected]=\"option.value === value()\"\n        >\n            <input\n                type=\"radio\"\n                class=\"sr-only\"\n                [name]=\"name\"\n                [checked]=\"option.value === value()\"\n                [attr.aria-label]=\"option.ariaLabel || null\"\n                (change)=\"value.set(option.value)\"\n            />\n            {{ option.label }}\n        </label>\n    }\n</div>\n",
-		styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(: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);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@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-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{min-height:calc(1lh + calc(var(--spacing, .25rem) * 3));cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(: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);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@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-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -8959,7 +9027,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-segmented",
 			host: { "[class.block]": "fill()" },
 			template: "<div class=\"ui-segmented\" [class.ui-segmented--fill]=\"fill()\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <label\n            class=\"ui-segmented-option ui-text-body-alt\"\n            [class.ui-segmented-option--selected]=\"option.value === value()\"\n        >\n            <input\n                type=\"radio\"\n                class=\"sr-only\"\n                [name]=\"name\"\n                [checked]=\"option.value === value()\"\n                [attr.aria-label]=\"option.ariaLabel || null\"\n                (change)=\"value.set(option.value)\"\n            />\n            {{ option.label }}\n        </label>\n    }\n</div>\n",
-			styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(: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);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@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-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{min-height:calc(1lh + calc(var(--spacing, .25rem) * 3));cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(: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);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@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-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	propDecorators: {
@@ -9535,10 +9603,9 @@ var UiTableComponent = class UiTableComponent {
 		else this.sort.set(null);
 		this.resetAndReload();
 	}
-	sortIcon(column) {
+	sortDirection(column) {
 		const current = this.sort();
-		if (!current || current.columnId !== column.id) return "heroChevronUpDown";
-		return current.direction === "asc" ? "heroChevronUp" : "heroChevronDown";
+		return current?.columnId === column.id ? current.direction : null;
 	}
 	goToPage(page) {
 		if (page < 0 || page >= this.totalPages()) return;
@@ -9893,14 +9960,11 @@ var UiTableComponent = class UiTableComponent {
 			heroMagnifyingGlass,
 			heroFunnel,
 			heroViewColumns,
-			heroBars2,
-			heroChevronUpDown,
-			heroChevronUp,
-			heroChevronDown
+			heroBars2
 		})],
 		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 hocus: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                                    <ng-icon\n                                        [name]=\"sortIcon(column)\"\n                                        class=\"ms-auto size-4 shrink-0\"\n                                    />\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-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\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.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}: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)));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 [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-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"],
+		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 hocus: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-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\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: [
 			{
 				kind: "component",
@@ -10101,13 +10165,10 @@ i0.ɵɵngDeclareClassMetadata({
 				heroMagnifyingGlass,
 				heroFunnel,
 				heroViewColumns,
-				heroBars2,
-				heroChevronUpDown,
-				heroChevronUp,
-				heroChevronDown
+				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 hocus: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                                    <ng-icon\n                                        [name]=\"sortIcon(column)\"\n                                        class=\"ms-auto size-4 shrink-0\"\n                                    />\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-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\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.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}: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)));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 [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-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"]
+			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 hocus: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-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\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"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -14292,6 +14353,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, 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, 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_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, 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, 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, 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 };
 
 //# sourceMappingURL=area8975-ui.mjs.map