@foxeltech/angular-ui 0.4.0 → 0.7.75

package/fesm2022/foxeltech-angular-ui.mjs

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, Injector, Directive, InjectionToken, input, isDevMode, ChangeDetectionStrategy, Component, Input, createComponent, Injectable, viewChild, ViewChild, Inject, EventEmitter, NgModule, HostListener, output, ChangeDetectorRef, TemplateRef, contentChildren, Output, ViewChildren, contentChild } from '@angular/core';
+import { inject, DestroyRef, Injector, Directive, InjectionToken, input, isDevMode, ChangeDetectionStrategy, Component, Input, createComponent, Injectable, viewChild, ViewChild, Inject, EventEmitter, signal, computed, NgModule, HostListener, output, ChangeDetectorRef, contentChild, TemplateRef, contentChildren, Output, ViewChildren, ElementRef, model } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import { Observable, firstValueFrom, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, throwError, filter, takeUntil } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/common/http';
 import { HttpRequest, HttpClient } from '@angular/common/http';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
+import * as i2$1 from '@angular/router';
+import { Router, RoutesRecognized, NavigationEnd, NavigationCancel, NavigationError, RouterLink, RouterModule } from '@angular/router';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1$3 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2$1 from '@angular/router';
-import { NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import * as signalR from '@microsoft/signalr';
 import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -108,11 +108,11 @@ class ToastComponent {
     message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ToastComponent, isStandalone: true, selector: "fx-ui-toast", inputs: { toastId: { classPropertyName: "toastId", publicName: "toastId", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type() === 'success',\n    'border-critical': type() === 'error',\n    'border-warning': type() === 'warning',\n    'border-information': type() === 'info'\n  }\"\n  >\n  <div class=\"\" aria-hidden=\"true\">\n    @switch (type()) { @case('success') {\n      <fx-ui-hero-icon\n        icon=\"check-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-success\"\n      ></fx-ui-hero-icon>\n      } @case('error') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-critical\"\n      ></fx-ui-hero-icon>\n      } @case('warning') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-triangle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-warning\"\n      ></fx-ui-hero-icon>\n      } @default {\n      <fx-ui-hero-icon\n        icon=\"information-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-information\"\n      ></fx-ui-hero-icon>\n      } }\n    </div>\n\n    <div class=\"flex flex-col\">\n      @if (title) {\n        <strong class=\"txt-field-label\">{{ title }}</strong>\n      }\n      <p class=\"txt-default\">{{ message() }}</p>\n    </div>\n  </div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ToastComponent, isStandalone: true, selector: "fx-ui-toast", inputs: { toastId: { classPropertyName: "toastId", publicName: "toastId", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'tone-border-success': type() === 'success',\n    'tone-border-danger': type() === 'error',\n    'border-warning': type() === 'warning',\n    'border-information': type() === 'info'\n  }\"\n  >\n  <div class=\"\" aria-hidden=\"true\">\n    @switch (type()) { @case('success') {\n      <fx-ui-hero-icon\n        icon=\"check-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-success\"\n      ></fx-ui-hero-icon>\n      } @case('error') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-danger\"\n      ></fx-ui-hero-icon>\n      } @case('warning') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-triangle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-warning\"\n      ></fx-ui-hero-icon>\n      } @default {\n      <fx-ui-hero-icon\n        icon=\"information-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-information\"\n      ></fx-ui-hero-icon>\n      } }\n    </div>\n\n    <div class=\"flex flex-col\">\n      @if (title) {\n        <strong class=\"txt-field-label\">{{ title }}</strong>\n      }\n      <p class=\"txt-default\">{{ message() }}</p>\n    </div>\n  </div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-toast', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, HeroIconComponent], template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type() === 'success',\n    'border-critical': type() === 'error',\n    'border-warning': type() === 'warning',\n    'border-information': type() === 'info'\n  }\"\n  >\n  <div class=\"\" aria-hidden=\"true\">\n    @switch (type()) { @case('success') {\n      <fx-ui-hero-icon\n        icon=\"check-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-success\"\n      ></fx-ui-hero-icon>\n      } @case('error') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-critical\"\n      ></fx-ui-hero-icon>\n      } @case('warning') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-triangle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-warning\"\n      ></fx-ui-hero-icon>\n      } @default {\n      <fx-ui-hero-icon\n        icon=\"information-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"text-information\"\n      ></fx-ui-hero-icon>\n      } }\n    </div>\n\n    <div class=\"flex flex-col\">\n      @if (title) {\n        <strong class=\"txt-field-label\">{{ title }}</strong>\n      }\n      <p class=\"txt-default\">{{ message() }}</p>\n    </div>\n  </div>\n" }]
+            args: [{ selector: 'fx-ui-toast', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, HeroIconComponent], template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'tone-border-success': type() === 'success',\n    'tone-border-danger': type() === 'error',\n    'border-warning': type() === 'warning',\n    'border-information': type() === 'info'\n  }\"\n  >\n  <div class=\"\" aria-hidden=\"true\">\n    @switch (type()) { @case('success') {\n      <fx-ui-hero-icon\n        icon=\"check-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-success\"\n      ></fx-ui-hero-icon>\n      } @case('error') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-danger\"\n      ></fx-ui-hero-icon>\n      } @case('warning') {\n      <fx-ui-hero-icon\n        icon=\"exclamation-triangle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-warning\"\n      ></fx-ui-hero-icon>\n      } @default {\n      <fx-ui-hero-icon\n        icon=\"information-circle\"\n        [solid]=\"true\"\n        [size]=\"30\"\n        class=\"tone-fg-information\"\n      ></fx-ui-hero-icon>\n      } }\n    </div>\n\n    <div class=\"flex flex-col\">\n      @if (title) {\n        <strong class=\"txt-field-label\">{{ title }}</strong>\n      }\n      <p class=\"txt-default\">{{ message() }}</p>\n    </div>\n  </div>\n" }]
         }], propDecorators: { toastId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastId", required: true }] }], title: [{
                 type: Input
             }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
@@ -412,8 +412,16 @@ class FxUtils {
         }
         return value ? `rgba(${value} / ${alpha})` : `rgba(255 255 255 / ${alpha})`;
     }
+    /**
+     * Status/severity string → tag tone.
+     *
+     * Coerces instead of trusting the argument: every caller feeds this raw API
+     * values, and a numeric or null field used to throw
+     * "key.toLowerCase is not a function" and take the whole screen down.
+     * Non-string input simply falls through to the default tone.
+     */
     static getTagClass(key, isCriticalExist = true) {
-        switch (key.toLowerCase()) {
+        switch (String(key ?? '').toLowerCase()) {
             case 'error':
             case 'failed':
             case 'inactive':
@@ -796,6 +804,9 @@ class BaseTableComponent extends BaseComponent {
             autoFocus: 'first-tabbable',
             width: size,
             disableClose: conf.disableClose ?? false,
+            // Dialogs are created by the root MatDialog: without this the dialog
+            // component cannot see route-scoped providers (APIs) — NG0201.
+            injector: this.injector,
             data: {
                 method: 'create',
                 data: this.empty(),
@@ -831,6 +842,7 @@ class BaseTableComponent extends BaseComponent {
             autoFocus: 'first-tabbable',
             width: size,
             disableClose: conf.disableClose ?? false,
+            injector: this.injector,
             data: {
                 method: 'update',
                 data: model,
@@ -866,6 +878,7 @@ class BaseTableComponent extends BaseComponent {
             autoFocus: 'first-tabbable',
             width: size,
             disableClose: conf.disableClose ?? false,
+            injector: this.injector,
             data: {
                 data: model,
                 title: conf.title,
@@ -894,6 +907,7 @@ class BaseTableComponent extends BaseComponent {
                 panelClass: 'fx-dialog',
                 autoFocus: 'first-tabbable',
                 width: '400px',
+                injector: this.injector,
                 data: {
                     title: conf?.title,
                     message: conf?.message,
@@ -1169,15 +1183,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: FxToastrService }, { type: HttpWrapper }, { type: i1.MatDialog }], propDecorators: { ngForm: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }] } });
 
+/**
+ * Overlay chặn màn cho HÀNH ĐỘNG của người dùng (bấm nút, đổi trạng thái,
+ * xuất báo cáo…). `app.html` của host bind `fx-ui-loading-panel` vào
+ * `listenerAction`.
+ *
+ * ⚠️ **KHÔNG dùng cho điều hướng.** Channel `listener` + `start()`/`stop()` đã
+ * bị XOÁ ở 0.7.70 (Pha 3). Điều hướng dùng skeleton: `FxRouteSkeletonService`
+ * đọc `data.skeleton` của route đích và shell dựng `fx-ui-route-skeleton`.
+ *
+ * Vì sao xoá thay vì để lại: trước đó cả 46 call site đổ chung MỘT channel, lẫn
+ * hai ngữ nghĩa (điều hướng vs hành động). Sau khi skeleton thay phần điều
+ * hướng, `listener` không còn ai nghe — để lại là một cái bẫy: gọi `start()`
+ * tưởng có overlay mà thực tế không có gì hiện.
+ */
 class FxLoadingService {
-    listener = new EventEmitter();
     listenerAction = new EventEmitter();
-    start() {
-        this.listener.emit(true);
-    }
-    stop() {
-        this.listener.emit(false);
-    }
     startAction() {
         this.listenerAction.emit(true);
     }
@@ -1194,16 +1215,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 }]
         }] });
 
