@foxeltech/angular-ui 0.7.83 → 0.7.101

package/fesm2022/foxeltech-angular-ui.mjs

@@ -1,9 +1,9 @@
 import * as i0 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 { inject, DestroyRef, Injector, Directive, signal, computed, Injectable, InjectionToken, input, isDevMode, ChangeDetectionStrategy, Component, Input, createComponent, viewChild, ViewChild, Inject, EventEmitter, NgModule, HostListener, output, ChangeDetectorRef, contentChild, TemplateRef, contentChildren, Output, ViewChildren, ElementRef, effect, linkedSignal, model, viewChildren, afterRenderEffect, untracked, afterNextRender } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
+import { Subject, Observable, firstValueFrom, debounceTime, distinctUntilChanged, BehaviorSubject, throwError, filter, takeUntil } from 'rxjs';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
-import { Observable, firstValueFrom, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, throwError, filter, takeUntil } from 'rxjs';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/common/http';
 import { HttpRequest, HttpClient } from '@angular/common/http';
@@ -23,11 +23,12 @@ import * as i1$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i2$2 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
+import { provideNativeDateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatFormField, MatSelect, MatOption } from '@angular/material/select';
 import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import gsap from 'gsap';
 import * as i1$4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
@@ -50,6 +51,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
+/**
+ * Backend-request bookkeeping behind the topbar load status (design
+ * "Loading States", 04/09): while any tracked request is in flight the shell
+ * shows a spinner + "Loading <label> · k of n" and a thin indeterminate bar;
+ * once the batch settles it shows "● Up to date · just now".
+ *
+ * A batch = every job started while at least one job is still pending. When
+ * the last one settles the batch closes (`lastUpdated` moves) and the next
+ * job opens a fresh count — so "k of n" always reads against the requests of
+ * the current page load, not the session total.
+ *
+ * Wire-ups: `fxListResolver` and `BaseTableComponent.fetch()` track
+ * automatically; screens with their own fetches call `track()`.
+ */
+class FxLoadStatusService {
+    seq = 0;
+    _pending = signal([], ...(ngDevMode ? [{ debugName: "_pending" }] : /* istanbul ignore next */ []));
+    _batchTotal = signal(0, ...(ngDevMode ? [{ debugName: "_batchTotal" }] : /* istanbul ignore next */ []));
+    _lastUpdated = signal(null, ...(ngDevMode ? [{ debugName: "_lastUpdated" }] : /* istanbul ignore next */ []));
+    _reload = new Subject();
+    /** Jobs still in flight, oldest first. */
+    pending = this._pending.asReadonly();
+    /** Requests started in the current batch. */
+    total = this._batchTotal.asReadonly();
+    done = computed(() => Math.max(0, this._batchTotal() - this._pending().length), ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this._pending().length > 0, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Label of the oldest pending request — what the status line names. */
+    current = computed(() => this._pending()[0]?.label ?? '', ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** When the last batch settled; null until the first one does. */
+    lastUpdated = this._lastUpdated.asReadonly();
+    /** Fired by the topbar ↻ — the shell decides how to re-fetch the route. */
+    reload$ = this._reload.asObservable();
+    /** Register a request; call the returned function when it settles. */
+    begin(label) {
+        const job = { id: ++this.seq, label };
+        if (this._pending().length === 0)
+            this._batchTotal.set(0);
+        this._batchTotal.update((n) => n + 1);
+        this._pending.update((list) => [...list, job]);
+        let ended = false;
+        return () => {
+            if (ended)
+                return;
+            ended = true;
+            this._pending.update((list) => list.filter((j) => j.id !== job.id));
+            if (this._pending().length === 0)
+                this._lastUpdated.set(new Date());
+        };
+    }
+    /** Track a promise (or a factory producing one) under `label`. */
+    async track(label, work) {
+        const end = this.begin(label);
+        try {
+            return await (typeof work === 'function' ? work() : work);
+        }
+        finally {
+            end();
+        }
+    }
+    requestReload() {
+        this._reload.next();
+    }
+    /** Short label from a request url: `/TEST1/history` → "history", `/search` → "search". */
+    static labelFromUrl(url) {
+        const parts = String(url).split('?')[0].split('/').filter(Boolean);
+        return parts[parts.length - 1] ?? 'data';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxLoadStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxLoadStatusService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxLoadStatusService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Where the generated Heroicons sprite is served from. Defaults to
  * 'fx-icons.svg' at the app base — consumers copy it from the package via an
@@ -686,11 +762,38 @@ class BaseTableComponent extends BaseComponent {
     loading = false;
     expandedElement;
     toastr;
+    /** Topbar load status; optional so hand-rolled test injectors keep working. */
+    loadStatus = null;
     _lock = false;
     keywordChange$ = new Subject();
     dataSourcePlaceholder;
     config;
-    paginator;
+    /**
+     * The paging engine. Either the page's own <mat-paginator> (found by the
+     * ViewChild query) or one handed in by a child such as fx-ui-master-detail,
+     * whose paginator lives in ITS view where the query cannot see it.
+     *
+     * ⚠️ A plain `@ViewChild` property was clobbered: the query re-runs before
+     * every ngAfterViewInit and, finding nothing, wrote `undefined` over the
+     * instance the child had assigned a moment earlier — so page events were
+     * never subscribed and Prev/Next changed the range text but not the rows
+     * (anh Tú 04/09). The setter attaches on any real assignment and ignores
+     * `undefined`, so whichever side provides the paginator wins.
+     */
+    set paginator(p) {
+        if (!p || p === this._paginator)
+            return;
+        this._paginator = p;
+        this._pageSub?.unsubscribe();
+        this._pageSub = p.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            void this.onPageChange(event);
+        });
+    }
+    get paginator() {
+        return this._paginator;
+    }
+    _paginator;
+    _pageSub;
     table = viewChild.required(MatTable);
     constructor(injector, api, modal, ref) {
         super(injector);
@@ -698,6 +801,7 @@ class BaseTableComponent extends BaseComponent {
         this.modal = modal;
         this.ref = ref;
         this.toastr = injector.get(FxToastrService);
+        this.loadStatus = injector.get(FxLoadStatusService, null);
     }
     ngOnInit() {
         this.keywordChange$
@@ -710,11 +814,7 @@ class BaseTableComponent extends BaseComponent {
     }
     init() { }
     ngAfterViewInit() {
-        if (this.paginator && this.paginator.page) {
-            this.paginator.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                this.onPageChange(event);
-            });
-        }
+        // Page events are wired by the `paginator` setter (see above).
         this.ref.detectChanges();
     }
     async refresh() {
@@ -746,6 +846,7 @@ class BaseTableComponent extends BaseComponent {
         // a newer one and overwrite the table with stale data.
         const seq = ++this._fetchSeq;
         this.loading = true;
+        const endStatus = this.loadStatus?.begin(this.listKey) ?? null;
         try {
             const params = { page: (this.page ?? 0) + 1, pageSize: this.pageSize, ...this.filters };
             const req = this.listRequest();
@@ -764,6 +865,7 @@ class BaseTableComponent extends BaseComponent {
             this.toastr.error(FxUtils.parseError(err));
         }
         finally {
+            endStatus?.();
             if (seq === this._fetchSeq) {
                 this.loading = false;
                 this.ref.detectChanges();
@@ -1346,9 +1448,13 @@ function fxListResolver(apiType, request) {
         const api = inject(apiType);
         const toastr = inject(FxToastrService);
         const storage = inject(FxStorageService);
+        const status = inject(FxLoadStatusService);
+        let end = null;
         try {
             const ctx = { pageSize: storage.resolve(state.url) || 10 };
             const req = request(route, state, ctx);
+            // Topbar "Loading <x> · k of n" — one job per resolver request.
+            end = status.begin(FxLoadStatusService.labelFromUrl(req.url));
             if ((req.method ?? 'get') === 'post') {
                 return await api.post(req.url, req.body ?? req.params ?? {});
             }
@@ -1358,6 +1464,9 @@ function fxListResolver(apiType, request) {
             toastr.error(FxUtils.parseError(err), 'Error');
             return null;
         }
+        finally {
+            end?.();
+        }
     };
 }
 
@@ -2470,11 +2579,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-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 });
+    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    'fx-btn--icon': !!icon && !label,\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-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" }]
+            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    'fx-btn--icon': !!icon && !label,\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: [{
@@ -4098,6 +4207,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             args: [{ selector: 'fx-ui-sparkbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\n  class=\"flex items-end gap-[2px]\"\n  [style.height.px]=\"height()\"\n  role=\"img\"\n  [attr.aria-label]=\"'Trend: ' + values().join(', ')\"\n>\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"flex-1 min-w-[3px] rounded-[1px] opacity-80\"\n      [ngClass]=\"barClass()\"\n      [style.height.%]=\"bar\"\n    ></div>\n  }\n</div>\n" }]
         }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
+/** Users who asked the OS for reduced motion get instant state changes. */
+function fxMotionAllowed() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        !window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+/** Shared timing so every screen moves the same way. */
+const FX_MOTION = {
+    duration: 0.5,
+    /** Delay between consecutive slots. */
+    stagger: 0.06,
+    /** Never let a long list push the last item beyond this delay. */
+    maxSlot: 12,
+    travelPx: 12,
+    ease: 'power2.out',
+};
+
+/**
+ * Counts a figure up from 0 (GSAP) whenever its value changes.
+ *
+ *   <span [fxCountUp]="card.value"></span>
+ *
+ * Numbers tween over 0.8 s and render with the user's locale grouping; any
+ * non-numeric value ('--', '98 / 100', '1,224') is written verbatim so pending
+ * or composite figures never animate to nonsense. Reduced motion → final value.
+ */
+class FxCountUpDirective {
+    fxCountUp = input(undefined, ...(ngDevMode ? [{ debugName: "fxCountUp" }] : /* istanbul ignore next */ []));
+    el = inject(ElementRef).nativeElement;
+    tween;
+    state = { v: 0 };
+    constructor() {
+        effect(() => {
+            const raw = this.fxCountUp();
+            const n = typeof raw === 'number' ? raw : Number(raw);
+            const numeric = raw !== '' && raw !== null && raw !== undefined && Number.isFinite(n);
+            this.tween?.kill();
+            if (!numeric) {
+                this.el.textContent = raw === null || raw === undefined ? '' : String(raw);
+                return;
+            }
+            if (!fxMotionAllowed()) {
+                this.state.v = n;
+                this.el.textContent = this.format(n);
+                return;
+            }
+            this.tween = gsap.to(this.state, {
+                v: n,
+                duration: 0.8,
+                ease: 'power2.out',
+                onUpdate: () => (this.el.textContent = this.format(this.state.v)),
+                onComplete: () => (this.el.textContent = this.format(n)),
+            });
+        });
+    }
+    format(v) {
+        return Math.round(v).toLocaleString();
+    }
+    ngOnDestroy() {
+        this.tween?.kill();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxCountUpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.20", type: FxCountUpDirective, isStandalone: true, selector: "[fxCountUp]", inputs: { fxCountUp: { classPropertyName: "fxCountUp", publicName: "fxCountUp", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxCountUpDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fxCountUp]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxCountUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxCountUp", required: false }] }] } });
+
 /** KPI tile row: big number + tinted icon box + caption, in a responsive grid. */
 class StatCardsComponent {
     cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
@@ -4109,10 +4289,14 @@ class StatCardsComponent {
     variant = input('tile', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Grid columns; defaults to one column per card. */
     cols;
+    /**
+     * Column count for the ≥ md (720px) container. Below that the CSS takes
+     * over (2-up, then 1-up under 360px) — see stat-cards.component.css — so an
+     * explicit `cols` never squeezes four figures into a phone-width row.
+     */
     get gridColumns() {
-        // No explicit cols → responsive auto-fit so tiles stack on narrow viewports.
         if (this.cols === undefined) {
-            return 'repeat(auto-fit, minmax(180px, 1fr))';
+            return 'repeat(auto-fit, minmax(min(180px, 100%), 1fr))';
         }
         return `repeat(${this.cols}, minmax(0, 1fr))`;
     }
@@ -4130,7 +4314,7 @@ class StatCardsComponent {
         return card.subTone ? toneText(card.subTone) : 'text-text-secondary';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatCardsComponent, isStandalone: true, selector: "fx-ui-stat-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    @if (variant() === 'figure') {\n      <div class=\"card-common flex flex-col gap-small min-w-0\">\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n        <span\n          class=\"txt-heading-03\"\n          [ngClass]=\"numClass(card)\"\n          style=\"font-family: var(--og-font-figure)\"\n          >{{ card.value }}</span\n        >\n        @if (card.sub) {\n          <span class=\"txt-utility-caption\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              >{{ card.value }}</span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "component", type: SparkbarComponent, selector: "fx-ui-sparkbar", inputs: ["values", "tone", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatCardsComponent, isStandalone: true, selector: "fx-ui-stat-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fx-stat-grid grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    @if (variant() === 'figure') {\n      <div class=\"card-common flex flex-col gap-small min-w-0\">\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n        <span\n          class=\"txt-heading-03\"\n          [ngClass]=\"numClass(card)\"\n          style=\"font-family: var(--og-font-figure)\"\n          ><span [fxCountUp]=\"card.value\"></span></span\n        >\n        @if (card.sub) {\n          <span class=\"txt-utility-caption\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              ><span [fxCountUp]=\"card.value\"></span></span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size}@container (width < 720px){.fx-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container (width < 360px){.fx-stat-grid{grid-template-columns:minmax(0,1fr)!important}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "component", type: SparkbarComponent, selector: "fx-ui-sparkbar", inputs: ["values", "tone", "height"] }, { kind: "directive", type: FxCountUpDirective, selector: "[fxCountUp]", inputs: ["fxCountUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatCardsComponent, decorators: [{
             type: Component,
@@ -4139,7 +4323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         NgClass,
                         HeroIconComponent,
                         SparkbarComponent,
-                    ], template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    @if (variant() === 'figure') {\n      <div class=\"card-common flex flex-col gap-small min-w-0\">\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n        <span\n          class=\"txt-heading-03\"\n          [ngClass]=\"numClass(card)\"\n          style=\"font-family: var(--og-font-figure)\"\n          >{{ card.value }}</span\n        >\n        @if (card.sub) {\n          <span class=\"txt-utility-caption\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              >{{ card.value }}</span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n" }]
+                        FxCountUpDirective,
+                    ], template: "<div class=\"fx-stat-grid grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards(); track card.label) {\n    @if (variant() === 'figure') {\n      <div class=\"card-common flex flex-col gap-small min-w-0\">\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n        <span\n          class=\"txt-heading-03\"\n          [ngClass]=\"numClass(card)\"\n          style=\"font-family: var(--og-font-figure)\"\n          ><span [fxCountUp]=\"card.value\"></span></span\n        >\n        @if (card.sub) {\n          <span class=\"txt-utility-caption\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              ><span [fxCountUp]=\"card.value\"></span></span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size}@container (width < 720px){.fx-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container (width < 360px){.fx-stat-grid{grid-template-columns:minmax(0,1fr)!important}}\n"] }]
         }], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cols: [{
                 type: Input
             }] } });
