@foxeltech/angular-ui 0.7.44 → 0.7.83

package/fesm2022/foxeltech-angular-ui.mjs

@@ -1,5 +1,5 @@
 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, computed, ElementRef, contentChild, model } 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, viewChildren, afterRenderEffect, untracked } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
@@ -9,13 +9,13 @@ 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 }] }] } });
@@ -1183,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);
     }
@@ -1208,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 {
@@ -1242,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) =>
@@ -1255,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') {
@@ -1268,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;
         }
@@ -1441,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)
@@ -1515,8 +1629,87 @@ 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.
+ *
+ * ⚠️ Đây là họ SOLID: `tone-tint-critical` đặt `background: --og-text`
+ * (gần đen) VÀ `color: --og-surface` (trắng) trên CÙNG element.
+ *
+ * Hệ quả bắt buộc nhớ:
+ * 1. Chỉ dùng cho **badge một phần tử**. Với hộp nhiều dòng thì con sẽ cần màu
+ *    chữ riêng, và nếu con ghi đè bằng `toneFg()` (đỏ sẫm) thì thành đỏ sẫm
+ *    trên gần đen — không đọc được. Đã bị đúng vậy ở hộp RISK của
+ *    `info-binary-detail` (anh Tú 03/09).
+ * 2. **KHÔNG** đặt `toneFg()` lên phần tử con của một phần tử đã có
+ *    `toneTint()` — nó phá màu tương phản mà `toneTint` vừa đặt.
+ *
+ * Hộp/khối nhiều dòng thì dùng `toneScale()`: nền nhạt (color-mix 12%) + chữ
+ * đúng tông, con chỉ cần THỪA HƯỞNG.
+ */
+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
@@ -1524,7 +1717,11 @@ 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 });
 }
 
@@ -1937,8 +2134,8 @@ const OG_THEMES = [
 ];
 const OG_LIGHT_THEMES = ['porcelain', 'ivory', 'terminal'];
 const OG_THEME_META = [
-    { name: 'porcelain', label: 'Porcelain', accent: '#7c3aed', pageBg: '#f2f2f1', dark: false },
-    { name: 'charcoal', label: 'Charcoal', accent: '#ff6b4a', pageBg: '#0e0e10', dark: true },
+    { 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 },
@@ -2273,11 +2470,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=\"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            }\"\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 });
+    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=\"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            }\"\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" }]
+            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: [{
@@ -3089,17 +3286,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');
@@ -3263,13 +3449,39 @@ 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;
@@ -3277,16 +3489,20 @@ class TabComponent {
     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 = viewChild.required(TemplateRef);
+    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 }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, 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
-            }], 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.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;
@@ -3770,7 +3986,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 }, 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:11px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));text-transform:uppercase;-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: [
+    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' })),
@@ -3801,7 +4017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         MatTooltip,
                         HeroIconComponent,
                         RouterLink,
-                    ], 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:11px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));text-transform:uppercase;-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"] }]
+                    ], 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: [{
@@ -3817,36 +4033,42 @@ 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
@@ -3898,7 +4120,8 @@ 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';
@@ -3957,18 +4180,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 });
@@ -4003,9 +4232,15 @@ class FilterPillsComponent {
     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-text-primary text-text-inverse border-text-primary'
+            ? 'bg-accent text-accent-contrast border-accent'
             : 'border-border-default text-text-secondary hover:border-border-strong';
     }
     countClass(option) {
@@ -4138,6 +4373,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  *  - 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
+ *
+ * The host is a flex column (not the custom element's inline default) so that
+ * in a CSS grid row every card stretches to the row height and panels line up
+ * (anh Tú 04/09); a footer projected with `mt-auto` sticks to the bottom.
  */
 class SectionCardComponent {
     /** Caller-translated heading. */
@@ -4153,11 +4392,11 @@ class SectionCardComponent {
         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 }, 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\n        class=\"txt-table-header uppercase\"\n        style=\"letter-spacing: var(--og-tracking-label)\"\n        >{{ title() }}</span\n      >\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 });
+    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 } }, host: { classAttribute: "flex flex-col min-w-0" }, ngImport: i0, template: "<!-- flex column filling the host: cards in one grid row share a height and a\n     projected footer can sit at the bottom with `mt-auto` (design 01). -->\n<div class=\"card-common bg-surface flex flex-col flex-1 min-h-0\">\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  @if (titleStyle() === 'eyebrow') {\n    <div class=\"flex items-baseline justify-between gap-normal mb-large\">\n      <span\n        class=\"txt-table-header uppercase\"\n        style=\"letter-spacing: var(--og-tracking-label)\"\n        >{{ title() }}</span\n      >\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" }]
+            args: [{ selector: 'fx-ui-section-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent, NgClass], host: { class: 'flex flex-col min-w-0' }, template: "<!-- flex column filling the host: cards in one grid row share a height and a\n     projected footer can sit at the bottom with `mt-auto` (design 01). -->\n<div class=\"card-common bg-surface flex flex-col flex-1 min-h-0\">\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 }] }], titleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleStyle", required: false }] }], aside: [{ type: i0.Input, args: [{ isSignal: true, alias: "aside", required: false }] }] } });
@@ -4272,7 +4511,13 @@ class MasterDetailComponent {
     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 */ []));
@@ -4349,7 +4594,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 }, 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: "<div class=\"flex flex-col lg:flex-row items-start gap-xl\" [style.--fx-md-list-width]=\"listWidth()\">\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 class=\"fx-md-facets card-common bg-surface\" [class.hidden]=\"!hasFacets\">\n    <ng-content select=\"[mdFacets]\"></ng-content>\n  </div>\n\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-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=\"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}}.fx-md-facets{width:100%}@media(min-width:1080px){.fx-md-facets{width:230px;flex-shrink:0}}.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"] }] });
+    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,
@@ -4360,10 +4605,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  <!-- Facets rail (V2 3-column lookup) \u2014 wrapper always rendered so ng-content\n       stays unconditional; hidden when the host projects nothing. -->\n  <div class=\"fx-md-facets card-common bg-surface\" [class.hidden]=\"!hasFacets\">\n    <ng-content select=\"[mdFacets]\"></ng-content>\n  </div>\n\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-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=\"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}}.fx-md-facets{width:100%}@media(min-width:1080px){.fx-md-facets{width:230px;flex-shrink:0}}.fx-md-paginator-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\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 }] }], 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 }] }] } });
+            }], 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
@@ -4384,13 +4629,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';
         }