-class BaseResolver {
-    loadingService;
-    injector;
-    constructor(loadingService, injector) {
-        this.loadingService = loadingService;
-        this.injector = injector;
+/**
+ * Khai trên route: `data: { skeleton: 'table' }` (tên preset) hoặc
+ * `data: { skeleton: ['heading', 'toolbar', 'table'] }` (mảng block, mô tả
+ * ĐÚNG layout của màn — bảng ra bảng, chart ra chart).
+ */
+const FX_SKELETON_DATA_KEY = 'skeleton';
+/**
+ * Đọc `data.skeleton` của route đích rồi bật/tắt skeleton cho vùng nội dung.
+ *
+ * ⚠️ Vì sao phải nghe router event chứ không để từng màn tự lo: Angular
+ * **không tạo component cho tới khi resolver xong**, nên trong lúc resolver
+ * của một màn chạy thì component đó chưa tồn tại — không có gì để vẽ
+ * skeleton. Chỉ shell (tồn tại trước) làm được.
+ *
+ * Mốc dùng là `RoutesRecognized` — event ĐẦU TIÊN mang `RouterStateSnapshot`,
+ * và nó xảy ra TRƯỚC `ResolveStart`. `NavigationStart` thì chưa biết route
+ * đích nên không đọc được hint.
+ */
+class FxRouteSkeletonService {
+    router = inject(Router);
+    _hint = signal(null, ...(ngDevMode ? [{ debugName: "_hint" }] : /* istanbul ignore next */ []));
+    /** Hint đang hiển thị, `null` = không vẽ skeleton. */
+    hint = this._hint.asReadonly();
+    active = computed(() => this._hint() !== null, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * Điều hướng nhanh hơn mốc này thì KHÔNG vẽ skeleton — tránh nháy một
+     * nhịp khi resolver trả về gần như tức thì (dữ liệu đã cache).
+     */
+    graceMs = 150;
+    timer;
+    started = false;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.clearTimer());
     }
-    baseResolverInit() {
-        this.loadingService.start();
+    /** Gọi một lần từ shell (host và mỗi remote standalone). */
+    start() {
+        if (this.started)
+            return;
+        this.started = true;
+        this.router.events.subscribe((event) => {
+            if (event instanceof RoutesRecognized) {
+                const hint = readHint(event.state.root);
+                this.clearTimer();
+                if (!hint) {
+                    this._hint.set(null);
+                    return;
+                }
+                this.timer = setTimeout(() => {
+                    this.timer = undefined;
+                    this._hint.set(hint);
+                }, this.graceMs);
+                return;
+            }
+            if (event instanceof NavigationEnd ||
+                event instanceof NavigationCancel ||
+                event instanceof NavigationError) {
+                this.clearTimer();
+                this._hint.set(null);
+            }
+        });
     }
+    clearTimer() {
+        if (this.timer !== undefined) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxRouteSkeletonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxRouteSkeletonService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxRouteSkeletonService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Lấy hint ở nhánh SÂU NHẤT có khai — để route cha đặt mặc định và route con
+ * ghi đè được.
+ */
+function readHint(root) {
+    let node = root;
+    let found = null;
+    while (node) {
+        const value = node.data?.[FX_SKELETON_DATA_KEY];
+        // Chấp nhận cả tên preset và mảng block; mảng rỗng coi như không khai.
+        if (typeof value === 'string' && value)
+            found = value;
+        else if (Array.isArray(value) && value.length)
+            found = value;
+        node = node.firstChild;
+    }
+    return found;
 }
 
 class FxStorageService {
@@ -1228,11 +1330,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
         }] });
 
 /**
- * Functional replacement for the copy-pasted list-resolver class:
- * starts the loading overlay, runs one API request, and on failure stops the
- * overlay and shows a parsed error toast — the exact convention every
- * BaseResolver subclass hand-rolls today. BaseResolver stays for existing
- * classes; new routes should use this factory.
+ * Chạy MỘT request cho list resolver, lỗi thì hiện toast đã parse.
+ *
+ * ⚠️ KHÔNG còn bật overlay chặn màn: điều hướng dùng skeleton
+ * (`FxRouteSkeletonService` + `data.skeleton` trên route). `BaseResolver` đã bị
+ * xoá ở 0.7.70 — mọi resolver giờ là `@Injectable()` thuần hoặc dùng factory
+ * này.
  *
  * Usage:
  *   resolve: { histories: fxListResolver(ScanManagementApi, (route, state, ctx) =>
@@ -1241,11 +1344,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
 function fxListResolver(apiType, request) {
     return async (route, state) => {
         const api = inject(apiType);
-        const loading = inject(FxLoadingService);
         const toastr = inject(FxToastrService);
         const storage = inject(FxStorageService);
         try {
-            loading.start();
             const ctx = { pageSize: storage.resolve(state.url) || 10 };
             const req = request(route, state, ctx);
             if ((req.method ?? 'get') === 'post') {
@@ -1254,7 +1355,6 @@ function fxListResolver(apiType, request) {
             return await api.get(req.url, req.params);
         }
         catch (err) {
-            loading.stop();
             toastr.error(FxUtils.parseError(err), 'Error');
             return null;
         }
@@ -1427,26 +1527,54 @@ class RealtimeTableSync {
 
 const NEUTRAL_TEXT = 'text-text-secondary';
 const NEUTRAL_BG = 'bg-bg-hover';
+/**
+ * ⚠️ Trỏ vào `.tone-fg-*` của hệ MỚI, KHÔNG còn `text-critical` (bộ LEGACY
+ * vivid). Bỏ sót chỗ này chính là lý do badge/chữ trong list ở mọi tab vẫn
+ * ra màu cũ sau khi đã đổi `TONE_BADGE` (anh Tú báo 03/09).
+ */
 const TONE_TEXT = {
-    critical: 'text-critical',
-    danger: 'text-danger',
-    warning: 'text-warning',
-    success: 'text-success',
-    information: 'text-information',
+    critical: 'tone-fg-critical',
+    danger: 'tone-fg-danger',
+    warning: 'tone-fg-warning',
+    success: 'tone-fg-success',
+    information: 'tone-fg-information',
+    discovery: 'tone-fg-discovery',
 };
+/** Nền ĐẶC — dùng cho trạng thái đang chọn. Xem `.tone-solid-*`. */
 const TONE_BG = {
-    critical: 'bg-critical',
-    danger: 'bg-danger',
-    warning: 'bg-warning',
-    success: 'bg-success',
-    information: 'bg-information',
+    critical: 'tone-solid-critical',
+    danger: 'tone-solid-danger',
+    warning: 'tone-solid-warning',
+    success: 'tone-solid-success',
+    information: 'tone-solid-information',
+    discovery: 'tone-solid-discovery',
 };
-const TONE_BADGE = {
-    critical: 'bg-critical/10 text-critical',
-    danger: 'bg-danger/10 text-danger',
-    warning: 'bg-warning/10 text-warning',
-    success: 'bg-success/10 text-success',
-    information: 'bg-information/10 text-information',
+/**
+ * ⚠️ ĐỪNG dùng `toneBadge()` cho badge CÓ CHẤM bên trong: Critical ra nền
+ * đen đặc nên chấm (đỏ sẫm) nằm trên đó gần như vô hình. Demo chỉ dùng biến
+ * thể `solid` cho badge severity ĐỨNG MỘT MÌNH; badge kèm `StatusDot` luôn
+ * dùng nền MỀM. Chỗ đó hãy dùng `toneScale()`.
+ *
+ * Tông severity — theo ĐÚNG mô hình đo trên demo 03/09: token semantic
+ * (`--og-negative`…) chứ không phải bộ vivid `--og-tone-*`, và Critical được
+ * nhấn bằng nền ĐEN ĐẶC thay vì màu rực. Định nghĩa ở `.tone-tint-*` trong
+ * components.css — xem comment ở đó để biết lý do không dùng utility Tailwind.
+ *
+ * `tone-tint-*` chỉ mang MÀU. Hình dạng pill nằm ở `.tone-badge` riêng, nên
+ * ô icon vuông / chip filter dùng được màu mà không bị bo tròn 999px.
+ */
+/**
+ * Cố tình KHÔNG khoá vào `Record<Tone, …>`: `FxUtils.getTagClass()` còn trả
+ * `discovery` (và `default`), mà `discovery` có đúng một biến thể tương ứng
+ * trong demo là `.og-badge--accent`. `default` không có key → rơi về neutral.
+ */
+const TONE_TINT = {
+    critical: 'tone-tint-critical',
+    danger: 'tone-tint-danger',
+    warning: 'tone-tint-warning',
+    success: 'tone-tint-success',
+    information: 'tone-tint-information',
+    discovery: 'tone-tint-discovery',
 };
 function hasVal(v) {
     if (v == null)
@@ -1501,8 +1629,71 @@ function toneBg(tone) {
     return tone ? TONE_BG[tone] : NEUTRAL_BG;
 }
 /** Tone → soft pill/badge classes (tinted bg + matching text), neutral fallback. */
+/**
+ * Badge severity MẶC ĐỊNH — nền MỀM theo thang đo, Critical ra **đỏ sẫm**.
+ *
+ * ⚠️ Trước đây hàm này trả nền ĐẶC (`tone-tint-*`, Critical = đen `--og-text`)
+ * vì demo có biến thể `.og-badge--solid`. Nhưng demo chỉ dùng biến thể đó ở
+ * ĐÚNG MỘT chỗ — badge severity trong danh sách findings — còn app mình gọi
+ * `toneBadge()` ở khắp nơi (`project-card`, `score-badge`, `list-row`,
+ * `severity-badges`, `tab-group`, badge trong hàng…). Kết quả: pill đen tràn
+ * ra mọi màn, anh Tú báo 3 lần (03/09). Nên MẶC ĐỊNH đảo về nền mềm; muốn
+ * pill đen thì gọi `toneBadgeSolid()` một cách tường minh.
+ */
 function toneBadge(tone) {
-    return tone ? TONE_BADGE[tone] : 'bg-bg-hover text-text-secondary';
+    return `tone-badge ${toneScale(tone)}`;
+}
+/**
+ * Badge severity nền ĐẶC (Critical = `--og-text`, chữ `--og-surface`) — đúng
+ * `.og-badge--solid` của demo. CHỈ dùng cho badge severity đứng một mình ở
+ * nơi cần nhấn mạnh nhất; đừng dùng cho badge có chấm bên trong (chấm sẽ chìm).
+ */
+function toneBadgeSolid(tone) {
+    return `tone-badge ${toneTint(tone)}`;
+}
+/**
+ * Nhận `string` rộng chứ không chỉ `Tone`: rất nhiều call site truyền kết quả
+ * của `FxUtils.getTagClass()` / tone tự tính, vốn là `string`. Tone lạ →
+ * neutral, thay vì sinh ra class rác như thời còn ghép chuỗi `'bg-' + tone`.
+ */
+const isTone = (t) => typeof t === 'string' && Object.prototype.hasOwnProperty.call(TONE_TINT, t);
+/** Chỉ MÀU của tông, không kèm hình dạng pill — cho ô icon, chip, ô nền. */
+function toneTint(tone) {
+    return isTone(tone) ? TONE_TINT[tone] : 'tone-tint-neutral';
+}
+/**
+ * CHỮ theo tông — dùng thành viên dễ đọc nhất của mỗi họ severity, KHÔNG phải
+ * ramp chart (ramp có `warning #f59e0b` chỉ 2.15:1 trên nền trắng). Xem
+ * `.tone-fg-*` trong components.css.
+ */
+function toneFg(tone) {
+    return isTone(tone) ? `tone-fg-${tone}` : 'tone-fg-neutral';
+}
+/**
+ * Tông THANG ĐO — cho filter chip severity. Critical ra ĐỎ SẪM (nền mềm pha
+ * từ ramp `--og-sev-*`) thay vì pill đen đặc của `toneTint()`: chip filter là
+ * một thang đo, không phải badge severity của một finding. Xem `.tone-scale-*`.
+ */
+function toneScale(tone) {
+    return isTone(tone) ? `tone-scale-${tone}` : 'tone-scale-neutral';
+}
+/** Viền theo tông — cho panel trạng thái (dropzone upload…). */
+function toneBorder(tone) {
+    return isTone(tone) ? `tone-border-${tone}` : 'tone-border-neutral';
+}
+/**
+ * CHẤM trạng thái trong hàng (`● Confirmed`) — demo dùng màu SEMANTIC
+ * (`.og-statusdot--*`), không phải ramp chart.
+ */
+function toneDot(tone) {
+    return isTone(tone) ? `tone-dot-${tone}` : 'tone-dot-neutral';
+}
+/**
+ * CHẤM LEGEND của chart — phải TRÙNG màu cung donut nên dùng ramp
+ * `--og-sev-*`. Đừng dùng cho chấm trạng thái trong hàng.
+ */
+function toneDotChart(tone) {
+    return isTone(tone) ? `tone-dot-chart-${tone}` : 'tone-dot-chart-neutral';
 }
 /**
  * Tone → resolved CSS colour string for ECharts / canvas where a Tailwind
@@ -1510,10 +1701,22 @@ function toneBadge(tone) {
  * legacy comma syntax — see FxUtils.convertColorFromVariable.
  */
 function toneColor(tone, alpha = 1) {
-    const name = tone ? `--${tone}` : '--text-secondary';
+    // Chart dùng ramp RIÊNG `--og-sev-*` (màu literal đo trên demo), không dùng
+    // `--og-tone-*`. `information` không có trong ramp của demo (demo chỉ có 4
+    // bậc Critical/High/Medium/Low) nên vẫn rơi về tone legacy.
+    const SEV = new Set(['critical', 'danger', 'warning', 'success']);
+    const name = tone ? (SEV.has(tone) ? `--og-sev-${tone}` : `--${tone}`) : '--text-secondary';
     return FxUtils.convertColorFromVariable(name, alpha, { legacyCommaSyntax: true });
 }
 
+function featureEnabled(flags, name) {
+    return flags?.[name] === true;
+}
+/** Convenience for templates that gate on several flags at once. */
+function anyFeatureEnabled(flags, ...names) {
+    return names.some((name) => featureEnabled(flags, name));
+}
+
 class FxValidators {
     /**
      * Name fields: firstName, lastName, groupName, projectName, displayName
@@ -1905,37 +2108,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 }]
         }] });
 
+const OG_THEMES = [
+    'porcelain',
+    'charcoal',
+    'ivory',
+    'studio',
+    'blueprint',
+    'terminal',
+];
+const OG_LIGHT_THEMES = ['porcelain', 'ivory', 'terminal'];
+const OG_THEME_META = [
+    { name: 'porcelain', label: 'Porcelain', accent: '#4a7dbd', pageBg: '#f2f2f1', dark: false },
+    { name: 'charcoal', label: 'Charcoal', accent: '#8fc866', pageBg: '#1a1811', dark: true },
+    { name: 'ivory', label: 'Ivory', accent: '#d97757', pageBg: '#e8e6e1', dark: false },
+    { name: 'studio', label: 'Studio', accent: '#5a8fd6', pageBg: '#0e0e10', dark: true },
+    { name: 'blueprint', label: 'Blueprint', accent: '#e07a3a', pageBg: '#0e0e10', dark: true },
+    { name: 'terminal', label: 'Terminal', accent: '#3a55d9', pageBg: '#e8e6e1', dark: false },
+];
+/**
+ * Theme NGƯỜI DÙNG được chọn (anh Tú chốt 31/08): chỉ còn một cặp
+ * light/dark. Bốn theme còn lại vẫn tồn tại đầy đủ trong theme.css và
+ * setTheme() vẫn nhận — chúng dùng cho trang /themes của demo và cho
+ * harness screenshot chạy ma trận 6 theme; chỉ **giấu khỏi picker**.
+ * Muốn mở lại: thêm tên vào mảng này, không phải dựng lại token.
+ */
+const OG_PICKER_THEMES = ['porcelain', 'charcoal'];
+/** OG_THEME_META đã lọc theo OG_PICKER_THEMES — nguồn duy nhất cho mọi picker. */
+const OG_PICKER_THEME_META = OG_THEME_META.filter((t) => OG_PICKER_THEMES.includes(t.name));
+/**
+ * V2 theme switching: one `data-og-theme` attribute on <html> selects the
+ * --og-* token block (theme.css). During the migration window the service
+ * also mirrors the legacy `light_theme` class on <body> so remotes built
+ * against the pre-V2 stylesheet keep resolving the correct palette
+ * (see the SKEW SHIELD note in theme.css).
+ */
 class ThemeService {
     renderer;
     lightClass = 'light_theme';
-    theme$ = new BehaviorSubject('light');
+    theme$ = new BehaviorSubject('porcelain');
     themeStorageKey = 'host-theme';
     constructor(rendererFactory) {
         this.renderer = rendererFactory.createRenderer(null, null);
-        const savedTheme = localStorage.getItem(this.themeStorageKey);
-        if (savedTheme) {
-            this.setLightMode(savedTheme === 'light');
-        }
-        else {
-            this.setLightMode(true);
-        }
-    }
-    setLightMode(enable) {
-        if (enable) {
+        this.setTheme(this.readSavedTheme());
+    }
+    /** Primary API: activate one of the six V2 themes. */
+    setTheme(theme) {
+        if (!OG_THEMES.includes(theme))
+            theme = 'porcelain';
+        this.renderer.setAttribute(document.documentElement, 'data-og-theme', theme);
+        // Skew shim for not-yet-migrated remote stylesheets (.light_theme era).
+        if (this.isLightTheme(theme)) {
             this.renderer.addClass(document.body, this.lightClass);
-            this.theme$.next('light');
-            localStorage.setItem(this.themeStorageKey, 'light');
         }
         else {
             this.renderer.removeClass(document.body, this.lightClass);
-            this.theme$.next('dark');
-            localStorage.setItem(this.themeStorageKey, 'dark');
         }
-        window.dispatchEvent(new CustomEvent('theme-changed', { detail: { dark: !enable } }));
-    }
-    toggleTheme() {
-        const isLight = this.theme$.value === 'light';
-        this.setLightMode(!isLight);
+        localStorage.setItem(this.themeStorageKey, theme);
+        this.theme$.next(theme);
+        // detail.dark is the pre-V2 contract (chart rebuilds on it); detail.theme
+        // is new. Listeners must re-read colors on EVERY event — two light themes
+        // can differ even though `dark` did not change.
+        window.dispatchEvent(new CustomEvent('theme-changed', { detail: { dark: !this.isLightTheme(theme), theme } }));
     }
     themeChanges() {
         return this.theme$.asObservable();
@@ -1944,11 +2177,31 @@ class ThemeService {
         return this.theme$.value;
     }
     isLight() {
-        return this.theme$.value === 'light';
+        return this.isLightTheme(this.theme$.value);
+    }
+    /** @deprecated V2: use setTheme(). Maps light→porcelain, dark→charcoal. */
+    setLightMode(enable) {
+        this.setTheme(enable ? 'porcelain' : 'charcoal');
+    }
+    /** @deprecated V2: use setTheme(). Flips between the two default themes. */
+    toggleTheme() {
+        this.setTheme(this.isLight() ? 'charcoal' : 'porcelain');
     }
     getLogoPath() {
         return 'assets/images/logo.png';
     }
+    isLightTheme(theme) {
+        return OG_LIGHT_THEMES.includes(theme);
+    }
+    readSavedTheme() {
+        const saved = localStorage.getItem(this.themeStorageKey);
+        // Migrate pre-V2 stored values.
+        if (saved === 'light')
+            return 'porcelain';
+        if (saved === 'dark')
+            return 'charcoal';
+        return OG_THEMES.includes(saved) ? saved : 'porcelain';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
@@ -2201,11 +2454,11 @@ class ButtonComponent {
             this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ButtonComponent, isStandalone: true, selector: "fx-ui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [attr.type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  [class]=\"class()\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant() === 'default',\n    'btn-primary': buttonVariant() === 'primary',\n    'btn-success': buttonVariant() === 'success',\n    'btn-alternative': buttonVariant() === 'alternative',\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"onClick()\"\n>\n  @if (loading()) {\n    <div class=\"flex w-full items-center justify-center\" aria-hidden=\"true\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant() === 'default',\n              'text-text-primary': buttonVariant() === 'alternative',\n              'text-white': buttonVariant() === 'primary' || buttonVariant() === 'success',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ButtonComponent, isStandalone: true, selector: "fx-ui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [attr.type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  [class]=\"class()\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant() === 'default',\n    'btn-primary': buttonVariant() === 'primary',\n    'btn-success': buttonVariant() === 'success',\n    'btn-cta': buttonVariant() === 'cta',\n    'btn-alternative': buttonVariant() === 'alternative',\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"onClick()\"\n>\n  @if (loading()) {\n    <div class=\"flex w-full items-center justify-center\" aria-hidden=\"true\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"16\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant() === 'default',\n              'text-text-primary': buttonVariant() === 'alternative',\n              'text-accent-contrast': buttonVariant() === 'primary',\n              'text-surface': buttonVariant() === 'success',\n              'text-white': buttonVariant() === 'cta',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <!-- text-box: optical centering \u2014 Archivo's leading floats ink up otherwise -->\n          <div class=\"[text-box:trim-both_cap_alphabetic]\">{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, HeroIconComponent], template: "<button\n  [attr.type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  [class]=\"class()\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant() === 'default',\n    'btn-primary': buttonVariant() === 'primary',\n    'btn-success': buttonVariant() === 'success',\n    'btn-alternative': buttonVariant() === 'alternative',\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"onClick()\"\n>\n  @if (loading()) {\n    <div class=\"flex w-full items-center justify-center\" aria-hidden=\"true\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant() === 'default',\n              'text-text-primary': buttonVariant() === 'alternative',\n              'text-white': buttonVariant() === 'primary' || buttonVariant() === 'success',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n" }]
+            args: [{ selector: 'fx-ui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, HeroIconComponent], template: "<button\n  [attr.type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  [class]=\"class()\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant() === 'default',\n    'btn-primary': buttonVariant() === 'primary',\n    'btn-success': buttonVariant() === 'success',\n    'btn-cta': buttonVariant() === 'cta',\n    'btn-alternative': buttonVariant() === 'alternative',\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"onClick()\"\n>\n  @if (loading()) {\n    <div class=\"flex w-full items-center justify-center\" aria-hidden=\"true\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"16\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant() === 'default',\n              'text-text-primary': buttonVariant() === 'alternative',\n              'text-accent-contrast': buttonVariant() === 'primary',\n              'text-surface': buttonVariant() === 'success',\n              'text-white': buttonVariant() === 'cta',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <!-- text-box: optical centering \u2014 Archivo's leading floats ink up otherwise -->\n          <div class=\"[text-box:trim-both_cap_alphabetic]\">{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonVariant", required: false }] }], icon: [{
@@ -2417,11 +2670,11 @@ class CheckboxComponent extends FxComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CheckboxComponent, isStandalone: true, selector: "fx-ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\n    [ngClass]=\"{\n      'rounded-full': rounded(),\n      'rounded-sm': !rounded(),\n      'border-border-strong bg-transparent': !value,\n      'border-transparent bg-gradient-primary': value,\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-white w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if (label) {\n    <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CheckboxComponent, isStandalone: true, selector: "fx-ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\n    [ngClass]=\"{\n      'rounded-full': rounded(),\n      'rounded-sm': !rounded(),\n      'border-border-strong bg-transparent': !value,\n      'border-transparent bg-gradient-primary': value,\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-accent-contrast w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if (label) {\n    <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\n    [ngClass]=\"{\n      'rounded-full': rounded(),\n      'rounded-sm': !rounded(),\n      'border-border-strong bg-transparent': !value,\n      'border-transparent bg-gradient-primary': value,\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-white w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if (label) {\n    <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n  }\n</label>\n" }]
+            args: [{ selector: 'fx-ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\n    [ngClass]=\"{\n      'rounded-full': rounded(),\n      'rounded-sm': !rounded(),\n      'border-border-strong bg-transparent': !value,\n      'border-transparent bg-gradient-primary': value,\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-accent-contrast w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if (label) {\n    <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n  }\n</label>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
@@ -2559,7 +2812,7 @@ class DatetimePicker extends FxComponent {
             provideNativeDateAdapter(),
             // en-GB display ⇒ DD/MM/YYYY + 24h — matches FxUtils.formatDateTime.
             { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex gap-normal\">\n    @if (showDate) {\n      <div class=\"relative flex-1\">\n        <input\n          [id]=\"fieldId\"\n          [matDatepicker]=\"datePicker\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [value]=\"dateValue\"\n          (dateChange)=\"onDateChange($event.value)\"\n          (click)=\"!disabled && datePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && datePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-datepicker #datePicker></mat-datepicker>\n      </div>\n    }\n    @if (showTime) {\n      <div class=\"relative\" [class.flex-1]=\"!showDate\" [class.w-32]=\"showDate\">\n        <input\n          [matTimepicker]=\"timePicker\"\n          placeholder=\"HH:mm\"\n          [disabled]=\"disabled\"\n          [value]=\"dateValue\"\n          (valueChange)=\"onTimeChange($event)\"\n          (click)=\"!disabled && timePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && timePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"clock\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-timepicker #timePicker></mat-timepicker>\n      </div>\n    }\n  </div>\n  @if (invalid) {\n    <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;::ng-deep .mat-datepicker-content,::ng-deep mat-timepicker .mat-timepicker-panel,::ng-deep .mat-timepicker-panel{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:rgb(var(--text-primary));--mat-datepicker-calendar-container-background-color: rgb(var(--bg-primary));--mat-datepicker-calendar-container-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-selected-state-background-color: rgb(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: #fff;--mat-datepicker-calendar-date-today-outline-color: rgb(var(--primary));--mat-datepicker-calendar-date-hover-state-background-color: rgb(var(--bg-primary-hover));--mat-datepicker-calendar-header-text-color: rgb(var(--text-secondary));--mat-datepicker-calendar-period-button-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-navigation-button-icon-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-disabled-state-text-color: rgb(var(--text-placeholder));--mat-timepicker-container-background-color: rgb(var(--bg-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option{color:rgb(var(--text-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:rgb(var(--bg-primary-hover))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex gap-normal\">\n    @if (showDate) {\n      <div class=\"relative flex-1\">\n        <input\n          [id]=\"fieldId\"\n          [matDatepicker]=\"datePicker\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [value]=\"dateValue\"\n          (dateChange)=\"onDateChange($event.value)\"\n          (click)=\"!disabled && datePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && datePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-datepicker #datePicker></mat-datepicker>\n      </div>\n    }\n    @if (showTime) {\n      <div class=\"relative\" [class.flex-1]=\"!showDate\" [class.w-32]=\"showDate\">\n        <input\n          [matTimepicker]=\"timePicker\"\n          placeholder=\"HH:mm\"\n          [disabled]=\"disabled\"\n          [value]=\"dateValue\"\n          (valueChange)=\"onTimeChange($event)\"\n          (click)=\"!disabled && timePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && timePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"clock\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-timepicker #timePicker></mat-timepicker>\n      </div>\n    }\n  </div>\n  @if (invalid) {\n    <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;::ng-deep .mat-datepicker-content,::ng-deep mat-timepicker .mat-timepicker-panel,::ng-deep .mat-timepicker-panel{border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:rgb(var(--text-primary));--mat-datepicker-calendar-container-background-color: rgb(var(--bg-primary));--mat-datepicker-calendar-container-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-selected-state-background-color: rgb(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: #fff;--mat-datepicker-calendar-date-today-outline-color: rgb(var(--primary));--mat-datepicker-calendar-date-hover-state-background-color: rgb(var(--bg-primary-hover));--mat-datepicker-calendar-header-text-color: rgb(var(--text-secondary));--mat-datepicker-calendar-period-button-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-navigation-button-icon-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-disabled-state-text-color: rgb(var(--text-placeholder));--mat-timepicker-container-background-color: rgb(var(--bg-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option{color:rgb(var(--text-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:rgb(var(--bg-primary-hover))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DatetimePicker, decorators: [{
             type: Component,
@@ -2567,7 +2820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         provideNativeDateAdapter(),
                         // en-GB display ⇒ DD/MM/YYYY + 24h — matches FxUtils.formatDateTime.
                         { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
-                    ], template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex gap-normal\">\n    @if (showDate) {\n      <div class=\"relative flex-1\">\n        <input\n          [id]=\"fieldId\"\n          [matDatepicker]=\"datePicker\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [value]=\"dateValue\"\n          (dateChange)=\"onDateChange($event.value)\"\n          (click)=\"!disabled && datePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && datePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-datepicker #datePicker></mat-datepicker>\n      </div>\n    }\n    @if (showTime) {\n      <div class=\"relative\" [class.flex-1]=\"!showDate\" [class.w-32]=\"showDate\">\n        <input\n          [matTimepicker]=\"timePicker\"\n          placeholder=\"HH:mm\"\n          [disabled]=\"disabled\"\n          [value]=\"dateValue\"\n          (valueChange)=\"onTimeChange($event)\"\n          (click)=\"!disabled && timePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && timePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"clock\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-timepicker #timePicker></mat-timepicker>\n      </div>\n    }\n  </div>\n  @if (invalid) {\n    <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;::ng-deep .mat-datepicker-content,::ng-deep mat-timepicker .mat-timepicker-panel,::ng-deep .mat-timepicker-panel{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:rgb(var(--text-primary));--mat-datepicker-calendar-container-background-color: rgb(var(--bg-primary));--mat-datepicker-calendar-container-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-selected-state-background-color: rgb(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: #fff;--mat-datepicker-calendar-date-today-outline-color: rgb(var(--primary));--mat-datepicker-calendar-date-hover-state-background-color: rgb(var(--bg-primary-hover));--mat-datepicker-calendar-header-text-color: rgb(var(--text-secondary));--mat-datepicker-calendar-period-button-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-navigation-button-icon-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-disabled-state-text-color: rgb(var(--text-placeholder));--mat-timepicker-container-background-color: rgb(var(--bg-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option{color:rgb(var(--text-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:rgb(var(--bg-primary-hover))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex gap-normal\">\n    @if (showDate) {\n      <div class=\"relative flex-1\">\n        <input\n          [id]=\"fieldId\"\n          [matDatepicker]=\"datePicker\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [value]=\"dateValue\"\n          (dateChange)=\"onDateChange($event.value)\"\n          (click)=\"!disabled && datePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && datePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-datepicker #datePicker></mat-datepicker>\n      </div>\n    }\n    @if (showTime) {\n      <div class=\"relative\" [class.flex-1]=\"!showDate\" [class.w-32]=\"showDate\">\n        <input\n          [matTimepicker]=\"timePicker\"\n          placeholder=\"HH:mm\"\n          [disabled]=\"disabled\"\n          [value]=\"dateValue\"\n          (valueChange)=\"onTimeChange($event)\"\n          (click)=\"!disabled && timePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && timePicker.open()\"\n          class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n        >\n          <fx-ui-hero-icon icon=\"clock\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-timepicker #timePicker></mat-timepicker>\n      </div>\n    }\n  </div>\n  @if (invalid) {\n    <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;::ng-deep .mat-datepicker-content,::ng-deep mat-timepicker .mat-timepicker-panel,::ng-deep .mat-timepicker-panel{border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:rgb(var(--text-primary));--mat-datepicker-calendar-container-background-color: rgb(var(--bg-primary));--mat-datepicker-calendar-container-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-selected-state-background-color: rgb(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: #fff;--mat-datepicker-calendar-date-today-outline-color: rgb(var(--primary));--mat-datepicker-calendar-date-hover-state-background-color: rgb(var(--bg-primary-hover));--mat-datepicker-calendar-header-text-color: rgb(var(--text-secondary));--mat-datepicker-calendar-period-button-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-navigation-button-icon-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-disabled-state-text-color: rgb(var(--text-placeholder));--mat-timepicker-container-background-color: rgb(var(--bg-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option{color:rgb(var(--text-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:rgb(var(--bg-primary-hover))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], errorMessages: [{
@@ -2819,11 +3072,11 @@ class RadioButtonToggleComponent extends FxComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RadioButtonToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: RadioButtonToggleComponent, isStandalone: true, selector: "fx-ui-radio-toggle, [fx-ui-radio-toggle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class()\">\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required()) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n    @for(opt of options(); track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: RadioButtonToggleComponent, isStandalone: true, selector: "fx-ui-radio-toggle, [fx-ui-radio-toggle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class()\">\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required()) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n    @for(opt of options(); track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-strong]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RadioButtonToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-radio-toggle, [fx-ui-radio-toggle]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class()\">\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required()) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n    @for(opt of options(); track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-radio-toggle, [fx-ui-radio-toggle]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class()\">\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required()) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n    @for(opt of options(); track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-strong]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessages: [{
@@ -2855,7 +3108,7 @@ class RadioButtonComponent extends FxComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: RadioButtonComponent, isStandalone: true, selector: "fx-ui-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class()\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </span>\n  }\n\n  @for (opt of options(); track opt) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n      [matTooltip]=\"opt.tooltip || ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      >\n      <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n        class=\"radio-container\"\n        >\n        @if (value === opt.value) {\n          <span class=\"radio-dot\"></span>\n        }\n      </span>\n      <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n    </button>\n  }\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: RadioButtonComponent, isStandalone: true, selector: "fx-ui-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class()\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </span>\n  }\n\n  @for (opt of options(); track opt) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-strong]=\"value !== opt.value\"\n      class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n      [matTooltip]=\"opt.tooltip || ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      >\n      <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n        class=\"radio-container\"\n        >\n        @if (value === opt.value) {\n          <span class=\"radio-dot\"></span>\n        }\n      </span>\n      <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n    </button>\n  }\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
@@ -2863,7 +3116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         HeroIconComponent,
                         MatTooltip,
                         NgClass,
-                    ], template: "<div\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class()\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </span>\n  }\n\n  @for (opt of options(); track opt) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n      [matTooltip]=\"opt.tooltip || ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      >\n      <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n        class=\"radio-container\"\n        >\n        @if (value === opt.value) {\n          <span class=\"radio-dot\"></span>\n        }\n      </span>\n      <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n    </button>\n  }\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class()\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </span>\n  }\n\n  @for (opt of options(); track opt) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-strong]=\"value !== opt.value\"\n      class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n      [matTooltip]=\"opt.tooltip || ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      >\n      <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n        class=\"radio-container\"\n        >\n        @if (value === opt.value) {\n          <span class=\"radio-dot\"></span>\n        }\n      </span>\n      <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n    </button>\n  }\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
@@ -2874,6 +3127,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
 
 class SearchBarComponent extends FxComponent {
     ref;
+    /** FxComponent leaves `value` undefined; without ngModel the input would
+        render the literal string "undefined". */
+    value = '';
     placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     search = output();
     valueChange = output();
@@ -3014,17 +3270,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 type: Input
             }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
-class SkeletonTableLoadingComponent {
-    columns = input(5, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    rows = input(5, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonTableLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonTableLoadingComponent, isStandalone: true, selector: "fx-ui-skeleton-table-loading", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full animate-pulse space-y-normal\">\n  <div\n    class=\"grid gap-small\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }\"\n  >\n    @for(col of [].constructor(columns()); track col) {\n      <div class=\"h-6 bg-bg-hover rounded\"></div>\n    }\n  </div>\n\n  @for(row of [].constructor(rows()); track row) {\n    <div\n      class=\"grid gap-small\"\n      [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }\"\n    >\n      @for(col of [].constructor(columns()); track col) {\n        <div class=\"h-7 bg-bg-hover rounded\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonTableLoadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fx-ui-skeleton-table-loading', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle], template: "<div class=\"w-full animate-pulse space-y-normal\">\n  <div\n    class=\"grid gap-small\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }\"\n  >\n    @for(col of [].constructor(columns()); track col) {\n      <div class=\"h-6 bg-bg-hover rounded\"></div>\n    }\n  </div>\n\n  @for(row of [].constructor(rows()); track row) {\n    <div\n      class=\"grid gap-small\"\n      [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }\"\n    >\n      @for(col of [].constructor(columns()); track col) {\n        <div class=\"h-7 bg-bg-hover rounded\"></div>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
-
 class SliderComponent extends FxComponent {
     ref;
     trackRef = viewChild.required('track');
@@ -3155,7 +3400,7 @@ class SliderComponent extends FxComponent {
             : { left: `${this.percent}%`, transform: 'translateX(-50%)' };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SliderComponent, isStandalone: true, selector: "fx-ui-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n  >\n  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n    >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical() }\"\n      >\n      <div\n        class=\"relative flex-1 rounded-full bg-gray-600 h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical() }\"\n        >\n        @if (!vertical()) {\n          <div\n            class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n            [style.width.%]=\"percent\"\n          ></div>\n        }\n\n        @if (vertical()) {\n          <div\n            class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n            [style.height.%]=\"percent\"\n            style=\"transform-origin: bottom;\"\n          ></div>\n        }\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          aria-label=\"Slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SliderComponent, isStandalone: true, selector: "fx-ui-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n  >\n  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n    >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical() }\"\n      >\n      <div\n        class=\"relative flex-1 rounded-full bg-track h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-track': vertical() }\"\n        >\n        @if (!vertical()) {\n          <div\n            class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n            [style.width.%]=\"percent\"\n          ></div>\n        }\n\n        @if (vertical()) {\n          <div\n            class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n            [style.height.%]=\"percent\"\n            style=\"transform-origin: bottom;\"\n          ></div>\n        }\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          aria-label=\"Slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -3163,7 +3408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         NgClass,
                         NgStyle,
                         InputComponent,
-                    ], template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n  >\n  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n    >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical() }\"\n      >\n      <div\n        class=\"relative flex-1 rounded-full bg-gray-600 h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical() }\"\n        >\n        @if (!vertical()) {\n          <div\n            class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n            [style.width.%]=\"percent\"\n          ></div>\n        }\n\n        @if (vertical()) {\n          <div\n            class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n            [style.height.%]=\"percent\"\n            style=\"transform-origin: bottom;\"\n          ></div>\n        }\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          aria-label=\"Slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n  >\n  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n    >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical() }\"\n      >\n      <div\n        class=\"relative flex-1 rounded-full bg-track h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-track': vertical() }\"\n        >\n        @if (!vertical()) {\n          <div\n            class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n            [style.width.%]=\"percent\"\n          ></div>\n        }\n\n        @if (vertical()) {\n          <div\n            class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n            [style.height.%]=\"percent\"\n            style=\"transform-origin: bottom;\"\n          ></div>\n        }\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          aria-label=\"Slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumbRef: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -3188,34 +3433,75 @@ class SwitchComponent extends FxComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SwitchComponent, isStandalone: true, selector: "fx-ui-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">check</i>\n\n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SwitchComponent, isStandalone: true, selector: "fx-ui-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\n  [ngClass]=\"{\n    'tone-solid-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">check</i>\n\n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">check</i>\n\n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</button>\n" }]
+            args: [{ selector: 'fx-ui-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\n  [ngClass]=\"{\n    'tone-solid-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">check</i>\n\n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\" aria-hidden=\"true\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</button>\n" }]
         }], propDecorators: { onSwitch: [{ type: i0.Output, args: ["onSwitch"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+/**
+ * Một tab của `fx-ui-tab-group`.
+ *
+ * ⚠️ Nội dung tab PHẢI bọc trong `<ng-template>`:
+ *
+ * ```html
+ * <fx-ui-tab [label]="'Components'">
+ *   <ng-template>
+ *     <app-info-components … />
+ *   </ng-template>
+ * </fx-ui-tab>
+ * ```
+ *
+ * Vì sao bắt buộc: trước đây tab dùng `<ng-content>` bọc trong `<ng-template>`
+ * của CHÍNH nó. Cách đó **không hoãn được gì** — `<ng-content>` chỉ CHIẾU node,
+ * còn node do view khai báo (component cha) tạo **eager**. Kết quả: mọi tab đều
+ * khởi tạo và gọi API ngay khi vào màn, dù người dùng chưa mở (đo được trên
+ * scan-info: cả 8 cụm cùng fetch). Nhận `TemplateRef` từ cha thì nội dung chỉ
+ * được dựng khi tab-group stamp template đó.
+ *
+ * Hệ quả cần biết: đổi tab sẽ **huỷ** nội dung tab cũ và dựng lại khi quay lại
+ * — đúng bản chất lazy, giống `matTabContent` của Material.
+ *
+ * `descendants: false` để chỉ bắt `<ng-template>` là con TRỰC TIẾP, tránh nuốt
+ * nhầm template lồng sâu bên trong nội dung tab.
+ */
 class TabComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon;
-    content = viewChild.required(TemplateRef);
+    /** Trailing count badge (V2 'page' variant); null/undefined hides it. */
+    count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Tints the count badge (e.g. vulnerabilities tab shows a danger count). */
+    tone = input(null, ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    content = contentChild.required(TemplateRef, { descendants: false });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.20", type: TabComponent, isStandalone: true, selector: "fx-ui-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.20", type: TabComponent, isStandalone: true, selector: "fx-ui-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
+            args: [{
+                    selector: 'fx-ui-tab',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{
                 type: Input
-            }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+            }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { ...{ descendants: false }, isSignal: true }] }] } });
 
 class TabGroupComponent {
     renderer;
     cdr = inject(ChangeDetectorRef);
     tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     activeIndex = 0;
+    /** Emitted on user selection — enables [(activeIndex)] two-way binding. */
+    activeIndexChange = output();
+    /** 'page' = the V2 workspace tab strip (larger hit area, count badges). */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     tabListRef = viewChild.required('tabList');
-    underlineRef = viewChild.required('underline');
+    underlineRef = viewChild('underline', ...(ngDevMode ? [{ debugName: "underlineRef" }] : /* istanbul ignore next */ []));
+    pagePillRef = viewChild('pagePill', ...(ngDevMode ? [{ debugName: "pagePillRef" }] : /* istanbul ignore next */ []));
+    /** Last applied pill geometry — skip DOM writes when nothing moved. */
+    pillState = { left: -1, width: -1, painted: false };
     canScrollLeft = false;
     canScrollRight = false;
     animateDelay = 50;
@@ -3234,8 +3520,12 @@ class TabGroupComponent {
     }
     selectTab(index) {
         this.activeIndex = index;
+        this.activeIndexChange.emit(index);
         this.scrollToActiveTab(true);
     }
+    badgeClass(tab) {
+        return toneBadge(tab.tone());
+    }
     /** Roving tablist keyboard nav: arrows move AND activate (selection follows focus). */
     onTabKeydown(event, index) {
         const count = this.tabs().length;
@@ -3263,9 +3553,52 @@ class TabGroupComponent {
         const buttons = this.tabListRef().nativeElement.querySelectorAll('.tab-btn');
         buttons[next]?.focus();
     }
+    /** Parent-driven activeIndex (deep-link ?tab=, quick-links) must also move the pill. */
+    ngOnChanges(changes) {
+        if (changes['activeIndex'] && !changes['activeIndex'].firstChange) {
+            setTimeout(() => this.scrollToActiveTab(false), 0);
+        }
+    }
+    /**
+     * Re-measure every view check: catches label-width changes (language switch,
+     * count arriving) with cached geometry so the DOM write only happens when
+     * the pill actually moved.
+     */
+    ngAfterViewChecked() {
+        this.updatePagePill();
+    }
+    /** Slide the 'page' pill to the active tab (offset* is scroll-content relative). */
+    updatePagePill() {
+        const pillEl = this.pagePillRef()?.nativeElement;
+        if (!pillEl)
+            return;
+        const tabButtons = this.tabListRef().nativeElement.querySelectorAll('.tab-btn');
+        const activeTab = tabButtons[this.activeIndex];
+        if (!activeTab)
+            return;
+        const left = activeTab.offsetLeft;
+        const width = activeTab.offsetWidth;
+        if (width === 0)
+            return; // hidden (display:none ancestors) — keep last state
+        if (left === this.pillState.left && width === this.pillState.width)
+            return;
+        // First paint positions without transition — no fly-in from x=0 on load.
+        if (!this.pillState.painted) {
+            this.renderer.setStyle(pillEl, 'transition', 'none');
+            requestAnimationFrame(() => this.renderer.removeStyle(pillEl, 'transition'));
+            this.pillState.painted = true;
+        }
+        this.renderer.setStyle(pillEl, 'width', `${width}px`);
+        this.renderer.setStyle(pillEl, 'transform', `translateX(${left}px)`);
+        this.pillState = { ...this.pillState, left, width };
+    }
     updateUnderlinePosition() {
+        // The 'page' variant slides .fx-tabs-pill instead (see updatePagePill);
+        // the underline element only exists on the default variant.
+        const underlineEl = this.underlineRef()?.nativeElement;
+        if (!underlineEl)
+            return;
         const tabListEl = this.tabListRef().nativeElement;
-        const underlineEl = this.underlineRef().nativeElement;
         const tabButtons = tabListEl.querySelectorAll('.tab-btn');
         const activeTab = tabButtons[this.activeIndex];
         if (!activeTab || !underlineEl)
@@ -3323,9 +3656,10 @@ class TabGroupComponent {
     }
     onResize() {
         this.updateUnderlinePosition();
+        this.updatePagePill();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TabGroupComponent, isStandalone: true, selector: "fx-ui-tab-group", inputs: { activeIndex: "activeIndex" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "underlineRef", first: true, predicate: ["underline"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    role=\"tablist\"\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n    >\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex\"\n        [tabindex]=\"i === activeIndex ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onTabKeydown($event, i)\"\n        class=\"tab-btn tab-bar-btn\"\n        >\n        <div class=\"flex flex-row items-center justify-center\">\n          @if (tab.icon) {\n            <fx-ui-hero-icon\n              [icon]=\"tab.icon\"\n              [size]=\"20\"\n              class=\"flex mr-[2px]\"\n            [ngClass]=\"{\n              'text-gradient-primary-start mb-small': i === activeIndex,\n              'text-text-placeholder': i !== activeIndex,\n            }\"\n            ></fx-ui-hero-icon>\n          }\n          <div\n          [ngClass]=\"\n            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'\n          \"\n            >\n            {{ tab.label() }}\n          </div>\n        </div>\n      </button>\n    }\n\n    <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    @if (i === activeIndex) {\n      <div role=\"tabpanel\" class=\"animate-fadeIn\">\n        <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--gradient-primary-start));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TabGroupComponent, isStandalone: true, selector: "fx-ui-tab-group", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndexChange: "activeIndexChange" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "underlineRef", first: true, predicate: ["underline"], descendants: true, isSignal: true }, { propertyName: "pagePillRef", first: true, predicate: ["pagePill"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    role=\"tablist\"\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    [class.fx-tabs-frame]=\"variant() === 'page'\"\n    (scroll)=\"onScroll()\"\n    >\n    <!-- 'page' variant: one raised pill that SLIDES to the active tab\n         (anh T\u00FA 29/08 \u2014 same motion as fx-ui-segmented) -->\n    @if (variant() === 'page') {\n      <span #pagePill aria-hidden=\"true\" class=\"fx-tabs-pill\"></span>\n    }\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex\"\n        [tabindex]=\"i === activeIndex ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onTabKeydown($event, i)\"\n        class=\"tab-btn tab-bar-btn\"\n        [class.tab-bar-btn-page]=\"variant() === 'page'\"\n        >\n        <div class=\"flex flex-row items-center justify-center gap-xs\">\n          @if (tab.icon) {\n            <fx-ui-hero-icon\n              [icon]=\"tab.icon\"\n              [size]=\"variant() === 'page' ? 14 : 20\"\n              class=\"flex mr-[2px]\"\n              [ngClass]=\"\n                variant() === 'page'\n                  ? i === activeIndex\n                    ? 'text-strong'\n                    : 'text-text-placeholder'\n                  : i === activeIndex\n                    ? 'text-accent-fg mb-small'\n                    : 'text-text-placeholder'\n              \"\n            ></fx-ui-hero-icon>\n          }\n          <div\n          [ngClass]=\"\n            variant() === 'page'\n              ? i === activeIndex\n                ? 'text-[13px] leading-none font-semibold text-strong [text-box:trim-both_cap_alphabetic]'\n                : 'text-[13px] leading-none font-medium text-muted [text-box:trim-both_cap_alphabetic]'\n              : i === activeIndex\n                ? 'txt-field-label text-accent-fg'\n                : 'txt-placeholder'\n          \"\n            >\n            {{ tab.label() }}\n          </div>\n          @if (tab.count() !== null) {\n            <span\n              class=\"txt-tag-label px-normal py-[1px] rounded-pill\"\n              [ngClass]=\"badgeClass(tab)\"\n              style=\"font-family: var(--og-font-figure)\"\n              >\n              {{ tab.count() }}\n            </span>\n          }\n        </div>\n      </button>\n    }\n\n    @if (variant() !== 'page') {\n      <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n    }\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    @if (i === activeIndex) {\n      <div role=\"tabpanel\" class=\"animate-fadeIn\">\n        <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--og-accent));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.fx-tabs-frame{width:fit-content;max-width:100%;gap:.125rem;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--og-border));background-color:rgb(var(--og-surface-sunken));padding:3px}.tab-bar-btn-page{z-index:1;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding-inline:.75rem;padding-block:5px;color:rgb(var(--og-text-muted))}.tab-bar-btn-page[aria-selected=false]:hover{color:rgb(var(--og-text))}.fx-tabs-pill{pointer-events:none;position:absolute;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--og-border));background-color:rgb(var(--og-surface-raised));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);top:3px;bottom:3px;left:0;width:0;transform:translate(0);transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width}@media(prefers-reduced-motion:reduce){.fx-tabs-pill{transition:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
@@ -3334,10 +3668,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         NgClass,
                         NgTemplateOutlet,
                         InputComponent,
-                    ], template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    role=\"tablist\"\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n    >\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex\"\n        [tabindex]=\"i === activeIndex ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onTabKeydown($event, i)\"\n        class=\"tab-btn tab-bar-btn\"\n        >\n        <div class=\"flex flex-row items-center justify-center\">\n          @if (tab.icon) {\n            <fx-ui-hero-icon\n              [icon]=\"tab.icon\"\n              [size]=\"20\"\n              class=\"flex mr-[2px]\"\n            [ngClass]=\"{\n              'text-gradient-primary-start mb-small': i === activeIndex,\n              'text-text-placeholder': i !== activeIndex,\n            }\"\n            ></fx-ui-hero-icon>\n          }\n          <div\n          [ngClass]=\"\n            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'\n          \"\n            >\n            {{ tab.label() }}\n          </div>\n        </div>\n      </button>\n    }\n\n    <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    @if (i === activeIndex) {\n      <div role=\"tabpanel\" class=\"animate-fadeIn\">\n        <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--gradient-primary-start));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    role=\"tablist\"\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    [class.fx-tabs-frame]=\"variant() === 'page'\"\n    (scroll)=\"onScroll()\"\n    >\n    <!-- 'page' variant: one raised pill that SLIDES to the active tab\n         (anh T\u00FA 29/08 \u2014 same motion as fx-ui-segmented) -->\n    @if (variant() === 'page') {\n      <span #pagePill aria-hidden=\"true\" class=\"fx-tabs-pill\"></span>\n    }\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex\"\n        [tabindex]=\"i === activeIndex ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onTabKeydown($event, i)\"\n        class=\"tab-btn tab-bar-btn\"\n        [class.tab-bar-btn-page]=\"variant() === 'page'\"\n        >\n        <div class=\"flex flex-row items-center justify-center gap-xs\">\n          @if (tab.icon) {\n            <fx-ui-hero-icon\n              [icon]=\"tab.icon\"\n              [size]=\"variant() === 'page' ? 14 : 20\"\n              class=\"flex mr-[2px]\"\n              [ngClass]=\"\n                variant() === 'page'\n                  ? i === activeIndex\n                    ? 'text-strong'\n                    : 'text-text-placeholder'\n                  : i === activeIndex\n                    ? 'text-accent-fg mb-small'\n                    : 'text-text-placeholder'\n              \"\n            ></fx-ui-hero-icon>\n          }\n          <div\n          [ngClass]=\"\n            variant() === 'page'\n              ? i === activeIndex\n                ? 'text-[13px] leading-none font-semibold text-strong [text-box:trim-both_cap_alphabetic]'\n                : 'text-[13px] leading-none font-medium text-muted [text-box:trim-both_cap_alphabetic]'\n              : i === activeIndex\n                ? 'txt-field-label text-accent-fg'\n                : 'txt-placeholder'\n          \"\n            >\n            {{ tab.label() }}\n          </div>\n          @if (tab.count() !== null) {\n            <span\n              class=\"txt-tag-label px-normal py-[1px] rounded-pill\"\n              [ngClass]=\"badgeClass(tab)\"\n              style=\"font-family: var(--og-font-figure)\"\n              >\n              {{ tab.count() }}\n            </span>\n          }\n        </div>\n      </button>\n    }\n\n    @if (variant() !== 'page') {\n      <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n    }\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n    >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    @if (i === activeIndex) {\n      <div role=\"tabpanel\" class=\"animate-fadeIn\">\n        <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--og-accent));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.fx-tabs-frame{width:fit-content;max-width:100%;gap:.125rem;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--og-border));background-color:rgb(var(--og-surface-sunken));padding:3px}.tab-bar-btn-page{z-index:1;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding-inline:.75rem;padding-block:5px;color:rgb(var(--og-text-muted))}.tab-bar-btn-page[aria-selected=false]:hover{color:rgb(var(--og-text))}.fx-tabs-pill{pointer-events:none;position:absolute;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--og-border));background-color:rgb(var(--og-surface-raised));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);top:3px;bottom:3px;left:0;width:0;transform:translate(0);transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width}@media(prefers-reduced-motion:reduce){.fx-tabs-pill{transition:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], activeIndex: [{
                 type: Input
-            }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], underlineRef: [{ type: i0.ViewChild, args: ['underline', { isSignal: true }] }], onResize: [{
+            }], activeIndexChange: [{ type: i0.Output, args: ["activeIndexChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], underlineRef: [{ type: i0.ViewChild, args: ['underline', { isSignal: true }] }], pagePillRef: [{ type: i0.ViewChild, args: ['pagePill', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -3367,11 +3701,11 @@ class TagComponent {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TagComponent, isStandalone: true, selector: "fx-ui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label() }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TagComponent, isStandalone: true, selector: "fx-ui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface font-medium' : ''}`\">\n    {{ label() }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tag', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label() }}\n  </div>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-tag', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface font-medium' : ''}`\">\n    {{ label() }}\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], icon: [{
                 type: Input
             }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }], clicked: [{
@@ -3464,11 +3798,11 @@ class TreeDiagram {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TreeDiagram, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TreeDiagram, isStandalone: true, selector: "fx-ui-tree-diagram", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "children", predicate: ["child"], descendants: true }], ngImport: i0, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n    >\n    {{ data().label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    @for (child of data().children; track child) {\n      <div\n        #child\n        class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n        >\n        <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n        <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n      </div>\n    }\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n    >\n    @for (line of lines; track line) {\n      <line\n        [attr.x1]=\"line.x1\"\n        [attr.y1]=\"line.y1\"\n        [attr.x2]=\"line.x2\"\n        [attr.y2]=\"line.y2\"\n        stroke=\"#1f2937\"\n        stroke-width=\"2\"\n        />\n    }\n  </svg>\n\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TreeDiagram, isStandalone: true, selector: "fx-ui-tree-diagram", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "children", predicate: ["child"], descendants: true }], ngImport: i0, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-accent text-accent-contrast px-7 py-3 rounded-md font-semibold text-center\"\n    >\n    {{ data().label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    @for (child of data().children; track child) {\n      <div\n        #child\n        class=\"w-48 bg-surface-raised text-strong border border-border px-4 py-4 rounded-lg text-center\"\n        >\n        <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n        <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n      </div>\n    }\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n    >\n    @for (line of lines; track line) {\n      <line\n        [attr.x1]=\"line.x1\"\n        [attr.y1]=\"line.y1\"\n        [attr.x2]=\"line.x2\"\n        [attr.y2]=\"line.y2\"\n        stroke=\"rgb(var(--og-border-strong))\"\n        stroke-width=\"2\"\n        />\n    }\n  </svg>\n\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TreeDiagram, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tree-diagram', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n    >\n    {{ data().label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    @for (child of data().children; track child) {\n      <div\n        #child\n        class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n        >\n        <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n        <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n      </div>\n    }\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n    >\n    @for (line of lines; track line) {\n      <line\n        [attr.x1]=\"line.x1\"\n        [attr.y1]=\"line.y1\"\n        [attr.x2]=\"line.x2\"\n        [attr.y2]=\"line.y2\"\n        stroke=\"#1f2937\"\n        stroke-width=\"2\"\n        />\n    }\n  </svg>\n\n</div>\n" }]
+            args: [{ selector: 'fx-ui-tree-diagram', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-accent text-accent-contrast px-7 py-3 rounded-md font-semibold text-center\"\n    >\n    {{ data().label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    @for (child of data().children; track child) {\n      <div\n        #child\n        class=\"w-48 bg-surface-raised text-strong border border-border px-4 py-4 rounded-lg text-center\"\n        >\n        <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n        <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n      </div>\n    }\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n    >\n    @for (line of lines; track line) {\n      <line\n        [attr.x1]=\"line.x1\"\n        [attr.y1]=\"line.y1\"\n        [attr.x2]=\"line.x2\"\n        [attr.y2]=\"line.y2\"\n        stroke=\"rgb(var(--og-border-strong))\"\n        stroke-width=\"2\"\n        />\n    }\n  </svg>\n\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], children: [{
                 type: ViewChildren,
                 args: ['child']
@@ -3509,7 +3843,7 @@ class KanbanBoardComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KanbanBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KanbanBoardComponent, isStandalone: true, selector: "fx-ui-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { columnChanged: "columnChanged" }, ngImport: i0, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns(); track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));flex-shrink:0}@media(prefers-color-scheme:dark){.kanban-column{background-color:var(--color-gray-800, oklch(27.8% .033 256.848))}}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding:calc(var(--spacing, .25rem) * 4)}@media(prefers-color-scheme:dark){.kanban-column-header{border-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-column-title{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-700, oklch(37.3% .034 259.733))}@media(prefers-color-scheme:dark){.kanban-column-count{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}@media(prefers-color-scheme:dark){.kanban-column-count{color:var(--color-gray-300, oklch(87.2% .01 258.338))}}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:.5rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}@media(prefers-color-scheme:dark){.kanban-item{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}@media(prefers-color-scheme:dark){.kanban-item{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-item-default{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-item-placeholder{border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-400, oklch(70.7% .022 261.325));background-color:var(--color-gray-200, oklch(92.8% .006 264.531));opacity:50%;min-height:60px}@media(prefers-color-scheme:dark){.kanban-item-placeholder{border-color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-item-placeholder{background-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-400, oklch(70.7% .022 261.325));border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-300, oklch(87.2% .01 258.338))}@media(prefers-color-scheme:dark){.kanban-column-empty{color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-column-empty{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.cdk-drag-preview{border-radius:.5rem;opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KanbanBoardComponent, isStandalone: true, selector: "fx-ui-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { columnChanged: "columnChanged" }, ngImport: i0, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns(); track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:var(--og-radius-card);background-color:rgb(var(--og-surface-sunken));flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgb(var(--og-border));padding:calc(var(--spacing, .25rem) * 4)}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text))}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:rgb(var(--og-neutral-soft-bg));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--og-neutral-soft-fg))}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--og-border));background-color:rgb(var(--og-surface-raised));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:rgb(var(--og-text))}.kanban-item-placeholder{border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:rgb(var(--border-strong));background-color:rgb(var(--og-neutral-soft-bg));opacity:50%;min-height:60px}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--og-text-faint));border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:rgb(var(--og-border))}.cdk-drag-preview{border-radius:var(--og-radius-card);opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KanbanBoardComponent, decorators: [{
             type: Component,
@@ -3518,7 +3852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         CdkDrag,
                         CdkDragPlaceholder,
                         NgTemplateOutlet,
-                    ], template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns(); track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));flex-shrink:0}@media(prefers-color-scheme:dark){.kanban-column{background-color:var(--color-gray-800, oklch(27.8% .033 256.848))}}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding:calc(var(--spacing, .25rem) * 4)}@media(prefers-color-scheme:dark){.kanban-column-header{border-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-column-title{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-700, oklch(37.3% .034 259.733))}@media(prefers-color-scheme:dark){.kanban-column-count{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}@media(prefers-color-scheme:dark){.kanban-column-count{color:var(--color-gray-300, oklch(87.2% .01 258.338))}}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:.5rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}@media(prefers-color-scheme:dark){.kanban-item{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}@media(prefers-color-scheme:dark){.kanban-item{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-item-default{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-item-placeholder{border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-400, oklch(70.7% .022 261.325));background-color:var(--color-gray-200, oklch(92.8% .006 264.531));opacity:50%;min-height:60px}@media(prefers-color-scheme:dark){.kanban-item-placeholder{border-color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-item-placeholder{background-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-400, oklch(70.7% .022 261.325));border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-300, oklch(87.2% .01 258.338))}@media(prefers-color-scheme:dark){.kanban-column-empty{color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-column-empty{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.cdk-drag-preview{border-radius:.5rem;opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns(); track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:var(--og-radius-card);background-color:rgb(var(--og-surface-sunken));flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgb(var(--og-border));padding:calc(var(--spacing, .25rem) * 4)}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text))}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:rgb(var(--og-neutral-soft-bg));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--og-neutral-soft-fg))}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--og-border));background-color:rgb(var(--og-surface-raised));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:rgb(var(--og-text))}.kanban-item-placeholder{border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:rgb(var(--border-strong));background-color:rgb(var(--og-neutral-soft-bg));opacity:50%;min-height:60px}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--og-text-faint));border-radius:var(--og-radius-card);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:rgb(var(--og-border))}.cdk-drag-preview{border-radius:var(--og-radius-card);opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{
                 type: Input
             }], columnChanged: [{ type: i0.Output, args: ["columnChanged"] }] } });