@@ -4229,6 +4414,12 @@ class FilterPillsComponent {
     /** Accepts undefined so screens can bind an optional filter-bag key. */
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     valueChange = output();
+    /**
+     * Fill of the ACTIVE pill. 'accent' (default, design 11 vulnerabilities);
+     * 'solid' = `--og-text` on inverse text — the demo's Attack-paths panel on
+     * the Overview tab (design 02 "All paths 164") and Recent analyses (design 13).
+     */
+    tone = input('accent', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     isActive(option) {
         return (this.value() ?? '') === option.value;
     }
@@ -4239,20 +4430,23 @@ class FilterPillsComponent {
      * trạng thái chọn của filter (anh Tú chốt 03/09).
      */
     pillClass(option) {
-        return this.isActive(option)
-            ? 'bg-accent text-accent-contrast border-accent'
-            : 'border-border-default text-text-secondary hover:border-border-strong';
+        if (!this.isActive(option)) {
+            return 'border-border-default text-text-secondary hover:border-border-strong';
+        }
+        return this.tone() === 'solid'
+            ? 'bg-text-primary text-text-inverse border-text-primary'
+            : 'bg-accent text-accent-contrast border-accent';
     }
     countClass(option) {
         return this.isActive(option) ? 'opacity-70' : 'text-text-placeholder';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FilterPillsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FilterPillsComponent, isStandalone: true, selector: "fx-ui-filter-pills", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      [attr.aria-pressed]=\"isActive(option)\"\n      class=\"flex items-center gap-small px-semi py-xs rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors\"\n      [ngClass]=\"pillClass(option)\"\n      (click)=\"valueChange.emit(option.value)\"\n    >\n      {{ option.label }}\n      @if (option.count !== null && option.count !== undefined) {\n        <span [ngClass]=\"countClass(option)\" style=\"font-family: var(--og-font-figure)\">{{ option.count }}</span>\n      }\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FilterPillsComponent, isStandalone: true, selector: "fx-ui-filter-pills", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      [attr.aria-pressed]=\"isActive(option)\"\n      class=\"flex items-center gap-small px-[11px] py-[4px] rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors\"\n      [ngClass]=\"pillClass(option)\"\n      (click)=\"valueChange.emit(option.value)\"\n    >\n      {{ option.label }}\n      @if (option.count !== null && option.count !== undefined) {\n        <span [ngClass]=\"countClass(option)\" style=\"font-family: var(--og-font-figure)\">{{ option.count }}</span>\n      }\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FilterPillsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-filter-pills', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      [attr.aria-pressed]=\"isActive(option)\"\n      class=\"flex items-center gap-small px-semi py-xs rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors\"\n      [ngClass]=\"pillClass(option)\"\n      (click)=\"valueChange.emit(option.value)\"\n    >\n      {{ option.label }}\n      @if (option.count !== null && option.count !== undefined) {\n        <span [ngClass]=\"countClass(option)\" style=\"font-family: var(--og-font-figure)\">{{ option.count }}</span>\n      }\n    </button>\n  }\n</div>\n" }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+            args: [{ selector: 'fx-ui-filter-pills', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options(); track option.value) {\n    <button\n      type=\"button\"\n      [attr.aria-pressed]=\"isActive(option)\"\n      class=\"flex items-center gap-small px-[11px] py-[4px] rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors\"\n      [ngClass]=\"pillClass(option)\"\n      (click)=\"valueChange.emit(option.value)\"\n    >\n      {{ option.label }}\n      @if (option.count !== null && option.count !== undefined) {\n        <span [ngClass]=\"countClass(option)\" style=\"font-family: var(--og-font-figure)\">{{ option.count }}</span>\n      }\n    </button>\n  }\n</div>\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
 
 /**
  * V2 stage progress dots — the walkthrough position indicator on the attack
@@ -4473,11 +4667,11 @@ class SeverityBadgesComponent {
         return badge.tone ? toneBadge(badge.tone) : 'bg-bg-hover text-text-primary';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SeverityBadgesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SeverityBadgesComponent, isStandalone: true, selector: "fx-ui-severity-badges", inputs: { stats: "stats", showZero: "showZero", suffixed: "suffixed" }, outputs: { badgeClick: "badgeClick" }, ngImport: i0, template: "<div class=\"flex items-center gap-small\">\n  @for (badge of badges; track badge.key) {\n    <button\n      type=\"button\"\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n", 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: SeverityBadgesComponent, isStandalone: true, selector: "fx-ui-severity-badges", inputs: { stats: "stats", showZero: "showZero", suffixed: "suffixed" }, outputs: { badgeClick: "badgeClick" }, ngImport: i0, template: "<div class=\"flex items-center gap-small\">\n  @for (badge of badges; track badge.key) {\n    <button\n      type=\"button\"\n      class=\"px-2 py-[3px] rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SeverityBadgesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-severity-badges', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex items-center gap-small\">\n  @for (badge of badges; track badge.key) {\n    <button\n      type=\"button\"\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-severity-badges', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex items-center gap-small\">\n  @for (badge of badges; track badge.key) {\n    <button\n      type=\"button\"\n      class=\"px-2 py-[3px] rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n" }]
         }], propDecorators: { stats: [{
                 type: Input
             }], showZero: [{
@@ -4530,12 +4724,33 @@ class MasterDetailComponent {
     /** Caller-translated Prev/Next labels ("X of Y" is numeric). */
     prevLabel = input('Prev', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
     nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    /** "Page 1 of 4" (design 11/14/17) — the two words, caller-translated. */
+    pageLabel = input('Page', ...(ngDevMode ? [{ debugName: "pageLabel" }] : /* istanbul ignore next */ []));
+    ofLabel = input('of', ...(ngDevMode ? [{ debugName: "ofLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Facets rail open (design 11/14) or collapsed to a 40px strip (design 17).
+     * The user can toggle either way; this only sets the initial state.
+     */
+    facetsOpen = input(true, ...(ngDevMode ? [{ debugName: "facetsOpen" }] : /* istanbul ignore next */ []));
+    /** Caller-translated rail heading ("Scope & facets"). */
+    facetsLabel = input('Scope & facets', ...(ngDevMode ? [{ debugName: "facetsLabel" }] : /* istanbul ignore next */ []));
+    expandFacetsLabel = input('Show scope & facets', ...(ngDevMode ? [{ debugName: "expandFacetsLabel" }] : /* istanbul ignore next */ []));
+    collapseFacetsLabel = input('Hide scope & facets', ...(ngDevMode ? [{ debugName: "collapseFacetsLabel" }] : /* istanbul ignore next */ []));
+    /** Current rail state — follows `facetsOpen` until the user toggles. */
+    railOpen = linkedSignal(() => this.facetsOpen(), ...(ngDevMode ? [{ debugName: "railOpen" }] : /* istanbul ignore next */ []));
     rowTemplate = contentChild.required('row');
     detailTemplate = contentChild.required('detail');
     paginator = viewChild.required(MatPaginator);
     uid = `fx-md-${nextUid++}`;
     ngAfterContentInit() {
         this.hasFacets = !!this.hostEl.nativeElement.querySelector('[mdFacets]');
+        // Stacked layout (container narrower than md = 720px): start with the rail
+        // collapsed so the list is the first thing on screen — an open rail with
+        // six facet groups pushed the list a full screen down on phones
+        // (anh Tú 04/09 mobile audit). The user can still expand it.
+        if (this.hasFacets && this.hostEl.nativeElement.clientWidth > 0 && this.hostEl.nativeElement.clientWidth < 720) {
+            this.railOpen.set(false);
+        }
     }
     ngAfterViewInit() {
         // The paginator lives in this view, not the host page's, so the host's
@@ -4545,16 +4760,13 @@ class MasterDetailComponent {
             this.table.paginator = this.paginator();
         }
     }
-    /** "X of Y" range text for the prevnext pagination style. */
+    /** "Page X of Y" for the prevnext pagination style (design 11/14/17). */
     rangeText() {
         const total = this.table.total ?? 0;
-        if (!total)
-            return '0 of 0';
-        const page = this.paginator().pageIndex;
-        const size = this.table.pageSize;
-        const from = page * size + 1;
-        const to = Math.min((page + 1) * size, total);
-        return `${from}–${to} of ${total}`;
+        const size = this.table.pageSize || 1;
+        const pages = Math.max(1, Math.ceil(total / size));
+        const page = Math.min(pages, (this.paginator().pageIndex ?? 0) + 1);
+        return `${this.pageLabel()} ${page} ${this.ofLabel()} ${pages}`;
     }
     isSelected(row) {
         return this.table.idOf(row) === this.table.selectedId;
@@ -4594,7 +4806,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 }, 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"] }] });
+    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 }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, facetsOpen: { classPropertyName: "facetsOpen", publicName: "facetsOpen", isSignal: true, isRequired: false, transformFunction: null }, facetsLabel: { classPropertyName: "facetsLabel", publicName: "facetsLabel", isSignal: true, isRequired: false, transformFunction: null }, expandFacetsLabel: { classPropertyName: "expandFacetsLabel", publicName: "expandFacetsLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFacetsLabel: { classPropertyName: "collapseFacetsLabel", publicName: "collapseFacetsLabel", 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: "<!-- ONE frame, three columns (designs 11/14/17): facets rail \u00B7 list \u00B7 detail,\n     separated by hairlines, sharing one height; only each pane's body scrolls.\n     Row direction / height come from the CONTAINER QUERY in the CSS (the row's\n     own width), never from `lg:*` \u2014 see the note at the top of the .css. -->\n<div\n  class=\"fx-md-row flex flex-col items-stretch\"\n  [class.fx-md-row--rail-open]=\"railOpen()\"\n  [style.--fx-md-list-width]=\"listWidth()\"\n  [style.--fx-md-pane-h]=\"paneHeight()\"\n>\n  <!-- Facets rail \u2014 collapsible (\u00BB / \u00AB), collapsed = 40px strip with the label\n       set vertically. The [mdFacets] projection is unconditional (hasFacets is\n       detected by querying it) and only hidden while collapsed. -->\n  <aside\n    class=\"fx-md-facets flex flex-col min-h-0 min-w-0\"\n    [class.hidden]=\"!hasFacets\"\n    [class.fx-md-facets--open]=\"railOpen()\"\n  >\n    <div class=\"fx-md-rail-head flex items-center gap-small px-normal py-semi border-b border-border-subtle shrink-0\" [class.hidden]=\"!railOpen()\">\n      <button\n        type=\"button\"\n        class=\"flex items-center justify-center w-6 h-6 rounded-control text-muted hover:bg-bg-hover shrink-0\"\n        [attr.aria-label]=\"collapseFacetsLabel()\"\n        (click)=\"railOpen.set(false)\"\n      >\n        <fx-ui-hero-icon icon=\"chevron-double-left\" [size]=\"14\" class=\"flex\" />\n      </button>\n      <span class=\"txt-eyebrow truncate\">{{ facetsLabel() }}</span>\n    </div>\n    <div class=\"flex-1 min-h-0 overflow-auto px-normal py-normal\" [class.hidden]=\"!railOpen()\">\n      <ng-content select=\"[mdFacets]\"></ng-content>\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-md-rail-toggle flex items-center gap-normal text-muted hover:bg-bg-hover transition-colors\"\n      [class.hidden]=\"railOpen()\"\n      [attr.aria-label]=\"expandFacetsLabel()\"\n      [attr.aria-expanded]=\"false\"\n      (click)=\"railOpen.set(true)\"\n    >\n      <fx-ui-hero-icon icon=\"chevron-double-right\" [size]=\"14\" class=\"flex shrink-0\" />\n      <span class=\"fx-md-rail-label txt-eyebrow whitespace-nowrap\">{{ facetsLabel() }}</span>\n    </button>\n  </aside>\n\n  <!-- Master: list pane -->\n  <section class=\"fx-md-list flex flex-col min-h-0 min-w-0\">\n    <div class=\"fx-md-list-head px-large pt-large pb-small border-b border-border-subtle shrink-0\">\n      <ng-content select=\"[mdHeader]\"></ng-content>\n      <ng-content select=\"[mdFilters]\"></ng-content>\n    </div>\n    <div\n      class=\"flex flex-col overflow-auto flex-1 min-h-0\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <div class=\"px-large py-normal\">\n          <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n        </div>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <!-- Hairline rows; the selected one is tinted with an accent bar on\n               the left (design 11/14 selected finding / component). -->\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 px-large py-semi border-l-2 border-b border-b-border-subtle transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-l-accent bg-accent-soft/60'\n                : 'border-l-transparent hover:bg-surface-sunken'\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          <div class=\"px-large py-large\">\n            <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n          </div>\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=\"fx-md-paginator\"\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 gap-normal px-large py-normal border-t border-border-subtle shrink-0\">\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  </section>\n\n  <!-- Detail pane -->\n  <section 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 px-large py-large\">\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=\"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  </section>\n</div>\n", styles: [":host{display:block;container-type:inline-size;container-name:fx-md}.fx-md-row{background:rgb(var(--og-surface));border:1px solid rgb(var(--border-default));border-radius:.5rem;overflow:hidden;box-shadow:0 1px 2px #0000000a,0 3px 8px #0000000d}.fx-md-facets,.fx-md-list{border-bottom:1px solid rgb(var(--og-border-subtle))}.fx-md-rail-toggle{width:100%;padding:10px 12px;flex-direction:row;justify-content:flex-start}.fx-md-list,.fx-md-facets{width:100%}@container fx-md (min-width: 720px){.fx-md-row{flex-direction:row;height:var(--fx-md-pane-h, calc(100vh - 300px) );min-height:420px}.fx-md-facets,.fx-md-list{border-bottom:0;border-right:1px solid rgb(var(--og-border-subtle))}.fx-md-facets{flex:0 0 40px;width:40px;min-width:40px;max-width:40px}.fx-md-facets--open{flex:0 1 230px;width:auto;min-width:200px;max-width:260px}.fx-md-rail-toggle{height:100%;padding:12px 0;flex-direction:column;justify-content:flex-start}.fx-md-rail-label{writing-mode:vertical-rl;transform:rotate(180deg)}.fx-md-list{width:auto;flex:0 1 var(--fx-md-list-width, 420px);min-width:260px;max-width:var(--fx-md-list-width, 420px)}.fx-md-detail{flex:1 1 360px;min-width:360px}}.fx-md-paginator-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.fx-md-paginator{padding:0 12px;border-top:1px solid rgb(var(--og-border-subtle))}\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"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MasterDetailComponent, decorators: [{
             type: Component,
@@ -4605,10 +4817,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         EmptyStateComponent,
                         MatPaginator,
                         SkeletonDetailComponent,
-                    ], 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"] }]
+                        HeroIconComponent,
+                    ], template: "<!-- ONE frame, three columns (designs 11/14/17): facets rail \u00B7 list \u00B7 detail,\n     separated by hairlines, sharing one height; only each pane's body scrolls.\n     Row direction / height come from the CONTAINER QUERY in the CSS (the row's\n     own width), never from `lg:*` \u2014 see the note at the top of the .css. -->\n<div\n  class=\"fx-md-row flex flex-col items-stretch\"\n  [class.fx-md-row--rail-open]=\"railOpen()\"\n  [style.--fx-md-list-width]=\"listWidth()\"\n  [style.--fx-md-pane-h]=\"paneHeight()\"\n>\n  <!-- Facets rail \u2014 collapsible (\u00BB / \u00AB), collapsed = 40px strip with the label\n       set vertically. The [mdFacets] projection is unconditional (hasFacets is\n       detected by querying it) and only hidden while collapsed. -->\n  <aside\n    class=\"fx-md-facets flex flex-col min-h-0 min-w-0\"\n    [class.hidden]=\"!hasFacets\"\n    [class.fx-md-facets--open]=\"railOpen()\"\n  >\n    <div class=\"fx-md-rail-head flex items-center gap-small px-normal py-semi border-b border-border-subtle shrink-0\" [class.hidden]=\"!railOpen()\">\n      <button\n        type=\"button\"\n        class=\"flex items-center justify-center w-6 h-6 rounded-control text-muted hover:bg-bg-hover shrink-0\"\n        [attr.aria-label]=\"collapseFacetsLabel()\"\n        (click)=\"railOpen.set(false)\"\n      >\n        <fx-ui-hero-icon icon=\"chevron-double-left\" [size]=\"14\" class=\"flex\" />\n      </button>\n      <span class=\"txt-eyebrow truncate\">{{ facetsLabel() }}</span>\n    </div>\n    <div class=\"flex-1 min-h-0 overflow-auto px-normal py-normal\" [class.hidden]=\"!railOpen()\">\n      <ng-content select=\"[mdFacets]\"></ng-content>\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-md-rail-toggle flex items-center gap-normal text-muted hover:bg-bg-hover transition-colors\"\n      [class.hidden]=\"railOpen()\"\n      [attr.aria-label]=\"expandFacetsLabel()\"\n      [attr.aria-expanded]=\"false\"\n      (click)=\"railOpen.set(true)\"\n    >\n      <fx-ui-hero-icon icon=\"chevron-double-right\" [size]=\"14\" class=\"flex shrink-0\" />\n      <span class=\"fx-md-rail-label txt-eyebrow whitespace-nowrap\">{{ facetsLabel() }}</span>\n    </button>\n  </aside>\n\n  <!-- Master: list pane -->\n  <section class=\"fx-md-list flex flex-col min-h-0 min-w-0\">\n    <div class=\"fx-md-list-head px-large pt-large pb-small border-b border-border-subtle shrink-0\">\n      <ng-content select=\"[mdHeader]\"></ng-content>\n      <ng-content select=\"[mdFilters]\"></ng-content>\n    </div>\n    <div\n      class=\"flex flex-col overflow-auto flex-1 min-h-0\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <div class=\"px-large py-normal\">\n          <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n        </div>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <!-- Hairline rows; the selected one is tinted with an accent bar on\n               the left (design 11/14 selected finding / component). -->\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 px-large py-semi border-l-2 border-b border-b-border-subtle transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-l-accent bg-accent-soft/60'\n                : 'border-l-transparent hover:bg-surface-sunken'\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          <div class=\"px-large py-large\">\n            <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n          </div>\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=\"fx-md-paginator\"\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 gap-normal px-large py-normal border-t border-border-subtle shrink-0\">\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  </section>\n\n  <!-- Detail pane -->\n  <section 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 px-large py-large\">\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=\"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  </section>\n</div>\n", styles: [":host{display:block;container-type:inline-size;container-name:fx-md}.fx-md-row{background:rgb(var(--og-surface));border:1px solid rgb(var(--border-default));border-radius:.5rem;overflow:hidden;box-shadow:0 1px 2px #0000000a,0 3px 8px #0000000d}.fx-md-facets,.fx-md-list{border-bottom:1px solid rgb(var(--og-border-subtle))}.fx-md-rail-toggle{width:100%;padding:10px 12px;flex-direction:row;justify-content:flex-start}.fx-md-list,.fx-md-facets{width:100%}@container fx-md (min-width: 720px){.fx-md-row{flex-direction:row;height:var(--fx-md-pane-h, calc(100vh - 300px) );min-height:420px}.fx-md-facets,.fx-md-list{border-bottom:0;border-right:1px solid rgb(var(--og-border-subtle))}.fx-md-facets{flex:0 0 40px;width:40px;min-width:40px;max-width:40px}.fx-md-facets--open{flex:0 1 230px;width:auto;min-width:200px;max-width:260px}.fx-md-rail-toggle{height:100%;padding:12px 0;flex-direction:column;justify-content:flex-start}.fx-md-rail-label{writing-mode:vertical-rl;transform:rotate(180deg)}.fx-md-list{width:auto;flex:0 1 var(--fx-md-list-width, 420px);min-width:260px;max-width:var(--fx-md-list-width, 420px)}.fx-md-detail{flex:1 1 360px;min-width:360px}}.fx-md-paginator-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.fx-md-paginator{padding:0 12px;border-top:1px solid rgb(var(--og-border-subtle))}\n"] }]
         }], propDecorators: { table: [{
                 type: Input
-            }], 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 }] }] } });
+            }], 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 }] }], pageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLabel", required: false }] }], ofLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ofLabel", required: false }] }], facetsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "facetsOpen", required: false }] }], facetsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "facetsLabel", required: false }] }], expandFacetsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFacetsLabel", required: false }] }], collapseFacetsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFacetsLabel", 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
@@ -4712,6 +4925,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             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 }] }] } });
 