@@ -4444,6 +4689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  *   <fx-ui-pending-badge [field]="'confirmed-chains weekly series'" />
  *
  * Keep the copy factual: it states that data is missing, never fakes a value.
+ * Styling is neutral on purpose (anh Tú 04/09): a hint, not a warning.
  */
 class PendingBadgeComponent {
     /** Caller-translated chip text. */
@@ -4459,11 +4705,11 @@ class PendingBadgeComponent {
         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 });
+    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-muted/60 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-border-subtle bg-neutral-soft text-muted 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" }]
+            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-muted/60 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-border-subtle bg-neutral-soft text-muted 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 }] }] } });
 
 /**
@@ -4471,10 +4717,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  * 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 marker is deliberately quiet (anh Tú 04/09: no yellow frame, just a
+ * subtle "Pending API" chip): a neutral chip above the block, with the label
+ * and missing field in its tooltip. The content itself is non-interactive so
+ * sample shapes are never mistaken for live state. 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
@@ -4485,21 +4732,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  *   </fx-ui-sample-frame>
  */
 class SampleFrameComponent {
-    /** Caller-translated corner label. */
+    /** Caller-translated block label — surfaces in the chip tooltip only. */
     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();
+        const head = `${this.label()} · ${this.pendingLabel()}`;
+        return this.field() ? `${head} — ${this.field()}` : head;
     }
     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 });