@@ -3527,8 +3861,15 @@ class DrawerComponent {
     router;
     cdr = inject(ChangeDetectorRef);
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** V2: bottom-pinned section (Administration group) — same item rendering,
+        separated by a rule, above the [drawerFooter] slot and version. */
+    footerItems = input([], ...(ngDevMode ? [{ debugName: "footerItems" }] : /* istanbul ignore next */ []));
     isExpanded = true;
     logo;
+    /** Wordmark cạnh logo, chỉ hiện khi drawer mở. Bỏ trống = chỉ có mark. */
+    logoText;
+    /** Dòng phụ dưới logoText (tagline/workspace). Chỉ hiện khi drawer mở. */
+    logoSubtext;
     version;
     toggleExpanded = output();
     itemClicked = output();
@@ -3620,6 +3961,7 @@ class DrawerComponent {
             return false;
         };
         expandParents(this.items());
+        expandParents(this.footerItems());
     }
     getAccordionState(itemId) {
         return this.isAccordionExpanded(itemId) ? 'expanded' : 'collapsed';
@@ -3628,7 +3970,7 @@ class DrawerComponent {
         return this.isExpanded ? 'expanded' : 'collapsed';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DrawerComponent, deps: [{ token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DrawerComponent, isStandalone: true, selector: "fx-ui-drawer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: false, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n    >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        alt=\"Home\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n        />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;background-color:rgb(var(--bg-primary));padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);background-color:rgb(var(--bg-primary-hover));color:rgb(var(--text-primary))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #fff)}.drawer-item.active .item-icon{color:var(--color-white, #fff)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:Roboto,monospace}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DrawerComponent, isStandalone: true, selector: "fx-ui-drawer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: false, isRequired: false, transformFunction: null }, logoText: { classPropertyName: "logoText", publicName: "logoText", isSignal: false, isRequired: false, transformFunction: null }, logoSubtext: { classPropertyName: "logoSubtext", publicName: "logoSubtext", isSignal: false, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"drawer-brand\" [class.is-collapsed]=\"!isExpanded\">\n    @if (logo) {\n      <img [src]=\"logo\" alt=\"Home\" class=\"drawer-brand-mark\" />\n    } @else {\n      <div class=\"drawer-brand-mark\"></div>\n    }\n    @if (isExpanded && (logoText || logoSubtext)) {\n      <span class=\"drawer-brand-copy\">\n        @if (logoText) {\n          <span class=\"drawer-brand-text\">{{ logoText }}</span>\n        }\n        @if (logoSubtext) {\n          <span class=\"drawer-brand-subtext\">{{ logoSubtext }}</span>\n        }\n      </span>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- V2: bottom section (Administration group, user block, \u2026) -->\n    <div class=\"mt-auto\">\n      @if (footerItems().length) {\n        <nav class=\"drawer-footer-nav\">\n          @for (item of footerItems(); track item) {\n            <ng-container\n              *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n            ></ng-container>\n          }\n        </nav>\n      }\n      <ng-content select=\"[drawerFooter]\"></ng-content>\n    </div>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  @if (item.heading) {\n    @if (isExpanded) {\n      <div class=\"drawer-section-label\">{{ item.label }}</div>\n    } @else {\n      <div class=\"drawer-section-rule\"></div>\n    }\n  } @else {\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;display:flex;height:100%;flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--og-page-bg))}.drawer-brand{display:flex;height:60px;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;text-decoration-line:none;padding-left:24px;padding-right:8px;transition:padding .3s cubic-bezier(.4,0,.2,1);max-width:260px}.drawer-brand.is-collapsed{justify-content:center;padding-left:0;padding-right:0;max-width:70px}.drawer-brand-mark{height:20px;width:auto;flex-shrink:0}.drawer-brand-copy{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}.drawer-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--text-primary));-webkit-user-select:none;user-select:none;font-family:var(--og-font-display);letter-spacing:-.01em}.drawer-brand-subtext{margin-top:1px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-footer-nav{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:0px;padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:var(--og-radius-control);background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-section-label{padding-inline:1rem;padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:var(--spacing, .25rem);font-size:10.5px;line-height:1.4;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-section-rule{margin-inline:calc(var(--spacing, .25rem) * 3);margin-block:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:var(--og-radius-control);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);color:rgb(var(--text-primary));background:rgb(var(--og-surface-raised)/.5)}.drawer-item.active{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary));background:rgb(var(--og-surface-raised)/.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgb(var(--og-border)),0 1px 2px rgb(var(--shadow-color)/.05)}.drawer-item.active:hover{background:rgb(var(--og-surface-raised)/.95)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:var(--og-font-mono)}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
             trigger('drawerExpand', [
                 state('collapsed', style({ width: '70px' })),
                 state('expanded', style({ width: '260px' })),
@@ -3655,16 +3997,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                             transition('collapsed <=> expanded', animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')),
                         ]),
                     ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgClass,
                         NgTemplateOutlet,
                         MatTooltip,
                         HeroIconComponent,
                         RouterLink,
-                    ], template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n    >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        alt=\"Home\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n        />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;background-color:rgb(var(--bg-primary));padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);background-color:rgb(var(--bg-primary-hover));color:rgb(var(--text-primary))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #fff)}.drawer-item.active .item-icon{color:var(--color-white, #fff)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:Roboto,monospace}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.Router }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], isExpanded: [{
+                    ], template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"drawer-brand\" [class.is-collapsed]=\"!isExpanded\">\n    @if (logo) {\n      <img [src]=\"logo\" alt=\"Home\" class=\"drawer-brand-mark\" />\n    } @else {\n      <div class=\"drawer-brand-mark\"></div>\n    }\n    @if (isExpanded && (logoText || logoSubtext)) {\n      <span class=\"drawer-brand-copy\">\n        @if (logoText) {\n          <span class=\"drawer-brand-text\">{{ logoText }}</span>\n        }\n        @if (logoSubtext) {\n          <span class=\"drawer-brand-subtext\">{{ logoSubtext }}</span>\n        }\n      </span>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- V2: bottom section (Administration group, user block, \u2026) -->\n    <div class=\"mt-auto\">\n      @if (footerItems().length) {\n        <nav class=\"drawer-footer-nav\">\n          @for (item of footerItems(); track item) {\n            <ng-container\n              *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n            ></ng-container>\n          }\n        </nav>\n      }\n      <ng-content select=\"[drawerFooter]\"></ng-content>\n    </div>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  @if (item.heading) {\n    @if (isExpanded) {\n      <div class=\"drawer-section-label\">{{ item.label }}</div>\n    } @else {\n      <div class=\"drawer-section-rule\"></div>\n    }\n  } @else {\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;display:flex;height:100%;flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--og-page-bg))}.drawer-brand{display:flex;height:60px;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;text-decoration-line:none;padding-left:24px;padding-right:8px;transition:padding .3s cubic-bezier(.4,0,.2,1);max-width:260px}.drawer-brand.is-collapsed{justify-content:center;padding-left:0;padding-right:0;max-width:70px}.drawer-brand-mark{height:20px;width:auto;flex-shrink:0}.drawer-brand-copy{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}.drawer-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--text-primary));-webkit-user-select:none;user-select:none;font-family:var(--og-font-display);letter-spacing:-.01em}.drawer-brand-subtext{margin-top:1px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-footer-nav{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:0px;padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:var(--og-radius-control);background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-section-label{padding-inline:1rem;padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:var(--spacing, .25rem);font-size:10.5px;line-height:1.4;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-section-rule{margin-inline:calc(var(--spacing, .25rem) * 3);margin-block:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:var(--og-radius-control);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);color:rgb(var(--text-primary));background:rgb(var(--og-surface-raised)/.5)}.drawer-item.active{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary));background:rgb(var(--og-surface-raised)/.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgb(var(--og-border)),0 1px 2px rgb(var(--shadow-color)/.05)}.drawer-item.active:hover{background:rgb(var(--og-surface-raised)/.95)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:var(--og-font-mono)}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.Router }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], footerItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerItems", required: false }] }], isExpanded: [{
                 type: Input
             }], logo: [{
                 type: Input
+            }], logoText: [{
+                type: Input
+            }], logoSubtext: [{
+                type: Input
             }], version: [{
                 type: Input
             }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
@@ -3672,40 +4017,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
 /** Row-card skeleton placeholder for master-detail list panes. */
 class SkeletonListComponent {
     rows = input(5, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    range(n) {
-        return Array.from({ length: Number(n) || 0 }, (_, i) => i);
-    }
+    /** computed, không phải method: method trả mảng MỚI mỗi lần render. */
+    rowList = computed(() => range$5(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonListComponent, isStandalone: true, selector: "fx-ui-skeleton-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-normal animate-pulse\">\n  @for (r of range(rows()); track r) {\n    <div class=\"rounded-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg bg-bg-hover shrink-0\"></div>\n        <div class=\"h-4 flex-1 rounded bg-bg-hover\"></div>\n        <div class=\"h-5 w-12 rounded-full bg-bg-hover shrink-0\"></div>\n      </div>\n      <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonListComponent, isStandalone: true, selector: "fx-ui-skeleton-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-normal\">\n  @for (r of rowList(); track r) {\n    <div class=\"rounded-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg skeleton-load shrink-0\"></div>\n        <div class=\"h-4 flex-1 rounded skeleton-load\"></div>\n        <div class=\"h-5 w-12 rounded-full skeleton-load shrink-0\"></div>\n      </div>\n      <div class=\"h-3 w-3/4 rounded skeleton-load\"></div>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-skeleton-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-normal animate-pulse\">\n  @for (r of range(rows()); track r) {\n    <div class=\"rounded-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg bg-bg-hover shrink-0\"></div>\n        <div class=\"h-4 flex-1 rounded bg-bg-hover\"></div>\n        <div class=\"h-5 w-12 rounded-full bg-bg-hover shrink-0\"></div>\n      </div>\n      <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-skeleton-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-normal\">\n  @for (r of rowList(); track r) {\n    <div class=\"rounded-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg skeleton-load shrink-0\"></div>\n        <div class=\"h-4 flex-1 rounded skeleton-load\"></div>\n        <div class=\"h-5 w-12 rounded-full skeleton-load shrink-0\"></div>\n      </div>\n      <div class=\"h-3 w-3/4 rounded skeleton-load\"></div>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+function range$5(n) {
+    return Array.from({ length: Math.max(0, Number(n) || 0) }, (_, i) => i);
+}
 
+const ROW_WIDTHS = [90, 70, 80, 60];
 /** Card-shaped skeleton placeholder for detail panels. */
 class SkeletonDetailComponent {
     /** Number of content cards rendered below the header card. */
     cards = input(3, ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
     /** Rows per content card. */
     rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    range(n) {
-        return Array.from({ length: Number(n) || 0 }, (_, i) => i);
-    }
+    /** computed, không phải method: method trả mảng MỚI mỗi lần render. */
+    cardList = computed(() => range$4(this.cards()), ...(ngDevMode ? [{ debugName: "cardList" }] : /* istanbul ignore next */ []));
+    rowList = computed(() => range$4(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
     rowWidth(i) {
-        return [90, 70, 80, 60][i % 4];
+        return ROW_WIDTHS[i % ROW_WIDTHS.length];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonDetailComponent, isStandalone: true, selector: "fx-ui-skeleton-detail", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-xl animate-pulse\">\n  <div class=\"card-common\">\n    <div class=\"flex items-start gap-normal\">\n      <div class=\"w-10 h-10 rounded-lg bg-bg-hover shrink-0\"></div>\n      <div class=\"flex-1 min-w-0 flex flex-col gap-normal\">\n        <div class=\"h-5 w-1/2 rounded bg-bg-hover\"></div>\n        <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n      </div>\n    </div>\n  </div>\n\n  @for (c of range(cards()); track c) {\n    <div class=\"card-common flex flex-col gap-large\">\n      <div class=\"h-4 w-1/3 rounded bg-bg-hover\"></div>\n      <div class=\"flex flex-col gap-normal\">\n        @for (r of range(rows()); track r) {\n          <div class=\"h-3 rounded bg-bg-hover\" [style.width.%]=\"rowWidth(r)\"></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonDetailComponent, isStandalone: true, selector: "fx-ui-skeleton-detail", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-xl\">\n  <div class=\"card-common\">\n    <div class=\"flex items-start gap-normal\">\n      <div class=\"w-10 h-10 rounded-lg skeleton-load shrink-0\"></div>\n      <div class=\"flex-1 min-w-0 flex flex-col gap-normal\">\n        <div class=\"h-5 w-1/2 rounded skeleton-load\"></div>\n        <div class=\"h-3 w-3/4 rounded skeleton-load\"></div>\n      </div>\n    </div>\n  </div>\n\n  @for (c of cardList(); track c) {\n    <div class=\"card-common flex flex-col gap-large\">\n      <div class=\"h-4 w-1/3 rounded skeleton-load\"></div>\n      <div class=\"flex flex-col gap-normal\">\n        @for (r of rowList(); track r) {\n          <div class=\"h-3 rounded skeleton-load\" [style.width.%]=\"rowWidth(r)\"></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-skeleton-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-xl animate-pulse\">\n  <div class=\"card-common\">\n    <div class=\"flex items-start gap-normal\">\n      <div class=\"w-10 h-10 rounded-lg bg-bg-hover shrink-0\"></div>\n      <div class=\"flex-1 min-w-0 flex flex-col gap-normal\">\n        <div class=\"h-5 w-1/2 rounded bg-bg-hover\"></div>\n        <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n      </div>\n    </div>\n  </div>\n\n  @for (c of range(cards()); track c) {\n    <div class=\"card-common flex flex-col gap-large\">\n      <div class=\"h-4 w-1/3 rounded bg-bg-hover\"></div>\n      <div class=\"flex flex-col gap-normal\">\n        @for (r of range(rows()); track r) {\n          <div class=\"h-3 rounded bg-bg-hover\" [style.width.%]=\"rowWidth(r)\"></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-skeleton-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-xl\">\n  <div class=\"card-common\">\n    <div class=\"flex items-start gap-normal\">\n      <div class=\"w-10 h-10 rounded-lg skeleton-load shrink-0\"></div>\n      <div class=\"flex-1 min-w-0 flex flex-col gap-normal\">\n        <div class=\"h-5 w-1/2 rounded skeleton-load\"></div>\n        <div class=\"h-3 w-3/4 rounded skeleton-load\"></div>\n      </div>\n    </div>\n  </div>\n\n  @for (c of cardList(); track c) {\n    <div class=\"card-common flex flex-col gap-large\">\n      <div class=\"h-4 w-1/3 rounded skeleton-load\"></div>\n      <div class=\"flex flex-col gap-normal\">\n        @for (r of rowList(); track r) {\n          <div class=\"h-3 rounded skeleton-load\" [style.width.%]=\"rowWidth(r)\"></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+function range$4(n) {
+    return Array.from({ length: Math.max(0, Number(n) || 0) }, (_, i) => i);
+}
+
+/**
+ * V2 sparkbar — inline mini bar-trend (risk trend on project cards, deltas in
+ * stat grids). Pure DOM, token-coloured; no chart engine.
+ *
+ *   <fx-ui-sparkbar [values]="[3, 5, 2, 8, 6]" />
+ */
+class SparkbarComponent {
+    values = input([], ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    /** Bar colour; null renders the accent. */
+    tone = input(null, ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    height = input(28, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    bars = computed(() => {
+        const values = this.values();
+        const max = Math.max(...values, 1);
+        // 8% floor so zero values still show a base mark.
+        return values.map((v) => Math.max((v / max) * 100, 8));
+    }, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    barClass() {
+        return this.tone() ? toneBg(this.tone()) : 'bg-accent';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SparkbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SparkbarComponent, isStandalone: true, selector: "fx-ui-sparkbar", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"flex items-end gap-[2px]\"\n  [style.height.px]=\"height()\"\n  role=\"img\"\n  [attr.aria-label]=\"'Trend: ' + values().join(', ')\"\n>\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"flex-1 min-w-[3px] rounded-[1px] opacity-80\"\n      [ngClass]=\"barClass()\"\n      [style.height.%]=\"bar\"\n    ></div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SparkbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-sparkbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\n  class=\"flex items-end gap-[2px]\"\n  [style.height.px]=\"height()\"\n  role=\"img\"\n  [attr.aria-label]=\"'Trend: ' + values().join(', ')\"\n>\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"flex-1 min-w-[3px] rounded-[1px] opacity-80\"\n      [ngClass]=\"barClass()\"\n      [style.height.%]=\"bar\"\n    ></div>\n  }\n</div>\n" }]
+        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 /** KPI tile row: big number + tinted icon box + caption, in a responsive grid. */
 class StatCardsComponent {
     cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
+    /**
+     * 'tile' (default): tinted icon box + number + caption — the pre-V2 look.
+     * 'figure': the V2 design's KPI column — caption on top, large figure-font
+     * number, toned sub-caption underneath (no icon box).
+     */
+    variant = input('tile', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Grid columns; defaults to one column per card. */
     cols;
     get gridColumns() {
@@ -3719,10 +4104,17 @@ class StatCardsComponent {
         return card.tone ? toneText(card.tone) : 'text-text-primary';
     }
     boxClass(card) {
-        return card.tone ? toneBadge(card.tone) : 'bg-bg-hover text-text-secondary';
+        // Ô icon vuông: chỉ lấy MÀU, không lấy hình pill của badge.
+        return toneTint(card.tone ?? null);
+    }
+    deltaClass(card) {
+        return card.delta?.tone ? toneText(card.delta.tone) : 'text-muted';
+    }
+    subClass(card) {
+        return card.subTone ? toneText(card.subTone) : 'text-text-secondary';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatCardsComponent, isStandalone: true, selector: "fx-ui-stat-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    <div class=\"card-common flex items-center gap-normal\">\n      @if (card.icon) {\n        <div\n          class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n          [ngClass]=\"boxClass(card)\"\n        >\n          <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n        </div>\n      }\n      <div class=\"flex flex-col min-w-0\">\n        <span class=\"txt-heading-04\" [ngClass]=\"numClass(card)\">{{ card.value }}</span>\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatCardsComponent, isStandalone: true, selector: "fx-ui-stat-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    @if (variant() === 'figure') {\n      <div class=\"card-common flex flex-col gap-small min-w-0\">\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n        <span\n          class=\"txt-heading-03\"\n          [ngClass]=\"numClass(card)\"\n          style=\"font-family: var(--og-font-figure)\"\n          >{{ card.value }}</span\n        >\n        @if (card.sub) {\n          <span class=\"txt-utility-caption\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              >{{ card.value }}</span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "component", type: SparkbarComponent, selector: "fx-ui-sparkbar", inputs: ["values", "tone", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatCardsComponent, decorators: [{
             type: Component,
@@ -3730,8 +4122,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         NgStyle,
                         NgClass,
                         HeroIconComponent,
-                    ], template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    <div class=\"card-common flex items-center gap-normal\">\n      @if (card.icon) {\n        <div\n          class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n          [ngClass]=\"boxClass(card)\"\n        >\n          <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n        </div>\n      }\n      <div class=\"flex flex-col min-w-0\">\n        <span class=\"txt-heading-04\" [ngClass]=\"numClass(card)\">{{ card.value }}</span>\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n      </div>\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], cols: [{
+                        SparkbarComponent,
+                    ], template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    @if (variant() === 'figure') {\n      <div class=\"card-common flex flex-col gap-small min-w-0\">\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n        <span\n          class=\"txt-heading-03\"\n          [ngClass]=\"numClass(card)\"\n          style=\"font-family: var(--og-font-figure)\"\n          >{{ card.value }}</span\n        >\n        @if (card.sub) {\n          <span class=\"txt-utility-caption\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              >{{ card.value }}</span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cols: [{
                 type: Input
             }] } });
 
@@ -3771,18 +4164,24 @@ class FilterChipsComponent {
     }
     chipClass(option) {
         const active = (this.value ?? '') === option.value;
+        // Chip "All" (value rỗng) khi ĐANG CHỌN dùng **accent** (xanh), không phải
+        // nền đen — khớp demo (ref 11: pill "All 40" là accent). Nền đen chỉ dành
+        // cho badge severity Critical (anh Tú chốt 03/09).
         if (!option.value) {
             return active
-                ? 'bg-text-primary text-text-focus'
-                : 'bg-bg-hover text-text-secondary hover:bg-gradient-primary-start/10 hover:text-gradient-primary-start';
+                ? 'bg-accent text-accent-contrast'
+                : 'bg-bg-hover text-text-secondary hover:bg-accent-soft hover:text-accent-fg';
         }
         const tone = option.value in this.toneOverrides
             ? this.toneOverrides[option.value]
             : severityTone(option.value);
         if (!tone) {
-            return active ? 'bg-text-primary text-text-focus' : `${toneBadge(null)} hover:opacity-50`;
+            return active ? 'bg-accent text-accent-contrast' : `${toneScale(null)} hover:opacity-50`;
         }
-        return active ? `${toneBg(tone)} text-text-focus` : `${toneBadge(tone)} hover:opacity-50`;
+        // Chip tự có hình dạng riêng → chỉ lấy MÀU. Dùng thang đo (`tone-scale-*`)
+        // chứ KHÔNG dùng `toneTint`: Critical ở filter phải là đỏ sẫm, không phải
+        // pill đen đặc (anh Tú báo 03/09).
+        return active ? `${toneBg(tone)} text-text-focus` : `${toneScale(tone)} hover:opacity-50`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FilterChipsComponent, isStandalone: true, selector: "fx-ui-filter-chips", inputs: { options: "options", value: "value", toneOverrides: "toneOverrides" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options; track option.value) {\n    <button\n      type=\"button\"\n      class=\"px-3 py-1 rounded-full txt-utility-caption font-medium transition-colors cursor-pointer\"\n      [ngClass]=\"chipClass(option)\"\n      (click)=\"select(option)\"\n    >\n      {{ option.label }}\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -3798,6 +4197,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 type: Input
             }] } });
 
+/**
+ * V2 filter pills — the quick-filter row above ranked lists (design refs 02,
+ * 03, 11): outlined capsules with a muted count, the active one filled with
+ * the primary text colour.
+ *
+ * Distinct from `fx-ui-filter-chips`, which tints each chip by its severity
+ * tone and carries no count. Presentational: the caller owns the filter state.
+ *
+ *   <fx-ui-filter-pills [options]="pills" [value]="filters.status"
+ *                       (valueChange)="filters.status = $event; refresh()" />
+ */
+class FilterPillsComponent {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Accepts undefined so screens can bind an optional filter-bag key. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    isActive(option) {
+        return (this.value() ?? '') === option.value;
+    }
+    /**
+     * Pill ĐANG CHỌN dùng **accent** (xanh), không phải nền đen — khớp demo:
+     * design ref 11 vẽ pill "All 40" là pill accent. Nền đen `--og-text` chỉ
+     * dành cho badge severity Critical (`.og-badge--solid`), không dùng cho
+     * trạng thái chọn của filter (anh Tú chốt 03/09).
+     */
+    pillClass(option) {
+        return this.isActive(option)
+            ? 'bg-accent text-accent-contrast border-accent'
+            : 'border-border-default text-text-secondary hover:border-border-strong';
+    }
+    countClass(option) {
+        return this.isActive(option) ? 'opacity-70' : 'text-text-placeholder';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FilterPillsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FilterPillsComponent, isStandalone: true, selector: "fx-ui-filter-pills", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      [attr.aria-pressed]=\"isActive(option)\"\n      class=\"flex items-center gap-small px-semi py-xs rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors\"\n      [ngClass]=\"pillClass(option)\"\n      (click)=\"valueChange.emit(option.value)\"\n    >\n      {{ option.label }}\n      @if (option.count !== null && option.count !== undefined) {\n        <span [ngClass]=\"countClass(option)\" style=\"font-family: var(--og-font-figure)\">{{ option.count }}</span>\n      }\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FilterPillsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-filter-pills', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      [attr.aria-pressed]=\"isActive(option)\"\n      class=\"flex items-center gap-small px-semi py-xs rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors\"\n      [ngClass]=\"pillClass(option)\"\n      (click)=\"valueChange.emit(option.value)\"\n    >\n      {{ option.label }}\n      @if (option.count !== null && option.count !== undefined) {\n        <span [ngClass]=\"countClass(option)\" style=\"font-family: var(--og-font-figure)\">{{ option.count }}</span>\n      }\n    </button>\n  }\n</div>\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * V2 stage progress dots — the walkthrough position indicator on the attack
+ * chain toolbar (design refs 04, 07): one dot per stage, the current one drawn
+ * as a wider accent bar, visited ones solid, the rest faint.
+ *
+ *   <fx-ui-stage-dots [count]="8" [current]="stageIndex()"
+ *                     (dotClick)="goToStage($event)" />
+ */
+class StageDotsComponent {
+    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** 0-based current stage; -1 (default) means none selected yet. */
+    current = input(-1, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Emit the clicked stage index; wire it to make the dots navigable. */
+    dotClick = output();
+    dots = computed(() => Array.from({ length: Math.max(0, this.count()) }, (_, i) => i), ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
+    dotClass(index) {
+        const current = this.current();
+        if (index === current)
+            return 'w-5 bg-accent';
+        if (current >= 0 && index < current)
+            return 'w-1.5 bg-text-placeholder';
+        return 'w-1.5 bg-border-strong';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StageDotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StageDotsComponent, isStandalone: true, selector: "fx-ui-stage-dots", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dotClick: "dotClick" }, ngImport: i0, template: "<div class=\"flex items-center gap-xs\" role=\"tablist\">\n  @for (i of dots(); track i) {\n    <button\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === current()\"\n      [attr.aria-label]=\"'Stage ' + (i + 1)\"\n      class=\"h-1.5 rounded-full cursor-pointer transition-all duration-150 hover:opacity-70\"\n      [ngClass]=\"dotClass(i)\"\n      (click)=\"dotClick.emit(i)\"\n    ></button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StageDotsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-stage-dots', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex items-center gap-xs\" role=\"tablist\">\n  @for (i of dots(); track i) {\n    <button\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === current()\"\n      [attr.aria-label]=\"'Stage ' + (i + 1)\"\n      class=\"h-1.5 rounded-full cursor-pointer transition-all duration-150 hover:opacity-70\"\n      [ngClass]=\"dotClass(i)\"\n      (click)=\"dotClick.emit(i)\"\n    ></button>\n  }\n</div>\n" }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], dotClick: [{ type: i0.Output, args: ["dotClick"] }] } });
+
+/**
+ * V2 evidence code block — the mono panel that carries a process tree, a
+ * command line or any captured text (design ref 05, "Process tree").
+ *
+ * Whitespace is preserved and the box scrolls on its own rather than pushing
+ * the page wide, so ASCII trees survive narrow viewports.
+ *
+ *   <fx-ui-code-block [label]="'analyze.processTree' | translate" [code]="tree" />
+ */
+class CodeBlockComponent {
+    code = input('', ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    /** Caller-translated caption above the box; omit for a bare block. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Scroll cap; empty grows with the content. */
+    maxHeight = input('', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CodeBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CodeBlockComponent, isStandalone: true, selector: "fx-ui-code-block", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (label()) {\n  <div class=\"txt-utility-caption font-bold text-text-secondary mb-normal\">{{ label() }}</div>\n}\n<pre\n  class=\"m-0 p-large rounded-control border border-border bg-surface overflow-auto txt-body-compact-01 text-strong\"\n  [style.max-height]=\"maxHeight() || null\"\n  style=\"font-family: var(--og-font-mono); white-space: pre; tab-size: 2\"\n>{{ code() }}</pre>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CodeBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-code-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n  <div class=\"txt-utility-caption font-bold text-text-secondary mb-normal\">{{ label() }}</div>\n}\n<pre\n  class=\"m-0 p-large rounded-control border border-border bg-surface overflow-auto txt-body-compact-01 text-strong\"\n  [style.max-height]=\"maxHeight() || null\"\n  style=\"font-family: var(--og-font-mono); white-space: pre; tab-size: 2\"\n>{{ code() }}</pre>\n" }]
+        }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }] } });
+
+/**
+ * V2 captured-evidence frame — a faux window chrome (traffic lights + mono file
+ * name + timestamp) around a screenshot, with a placeholder when the image is
+ * missing (design ref 05, "Screenshot").
+ *
+ *   <fx-ui-screenshot-frame [label]="'analyze.screenshot' | translate"
+ *                           fileName="chain-05.png" timestamp="09:42:18"
+ *                           [src]="url" [caption]="caption" />
+ */
+class ScreenshotFrameComponent {
+    /** Caller-translated caption above the frame; omit for a bare frame. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    fileName = input('', ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
+    timestamp = input('', ...(ngDevMode ? [{ debugName: "timestamp" }] : /* istanbul ignore next */ []));
+    /** Image URL; empty renders the placeholder body. */
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Caller-translated line under (or inside) the frame. */
+    caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    height = input('180px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScreenshotFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ScreenshotFrameComponent, isStandalone: true, selector: "fx-ui-screenshot-frame", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (label()) {\n  <div class=\"txt-utility-caption font-bold text-text-secondary mb-normal\">{{ label() }}</div>\n}\n<div class=\"rounded-control border border-border bg-surface overflow-hidden\">\n  <!-- Window chrome: traffic lights + mono file name + capture time -->\n  <div class=\"flex items-center gap-small px-normal py-small border-b border-border bg-surface-sunken\">\n    <span class=\"flex items-center gap-xs shrink-0\">\n      <span class=\"w-2 h-2 rounded-full bg-critical/70\"></span>\n      <span class=\"w-2 h-2 rounded-full bg-warning/70\"></span>\n      <span class=\"w-2 h-2 rounded-full bg-success/70\"></span>\n    </span>\n    @if (fileName()) {\n      <span class=\"txt-utility-caption text-text-secondary truncate\" style=\"font-family: var(--og-font-mono)\">\n        {{ fileName() }}\n      </span>\n    }\n    @if (timestamp()) {\n      <span class=\"txt-utility-caption text-text-placeholder shrink-0\" style=\"font-family: var(--og-font-mono)\">\n        \u00B7 {{ timestamp() }}\n      </span>\n    }\n  </div>\n\n  @if (src()) {\n    <img [src]=\"src()\" [alt]=\"alt() || fileName()\" class=\"block w-full object-cover\" [style.height]=\"height()\" />\n  } @else {\n    <div\n      class=\"flex flex-col items-center justify-center gap-normal px-large text-center\"\n      [style.height]=\"height()\"\n    >\n      <fx-ui-hero-icon icon=\"camera\" [size]=\"22\" class=\"flex text-text-placeholder\"></fx-ui-hero-icon>\n      @if (caption()) {\n        <span class=\"txt-utility-caption text-text-placeholder max-w-[280px]\">{{ caption() }}</span>\n      }\n    </div>\n  }\n</div>\n@if (src() && caption()) {\n  <div class=\"txt-utility-caption text-text-placeholder mt-normal\">{{ caption() }}</div>\n}\n", dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScreenshotFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-screenshot-frame', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "@if (label()) {\n  <div class=\"txt-utility-caption font-bold text-text-secondary mb-normal\">{{ label() }}</div>\n}\n<div class=\"rounded-control border border-border bg-surface overflow-hidden\">\n  <!-- Window chrome: traffic lights + mono file name + capture time -->\n  <div class=\"flex items-center gap-small px-normal py-small border-b border-border bg-surface-sunken\">\n    <span class=\"flex items-center gap-xs shrink-0\">\n      <span class=\"w-2 h-2 rounded-full bg-critical/70\"></span>\n      <span class=\"w-2 h-2 rounded-full bg-warning/70\"></span>\n      <span class=\"w-2 h-2 rounded-full bg-success/70\"></span>\n    </span>\n    @if (fileName()) {\n      <span class=\"txt-utility-caption text-text-secondary truncate\" style=\"font-family: var(--og-font-mono)\">\n        {{ fileName() }}\n      </span>\n    }\n    @if (timestamp()) {\n      <span class=\"txt-utility-caption text-text-placeholder shrink-0\" style=\"font-family: var(--og-font-mono)\">\n        \u00B7 {{ timestamp() }}\n      </span>\n    }\n  </div>\n\n  @if (src()) {\n    <img [src]=\"src()\" [alt]=\"alt() || fileName()\" class=\"block w-full object-cover\" [style.height]=\"height()\" />\n  } @else {\n    <div\n      class=\"flex flex-col items-center justify-center gap-normal px-large text-center\"\n      [style.height]=\"height()\"\n    >\n      <fx-ui-hero-icon icon=\"camera\" [size]=\"22\" class=\"flex text-text-placeholder\"></fx-ui-hero-icon>\n      @if (caption()) {\n        <span class=\"txt-utility-caption text-text-placeholder max-w-[280px]\">{{ caption() }}</span>\n      }\n    </div>\n  }\n</div>\n@if (src() && caption()) {\n  <div class=\"txt-utility-caption text-text-placeholder mt-normal\">{{ caption() }}</div>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
 /** Thin tone-coloured progress/score bar with optional label and caption. */
 class MeterComponent {
     value = 0;
@@ -3830,26 +4352,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 type: Input
             }] } });
 