+/**
+ * V2 topbar breadcrumb (design 02/12/13, measured on the demo 04/09).
+ *
+ *   Projects  /  [◳ RocketChat ▾]  /  [⬡ rocketchat.exe · 4.8.1 ▾]
+ *
+ * Plain crumbs are quiet links (12.5px / 500 / muted); the last one is strong.
+ * A crumb with `icon` or `switcher` renders as a chip — hairline border,
+ * surface fill, 1px shadow — and a `switcher` opens a listbox with a filter
+ * box, the sibling options, an optional "View all" row and a "Create" CTA.
+ * Data comes from the app through `BreadcrumbService`; this component only
+ * draws and navigates.
+ */
+class BreadcrumbComponent {
+    service = inject(BreadcrumbService);
+    router = inject(Router);
+    host = inject(ElementRef);
+    crumbs = toSignal(this.service.get(), { initialValue: [] });
+    /** Index of the crumb whose switcher panel is open; null = closed. */
+    openIndex = signal(null, ...(ngDevMode ? [{ debugName: "openIndex" }] : /* istanbul ignore next */ []));
+    options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    keyword = signal('', ...(ngDevMode ? [{ debugName: "keyword" }] : /* istanbul ignore next */ []));
+    /** Drops results of a superseded load (typing fast, reopening). */
+    loadSeq = 0;
+    isChip(crumb) {
+        return !!(crumb.icon || crumb.switcher);
+    }
+    onChipClick(crumb, index, event) {
+        event.stopPropagation();
+        if (crumb.switcher) {
+            if (this.openIndex() === index) {
+                this.close();
+            }
+            else {
+                this.open(crumb, index);
+            }
+            return;
+        }
+        if (crumb.url)
+            this.navigate(crumb.url);
+    }
+    open(crumb, index) {
+        this.openIndex.set(index);
+        this.keyword.set('');
+        void this.load(crumb, '');
+        // Focus the filter box once it exists so typing starts immediately.
+        setTimeout(() => {
+            this.host.nativeElement.querySelector('.fx-crumb-panel__filter')?.focus();
+        });
+    }
+    close() {
+        this.openIndex.set(null);
+        this.options.set([]);
+        this.loading.set(false);
+    }
+    onFilter(crumb, value) {
+        this.keyword.set(value);
+        void this.load(crumb, value);
+    }
+    async load(crumb, keyword) {
+        const switcher = crumb.switcher;
+        if (!switcher)
+            return;
+        const seq = ++this.loadSeq;
+        this.loading.set(true);
+        try {
+            const rows = await switcher.load(keyword);
+            if (seq !== this.loadSeq)
+                return;
+            this.options.set(rows ?? []);
+        }
+        catch {
+            if (seq !== this.loadSeq)
+                return;
+            this.options.set([]);
+        }
+        finally {
+            if (seq === this.loadSeq)
+                this.loading.set(false);
+        }
+    }
+    pick(option, event) {
+        event.stopPropagation();
+        this.close();
+        this.navigate(option.url);
+    }
+    go(event, url) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close();
+        if (url)
+            this.navigate(url);
+    }
+    navigate(url) {
+        this.router.navigateByUrl(url).catch(() => {
+            window.location.href = url;
+        });
+    }
+    onDocumentClick(event) {
+        if (this.openIndex() === null)
+            return;
+        if (!this.host.nativeElement.contains(event.target))
+            this.close();
+    }
+    onEscape() {
+        if (this.openIndex() !== null)
+            this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: BreadcrumbComponent, isStandalone: true, selector: "fx-ui-breadcrumb", host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\" class=\"fx-crumbs\">\n  @for (crumb of crumbs(); track $index; let last = $last; let i = $index) {\n    @if (i > 0) {\n      <span aria-hidden=\"true\" class=\"fx-crumb-sep\">/</span>\n    }\n    @if (isChip(crumb)) {\n      <span class=\"relative inline-flex min-w-0\">\n        <button\n          type=\"button\"\n          class=\"fx-crumb-chip\"\n          [class.fx-crumb-chip--mono]=\"crumb.mono\"\n          [attr.aria-haspopup]=\"crumb.switcher ? 'listbox' : null\"\n          [attr.aria-expanded]=\"crumb.switcher ? openIndex() === i : null\"\n          [attr.title]=\"crumb.switcher?.title || crumb.label\"\n          (click)=\"onChipClick(crumb, i, $event)\"\n        >\n          @if (crumb.icon) {\n            <fx-ui-hero-icon [icon]=\"crumb.icon\" [size]=\"13\" class=\"flex shrink-0 text-accent\" />\n          }\n          <span class=\"truncate\">{{ crumb.label }}</span>\n          @if (crumb.switcher) {\n            <fx-ui-hero-icon icon=\"chevron-down\" [size]=\"10\" class=\"flex shrink-0 text-faint\" />\n          }\n        </button>\n\n        @if (crumb.switcher; as sw) {\n          @if (openIndex() === i) {\n            <div role=\"listbox\" class=\"fx-crumb-panel\" [class.fx-crumb-panel--mono]=\"sw.mono\">\n              <div class=\"fx-crumb-panel__title\">{{ sw.title }}</div>\n              @if (sw.filterPlaceholder) {\n                <input\n                  type=\"search\"\n                  class=\"fx-crumb-panel__filter\"\n                  [placeholder]=\"sw.filterPlaceholder\"\n                  [attr.aria-label]=\"sw.filterPlaceholder\"\n                  [value]=\"keyword()\"\n                  (input)=\"onFilter(crumb, $any($event.target).value)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n              @if (loading() && options().length === 0) {\n                <div class=\"fx-crumb-panel__skeleton\" aria-busy=\"true\">\n                  <span></span><span></span><span></span>\n                </div>\n              } @else if (options().length === 0) {\n                <div class=\"fx-crumb-panel__empty\">{{ sw.emptyLabel || '\u2014' }}</div>\n              }\n              @for (opt of options(); track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  class=\"fx-crumb-panel__opt\"\n                  [class.fx-crumb-panel__opt--on]=\"opt.value === sw.selected\"\n                  [attr.aria-selected]=\"opt.value === sw.selected\"\n                  (click)=\"pick(opt, $event)\"\n                >\n                  <span class=\"truncate\">{{ opt.label }}</span>\n                  @if (opt.meta) {\n                    <span class=\"fx-crumb-panel__meta\">{{ opt.meta }}</span>\n                  }\n                  @if (opt.value === sw.selected) {\n                    <fx-ui-hero-icon icon=\"check\" [size]=\"13\" class=\"flex shrink-0 text-strong\" />\n                  }\n                </button>\n              }\n              @if (sw.viewAll || sw.create) {\n                <div class=\"fx-crumb-panel__rule\"></div>\n              }\n              @if (sw.viewAll; as more) {\n                <button type=\"button\" class=\"fx-crumb-panel__more\" (click)=\"go($event, more.url)\">\n                  <fx-ui-hero-icon icon=\"ellipsis-horizontal\" [size]=\"13\" class=\"flex shrink-0 text-faint\" />\n                  {{ more.label }}\n                </button>\n              }\n              @if (sw.create; as create) {\n                <button type=\"button\" class=\"fx-crumb-panel__create\" (click)=\"go($event, create.url)\">\n                  <fx-ui-hero-icon icon=\"plus\" [size]=\"14\" class=\"flex shrink-0\" />\n                  {{ create.label }}\n                </button>\n              }\n            </div>\n          }\n        }\n      </span>\n    } @else if (!last && crumb.url) {\n      <a class=\"fx-crumb-link\" [href]=\"crumb.url\" (click)=\"go($event, crumb.url)\">{{ crumb.label }}</a>\n    } @else {\n      <span class=\"fx-crumb-current\">{{ crumb.label }}</span>\n    }\n  }\n</nav>\n", styles: [":host{display:block;min-width:0}.fx-crumbs{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}.fx-crumb-sep{flex:0 0 auto;padding:0 2px;font-size:13px;color:rgb(var(--og-text-faint))}.fx-crumb-link{flex:0 0 auto;max-width:260px;overflow:hidden;text-overflow:ellipsis;font-size:var(--og-fs-sm);font-weight:500;letter-spacing:.005em;color:rgb(var(--og-text-muted));text-decoration:none;transition:color .15s}.fx-crumb-link:hover{color:rgb(var(--og-text))}.fx-crumb-current{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--og-fs-sm);font-weight:600;color:rgb(var(--og-text))}.fx-crumb-chip{appearance:none;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:320px;padding:4px 12px;line-height:1.5;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface));font-size:var(--og-fs-xs);font-weight:600;color:rgb(var(--og-text));box-shadow:0 1px 2px #0000000a;white-space:nowrap;cursor:pointer;transition:box-shadow .12s,border-color .12s}.fx-crumb-chip:hover,.fx-crumb-chip[aria-expanded=true]{box-shadow:0 2px 7px #0000001a}.fx-crumb-chip--mono{font-family:var(--og-font-mono)}.fx-crumb-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:240px;max-width:min(380px,90vw);display:flex;flex-direction:column;padding:6px;background:rgb(var(--og-surface));border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-card);box-shadow:0 10px 28px #00000024;text-align:left;white-space:nowrap;animation:fx-crumb-panel-in .16s ease-out}@keyframes fx-crumb-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.fx-crumb-panel{animation:none}}.fx-crumb-panel__title{padding:6px 12px 8px;margin-bottom:4px;font-size:var(--og-fs-2xs);letter-spacing:.02em;color:rgb(var(--og-text-faint));border-bottom:1px solid rgb(var(--og-border-subtle))}.fx-crumb-panel__filter{margin:2px 6px 6px;padding:6px 10px;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface-sunken));color:rgb(var(--og-text));font-family:var(--og-font-body);font-size:var(--og-fs-xs);outline:none}.fx-crumb-panel__filter:focus{border-color:rgb(var(--og-accent))}.fx-crumb-panel__opt{appearance:none;width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border:0;border-radius:var(--og-radius-control);background:transparent;font-family:var(--og-font-body);font-size:var(--og-fs-sm);font-weight:400;color:rgb(var(--og-text-muted));text-align:left;cursor:pointer;transition:background .12s}.fx-crumb-panel--mono .fx-crumb-panel__opt{font-family:var(--og-font-mono);font-size:var(--og-fs-xs)}.fx-crumb-panel__opt:hover{background:rgb(var(--og-surface-sunken))}.fx-crumb-panel__opt--on{font-weight:600;color:rgb(var(--og-text))}.fx-crumb-panel__meta{margin-left:auto;font-family:var(--og-font-mono);font-size:var(--og-fs-2xs);color:rgb(var(--og-text-faint))}.fx-crumb-panel__opt>fx-ui-hero-icon:last-child{margin-left:auto}.fx-crumb-panel__opt>.fx-crumb-panel__meta+fx-ui-hero-icon{margin-left:0}.fx-crumb-panel__empty{padding:8px 12px;font-size:var(--og-fs-xs);color:rgb(var(--og-text-faint))}.fx-crumb-panel__skeleton{display:flex;flex-direction:column;gap:8px;padding:8px 12px}.fx-crumb-panel__skeleton span{display:block;height:10px;border-radius:4px;background:rgb(var(--og-border-subtle));animation:fx-crumb-pulse 1.2s ease-in-out infinite}.fx-crumb-panel__skeleton span:nth-child(1){width:62%}.fx-crumb-panel__skeleton span:nth-child(2){width:48%;animation-delay:.15s}.fx-crumb-panel__skeleton span:nth-child(3){width:55%;animation-delay:.3s}@keyframes fx-crumb-pulse{0%,to{opacity:1}50%{opacity:.45}}.fx-crumb-panel__rule{margin:4px 0;border-top:1px solid rgb(var(--og-border-subtle))}.fx-crumb-panel__more{appearance:none;width:100%;display:flex;align-items:center;gap:8px;padding:7px 12px;border:0;border-radius:var(--og-radius-control);background:transparent;font-family:var(--og-font-body);font-size:var(--og-fs-xs);color:rgb(var(--og-text-muted));text-align:left;cursor:pointer}.fx-crumb-panel__more:hover{background:rgb(var(--og-surface-sunken));color:rgb(var(--og-text))}.fx-crumb-panel__create{appearance:none;width:calc(100% - 12px);margin:4px 6px 2px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:0;border-radius:var(--og-radius-control);background:rgb(var(--og-accent-soft-bg));color:rgb(var(--og-accent-soft-fg));font-family:var(--og-font-body);font-size:var(--og-fs-sm);font-weight:600;text-align:left;cursor:pointer;transition:background .15s,color .15s}.fx-crumb-panel__create:hover{background:rgb(var(--og-accent));color:rgb(var(--og-accent-contrast))}.text-accent{color:rgb(var(--og-accent))}.text-faint{color:rgb(var(--og-text-faint))}.text-strong{color:rgb(var(--og-text))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\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: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "<nav aria-label=\"Breadcrumb\" class=\"fx-crumbs\">\n  @for (crumb of crumbs(); track $index; let last = $last; let i = $index) {\n    @if (i > 0) {\n      <span aria-hidden=\"true\" class=\"fx-crumb-sep\">/</span>\n    }\n    @if (isChip(crumb)) {\n      <span class=\"relative inline-flex min-w-0\">\n        <button\n          type=\"button\"\n          class=\"fx-crumb-chip\"\n          [class.fx-crumb-chip--mono]=\"crumb.mono\"\n          [attr.aria-haspopup]=\"crumb.switcher ? 'listbox' : null\"\n          [attr.aria-expanded]=\"crumb.switcher ? openIndex() === i : null\"\n          [attr.title]=\"crumb.switcher?.title || crumb.label\"\n          (click)=\"onChipClick(crumb, i, $event)\"\n        >\n          @if (crumb.icon) {\n            <fx-ui-hero-icon [icon]=\"crumb.icon\" [size]=\"13\" class=\"flex shrink-0 text-accent\" />\n          }\n          <span class=\"truncate\">{{ crumb.label }}</span>\n          @if (crumb.switcher) {\n            <fx-ui-hero-icon icon=\"chevron-down\" [size]=\"10\" class=\"flex shrink-0 text-faint\" />\n          }\n        </button>\n\n        @if (crumb.switcher; as sw) {\n          @if (openIndex() === i) {\n            <div role=\"listbox\" class=\"fx-crumb-panel\" [class.fx-crumb-panel--mono]=\"sw.mono\">\n              <div class=\"fx-crumb-panel__title\">{{ sw.title }}</div>\n              @if (sw.filterPlaceholder) {\n                <input\n                  type=\"search\"\n                  class=\"fx-crumb-panel__filter\"\n                  [placeholder]=\"sw.filterPlaceholder\"\n                  [attr.aria-label]=\"sw.filterPlaceholder\"\n                  [value]=\"keyword()\"\n                  (input)=\"onFilter(crumb, $any($event.target).value)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n              @if (loading() && options().length === 0) {\n                <div class=\"fx-crumb-panel__skeleton\" aria-busy=\"true\">\n                  <span></span><span></span><span></span>\n                </div>\n              } @else if (options().length === 0) {\n                <div class=\"fx-crumb-panel__empty\">{{ sw.emptyLabel || '\u2014' }}</div>\n              }\n              @for (opt of options(); track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  class=\"fx-crumb-panel__opt\"\n                  [class.fx-crumb-panel__opt--on]=\"opt.value === sw.selected\"\n                  [attr.aria-selected]=\"opt.value === sw.selected\"\n                  (click)=\"pick(opt, $event)\"\n                >\n                  <span class=\"truncate\">{{ opt.label }}</span>\n                  @if (opt.meta) {\n                    <span class=\"fx-crumb-panel__meta\">{{ opt.meta }}</span>\n                  }\n                  @if (opt.value === sw.selected) {\n                    <fx-ui-hero-icon icon=\"check\" [size]=\"13\" class=\"flex shrink-0 text-strong\" />\n                  }\n                </button>\n              }\n              @if (sw.viewAll || sw.create) {\n                <div class=\"fx-crumb-panel__rule\"></div>\n              }\n              @if (sw.viewAll; as more) {\n                <button type=\"button\" class=\"fx-crumb-panel__more\" (click)=\"go($event, more.url)\">\n                  <fx-ui-hero-icon icon=\"ellipsis-horizontal\" [size]=\"13\" class=\"flex shrink-0 text-faint\" />\n                  {{ more.label }}\n                </button>\n              }\n              @if (sw.create; as create) {\n                <button type=\"button\" class=\"fx-crumb-panel__create\" (click)=\"go($event, create.url)\">\n                  <fx-ui-hero-icon icon=\"plus\" [size]=\"14\" class=\"flex shrink-0\" />\n                  {{ create.label }}\n                </button>\n              }\n            </div>\n          }\n        }\n      </span>\n    } @else if (!last && crumb.url) {\n      <a class=\"fx-crumb-link\" [href]=\"crumb.url\" (click)=\"go($event, crumb.url)\">{{ crumb.label }}</a>\n    } @else {\n      <span class=\"fx-crumb-current\">{{ crumb.label }}</span>\n    }\n  }\n</nav>\n", styles: [":host{display:block;min-width:0}.fx-crumbs{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}.fx-crumb-sep{flex:0 0 auto;padding:0 2px;font-size:13px;color:rgb(var(--og-text-faint))}.fx-crumb-link{flex:0 0 auto;max-width:260px;overflow:hidden;text-overflow:ellipsis;font-size:var(--og-fs-sm);font-weight:500;letter-spacing:.005em;color:rgb(var(--og-text-muted));text-decoration:none;transition:color .15s}.fx-crumb-link:hover{color:rgb(var(--og-text))}.fx-crumb-current{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--og-fs-sm);font-weight:600;color:rgb(var(--og-text))}.fx-crumb-chip{appearance:none;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:320px;padding:4px 12px;line-height:1.5;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface));font-size:var(--og-fs-xs);font-weight:600;color:rgb(var(--og-text));box-shadow:0 1px 2px #0000000a;white-space:nowrap;cursor:pointer;transition:box-shadow .12s,border-color .12s}.fx-crumb-chip:hover,.fx-crumb-chip[aria-expanded=true]{box-shadow:0 2px 7px #0000001a}.fx-crumb-chip--mono{font-family:var(--og-font-mono)}.fx-crumb-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:240px;max-width:min(380px,90vw);display:flex;flex-direction:column;padding:6px;background:rgb(var(--og-surface));border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-card);box-shadow:0 10px 28px #00000024;text-align:left;white-space:nowrap;animation:fx-crumb-panel-in .16s ease-out}@keyframes fx-crumb-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.fx-crumb-panel{animation:none}}.fx-crumb-panel__title{padding:6px 12px 8px;margin-bottom:4px;font-size:var(--og-fs-2xs);letter-spacing:.02em;color:rgb(var(--og-text-faint));border-bottom:1px solid rgb(var(--og-border-subtle))}.fx-crumb-panel__filter{margin:2px 6px 6px;padding:6px 10px;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface-sunken));color:rgb(var(--og-text));font-family:var(--og-font-body);font-size:var(--og-fs-xs);outline:none}.fx-crumb-panel__filter:focus{border-color:rgb(var(--og-accent))}.fx-crumb-panel__opt{appearance:none;width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border:0;border-radius:var(--og-radius-control);background:transparent;font-family:var(--og-font-body);font-size:var(--og-fs-sm);font-weight:400;color:rgb(var(--og-text-muted));text-align:left;cursor:pointer;transition:background .12s}.fx-crumb-panel--mono .fx-crumb-panel__opt{font-family:var(--og-font-mono);font-size:var(--og-fs-xs)}.fx-crumb-panel__opt:hover{background:rgb(var(--og-surface-sunken))}.fx-crumb-panel__opt--on{font-weight:600;color:rgb(var(--og-text))}.fx-crumb-panel__meta{margin-left:auto;font-family:var(--og-font-mono);font-size:var(--og-fs-2xs);color:rgb(var(--og-text-faint))}.fx-crumb-panel__opt>fx-ui-hero-icon:last-child{margin-left:auto}.fx-crumb-panel__opt>.fx-crumb-panel__meta+fx-ui-hero-icon{margin-left:0}.fx-crumb-panel__empty{padding:8px 12px;font-size:var(--og-fs-xs);color:rgb(var(--og-text-faint))}.fx-crumb-panel__skeleton{display:flex;flex-direction:column;gap:8px;padding:8px 12px}.fx-crumb-panel__skeleton span{display:block;height:10px;border-radius:4px;background:rgb(var(--og-border-subtle));animation:fx-crumb-pulse 1.2s ease-in-out infinite}.fx-crumb-panel__skeleton span:nth-child(1){width:62%}.fx-crumb-panel__skeleton span:nth-child(2){width:48%;animation-delay:.15s}.fx-crumb-panel__skeleton span:nth-child(3){width:55%;animation-delay:.3s}@keyframes fx-crumb-pulse{0%,to{opacity:1}50%{opacity:.45}}.fx-crumb-panel__rule{margin:4px 0;border-top:1px solid rgb(var(--og-border-subtle))}.fx-crumb-panel__more{appearance:none;width:100%;display:flex;align-items:center;gap:8px;padding:7px 12px;border:0;border-radius:var(--og-radius-control);background:transparent;font-family:var(--og-font-body);font-size:var(--og-fs-xs);color:rgb(var(--og-text-muted));text-align:left;cursor:pointer}.fx-crumb-panel__more:hover{background:rgb(var(--og-surface-sunken));color:rgb(var(--og-text))}.fx-crumb-panel__create{appearance:none;width:calc(100% - 12px);margin:4px 6px 2px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:0;border-radius:var(--og-radius-control);background:rgb(var(--og-accent-soft-bg));color:rgb(var(--og-accent-soft-fg));font-family:var(--og-font-body);font-size:var(--og-fs-sm);font-weight:600;text-align:left;cursor:pointer;transition:background .15s,color .15s}.fx-crumb-panel__create:hover{background:rgb(var(--og-accent));color:rgb(var(--og-accent-contrast))}.text-accent{color:rgb(var(--og-accent))}.text-faint{color:rgb(var(--og-text-faint))}.text-strong{color:rgb(var(--og-text))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n"] }]
+        }], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Topbar load status (design "Loading States", measured 04/09):
+ *
+ *   ◌ Loading charts · 1 of 4          → while requests are pending
+ *   ● Up to date · just now      ↻     → once the batch settled
+ *
+ * Mono 10.5px; muted while loading, faint when idle; 11px spinner (2px ring,
+ * accent top). With `bar` a 2px indeterminate strip is drawn along the top
+ * edge of the nearest positioned ancestor (the topbar) while loading.
+ * Labels are caller-translated inputs; the ↻ button emits `reload`.
+ */
+class LoadStatusComponent {
+    status = inject(FxLoadStatusService);
+    loadingLabel = input('Loading', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
+    ofLabel = input('of', ...(ngDevMode ? [{ debugName: "ofLabel" }] : /* istanbul ignore next */ []));
+    upToDateLabel = input('Up to date', ...(ngDevMode ? [{ debugName: "upToDateLabel" }] : /* istanbul ignore next */ []));
+    justNowLabel = input('just now', ...(ngDevMode ? [{ debugName: "justNowLabel" }] : /* istanbul ignore next */ []));
+    /** `{n}` is replaced by the minute count. */
+    minutesAgoLabel = input('{n} min ago', ...(ngDevMode ? [{ debugName: "minutesAgoLabel" }] : /* istanbul ignore next */ []));
+    reloadLabel = input('Reload data', ...(ngDevMode ? [{ debugName: "reloadLabel" }] : /* istanbul ignore next */ []));
+    /** Draw the 2px indeterminate bar along the top of the positioned ancestor. */
+    bar = input(false, ...(ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []));
+    /** Show the ↻ button. */
+    showReload = input(true, ...(ngDevMode ? [{ debugName: "showReload" }] : /* istanbul ignore next */ []));
+    reload = output();
+    /** Ticks every 30 s so "just now" ages into "N min ago" without traffic. */
+    tick = signal(0, ...(ngDevMode ? [{ debugName: "tick" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const timer = setInterval(() => this.tick.update((n) => n + 1), 30_000);
+        inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    }
+    loadingText = computed(() => {
+        const total = Math.max(this.status.total(), 1);
+        const done = Math.min(this.status.done(), total);
+        const label = this.status.current();
+        return `${this.loadingLabel()}${label ? ' ' + label : ''} · ${done} ${this.ofLabel()} ${total}`;
+    }, ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    idleText = computed(() => {
+        this.tick();
+        const at = this.status.lastUpdated();
+        if (!at)
+            return this.upToDateLabel();
+        const minutes = Math.floor((Date.now() - at.getTime()) / 60_000);
+        const when = minutes < 1 ? this.justNowLabel() : this.minutesAgoLabel().replace('{n}', String(minutes));
+        return `${this.upToDateLabel()} · ${when}`;
+    }, ...(ngDevMode ? [{ debugName: "idleText" }] : /* istanbul ignore next */ []));
+    onReload() {
+        this.reload.emit();
+        this.status.requestReload();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LoadStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: LoadStatusComponent, isStandalone: true, selector: "fx-ui-load-status", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, upToDateLabel: { classPropertyName: "upToDateLabel", publicName: "upToDateLabel", isSignal: true, isRequired: false, transformFunction: null }, justNowLabel: { classPropertyName: "justNowLabel", publicName: "justNowLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesAgoLabel: { classPropertyName: "minutesAgoLabel", publicName: "minutesAgoLabel", isSignal: true, isRequired: false, transformFunction: null }, reloadLabel: { classPropertyName: "reloadLabel", publicName: "reloadLabel", isSignal: true, isRequired: false, transformFunction: null }, bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, showReload: { classPropertyName: "showReload", publicName: "showReload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reload: "reload" }, ngImport: i0, template: "@if (bar() && status.loading()) {\n  <div class=\"fx-load-bar\" aria-hidden=\"true\"><div class=\"fx-load-bar__run\"></div></div>\n}\n<div class=\"fx-load-status\" role=\"status\" aria-live=\"polite\" [class.fx-load-status--idle]=\"!status.loading()\">\n  @if (status.loading()) {\n    <span class=\"fx-load-spinner\" aria-hidden=\"true\"></span>\n    <span class=\"truncate\">{{ loadingText() }}</span>\n  } @else {\n    <span class=\"fx-load-dot\" aria-hidden=\"true\">\u25CF</span>\n    <span class=\"truncate\">{{ idleText() }}</span>\n  }\n</div>\n@if (showReload()) {\n  <button type=\"button\" class=\"fx-load-reload\" [attr.aria-label]=\"reloadLabel()\" [title]=\"reloadLabel()\" (click)=\"onReload()\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M21 12a9 9 0 1 1-3.1-6.8\" />\n      <path d=\"M21 3v6h-6\" />\n    </svg>\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:8px;min-width:0}.fx-load-status{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--og-font-mono);font-size:var(--og-fs-2xs);color:rgb(var(--og-text-muted));white-space:nowrap}.fx-load-status--idle{color:rgb(var(--og-text-faint))}.fx-load-dot{color:rgb(var(--og-positive))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.fx-load-spinner{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;border:2px solid rgb(var(--og-text) / .14);border-top-color:rgb(var(--og-accent));animation:fx-load-spin .8s linear infinite}@keyframes fx-load-spin{to{transform:rotate(360deg)}}.fx-load-reload{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--og-radius-control);background:transparent;color:rgb(var(--og-text-muted));cursor:pointer;transition:background .12s,color .12s}.fx-load-reload:hover{background:rgb(var(--og-surface-sunken));color:rgb(var(--og-text))}.fx-load-bar{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;background:rgb(var(--og-accent) / .18);pointer-events:none}.fx-load-bar__run{width:38%;height:100%;border-radius:2px;background:rgb(var(--og-accent));animation:fx-load-indet 1.15s cubic-bezier(.4,0,.2,1) infinite}@keyframes fx-load-indet{0%{transform:translate(-100%)}60%{transform:translate(160%)}to{transform:translate(160%)}}@media(prefers-reduced-motion:reduce){.fx-load-spinner,.fx-load-bar__run{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LoadStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-load-status', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (bar() && status.loading()) {\n  <div class=\"fx-load-bar\" aria-hidden=\"true\"><div class=\"fx-load-bar__run\"></div></div>\n}\n<div class=\"fx-load-status\" role=\"status\" aria-live=\"polite\" [class.fx-load-status--idle]=\"!status.loading()\">\n  @if (status.loading()) {\n    <span class=\"fx-load-spinner\" aria-hidden=\"true\"></span>\n    <span class=\"truncate\">{{ loadingText() }}</span>\n  } @else {\n    <span class=\"fx-load-dot\" aria-hidden=\"true\">\u25CF</span>\n    <span class=\"truncate\">{{ idleText() }}</span>\n  }\n</div>\n@if (showReload()) {\n  <button type=\"button\" class=\"fx-load-reload\" [attr.aria-label]=\"reloadLabel()\" [title]=\"reloadLabel()\" (click)=\"onReload()\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M21 12a9 9 0 1 1-3.1-6.8\" />\n      <path d=\"M21 3v6h-6\" />\n    </svg>\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:8px;min-width:0}.fx-load-status{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--og-font-mono);font-size:var(--og-fs-2xs);color:rgb(var(--og-text-muted));white-space:nowrap}.fx-load-status--idle{color:rgb(var(--og-text-faint))}.fx-load-dot{color:rgb(var(--og-positive))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.fx-load-spinner{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;border:2px solid rgb(var(--og-text) / .14);border-top-color:rgb(var(--og-accent));animation:fx-load-spin .8s linear infinite}@keyframes fx-load-spin{to{transform:rotate(360deg)}}.fx-load-reload{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--og-radius-control);background:transparent;color:rgb(var(--og-text-muted));cursor:pointer;transition:background .12s,color .12s}.fx-load-reload:hover{background:rgb(var(--og-surface-sunken));color:rgb(var(--og-text))}.fx-load-bar{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;background:rgb(var(--og-accent) / .18);pointer-events:none}.fx-load-bar__run{width:38%;height:100%;border-radius:2px;background:rgb(var(--og-accent));animation:fx-load-indet 1.15s cubic-bezier(.4,0,.2,1) infinite}@keyframes fx-load-indet{0%{transform:translate(-100%)}60%{transform:translate(160%)}to{transform:translate(160%)}}@media(prefers-reduced-motion:reduce){.fx-load-spinner,.fx-load-bar__run{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], ofLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ofLabel", required: false }] }], upToDateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "upToDateLabel", required: false }] }], justNowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "justNowLabel", required: false }] }], minutesAgoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesAgoLabel", required: false }] }], reloadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadLabel", required: false }] }], bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], showReload: [{ type: i0.Input, args: [{ isSignal: true, alias: "showReload", required: false }] }], reload: [{ type: i0.Output, args: ["reload"] }] } });
+
 /**
  * Wraps UI that is rendered from PLACEHOLDER data so the layout can be
  * reviewed before its endpoint exists (anh Tú 29/08: "muốn có full giao diện
@@ -4784,7 +5177,7 @@ class ScoreBadgeComponent {
     sizeClass() {
         switch (this.size()) {
             case 'sm':
-                return 'text-xs px-normal py-[1px]';
+                return 'text-xs px-normal py-[3px]';
             case 'lg':
                 return 'text-2xl px-semi py-small font-semibold';
             default:
@@ -4909,11 +5302,11 @@ 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 }, 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 });
+    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  <!-- option 30px tall (7px \u00D7 18px padding): the text-box trim below collapses the\n       glyph box to ~8px, so padding alone left the pill at 22px (anh T\u00FA 04/09) -->\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 min-h-[30px] items-center justify-center gap-xs px-[18px] py-[7px] 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 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"] }]
+            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  <!-- option 30px tall (7px \u00D7 18px padding): the text-box trim below collapses the\n       glyph box to ~8px, so padding alone left the pill at 22px (anh T\u00FA 04/09) -->\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 min-h-[30px] items-center justify-center gap-xs px-[18px] py-[7px] 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 }] }] } });
 
 /**
@@ -5245,11 +5638,11 @@ class RouteSkeletonComponent {
     }
     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 });
+    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: 720px){.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"] }]
+            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: 720px){.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);
@@ -5328,6 +5721,8 @@ const FX_COMPONENTS = [
     MenuComponent,
     ThemePickerComponent,
     PendingBadgeComponent,
+    BreadcrumbComponent,
+    LoadStatusComponent,
     SampleFrameComponent,
     ScoreBadgeComponent,
     StatusDotComponent,
@@ -5348,6 +5743,126 @@ const DIALOGS_COMPONENT = [
     ConfirmationDialogComponent
 ];
 
+/**
+ * Staggered entrance for one element (GSAP).
+ *
+ *   <fx-ui-section-card [fxReveal]="2">…</fx-ui-section-card>
+ *
+ * The host starts invisible and rises into place; `fxReveal` is its slot in
+ * the stagger (× 60 ms). Elements that mount later (async lists) animate on
+ * their own mount, so late data arrives with motion instead of a jump.
+ * Reduced-motion users see the final state immediately. For a whole page use
+ * `fxRevealGroup` on the container instead of numbering children by hand.
+ */
+class FxRevealDirective {
+    /** Stagger slot; 0 = first. */
+    fxReveal = input(0, ...(ngDevMode ? [{ debugName: "fxReveal" }] : /* istanbul ignore next */ []));
+    el = inject(ElementRef).nativeElement;
+    constructor() {
+        if (!fxMotionAllowed())
+            return;
+        // Hide before first paint — otherwise the element flashes, then animates.
+        this.el.style.opacity = '0';
+        afterNextRender(() => fxRevealElement(this.el, Number(this.fxReveal()) || 0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxRevealDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.20", type: FxRevealDirective, isStandalone: true, selector: "[fxReveal]", inputs: { fxReveal: { classPropertyName: "fxReveal", publicName: "fxReveal", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxRevealDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fxReveal]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxReveal: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxReveal", required: false }] }] } });
+/** Run the standard reveal on an element at the given stagger slot. */
+function fxRevealElement(el, slot = 0) {
+    gsap.fromTo(el, { opacity: 0, y: FX_MOTION.travelPx }, {
+        opacity: 1,
+        y: 0,
+        duration: FX_MOTION.duration,
+        delay: Math.min(Math.max(slot, 0), FX_MOTION.maxSlot) * FX_MOTION.stagger,
+        ease: FX_MOTION.ease,
+        clearProps: 'opacity,transform',
+        overwrite: 'auto',
+    });
+}
+
+/**
+ * One attribute on a page root reveals its sections top-to-bottom.
+ *
+ *   <div fxRevealGroup>            ← page root
+ *     <div>heading…</div>          ← slot 0
+ *     <fx-ui-stat-cards …/>        ← slot 1
+ *     <div class="grid …">…</div>  ← slot 2 (the grid moves as one block)
+ *   </div>
+ *
+ * Direct element children present at first render get consecutive slots.
+ * Children added later (a list that arrives after its request, an `@if` that
+ * flips) are revealed as they mount, so async content never pops in flat.
+ * Skeletons (`fx-ui-route-skeleton`, `[aria-busy]`) are left alone. Replaces
+ * the page-level `animate.enter="fade-in-animation"` one-shot fade.
+ */
+class FxRevealGroupDirective {
+    /** Cap on how many children get their own slot; the rest share the last one. */
+    fxRevealGroup = input(undefined, ...(ngDevMode ? [{ debugName: "fxRevealGroup" }] : /* istanbul ignore next */ []));
+    el = inject(ElementRef).nativeElement;
+    observer;
+    seen = new WeakSet();
+    constructor() {
+        if (!fxMotionAllowed())
+            return;
+        // Children are hidden right away so nothing paints before its reveal.
+        for (const child of this.children())
+            this.hide(child);
+        afterNextRender(() => {
+            const kids = this.children();
+            kids.forEach((child, i) => this.reveal(child, i));
+            this.observer = new MutationObserver((records) => {
+                for (const r of records) {
+                    r.addedNodes.forEach((n) => {
+                        if (n instanceof HTMLElement && n.parentElement === this.el && this.eligible(n) && !this.seen.has(n)) {
+                            this.hide(n);
+                            this.reveal(n, 0);
+                        }
+                    });
+                }
+            });
+            this.observer.observe(this.el, { childList: true });
+        });
+    }
+    children() {
+        return Array.from(this.el.children).filter((c) => c instanceof HTMLElement && this.eligible(c));
+    }
+    eligible(c) {
+        const tag = c.tagName.toLowerCase();
+        return tag !== 'fx-ui-route-skeleton' && tag !== 'script' && tag !== 'style' && !c.hasAttribute('aria-busy');
+    }
+    hide(c) {
+        if (this.seen.has(c))
+            return;
+        this.seen.add(c);
+        c.style.opacity = '0';
+    }
+    reveal(c, slot) {
+        const cap = Number(this.fxRevealGroup());
+        fxRevealElement(c, Number.isFinite(cap) && cap > 0 ? Math.min(slot, cap) : slot);
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxRevealGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.20", type: FxRevealGroupDirective, isStandalone: true, selector: "[fxRevealGroup]", inputs: { fxRevealGroup: { classPropertyName: "fxRevealGroup", publicName: "fxRevealGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxRevealGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fxRevealGroup]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxRevealGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxRevealGroup", required: false }] }] } });
+
+/** Motion directives exported by UiModule (GSAP-based, reduced-motion aware). */
+const FX_MOTION_DIRECTIVES = [FxRevealDirective, FxRevealGroupDirective, FxCountUpDirective];
+
 /**
  * Compatibility barrel over the (now standalone) core components.
  *
@@ -5365,7 +5880,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, 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,
+            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, BreadcrumbComponent, LoadStatusComponent, SampleFrameComponent, ScoreBadgeComponent, StatusDotComponent, SparkbarComponent, SegmentedComponent, ListRowComponent, BarListComponent, FacetsRailComponent, ProjectCardComponent, PipelineStepperComponent, SkeletonFacetsComponent, SkeletonDashboardComponent, SkeletonFrameComponent, RouteSkeletonComponent, ConfirmationDialogComponent, FxRevealDirective, FxRevealGroupDirective, FxCountUpDirective], 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, BreadcrumbComponent, LoadStatusComponent, SampleFrameComponent, ScoreBadgeComponent, StatusDotComponent, SparkbarComponent, SegmentedComponent, ListRowComponent, BarListComponent, FacetsRailComponent, ProjectCardComponent, PipelineStepperComponent, SkeletonFacetsComponent, SkeletonDashboardComponent, SkeletonFrameComponent, RouteSkeletonComponent, ConfirmationDialogComponent, FxRevealDirective, FxRevealGroupDirective, FxCountUpDirective, FormsModule,
             ReactiveFormsModule,
             RouterModule,
             HasPermissionDirective,
@@ -5387,10 +5902,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         TrimOnBlurDirective,
                         ...FX_COMPONENTS,
                         ...DIALOGS_COMPONENT,
+                        ...FX_MOTION_DIRECTIVES,
                     ],
                     exports: [
                         ...FX_COMPONENTS,
                         ...DIALOGS_COMPONENT,
+                        ...FX_MOTION_DIRECTIVES,
                         FormsModule,
                         ReactiveFormsModule,
                         RouterModule,
@@ -5408,5 +5925,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, 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 };
+export { AuthInterceptor, AuthStateService, BarListComponent, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseTableComponent, BreadcrumbComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, CodeBlockComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FX_MOTION, FX_MOTION_DIRECTIVES, FX_SKELETON_DATA_KEY, FacetsRailComponent, FilterChipsComponent, FilterPillsComponent, FxComponent, FxCountUpDirective, FxDialogService, FxLoadStatusService, FxLoadingService, FxRevealDirective, FxRevealGroupDirective, FxRouteSkeletonService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, ListRowComponent, LoadStatusComponent, 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, fxMotionAllowed, fxRevealElement, scoreTone, severityTone, toneBadge, toneBadgeSolid, toneBg, toneBorder, toneColor, toneDot, toneDotChart, toneFg, toneScale, toneText, toneTint };
 //# sourceMappingURL=foxeltech-angular-ui.mjs.map