+    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 } }, host: { classAttribute: "flex flex-col min-h-0" }, ngImport: i0, template: "<div class=\"relative flex flex-col flex-1 min-h-0\">\n  <!-- One quiet chip marks the block as sample data; the tooltip names the\n       missing field. flex-wrap so the chip drops a line in narrow rails. -->\n  <div class=\"flex flex-wrap items-center gap-small mb-small\">\n    <span\n      class=\"inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-border-subtle bg-neutral-soft text-muted 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 flex-1 min-h-0 flex flex-col\">\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" }]
+            args: [{ selector: 'fx-ui-sample-frame', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], host: { class: 'flex flex-col min-h-0' }, template: "<div class=\"relative flex flex-col flex-1 min-h-0\">\n  <!-- One quiet chip marks the block as sample data; the tooltip names the\n       missing field. flex-wrap so the chip drops a line in narrow rails. -->\n  <div class=\"flex flex-wrap items-center gap-small mb-small\">\n    <span\n      class=\"inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-border-subtle bg-neutral-soft text-muted 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 flex-1 min-h-0 flex flex-col\">\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 }] }] } });
 
 /**
@@ -4597,12 +4845,53 @@ class SegmentedComponent {
      * (design refs 04/05).
      */
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * 'equal' (default): every segment takes the same width (view toggles such
+     * as Catalog | Table). 'content': each segment is as wide as its label —
+     * the demo's detail-pane tabs ("Affected software · Summary · Evidence"),
+     * where equal columns would truncate the long label in a narrow pane.
+     */
+    fit = input('equal', ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
+    optionEls = viewChildren('opt', ...(ngDevMode ? [{ debugName: "optionEls" }] : /* istanbul ignore next */ []));
+    /** Measured box of the active segment — only used when fit === 'content'. */
+    thumbBox = signal(null, ...(ngDevMode ? [{ debugName: "thumbBox" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Content-fit segments have no shared width to derive the thumb from, so
+        // measure the active button after each render that could move it.
+        afterRenderEffect(() => {
+            const index = this.activeIndex();
+            this.options();
+            const els = this.optionEls();
+            if (this.fit() !== 'content' || index < 0 || !els[index]) {
+                untracked(() => this.thumbBox.set(null));
+                return;
+            }
+            const el = els[index].nativeElement;
+            const box = { left: el.offsetLeft, width: el.offsetWidth };
+            untracked(() => {
+                const prev = this.thumbBox();
+                if (!prev || prev.left !== box.left || prev.width !== box.width)
+                    this.thumbBox.set(box);
+            });
+        });
+    }
     /** 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 */ []));
+    thumbWidth = computed(() => {
+        const box = this.thumbBox();
+        if (this.fit() === 'content')
+            return box ? `${box.width}px` : '0px';
+        return `calc((100% - 6px) / ${this.options().length || 1})`;
+    }, ...(ngDevMode ? [{ debugName: "thumbWidth" }] : /* istanbul ignore next */ []));
+    thumbTransform = computed(() => {
+        const box = this.thumbBox();
+        if (this.fit() === 'content')
+            return box ? `translateX(${box.left - 3}px)` : 'none';
+        return `translateX(${this.activeIndex() * 100}%)`;
+    }, ...(ngDevMode ? [{ debugName: "thumbTransform" }] : /* istanbul ignore next */ []));
+    gridClass = computed(() => (this.fit() === 'content' ? 'auto-cols-auto' : 'auto-cols-fr'), ...(ngDevMode ? [{ debugName: "gridClass" }] : /* istanbul ignore next */ []));
     select(option) {
         if (option.disabled || option.value === this.value())
             return;
@@ -4620,12 +4909,12 @@ class SegmentedComponent {
         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 });
+    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 }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "optionEls", predicate: ["opt"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"relative inline-grid max-w-full grid-flow-col items-stretch p-[3px] bg-surface-sunken border border-border rounded-full\"\n  [class]=\"gridClass()\"\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      #opt\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 }] }] } });
+            args: [{ selector: 'fx-ui-segmented', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "<div\n  class=\"relative inline-grid max-w-full grid-flow-col items-stretch p-[3px] bg-surface-sunken border border-border rounded-full\"\n  [class]=\"gridClass()\"\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      #opt\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"] }]
+        }], ctorParameters: () => [], 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 }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], optionEls: [{ type: i0.ViewChildren, args: ['opt', { isSignal: true }] }] } });
 
 /**
  * V2 ListRow — presentational body for master-detail #row templates and other
@@ -4729,20 +5018,20 @@ class FacetsRailComponent {
         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\n        class=\"txt-table-header uppercase mb-small\"\n        [style.letter-spacing]=\"'var(--og-tracking-label)'\"\n      >\n        {{ group.label }}\n      </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 });
+    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\n        class=\"txt-table-header uppercase mb-small\"\n        [style.letter-spacing]=\"'var(--og-tracking-label)'\"\n      >\n        {{ group.label }}\n      </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" }]
+            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: 'bg-critical/60',
-    danger: 'bg-danger/60',
-    warning: 'bg-warning/60',
-    success: 'bg-success/60',
-    information: 'bg-information/60',
+    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
@@ -4764,11 +5053,11 @@ class ProjectCardComponent {
         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 });
+    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" }, host: { classAttribute: "flex flex-col min-w-0" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"card-common bg-surface w-full flex-1 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      <!-- min-h 46px = name (24) + mt-xs (2) + sub (20): reserves the two-line\n           header even when a card has no sub line, so trend/metric rows line\n           up across the grid row (measured 04/09). -->\n      <div class=\"min-w-0 min-h-[46px]\">\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    <!-- mt-auto: footers line up across a grid row whatever each card holds -->\n    <div\n      class=\"flex items-center justify-between w-full pt-normal mt-auto 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" }]
+            args: [{ selector: 'fx-ui-project-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SparkbarComponent, HeroIconComponent], host: { class: 'flex flex-col min-w-0' }, template: "<button\n  type=\"button\"\n  class=\"card-common bg-surface w-full flex-1 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      <!-- min-h 46px = name (24) + mt-xs (2) + sub (20): reserves the two-line\n           header even when a card has no sub line, so trend/metric rows line\n           up across the grid row (measured 04/09). -->\n      <div class=\"min-w-0 min-h-[46px]\">\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    <!-- mt-auto: footers line up across a grid row whatever each card holds -->\n    <div\n      class=\"flex items-center justify-between w-full pt-normal mt-auto 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"] }] } });
 
 /**
@@ -4795,7 +5084,7 @@ class PipelineStepperComponent {
             case 'active':
                 return 'bg-accent-soft text-accent-soft-fg border-accent';
             case 'error':
-                return 'bg-critical/15 text-critical border-critical';
+                return 'tone-scale-danger tone-border-danger';
             default:
                 return 'bg-surface text-faint border-border';
         }
@@ -4807,7 +5096,7 @@ class PipelineStepperComponent {
             case 'done':
                 return 'text-body';
             case 'error':
-                return 'text-critical';
+                return 'tone-fg-danger';
             default:
                 return 'text-faint';
         }
@@ -4830,6 +5119,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             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,
@@ -4849,7 +5306,6 @@ const FX_COMPONENTS = [
     TagComponent,
     SliderComponent,
     SwitchComponent,
-    SkeletonTableLoadingComponent,
     CircleProgressBar,
     TreeDiagram,
     TableCell,
@@ -4882,6 +5338,10 @@ const FX_COMPONENTS = [
     FacetsRailComponent,
     ProjectCardComponent,
     PipelineStepperComponent,
+    SkeletonFacetsComponent,
+    SkeletonDashboardComponent,
+    SkeletonFrameComponent,
+    RouteSkeletonComponent,
 ];
 
 const DIALOGS_COMPONENT = [
@@ -4905,7 +5365,7 @@ 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, FilterPillsComponent, StageDotsComponent, CodeBlockComponent, ScreenshotFrameComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ThemePickerComponent, PendingBadgeComponent, SampleFrameComponent, ScoreBadgeComponent, StatusDotComponent, SparkbarComponent, SegmentedComponent, ListRowComponent, BarListComponent, FacetsRailComponent, ProjectCardComponent, PipelineStepperComponent, 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, FilterPillsComponent, StageDotsComponent, CodeBlockComponent, ScreenshotFrameComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ThemePickerComponent, PendingBadgeComponent, SampleFrameComponent, ScoreBadgeComponent, StatusDotComponent, SparkbarComponent, SegmentedComponent, ListRowComponent, BarListComponent, FacetsRailComponent, ProjectCardComponent, PipelineStepperComponent, 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,
@@ -4948,5 +5408,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthStateService, BarListComponent, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, CodeBlockComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FacetsRailComponent, FilterChipsComponent, FilterPillsComponent, FxComponent, FxDialogService, FxLoadingService, 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, SampleFrameComponent, ScoreBadgeComponent, ScreenshotFrameComponent, SearchBarComponent, SectionCardComponent, SegmentedComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, 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, 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