-/** Detail-panel section: card with an icon + heading header and projected body. */
+/**
+ * Panel section: card with a header and projected body.
+ *  - titleStyle 'heading' (default): icon + heading, the pre-V2 look
+ *  - titleStyle 'eyebrow': the V2 design's panel header — small tracked
+ *    caption on the left, muted [aside] text on the right
+ */
 class SectionCardComponent {
     /** Caller-translated heading. */
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     /** hero-icon name; omitted → text-only header. */
     icon;
     iconTone = input(null, ...(ngDevMode ? [{ debugName: "iconTone" }] : /* istanbul ignore next */ []));
+    titleStyle = input('heading', ...(ngDevMode ? [{ debugName: "titleStyle" }] : /* istanbul ignore next */ []));
+    /** Caller-translated right-aligned hint (eyebrow style). */
+    aside = input('', ...(ngDevMode ? [{ debugName: "aside" }] : /* istanbul ignore next */ []));
     get iconClass() {
         const iconTone = this.iconTone();
         return iconTone ? toneText(iconTone) : 'text-text-secondary';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SectionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SectionCardComponent, isStandalone: true, selector: "fx-ui-section-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card-common\">\n  <div class=\"flex items-center gap-normal mb-large\">\n    @if (icon) {\n      <fx-ui-hero-icon [ngClass]=\"iconClass\" [icon]=\"icon\" [size]=\"18\"></fx-ui-hero-icon>\n    }\n    <span class=\"txt-heading-06\">{{ title() }}</span>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SectionCardComponent, isStandalone: true, selector: "fx-ui-section-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, titleStyle: { classPropertyName: "titleStyle", publicName: "titleStyle", isSignal: true, isRequired: false, transformFunction: null }, aside: { classPropertyName: "aside", publicName: "aside", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card-common\">\n  @if (titleStyle() === 'eyebrow') {\n    <div class=\"flex items-baseline justify-between gap-normal mb-large\">\n      <span class=\"txt-eyebrow\">{{ title() }}</span>\n      @if (aside()) {\n        <span class=\"txt-utility-description text-right\">{{ aside() }}</span>\n      }\n    </div>\n  } @else {\n    <div class=\"flex items-center gap-normal mb-large\">\n      @if (icon) {\n        <fx-ui-hero-icon [ngClass]=\"iconClass\" [icon]=\"icon\" [size]=\"18\"></fx-ui-hero-icon>\n      }\n      <span class=\"txt-heading-06\">{{ title() }}</span>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SectionCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-section-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent, NgClass], template: "<div class=\"card-common\">\n  <div class=\"flex items-center gap-normal mb-large\">\n    @if (icon) {\n      <fx-ui-hero-icon [ngClass]=\"iconClass\" [icon]=\"icon\" [size]=\"18\"></fx-ui-hero-icon>\n    }\n    <span class=\"txt-heading-06\">{{ title() }}</span>\n  </div>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-section-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent, NgClass], template: "<div class=\"card-common\">\n  @if (titleStyle() === 'eyebrow') {\n    <div class=\"flex items-baseline justify-between gap-normal mb-large\">\n      <span class=\"txt-eyebrow\">{{ title() }}</span>\n      @if (aside()) {\n        <span class=\"txt-utility-description text-right\">{{ aside() }}</span>\n      }\n    </div>\n  } @else {\n    <div class=\"flex items-center gap-normal mb-large\">\n      @if (icon) {\n        <fx-ui-hero-icon [ngClass]=\"iconClass\" [icon]=\"icon\" [size]=\"18\"></fx-ui-hero-icon>\n      }\n      <span class=\"txt-heading-06\">{{ title() }}</span>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{
                 type: Input
-            }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }] } });
+            }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], titleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleStyle", required: false }] }], aside: [{ type: i0.Input, args: [{ isSignal: true, alias: "aside", required: false }] }] } });
 
 /**
  * Label-over-value field for detail panels. The label uses txt-field-label
@@ -3938,11 +4468,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
 
 let nextUid = 0;
 /**
- * Two-column master-detail shell driven by a BaseMasterDetailComponent.
- * The host page projects its own header/filters and supplies templates for
- * the parts that vary per entity:
+ * Master-detail shell driven by a BaseMasterDetailComponent. Two-column by
+ * default; projecting a [mdFacets] block (V2 lookup screens) adds a third
+ * facets-rail column before the list. The host page projects its own
+ * header/filters and supplies templates for the parts that vary per entity:
  *
  *   <fx-ui-master-detail [table]="this" [emptyMessage]="'noData' | translate">
+ *     <div mdFacets>…<fx-ui-facets-rail …/>…</div>   <!-- optional, V2 -->
  *     <div mdHeader>…title / stat cards…</div>
  *     <div mdFilters>…search bar / filter chips…</div>
  *     <ng-template #row let-item let-selected="selected">…row body…</ng-template>
@@ -3953,19 +4485,38 @@ let nextUid = 0;
  * tab stop, ArrowUp/Down/Home/End move the selection.
  */
 class MasterDetailComponent {
+    hostEl = inject((ElementRef));
+    /** True when the host projected a [mdFacets] block — switches to 3 columns. */
+    hasFacets = false;
     table;
     /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
     listWidth = input('420px', ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
-    maxListHeight = input('640px', ...(ngDevMode ? [{ debugName: "maxListHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Chiều cao CHUNG của cả ba cụm (facets / list / detail). Mặc định trừ phần
+     * chrome phía trên (topbar + tab strip + context line) khỏi viewport để
+     * bảng ba cột vừa đúng một màn, không kéo trang cuộn theo.
+     * Chỉ có tác dụng từ 1080px — xem `.fx-md-row` trong CSS.
+     */
+    paneHeight = input('calc(100vh - 300px)', ...(ngDevMode ? [{ debugName: "paneHeight" }] : /* istanbul ignore next */ []));
     pageSizeOptions = input([5, 10, 20, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     /** Labels come in via inputs — the lib carries no i18n. */
     emptyMessage = input('No data', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     listLabel = input('', ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
     skeletonCards = input(3, ...(ngDevMode ? [{ debugName: "skeletonCards" }] : /* istanbul ignore next */ []));
+    /** 'prevnext' renders the V2 "X of Y" + Prev/Next controls instead of the
+        Material paginator (which stays in the DOM, hidden — it is the paging
+        engine BaseTable subscribes to). */
+    paginationStyle = input('paginator', ...(ngDevMode ? [{ debugName: "paginationStyle" }] : /* istanbul ignore next */ []));
+    /** Caller-translated Prev/Next labels ("X of Y" is numeric). */
+    prevLabel = input('Prev', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     rowTemplate = contentChild.required('row');
     detailTemplate = contentChild.required('detail');
     paginator = viewChild.required(MatPaginator);
     uid = `fx-md-${nextUid++}`;
+    ngAfterContentInit() {
+        this.hasFacets = !!this.hostEl.nativeElement.querySelector('[mdFacets]');
+    }
     ngAfterViewInit() {
         // The paginator lives in this view, not the host page's, so the host's
         // @ViewChild(MatPaginator) never finds it. Hand it to the table so
@@ -3974,6 +4525,17 @@ class MasterDetailComponent {
             this.table.paginator = this.paginator();
         }
     }
+    /** "X of Y" range text for the prevnext pagination style. */
+    rangeText() {
+        const total = this.table.total ?? 0;
+        if (!total)
+            return '0 of 0';
+        const page = this.paginator().pageIndex;
+        const size = this.table.pageSize;
+        const from = page * size + 1;
+        const to = Math.min((page + 1) * size, total);
+        return `${from}–${to} of ${total}`;
+    }
     isSelected(row) {
         return this.table.idOf(row) === this.table.selectedId;
     }
@@ -4012,7 +4574,7 @@ class MasterDetailComponent {
         el?.scrollIntoView({ block: 'nearest' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MasterDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: MasterDetailComponent, isStandalone: true, selector: "fx-ui-master-detail", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: false, isRequired: false, transformFunction: null }, listWidth: { classPropertyName: "listWidth", publicName: "listWidth", isSignal: true, isRequired: false, transformFunction: null }, maxListHeight: { classPropertyName: "maxListHeight", publicName: "maxListHeight", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, skeletonCards: { classPropertyName: "skeletonCards", publicName: "skeletonCards", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col lg:flex-row items-start gap-xl\" [style.--fx-md-list-width]=\"listWidth()\">\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs\"\n      [style.maxHeight]=\"maxListHeight()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-gradient-primary-start bg-gradient-primary-start/5'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    ></mat-paginator>\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"w-full lg:flex-1 min-w-0\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards()\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".fx-md-list{width:100%}@media(min-width:1080px){.fx-md-list{width:var(--fx-md-list-width, 420px);flex-shrink:0}}\n"], dependencies: [{ kind: "component", type: SkeletonListComponent, selector: "fx-ui-skeleton-list", inputs: ["rows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "fx-ui-empty-state", inputs: ["message", "icon", "height"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SkeletonDetailComponent, selector: "fx-ui-skeleton-detail", inputs: ["cards", "rows"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: MasterDetailComponent, isStandalone: true, selector: "fx-ui-master-detail", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: false, isRequired: false, transformFunction: null }, listWidth: { classPropertyName: "listWidth", publicName: "listWidth", isSignal: true, isRequired: false, transformFunction: null }, paneHeight: { classPropertyName: "paneHeight", publicName: "paneHeight", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, skeletonCards: { classPropertyName: "skeletonCards", publicName: "skeletonCards", isSignal: true, isRequired: false, transformFunction: null }, paginationStyle: { classPropertyName: "paginationStyle", publicName: "paginationStyle", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- 3 c\u1EE5m CHUNG chi\u1EC1u cao, m\u1ED7i c\u1EE5m SCROLL RI\u00CANG (anh T\u00FA ch\u1ED1t 03/09).\n     `items-stretch` + chi\u1EC1u cao \u0111\u1EB7t tr\u00EAn h\u00E0ng (xem .fx-md-row trong CSS) \u0111\u1EC3\n     c\u1EA3 ba pane b\u1EB1ng nhau; m\u1ED7i pane l\u00E0 flex-col + min-h-0 v\u00E0 ch\u1EC9 ph\u1EA7n th\u00E2n\n     `overflow-auto flex-1` cu\u1ED9n \u2014 header/filter/paginator \u0111\u1EE9ng y\u00EAn.\n     \u26A0\uFE0F H\u01B0\u1EDBng h\u00E0ng + chi\u1EC1u cao do CONTAINER QUERY trong CSS quy\u1EBFt \u0111\u1ECBnh (theo\n     b\u1EC1 r\u1ED9ng c\u1EE7a ch\u00EDnh h\u00E0ng), KH\u00D4NG ph\u1EA3i `lg:flex-row`. \u0110\u1EEBng th\u00EAm l\u1EA1i class\n     `lg:*` \u1EDF \u0111\u00E2y \u2014 `lg` trong lib l\u00E0 1080px v\u00E0 viewport l\u00E0 proxy sai; xem\n     ghi ch\u00FA \u0111\u1EA7u master-detail.component.css. -->\n<div\n  class=\"fx-md-row flex flex-col items-stretch gap-xl\"\n  [style.--fx-md-list-width]=\"listWidth()\"\n  [style.--fx-md-pane-h]=\"paneHeight()\"\n>\n  <!-- Facets rail (V2 3-column lookup) \u2014 wrapper always rendered so ng-content\n       stays unconditional; hidden when the host projects nothing. -->\n  <div\n    class=\"fx-md-facets card-common bg-surface flex flex-col min-h-0\"\n    [class.hidden]=\"!hasFacets\"\n  >\n    <div class=\"flex-1 min-h-0 overflow-auto pr-xs\">\n      <ng-content select=\"[mdFacets]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common flex flex-col min-h-0\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs flex-1 min-h-0\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-accent bg-accent-soft/60'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [class.fx-md-paginator-hidden]=\"paginationStyle() === 'prevnext'\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    ></mat-paginator>\n    @if (paginationStyle() === 'prevnext') {\n      <div class=\"flex items-center justify-between mt-normal\">\n        <span class=\"txt-utility-description\" style=\"font-family: var(--og-font-figure)\">\n          {{ rangeText() }}\n        </span>\n        <div class=\"flex gap-small\">\n          <button\n            type=\"button\"\n            class=\"btn-alternative !h-8 !px-semi text-sm\"\n            [disabled]=\"!paginator().hasPreviousPage()\"\n            (click)=\"paginator().previousPage()\"\n          >\n            {{ prevLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn-alternative !h-8 !px-semi text-sm\"\n            [disabled]=\"!paginator().hasNextPage()\"\n            (click)=\"paginator().nextPage()\"\n          >\n            {{ nextLabel() }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"fx-md-detail w-full min-w-0 flex flex-col min-h-0\">\n    <div class=\"flex-1 min-h-0 overflow-auto\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards()\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-full min-h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n      </div>\n    }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size;container-name:fx-md}.fx-md-list,.fx-md-facets{width:100%}@container fx-md (min-width: 968px){.fx-md-row{flex-direction:row;height:var(--fx-md-pane-h, calc(100vh - 300px) );min-height:420px}.fx-md-facets{flex:0 1 230px;min-width:200px;max-width:260px}.fx-md-list{width:auto;flex:0 1 var(--fx-md-list-width, 420px);min-width:320px;max-width:var(--fx-md-list-width, 420px)}.fx-md-detail{flex:1 1 400px;min-width:400px}}.fx-md-paginator-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\n"], dependencies: [{ kind: "component", type: SkeletonListComponent, selector: "fx-ui-skeleton-list", inputs: ["rows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "fx-ui-empty-state", inputs: ["message", "icon", "height"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SkeletonDetailComponent, selector: "fx-ui-skeleton-detail", inputs: ["cards", "rows"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MasterDetailComponent, decorators: [{
             type: Component,
@@ -4023,10 +4585,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         EmptyStateComponent,
                         MatPaginator,
                         SkeletonDetailComponent,
-                    ], template: "<div class=\"flex flex-col lg:flex-row items-start gap-xl\" [style.--fx-md-list-width]=\"listWidth()\">\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs\"\n      [style.maxHeight]=\"maxListHeight()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-gradient-primary-start bg-gradient-primary-start/5'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    ></mat-paginator>\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"w-full lg:flex-1 min-w-0\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards()\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".fx-md-list{width:100%}@media(min-width:1080px){.fx-md-list{width:var(--fx-md-list-width, 420px);flex-shrink:0}}\n"] }]
+                    ], template: "<!-- 3 c\u1EE5m CHUNG chi\u1EC1u cao, m\u1ED7i c\u1EE5m SCROLL RI\u00CANG (anh T\u00FA ch\u1ED1t 03/09).\n     `items-stretch` + chi\u1EC1u cao \u0111\u1EB7t tr\u00EAn h\u00E0ng (xem .fx-md-row trong CSS) \u0111\u1EC3\n     c\u1EA3 ba pane b\u1EB1ng nhau; m\u1ED7i pane l\u00E0 flex-col + min-h-0 v\u00E0 ch\u1EC9 ph\u1EA7n th\u00E2n\n     `overflow-auto flex-1` cu\u1ED9n \u2014 header/filter/paginator \u0111\u1EE9ng y\u00EAn.\n     \u26A0\uFE0F H\u01B0\u1EDBng h\u00E0ng + chi\u1EC1u cao do CONTAINER QUERY trong CSS quy\u1EBFt \u0111\u1ECBnh (theo\n     b\u1EC1 r\u1ED9ng c\u1EE7a ch\u00EDnh h\u00E0ng), KH\u00D4NG ph\u1EA3i `lg:flex-row`. \u0110\u1EEBng th\u00EAm l\u1EA1i class\n     `lg:*` \u1EDF \u0111\u00E2y \u2014 `lg` trong lib l\u00E0 1080px v\u00E0 viewport l\u00E0 proxy sai; xem\n     ghi ch\u00FA \u0111\u1EA7u master-detail.component.css. -->\n<div\n  class=\"fx-md-row flex flex-col items-stretch gap-xl\"\n  [style.--fx-md-list-width]=\"listWidth()\"\n  [style.--fx-md-pane-h]=\"paneHeight()\"\n>\n  <!-- Facets rail (V2 3-column lookup) \u2014 wrapper always rendered so ng-content\n       stays unconditional; hidden when the host projects nothing. -->\n  <div\n    class=\"fx-md-facets card-common bg-surface flex flex-col min-h-0\"\n    [class.hidden]=\"!hasFacets\"\n  >\n    <div class=\"flex-1 min-h-0 overflow-auto pr-xs\">\n      <ng-content select=\"[mdFacets]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common flex flex-col min-h-0\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs flex-1 min-h-0\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-accent bg-accent-soft/60'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [class.fx-md-paginator-hidden]=\"paginationStyle() === 'prevnext'\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    ></mat-paginator>\n    @if (paginationStyle() === 'prevnext') {\n      <div class=\"flex items-center justify-between mt-normal\">\n        <span class=\"txt-utility-description\" style=\"font-family: var(--og-font-figure)\">\n          {{ rangeText() }}\n        </span>\n        <div class=\"flex gap-small\">\n          <button\n            type=\"button\"\n            class=\"btn-alternative !h-8 !px-semi text-sm\"\n            [disabled]=\"!paginator().hasPreviousPage()\"\n            (click)=\"paginator().previousPage()\"\n          >\n            {{ prevLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn-alternative !h-8 !px-semi text-sm\"\n            [disabled]=\"!paginator().hasNextPage()\"\n            (click)=\"paginator().nextPage()\"\n          >\n            {{ nextLabel() }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"fx-md-detail w-full min-w-0 flex flex-col min-h-0\">\n    <div class=\"flex-1 min-h-0 overflow-auto\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards()\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-full min-h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n      </div>\n    }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size;container-name:fx-md}.fx-md-list,.fx-md-facets{width:100%}@container fx-md (min-width: 968px){.fx-md-row{flex-direction:row;height:var(--fx-md-pane-h, calc(100vh - 300px) );min-height:420px}.fx-md-facets{flex:0 1 230px;min-width:200px;max-width:260px}.fx-md-list{width:auto;flex:0 1 var(--fx-md-list-width, 420px);min-width:320px;max-width:var(--fx-md-list-width, 420px)}.fx-md-detail{flex:1 1 400px;min-width:400px}}.fx-md-paginator-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\n"] }]
         }], propDecorators: { table: [{
                 type: Input
-            }], listWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listWidth", required: false }] }], maxListHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxListHeight", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], skeletonCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCards", required: false }] }], rowTemplate: [{ type: i0.ContentChild, args: ['row', { isSignal: true }] }], detailTemplate: [{ type: i0.ContentChild, args: ['detail', { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
+            }], listWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listWidth", required: false }] }], paneHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneHeight", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], skeletonCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCards", required: false }] }], paginationStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationStyle", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], rowTemplate: [{ type: i0.ContentChild, args: ['row', { isSignal: true }] }], detailTemplate: [{ type: i0.ContentChild, args: ['detail', { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
 
 /**
  * Row-action dropdown wrapper over mat-menu (behavior-layer rule, Playbook
@@ -4047,13 +4609,13 @@ class MenuComponent {
         switch (item.tone) {
             case 'critical':
             case 'danger':
-                return 'text-danger';
+                return 'tone-fg-danger';
             case 'warning':
-                return 'text-warning';
+                return 'tone-fg-warning';
             case 'success':
-                return 'text-success';
+                return 'tone-fg-success';
             case 'information':
-                return 'text-information';
+                return 'tone-fg-information';
             default:
                 return 'text-text-primary';
         }
@@ -4066,6 +4628,601 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             args: [{ selector: 'fx-ui-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, HeroIconComponent], template: "<button\n  type=\"button\"\n  class=\"inline-flex items-center justify-center rounded-lg p-1 hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n  [matMenuTriggerFor]=\"menu\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <ng-content></ng-content>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  @for (item of items(); track item.label) {\n    <button\n      mat-menu-item\n      type=\"button\"\n      [disabled]=\"item.disabled\"\n      (click)=\"select.emit(item)\"\n    >\n      <span class=\"flex items-center gap-normal\" [class]=\"toneClass(item)\">\n        @if (item.icon) {\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"18\"></fx-ui-hero-icon>\n        }\n        <span>{{ item.label }}</span>\n      </span>\n    </button>\n  }\n</mat-menu>\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
+/**
+ * V2 theme picker — dropdown các theme OgeniumDashboards cho chọn
+ * (OG_PICKER_THEME_META: porcelain/charcoal), mỗi dòng có swatch accent +
+ * page. Drives ThemeService.setTheme(); replaces the pre-V2 sun/moon toggle
+ * (behavior-layer rule: mat-menu stays inside the lib, apps never import
+ * @angular/material directly).
+ *
+ *   <fx-ui-theme-picker />
+ */
+class ThemePickerComponent {
+    themeService = inject(ThemeService);
+    themes = OG_PICKER_THEME_META;
+    current = toSignal(this.themeService.themeChanges(), {
+        initialValue: this.themeService.getCurrentTheme(),
+    });
+    /** Tra trên bộ ĐẦY ĐỦ: theme đang active có thể là một trong 4 theme đã ẩn
+        khỏi picker (deep-link /themes, localStorage cũ) — nhãn vẫn phải đúng. */
+    currentMeta() {
+        return OG_THEME_META.find((t) => t.name === this.current()) ?? this.themes[0];
+    }
+    select(theme) {
+        this.themeService.setTheme(theme);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ThemePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ThemePickerComponent, isStandalone: true, selector: "fx-ui-theme-picker", ngImport: i0, template: "<button\n  type=\"button\"\n  [matMenuTriggerFor]=\"themeMenu\"\n  class=\"flex items-center gap-small px-normal py-small rounded-control border border-border-default bg-transparent cursor-pointer hover:bg-bg-hover transition-colors\"\n  aria-label=\"Change theme\"\n>\n  <span\n    class=\"w-4 h-4 rounded-full border border-border-strong/30 shrink-0\"\n    [style.background]=\"\n      'linear-gradient(135deg, ' +\n      currentMeta().accent +\n      ' 50%, ' +\n      currentMeta().pageBg +\n      ' 50%)'\n    \"\n  ></span>\n  <span class=\"txt-body-01 hidden md:inline\">{{ currentMeta().label }}</span>\n  <fx-ui-hero-icon icon=\"chevron-down\" [size]=\"14\" class=\"flex text-text-secondary\" />\n</button>\n\n<mat-menu #themeMenu=\"matMenu\">\n  @for (theme of themes; track theme.name) {\n    <button\n      mat-menu-item\n      type=\"button\"\n      (click)=\"select(theme.name)\"\n      [attr.aria-current]=\"theme.name === current() ? 'true' : null\"\n    >\n      <div class=\"flex items-center gap-normal min-w-40\">\n        <span\n          class=\"w-5 h-5 rounded-full border border-border-strong/30 shrink-0\"\n          [style.background]=\"\n            'linear-gradient(135deg, ' + theme.accent + ' 50%, ' + theme.pageBg + ' 50%)'\n          \"\n        ></span>\n        <span class=\"txt-body-01 flex-1\">{{ theme.label }}</span>\n        <span class=\"txt-utility-description\">{{ theme.dark ? 'Dark' : 'Light' }}</span>\n        @if (theme.name === current()) {\n          <fx-ui-hero-icon icon=\"check\" [size]=\"16\" class=\"flex text-text-selected\" />\n        }\n      </div>\n    </button>\n  }\n</mat-menu>\n", dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ThemePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-theme-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, HeroIconComponent], template: "<button\n  type=\"button\"\n  [matMenuTriggerFor]=\"themeMenu\"\n  class=\"flex items-center gap-small px-normal py-small rounded-control border border-border-default bg-transparent cursor-pointer hover:bg-bg-hover transition-colors\"\n  aria-label=\"Change theme\"\n>\n  <span\n    class=\"w-4 h-4 rounded-full border border-border-strong/30 shrink-0\"\n    [style.background]=\"\n      'linear-gradient(135deg, ' +\n      currentMeta().accent +\n      ' 50%, ' +\n      currentMeta().pageBg +\n      ' 50%)'\n    \"\n  ></span>\n  <span class=\"txt-body-01 hidden md:inline\">{{ currentMeta().label }}</span>\n  <fx-ui-hero-icon icon=\"chevron-down\" [size]=\"14\" class=\"flex text-text-secondary\" />\n</button>\n\n<mat-menu #themeMenu=\"matMenu\">\n  @for (theme of themes; track theme.name) {\n    <button\n      mat-menu-item\n      type=\"button\"\n      (click)=\"select(theme.name)\"\n      [attr.aria-current]=\"theme.name === current() ? 'true' : null\"\n    >\n      <div class=\"flex items-center gap-normal min-w-40\">\n        <span\n          class=\"w-5 h-5 rounded-full border border-border-strong/30 shrink-0\"\n          [style.background]=\"\n            'linear-gradient(135deg, ' + theme.accent + ' 50%, ' + theme.pageBg + ' 50%)'\n          \"\n        ></span>\n        <span class=\"txt-body-01 flex-1\">{{ theme.label }}</span>\n        <span class=\"txt-utility-description\">{{ theme.dark ? 'Dark' : 'Light' }}</span>\n        @if (theme.name === current()) {\n          <fx-ui-hero-icon icon=\"check\" [size]=\"16\" class=\"flex text-text-selected\" />\n        }\n      </div>\n    </button>\n  }\n</mat-menu>\n" }]
+        }] });
+
+/**
+ * "Waiting on the backend" marker (anh Tú 29/08).
+ *
+ * Put this on any UI the V2 design calls for but no endpoint feeds yet, so the
+ * gap is visible in the product instead of living only in a backlog file.
+ * `grep -r "fx-ui-pending-badge"` then lists every outstanding field.
+ *
+ *   <fx-ui-pending-badge [field]="'confirmed-chains weekly series'" />
+ *
+ * Keep the copy factual: it states that data is missing, never fakes a value.
+ */
+class PendingBadgeComponent {
+    /** Caller-translated chip text. */
+    label = input('Pending API', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * What exactly is missing — shown as the title tooltip so a reviewer can read
+     * the required field without opening the code.
+     */
+    field = input('', ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    /** 'chip' (default) sits inline; 'dot' is a bare marker for dense rows. */
+    variant = input('chip', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    get tooltip() {
+        return this.field() ? `${this.label()} — ${this.field()}` : this.label();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PendingBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: PendingBadgeComponent, isStandalone: true, selector: "fx-ui-pending-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (variant() === 'dot') {\n  <span\n    class=\"inline-block w-[7px] h-[7px] rounded-full bg-warning/70 align-middle\"\n    [attr.title]=\"tooltip\"\n    [attr.aria-label]=\"tooltip\"\n  ></span>\n} @else {\n  <span\n    class=\"inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap align-middle\"\n    [attr.title]=\"tooltip\"\n  >\n    <fx-ui-hero-icon icon=\"clock\" [size]=\"11\" class=\"flex\" />\n    {{ label() }}\n  </span>\n}\n", dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PendingBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-pending-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "@if (variant() === 'dot') {\n  <span\n    class=\"inline-block w-[7px] h-[7px] rounded-full bg-warning/70 align-middle\"\n    [attr.title]=\"tooltip\"\n    [attr.aria-label]=\"tooltip\"\n  ></span>\n} @else {\n  <span\n    class=\"inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap align-middle\"\n    [attr.title]=\"tooltip\"\n  >\n    <fx-ui-hero-icon icon=\"clock\" [size]=\"11\" class=\"flex\" />\n    {{ label() }}\n  </span>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+/**
+ * Wraps UI that is rendered from PLACEHOLDER data so the layout can be
+ * reviewed before its endpoint exists (anh Tú 29/08: "muốn có full giao diện
+ * trước để review").
+ *
+ * The frame makes the status unmistakable — dashed outline, a corner label and
+ * the pending marker naming the missing field — so sample shapes can never be
+ * mistaken for measured values. Drop the wrapper (and the sample input) the
+ * moment the API lands.
+ *
+ * The pending chip is inlined rather than composed from fx-ui-pending-badge:
+ * one lib component importing another inside the same barrel tripped NG0919
+ * (metadata read before definition) in consuming apps.
+ *
+ *   <fx-ui-sample-frame [field]="'weekly activity'" [label]="'Sample layout'">
+ *     …chart rendered from sample series…
+ *   </fx-ui-sample-frame>
+ */
+class SampleFrameComponent {
+    /** Caller-translated corner label. */
+    label = input('Sample layout', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Field the backend still owes — shown on the pending badge tooltip. */
+    field = input('', ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    /** Caller-translated pending-chip text. */
+    pendingLabel = input('Pending API', ...(ngDevMode ? [{ debugName: "pendingLabel" }] : /* istanbul ignore next */ []));
+    get tooltip() {
+        return this.field() ? `${this.pendingLabel()} — ${this.field()}` : this.pendingLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SampleFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: SampleFrameComponent, isStandalone: true, selector: "fx-ui-sample-frame", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, pendingLabel: { classPropertyName: "pendingLabel", publicName: "pendingLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"relative rounded-lg border border-dashed border-warning/50 bg-warning/[0.03] p-normal\">\n  <!-- flex-wrap + nowrap label: in narrow rails the chip drops to the next line\n       instead of the label breaking mid-word (\"SAMPLE / LAYOUT\"). -->\n  <div class=\"flex flex-wrap items-center gap-small mb-normal\">\n    <span class=\"txt-tag-label text-warning uppercase tracking-wide whitespace-nowrap\">{{ label() }}</span>\n    <span\n      class=\"inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap\"\n      [attr.title]=\"tooltip\"\n    >\n      <fx-ui-hero-icon icon=\"clock\" [size]=\"11\" class=\"flex\" />\n      {{ pendingLabel() }}\n    </span>\n  </div>\n  <!-- Sample content is non-interactive: nothing here reflects real state. -->\n  <div class=\"pointer-events-none select-none opacity-90\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SampleFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-sample-frame', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "<div class=\"relative rounded-lg border border-dashed border-warning/50 bg-warning/[0.03] p-normal\">\n  <!-- flex-wrap + nowrap label: in narrow rails the chip drops to the next line\n       instead of the label breaking mid-word (\"SAMPLE / LAYOUT\"). -->\n  <div class=\"flex flex-wrap items-center gap-small mb-normal\">\n    <span class=\"txt-tag-label text-warning uppercase tracking-wide whitespace-nowrap\">{{ label() }}</span>\n    <span\n      class=\"inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap\"\n      [attr.title]=\"tooltip\"\n    >\n      <fx-ui-hero-icon icon=\"clock\" [size]=\"11\" class=\"flex\" />\n      {{ pendingLabel() }}\n    </span>\n  </div>\n  <!-- Sample content is non-interactive: nothing here reflects real state. -->\n  <div class=\"pointer-events-none select-none opacity-90\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], pendingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingLabel", required: false }] }] } });
+
+/**
+ * V2 score badge — the risk/score chip used on attack-path rows, dashboard
+ * panels and project tiles. Colour comes from the 0–100 risk band unless an
+ * explicit tone is given (bands: ≥90 critical, ≥70 danger, ≥40 warning, else
+ * success — same thresholds as value-tone's scoreTone on a 0–100 scale).
+ */
+class ScoreBadgeComponent {
+    score = input.required(...(ngDevMode ? [{ debugName: "score" }] : /* istanbul ignore next */ []));
+    /** Denominator shown as "98 / 100"; omit for a bare score. */
+    outOf = input(null, ...(ngDevMode ? [{ debugName: "outOf" }] : /* istanbul ignore next */ []));
+    /** Overrides the band-derived tone. */
+    tone = input(null, ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    resolvedTone = computed(() => {
+        const explicit = this.tone();
+        if (explicit)
+            return explicit;
+        const value = Number(this.score());
+        if (!isFinite(value))
+            return null;
+        if (value >= 90)
+            return 'critical';
+        if (value >= 70)
+            return 'danger';
+        if (value >= 40)
+            return 'warning';
+        return 'success';
+    }, ...(ngDevMode ? [{ debugName: "resolvedTone" }] : /* istanbul ignore next */ []));
+    badgeClass() {
+        return toneBadge(this.resolvedTone());
+    }
+    sizeClass() {
+        switch (this.size()) {
+            case 'sm':
+                return 'text-xs px-normal py-[1px]';
+            case 'lg':
+                return 'text-2xl px-semi py-small font-semibold';
+            default:
+                return 'text-sm px-semi py-xs font-semibold';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScoreBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ScoreBadgeComponent, isStandalone: true, selector: "fx-ui-score-badge", inputs: { score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, outOf: { classPropertyName: "outOf", publicName: "outOf", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"inline-flex items-center justify-center rounded-control whitespace-nowrap\"\n  [ngClass]=\"[badgeClass(), sizeClass()]\"\n  style=\"font-family: var(--og-font-figure)\"\n>\n  {{ score() }}@if (outOf() !== null) {<span class=\"opacity-60\">&nbsp;/&nbsp;{{ outOf() }}</span>}\n</span>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScoreBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-score-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<span\n  class=\"inline-flex items-center justify-center rounded-control whitespace-nowrap\"\n  [ngClass]=\"[badgeClass(), sizeClass()]\"\n  style=\"font-family: var(--og-font-figure)\"\n>\n  {{ score() }}@if (outOf() !== null) {<span class=\"opacity-60\">&nbsp;/&nbsp;{{ outOf() }}</span>}\n</span>\n" }]
+        }], propDecorators: { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], outOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "outOf", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * V2 StatusDot — tiny tone-coloured indicator used in list rows, project
+ * cards and stat grids. Optional pulse for "live" states (running scans).
+ *
+ *   <fx-ui-status-dot tone="success" />
+ *   <fx-ui-status-dot tone="warning" [pulse]="true" />
+ */
+class StatusDotComponent {
+    tone = input(null, ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Diameter in px. */
+    size = input(8, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    pulse = input(false, ...(ngDevMode ? [{ debugName: "pulse" }] : /* istanbul ignore next */ []));
+    dotClass() {
+        return toneBg(this.tone());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatusDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatusDotComponent, isStandalone: true, selector: "fx-ui-status-dot", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"relative inline-flex shrink-0\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  @if (pulse()) {\n    <span\n      class=\"absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping motion-reduce:animate-none\"\n      [ngClass]=\"dotClass()\"\n    ></span>\n  }\n  <span class=\"relative inline-flex h-full w-full rounded-full\" [ngClass]=\"dotClass()\"></span>\n</span>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatusDotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-status-dot', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<span\n  class=\"relative inline-flex shrink-0\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  @if (pulse()) {\n    <span\n      class=\"absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping motion-reduce:animate-none\"\n      [ngClass]=\"dotClass()\"\n    ></span>\n  }\n  <span class=\"relative inline-flex h-full w-full rounded-full\" [ngClass]=\"dotClass()\"></span>\n</span>\n" }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }] } });
+
+/**
+ * V2 segmented control — mode toggles (Essentials/Advanced), Catalog/Table
+ * view switches, sub-navigation inside a tab. Generic n-option control; the
+ * semantics live with the caller.
+ *
+ * Rendered as a compact pill group (anh Tú 29/08): equal-width options inside
+ * a rounded-full track, with a single "thumb" that SLIDES to the active
+ * option (transform transition — no per-button background repaint).
+ *
+ *   <fx-ui-segmented [options]="modes" [(value)]="mode" />
+ */
+class SegmentedComponent {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the group. */
+    ariaLabel = input('View mode', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Both variants share the pill shape; they differ in the thumb fill:
+     * 'default': raised surface thumb — view switches (Catalog/Table, ref 10).
+     * 'pill': accent-filled thumb — the Essential/Advanced depth toggle
+     * (design refs 04/05).
+     */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Index the sliding thumb sits on; -1 hides it (no/unknown selection). */
+    activeIndex = computed(() => this.options().findIndex((o) => o.value === this.value()), ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Equal-width tracks → the thumb is 1/n of the inner width and slides by
+     *  multiples of its own width. Pure CSS transform, nothing to measure. */
+    thumbWidth = computed(() => `calc((100% - 6px) / ${this.options().length || 1})`, ...(ngDevMode ? [{ debugName: "thumbWidth" }] : /* istanbul ignore next */ []));
+    thumbTransform = computed(() => `translateX(${this.activeIndex() * 100}%)`, ...(ngDevMode ? [{ debugName: "thumbTransform" }] : /* istanbul ignore next */ []));
+    select(option) {
+        if (option.disabled || option.value === this.value())
+            return;
+        this.value.set(option.value);
+    }
+    thumbClass() {
+        return this.variant() === 'pill'
+            ? 'bg-accent'
+            : 'bg-surface-raised border border-border shadow-sm';
+    }
+    optionClass(option) {
+        if (option.value !== this.value()) {
+            return 'text-muted hover:text-strong';
+        }
+        return this.variant() === 'pill' ? 'text-accent-contrast' : 'text-strong';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SegmentedComponent, isStandalone: true, selector: "fx-ui-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div\n  class=\"relative inline-grid max-w-full grid-flow-col auto-cols-fr items-stretch p-[3px] bg-surface-sunken border border-border rounded-full\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <!-- Sliding thumb: one element that translates to the active option -->\n  @if (activeIndex() >= 0) {\n    <span\n      aria-hidden=\"true\"\n      class=\"fx-segmented__thumb absolute top-[3px] bottom-[3px] left-[3px] rounded-full pointer-events-none\"\n      [class]=\"thumbClass()\"\n      [style.width]=\"thumbWidth()\"\n      [style.transform]=\"thumbTransform()\"\n    ></span>\n  }\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      (click)=\"select(option)\"\n      [disabled]=\"option.disabled\"\n      [attr.aria-pressed]=\"option.value === value()\"\n      class=\"relative z-[1] flex min-w-0 items-center justify-center gap-xs px-semi py-[5px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed\"\n      [class]=\"optionClass(option)\"\n    >\n      @if (option.icon) {\n        <fx-ui-hero-icon [icon]=\"option.icon\" [size]=\"14\" class=\"flex\" />\n      }\n      <!-- text-box trims Archivo's uneven leading \u2192 true optical centering\n           (Chrome 128+/Safari 18.2+; older browsers ignore it harmlessly).\n           truncate adds overflow:hidden, and the trimmed box ends at cap\n           height / baseline \u2014 so the dot on \"i\" and the tail on \"y\" fall\n           outside it and get clipped. py/-my pair gives both back without\n           changing the control's height. -->\n      <span class=\"min-w-0 truncate py-[3px] -my-[3px] [text-box:trim-both_cap_alphabetic]\">{{ option.label }}</span>\n      @if (option.count !== undefined) {\n        <span class=\"txt-tag-label px-small rounded-pill bg-neutral-soft text-neutral-soft-fg\">\n          {{ option.count }}\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.fx-segmented__thumb{transition:transform .2s cubic-bezier(.2,.9,.2,1),width .2s cubic-bezier(.2,.9,.2,1);will-change:transform}@media(prefers-reduced-motion:reduce){.fx-segmented__thumb{transition:none}}\n"], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SegmentedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-segmented', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "<div\n  class=\"relative inline-grid max-w-full grid-flow-col auto-cols-fr items-stretch p-[3px] bg-surface-sunken border border-border rounded-full\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <!-- Sliding thumb: one element that translates to the active option -->\n  @if (activeIndex() >= 0) {\n    <span\n      aria-hidden=\"true\"\n      class=\"fx-segmented__thumb absolute top-[3px] bottom-[3px] left-[3px] rounded-full pointer-events-none\"\n      [class]=\"thumbClass()\"\n      [style.width]=\"thumbWidth()\"\n      [style.transform]=\"thumbTransform()\"\n    ></span>\n  }\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      (click)=\"select(option)\"\n      [disabled]=\"option.disabled\"\n      [attr.aria-pressed]=\"option.value === value()\"\n      class=\"relative z-[1] flex min-w-0 items-center justify-center gap-xs px-semi py-[5px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed\"\n      [class]=\"optionClass(option)\"\n    >\n      @if (option.icon) {\n        <fx-ui-hero-icon [icon]=\"option.icon\" [size]=\"14\" class=\"flex\" />\n      }\n      <!-- text-box trims Archivo's uneven leading \u2192 true optical centering\n           (Chrome 128+/Safari 18.2+; older browsers ignore it harmlessly).\n           truncate adds overflow:hidden, and the trimmed box ends at cap\n           height / baseline \u2014 so the dot on \"i\" and the tail on \"y\" fall\n           outside it and get clipped. py/-my pair gives both back without\n           changing the control's height. -->\n      <span class=\"min-w-0 truncate py-[3px] -my-[3px] [text-box:trim-both_cap_alphabetic]\">{{ option.label }}</span>\n      @if (option.count !== undefined) {\n        <span class=\"txt-tag-label px-small rounded-pill bg-neutral-soft text-neutral-soft-fg\">\n          {{ option.count }}\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.fx-segmented__thumb{transition:transform .2s cubic-bezier(.2,.9,.2,1),width .2s cubic-bezier(.2,.9,.2,1);will-change:transform}@media(prefers-reduced-motion:reduce){.fx-segmented__thumb{transition:none}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+/**
+ * V2 ListRow — presentational body for master-detail #row templates and other
+ * selectable lists: status dot + title, trailing badges, meta line. Extra
+ * content projects below the meta line.
+ *
+ *   <ng-template #row let-item>
+ *     <fx-ui-list-row
+ *       [title]="item.name"
+ *       [meta]="item.version + ' · ' + item.date"
+ *       [dotTone]="statusTone(item)"
+ *       [badges]="[{ label: item.severity, tone: severityTone(item.severity) }]"
+ *     />
+ *   </ng-template>
+ */
+class ListRowComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    meta = input('', ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    badges = input([], ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
+    dotTone = input(undefined, ...(ngDevMode ? [{ debugName: "dotTone" }] : /* istanbul ignore next */ []));
+    dotPulse = input(false, ...(ngDevMode ? [{ debugName: "dotPulse" }] : /* istanbul ignore next */ []));
+    badgeClass(badge) {
+        return toneBadge(badge.tone ?? null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ListRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ListRowComponent, isStandalone: true, selector: "fx-ui-list-row", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null }, dotTone: { classPropertyName: "dotTone", publicName: "dotTone", isSignal: true, isRequired: false, transformFunction: null }, dotPulse: { classPropertyName: "dotPulse", publicName: "dotPulse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-normal min-w-0\">\n  @if (dotTone() !== undefined) {\n    <fx-ui-status-dot [tone]=\"dotTone() ?? null\" [pulse]=\"dotPulse()\" />\n  }\n  <span class=\"txt-body-medium-01 truncate flex-1\">{{ title() }}</span>\n  @for (badge of badges(); track badge.label) {\n    <span\n      class=\"txt-tag-label px-normal py-[1px] rounded-pill whitespace-nowrap\"\n      [ngClass]=\"badgeClass(badge)\"\n    >\n      {{ badge.label }}\n    </span>\n  }\n</div>\n@if (meta()) {\n  <div class=\"txt-utility-description mt-xs truncate\" [class.ml-large]=\"dotTone() !== undefined\">\n    {{ meta() }}\n  </div>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: StatusDotComponent, selector: "fx-ui-status-dot", inputs: ["tone", "size", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ListRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-list-row', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, StatusDotComponent], template: "<div class=\"flex items-center gap-normal min-w-0\">\n  @if (dotTone() !== undefined) {\n    <fx-ui-status-dot [tone]=\"dotTone() ?? null\" [pulse]=\"dotPulse()\" />\n  }\n  <span class=\"txt-body-medium-01 truncate flex-1\">{{ title() }}</span>\n  @for (badge of badges(); track badge.label) {\n    <span\n      class=\"txt-tag-label px-normal py-[1px] rounded-pill whitespace-nowrap\"\n      [ngClass]=\"badgeClass(badge)\"\n    >\n      {{ badge.label }}\n    </span>\n  }\n</div>\n@if (meta()) {\n  <div class=\"txt-utility-description mt-xs truncate\" [class.ml-large]=\"dotTone() !== undefined\">\n    {{ meta() }}\n  </div>\n}\n<ng-content></ng-content>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], dotTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotTone", required: false }] }], dotPulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotPulse", required: false }] }] } });
+
+/**
+ * V2 BarList — ranked horizontal bars ("Top projects by risk", "Top critical
+ * attack paths"). Pure DOM (accessible, token-native, clickable) — charts via
+ * ECharts are for time series, not rankings.
+ *
+ *   <fx-ui-bar-list [items]="topRisk" (select)="open($event)" />
+ */
+class BarListComponent {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Rows render as buttons only when true (a (select) listener exists). */
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    select = output();
+    max = computed(() => Math.max(...this.items().map((i) => i.value), 1), ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    widthOf(item) {
+        return Math.max((item.value / this.max()) * 100, 2);
+    }
+    barClass(item) {
+        return item.tone ? toneBg(item.tone) : 'bg-accent';
+    }
+    onSelect(item) {
+        if (this.interactive())
+            this.select.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: BarListComponent, isStandalone: true, selector: "fx-ui-bar-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, ngImport: i0, template: "<div class=\"flex flex-col gap-small\">\n  @for (item of items(); track item.label) {\n    <button\n      type=\"button\"\n      class=\"text-left rounded-control px-normal py-small -mx-normal transition-colors\"\n      [class.hover:bg-surface-sunken]=\"interactive()\"\n      [class.cursor-default]=\"!interactive()\"\n      [tabindex]=\"interactive() ? 0 : -1\"\n      (click)=\"onSelect(item)\"\n    >\n      <div class=\"flex items-baseline justify-between gap-normal\">\n        <span class=\"txt-body-medium-01 truncate\">{{ item.label }}</span>\n        <span class=\"text-sm font-semibold text-strong shrink-0\" style=\"font-family: var(--og-font-figure)\">\n          {{ item.valueLabel ?? item.value }}\n        </span>\n      </div>\n      @if (item.meta) {\n        <div class=\"txt-utility-description truncate\">{{ item.meta }}</div>\n      }\n      <div class=\"mt-xs h-[var(--og-track-h)] rounded-pill bg-track overflow-hidden\">\n        <div\n          class=\"h-full rounded-pill transition-all duration-500\"\n          [ngClass]=\"barClass(item)\"\n          [style.width.%]=\"widthOf(item)\"\n        ></div>\n      </div>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BarListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-bar-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex flex-col gap-small\">\n  @for (item of items(); track item.label) {\n    <button\n      type=\"button\"\n      class=\"text-left rounded-control px-normal py-small -mx-normal transition-colors\"\n      [class.hover:bg-surface-sunken]=\"interactive()\"\n      [class.cursor-default]=\"!interactive()\"\n      [tabindex]=\"interactive() ? 0 : -1\"\n      (click)=\"onSelect(item)\"\n    >\n      <div class=\"flex items-baseline justify-between gap-normal\">\n        <span class=\"txt-body-medium-01 truncate\">{{ item.label }}</span>\n        <span class=\"text-sm font-semibold text-strong shrink-0\" style=\"font-family: var(--og-font-figure)\">\n          {{ item.valueLabel ?? item.value }}\n        </span>\n      </div>\n      @if (item.meta) {\n        <div class=\"txt-utility-description truncate\">{{ item.meta }}</div>\n      }\n      <div class=\"mt-xs h-[var(--og-track-h)] rounded-pill bg-track overflow-hidden\">\n        <div\n          class=\"h-full rounded-pill transition-all duration-500\"\n          [ngClass]=\"barClass(item)\"\n          [style.width.%]=\"widthOf(item)\"\n        ></div>\n      </div>\n    </button>\n  }\n</div>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+
+/**
+ * V2 facets rail — the first column of 3-column lookup screens: filter groups
+ * with counts + a Reset link. Presentational: filtering itself stays in the
+ * page (feed the emitted selection into BaseMasterDetail filters).
+ *
+ *   <div mdFacets>
+ *     <fx-ui-facets-rail [groups]="facetGroups" [selection]="facets"
+ *                        (selectionChange)="onFacets($event)" />
+ *   </div>
+ */
+class FacetsRailComponent {
+    groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    selection = input({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Caller-translated label for the reset affordance. */
+    resetLabel = input('Reset', ...(ngDevMode ? [{ debugName: "resetLabel" }] : /* istanbul ignore next */ []));
+    selectionChange = output();
+    hasSelection = computed(() => Object.values(this.selection()).some((values) => values?.length), ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+    isSelected(group, option) {
+        return (this.selection()[group.id] ?? []).includes(option.value);
+    }
+    toggle(group, option) {
+        const current = this.selection()[group.id] ?? [];
+        let next;
+        if (group.multi) {
+            next = current.includes(option.value)
+                ? current.filter((v) => v !== option.value)
+                : [...current, option.value];
+        }
+        else {
+            next = current.includes(option.value) ? [] : [option.value];
+        }
+        this.selectionChange.emit({ ...this.selection(), [group.id]: next });
+    }
+    reset() {
+        this.selectionChange.emit({});
+    }
+    toneClass(option) {
+        return option.tone ? toneText(option.tone) : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FacetsRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FacetsRailComponent, isStandalone: true, selector: "fx-ui-facets-rail", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-large\">\n  @if (hasSelection()) {\n    <button type=\"button\" class=\"txt-link self-end\" (click)=\"reset()\">\n      {{ resetLabel() }}\n    </button>\n  }\n  @for (group of groups(); track group.id) {\n    <div role=\"group\" [attr.aria-label]=\"group.label\">\n      <div class=\"txt-eyebrow mb-small\">{{ group.label }}</div>\n      <div class=\"flex flex-col gap-xs\">\n        @for (option of group.options; track option.value) {\n          <button\n            type=\"button\"\n            (click)=\"toggle(group, option)\"\n            [attr.aria-pressed]=\"isSelected(group, option)\"\n            class=\"flex items-center gap-normal px-normal py-small rounded-control text-left transition-colors\"\n            [ngClass]=\"\n              isSelected(group, option)\n                ? 'bg-accent-soft text-accent-soft-fg font-medium'\n                : 'text-body hover:bg-surface-sunken'\n            \"\n          >\n            @if (option.tone) {\n              <fx-ui-status-dot [tone]=\"option.tone\" [size]=\"7\" />\n            }\n            <span class=\"text-sm truncate flex-1\">{{ option.label }}</span>\n            @if (option.count !== undefined) {\n              <span class=\"txt-tag-label text-faint\" style=\"font-family: var(--og-font-figure)\">\n                {{ option.count }}\n              </span>\n            }\n          </button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: StatusDotComponent, selector: "fx-ui-status-dot", inputs: ["tone", "size", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FacetsRailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-facets-rail', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, StatusDotComponent], template: "<div class=\"flex flex-col gap-large\">\n  @if (hasSelection()) {\n    <button type=\"button\" class=\"txt-link self-end\" (click)=\"reset()\">\n      {{ resetLabel() }}\n    </button>\n  }\n  @for (group of groups(); track group.id) {\n    <div role=\"group\" [attr.aria-label]=\"group.label\">\n      <div class=\"txt-eyebrow mb-small\">{{ group.label }}</div>\n      <div class=\"flex flex-col gap-xs\">\n        @for (option of group.options; track option.value) {\n          <button\n            type=\"button\"\n            (click)=\"toggle(group, option)\"\n            [attr.aria-pressed]=\"isSelected(group, option)\"\n            class=\"flex items-center gap-normal px-normal py-small rounded-control text-left transition-colors\"\n            [ngClass]=\"\n              isSelected(group, option)\n                ? 'bg-accent-soft text-accent-soft-fg font-medium'\n                : 'text-body hover:bg-surface-sunken'\n            \"\n          >\n            @if (option.tone) {\n              <fx-ui-status-dot [tone]=\"option.tone\" [size]=\"7\" />\n            }\n            <span class=\"text-sm truncate flex-1\">{{ option.label }}</span>\n            @if (option.count !== undefined) {\n              <span class=\"txt-tag-label text-faint\" style=\"font-family: var(--og-font-figure)\">\n                {{ option.count }}\n              </span>\n            }\n          </button>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+/** Trend blocks are softened solids — whole literals (Tailwind v4 has no safelist). */
+const TREND_BLOCK = {
+    critical: 'tone-dot-chart-critical',
+    danger: 'tone-dot-chart-danger',
+    warning: 'tone-dot-chart-warning',
+    success: 'tone-dot-chart-success',
+    information: 'tone-dot-chart-information',
+};
+/**
+ * V2 project card — the Project Management catalog tile (design 12): initials
+ * avatar + name + schedule line, toned score chip, risk-trend blocks, metric
+ * columns and a "Last analysis · … / Open ›" footer.
+ *
+ *   <fx-ui-project-card [card]="project" (open)="goTo(project)" />
+ */
+class ProjectCardComponent {
+    card = input.required(...(ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []));
+    open = output();
+    scoreChipClass() {
+        return toneBadge(this.card().scoreTone ?? null);
+    }
+    chipClass(chip) {
+        return toneBadge(chip.tone ?? null);
+    }
+    blockClass(tone) {
+        return tone ? TREND_BLOCK[tone] : 'bg-bg-hover';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ProjectCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ProjectCardComponent, isStandalone: true, selector: "fx-ui-project-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "open" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"card-common bg-surface w-full flex flex-col gap-normal hover:border-accent hover:shadow-md transition-all\"\n  (click)=\"open.emit(card())\"\n>\n  <!-- Header: avatar + name/sub + score chip (design 12) -->\n  <div class=\"flex items-start justify-between gap-normal w-full\">\n    <div class=\"flex items-start gap-normal min-w-0\">\n      @if (card().avatar) {\n        <span\n          class=\"w-9 h-9 rounded-control bg-accent-soft text-accent flex items-center justify-center shrink-0 txt-utility-caption font-bold uppercase\"\n          style=\"font-family: var(--og-font-figure)\"\n          >{{ card().avatar }}</span\n        >\n      }\n      <div class=\"min-w-0\">\n        <div class=\"txt-heading-06 truncate text-left\">{{ card().name }}</div>\n        @if (card().sub; as sub) {\n          <div class=\"flex items-center gap-xs txt-utility-description mt-xs\">\n            @if (sub.icon) {\n              <fx-ui-hero-icon [icon]=\"sub.icon\" [size]=\"13\" class=\"flex shrink-0\" />\n            }\n            <span class=\"truncate\">{{ sub.label }}</span>\n          </div>\n        } @else if (card().description) {\n          <div class=\"txt-card-content truncate mt-xs text-left\">{{ card().description }}</div>\n        }\n      </div>\n    </div>\n    @if (card().score !== undefined) {\n      <div class=\"text-right shrink-0\">\n        <span\n          class=\"txt-tag-label px-normal py-[2px] rounded-pill whitespace-nowrap\"\n          [ngClass]=\"scoreChipClass()\"\n          >{{ card().score }}</span\n        >\n        @if (card().scoreLabel) {\n          <div class=\"txt-utility-description mt-xs\">{{ card().scoreLabel }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (card().chips?.length) {\n    <div class=\"flex flex-wrap gap-xs w-full\">\n      @for (chip of card().chips; track chip.label) {\n        <span class=\"txt-tag-label px-normal py-[1px] rounded-pill\" [ngClass]=\"chipClass(chip)\">\n          {{ chip.label }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- Design-12 risk trend: toned blocks + caption line -->\n  @if (card().trend; as trend) {\n    <div class=\"w-full\">\n      <div class=\"flex gap-xs w-full\">\n        @for (tone of trend.tones; track $index) {\n          <span class=\"flex-1 h-4 rounded-[2px]\" [ngClass]=\"blockClass(tone)\"></span>\n        }\n      </div>\n      @if (trend.caption || trend.aside) {\n        <div class=\"flex items-center justify-between mt-xs txt-utility-description font-mono\">\n          <span>{{ trend.caption }}</span>\n          <span>{{ trend.aside }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (card().spark?.length) {\n    <fx-ui-sparkbar class=\"w-full\" [values]=\"card().spark!\" [height]=\"24\" />\n  }\n\n  <!-- Metric columns: figure + caption (design 12) -->\n  @if (card().metrics?.length) {\n    <div\n      class=\"grid gap-normal w-full\"\n      [style.grid-template-columns]=\"'repeat(' + card().metrics!.length + ', minmax(0, 1fr))'\"\n    >\n      @for (m of card().metrics; track m.label) {\n        <div class=\"min-w-0 text-left\">\n          <div class=\"txt-heading-06\" style=\"font-family: var(--og-font-figure)\">{{ m.value }}</div>\n          <div class=\"txt-utility-description truncate\">{{ m.label }}</div>\n        </div>\n      }\n    </div>\n  }\n\n  @if (card().meta || card().openLabel) {\n    <div\n      class=\"flex items-center justify-between w-full pt-normal border-t border-border-default\"\n    >\n      <span class=\"txt-utility-description text-left\">{{ card().meta }}</span>\n      @if (card().openLabel) {\n        <span class=\"txt-utility-caption font-bold text-accent whitespace-nowrap\"\n          >{{ card().openLabel }} \u203A</span\n        >\n      }\n    </div>\n  }\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SparkbarComponent, selector: "fx-ui-sparkbar", inputs: ["values", "tone", "height"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ProjectCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-project-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SparkbarComponent, HeroIconComponent], template: "<button\n  type=\"button\"\n  class=\"card-common bg-surface w-full flex flex-col gap-normal hover:border-accent hover:shadow-md transition-all\"\n  (click)=\"open.emit(card())\"\n>\n  <!-- Header: avatar + name/sub + score chip (design 12) -->\n  <div class=\"flex items-start justify-between gap-normal w-full\">\n    <div class=\"flex items-start gap-normal min-w-0\">\n      @if (card().avatar) {\n        <span\n          class=\"w-9 h-9 rounded-control bg-accent-soft text-accent flex items-center justify-center shrink-0 txt-utility-caption font-bold uppercase\"\n          style=\"font-family: var(--og-font-figure)\"\n          >{{ card().avatar }}</span\n        >\n      }\n      <div class=\"min-w-0\">\n        <div class=\"txt-heading-06 truncate text-left\">{{ card().name }}</div>\n        @if (card().sub; as sub) {\n          <div class=\"flex items-center gap-xs txt-utility-description mt-xs\">\n            @if (sub.icon) {\n              <fx-ui-hero-icon [icon]=\"sub.icon\" [size]=\"13\" class=\"flex shrink-0\" />\n            }\n            <span class=\"truncate\">{{ sub.label }}</span>\n          </div>\n        } @else if (card().description) {\n          <div class=\"txt-card-content truncate mt-xs text-left\">{{ card().description }}</div>\n        }\n      </div>\n    </div>\n    @if (card().score !== undefined) {\n      <div class=\"text-right shrink-0\">\n        <span\n          class=\"txt-tag-label px-normal py-[2px] rounded-pill whitespace-nowrap\"\n          [ngClass]=\"scoreChipClass()\"\n          >{{ card().score }}</span\n        >\n        @if (card().scoreLabel) {\n          <div class=\"txt-utility-description mt-xs\">{{ card().scoreLabel }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (card().chips?.length) {\n    <div class=\"flex flex-wrap gap-xs w-full\">\n      @for (chip of card().chips; track chip.label) {\n        <span class=\"txt-tag-label px-normal py-[1px] rounded-pill\" [ngClass]=\"chipClass(chip)\">\n          {{ chip.label }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- Design-12 risk trend: toned blocks + caption line -->\n  @if (card().trend; as trend) {\n    <div class=\"w-full\">\n      <div class=\"flex gap-xs w-full\">\n        @for (tone of trend.tones; track $index) {\n          <span class=\"flex-1 h-4 rounded-[2px]\" [ngClass]=\"blockClass(tone)\"></span>\n        }\n      </div>\n      @if (trend.caption || trend.aside) {\n        <div class=\"flex items-center justify-between mt-xs txt-utility-description font-mono\">\n          <span>{{ trend.caption }}</span>\n          <span>{{ trend.aside }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (card().spark?.length) {\n    <fx-ui-sparkbar class=\"w-full\" [values]=\"card().spark!\" [height]=\"24\" />\n  }\n\n  <!-- Metric columns: figure + caption (design 12) -->\n  @if (card().metrics?.length) {\n    <div\n      class=\"grid gap-normal w-full\"\n      [style.grid-template-columns]=\"'repeat(' + card().metrics!.length + ', minmax(0, 1fr))'\"\n    >\n      @for (m of card().metrics; track m.label) {\n        <div class=\"min-w-0 text-left\">\n          <div class=\"txt-heading-06\" style=\"font-family: var(--og-font-figure)\">{{ m.value }}</div>\n          <div class=\"txt-utility-description truncate\">{{ m.label }}</div>\n        </div>\n      }\n    </div>\n  }\n\n  @if (card().meta || card().openLabel) {\n    <div\n      class=\"flex items-center justify-between w-full pt-normal border-t border-border-default\"\n    >\n      <span class=\"txt-utility-description text-left\">{{ card().meta }}</span>\n      @if (card().openLabel) {\n        <span class=\"txt-utility-caption font-bold text-accent whitespace-nowrap\"\n          >{{ card().openLabel }} \u203A</span\n        >\n      }\n    </div>\n  }\n</button>\n" }]
+        }], propDecorators: { card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: true }] }], open: [{ type: i0.Output, args: ["open"] }] } });
+
+/**
+ * V2 pipeline stepper — the New Analysis 7-stage pipeline header. Renders the
+ * stage strip only; the page owns the stage bodies (project the current one
+ * below). Stage states are data — the parent decides what is done/active.
+ *
+ *   <fx-ui-pipeline-stepper [stages]="stages" (stageClick)="goTo($event)">
+ *     …current stage body…
+ *   </fx-ui-pipeline-stepper>
+ */
+class PipelineStepperComponent {
+    stages = input([], ...(ngDevMode ? [{ debugName: "stages" }] : /* istanbul ignore next */ []));
+    /** Only done stages are click-navigable (review a completed step). */
+    clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    stageClick = output();
+    stateOf(stage) {
+        return stage.state ?? 'pending';
+    }
+    circleClass(stage) {
+        switch (this.stateOf(stage)) {
+            case 'done':
+                return 'bg-accent text-accent-contrast border-accent';
+            case 'active':
+                return 'bg-accent-soft text-accent-soft-fg border-accent';
+            case 'error':
+                return 'tone-scale-danger tone-border-danger';
+            default:
+                return 'bg-surface text-faint border-border';
+        }
+    }
+    labelClass(stage) {
+        switch (this.stateOf(stage)) {
+            case 'active':
+                return 'text-strong font-semibold';
+            case 'done':
+                return 'text-body';
+            case 'error':
+                return 'tone-fg-danger';
+            default:
+                return 'text-faint';
+        }
+    }
+    connectorClass(stage) {
+        return this.stateOf(stage) === 'done' ? 'bg-accent' : 'bg-border';
+    }
+    canClick(stage) {
+        return this.clickable() && this.stateOf(stage) === 'done';
+    }
+    onStageClick(stage, index) {
+        if (this.canClick(stage))
+            this.stageClick.emit(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PipelineStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: PipelineStepperComponent, isStandalone: true, selector: "fx-ui-pipeline-stepper", inputs: { stages: { classPropertyName: "stages", publicName: "stages", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stageClick: "stageClick" }, ngImport: i0, template: "<ol class=\"flex items-start overflow-x-auto pb-small\" role=\"list\">\n  @for (stage of stages(); track stage.id; let i = $index; let last = $last) {\n    <li class=\"flex items-start\" [class.flex-1]=\"!last\" [attr.aria-current]=\"stateOf(stage) === 'active' ? 'step' : null\">\n      <button\n        type=\"button\"\n        class=\"flex flex-col items-center gap-xs min-w-20 px-xs\"\n        [class.cursor-pointer]=\"canClick(stage)\"\n        [class.cursor-default]=\"!canClick(stage)\"\n        [tabindex]=\"canClick(stage) ? 0 : -1\"\n        (click)=\"onStageClick(stage, i)\"\n      >\n        <span\n          class=\"w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-colors\"\n          [ngClass]=\"circleClass(stage)\"\n        >\n          @switch (stateOf(stage)) {\n            @case ('done') {\n              <fx-ui-hero-icon icon=\"check\" [size]=\"16\" class=\"flex\" />\n            }\n            @case ('error') {\n              <fx-ui-hero-icon icon=\"exclamation-triangle\" [size]=\"16\" class=\"flex\" />\n            }\n            @default {\n              {{ i + 1 }}\n            }\n          }\n        </span>\n        <span class=\"text-xs text-center whitespace-nowrap\" [ngClass]=\"labelClass(stage)\">\n          {{ stage.label }}\n        </span>\n        @if (stage.description) {\n          <span class=\"txt-utility-description text-center whitespace-nowrap\">\n            {{ stage.description }}\n          </span>\n        }\n      </button>\n      @if (!last) {\n        <div class=\"flex-1 h-[2px] mt-4 mx-xs rounded-pill min-w-6\" [ngClass]=\"connectorClass(stage)\"></div>\n      }\n    </li>\n  }\n</ol>\n<div class=\"mt-large\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PipelineStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-pipeline-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, HeroIconComponent], template: "<ol class=\"flex items-start overflow-x-auto pb-small\" role=\"list\">\n  @for (stage of stages(); track stage.id; let i = $index; let last = $last) {\n    <li class=\"flex items-start\" [class.flex-1]=\"!last\" [attr.aria-current]=\"stateOf(stage) === 'active' ? 'step' : null\">\n      <button\n        type=\"button\"\n        class=\"flex flex-col items-center gap-xs min-w-20 px-xs\"\n        [class.cursor-pointer]=\"canClick(stage)\"\n        [class.cursor-default]=\"!canClick(stage)\"\n        [tabindex]=\"canClick(stage) ? 0 : -1\"\n        (click)=\"onStageClick(stage, i)\"\n      >\n        <span\n          class=\"w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-colors\"\n          [ngClass]=\"circleClass(stage)\"\n        >\n          @switch (stateOf(stage)) {\n            @case ('done') {\n              <fx-ui-hero-icon icon=\"check\" [size]=\"16\" class=\"flex\" />\n            }\n            @case ('error') {\n              <fx-ui-hero-icon icon=\"exclamation-triangle\" [size]=\"16\" class=\"flex\" />\n            }\n            @default {\n              {{ i + 1 }}\n            }\n          }\n        </span>\n        <span class=\"text-xs text-center whitespace-nowrap\" [ngClass]=\"labelClass(stage)\">\n          {{ stage.label }}\n        </span>\n        @if (stage.description) {\n          <span class=\"txt-utility-description text-center whitespace-nowrap\">\n            {{ stage.description }}\n          </span>\n        }\n      </button>\n      @if (!last) {\n        <div class=\"flex-1 h-[2px] mt-4 mx-xs rounded-pill min-w-6\" [ngClass]=\"connectorClass(stage)\"></div>\n      }\n    </li>\n  }\n</ol>\n<div class=\"mt-large\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { stages: [{ type: i0.Input, args: [{ isSignal: true, alias: "stages", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], stageClick: [{ type: i0.Output, args: ["stageClick"] }] } });
+
+/** Facets-rail skeleton: N nhóm, mỗi nhóm một eyebrow + vài dòng lựa chọn. */
+class SkeletonFacetsComponent {
+    groups = input(3, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    // computed, không phải method — xem [[skeleton-ng0956-array-holes]].
+    groupList = computed(() => range$3(this.groups()), ...(ngDevMode ? [{ debugName: "groupList" }] : /* istanbul ignore next */ []));
+    rowList = computed(() => range$3(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
+    rowWidth(i) {
+        return [80, 65, 72, 58][i % 4];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonFacetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonFacetsComponent, isStandalone: true, selector: "fx-ui-skeleton-facets", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-xl\">\n  @for (g of groupList(); track g) {\n    <div class=\"flex flex-col gap-normal\">\n      <div class=\"h-3 w-20 rounded skeleton-load\"></div>\n      <div class=\"flex flex-col gap-small\">\n        @for (r of rowList(); track r) {\n          <div class=\"flex items-center gap-normal\">\n            <div class=\"w-3.5 h-3.5 rounded skeleton-load shrink-0\"></div>\n            <div class=\"h-3 rounded skeleton-load\" [style.width.%]=\"rowWidth(r)\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonFacetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-skeleton-facets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-xl\">\n  @for (g of groupList(); track g) {\n    <div class=\"flex flex-col gap-normal\">\n      <div class=\"h-3 w-20 rounded skeleton-load\"></div>\n      <div class=\"flex flex-col gap-small\">\n        @for (r of rowList(); track r) {\n          <div class=\"flex items-center gap-normal\">\n            <div class=\"w-3.5 h-3.5 rounded skeleton-load shrink-0\"></div>\n            <div class=\"h-3 rounded skeleton-load\" [style.width.%]=\"rowWidth(r)\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+function range$3(n) {
+    return Array.from({ length: Math.max(0, Number(n) || 0) }, (_, i) => i);
+}
+
+/** Dashboard skeleton: một hàng KPI + N panel có vùng chart. */
+class SkeletonDashboardComponent {
+    kpis = input(4, ...(ngDevMode ? [{ debugName: "kpis" }] : /* istanbul ignore next */ []));
+    panels = input(2, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    kpiList = computed(() => range$2(this.kpis()), ...(ngDevMode ? [{ debugName: "kpiList" }] : /* istanbul ignore next */ []));
+    panelList = computed(() => range$2(this.panels()), ...(ngDevMode ? [{ debugName: "panelList" }] : /* istanbul ignore next */ []));
+    barList = computed(() => range$2(7), ...(ngDevMode ? [{ debugName: "barList" }] : /* istanbul ignore next */ []));
+    /** Chiều cao cột giả — dựng hình chart mà không cần dữ liệu. */
+    barHeight(i) {
+        return [45, 70, 35, 85, 55, 75, 40][i % 7];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonDashboardComponent, isStandalone: true, selector: "fx-ui-skeleton-dashboard", inputs: { kpis: { classPropertyName: "kpis", publicName: "kpis", isSignal: true, isRequired: false, transformFunction: null }, panels: { classPropertyName: "panels", publicName: "panels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-xl\">\n  <div class=\"grid gap-xl grid-cols-2 md:grid-cols-4\">\n    @for (k of kpiList(); track k) {\n      <div class=\"card-common flex flex-col gap-normal\">\n        <div class=\"h-3 w-16 rounded skeleton-load\"></div>\n        <div class=\"h-7 w-24 rounded skeleton-load\"></div>\n        <div class=\"h-3 w-20 rounded skeleton-load\"></div>\n      </div>\n    }\n  </div>\n\n  <div class=\"grid gap-xl grid-cols-1 md:grid-cols-2\">\n    @for (p of panelList(); track p) {\n      <div class=\"card-common flex flex-col gap-large\">\n        <div class=\"h-4 w-1/3 rounded skeleton-load\"></div>\n        <div class=\"flex items-end gap-normal h-40\">\n          @for (b of barList(); track b) {\n            <div class=\"flex-1 rounded-t skeleton-load\" [style.height.%]=\"barHeight(b)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonDashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-skeleton-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-xl\">\n  <div class=\"grid gap-xl grid-cols-2 md:grid-cols-4\">\n    @for (k of kpiList(); track k) {\n      <div class=\"card-common flex flex-col gap-normal\">\n        <div class=\"h-3 w-16 rounded skeleton-load\"></div>\n        <div class=\"h-7 w-24 rounded skeleton-load\"></div>\n        <div class=\"h-3 w-20 rounded skeleton-load\"></div>\n      </div>\n    }\n  </div>\n\n  <div class=\"grid gap-xl grid-cols-1 md:grid-cols-2\">\n    @for (p of panelList(); track p) {\n      <div class=\"card-common flex flex-col gap-large\">\n        <div class=\"h-4 w-1/3 rounded skeleton-load\"></div>\n        <div class=\"flex items-end gap-normal h-40\">\n          @for (b of barList(); track b) {\n            <div class=\"flex-1 rounded-t skeleton-load\" [style.height.%]=\"barHeight(b)\"></div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { kpis: [{ type: i0.Input, args: [{ isSignal: true, alias: "kpis", required: false }] }], panels: [{ type: i0.Input, args: [{ isSignal: true, alias: "panels", required: false }] }] } });
+function range$2(n) {
+    return Array.from({ length: Math.max(0, Number(n) || 0) }, (_, i) => i);
+}
+
+const PRESETS = {
+    table: ['heading', 'toolbar', 'table'],
+    panels: [
+        'heading',
+        'stat-cards',
+        { kind: 'panels', count: 3, cols: 3 },
+        'toolbar',
+        { kind: 'cards', count: 6, cols: 3 },
+    ],
+    dashboard: [
+        'heading',
+        'kpi-strip',
+        { kind: 'panels', count: 2 },
+        { kind: 'panels', count: 2 },
+        'card',
+    ],
+    'tabs-facets': ['tabs', 'facets'],
+    facets: ['facets'],
+    detail: ['detail'],
+    form: ['heading', 'form'],
+};
+/**
+ * Skeleton cho vùng NỘI DUNG trong lúc resolver của route đang chạy.
+ *
+ * ⚠️ Vì sao skeleton phải nằm ở shell chứ không ở từng màn: Angular **không
+ * tạo component cho tới khi resolver xong**, nên một màn không thể tự vẽ
+ * skeleton của chính nó trong lúc resolver của nó chạy. Thứ vẽ được phải tồn
+ * tại TRƯỚC component đó → shell + router event. Xem `FxRouteSkeletonService`.
+ */
+class RouteSkeletonComponent {
+    /** Tên preset, hoặc mảng block mô tả đúng layout của màn. */
+    hint = input('table', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    blocks = computed(() => {
+        const value = this.hint();
+        // Mảng rỗng / tên preset lạ / null đều rơi về preset bảng: mục tiêu của cả
+        // cơ chế này là KHÔNG BAO GIỜ để vùng nội dung trắng, nên vẽ hình generic
+        // vẫn hơn không vẽ gì.
+        const list = Array.isArray(value) && value.length
+            ? value
+            : (PRESETS[value] ?? PRESETS.table);
+        return list.map((b) => (typeof b === 'string' ? { kind: b } : b));
+    }, ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    cols(b) {
+        return range$1(b.columns ?? 6);
+    }
+    rows(b) {
+        return range$1(b.rows ?? 8);
+    }
+    items(b, fallback) {
+        return range$1(b.count ?? fallback);
+    }
+    /** Lớp lưới cho `panels`/`cards` — Tailwind v4 không có safelist nên phải
+     *  là chuỗi tĩnh, không ghép động. */
+    gridClass(b) {
+        switch (b.cols ?? 2) {
+            case 1:
+                return 'grid-cols-1';
+            case 3:
+                return 'grid-cols-1 md:grid-cols-3';
+            case 4:
+                return 'grid-cols-2 md:grid-cols-4';
+            default:
+                return 'grid-cols-1 md:grid-cols-2';
+        }
+    }
+    /** Header ngắn hơn ô dữ liệu, cột đầu rộng nhất (thường là tên). */
+    headWidth(c) {
+        return c === 0 ? 55 : [40, 34, 46, 30, 38][c % 5];
+    }
+    /**
+     * Bề rộng đổi theo cả hàng và cột — cùng bề rộng thì khối skeleton trông
+     * như một hình chữ nhật đặc, mất cảm giác "từng field".
+     */
+    cellWidth(r, c) {
+        if (c === 0)
+            return [92, 78, 85, 70][r % 4];
+        return [62, 48, 74, 55, 66, 42][(r + c) % 6];
+    }
+    barHeight(i) {
+        return [45, 70, 35, 85, 55, 75, 40][i % 7];
+    }
+    bars = range$1(7);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RouteSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: RouteSkeletonComponent, isStandalone: true, selector: "fx-ui-route-skeleton", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full flex flex-col gap-xl\">\n  @for (b of blocks(); track $index) {\n    @switch (b.kind) {\n      @case ('heading') {\n        <div data-fx-skel=\"heading\" class=\"flex flex-col md:flex-row md:items-start justify-between gap-normal\">\n          <div class=\"flex flex-col gap-small\">\n            <div class=\"skeleton-load h-7 w-64\"></div>\n            <div class=\"skeleton-load h-3 w-32\"></div>\n          </div>\n          @if (items(b, 2).length) {\n            <div class=\"flex items-center gap-normal\">\n              @for (a of items(b, 2); track a) {\n                <div class=\"skeleton-load h-9 rounded-lg\" [class]=\"a === 0 ? 'w-28' : 'w-32'\"></div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @case ('toolbar') {\n        <div data-fx-skel=\"toolbar\" class=\"flex flex-wrap items-center gap-normal\">\n          <div class=\"skeleton-load h-9 w-72 rounded-lg\"></div>\n          @for (f of items(b, 2); track f) {\n            <div class=\"skeleton-load h-7 rounded-full\" [class]=\"f % 2 ? 'w-24' : 'w-20'\"></div>\n          }\n        </div>\n      }\n\n      @case ('table') {\n        <!-- B\u1EA3ng: m\u1ED7i \u00D4 l\u00E0 m\u1ED9t `.skeleton-load` ri\u00EAng, \u0111\u00FAng c\u00E1ch\n             `fx-ui-table-cell [loading]` l\u00E0m tr\u00EAn b\u1EA3ng th\u1EADt. -->\n        <div data-fx-skel=\"table\" class=\"card-common overflow-x-auto\">\n          <table class=\"w-full\">\n            <thead>\n              <tr class=\"border-b border-border-default\">\n                @for (c of cols(b); track c) {\n                  <th class=\"px-normal py-semi text-left\">\n                    <div class=\"skeleton-load h-3\" [style.width.%]=\"headWidth(c)\"></div>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (r of rows(b); track r) {\n                <tr class=\"border-b border-border-subtle\">\n                  @for (c of cols(b); track c) {\n                    <td class=\"px-normal py-semi align-middle\">\n                      <div class=\"skeleton-load h-4\" [style.width.%]=\"cellWidth(r, c)\"></div>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n\n      @case ('stat-cards') {\n        <div data-fx-skel=\"stat-cards\" class=\"grid gap-normal grid-cols-2 md:grid-cols-4\">\n          @for (i of items(b, 4); track i) {\n            <div class=\"card-common flex flex-col gap-normal\">\n              <div class=\"skeleton-load h-3 w-16\"></div>\n              <div class=\"skeleton-load h-8 w-24\"></div>\n              <div class=\"skeleton-load h-3 w-20\"></div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('kpi-strip') {\n        <!-- M\u1ED8T card chia c\u1ED9t (ki\u1EC3u app-dash-kpi-row), kh\u00F4ng ph\u1EA3i c\u00E1c tile r\u1EDDi -->\n        <div data-fx-skel=\"kpi-strip\" class=\"card-common !p-0\">\n          <div class=\"grid grid-cols-2 md:grid-cols-4\">\n            @for (i of items(b, 4); track i) {\n              <div\n                class=\"flex flex-col gap-normal px-xl py-large border-border-subtle\"\n                [class.border-l]=\"!$first\"\n              >\n                <div class=\"skeleton-load h-3 w-20\"></div>\n                <div class=\"skeleton-load h-9 w-28\"></div>\n                <div class=\"skeleton-load h-3 w-24\"></div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @case ('panels') {\n        <div data-fx-skel=\"panels\" class=\"grid gap-xl\" [class]=\"gridClass(b)\">\n          @for (i of items(b, 2); track i) {\n            <div class=\"card-common flex flex-col gap-large\">\n              <div class=\"skeleton-load h-4 w-1/3\"></div>\n              <div class=\"flex items-end gap-normal h-40\">\n                @for (x of bars; track x) {\n                  <div class=\"skeleton-load flex-1 rounded-t\" [style.height.%]=\"barHeight(x)\"></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('cards') {\n        <div data-fx-skel=\"cards\" class=\"grid gap-xl\" [class]=\"gridClass(b)\">\n          @for (i of items(b, 6); track i) {\n            <div class=\"card-common flex flex-col gap-normal\">\n              <div class=\"flex items-center gap-normal\">\n                <div class=\"skeleton-load w-9 h-9 rounded-lg shrink-0\"></div>\n                <div class=\"flex flex-col gap-small flex-1 min-w-0\">\n                  <div class=\"skeleton-load h-4 w-3/4\"></div>\n                  <div class=\"skeleton-load h-3 w-1/2\"></div>\n                </div>\n                <div class=\"skeleton-load h-5 w-14 rounded-full shrink-0\"></div>\n              </div>\n              <div class=\"grid grid-cols-4 gap-normal pt-normal border-t border-border-subtle\">\n                @for (m of [0, 1, 2, 3]; track m) {\n                  <div class=\"flex flex-col gap-small\">\n                    <div class=\"skeleton-load h-2.5 w-full\"></div>\n                    <div class=\"skeleton-load h-4 w-2/3\"></div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('card') {\n        <div data-fx-skel=\"card\" class=\"card-common flex flex-col gap-large\">\n          <div class=\"skeleton-load h-4 w-1/3\"></div>\n          <div class=\"flex flex-col gap-normal\">\n            @for (r of [0, 1, 2, 3]; track r) {\n              <div class=\"skeleton-load h-3\" [style.width.%]=\"cellWidth(r, 1)\"></div>\n            }\n          </div>\n        </div>\n      }\n\n      @case ('tabs') {\n        <div data-fx-skel=\"tabs\" class=\"flex items-center gap-large border-b border-border-default pb-normal\">\n          @for (t of items(b, 6); track t) {\n            <div class=\"flex items-center gap-small\">\n              <div class=\"skeleton-load w-4 h-4\"></div>\n              <div class=\"skeleton-load h-3 w-16\"></div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('facets') {\n        <div data-fx-skel=\"facets\" class=\"fx-rs-row\">\n          <div class=\"fx-rs-facets card-common overflow-hidden\">\n            <fx-ui-skeleton-facets />\n          </div>\n          <div class=\"fx-rs-list card-common overflow-hidden\">\n            <fx-ui-skeleton-list [rows]=\"6\" />\n          </div>\n          <div class=\"flex-1 min-w-0 overflow-hidden\">\n            <fx-ui-skeleton-detail />\n          </div>\n        </div>\n      }\n\n      @case ('detail') {\n        <fx-ui-skeleton-detail data-fx-skel=\"detail\" />\n      }\n\n      @case ('form') {\n        <div data-fx-skel=\"form\" class=\"card-common flex flex-col gap-large\">\n          @for (r of [0, 1, 2, 3]; track r) {\n            <div class=\"flex flex-col gap-small\">\n              <div class=\"skeleton-load h-3 w-24\"></div>\n              <div class=\"skeleton-load h-9 w-full rounded-lg\"></div>\n            </div>\n          }\n          <div class=\"flex justify-end gap-normal\">\n            <div class=\"skeleton-load h-9 w-24 rounded-lg\"></div>\n            <div class=\"skeleton-load h-9 w-28 rounded-lg\"></div>\n          </div>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size;container-name:fx-rs}.fx-rs-row{display:flex;flex-direction:column;gap:var(--spacing-xl, 1.5rem)}@container fx-rs (min-width: 968px){.fx-rs-row{flex-direction:row;align-items:stretch;height:calc(100vh - 300px);min-height:420px}.fx-rs-facets{flex:0 1 230px;min-width:200px;max-width:260px}.fx-rs-list{flex:0 1 420px;min-width:320px;max-width:420px}}\n"], dependencies: [{ kind: "component", type: SkeletonListComponent, selector: "fx-ui-skeleton-list", inputs: ["rows"] }, { kind: "component", type: SkeletonDetailComponent, selector: "fx-ui-skeleton-detail", inputs: ["cards", "rows"] }, { kind: "component", type: SkeletonFacetsComponent, selector: "fx-ui-skeleton-facets", inputs: ["groups", "rows"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RouteSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-route-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkeletonListComponent, SkeletonDetailComponent, SkeletonFacetsComponent], template: "<div class=\"w-full flex flex-col gap-xl\">\n  @for (b of blocks(); track $index) {\n    @switch (b.kind) {\n      @case ('heading') {\n        <div data-fx-skel=\"heading\" class=\"flex flex-col md:flex-row md:items-start justify-between gap-normal\">\n          <div class=\"flex flex-col gap-small\">\n            <div class=\"skeleton-load h-7 w-64\"></div>\n            <div class=\"skeleton-load h-3 w-32\"></div>\n          </div>\n          @if (items(b, 2).length) {\n            <div class=\"flex items-center gap-normal\">\n              @for (a of items(b, 2); track a) {\n                <div class=\"skeleton-load h-9 rounded-lg\" [class]=\"a === 0 ? 'w-28' : 'w-32'\"></div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @case ('toolbar') {\n        <div data-fx-skel=\"toolbar\" class=\"flex flex-wrap items-center gap-normal\">\n          <div class=\"skeleton-load h-9 w-72 rounded-lg\"></div>\n          @for (f of items(b, 2); track f) {\n            <div class=\"skeleton-load h-7 rounded-full\" [class]=\"f % 2 ? 'w-24' : 'w-20'\"></div>\n          }\n        </div>\n      }\n\n      @case ('table') {\n        <!-- B\u1EA3ng: m\u1ED7i \u00D4 l\u00E0 m\u1ED9t `.skeleton-load` ri\u00EAng, \u0111\u00FAng c\u00E1ch\n             `fx-ui-table-cell [loading]` l\u00E0m tr\u00EAn b\u1EA3ng th\u1EADt. -->\n        <div data-fx-skel=\"table\" class=\"card-common overflow-x-auto\">\n          <table class=\"w-full\">\n            <thead>\n              <tr class=\"border-b border-border-default\">\n                @for (c of cols(b); track c) {\n                  <th class=\"px-normal py-semi text-left\">\n                    <div class=\"skeleton-load h-3\" [style.width.%]=\"headWidth(c)\"></div>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (r of rows(b); track r) {\n                <tr class=\"border-b border-border-subtle\">\n                  @for (c of cols(b); track c) {\n                    <td class=\"px-normal py-semi align-middle\">\n                      <div class=\"skeleton-load h-4\" [style.width.%]=\"cellWidth(r, c)\"></div>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n\n      @case ('stat-cards') {\n        <div data-fx-skel=\"stat-cards\" class=\"grid gap-normal grid-cols-2 md:grid-cols-4\">\n          @for (i of items(b, 4); track i) {\n            <div class=\"card-common flex flex-col gap-normal\">\n              <div class=\"skeleton-load h-3 w-16\"></div>\n              <div class=\"skeleton-load h-8 w-24\"></div>\n              <div class=\"skeleton-load h-3 w-20\"></div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('kpi-strip') {\n        <!-- M\u1ED8T card chia c\u1ED9t (ki\u1EC3u app-dash-kpi-row), kh\u00F4ng ph\u1EA3i c\u00E1c tile r\u1EDDi -->\n        <div data-fx-skel=\"kpi-strip\" class=\"card-common !p-0\">\n          <div class=\"grid grid-cols-2 md:grid-cols-4\">\n            @for (i of items(b, 4); track i) {\n              <div\n                class=\"flex flex-col gap-normal px-xl py-large border-border-subtle\"\n                [class.border-l]=\"!$first\"\n              >\n                <div class=\"skeleton-load h-3 w-20\"></div>\n                <div class=\"skeleton-load h-9 w-28\"></div>\n                <div class=\"skeleton-load h-3 w-24\"></div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @case ('panels') {\n        <div data-fx-skel=\"panels\" class=\"grid gap-xl\" [class]=\"gridClass(b)\">\n          @for (i of items(b, 2); track i) {\n            <div class=\"card-common flex flex-col gap-large\">\n              <div class=\"skeleton-load h-4 w-1/3\"></div>\n              <div class=\"flex items-end gap-normal h-40\">\n                @for (x of bars; track x) {\n                  <div class=\"skeleton-load flex-1 rounded-t\" [style.height.%]=\"barHeight(x)\"></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('cards') {\n        <div data-fx-skel=\"cards\" class=\"grid gap-xl\" [class]=\"gridClass(b)\">\n          @for (i of items(b, 6); track i) {\n            <div class=\"card-common flex flex-col gap-normal\">\n              <div class=\"flex items-center gap-normal\">\n                <div class=\"skeleton-load w-9 h-9 rounded-lg shrink-0\"></div>\n                <div class=\"flex flex-col gap-small flex-1 min-w-0\">\n                  <div class=\"skeleton-load h-4 w-3/4\"></div>\n                  <div class=\"skeleton-load h-3 w-1/2\"></div>\n                </div>\n                <div class=\"skeleton-load h-5 w-14 rounded-full shrink-0\"></div>\n              </div>\n              <div class=\"grid grid-cols-4 gap-normal pt-normal border-t border-border-subtle\">\n                @for (m of [0, 1, 2, 3]; track m) {\n                  <div class=\"flex flex-col gap-small\">\n                    <div class=\"skeleton-load h-2.5 w-full\"></div>\n                    <div class=\"skeleton-load h-4 w-2/3\"></div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('card') {\n        <div data-fx-skel=\"card\" class=\"card-common flex flex-col gap-large\">\n          <div class=\"skeleton-load h-4 w-1/3\"></div>\n          <div class=\"flex flex-col gap-normal\">\n            @for (r of [0, 1, 2, 3]; track r) {\n              <div class=\"skeleton-load h-3\" [style.width.%]=\"cellWidth(r, 1)\"></div>\n            }\n          </div>\n        </div>\n      }\n\n      @case ('tabs') {\n        <div data-fx-skel=\"tabs\" class=\"flex items-center gap-large border-b border-border-default pb-normal\">\n          @for (t of items(b, 6); track t) {\n            <div class=\"flex items-center gap-small\">\n              <div class=\"skeleton-load w-4 h-4\"></div>\n              <div class=\"skeleton-load h-3 w-16\"></div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('facets') {\n        <div data-fx-skel=\"facets\" class=\"fx-rs-row\">\n          <div class=\"fx-rs-facets card-common overflow-hidden\">\n            <fx-ui-skeleton-facets />\n          </div>\n          <div class=\"fx-rs-list card-common overflow-hidden\">\n            <fx-ui-skeleton-list [rows]=\"6\" />\n          </div>\n          <div class=\"flex-1 min-w-0 overflow-hidden\">\n            <fx-ui-skeleton-detail />\n          </div>\n        </div>\n      }\n\n      @case ('detail') {\n        <fx-ui-skeleton-detail data-fx-skel=\"detail\" />\n      }\n\n      @case ('form') {\n        <div data-fx-skel=\"form\" class=\"card-common flex flex-col gap-large\">\n          @for (r of [0, 1, 2, 3]; track r) {\n            <div class=\"flex flex-col gap-small\">\n              <div class=\"skeleton-load h-3 w-24\"></div>\n              <div class=\"skeleton-load h-9 w-full rounded-lg\"></div>\n            </div>\n          }\n          <div class=\"flex justify-end gap-normal\">\n            <div class=\"skeleton-load h-9 w-24 rounded-lg\"></div>\n            <div class=\"skeleton-load h-9 w-28 rounded-lg\"></div>\n          </div>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size;container-name:fx-rs}.fx-rs-row{display:flex;flex-direction:column;gap:var(--spacing-xl, 1.5rem)}@container fx-rs (min-width: 968px){.fx-rs-row{flex-direction:row;align-items:stretch;height:calc(100vh - 300px);min-height:420px}.fx-rs-facets{flex:0 1 230px;min-width:200px;max-width:260px}.fx-rs-list{flex:0 1 420px;min-width:320px;max-width:420px}}\n"] }]
+        }], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+function range$1(n) {
+    return Array.from({ length: Math.max(0, Number(n) || 0) }, (_, i) => i);
+}
+
+/**
+ * Skeleton của cả AppFrame (drawer + topbar + vùng nội dung).
+ *
+ * Chỉ dùng cho giai đoạn **bootstrap**, khi shell của host còn CHƯA tồn tại
+ * (App.ngOnInit đang kiểm tenant + session, router chưa initialNavigation).
+ * Mọi điều hướng SAU đó đã có shell thật → dùng `fx-ui-route-skeleton` bên
+ * trong vùng nội dung, đừng vẽ lại cả frame.
+ *
+ * ⚠️ `contentHint` là thứ làm F5 không còn vẽ hình generic. Lần điều hướng ĐẦU
+ * tạo ra chính `HomeComponent` — nơi chứa `fx-ui-route-skeleton` — nên vùng nội
+ * dung không thể tự vẽ skeleton của route ở lần đó. Truyền hint vào đây để
+ * frame dựng đúng composition của màn đích ngay từ F5.
+ */
+class SkeletonFrameComponent {
+    navItems = input(7, ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
+    /** Composition của route đích; null thì vẽ khối generic. */
+    contentHint = input(null, ...(ngDevMode ? [{ debugName: "contentHint" }] : /* istanbul ignore next */ []));
+    navList = computed(() => range(this.navItems()), ...(ngDevMode ? [{ debugName: "navList" }] : /* istanbul ignore next */ []));
+    navWidth(i) {
+        return [70, 55, 62, 48, 66, 52, 58][i % 7];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonFrameComponent, isStandalone: true, selector: "fx-ui-skeleton-frame", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, contentHint: { classPropertyName: "contentHint", publicName: "contentHint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-screen w-full overflow-hidden bg-bg-primary\">\n  <!-- drawer -->\n  <div\n    class=\"hidden md:flex w-[260px] shrink-0 flex-col gap-xl border-r border-border-subtle p-semi\"\n  >\n    <div class=\"flex items-center gap-normal\">\n      <div class=\"w-6 h-6 rounded skeleton-load shrink-0\"></div>\n      <div class=\"flex flex-col gap-small flex-1 min-w-0\">\n        <div class=\"h-3.5 w-20 rounded skeleton-load\"></div>\n        <div class=\"h-2.5 w-full rounded skeleton-load\"></div>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-small\">\n      @for (n of navList(); track n) {\n        <div class=\"flex items-center gap-normal py-1\">\n          <div class=\"w-4 h-4 rounded skeleton-load shrink-0\"></div>\n          <div class=\"h-3 rounded skeleton-load\" [style.width.%]=\"navWidth(n)\"></div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mt-auto flex items-center gap-normal border-t border-border-subtle pt-semi\">\n      <div class=\"w-8 h-8 rounded-full skeleton-load shrink-0\"></div>\n      <div class=\"flex flex-col gap-small flex-1 min-w-0\">\n        <div class=\"h-3 w-24 rounded skeleton-load\"></div>\n        <div class=\"h-2.5 w-32 rounded skeleton-load\"></div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-1 min-w-0 flex-col\">\n    <!-- topbar -->\n    <div\n      class=\"flex h-14 shrink-0 items-center gap-normal border-b border-border-subtle px-semi\"\n    >\n      <div class=\"h-3.5 w-40 rounded skeleton-load\"></div>\n      <div class=\"ml-auto h-8 w-32 rounded-lg skeleton-load\"></div>\n    </div>\n\n    <!-- content: d\u1EF1ng \u0111\u00FAng composition c\u1EE7a route \u0111\u00EDch n\u1EBFu \u0111\u00E3 bi\u1EBFt -->\n    <div class=\"flex-1 min-h-0 overflow-hidden p-semi\">\n      @if (contentHint(); as hint) {\n        <fx-ui-route-skeleton [hint]=\"hint\" />\n      } @else {\n        <div class=\"flex flex-col gap-xl\">\n          <div class=\"h-6 w-1/4 rounded skeleton-load\"></div>\n          <div class=\"grid gap-xl grid-cols-2 md:grid-cols-4\">\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n          </div>\n          <div class=\"h-64 rounded-lg skeleton-load\"></div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RouteSkeletonComponent, selector: "fx-ui-route-skeleton", inputs: ["hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-skeleton-frame', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouteSkeletonComponent], template: "<div class=\"flex h-screen w-full overflow-hidden bg-bg-primary\">\n  <!-- drawer -->\n  <div\n    class=\"hidden md:flex w-[260px] shrink-0 flex-col gap-xl border-r border-border-subtle p-semi\"\n  >\n    <div class=\"flex items-center gap-normal\">\n      <div class=\"w-6 h-6 rounded skeleton-load shrink-0\"></div>\n      <div class=\"flex flex-col gap-small flex-1 min-w-0\">\n        <div class=\"h-3.5 w-20 rounded skeleton-load\"></div>\n        <div class=\"h-2.5 w-full rounded skeleton-load\"></div>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-small\">\n      @for (n of navList(); track n) {\n        <div class=\"flex items-center gap-normal py-1\">\n          <div class=\"w-4 h-4 rounded skeleton-load shrink-0\"></div>\n          <div class=\"h-3 rounded skeleton-load\" [style.width.%]=\"navWidth(n)\"></div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mt-auto flex items-center gap-normal border-t border-border-subtle pt-semi\">\n      <div class=\"w-8 h-8 rounded-full skeleton-load shrink-0\"></div>\n      <div class=\"flex flex-col gap-small flex-1 min-w-0\">\n        <div class=\"h-3 w-24 rounded skeleton-load\"></div>\n        <div class=\"h-2.5 w-32 rounded skeleton-load\"></div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-1 min-w-0 flex-col\">\n    <!-- topbar -->\n    <div\n      class=\"flex h-14 shrink-0 items-center gap-normal border-b border-border-subtle px-semi\"\n    >\n      <div class=\"h-3.5 w-40 rounded skeleton-load\"></div>\n      <div class=\"ml-auto h-8 w-32 rounded-lg skeleton-load\"></div>\n    </div>\n\n    <!-- content: d\u1EF1ng \u0111\u00FAng composition c\u1EE7a route \u0111\u00EDch n\u1EBFu \u0111\u00E3 bi\u1EBFt -->\n    <div class=\"flex-1 min-h-0 overflow-hidden p-semi\">\n      @if (contentHint(); as hint) {\n        <fx-ui-route-skeleton [hint]=\"hint\" />\n      } @else {\n        <div class=\"flex flex-col gap-xl\">\n          <div class=\"h-6 w-1/4 rounded skeleton-load\"></div>\n          <div class=\"grid gap-xl grid-cols-2 md:grid-cols-4\">\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n            <div class=\"h-24 rounded-lg skeleton-load\"></div>\n          </div>\n          <div class=\"h-64 rounded-lg skeleton-load\"></div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], contentHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentHint", required: false }] }] } });
+function range(n) {
+    return Array.from({ length: Math.max(0, Number(n) || 0) }, (_, i) => i);
+}
+
 const FX_COMPONENTS = [
     InputComponent,
     SelectComponent,
@@ -4085,7 +5242,6 @@ const FX_COMPONENTS = [
     TagComponent,
     SliderComponent,
     SwitchComponent,
-    SkeletonTableLoadingComponent,
     CircleProgressBar,
     TreeDiagram,
     TableCell,
@@ -4096,12 +5252,32 @@ const FX_COMPONENTS = [
     StatCardsComponent,
     EmptyStateComponent,
     FilterChipsComponent,
+    FilterPillsComponent,
+    StageDotsComponent,
+    CodeBlockComponent,
+    ScreenshotFrameComponent,
     MeterComponent,
     SectionCardComponent,
     InfoFieldComponent,
     SeverityBadgesComponent,
     MasterDetailComponent,
     MenuComponent,
+    ThemePickerComponent,
+    PendingBadgeComponent,
+    SampleFrameComponent,
+    ScoreBadgeComponent,
+    StatusDotComponent,
+    SparkbarComponent,
+    SegmentedComponent,
+    ListRowComponent,
+    BarListComponent,
+    FacetsRailComponent,
+    ProjectCardComponent,
+    PipelineStepperComponent,
+    SkeletonFacetsComponent,
+    SkeletonDashboardComponent,
+    SkeletonFrameComponent,
+    RouteSkeletonComponent,
 ];
 
 const DIALOGS_COMPONENT = [
@@ -4125,14 +5301,14 @@ class UiModule {
             ReactiveFormsModule,
             RouterModule,
             HasPermissionDirective,
-            TrimOnBlurDirective, InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, SliderComponent, SwitchComponent, SkeletonTableLoadingComponent, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ConfirmationDialogComponent], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, SliderComponent, SwitchComponent, SkeletonTableLoadingComponent, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ConfirmationDialogComponent, FormsModule,
+            TrimOnBlurDirective, InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, SliderComponent, SwitchComponent, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, FilterPillsComponent, StageDotsComponent, CodeBlockComponent, ScreenshotFrameComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ThemePickerComponent, PendingBadgeComponent, SampleFrameComponent, ScoreBadgeComponent, StatusDotComponent, SparkbarComponent, SegmentedComponent, ListRowComponent, BarListComponent, FacetsRailComponent, ProjectCardComponent, PipelineStepperComponent, SkeletonFacetsComponent, SkeletonDashboardComponent, SkeletonFrameComponent, RouteSkeletonComponent, ConfirmationDialogComponent], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, SliderComponent, SwitchComponent, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, FilterPillsComponent, StageDotsComponent, CodeBlockComponent, ScreenshotFrameComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ThemePickerComponent, PendingBadgeComponent, SampleFrameComponent, ScoreBadgeComponent, StatusDotComponent, SparkbarComponent, SegmentedComponent, ListRowComponent, BarListComponent, FacetsRailComponent, ProjectCardComponent, PipelineStepperComponent, SkeletonFacetsComponent, SkeletonDashboardComponent, SkeletonFrameComponent, RouteSkeletonComponent, ConfirmationDialogComponent, FormsModule,
             ReactiveFormsModule,
             RouterModule,
             HasPermissionDirective,
             TrimOnBlurDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiModule, imports: [FormsModule,
             ReactiveFormsModule,
-            RouterModule, SelectComponent, DatetimePicker, MasterDetailComponent, MenuComponent, FormsModule,
+            RouterModule, SelectComponent, DatetimePicker, MasterDetailComponent, MenuComponent, ThemePickerComponent, FormsModule,
             ReactiveFormsModule,
             RouterModule] });
 }
@@ -4168,5 +5344,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FilterChipsComponent, FxComponent, FxDialogService, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MasterDetailComponent, MenuComponent, MeterComponent, NotificationService, PermissionGuard, PermissionService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, SearchBarComponent, SectionCardComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, SliderComponent, StatCardsComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, countTone, createApi, fxListResolver, scoreTone, severityTone, toneBadge, toneBg, toneColor, toneText };
+export { AuthInterceptor, AuthStateService, BarListComponent, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseTableComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, CodeBlockComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FX_SKELETON_DATA_KEY, FacetsRailComponent, FilterChipsComponent, FilterPillsComponent, FxComponent, FxDialogService, FxLoadingService, FxRouteSkeletonService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, ListRowComponent, LoadingPanel, MasterDetailComponent, MenuComponent, MeterComponent, NotificationService, OG_LIGHT_THEMES, OG_PICKER_THEMES, OG_PICKER_THEME_META, OG_THEMES, OG_THEME_META, PendingBadgeComponent, PermissionGuard, PermissionService, PipelineStepperComponent, ProjectCardComponent, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RouteSkeletonComponent, SampleFrameComponent, ScoreBadgeComponent, ScreenshotFrameComponent, SearchBarComponent, SectionCardComponent, SegmentedComponent, SelectComponent, SeverityBadgesComponent, SkeletonDashboardComponent, SkeletonDetailComponent, SkeletonFacetsComponent, SkeletonFrameComponent, SkeletonListComponent, SliderComponent, SparkbarComponent, StageDotsComponent, StatCardsComponent, StatusDotComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemePickerComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, anyFeatureEnabled, countTone, createApi, featureEnabled, fxListResolver, scoreTone, severityTone, toneBadge, toneBadgeSolid, toneBg, toneBorder, toneColor, toneDot, toneDotChart, toneFg, toneScale, toneText, toneTint };
 //# sourceMappingURL=foxeltech-angular-ui.mjs.map