@forgeroute/ui 0.4.17 → 0.4.19

package/fesm2022/forgeroute-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, PLATFORM_ID, Renderer2, TemplateRef, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, PLATFORM_ID, Renderer2, TemplateRef, ViewEncapsulation, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
 import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { catchError, debounceTime, distinctUntilChanged, skip, switchMap } from "rxjs/operators";
@@ -4302,6 +4302,7 @@ const EXTRA_ICONS = {
 	"image": "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z M8.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z M21 15l-5-5L5 21",
 	"chevron-up": "M18 15l-6-6-6 6",
 	"chevron-down": "M6 9l6 6 6-6",
+	"chevron-right": "M9 18l6-6-6-6",
 	"arrow-left": "M19 12H5 M12 19l-7-7 7-7",
 	"bell": "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0",
 	"print": "M6 9V2h12v7 M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2 M6 14h12v8H6z",
@@ -4314,6 +4315,7 @@ const EXTRA_ICONS = {
 	"grip": "M9 5h.01 M15 5h.01 M9 12h.01 M15 12h.01 M9 19h.01 M15 19h.01",
 	"card": "M3 4h18a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M1 10h22",
 	"view-off": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M3 3l18 18",
+	"refund": "M3 10h10a8 8 0 0 1 8 8v2 M3 10l6 6 M3 10l6-6",
 	"bank": "M3 21h18 M3 10h18 M5 6l7-3 7 3 M4 10v11 M20 10v11 M8 14v3 M12 14v3 M16 14v3"
 };
 function iconPath(name) {
@@ -9957,6 +9959,7 @@ var DataTableComponent = class DataTableComponent {
 		this.showToolbar = input(true, ...ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []);
 		this.showMoreActions = input(true, ...ngDevMode ? [{ debugName: "showMoreActions" }] : /* istanbul ignore next */ []);
 		this.showSearch = input(true, ...ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []);
+		this.showQuickTabs = input(true, ...ngDevMode ? [{ debugName: "showQuickTabs" }] : /* istanbul ignore next */ []);
 		this._showHeader = computed(() => this.showSearch() || this.showToolbar() || this._effectiveTabs().length > 0, ...ngDevMode ? [{ debugName: "_showHeader" }] : /* istanbul ignore next */ []);
 		this.countsEndpoint = input("", ...ngDevMode ? [{ debugName: "countsEndpoint" }] : /* istanbul ignore next */ []);
 		this.params = input(null, ...ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []);
@@ -10005,6 +10008,7 @@ var DataTableComponent = class DataTableComponent {
 		this._tabCounts = signal({}, ...ngDevMode ? [{ debugName: "_tabCounts" }] : /* istanbul ignore next */ []);
 		this._filterCounts = signal({}, ...ngDevMode ? [{ debugName: "_filterCounts" }] : /* istanbul ignore next */ []);
 		this._effectiveTabs = computed(() => {
+			if (!this.showQuickTabs()) return [];
 			const counts = this._tabCounts();
 			const present = this._presentKeys(counts);
 			const active = this._activeTab();
@@ -10928,6 +10932,13 @@ var DataTableComponent = class DataTableComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				showQuickTabs: {
+					classPropertyName: "showQuickTabs",
+					publicName: "showQuickTabs",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				countsEndpoint: {
 					classPropertyName: "countsEndpoint",
 					publicName: "countsEndpoint",
@@ -12893,6 +12904,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showQuickTabs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showQuickTabs",
+				required: false
+			}]
+		}],
 		countsEndpoint: [{
 			type: i0.Input,
 			args: [{
@@ -14465,6 +14484,8 @@ var StepperComponent = class StepperComponent {
 		this.accentLabels = input(false, ...ngDevMode ? [{ debugName: "accentLabels" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("Progress", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.labelsOnSmallScreens = input("current", ...ngDevMode ? [{ debugName: "labelsOnSmallScreens" }] : /* istanbul ignore next */ []);
+		this.labelPosition = input("beside", ...ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []);
+		this.stackBelow = input(null, ...ngDevMode ? [{ debugName: "stackBelow" }] : /* istanbul ignore next */ []);
 		this.minStepWidth = input("", ...ngDevMode ? [{ debugName: "minStepWidth" }] : /* istanbul ignore next */ []);
 		this.scrollable = input(false, ...ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []);
 		this.leadingWidth = input("", ...ngDevMode ? [{ debugName: "leadingWidth" }] : /* istanbul ignore next */ []);
@@ -14472,11 +14493,13 @@ var StepperComponent = class StepperComponent {
 		this.stepClick = output();
 		this._win = inject(DOCUMENT).defaultView;
 		this._narrow = signal(false, ...ngDevMode ? [{ debugName: "_narrow" }] : /* istanbul ignore next */ []);
+		this._stacked = signal(false, ...ngDevMode ? [{ debugName: "_stacked" }] : /* istanbul ignore next */ []);
+		this.orient = computed(() => this._stacked() ? "vertical" : this.orientation(), ...ngDevMode ? [{ debugName: "orient" }] : /* istanbul ignore next */ []);
 		this.compactPx = computed(() => typeof this.compact() === "number" && this._narrow(), ...ngDevMode ? [{ debugName: "compactPx" }] : /* istanbul ignore next */ []);
 		this._id = `ui-st-${++nextStepperId}`;
 		this.olMinWidth = computed(() => {
 			const w = this.minStepWidth().trim();
-			return w && this.orientation() === "horizontal" ? `calc(${this.steps().length} * ${w})` : null;
+			return w && this.orient() === "horizontal" ? `calc(${this.steps().length} * ${w})` : null;
 		}, ...ngDevMode ? [{ debugName: "olMinWidth" }] : /* istanbul ignore next */ []);
 		this.summary = computed(() => {
 			const steps = this.steps();
@@ -14515,6 +14538,16 @@ var StepperComponent = class StepperComponent {
 				};
 			});
 		}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		effect((onCleanup) => {
+			const b = this.stackBelow();
+			this._stacked.set(false);
+			if (typeof b !== "number" || !Number.isFinite(b) || typeof this._win?.matchMedia !== "function") return;
+			const mq = this._win.matchMedia(`(max-width: ${b - .02}px)`);
+			this._stacked.set(mq.matches);
+			const on = (e) => this._stacked.set(e.matches);
+			mq.addEventListener("change", on);
+			onCleanup(() => mq.removeEventListener("change", on));
+		});
 		effect((onCleanup) => {
 			const c = this.compact();
 			this._narrow.set(false);
@@ -14626,6 +14659,20 @@ var StepperComponent = class StepperComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				labelPosition: {
+					classPropertyName: "labelPosition",
+					publicName: "labelPosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stackBelow: {
+					classPropertyName: "stackBelow",
+					publicName: "stackBelow",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				minStepWidth: {
 					classPropertyName: "minStepWidth",
 					publicName: "minStepWidth",
@@ -14666,13 +14713,14 @@ var StepperComponent = class StepperComponent {
 			ngImport: i0,
 			template: `
     <div class="st-root" [class.st-c-sm]="compact() === 'sm'" [class.st-c-md]="compact() === 'md'" [class.st-c-lg]="compact() === 'lg'" [class.st-c-on]="compactPx()"
-      [class.st-has-leading]="!!leadingWidth() && orientation() === 'horizontal'" [style.--st-leading-w]="leadingWidth() || null">
+      [class.st-has-leading]="!!leadingWidth() && orient() === 'horizontal'" [style.--st-leading-w]="leadingWidth() || null">
     <div class="st-leading"><ng-content select="[stepper-leading]" /></div>
     <div class="st-scroll" [class.st-scrollable]="scrollable()">
     <ol class="st"
       [style.min-width]="olMinWidth()"
-      [class.st-horizontal]="orientation() === 'horizontal'"
-      [class.st-vertical]="orientation() === 'vertical'"
+      [class.st-horizontal]="orient() === 'horizontal'"
+      [class.st-vertical]="orient() === 'vertical'"
+      [class.st-below]="labelPosition() === 'below' && orient() === 'horizontal'"
       [class.st-sm]="size() === 'sm'"
       [class.st-labels-current]="labelsOnSmallScreens() === 'current'"
       [class.st-themed]="!!accentColor()"
@@ -14728,7 +14776,7 @@ var StepperComponent = class StepperComponent {
     </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:block}.st-root{position:relative}.st-leading{display:none}.st-has-leading .st-leading{display:block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.st-has-leading .st-scroll{margin-inline-start:calc(var(--st-leading-w) + 1rem)}.st-scrollable{overflow-x:auto;padding-top:4px;padding-bottom:4px}.st-compact{display:none}.st-compact-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.st-compact-label{min-width:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--st-accent, #0f172a);overflow-wrap:anywhere}.st-compact-count{flex-shrink:0;font-size:.8125rem;color:#64748b}.st-c-on .st-scroll,.st-c-on .st-leading{display:none}.st-c-on .st-compact{display:block}@media(max-width:479.98px){.st-c-sm .st-scroll,.st-c-sm .st-leading{display:none}.st-c-sm .st-compact{display:block}}@media(max-width:767.98px){.st-c-md .st-scroll,.st-c-md .st-leading{display:none}.st-c-md .st-compact{display:block}}@media(max-width:1023.98px){.st-c-lg .st-scroll,.st-c-lg .st-leading{display:none}.st-c-lg .st-compact{display:block}}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current]:not([data-error=true]) .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-accent-labels .st-step[data-state=current]:not([data-error=true]) .st-label{color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"],
+			styles: [":host{display:block}.st-root{position:relative}.st-leading{display:none}.st-has-leading .st-leading{display:block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.st-has-leading .st-scroll{margin-inline-start:calc(var(--st-leading-w) + 1rem)}.st-scrollable{overflow-x:auto;padding-top:4px;padding-bottom:4px}.st-compact{display:none}.st-compact-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.st-compact-label{min-width:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--st-accent, #0f172a);overflow-wrap:anywhere}.st-compact-count{flex-shrink:0;font-size:.8125rem;color:#64748b}.st-c-on .st-scroll,.st-c-on .st-leading{display:none}.st-c-on .st-compact{display:block}@media(max-width:479.98px){.st-c-sm .st-scroll,.st-c-sm .st-leading{display:none}.st-c-sm .st-compact{display:block}}@media(max-width:767.98px){.st-c-md .st-scroll,.st-c-md .st-leading{display:none}.st-c-md .st-compact{display:block}}@media(max-width:1023.98px){.st-c-lg .st-scroll,.st-c-lg .st-leading{display:none}.st-c-lg .st-compact{display:block}}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current]:not([data-error=true]) .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-accent-labels .st-step[data-state=current]:not([data-error=true]) .st-label{color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}.st-below{--st-ind: 40px}.st-below.st-sm{--st-ind: 32px}.st-below .st-step,.st-below .st-step:last-child{flex:1 1 0;flex-direction:column;align-items:center}.st-below .st-item{align-items:center;text-align:center;max-width:100%}.st-below .st-btn{flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;z-index:1;padding:2px 4px}.st-below .st-ind{position:relative;z-index:1;border-color:#d1d5db}.st-below .st-label{line-height:1.35;text-align:center;max-width:110px;font-size:.875rem;overflow-wrap:normal}.st-below.st-sm .st-label{font-size:.75rem;max-width:96px}.st-below .st-num{display:block;width:12px;height:12px;border-radius:50%;font-size:0;background:transparent}.st-below.st-sm .st-num{width:10px;height:10px}.st-below .st-step[data-state=current] .st-ind{background:#fff;color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-below .st-step[data-state=current] .st-num{background:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-below .st-conn{position:absolute;top:calc(var(--st-ind) / 2 + 2px);left:50%;width:100%;min-width:0;height:4px;margin:-2px 0 0;flex:none}.st-below .st-step:last-child .st-conn{display:none}.st-below .st-conn:after{transform-origin:left center}@media(max-width:480px){.st-below .st-conn{margin-left:0;margin-right:0;flex-basis:auto}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -14776,13 +14824,14 @@ i0.ɵɵngDeclareClassMetadata({
 			},
 			template: `
     <div class="st-root" [class.st-c-sm]="compact() === 'sm'" [class.st-c-md]="compact() === 'md'" [class.st-c-lg]="compact() === 'lg'" [class.st-c-on]="compactPx()"
-      [class.st-has-leading]="!!leadingWidth() && orientation() === 'horizontal'" [style.--st-leading-w]="leadingWidth() || null">
+      [class.st-has-leading]="!!leadingWidth() && orient() === 'horizontal'" [style.--st-leading-w]="leadingWidth() || null">
     <div class="st-leading"><ng-content select="[stepper-leading]" /></div>
     <div class="st-scroll" [class.st-scrollable]="scrollable()">
     <ol class="st"
       [style.min-width]="olMinWidth()"
-      [class.st-horizontal]="orientation() === 'horizontal'"
-      [class.st-vertical]="orientation() === 'vertical'"
+      [class.st-horizontal]="orient() === 'horizontal'"
+      [class.st-vertical]="orient() === 'vertical'"
+      [class.st-below]="labelPosition() === 'below' && orient() === 'horizontal'"
       [class.st-sm]="size() === 'sm'"
       [class.st-labels-current]="labelsOnSmallScreens() === 'current'"
       [class.st-themed]="!!accentColor()"
@@ -14837,7 +14886,7 @@ i0.ɵɵngDeclareClassMetadata({
       <span class="st-sr">{{ r.srText }}</span>
     </ng-template>
   `,
-			styles: [":host{display:block}.st-root{position:relative}.st-leading{display:none}.st-has-leading .st-leading{display:block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.st-has-leading .st-scroll{margin-inline-start:calc(var(--st-leading-w) + 1rem)}.st-scrollable{overflow-x:auto;padding-top:4px;padding-bottom:4px}.st-compact{display:none}.st-compact-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.st-compact-label{min-width:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--st-accent, #0f172a);overflow-wrap:anywhere}.st-compact-count{flex-shrink:0;font-size:.8125rem;color:#64748b}.st-c-on .st-scroll,.st-c-on .st-leading{display:none}.st-c-on .st-compact{display:block}@media(max-width:479.98px){.st-c-sm .st-scroll,.st-c-sm .st-leading{display:none}.st-c-sm .st-compact{display:block}}@media(max-width:767.98px){.st-c-md .st-scroll,.st-c-md .st-leading{display:none}.st-c-md .st-compact{display:block}}@media(max-width:1023.98px){.st-c-lg .st-scroll,.st-c-lg .st-leading{display:none}.st-c-lg .st-compact{display:block}}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current]:not([data-error=true]) .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-accent-labels .st-step[data-state=current]:not([data-error=true]) .st-label{color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"]
+			styles: [":host{display:block}.st-root{position:relative}.st-leading{display:none}.st-has-leading .st-leading{display:block;position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.st-has-leading .st-scroll{margin-inline-start:calc(var(--st-leading-w) + 1rem)}.st-scrollable{overflow-x:auto;padding-top:4px;padding-bottom:4px}.st-compact{display:none}.st-compact-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.st-compact-label{min-width:0;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--st-accent, #0f172a);overflow-wrap:anywhere}.st-compact-count{flex-shrink:0;font-size:.8125rem;color:#64748b}.st-c-on .st-scroll,.st-c-on .st-leading{display:none}.st-c-on .st-compact{display:block}@media(max-width:479.98px){.st-c-sm .st-scroll,.st-c-sm .st-leading{display:none}.st-c-sm .st-compact{display:block}}@media(max-width:767.98px){.st-c-md .st-scroll,.st-c-md .st-leading{display:none}.st-c-md .st-compact{display:block}}@media(max-width:1023.98px){.st-c-lg .st-scroll,.st-c-lg .st-leading{display:none}.st-c-lg .st-compact{display:block}}.st{list-style:none;margin:0;padding:0;display:flex;--st-ind: 28px}.st-sm{--st-ind: 22px}.st-horizontal{flex-direction:row;align-items:flex-start}.st-vertical{flex-direction:column}.st-step{position:relative;display:flex;min-width:0}.st-horizontal .st-step{flex:1 1 0;align-items:flex-start}.st-horizontal .st-step:last-child{flex:0 1 auto}.st-vertical .st-step{flex-direction:column;padding-bottom:20px}.st-vertical .st-step:last-child{padding-bottom:0}.st-item{display:flex;flex-direction:column;min-width:0;gap:2px}.st-horizontal .st-item{flex:0 1 auto}.st-btn{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:2px 4px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}button.st-btn{cursor:pointer}.st-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.st-btn:focus:not(:focus-visible){outline:none}@media(hover:hover){button.st-btn:hover .st-label{text-decoration:underline}}.st-ind{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--st-ind);height:var(--st-ind);border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;background:#fff;border:2px solid #cbd5e1;color:#64748b}.st-sm .st-ind{font-size:.6875rem}.st-sm .st-check{width:11px;height:11px}.st-step[data-state=complete] .st-ind{background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-color:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));color:#fff}.st-step[data-state=current] .st-ind{background:var(--st-accent, var(--ui-accent, #1d4ed8));border-color:var(--st-accent, var(--ui-accent, #1d4ed8));color:#fff;box-shadow:0 0 0 3px var(--ui-accent-soft, #bfdbfe)}@supports (color: color-mix(in srgb,red 30%,white)){.st-themed .st-step[data-state=current]:not([data-error=true]) .st-ind{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-accent) 30%,white)}}.st-step[data-error=true] .st-ind{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:none}.st-label{font-size:.875rem;font-weight:500;line-height:var(--st-ind);color:#64748b;min-width:0;overflow-wrap:anywhere}.st-sm .st-label{font-size:.8125rem}.st-step[data-state=complete] .st-label{color:#1e293b}.st-step[data-state=current] .st-label{color:#0f172a;font-weight:600}.st-step[data-error=true] .st-label{color:#b91c1c}.st-accent-labels .st-step[data-state=current]:not([data-error=true]) .st-label{color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-opt{font-size:.75rem;line-height:var(--st-ind);color:#64748b;white-space:nowrap}.st-desc{font-size:.8125rem;line-height:1.4;color:#64748b;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-errmsg{font-size:.8125rem;line-height:1.4;color:#b91c1c;padding-left:calc(var(--st-ind) + 12px);overflow-wrap:anywhere}.st-step[data-disabled=true] .st-item{opacity:.5}.st-sr,.st-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-conn{position:relative;display:block;background:#e2e8f0;border-radius:1px}.st-conn:after{content:\"\";position:absolute;inset:0;background:var(--st-complete, var(--st-accent, var(--ui-accent, #1d4ed8)));border-radius:1px;transform-origin:top left;transform:scale(0);transition:transform .3s ease}.st-step[data-state=complete] .st-conn:after{transform:scale(1)}.st-horizontal .st-conn{flex:1 1 12px;min-width:12px;height:2px;margin:calc(var(--st-ind) / 2 + 1px) 8px 0}.st-vertical .st-conn{position:absolute;left:calc(var(--st-ind) / 2 + 3px);top:calc(var(--st-ind) + 8px);bottom:4px;width:2px}@media(pointer:coarse),(max-width:480px){.st-btn{min-height:44px;align-items:center}button.st-btn{min-width:44px}.st-horizontal .st-conn{margin-top:21px}.st-vertical .st-conn{top:calc(26px + var(--st-ind) / 2)}}@media(max-width:480px){.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-label,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-opt,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-desc,.st-horizontal.st-labels-current .st-step:not([data-state=current]) .st-errmsg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.st-horizontal .st-conn{margin-left:4px;margin-right:4px;min-width:8px;flex-basis:8px}}.st-below{--st-ind: 40px}.st-below.st-sm{--st-ind: 32px}.st-below .st-step,.st-below .st-step:last-child{flex:1 1 0;flex-direction:column;align-items:center}.st-below .st-item{align-items:center;text-align:center;max-width:100%}.st-below .st-btn{flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;z-index:1;padding:2px 4px}.st-below .st-ind{position:relative;z-index:1;border-color:#d1d5db}.st-below .st-label{line-height:1.35;text-align:center;max-width:110px;font-size:.875rem;overflow-wrap:normal}.st-below.st-sm .st-label{font-size:.75rem;max-width:96px}.st-below .st-num{display:block;width:12px;height:12px;border-radius:50%;font-size:0;background:transparent}.st-below.st-sm .st-num{width:10px;height:10px}.st-below .st-step[data-state=current] .st-ind{background:#fff;color:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-below .st-step[data-state=current] .st-num{background:var(--st-accent, var(--ui-accent, #1d4ed8))}.st-below .st-conn{position:absolute;top:calc(var(--st-ind) / 2 + 2px);left:50%;width:100%;min-width:0;height:4px;margin:-2px 0 0;flex:none}.st-below .st-step:last-child .st-conn{display:none}.st-below .st-conn:after{transform-origin:left center}@media(max-width:480px){.st-below .st-conn{margin-left:0;margin-right:0;flex-basis:auto}}@media(prefers-reduced-motion:reduce){.st-conn:after{transition:none}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -14933,6 +14982,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelPosition",
+				required: false
+			}]
+		}],
+		stackBelow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stackBelow",
+				required: false
+			}]
+		}],
 		minStepWidth: [{
 			type: i0.Input,
 			args: [{
@@ -24181,8 +24246,9 @@ var FormRowComponent = class FormRowComponent {
 			ngImport: i0,
 			template: `<div class="fr-row" [class.fr-row--4]="cols() === 4" [style.--fr-cols]="cols()"><ng-content /></div>`,
 			isInline: true,
-			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>::ng-deep .ui-span-3{grid-column:1 / -1}}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
+			styles: ["ui-form-row{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>.ui-span-2{grid-column:span 2}.fr-row>.ui-span-3{grid-column:span 3}.fr-row>.ui-span-all{grid-column:1 / -1}@media(max-width:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>.ui-span-3{grid-column:1 / -1}}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>.ui-span-2,.fr-row>.ui-span-3,.fr-row>.ui-span-all{grid-column:1 / -1}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
 		});
 	}
 };
@@ -24197,8 +24263,9 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-form-row",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
 			template: `<div class="fr-row" [class.fr-row--4]="cols() === 4" [style.--fr-cols]="cols()"><ng-content /></div>`,
-			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>::ng-deep .ui-span-3{grid-column:1 / -1}}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"]
+			styles: ["ui-form-row{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>.ui-span-2{grid-column:span 2}.fr-row>.ui-span-3{grid-column:span 3}.fr-row>.ui-span-all{grid-column:1 / -1}@media(max-width:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>.ui-span-3{grid-column:1 / -1}}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>.ui-span-2,.fr-row>.ui-span-3,.fr-row>.ui-span-all{grid-column:1 / -1}}\n"]
 		}]
 	}],
 	propDecorators: { cols: [{
@@ -24284,8 +24351,19 @@ var ListItemComponent = class ListItemComponent {
 		this.badge = input(null, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
 		this.badgeVariant = input("green", ...ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []);
 		this.details = input([], ...ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []);
+		this.icon = input("", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.iconColor = input("slate", ...ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []);
+		this.iconD = () => this.icon() ? iconPath(this.icon()) ?? null : null;
 		this.select = output();
-		this.visibleDetails = () => this.details().filter((d) => !!d);
+		this.visibleDetails = () => this.details().map((d) => typeof d === "string" ? {
+			text: d,
+			d: null,
+			tone: "default"
+		} : d ? {
+			text: d.text,
+			d: d.icon ? iconPath(d.icon) ?? null : null,
+			tone: d.tone ?? "default"
+		} : null).filter((d) => !!d && !!d.text);
 	}
 	get _borderedClass() {
 		return this.bordered();
@@ -24398,29 +24476,60 @@ var ListItemComponent = class ListItemComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconColor: {
+					classPropertyName: "iconColor",
+					publicName: "iconColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { select: "select" },
 			host: { properties: { "class.li-bordered": "this._borderedClass" } },
 			ngImport: i0,
 			template: `
+    <ng-template #tile>
+      @if (iconD(); as d) {
+        <span class="li-icon" [class]="'li-icon li-icon--' + iconColor()" aria-hidden="true">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path [attr.d]="d" /></svg>
+        </span>
+      }
+    </ng-template>
+    <ng-template #content>
+      <div class="li-title-row">
+        <span class="li-title">{{ title() }}</span>
+        @if (badge() && (checked() || alwaysShowBadge())) {
+          <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
+        }
+      </div>
+      @if (visibleDetails().length) {
+        <div class="li-details">
+          @for (detail of visibleDetails(); track $index) {
+            <span class="li-detail" [class.li-detail--warning]="detail.tone === 'warning'" [class.li-detail--danger]="detail.tone === 'danger'">
+              @if (detail.d) {
+                <svg class="li-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="detail.d" /></svg>
+              }
+              <span class="li-detail-text">{{ detail.text }}</span>
+            </span>
+          }
+        </div>
+      }
+    </ng-template>
+
     <div class="li-row" [class.li-row--highlighted]="highlighted()" [class.li-row--static]="!interactive()" [class.li-row--wrap]="wrapText() || !interactive()">
 
       @if (!interactive()) {
+        <ng-container [ngTemplateOutlet]="tile" />
         <div class="li-body li-body--static">
-          <div class="li-title-row">
-            <span class="li-title">{{ title() }}</span>
-            @if (badge() && (checked() || alwaysShowBadge())) {
-              <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
-            }
-          </div>
-          @if (visibleDetails().length) {
-            <div class="li-details">
-              @for (detail of visibleDetails(); track $index) {
-                <span>{{ detail }}</span>
-              }
-            </div>
-          }
+          <ng-container [ngTemplateOutlet]="content" />
         </div>
       } @else {
       @if (leading() === 'radio') {
@@ -24442,20 +24551,9 @@ var ListItemComponent = class ListItemComponent {
         />
       }
 
+      <ng-container [ngTemplateOutlet]="tile" />
       <label class="li-body" [attr.for]="inputId() || null">
-        <div class="li-title-row">
-          <span class="li-title">{{ title() }}</span>
-          @if (badge() && (checked() || alwaysShowBadge())) {
-            <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
-          }
-        </div>
-        @if (visibleDetails().length) {
-          <div class="li-details">
-            @for (detail of visibleDetails(); track $index) {
-              <span>{{ detail }}</span>
-            }
-          </div>
-        }
+        <ng-container [ngTemplateOutlet]="content" />
       </label>
       }
 
@@ -24464,14 +24562,24 @@ var ListItemComponent = class ListItemComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}:host(.li-bordered){border:1px solid var(--border, #e2e8f0);border-radius:8px;overflow:hidden;margin-bottom:6px}:host(.li-bordered):last-child{margin-bottom:0}.li-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}:host(.li-bordered) .li-row{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row ::ng-deep [list-item-action],.li-row ::ng-deep [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:3px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.875rem;font-weight:500;color:var(--text-primary, #1e293b)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-wrap:wrap;gap:6px;font-size:.775rem;color:var(--text-secondary, #64748b)}.li-row--wrap .li-details span{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"],
+			styles: ["ui-list-item{display:block}ui-list-item(.li-bordered){border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);margin-bottom:8px;&:last-child{margin-bottom:0}}.li-row{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s;ui-list-item(.li-bordered) &{border-bottom:none}}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:4px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:2px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"],
 			dependencies: [{
 				kind: "component",
 				type: BadgeComponent,
 				selector: "ui-badge",
 				inputs: ["label", "variant"]
+			}, {
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
 			}],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
 		});
 	}
 };
@@ -24486,25 +24594,43 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-list-item",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			imports: [BadgeComponent],
+			encapsulation: ViewEncapsulation.None,
+			imports: [BadgeComponent, NgTemplateOutlet],
 			template: `
+    <ng-template #tile>
+      @if (iconD(); as d) {
+        <span class="li-icon" [class]="'li-icon li-icon--' + iconColor()" aria-hidden="true">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path [attr.d]="d" /></svg>
+        </span>
+      }
+    </ng-template>
+    <ng-template #content>
+      <div class="li-title-row">
+        <span class="li-title">{{ title() }}</span>
+        @if (badge() && (checked() || alwaysShowBadge())) {
+          <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
+        }
+      </div>
+      @if (visibleDetails().length) {
+        <div class="li-details">
+          @for (detail of visibleDetails(); track $index) {
+            <span class="li-detail" [class.li-detail--warning]="detail.tone === 'warning'" [class.li-detail--danger]="detail.tone === 'danger'">
+              @if (detail.d) {
+                <svg class="li-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="detail.d" /></svg>
+              }
+              <span class="li-detail-text">{{ detail.text }}</span>
+            </span>
+          }
+        </div>
+      }
+    </ng-template>
+
     <div class="li-row" [class.li-row--highlighted]="highlighted()" [class.li-row--static]="!interactive()" [class.li-row--wrap]="wrapText() || !interactive()">
 
       @if (!interactive()) {
+        <ng-container [ngTemplateOutlet]="tile" />
         <div class="li-body li-body--static">
-          <div class="li-title-row">
-            <span class="li-title">{{ title() }}</span>
-            @if (badge() && (checked() || alwaysShowBadge())) {
-              <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
-            }
-          </div>
-          @if (visibleDetails().length) {
-            <div class="li-details">
-              @for (detail of visibleDetails(); track $index) {
-                <span>{{ detail }}</span>
-              }
-            </div>
-          }
+          <ng-container [ngTemplateOutlet]="content" />
         </div>
       } @else {
       @if (leading() === 'radio') {
@@ -24526,20 +24652,9 @@ i0.ɵɵngDeclareClassMetadata({
         />
       }
 
+      <ng-container [ngTemplateOutlet]="tile" />
       <label class="li-body" [attr.for]="inputId() || null">
-        <div class="li-title-row">
-          <span class="li-title">{{ title() }}</span>
-          @if (badge() && (checked() || alwaysShowBadge())) {
-            <ui-badge [label]="badge()!" [variant]="badgeVariant()" />
-          }
-        </div>
-        @if (visibleDetails().length) {
-          <div class="li-details">
-            @for (detail of visibleDetails(); track $index) {
-              <span>{{ detail }}</span>
-            }
-          </div>
-        }
+        <ng-container [ngTemplateOutlet]="content" />
       </label>
       }
 
@@ -24547,7 +24662,7 @@ i0.ɵɵngDeclareClassMetadata({
 
     </div>
   `,
-			styles: [":host{display:block}:host(.li-bordered){border:1px solid var(--border, #e2e8f0);border-radius:8px;overflow:hidden;margin-bottom:6px}:host(.li-bordered):last-child{margin-bottom:0}.li-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}:host(.li-bordered) .li-row{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row ::ng-deep [list-item-action],.li-row ::ng-deep [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:3px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.875rem;font-weight:500;color:var(--text-primary, #1e293b)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-wrap:wrap;gap:6px;font-size:.775rem;color:var(--text-secondary, #64748b)}.li-row--wrap .li-details span{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"]
+			styles: ["ui-list-item{display:block}ui-list-item(.li-bordered){border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);margin-bottom:8px;&:last-child{margin-bottom:0}}.li-row{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s;ui-list-item(.li-bordered) &{border-bottom:none}}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:4px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:2px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -24659,6 +24774,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconColor",
+				required: false
+			}]
+		}],
 		select: [{
 			type: i0.Output,
 			args: ["select"]
@@ -24739,6 +24870,8 @@ var ListComponent = class ListComponent {
 		this.moveLaterLabel = input(void 0, ...ngDevMode ? [{ debugName: "moveLaterLabel" }] : /* istanbul ignore next */ []);
 		this.helpText = input("Hold Shift and press the arrow keys to move this item. Shift plus Home or End moves it to the start or end.", ...ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []);
 		this.moveAnnouncement = input((label, position, total) => `${label} moved to position ${position} of ${total}`, ...ngDevMode ? [{ debugName: "moveAnnouncement" }] : /* istanbul ignore next */ []);
+		this.navigable = input(false, ...ngDevMode ? [{ debugName: "navigable" }] : /* istanbul ignore next */ []);
+		this.itemClick = output();
 		this.itemsChange = output();
 		this.reorder = output();
 		this.rowTemplate = contentChild(TemplateRef, ...ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []);
@@ -24824,7 +24957,18 @@ var ListComponent = class ListComponent {
 	move(from, to) {
 		return this.apply(from, to, null);
 	}
+	emitItemClick(e) {
+		const target = e.target;
+		if (!target || target.closest("button, a, input, select, textarea, [data-move]")) return;
+		const idx = this.rowIndexOf(target, e.currentTarget);
+		const row = this.rows()[idx];
+		if (row) this.itemClick.emit(row.item);
+	}
 	onKeydown(e) {
+		if (this.navigable() && e.key === "Enter" && e.target?.classList.contains("ul-item")) {
+			this.emitItemClick(e);
+			return;
+		}
 		if (!this.canReorder() || e.ctrlKey || e.metaKey) return;
 		const list = e.currentTarget;
 		const target = e.target;
@@ -24864,6 +25008,7 @@ var ListComponent = class ListComponent {
 		}
 	}
 	onClick(e) {
+		if (this.navigable()) this.emitItemClick(e);
 		if (!this.canReorder()) return;
 		const btn = e.target?.closest("[data-move]") ?? null;
 		if (!btn) return;
@@ -25108,9 +25253,17 @@ var ListComponent = class ListComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				navigable: {
+					classPropertyName: "navigable",
+					publicName: "navigable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
+				itemClick: "itemClick",
 				itemsChange: "itemsChange",
 				reorder: "reorder"
 			},
@@ -25130,9 +25283,10 @@ var ListComponent = class ListComponent {
             [class.ul-item--draggable]="direct()"
             [class.ul-item--dragging]="row.dragging"
             [class.ul-item--over]="dragIndex() !== null && dragIndex() !== row.index && overIndex() === row.index"
+            [class.ul-item--nav]="navigable()"
             [attr.data-index]="row.index"
             [attr.draggable]="direct() ? 'true' : null"
-            [attr.tabindex]="direct() ? 0 : null"
+            [attr.tabindex]="direct() || navigable() ? 0 : null"
             [attr.aria-roledescription]="direct() ? 'sortable item' : null"
             [attr.aria-label]="direct() ? row.label : null"
             [attr.aria-describedby]="direct() ? helpId : null">
@@ -25144,6 +25298,9 @@ var ListComponent = class ListComponent {
                 {{ row.label }}
               }
             </div>
+            @if (navigable()) {
+              <svg class="ul-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 18l6-6-6-6"/></svg>
+            }
             @if (showControls()) {
               <div class="ul-controls">
                 <ui-button variant="icon" data-move="up" [ariaLabel]="row.earlierLabel" [disabled]="disabled() || row.first">
@@ -25189,7 +25346,7 @@ var ListComponent = class ListComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}:host ::ng-deep .ul-item--draggable img,:host ::ng-deep .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav>.ul-row{padding-inline-end:16px}.ul-item--nav:hover .ul-chevron{color:#0f172a}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -25229,7 +25386,8 @@ var ListComponent = class ListComponent {
 					"modal-footer-right"
 				]
 			}],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
 		});
 	}
 };
@@ -25244,6 +25402,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-list",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
 			imports: [NgTemplateOutlet, ButtonComponent],
 			template: `
     <ng-template #rowsTpl>
@@ -25253,9 +25412,10 @@ i0.ɵɵngDeclareClassMetadata({
             [class.ul-item--draggable]="direct()"
             [class.ul-item--dragging]="row.dragging"
             [class.ul-item--over]="dragIndex() !== null && dragIndex() !== row.index && overIndex() === row.index"
+            [class.ul-item--nav]="navigable()"
             [attr.data-index]="row.index"
             [attr.draggable]="direct() ? 'true' : null"
-            [attr.tabindex]="direct() ? 0 : null"
+            [attr.tabindex]="direct() || navigable() ? 0 : null"
             [attr.aria-roledescription]="direct() ? 'sortable item' : null"
             [attr.aria-label]="direct() ? row.label : null"
             [attr.aria-describedby]="direct() ? helpId : null">
@@ -25267,6 +25427,9 @@ i0.ɵɵngDeclareClassMetadata({
                 {{ row.label }}
               }
             </div>
+            @if (navigable()) {
+              <svg class="ul-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 18l6-6-6-6"/></svg>
+            }
             @if (showControls()) {
               <div class="ul-controls">
                 <ui-button variant="icon" data-move="up" [ariaLabel]="row.earlierLabel" [disabled]="disabled() || row.first">
@@ -25311,7 +25474,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
-			styles: [":host{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}:host ::ng-deep .ul-item--draggable img,:host ::ng-deep .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav>.ul-row{padding-inline-end:16px}.ul-item--nav:hover .ul-chevron{color:#0f172a}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -25451,6 +25614,18 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		navigable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigable",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
 		itemsChange: [{
 			type: i0.Output,
 			args: ["itemsChange"]
@@ -27371,6 +27546,50 @@ const US_STATES = [
 		label: "District of Columbia"
 	}
 ];
+var ShellProjectedStylesComponent = class ShellProjectedStylesComponent {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ShellProjectedStylesComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: ShellProjectedStylesComponent,
+			isStandalone: true,
+			selector: "ui-shell-projected-styles",
+			ngImport: i0,
+			template: "",
+			isInline: true,
+			styles: ["ui-shell-projected-styles{display:none}ui-app-shell .nav-icon svg{width:17px;height:17px;stroke:color-mix(in srgb,var(--shell-text, #fff) 90%,transparent);transition:stroke .15s;flex-shrink:0}ui-app-shell .sidebar-nav a:hover .nav-icon svg{stroke:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}ui-app-shell .sidebar-nav a.active .nav-icon svg{stroke:#93c5fd}@media(min-width:1025px){ui-app-shell .shell.collapsed .brand-full img,ui-app-shell .shell.collapsed .brand-full svg{width:44px;height:44px;max-width:none;object-fit:cover;object-position:50% 42%}ui-app-shell .shell.collapsed .nav-icon svg{width:20px;height:20px}}@media(prefers-reduced-motion:reduce){ui-app-shell .nav-icon svg{transition:none!important}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ShellProjectedStylesComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-shell-projected-styles",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			template: "",
+			styles: ["ui-shell-projected-styles{display:none}ui-app-shell .nav-icon svg{width:17px;height:17px;stroke:color-mix(in srgb,var(--shell-text, #fff) 90%,transparent);transition:stroke .15s;flex-shrink:0}ui-app-shell .sidebar-nav a:hover .nav-icon svg{stroke:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}ui-app-shell .sidebar-nav a.active .nav-icon svg{stroke:#93c5fd}@media(min-width:1025px){ui-app-shell .shell.collapsed .brand-full img,ui-app-shell .shell.collapsed .brand-full svg{width:44px;height:44px;max-width:none;object-fit:cover;object-position:50% 42%}ui-app-shell .shell.collapsed .nav-icon svg{width:20px;height:20px}}@media(prefers-reduced-motion:reduce){ui-app-shell .nav-icon svg{transition:none!important}}\n"]
+		}]
+	}]
+});
 function appShellGroupsStorageKey(persistKey) {
 	return `ui-app-shell-groups:${persistKey}`;
 }
@@ -27595,6 +27814,7 @@ var AppShellComponent = class AppShellComponent {
       [style.--shell-bg]="backgroundColor() || null"
       [style.--shell-text]="textColor() || null"
     >
+      <ui-shell-projected-styles />
 
       <!-- Mobile backdrop -->
       <div
@@ -27780,7 +28000,7 @@ var AppShellComponent = class AppShellComponent {
     <ui-confirm-outlet />
   `,
 			isInline: true,
-			styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-icon ::ng-deep svg{width:17px;height:17px;stroke:color-mix(in srgb,var(--shell-text, #fff) 90%,transparent);transition:stroke .15s;flex-shrink:0}.sidebar-nav a:hover .nav-icon ::ng-deep svg{stroke:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.sidebar-nav a.active .nav-icon ::ng-deep svg{stroke:#93c5fd}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-full ::ng-deep img,.shell.collapsed .brand-full ::ng-deep svg{width:44px;height:44px;max-width:none;object-fit:cover;object-position:50% 42%}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-icon ::ng-deep svg{width:20px;height:20px}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-end{display:flex;align-items:center;margin-left:auto}.content{flex:1;overflow-y:auto;padding:24px;background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 32px #0000004d}.shell.sidebar-open .sidebar{transform:translate(0)}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{padding:16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{padding:12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar,.nav-icon ::ng-deep svg{transition:none!important}}\n"],
+			styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-end{display:flex;align-items:center;margin-left:auto}.content{flex:1;overflow-y:auto;padding:24px;background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 32px #0000004d}.shell.sidebar-open .sidebar{transform:translate(0)}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{padding:16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{padding:12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar{transition:none!important}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -27817,6 +28037,11 @@ var AppShellComponent = class AppShellComponent {
 					kind: "component",
 					type: ConfirmOutletComponent,
 					selector: "ui-confirm-outlet"
+				},
+				{
+					kind: "component",
+					type: ShellProjectedStylesComponent,
+					selector: "ui-shell-projected-styles"
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -27837,7 +28062,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				RouterLink,
 				RouterLinkActive,
-				ConfirmOutletComponent
+				ConfirmOutletComponent,
+				ShellProjectedStylesComponent
 			],
 			template: `
     <div
@@ -27847,6 +28073,7 @@ i0.ɵɵngDeclareClassMetadata({
       [style.--shell-bg]="backgroundColor() || null"
       [style.--shell-text]="textColor() || null"
     >
+      <ui-shell-projected-styles />
 
       <!-- Mobile backdrop -->
       <div
@@ -28031,7 +28258,7 @@ i0.ɵɵngDeclareClassMetadata({
     <!-- Global confirm overlay — position:fixed so it overlays without affecting layout -->
     <ui-confirm-outlet />
   `,
-			styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-icon ::ng-deep svg{width:17px;height:17px;stroke:color-mix(in srgb,var(--shell-text, #fff) 90%,transparent);transition:stroke .15s;flex-shrink:0}.sidebar-nav a:hover .nav-icon ::ng-deep svg{stroke:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.sidebar-nav a.active .nav-icon ::ng-deep svg{stroke:#93c5fd}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-full ::ng-deep img,.shell.collapsed .brand-full ::ng-deep svg{width:44px;height:44px;max-width:none;object-fit:cover;object-position:50% 42%}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-icon ::ng-deep svg{width:20px;height:20px}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-end{display:flex;align-items:center;margin-left:auto}.content{flex:1;overflow-y:auto;padding:24px;background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 32px #0000004d}.shell.sidebar-open .sidebar{transform:translate(0)}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{padding:16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{padding:12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar,.nav-icon ::ng-deep svg{transition:none!important}}\n"]
+			styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-end{display:flex;align-items:center;margin-left:auto}.content{flex:1;overflow-y:auto;padding:24px;background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 32px #0000004d}.shell.sidebar-open .sidebar{transform:translate(0)}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{padding:16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{padding:12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar{transition:none!important}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -29550,7 +29777,7 @@ var KpiCardComponent = class KpiCardComponent {
 			},
 			ngImport: i0,
 			template: `
-    <div class="kpi-card" [class.highlight]="highlight()" [class.clickable]="clickable()" [style.background]="background() || null">
+    <div class="kpi-card" [class.highlight]="highlight()" [class.clickable]="clickable()" [class.ring-corner]="hasProgress() && !!iconSvg()" [style.background]="background() || null">
       @if (iconSvg()) {
         <div [class]="'kpi-icon ' + color() + '-icon'" aria-hidden="true" [innerHTML]="iconSvg()"></div>
       }
@@ -29577,7 +29804,7 @@ var KpiCardComponent = class KpiCardComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"],
+			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-card.ring-corner .kpi-top{display:contents}.kpi-card.ring-corner .kpi-ring{position:absolute;top:12px;right:12px}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ProgressRingComponent,
@@ -29618,7 +29845,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"(keydown.space)": "onActivateKey($event)"
 			},
 			template: `
-    <div class="kpi-card" [class.highlight]="highlight()" [class.clickable]="clickable()" [style.background]="background() || null">
+    <div class="kpi-card" [class.highlight]="highlight()" [class.clickable]="clickable()" [class.ring-corner]="hasProgress() && !!iconSvg()" [style.background]="background() || null">
       @if (iconSvg()) {
         <div [class]="'kpi-icon ' + color() + '-icon'" aria-hidden="true" [innerHTML]="iconSvg()"></div>
       }
@@ -29644,7 +29871,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"]
+			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-card.ring-corner .kpi-top{display:contents}.kpi-card.ring-corner .kpi-ring{position:absolute;top:12px;right:12px}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-value.red-value{color:#dc2626}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -33306,7 +33533,7 @@ var DetailCardComponent = class DetailCardComponent {
             <ng-content select="[card-header]" />
           </div>
           @if (showEdit()) {
-            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" [attr.data-testid]="editTestId() || null" (click)="$event.stopPropagation(); editClick.emit()">
+            <span class="dc-edit"><button type="button" class="dc-edit-action" [attr.aria-label]="editAriaLabel() || null" [attr.data-testid]="editTestId() || null" (click)="$event.stopPropagation(); editClick.emit()">
               @if (editIcon()) {
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                 <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
@@ -33314,7 +33541,7 @@ var DetailCardComponent = class DetailCardComponent {
               </svg>
               }
               {{ editLabel() }}
-            </ui-button>
+            </button></span>
           }
           <ng-content select="[card-header-action]" />
         </div>
@@ -33327,7 +33554,7 @@ var DetailCardComponent = class DetailCardComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -33406,7 +33633,7 @@ i0.ɵɵngDeclareClassMetadata({
             <ng-content select="[card-header]" />
           </div>
           @if (showEdit()) {
-            <ui-button class="dc-edit" variant="secondary" size="xs" [ariaLabel]="editAriaLabel() || undefined" [attr.data-testid]="editTestId() || null" (click)="$event.stopPropagation(); editClick.emit()">
+            <span class="dc-edit"><button type="button" class="dc-edit-action" [attr.aria-label]="editAriaLabel() || null" [attr.data-testid]="editTestId() || null" (click)="$event.stopPropagation(); editClick.emit()">
               @if (editIcon()) {
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                 <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
@@ -33414,7 +33641,7 @@ i0.ɵɵngDeclareClassMetadata({
               </svg>
               }
               {{ editLabel() }}
-            </ui-button>
+            </button></span>
           }
           <ng-content select="[card-header-action]" />
         </div>
@@ -33426,7 +33653,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     </div>
   `,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit ::ng-deep button{font-size:.8rem;font-weight:500;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;gap:5px}.dc-edit ::ng-deep button:hover{background:#f1f5f9;color:#1e293b}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -34362,6 +34589,9 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 		this.iconBackground = input("", ...ngDevMode ? [{ debugName: "iconBackground" }] : /* istanbul ignore next */ []);
 		this.bordered = input(false, ...ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []);
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.noPaddingTop = input(false, ...ngDevMode ? [{ debugName: "noPaddingTop" }] : /* istanbul ignore next */ []);
+		this.noPaddingLeft = input(false, ...ngDevMode ? [{ debugName: "noPaddingLeft" }] : /* istanbul ignore next */ []);
+		this.noPaddingBottom = input(false, ...ngDevMode ? [{ debugName: "noPaddingBottom" }] : /* istanbul ignore next */ []);
 		this.titleId = `ui-sh-title-${++nextSectionHeaderId}`;
 		this.descriptionId = `ui-sh-desc-${nextSectionHeaderId}`;
 		this.headingLevel = computed(() => {
@@ -34457,12 +34687,34 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				noPaddingTop: {
+					classPropertyName: "noPaddingTop",
+					publicName: "noPaddingTop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				noPaddingLeft: {
+					classPropertyName: "noPaddingLeft",
+					publicName: "noPaddingLeft",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				noPaddingBottom: {
+					classPropertyName: "noPaddingBottom",
+					publicName: "noPaddingBottom",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: { properties: { "attr.title": "null" } },
 			ngImport: i0,
 			template: `
     <div class="sh" [class.sh-sm]="size() === 'sm'" [class.sh-lg]="size() === 'lg'" [class.sh-xl]="size() === 'xl'" [class.sh-has-bg]="!!background()" [class.sh-has-text-color]="!!textColor()" [class.sh-bordered]="bordered()"
+         [class.sh-no-pt]="noPaddingTop()" [class.sh-no-pl]="noPaddingLeft()" [class.sh-no-pb]="noPaddingBottom()"
          [style.--sh-bg]="background() || null" [style.--sh-text]="textColor() || null" [style.--sh-icon]="iconColor() || null" [style.--sh-icon-bg]="iconBackground() || null">
       <span class="sh-icon" aria-hidden="true"><ng-content select="[section-header-icon]" />@if (path(); as d) {<svg class="sh-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path [attr.d]="d" /></svg>}</span>
       <div class="sh-text">
@@ -34473,8 +34725,9 @@ var SectionHeaderComponent = class SectionHeaderComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.sh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;padding:14px 18px;background:var(--sh-bg, transparent)}.sh-has-bg{border-radius:10px}.sh-bordered{border:1px solid #e2e8f0;border-radius:10px}.sh-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--sh-icon-bg, #f1f5f9);color:var(--sh-icon, #2563eb)}.sh-has-bg .sh-icon{background:var(--sh-icon-bg, #fff)}.sh-icon:empty{display:none}.sh-glyph,.sh-icon ::ng-deep svg{display:block;width:16px;height:16px}.sh-icon ::ng-deep [section-header-icon]~.sh-glyph{display:none}.sh-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.sh-title{margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:var(--sh-text, #0f172a)}.sh-description{margin:0;font-size:.8125rem;line-height:1.45;color:#64748b}.sh-has-bg .sh-description{color:#475569}.sh-has-text-color .sh-description{color:var(--sh-text);opacity:.8}.sh-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0;margin-left:auto}.sh-actions:empty{display:none}.sh-sm{gap:6px 10px}.sh-sm .sh-icon{width:24px;height:24px;border-radius:6px}.sh-sm .sh-glyph,.sh-sm .sh-icon ::ng-deep svg{width:14px;height:14px}.sh-sm .sh-title{font-size:.875rem}.sh-sm .sh-description{font-size:.75rem}.sh-lg{gap:8px 14px;padding:18px 22px}.sh-lg .sh-icon{width:36px;height:36px;border-radius:10px}.sh-lg .sh-glyph,.sh-lg .sh-icon ::ng-deep svg{width:20px;height:20px}.sh-lg .sh-title{font-size:1.25rem}.sh-lg .sh-description{font-size:.9375rem}.sh-xl{gap:10px 16px;padding:22px 26px}.sh-xl .sh-icon{width:44px;height:44px;border-radius:12px}.sh-xl .sh-glyph,.sh-xl .sh-icon ::ng-deep svg{width:24px;height:24px}.sh-xl .sh-title{font-size:1.5rem}.sh-xl .sh-description{font-size:1rem}@media(max-width:480px){.sh{padding:12px 14px}.sh-lg{padding:14px 16px}.sh-xl{padding:16px 18px}.sh-xl .sh-title{font-size:1.375rem}.sh-actions{flex:1 1 100%;margin-left:0;flex-shrink:1}}\n"],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
+			styles: ["ui-section-header{display:block}ui-section-header .sh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;padding:14px 18px;background:var(--sh-bg, transparent)}ui-section-header .sh-has-bg{border-radius:10px}ui-section-header .sh-bordered{border:1px solid #e2e8f0;border-radius:10px}ui-section-header .sh-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--sh-icon-bg, #f1f5f9);color:var(--sh-icon, #2563eb)}ui-section-header .sh-has-bg .sh-icon{background:var(--sh-icon-bg, #fff)}ui-section-header .sh-icon:empty{display:none}ui-section-header .sh-glyph,ui-section-header .sh-icon svg{display:block;width:16px;height:16px}ui-section-header .sh-icon [section-header-icon]~.sh-glyph{display:none}ui-section-header .sh-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}ui-section-header .sh-title{margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:var(--sh-text, #0f172a)}ui-section-header .sh-description{margin:0;font-size:.8125rem;line-height:1.45;color:#64748b}ui-section-header .sh-has-bg .sh-description{color:#475569}ui-section-header .sh-has-text-color .sh-description{color:var(--sh-text);opacity:.8}ui-section-header .sh-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0;margin-left:auto}ui-section-header .sh-actions:empty{display:none}ui-section-header .sh-sm{gap:6px 10px}ui-section-header .sh-sm .sh-icon{width:24px;height:24px;border-radius:6px}ui-section-header .sh-sm .sh-glyph,ui-section-header .sh-sm .sh-icon svg{width:14px;height:14px}ui-section-header .sh-sm .sh-title{font-size:.875rem}ui-section-header .sh-sm .sh-description{font-size:.75rem}ui-section-header .sh-lg{gap:8px 14px;padding:18px 22px}ui-section-header .sh-lg .sh-icon{width:36px;height:36px;border-radius:10px}ui-section-header .sh-lg .sh-glyph,ui-section-header .sh-lg .sh-icon svg{width:20px;height:20px}ui-section-header .sh-lg .sh-title{font-size:1.25rem}ui-section-header .sh-lg .sh-description{font-size:.9375rem}ui-section-header .sh-xl{gap:10px 16px;padding:22px 26px}ui-section-header .sh-xl .sh-icon{width:44px;height:44px;border-radius:12px}ui-section-header .sh-xl .sh-glyph,ui-section-header .sh-xl .sh-icon svg{width:24px;height:24px}ui-section-header .sh-xl .sh-title{font-size:1.5rem}ui-section-header .sh-xl .sh-description{font-size:1rem}ui-section-header .sh.sh-no-pt{padding-top:0}ui-section-header .sh.sh-no-pl{padding-left:0}ui-section-header .sh.sh-no-pb{padding-bottom:0}@media(max-width:480px){ui-section-header .sh{padding:12px 14px}ui-section-header .sh-lg{padding:14px 16px}ui-section-header .sh-xl{padding:16px 18px}ui-section-header .sh-xl .sh-title{font-size:1.375rem}ui-section-header .sh-actions{flex:1 1 100%;margin-left:0;flex-shrink:1}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
 		});
 	}
 };
@@ -34489,9 +34742,11 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-section-header",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
 			host: { "[attr.title]": "null" },
 			template: `
     <div class="sh" [class.sh-sm]="size() === 'sm'" [class.sh-lg]="size() === 'lg'" [class.sh-xl]="size() === 'xl'" [class.sh-has-bg]="!!background()" [class.sh-has-text-color]="!!textColor()" [class.sh-bordered]="bordered()"
+         [class.sh-no-pt]="noPaddingTop()" [class.sh-no-pl]="noPaddingLeft()" [class.sh-no-pb]="noPaddingBottom()"
          [style.--sh-bg]="background() || null" [style.--sh-text]="textColor() || null" [style.--sh-icon]="iconColor() || null" [style.--sh-icon-bg]="iconBackground() || null">
       <span class="sh-icon" aria-hidden="true"><ng-content select="[section-header-icon]" />@if (path(); as d) {<svg class="sh-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path [attr.d]="d" /></svg>}</span>
       <div class="sh-text">
@@ -34501,7 +34756,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="sh-actions"><ng-content select="[section-header-actions]" /></div>
     </div>
   `,
-			styles: [":host{display:block}.sh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;padding:14px 18px;background:var(--sh-bg, transparent)}.sh-has-bg{border-radius:10px}.sh-bordered{border:1px solid #e2e8f0;border-radius:10px}.sh-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--sh-icon-bg, #f1f5f9);color:var(--sh-icon, #2563eb)}.sh-has-bg .sh-icon{background:var(--sh-icon-bg, #fff)}.sh-icon:empty{display:none}.sh-glyph,.sh-icon ::ng-deep svg{display:block;width:16px;height:16px}.sh-icon ::ng-deep [section-header-icon]~.sh-glyph{display:none}.sh-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.sh-title{margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:var(--sh-text, #0f172a)}.sh-description{margin:0;font-size:.8125rem;line-height:1.45;color:#64748b}.sh-has-bg .sh-description{color:#475569}.sh-has-text-color .sh-description{color:var(--sh-text);opacity:.8}.sh-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0;margin-left:auto}.sh-actions:empty{display:none}.sh-sm{gap:6px 10px}.sh-sm .sh-icon{width:24px;height:24px;border-radius:6px}.sh-sm .sh-glyph,.sh-sm .sh-icon ::ng-deep svg{width:14px;height:14px}.sh-sm .sh-title{font-size:.875rem}.sh-sm .sh-description{font-size:.75rem}.sh-lg{gap:8px 14px;padding:18px 22px}.sh-lg .sh-icon{width:36px;height:36px;border-radius:10px}.sh-lg .sh-glyph,.sh-lg .sh-icon ::ng-deep svg{width:20px;height:20px}.sh-lg .sh-title{font-size:1.25rem}.sh-lg .sh-description{font-size:.9375rem}.sh-xl{gap:10px 16px;padding:22px 26px}.sh-xl .sh-icon{width:44px;height:44px;border-radius:12px}.sh-xl .sh-glyph,.sh-xl .sh-icon ::ng-deep svg{width:24px;height:24px}.sh-xl .sh-title{font-size:1.5rem}.sh-xl .sh-description{font-size:1rem}@media(max-width:480px){.sh{padding:12px 14px}.sh-lg{padding:14px 16px}.sh-xl{padding:16px 18px}.sh-xl .sh-title{font-size:1.375rem}.sh-actions{flex:1 1 100%;margin-left:0;flex-shrink:1}}\n"]
+			styles: ["ui-section-header{display:block}ui-section-header .sh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;padding:14px 18px;background:var(--sh-bg, transparent)}ui-section-header .sh-has-bg{border-radius:10px}ui-section-header .sh-bordered{border:1px solid #e2e8f0;border-radius:10px}ui-section-header .sh-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--sh-icon-bg, #f1f5f9);color:var(--sh-icon, #2563eb)}ui-section-header .sh-has-bg .sh-icon{background:var(--sh-icon-bg, #fff)}ui-section-header .sh-icon:empty{display:none}ui-section-header .sh-glyph,ui-section-header .sh-icon svg{display:block;width:16px;height:16px}ui-section-header .sh-icon [section-header-icon]~.sh-glyph{display:none}ui-section-header .sh-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}ui-section-header .sh-title{margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:var(--sh-text, #0f172a)}ui-section-header .sh-description{margin:0;font-size:.8125rem;line-height:1.45;color:#64748b}ui-section-header .sh-has-bg .sh-description{color:#475569}ui-section-header .sh-has-text-color .sh-description{color:var(--sh-text);opacity:.8}ui-section-header .sh-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0;margin-left:auto}ui-section-header .sh-actions:empty{display:none}ui-section-header .sh-sm{gap:6px 10px}ui-section-header .sh-sm .sh-icon{width:24px;height:24px;border-radius:6px}ui-section-header .sh-sm .sh-glyph,ui-section-header .sh-sm .sh-icon svg{width:14px;height:14px}ui-section-header .sh-sm .sh-title{font-size:.875rem}ui-section-header .sh-sm .sh-description{font-size:.75rem}ui-section-header .sh-lg{gap:8px 14px;padding:18px 22px}ui-section-header .sh-lg .sh-icon{width:36px;height:36px;border-radius:10px}ui-section-header .sh-lg .sh-glyph,ui-section-header .sh-lg .sh-icon svg{width:20px;height:20px}ui-section-header .sh-lg .sh-title{font-size:1.25rem}ui-section-header .sh-lg .sh-description{font-size:.9375rem}ui-section-header .sh-xl{gap:10px 16px;padding:22px 26px}ui-section-header .sh-xl .sh-icon{width:44px;height:44px;border-radius:12px}ui-section-header .sh-xl .sh-glyph,ui-section-header .sh-xl .sh-icon svg{width:24px;height:24px}ui-section-header .sh-xl .sh-title{font-size:1.5rem}ui-section-header .sh-xl .sh-description{font-size:1rem}ui-section-header .sh.sh-no-pt{padding-top:0}ui-section-header .sh.sh-no-pl{padding-left:0}ui-section-header .sh.sh-no-pb{padding-bottom:0}@media(max-width:480px){ui-section-header .sh{padding:12px 14px}ui-section-header .sh-lg{padding:14px 16px}ui-section-header .sh-xl{padding:16px 18px}ui-section-header .sh-xl .sh-title{font-size:1.375rem}ui-section-header .sh-actions{flex:1 1 100%;margin-left:0;flex-shrink:1}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -34584,6 +34839,30 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "size",
 				required: false
 			}]
+		}],
+		noPaddingTop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noPaddingTop",
+				required: false
+			}]
+		}],
+		noPaddingLeft: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noPaddingLeft",
+				required: false
+			}]
+		}],
+		noPaddingBottom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noPaddingBottom",
+				required: false
+			}]
 		}]
 	}
 });
@@ -34958,8 +35237,9 @@ var StackComponent = class StackComponent {
 			template: `<div class="st" [class.st-h]="direction() === 'horizontal'" [style.flex-direction]="direction() === 'horizontal' ? 'row' : 'column'"
       [style.gap]="gapCss()" [style.align-items]="alignCss()" [style.justify-content]="justifyCss()" [style.flex-wrap]="wrap() ? 'wrap' : 'nowrap'" [style.min-height]="minHeight() || null" [style.width]="width() || null" [style.max-width]="maxWidth() || null" [style.padding]="padding() || null" [style.box-sizing]="padding() ? 'border-box' : null" [style.margin-inline]="centered() ? 'auto' : null"><ng-content /></div>`,
 			isInline: true,
-			styles: [":host{display:block}.st{display:flex}.st>::ng-deep *{margin:0!important}.st.st-h>::ng-deep *{min-width:0}\n"],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
+			styles: ["ui-stack{display:block}ui-stack .st{display:flex}ui-stack .st>*{margin:0!important}ui-stack .st.st-h>*{min-width:0}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
 		});
 	}
 };
@@ -34974,9 +35254,10 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-stack",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
 			template: `<div class="st" [class.st-h]="direction() === 'horizontal'" [style.flex-direction]="direction() === 'horizontal' ? 'row' : 'column'"
       [style.gap]="gapCss()" [style.align-items]="alignCss()" [style.justify-content]="justifyCss()" [style.flex-wrap]="wrap() ? 'wrap' : 'nowrap'" [style.min-height]="minHeight() || null" [style.width]="width() || null" [style.max-width]="maxWidth() || null" [style.padding]="padding() || null" [style.box-sizing]="padding() ? 'border-box' : null" [style.margin-inline]="centered() ? 'auto' : null"><ng-content /></div>`,
-			styles: [":host{display:block}.st{display:flex}.st>::ng-deep *{margin:0!important}.st.st-h>::ng-deep *{min-width:0}\n"]
+			styles: ["ui-stack{display:block}ui-stack .st{display:flex}ui-stack .st>*{margin:0!important}ui-stack .st.st-h>*{min-width:0}\n"]
 		}]
 	}],
 	propDecorators: {