@edmicro/olkit 1.1.2 → 1.1.3

package/types/edmicro-olkit.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, WritableSignal } from '@angular/core';
+import { OnInit, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as _edmicro_olkit from '@edmicro/olkit';
 import { SafeHtml } from '@angular/platform-browser';
@@ -174,6 +174,7 @@ declare const boDau: typeof stripDiacritics;
  */
 declare class OlCommand {
     private readonly focusTrap;
+    private readonly overlayContainer;
     private readonly destroyRef;
     private readonly panel;
     private readonly searchInput;
@@ -348,6 +349,10 @@ type AlertDialogTone = 'danger' | 'warning' | 'brand';
  * Build vẫn xanh, chỉ bộ đọc màn hình là đọc sai.
  */
 declare class OlAlertDialog {
+    private readonly overlayContainer;
+    /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi đang đóng. */
+    private releaseEscape;
+    constructor();
     readonly isOpen: _angular_core.ModelSignal<boolean>;
     /**
      * `heading` chứ không phải `title`: `title` là thuộc tính HTML có sẵn, đặt
@@ -372,7 +377,6 @@ declare class OlAlertDialog {
      * đòi `alertdialog` phải đóng được bằng Esc, nên xử lý ở đây, và cho nó rơi
      * vào nhánh AN TOÀN chứ không phải nhánh xác nhận.
      */
-    onEscape(): void;
     onConfirm(): void;
     onCancel(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAlertDialog, never>;
@@ -510,7 +514,19 @@ declare class OlAvatarGroup {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAvatarGroup, "ol-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "counterAriaLabel": { "alias": "counterAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type BadgeTheme = 'brand' | 'gray' | 'white' | 'danger' | 'warning' | 'success' | 'default' | 'dark' | 'red' | 'yellow' | 'green';
+/**
+ * Sáu màu CHUẨN (Figma `ol-badge` #1146:22250, trục `Theme`, 126 biến thể):
+ * Gray · White · Brand · Danger · Warning · Success.
+ *
+ * `ghost` là màu THỨ BẢY, CHƯA CÓ TRONG FIGMA — thêm 2026-09-23 theo yêu cầu,
+ * bê khuôn từ `ol-button` (nền trong suốt, chữ `text-heading`). Đừng gỡ khi
+ * đối chiếu Figma thấy thừa; còn nợ vẽ biến thể `Theme=Ghost`.
+ *
+ * Năm giá trị cuối là BÍ DANH, `normalizedColor()` gập về sáu màu chuẩn.
+ */
+type BadgeColor = 'brand' | 'gray' | 'white' | 'danger' | 'warning' | 'success' | 'ghost' | 'default' | 'dark' | 'red' | 'yellow' | 'green';
+/** @deprecated Tên cũ của `BadgeColor`. Giữ để không phá mã đang chạy. */
+type BadgeTheme = BadgeColor;
 type BadgeSize = 'xs' | 'sm' | 'lg';
 type BadgeShape = 'square' | 'pill';
 /**
@@ -523,8 +539,21 @@ type BadgeShape = 'square' | 'pill';
  */
 type BadgeType = 'default' | 'dot' | 'avatar' | 'loader' | 'secondary';
 declare class OlBadge {
-    readonly theme: _angular_core.InputSignal<BadgeTheme>;
-    readonly color: _angular_core.InputSignal<BadgeTheme>;
+    /**
+     * Màu ngữ nghĩa của nhãn. Tên `color` cho khớp `ol-button` và 9 component
+     * khác trong thư viện — badge từng là chỗ duy nhất gọi trục này là `theme`.
+     */
+    readonly color: _angular_core.InputSignal<BadgeColor>;
+    /**
+     * @deprecated Dùng `color`.
+     *
+     * Bản cũ hoà giải hai input bằng cách SO VỚI GIÁ TRỊ MẶC ĐỊNH — `theme`
+     * thắng trừ khi nó bằng `'gray'` — nên `[color]="'brand'"` kèm
+     * `theme="danger"` thì `color` bị nuốt im lặng, không gì báo lỗi.
+     *
+     * Nay: cái nào được TRUYỀN thì thắng. Chuỗi rỗng là "không truyền".
+     */
+    readonly theme: _angular_core.InputSignal<"" | BadgeColor>;
     readonly size: _angular_core.InputSignal<BadgeSize>;
     readonly shape: _angular_core.InputSignal<BadgeShape>;
     readonly rounded: _angular_core.InputSignal<boolean>;
@@ -539,7 +568,7 @@ declare class OlBadge {
     readonly removable: _angular_core.InputSignal<boolean>;
     readonly href: _angular_core.InputSignal<string | null>;
     readonly dismiss: _angular_core.OutputEmitterRef<MouseEvent>;
-    readonly normalizedTheme: _angular_core.Signal<string>;
+    readonly normalizedColor: _angular_core.Signal<string>;
     readonly isPill: _angular_core.Signal<boolean>;
     readonly badgeClasses: _angular_core.Signal<string>;
     /**
@@ -551,7 +580,7 @@ declare class OlBadge {
     readonly dotClasses: _angular_core.Signal<"bg-fg-brand-strong" | "bg-fg-danger-strong" | "bg-fg-warning" | "bg-success-strong" | "bg-heading">;
     onDismiss(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlBadge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBadge, "ol-badge", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "avatarText": { "alias": "avatarText"; "required": false; "isSignal": true; }; "secondaryText": { "alias": "secondaryText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBadge, "ol-badge", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "avatarText": { "alias": "avatarText"; "required": false; "isSignal": true; }; "secondaryText": { "alias": "secondaryText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["*"], true, never>;
 }
 
 type BannerVariant = 'brand' | 'gradient' | 'warning' | 'dark' | 'subtle';
@@ -643,12 +672,28 @@ declare class OlBreadcrumbItem {
     readonly status: _angular_core.InputSignal<BreadcrumbItemStatus>;
     readonly showSeparator: _angular_core.InputSignal<boolean>;
     readonly separator: _angular_core.InputSignal<BreadcrumbSeparator | null>;
+    /**
+     * Chặng không bấm được — ví dụ cấp cha mà người dùng chưa có quyền xem.
+     *
+     * VƯỢT FIGMA CÓ CHỦ Ý (2026-09-23): `ol-breadcrumb-item` #1148:31348 chỉ vẽ
+     * ba Status — Initial · Hover · Active. Không có Disabled. Đây là mở rộng
+     * theo yêu cầu, không phải đọc sót thiết kế; đừng gỡ khi đối chiếu Figma.
+     *
+     * Khác `current`: `current` là trang ĐANG đứng (mục cuối, có `aria-current`),
+     * còn `disabled` là chặng có tồn tại nhưng không đi tới được.
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
     private readonly parentBreadcrumb;
     readonly isCurrent: _angular_core.Signal<boolean>;
     readonly effectiveSeparator: _angular_core.Signal<BreadcrumbSeparator>;
+    /**
+     * `disabled` phải chặn ở ĐÂY, không chỉ đổi màu: còn sinh thẻ `<a href>` thì
+     * vẫn bấm được, vẫn Tab tới được, vẫn mở bằng chuột giữa — tô mờ chỉ làm
+     * người dùng tưởng nó hỏng.
+     */
     readonly isLink: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlBreadcrumbItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBreadcrumbItem, "ol-breadcrumb-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showSeparator": { "alias": "showSeparator"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBreadcrumbItem, "ol-breadcrumb-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showSeparator": { "alias": "showSeparator"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type AppDevice = 'appstore' | 'googleplay' | 'google-play' | 'apple' | 'google';
@@ -957,10 +1002,26 @@ declare class OlDatepicker implements ControlValueAccessor {
     private readonly overlayContainer;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
     private detachPanel;
+    /**
+     * Hàm gỡ khỏi ngăn xếp Escape. `null` khi popup đang đóng.
+     *
+     * Xem `OlOverlayContainer.register` — chỉ lớp TRÊN CÙNG đóng khi nhấn
+     * Escape, nên datepicker mở trong modal không còn kéo modal đóng theo.
+     */
+    private releaseEscape;
     /** Hàm gỡ theo dõi trần chiều cao popup. */
     private stopTrackingHeight;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly inputValue: _angular_core.WritableSignal<string>;
+    /**
+     * Có gì để xoá hay không — dựa vào CHỮ TRONG Ô, không chỉ `value`.
+     *
+     * `value` chỉ được đặt khi chuỗi phân tích thành ngày hợp lệ (`if (parsed)`
+     * trong `onInputChange`). Gõ dở "15/0" thì ô đã có chữ mà `value` vẫn rỗng,
+     * nên nút xoá không hiện — đúng lúc người dùng gõ sai và cần xoá đi gõ lại.
+     * Đo /datepicker: gõ "15/0" nút không hiện, gõ đủ "15/03/2026" mới hiện.
+     */
+    readonly hasContent: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
     private emitAllChanges;
@@ -987,7 +1048,7 @@ declare class OlDatepicker implements ControlValueAccessor {
      * Bỏ `py-*`: chiều cao đã cố định thì đệm dọc chỉ ép chữ, giữ `px-*` cho đệm
      * ngang và `ps-*` cho chỗ icon lịch.
      */
-    readonly inputSizeClasses: _angular_core.Signal<"h-9 px-3 ps-9 text-xs rounded-md" | "h-12 px-4 ps-11 text-base rounded-md" | "h-13 px-4 ps-11 text-base rounded-md" | "h-10 px-3.5 ps-10 text-sm rounded-md">;
+    readonly inputSizeClasses: _angular_core.Signal<string>;
     /**
      * Cỡ icon lịch theo `size` của ô nhập.
      *
@@ -1014,7 +1075,6 @@ declare class OlDatepicker implements ControlValueAccessor {
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
     private donDepPanel;
     onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDatepicker, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDatepicker, "ol-datepicker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "dateChange": "dateChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "formattedChange": "formattedChange"; }, never, never, true, never>;
 }
@@ -1073,11 +1133,18 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     private readonly overlayContainer;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
     private detachPanel;
+    /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi đang đóng. */
+    private releaseEscape;
     /** Hàm gỡ theo dõi trần chiều cao popup. */
     private stopTrackingHeight;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly startInputValue: _angular_core.WritableSignal<string>;
     readonly endInputValue: _angular_core.WritableSignal<string>;
+    /**
+     * Có gì để xoá hay không — dựa vào CHỮ TRONG Ô, không chỉ `value`.
+     * Cùng lý do với `ol-datepicker`: `value` chỉ đặt khi chuỗi phân tích được.
+     */
+    readonly hasContent: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
     constructor();
@@ -1093,7 +1160,7 @@ declare class OlDateRangePicker implements ControlValueAccessor {
      * dùng y hệt `py-2 / py-2.5 / py-3.5` nên lệch cùng một kiểu; sửa một nửa là
      * để lại đúng lỗi đó ở chỗ khác.
      */
-    readonly inputSizeClasses: _angular_core.Signal<"h-9 px-3 text-xs rounded-md" | "h-12 px-4 text-base rounded-md" | "h-13 px-4 text-base rounded-md" | "h-10 px-3.5 text-sm rounded-md">;
+    readonly inputSizeClasses: _angular_core.Signal<string>;
     /**
      * Cỡ cho biến thể `joined` — khung bọc mang viền, hai input bên trong trong
      * suốt. Phải tách khỏi `inputSizeClasses()`: ở đây chiều cao thuộc về KHUNG,
@@ -1127,7 +1194,6 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
     private donDepPanel;
     onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDateRangePicker, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDateRangePicker, "ol-date-range-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
@@ -1263,7 +1329,7 @@ declare class OlDatepickerPopup {
     /**
      * Trần chiều cao + cuộn CHỈ cho popup nổi.
      *
-     * Dùng `[class]` trả chuỗi chứ KHÔNG `[class.max-h-[var(...)]]`: tên class
+     * Dùng `[class]` trả chuỗi chứ KHÔNG `[class.max-h-…]` với giá trị tuỳ ý: tên class
      * chứa dấu chấm và ngoặc vuông nên Angular cắt hỏng tên khi dùng class
      * binding từng cái (`[class.h-1.5]` ra `h-1`).
      */
@@ -1355,6 +1421,7 @@ type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 type DrawerSize = 'sm' | 'base' | 'lg' | 'xl' | 'full';
 declare class OlDrawer {
     private readonly focusTrap;
+    private readonly overlayContainer;
     private readonly destroyRef;
     private readonly panel;
     readonly isOpen: _angular_core.ModelSignal<boolean>;
@@ -1406,11 +1473,18 @@ declare class OlDrawerHeader {
      */
     readonly headingLevel: _angular_core.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
     readonly heading: _angular_core.InputSignal<string>;
+    /** Icon đầu tiêu đề. Rỗng thì KHÔNG dựng khung. Xem `ol-modal-header`. */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Mô tả phụ dưới tiêu đề. Cùng tên với `ol-modal-header`. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** @deprecated Dùng `description`. Giữ để không phá mã đang chạy. */
     readonly helperText: _angular_core.InputSignal<string>;
+    /** Cái nào được TRUYỀN thì thắng. Xem chú thích ở `ol-modal-header`. */
+    readonly descriptionText: _angular_core.Signal<string>;
     readonly showClose: _angular_core.InputSignal<boolean>;
     readonly closeClick: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDrawerHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDrawerHeader, "ol-drawer-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDrawerHeader, "ol-drawer-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, ["*"], true, never>;
 }
 
 /** Khớp trục `Type` của Figma ol-drawer-footer (node 1149:37232). */
@@ -1450,6 +1524,8 @@ declare class OlDropdown {
     private cleanupAutoUpdate;
     /** Hàm trả menu về chỗ cũ khi đóng. */
     private detachMenu;
+    /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi đang đóng. */
+    private releaseEscape;
     readonly label: _angular_core.InputSignal<string | null>;
     readonly isOpen: _angular_core.ModelSignal<boolean>;
     /**
@@ -1489,7 +1565,6 @@ declare class OlDropdown {
     private anchorElement;
     private stopAutoUpdate;
     onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
     /** Toạ độ con trỏ lần bấm chuột phải gần nhất, đổ vào mốc ẩn. */
     readonly cursorX: _angular_core.WritableSignal<number>;
     readonly cursorY: _angular_core.WritableSignal<number>;
@@ -1911,6 +1986,20 @@ declare class OlInput implements ControlValueAccessor {
     readonly addOnIcon: _angular_core.InputSignal<boolean>;
     readonly leftIcon: _angular_core.InputSignal<boolean>;
     readonly rightIcon: _angular_core.InputSignal<boolean>;
+    /**
+     * Hiện nút xoá khi ô có chữ.
+     *
+     * Mặc định **TẮT**, khác `ol-select` và `ol-datepicker` (mặc định bật).
+     * Lý do: hai cái kia chọn từ danh sách nên xoá là thao tác thường gặp, còn
+     * ô nhập chữ thì người dùng vẫn chọn-hết-rồi-gõ-đè như mọi ô nhập khác.
+     * Bật sẵn cho MỌI `ol-input` đang chạy là thêm một nút vào giao diện của
+     * người khác mà họ không yêu cầu.
+     */
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    /** Tên trợ năng của nút xoá. Đổi được khi ô có nghĩa cụ thể. */
+    readonly clearAriaLabel: _angular_core.InputSignal<string>;
+    /** Phát khi người dùng bấm nút xoá — nơi dùng biết để tải lại danh sách. */
+    readonly cleared: _angular_core.OutputEmitterRef<void>;
     readonly rightHelperText: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string>;
     /** Id thực dùng: ưu tiên id do nơi gọi truyền, không thì dùng id tự sinh. */
@@ -1942,10 +2031,18 @@ declare class OlInput implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     /** Gọi từ template mỗi khi giá trị đổi, để form biết. */
     protected phatThayDoi(val: string): void;
+    /**
+     * Xoá nội dung ô.
+     *
+     * `stopPropagation` vì nút nằm TRONG thẻ bọc: thiếu nó thì cú bấm lan ra
+     * thẻ bọc, và ở component có hành vi bấm-để-mở (select, datepicker) sẽ mở
+     * panel ngay sau khi xoá.
+     */
+    protected clearValue(event: MouseEvent): void;
     /** Gọi khi rời ô nhập — form dùng để đánh dấu `touched`. */
     protected markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlInput, "ol-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "labelIcon": { "alias": "labelIcon"; "required": false; "isSignal": true; }; "labelTooltip": { "alias": "labelTooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "prefixText": { "alias": "prefixText"; "required": false; "isSignal": true; }; "suffixText": { "alias": "suffixText"; "required": false; "isSignal": true; }; "addOnIcon": { "alias": "addOnIcon"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "rightHelperText": { "alias": "rightHelperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, ["[addOnIcon], [leftIcon]", "[leftIcon]", "[rightIcon]", "[rightHelperAction]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlInput, "ol-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "labelIcon": { "alias": "labelIcon"; "required": false; "isSignal": true; }; "labelTooltip": { "alias": "labelTooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "prefixText": { "alias": "prefixText"; "required": false; "isSignal": true; }; "suffixText": { "alias": "suffixText"; "required": false; "isSignal": true; }; "addOnIcon": { "alias": "addOnIcon"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "rightHelperText": { "alias": "rightHelperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "cleared": "cleared"; }, never, ["[addOnIcon], [leftIcon]", "[leftIcon]", "[rightIcon]", "[rightHelperAction]"], true, never>;
 }
 
 type TextareaState = 'default' | 'error' | 'success';
@@ -2002,6 +2099,34 @@ declare class OlTextarea implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTextarea, "ol-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharCount": { "alias": "showCharCount"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "commentBox": { "alias": "commentBox"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "submitComment": "submitComment"; }, never, never, true, never>;
 }
 
+/**
+ * Bảng chuẩn kích thước và trạng thái cho MỌI ô nhập của thư viện.
+ *
+ * ## Vì sao cần
+ *
+ * Chín component họ form từng tự khai kích thước riêng, và chúng trôi khỏi
+ * nhau. Đo ngày 2026-09-23 trên chín component:
+ *
+ *   thiếu cỡ `xl`   3 component  (select · autocomplete · input-counter)
+ *   nền sai          3 component  (autocomplete · timepicker · datepicker)
+ *   viền sai         5 component
+ *   đệm ngang lệch   2px ở cả ba cỡ đầu (datepicker so với input)
+ *   cỡ chữ `sm` lệch 2px (14px vs 12px)
+ *
+ * Nền và viền lệch **chỉ lộ ở chế độ tối**: sáng thì `--bg-secondary` và
+ * `--bg-secondary-medium` cùng ra `#f9fafb`, tối thì `gray-950` vs `gray-800`.
+ * Nên lỗi sống rất lâu — người dựng nhìn chế độ sáng, thấy giống hệt nhau.
+ *
+ * Đọc từ đây thì thêm ô nhập mới cũng tự khớp, và đổi thang chỉ sửa một chỗ.
+ *
+ * ## Không gộp chiều cao với đệm ngang
+ *
+ * Hai thứ tách riêng vì component có icon cần `ps-*` thay `px-*`. Gộp lại thì
+ * mỗi component phải cắt chuỗi ra để bỏ phần đệm — dễ sai hơn là ghép vào.
+ */
+/** Bốn cỡ của họ form. Trùng `InputSize`, `SelectSize`, `DatepickerSize`. */
+type FieldSize = 'sm' | 'base' | 'lg' | 'xl';
+
 /**
  * Thang cỡ theo Figma: `sm | base | lg`.
  *
@@ -2012,11 +2137,17 @@ declare class OlTextarea implements ControlValueAccessor {
  *
  * Cùng cách xử lý với `variant`/`currentPage` của `ol-pagination`.
  *
- * LƯU Ý cho lượt sau: họ form nay là `sm | base | lg | xl` (`ol-input`,
- * `ol-timepicker`, `ol-datepicker`). `ol-select` **thiếu `xl`** — thêm được
- * nhưng là mở rộng API, cần chốt trước.
+ * Họ form là `sm | base | lg | xl` (`ol-input`, `ol-timepicker`,
+ * `ol-datepicker`), và `ol-select` **có đủ cả bốn** — `xl` đi qua bảng chuẩn
+ * `FIELD_HEIGHT`/`FIELD_PADDING_X` trong `forms/shared/field-tokens.ts` như
+ * mọi cỡ khác.
+ *
+ * (Chú thích cũ ở đây ghi "ol-select thiếu xl" — đã LẠC HẬU, gỡ 2026-09-23.
+ * Bảng API của ba trang docs chép theo nó nên cũng thiếu `xl`; `check:api:days`
+ * bắt được, nhưng guard đó chưa bao giờ chạy vì vòng lặp gọi guard dùng regex
+ * `check:[a-z-]*` — không khớp tên có HAI dấu hai chấm.)
  */
-type SelectSize = 'sm' | 'base' | 'lg' | 'md';
+type SelectSize = 'sm' | 'base' | 'lg' | 'xl' | 'md';
 type SelectState = 'default' | 'error' | 'success';
 interface SelectOption {
     label: string;
@@ -2133,6 +2264,26 @@ declare class OlSelect implements ControlValueAccessor {
      * và PrimeNG.
      */
     readonly appendTo: _angular_core.InputSignal<"body" | null>;
+    /**
+     * Lớp Tailwind cho panel thả xuống.
+     *
+     * Cùng tên và cùng ý nghĩa với `menuClass` của `ol-dropdown`.
+     *
+     * Chỉ có tác dụng khi `matchTriggerWidth` TẮT: bề rộng panel được đặt bằng
+     * `style.width` inline, mà style inline thắng mọi lớp Tailwind.
+     */
+    readonly menuClass: _angular_core.InputSignal<string>;
+    /**
+     * Panel rộng đúng bằng ô neo hay không. Mặc định **bật** — giữ hành vi cũ.
+     *
+     * Tắt khi nội dung cần rộng hơn ô: nhãn dài, hai cột, hoặc nội dung tuỳ
+     * biến truyền qua `ng-template`. Lúc đó `menuClass` mới có chỗ tác dụng.
+     *
+     * ```html
+     * <ol-select [matchTriggerWidth]="false" menuClass="w-96" … />
+     * ```
+     */
+    readonly matchTriggerWidth: _angular_core.InputSignal<boolean>;
     /** Tối đa bao nhiêu mục được chọn ở chế độ đa chọn. 0 = không giới hạn. */
     readonly maxSelectedItems: _angular_core.InputSignal<number>;
     /** Đóng danh sách ngay sau khi chọn. Mặc định: đơn chọn đóng, đa chọn không. */
@@ -2264,13 +2415,29 @@ declare class OlSelect implements ControlValueAccessor {
     readonly listboxId: _angular_core.Signal<string>;
     readonly describedBy: _angular_core.Signal<string | null>;
     readonly ariaInvalid: _angular_core.Signal<"true" | null>;
-    protected readonly resolvedSize: _angular_core.Signal<SelectSize>;
+    /**
+     * Cỡ đã bỏ bí danh `'md'`.
+     *
+     * Khai kiểu trả về là `FieldSize` chứ không để TypeScript suy: suy ra sẽ
+     * giữ `'md'` trong kiểu hợp dù giá trị không bao giờ là `'md'`, và mọi chỗ
+     * tra bảng chuẩn sẽ báo lỗi "Property 'md' does not exist".
+     */
+    protected readonly resolvedSize: _angular_core.Signal<FieldSize>;
     /**
      * Padding trái: 10 khi có icon, 3.5 khi không.
      * Không dùng `[class.ps-3.5]` vì Angular cắt phần sau dấu chấm — nó render
      * ra `ps-3` (12px thay vì 14px).
      */
-    readonly paddingStartClass: _angular_core.Signal<"ps-10" | "ps-3.5">;
+    /**
+     * Đệm trái theo bảng chuẩn, KHÔNG khoá cứng một giá trị cho mọi cỡ.
+     *
+     * Bản cũ trả `ps-3.5` (14px) cho cả bốn cỡ, trong khi `ol-input` dùng
+     * 10/12/14/16px. Đặt `ol-select size="sm"` cạnh `ol-input size="sm"` là
+     * lệch 4px, và ở `xl` lệch 2px theo chiều ngược lại.
+     *
+     * Có icon trái thì `ps-10` cố định — chỗ đó dành cho icon, không phải đệm.
+     */
+    readonly paddingStartClass: _angular_core.Signal<string>;
     private onChange;
     private onTouched;
     private readonly destroyRef;
@@ -2278,6 +2445,8 @@ declare class OlSelect implements ControlValueAccessor {
     private readonly overlayContainer;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
     private detachPanel;
+    /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi panel đang đóng. */
+    private releaseEscape;
     private stopTracking;
     private wasOpen;
     private hengio;
@@ -2338,6 +2507,21 @@ declare class OlSelect implements ControlValueAccessor {
      * gì: nút chết còn khó hiểu hơn là không có nút.
      */
     readonly hasClearable: _angular_core.Signal<boolean>;
+    /**
+     * Có gì để nút xoá dọn hay không — mục đã chọn HOẶC chữ đang gõ ở ô tìm.
+     *
+     * `hasClearable()` chỉ nhìn mục đã chọn, nên gõ vào ô tìm mà chưa chọn gì
+     * thì không có nút — người dùng gõ sai phải xoá từng ký tự. Đo /select: gõ
+     * "to" vào ô tìm, số nút xoá vẫn 0.
+     *
+     * Nút dọn cả hai thứ (`clear()` đã gọi `searchQuery.set('')`), nên điều
+     * kiện hiện phải nhìn cả hai.
+     *
+     * Tên `hasContent` dùng CHUNG với `ol-datepicker` và `ol-date-range-picker`
+     * — cùng một khái niệm thì cùng một tên, để người đọc mã không phải nhớ ba
+     * cách gọi cho một thứ.
+     */
+    readonly hasContent: _angular_core.Signal<boolean>;
     /**
      * Có hiện lối tạo mục mới không.
      *
@@ -2448,7 +2632,7 @@ declare class OlSelect implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSelect, "ol-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "hideSelected": { "alias": "hideSelected"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "createText": { "alias": "createText"; "required": false; "isSignal": true; }; "groupSeparator": { "alias": "groupSeparator"; "required": false; "isSignal": true; }; "searchPosition": { "alias": "searchPosition"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; "searchPrefix": { "alias": "searchPrefix"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate", "labelTemplate"], ["[leftIcon]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSelect, "ol-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; "matchTriggerWidth": { "alias": "matchTriggerWidth"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "hideSelected": { "alias": "hideSelected"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "createText": { "alias": "createText"; "required": false; "isSignal": true; }; "groupSeparator": { "alias": "groupSeparator"; "required": false; "isSignal": true; }; "searchPosition": { "alias": "searchPosition"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; "searchPrefix": { "alias": "searchPrefix"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate", "labelTemplate"], ["[leftIcon]"], true, never>;
 }
 
 /**
@@ -2836,7 +3020,7 @@ declare class OlFloatingLabel implements ControlValueAccessor {
  * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
  * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
  */
-type InputCounterSize = 'sm' | 'base' | 'lg' | 'md';
+type InputCounterSize = 'sm' | 'base' | 'lg' | 'xl' | 'md';
 declare class OlInputCounter implements ControlValueAccessor {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
@@ -2882,7 +3066,7 @@ declare class OlInputCounter implements ControlValueAccessor {
     /** Nhãn: `inline` bỏ margin dưới vì nó nằm cạnh, không nằm trên. */
     protected readonly labelClasses: _angular_core.Signal<"shrink-0 text-sm font-medium text-heading" | "block mb-1.5 text-sm font-medium text-heading">;
     /** Khối nút+ô: `ghost` bỏ nền, viền và đổ bóng. */
-    protected readonly groupClasses: _angular_core.Signal<"relative inline-flex items-center overflow-hidden" | "relative inline-flex items-center rounded-md shadow-xs border border-default bg-neutral-primary overflow-hidden">;
+    protected readonly groupClasses: _angular_core.Signal<"relative inline-flex items-center overflow-hidden" | "relative inline-flex items-center rounded-md shadow-xs border border-default-medium bg-neutral-primary overflow-hidden">;
     /** Nút trong chế độ `ghost` cũng phải bỏ nền và đường ngăn. */
     protected readonly ghostNut: _angular_core.Signal<"" | "bg-transparent border-0">;
     increment(): void;
@@ -3215,7 +3399,7 @@ declare class OlTimepicker implements ControlValueAccessor {
  * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
  * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
  */
-type AutocompleteSize = 'sm' | 'base' | 'lg' | 'md';
+type AutocompleteSize = 'sm' | 'base' | 'lg' | 'xl' | 'md';
 type AutocompleteState = 'default' | 'error' | 'success';
 interface AutocompleteOption {
     label: string;
@@ -3272,6 +3456,26 @@ declare class OlAutocomplete implements ControlValueAccessor {
      * và PrimeNG.
      */
     readonly appendTo: _angular_core.InputSignal<"body" | null>;
+    /**
+     * Lớp Tailwind cho panel thả xuống.
+     *
+     * Cùng tên và cùng ý nghĩa với `menuClass` của `ol-dropdown`.
+     *
+     * Chỉ có tác dụng khi `matchTriggerWidth` TẮT: bề rộng panel được đặt bằng
+     * `style.width` inline, mà style inline thắng mọi lớp Tailwind.
+     */
+    readonly menuClass: _angular_core.InputSignal<string>;
+    /**
+     * Panel rộng đúng bằng ô neo hay không. Mặc định **bật** — giữ hành vi cũ.
+     *
+     * Tắt khi nội dung cần rộng hơn ô: nhãn dài, hai cột, hoặc nội dung tuỳ
+     * biến truyền qua `ng-template`. Lúc đó `menuClass` mới có chỗ tác dụng.
+     *
+     * ```html
+     * <ol-select [matchTriggerWidth]="false" menuClass="w-96" … />
+     * ```
+     */
+    readonly matchTriggerWidth: _angular_core.InputSignal<boolean>;
     readonly groupBy: _angular_core.InputSignal<string>;
     /**
      * LỌC TỪ XA. Bật lên thì component NGỪNG tự lọc `options` — nó chỉ phát
@@ -3323,6 +3527,8 @@ declare class OlAutocomplete implements ControlValueAccessor {
     private readonly overlayContainer;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
     private detachPanel;
+    /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi panel đang đóng. */
+    private releaseEscape;
     private stopTracking;
     private readonly destroyRef;
     /** Trạng thái mở ở lượt chạy trước — để `effect` chỉ phát khi ĐỔI. */
@@ -3398,7 +3604,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAutocomplete, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAutocomplete, "ol-autocomplete", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "createOption": "createOption"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAutocomplete, "ol-autocomplete", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; "matchTriggerWidth": { "alias": "matchTriggerWidth"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "createOption": "createOption"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate"], never, true, never>;
 }
 
 declare class OlKbd {
@@ -3467,6 +3673,16 @@ type OlModalRole = 'dialog' | 'alertdialog';
 declare class OlModal {
     private readonly focusTrap;
     private readonly destroyRef;
+    private readonly overlayContainer;
+    /**
+     * Hàm gỡ khỏi ngăn xếp Escape. `null` khi modal đang đóng.
+     *
+     * Modal KHÔNG gọi `overlayContainer.attach()` — nó nằm trong cây DOM của
+     * chính nó chứ không treo ra `<body>`. Nhưng vẫn phải vào ngăn xếp Escape,
+     * nếu không lớp nổi mở bên trong nó (datepicker, dropdown) sẽ kéo nó đóng
+     * theo khi nhấn Escape.
+     */
+    private releaseEscape;
     private readonly panel;
     /**
      * Bậc thẻ tiêu đề (h1–h6). Mặc định 3 — giữ nguyên bậc đang chạy.
@@ -3493,7 +3709,6 @@ declare class OlModal {
     constructor();
     readonly placementClasses: _angular_core.Signal<"items-start justify-start p-4" | "items-start justify-center p-4" | "items-start justify-end p-4" | "items-end justify-start p-4" | "items-end justify-center p-4" | "items-end justify-end p-4" | "items-center justify-center p-4">;
     readonly sizeClasses: _angular_core.Signal<"max-w-md" | "max-w-4xl" | "max-w-6xl" | "max-w-7xl" | "max-w-2xl">;
-    handleEscapeKey(): void;
     onBackdropClick(event: MouseEvent): void;
     show(): void;
     hide(): void;
@@ -3518,11 +3733,44 @@ declare class OlModalHeader {
      */
     readonly headingLevel: _angular_core.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
     readonly heading: _angular_core.InputSignal<string>;
+    /**
+     * Icon đầu tiêu đề. Rỗng thì KHÔNG dựng khung — không để lại thẻ trống.
+     *
+     * Figma `Type=Icon + Heading & helper text` (#1149:71412) vẽ khung 48px bo
+     * 12px, icon 28px bên trong. Đó đúng là `ol-icon-shape` size `lg`, nên dùng
+     * lại thay vì tự vẽ khung.
+     *
+     * `color="white"` chứ KHÔNG `gray`: Figma bind nền
+     * `bg-neutral-primary-medium` (trắng) kèm viền `border-default-medium`, mà
+     * trong `ol-icon-shape` chỉ nhánh `white` có cặp đó — `gray` ra nền xám đặc
+     * và KHÔNG viền. Đo /modal lượt đầu: nền rgb(243,244,246), viền 0px.
+     */
+    readonly icon: _angular_core.InputSignal<string>;
+    /**
+     * Mô tả phụ dưới tiêu đề.
+     *
+     * Tên `description` theo `ol-alert-dialog` — thứ dựng trên chính `ol-modal`
+     * — và `ol-empty`. `helperText` mang nghĩa "chú thích dưới ô nhập" ở họ form
+     * (16 component dùng), đặt cho tiêu đề hộp thoại là lệch nghĩa.
+     */
+    readonly description: _angular_core.InputSignal<string>;
+    /** @deprecated Dùng `description`. Giữ để không phá mã đang chạy. */
     readonly supportingText: _angular_core.InputSignal<string>;
+    /** @deprecated Dùng `description`. Tên cũ của `ol-drawer-header`. */
+    readonly helperText: _angular_core.InputSignal<string>;
+    /**
+     * Cái nào được TRUYỀN thì thắng — không phụ thuộc giá trị.
+     *
+     * `ol-badge` từng hoà giải hai input cùng nghĩa bằng cách so với giá trị mặc
+     * định (`theme` thắng trừ khi nó bằng `'gray'`), nên truyền cả hai thì một
+     * cái bị nuốt im lặng. Ở đây chuỗi rỗng là "không truyền", nên chỉ cần lấy
+     * cái đầu tiên khác rỗng.
+     */
+    readonly descriptionText: _angular_core.Signal<string>;
     readonly showClose: _angular_core.InputSignal<boolean>;
     readonly closeClick: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlModalHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlModalHeader, "ol-modal-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "supportingText": { "alias": "supportingText"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlModalHeader, "ol-modal-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "supportingText": { "alias": "supportingText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, ["*"], true, never>;
 }
 
 /** Khớp trục `Type` của Figma ol-modal-footer (node 1149:71444). */
@@ -3533,9 +3781,15 @@ type ModalFooterLayout = 'buttons' | 'three-buttons' | 'buttons-links' | 'pagina
  * Nút thật do nơi dùng truyền vào qua <ng-content>; component lo bố cục.
  *
  * KHÔNG lắp vào slot `[footer]` của `ol-modal`. Slot đó ĐÃ nằm sẵn trong một
- * khung `p-5 border-t bg-neutral-secondary` do chính `ol-modal` dựng, nên lắp
- * thêm component này vào là LỒNG HAI KHUNG. Đo /modal (2026-09-16): đệm cộng
- * dồn 20 + 20 = 40px, hai viền trên 1px chồng nhau, nền lặp hai lần.
+ * khung do chính `ol-modal` dựng, nên lắp thêm component này vào là LỒNG HAI
+ * KHUNG. Đo /modal (2026-09-16, khi cả hai còn `p-5`): đệm cộng dồn 20 + 20 =
+ * 40px, hai viền trên chồng nhau, nền lặp hai lần.
+ *
+ * Từ 2026-09-23 cả hai khung đều PHẲNG (không viền, không nền) nên lỗi lồng
+ * khung KHÓ THẤY hơn hẳn — chỉ còn đệm cộng dồn 12 + 12 = 24px. Vì vậy cả hai
+ * khung mang thuộc tính dấu `footer-frame`, và spec đếm số thẻ mang dấu đó
+ * phải bằng 1. Neo vào dấu chứ không vào `p-3`: đổi con số đệm là việc thiết
+ * kế bình thường, không nên làm đỏ một spec vốn gác chuyện khác.
  *
  * Dùng nó khi tự dựng hộp thoại (không qua `ol-modal`), hoặc trong `ol-drawer`
  * — `ol-drawer` chỉ có `<ng-content />` TRẦN nên ghép vừa khít. Đó là lý do
@@ -3595,10 +3849,11 @@ declare class OlNavDropdown {
     readonly alignRight: _angular_core.InputSignal<boolean>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     private readonly elementRef;
+    private readonly overlayContainer;
+    constructor();
     toggle(): void;
     close(): void;
     handleClickOutside(event: MouseEvent): void;
-    handleEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlNavDropdown, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlNavDropdown, "ol-nav-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "alignRight": { "alias": "alignRight"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=trigger], [trigger]", "*"], true, never>;
 }
@@ -4074,17 +4329,218 @@ declare class OlRating {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRating, "ol-rating", never, { "rating": { "alias": "rating"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "score": { "alias": "score"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "minLabel": { "alias": "minLabel"; "required": false; "isSignal": true; }; "maxLabel": { "alias": "maxLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+/**
+ * Kiểu dữ liệu cho `ol-app-nav` — menu điều hướng Ôn Luyện.
+ *
+ * Tách riêng khỏi component để nơi dùng khai được danh sách menu ở bất kỳ đâu:
+ * hằng số trong mã, tệp JSON, hoặc trả về từ API theo quyền tài khoản. Component
+ * KHÔNG nhúng sẵn danh sách nào — ba quyền Học sinh · Giáo viên · Phụ huynh đều
+ * là dữ liệu truyền vào.
+ *
+ * Figma `ol-app-nav` (#5303:30109) mô tả ba quyền, nhưng đó là NỘI DUNG mẫu,
+ * không phải ràng buộc của component. Thêm quyền thứ tư chỉ là thêm một mảng.
+ */
+/** Một mục trong menu. */
+interface AppNavItem {
+    /**
+     * Khoá định danh, dùng để đánh dấu mục đang chọn.
+     *
+     * Tách khỏi `route` vì một mục có thể không có đường dẫn (mở hộp thoại, gọi
+     * hàm), và hai mục có thể trỏ cùng route với tham số khác nhau.
+     */
+    id: string;
+    /** Chữ hiển thị. Ở trạng thái thu gọn, chữ này thành tên trợ năng. */
+    label: string;
+    /**
+     * Nhãn rút gọn cho chỗ hẹp — navbar đáy trên mobile.
+     *
+     * Đo ở 375px: navbar 5 ô, mỗi ô 75px. Nhãn dài hơn ~10 ký tự bị cắt cụt
+     * ("Lịch học trực tuyến" cần 95px), và 8/15 nhãn của ba quyền mẫu vượt
+     * ngưỡng đó — tức không phải ca hiếm.
+     *
+     * Rút tự động bằng thuật toán ra chữ vô nghĩa, nên để nơi dùng tự đặt.
+     * Bỏ trống thì dùng `label`; chỗ hẹp vẫn nên đặt cho chắc.
+     *
+     * KHÔNG thay `label` ở tooltip và trợ năng — hai chỗ đó vẫn đọc tên đầy đủ.
+     */
+    shortLabel?: string;
+    /** Tên icon theo `OlIconService` — dạng ngắn (`star`) hoặc có tiền tố bộ. */
+    icon: string;
+    /** Đường dẫn router. Bỏ trống thì mục chỉ phát sự kiện `itemClick`. */
+    route?: string;
+    /** Huy hiệu đếm bên phải nhãn, ví dụ số tin chưa đọc. */
+    badge?: string | number;
+    /** Mờ 40% và không bấm được — theo Figma State=Disabled. */
+    disabled?: boolean;
+}
+/**
+ * Một nhóm mục. Figma chia menu làm hai phần, ngăn bằng một đường kẻ:
+ *
+ *   `main`   phần trên — nghiệp vụ chính, chiếm hết chỗ trống
+ *   `footer` phần dưới — tiện ích, luôn nằm sát thẻ tài khoản
+ *
+ * Dùng `section` chứ không dựa vào thứ tự mảng: nơi dùng khai một danh sách
+ * phẳng, component tự tách hai vùng.
+ */
+interface AppNavGroup {
+    section: 'main' | 'footer';
+    items: AppNavItem[];
+}
+/** Thẻ tài khoản dưới cùng. */
+interface AppNavUser {
+    name: string;
+    /** Dòng phụ — Figma dùng email, nhưng nơi dùng đặt gì cũng được. */
+    subtitle?: string;
+    /** Ảnh đại diện. Bỏ trống thì `ol-avatar` tự dựng chữ cái đầu từ `name`. */
+    avatarSrc?: string;
+}
+/**
+ * Trọn bộ dữ liệu một menu — đúng thứ nơi dùng nạp từ JSON.
+ *
+ * ```ts
+ * const menuHocSinh: AppNavConfig = {
+ *   groups: [
+ *     { section: 'main', items: [{ id: 'lop-hoc-so', label: 'Lớp học số', icon: 'calendar-add' }] },
+ *     { section: 'footer', items: [{ id: 'ho-tro', label: 'Hướng dẫn & Hỗ trợ', icon: 'question-circle' }] },
+ *   ],
+ *   user: { name: 'Nguyễn Nhật Linh', subtitle: 'hocsinh.demo@onluyen.vn' },
+ * };
+ * ```
+ */
+interface AppNavConfig {
+    groups: AppNavGroup[];
+    user?: AppNavUser;
+}
+
+/**
+ * `ol-app-nav` — menu điều hướng dọc của Ôn Luyện.
+ *
+ * Figma `ol-app-nav` (#5303:30109), 6 biến thể: 3 quyền × 2 trạng thái.
+ *
+ * ## Khác gì `ol-sidebar`
+ *
+ * `ol-sidebar` là thanh bên ĐA DỤNG: nền sáng theo token, nhận nội dung tuỳ ý
+ * qua `ng-content`, có menu con accordion. Component này là thanh điều hướng
+ * RIÊNG của sản phẩm Ôn Luyện: nền gradient navy cố định, cấu trúc chốt sẵn
+ * (logo → menu chính → đường kẻ → menu phụ → thẻ tài khoản), nhận dữ liệu qua
+ * một đối tượng thay vì qua slot.
+ *
+ * Không gộp hai cái làm một: gộp thì `ol-sidebar` phải mang theo nền gradient
+ * và bố cục ba vùng mà 90% nơi dùng không cần.
+ *
+ * ## Dữ liệu từ ngoài, không nhúng cứng
+ *
+ * Ba quyền trong Figma là NỘI DUNG mẫu. Component nhận `config` — nơi dùng nạp
+ * từ hằng số, tệp JSON, hay API đều được. Thêm quyền thứ tư chỉ là thêm một
+ * mảng, không phải sửa component.
+ *
+ * ## Nền gradient nằm ngoài thang token
+ *
+ * Figma chốt `linear-gradient(164.52deg, #445A9A, #0F2977)`. Hai màu này không
+ * có trong `primitives.css` và cũng không nên có — chúng là bản sắc của MỘT
+ * sản phẩm, không phải bậc màu dùng chung. Khai biến cục bộ trong template.
+ *
+ * Hệ quả: chữ trên nền này luôn trắng, không đổi theo chế độ sáng/tối. Đúng
+ * như Figma mô tả ("dùng trên nền tối, chữ và biểu tượng đều `text-white`").
+ */
+declare class OlAppNav {
+    /** Danh sách menu và thẻ tài khoản. Xem `AppNavConfig`. */
+    readonly config: _angular_core.InputSignal<AppNavConfig>;
+    /**
+     * Thu gọn còn 70px, chỉ hiện icon.
+     *
+     * `model()` để nơi dùng bind hai chiều `[(collapsed)]` — nút thu gọn thường
+     * nằm ngoài component (trên thanh header), nhưng cũng có nơi tự điều khiển.
+     */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * Mục đang chọn, theo `id`.
+     *
+     * Dùng khi menu KHÔNG đi qua router — ví dụ một trang đơn đổi nội dung bằng
+     * signal. Có `route` thì `routerLinkActive` tự lo, không cần đặt cái này.
+     */
+    readonly activeId: _angular_core.InputSignal<string | null>;
+    /** Ảnh logo. Bỏ trống thì dựng chữ "Ôn luyện" bằng text. */
+    readonly logoSrc: _angular_core.InputSignal<string>;
+    /** Chiều rộng khi mở. Figma: 270px. */
+    readonly width: _angular_core.InputSignal<string>;
+    /** Chiều rộng khi thu gọn. Figma: 70px. */
+    readonly collapsedWidth: _angular_core.InputSignal<string>;
+    /** Phát khi bấm một mục. Mục có `route` thì router đã lo điều hướng. */
+    readonly itemClick: _angular_core.OutputEmitterRef<AppNavItem>;
+    /** Phát khi bấm thẻ tài khoản — nơi dùng mở menu đổi tài khoản, đăng xuất. */
+    readonly userClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Hiện thanh kéo (rail) ở mép phải để thu gọn / mở lại.
+     *
+     * Tắt mặc định vì nó chỉ hợp khi menu đứng cạnh nội dung trong một layout
+     * thật. Dùng menu rời (như trang docs) thì thanh này lơ lửng vô nghĩa.
+     */
+    readonly showRail: _angular_core.InputSignal<boolean>;
+    /** Chữ trên tooltip của thanh kéo, đổi theo trạng thái. */
+    readonly railLabel: _angular_core.Signal<"Mở rộng" | "Thu gọn">;
+    /** Mục của phần trên. */
+    readonly mainItems: _angular_core.Signal<AppNavItem[]>;
+    /** Mục của phần dưới, nằm sát thẻ tài khoản. */
+    readonly footerItems: _angular_core.Signal<AppNavItem[]>;
+    /** Đường kẻ chỉ vẽ khi phần dưới có mục — không thì thừa một vạch. */
+    readonly showDivider: _angular_core.Signal<boolean>;
+    readonly navWidth: _angular_core.Signal<string>;
+    /**
+     * Class cho một mục, theo trạng thái.
+     *
+     * Figma `ol-app-sidebar-item` (#5301:338): cao 44, bo 12, đệm 10, khe 8.
+     *
+     *   Initial   trong suốt
+     *   Hover     nền brand/600
+     *   Active    nền bg-warning, chữ đậm
+     *   Disabled  mờ 40%
+     *
+     * Gộp vào MỘT chuỗi thay vì nhiều `[class.x]`: hai binding cùng tên thuộc
+     * tính thì cái sau thắng, cái trước mất im lặng.
+     */
+    itemClasses(item: AppNavItem): string;
+    /**
+     * Chữ cái đầu cho ảnh đại diện, khi không có ảnh.
+     *
+     * `ol-avatar` IN NGUYÊN chuỗi truyền vào `text` chứ không tự cắt — truyền cả
+     * họ tên thì nó hiện trọn tên trong vòng tròn 40px. Lấy chữ cái đầu của HAI
+     * từ CUỐI: tên Việt để họ trước, "Nguyễn Nhật Linh" phải ra "NL" chứ không
+     * phải "NN".
+     */
+    readonly userInitials: _angular_core.Signal<string>;
+    onItemClick(item: AppNavItem): void;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAppNav, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAppNav, "ol-app-nav", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "showRail": { "alias": "showRail"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "itemClick": "itemClick"; "userClick": "userClick"; }, never, never, true, never>;
+}
+
 declare class OlSidebar {
     readonly collapsed: _angular_core.ModelSignal<boolean>;
     readonly width: _angular_core.InputSignal<string>;
     readonly collapsedWidth: _angular_core.InputSignal<string>;
     readonly collapsible: _angular_core.InputSignal<boolean>;
     readonly bordered: _angular_core.InputSignal<boolean>;
+    /**
+     * Hiện thanh kéo ở mép phải để thu gọn / mở rộng.
+     *
+     * Mặc định TẮT: `toggle()` vốn để nơi dùng tự dựng nút bên ngoài, bật sẵn
+     * sẽ thêm một nút vào mọi sidebar đang chạy mà không ai yêu cầu.
+     *
+     * Thanh này ẩn dưới `md` — ở màn hẹp sidebar thường được thay bằng ngăn kéo
+     * trượt, và một vạch 8px cạnh mép màn hình rất khó trúng bằng ngón tay.
+     */
+    readonly showRail: _angular_core.InputSignal<boolean>;
+    /**
+     * Chữ trên tooltip của thanh kéo — theo trạng thái SẼ TỚI, không phải trạng
+     * thái đang đứng. Người dùng đọc nhãn để biết bấm vào thì được gì.
+     */
+    readonly railLabel: _angular_core.Signal<"Mở rộng" | "Thu gọn">;
     readonly currentWidth: _angular_core.Signal<string>;
     readonly sidebarClasses: _angular_core.Signal<string>;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSidebar, "ol-sidebar", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[slot=header], [header]", "*", "[slot=footer], [footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSidebar, "ol-sidebar", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "showRail": { "alias": "showRail"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[slot=header], [header]", "*", "[slot=footer], [footer]"], true, never>;
 }
 
 declare class OlSidebarItem {
@@ -4096,7 +4552,7 @@ declare class OlSidebarItem {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly icon: _angular_core.InputSignal<string | null>;
     readonly badge: _angular_core.InputSignal<string | number | null>;
-    readonly badgeTheme: _angular_core.InputSignal<BadgeTheme>;
+    readonly badgeColor: _angular_core.InputSignal<BadgeColor>;
     readonly active: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly dot: _angular_core.InputSignal<boolean>;
@@ -4106,7 +4562,7 @@ declare class OlSidebarItem {
      */
     readonly itemClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSidebarItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSidebarItem, "ol-sidebar-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTheme": { "alias": "badgeTheme"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSidebarItem, "ol-sidebar-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class OlSidebarGroup {
@@ -4119,7 +4575,7 @@ declare class OlSidebarSubmenu {
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string | null>;
     readonly badge: _angular_core.InputSignal<string | number | null>;
-    readonly badgeTheme: _angular_core.InputSignal<BadgeTheme>;
+    readonly badgeColor: _angular_core.InputSignal<BadgeColor>;
     readonly isOpen: _angular_core.ModelSignal<boolean>;
     readonly active: _angular_core.InputSignal<boolean>;
     /**
@@ -4129,7 +4585,7 @@ declare class OlSidebarSubmenu {
     readonly triggerClasses: _angular_core.Signal<string>;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSidebarSubmenu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSidebarSubmenu, "ol-sidebar-submenu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTheme": { "alias": "badgeTheme"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSidebarSubmenu, "ol-sidebar-submenu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -4233,6 +4689,10 @@ interface SpeedDialAction {
 
 declare class OlSpeedDial {
     private readonly elementRef;
+    private readonly overlayContainer;
+    /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi đang đóng. */
+    private releaseEscape;
+    constructor();
     readonly direction: _angular_core.InputSignal<SpeedDialDirection>;
     readonly type: _angular_core.InputSignal<SpeedDialType>;
     readonly trigger: _angular_core.InputSignal<SpeedDialTrigger>;
@@ -4263,7 +4723,6 @@ declare class OlSpeedDial {
     onMouseLeave(): void;
     onBackdropMouseEnter(): void;
     onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSpeedDial, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSpeedDial, "ol-speed-dial", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "onOpen": "onOpen"; "onClose": "onClose"; "actionClick": "actionClick"; }, never, ["*"], true, never>;
 }
@@ -4469,7 +4928,7 @@ declare class OlTabItem {
     readonly icon: _angular_core.InputSignal<string | null>;
     readonly avatar: _angular_core.InputSignal<string | null>;
     readonly badge: _angular_core.InputSignal<string | number | null>;
-    readonly badgeTheme: _angular_core.InputSignal<BadgeTheme>;
+    readonly badgeColor: _angular_core.InputSignal<BadgeColor>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly displayLabel: _angular_core.Signal<string>;
     readonly displaySubtitle: _angular_core.Signal<string>;
@@ -4494,7 +4953,7 @@ declare class OlTabItem {
      */
     readonly hasTabRole: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTabItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTabItem, "ol-tab-item", never, { "tabId": { "alias": "tabId"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTheme": { "alias": "badgeTheme"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTabItem, "ol-tab-item", never, { "tabId": { "alias": "tabId"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -4869,12 +5328,12 @@ declare class OlBottomNavItem {
     readonly icon: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
     readonly badge: _angular_core.InputSignal<string | number | null>;
-    readonly badgeTheme: _angular_core.InputSignal<BadgeTheme>;
+    readonly badgeColor: _angular_core.InputSignal<BadgeColor>;
     readonly isCenterAction: _angular_core.InputSignal<boolean>;
     readonly active: _angular_core.InputSignal<boolean>;
     readonly itemClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlBottomNavItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBottomNavItem, "ol-bottom-nav-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTheme": { "alias": "badgeTheme"; "required": false; "isSignal": true; }; "isCenterAction": { "alias": "isCenterAction"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBottomNavItem, "ol-bottom-nav-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "isCenterAction": { "alias": "isCenterAction"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type StepState = 'initial' | 'active' | 'completed' | 'error' | 'disabled';
@@ -4938,7 +5397,7 @@ interface OlTreeNode {
     icon?: string;
     count?: number;
     badge?: string;
-    badgeTheme?: 'brand' | 'green' | 'yellow' | 'red' | 'gray';
+    badgeColor?: 'brand' | 'green' | 'yellow' | 'red' | 'gray';
     children?: OlTreeNode[];
     expanded?: boolean;
     selected?: boolean;
@@ -4966,6 +5425,25 @@ declare class OlTree {
      * được truyền xuống MỌI cấp của cây đệ quy.
      */
     nodeTemplate?: TemplateRef<unknown>;
+    /**
+     * Nút/hành động gắn ở CUỐI mỗi hàng, khai bằng `#actionsTemplate`:
+     *
+     * ```html
+     * <ol-tree [nodes]="nodes">
+     *   <ng-template #actionsTemplate let-node>
+     *     <ol-button size="xs" color="ghost" (btnClick)="sua(node)">Sửa</ol-button>
+     *   </ng-template>
+     * </ol-tree>
+     * ```
+     *
+     * Khác `#nodeTemplate` ở chỗ nó **cộng thêm** chứ không thay thế: icon, nhãn,
+     * count và badge mặc định vẫn nguyên. `#nodeTemplate` là all-or-nothing —
+     * bật lên thì phải tự vẽ lại cả bốn thứ đó, nên chỉ muốn thêm một nút ở cuối
+     * mà phải dùng nó là chép thừa.
+     *
+     * Dùng được ĐỒNG THỜI với `#nodeTemplate`: nút vẫn hiện ở cả hai nhánh.
+     */
+    actionsTemplate?: TemplateRef<unknown>;
     readonly checkable: _angular_core.InputSignal<boolean>;
     readonly selectionMode: _angular_core.InputSignal<OlTreeSelectionMode>;
     readonly bordered: _angular_core.InputSignal<boolean>;
@@ -5012,7 +5490,7 @@ declare class OlTree {
     private setSelectedNodeSingle;
     private cloneTree;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTree, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTree, "ol-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; "isSignal": true; }; }, { "nodes": "nodesChange"; "nodeSelect": "nodeSelect"; "nodeCheck": "nodeCheck"; }, ["nodeTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTree, "ol-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; "isSignal": true; }; }, { "nodes": "nodesChange"; "nodeSelect": "nodeSelect"; "nodeCheck": "nodeCheck"; }, ["nodeTemplate", "actionsTemplate"], never, true, never>;
 }
 
 type OlTreeNodeSelectionMode = 'single' | 'multiple';
@@ -5032,6 +5510,13 @@ declare class OlTreeNodeItem {
      * BUG-017 — họ không có cách nào biết phải khai lại những thứ đó.
      */
     readonly nodeTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    /**
+     * Template cho phần CUỐI hàng — nút, menu, hành động.
+     *
+     * Cộng thêm chứ không thay thế: dựng NGOÀI cặp `@if (nodeTemplate())` nên
+     * hiện ở cả hai nhánh, dùng chung được với `nodeTemplate`.
+     */
+    readonly actionsTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     readonly checkable: _angular_core.InputSignal<boolean>;
     readonly selectionMode: _angular_core.InputSignal<OlTreeNodeSelectionMode>;
     readonly toggleIcon: _angular_core.InputSignal<OlTreeNodeToggleIcon>;
@@ -5055,6 +5540,23 @@ declare class OlTreeNodeItem {
     protected readonly ariaLevel: _angular_core.Signal<number>;
     /** `aria-expanded` CHỈ đặt cho node có con; node lá để `null`. */
     protected readonly ariaExpanded: _angular_core.Signal<boolean | null>;
+    /**
+     * Ngữ cảnh cho CẢ HAI template. Một `computed` dùng chung chứ không viết
+     * object thẳng trong template: viết thẳng thì mỗi lần dò thay đổi lại sinh
+     * một object mới, `ngTemplateOutlet` thấy khác tham chiếu nên dựng lại nội
+     * dung — mất cả trạng thái bên trong nút người dùng đặt vào.
+     *
+     * `$implicit` cho `let-node`; `node` cho `let-n="node"`. Ba khoá còn lại bắt
+     * kịp `ol-autocomplete` (đã có `selected`) và mở thêm `level`/`expanded` —
+     * hàng cây thường cần biết mình sâu bao nhiêu để thụt chữ hay đổi cỡ.
+     */
+    protected readonly tplContext: _angular_core.Signal<{
+        $implicit: OlTreeNode;
+        node: OlTreeNode;
+        level: number;
+        selected: boolean;
+        expanded: boolean;
+    }>;
     constructor();
     /**
      * Nút cha có con chọn một phần thì ô của nó phải là dấu gạch.
@@ -5075,7 +5577,7 @@ declare class OlTreeNodeItem {
     handleClick(): void;
     handleCheck(checked: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTreeNodeItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTreeNodeItem, "ol-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "tabbableId": { "alias": "tabbableId"; "required": false; "isSignal": true; }; "focusedId": { "alias": "focusedId"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeCheck": "nodeCheck"; "toggleExpand": "toggleExpand"; "nodeFocus": "nodeFocus"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTreeNodeItem, "ol-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; "actionsTemplate": { "alias": "actionsTemplate"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "tabbableId": { "alias": "tabbableId"; "required": false; "isSignal": true; }; "focusedId": { "alias": "focusedId"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeCheck": "nodeCheck"; "toggleExpand": "toggleExpand"; "nodeFocus": "nodeFocus"; }, never, never, true, never>;
 }
 
 type ChartType = 'line' | 'smooth-line' | 'area' | 'smooth-area' | 'step-line' | 'bar' | 'stacked-bar' | 'horizontal-bar' | 'stacked-horizontal-bar' | 'diverging-bar' | 'pie' | 'donut' | 'rose' | 'radar' | 'gauge' | 'radial' | 'scatter' | 'heatmap' | 'boxplot';
@@ -5574,84 +6076,6 @@ declare class OlJumbotron {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlJumbotron, "ol-jumbotron", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=badge-icon]", "[slot=actions]", "*"], true, never>;
 }
 
-/**
- * Abstract base class cho các overlay components (Modal, Drawer, Popover)
- * Cung cấp functionality chung cho việc mở/đóng và xử lý interactions
- */
-declare abstract class OlOverlayBase implements OnDestroy {
-    /**
-     * Signal tracking trạng thái mở/đóng của overlay
-     */
-    isOpen: WritableSignal<boolean>;
-    /**
-     * Signal cho việc hiển thị backdrop
-     */
-    backdrop: WritableSignal<boolean>;
-    /**
-     * Signal cho phép đóng overlay khi nhấn Escape
-     */
-    closeOnEscape: WritableSignal<boolean>;
-    /**
-     * Signal cho phép đóng overlay khi click vào backdrop
-     */
-    closeOnBackdrop: WritableSignal<boolean>;
-    /**
-     * Signal tracking animation state
-     */
-    protected animating: WritableSignal<boolean>;
-    /** Handle của setTimeout animation — lưu lại để huỷ khi destroy, tránh
-     *  callback chạy trên instance đã chết. */
-    private animationTimer;
-    constructor();
-    /**
-     * Mở overlay với optional animation
-     */
-    open(): void;
-    /**
-     * Đóng overlay với optional animation
-     */
-    close(): void;
-    /**
-     * Toggle trạng thái overlay
-     */
-    toggle(): void;
-    /**
-     * Xử lý sự kiện click vào backdrop
-     */
-    handleBackdropClick(event: MouseEvent): void;
-    /**
-     * Xử lý sự kiện nhấn phím Escape
-     */
-    protected handleEscape: (event: KeyboardEvent) => void;
-    /**
-     * Lifecycle hook được gọi khi overlay mở
-     * Override trong subclass để customize behavior
-     */
-    protected onOpen(): void;
-    /**
-     * Lifecycle hook được gọi khi overlay đóng
-     * Override trong subclass để customize behavior
-     */
-    protected onClose(): void;
-    /**
-     * Thêm event listener cho phím Escape
-     */
-    private addEscapeListener;
-    /**
-     * Xóa event listener cho phím Escape
-     */
-    private removeEscapeListener;
-    /**
-     * Cleanup khi component bị destroy.
-     * Gọi tự động qua ngOnDestroy — trước đây hàm này tồn tại nhưng không ai gọi,
-     * nên component destroy lúc đang mở sẽ để lại listener keydown trên document.
-     */
-    protected cleanup(): void;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlOverlayBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OlOverlayBase, never, never, {}, {}, never, never, true, never>;
-}
-
 /**
  * Standalone Backdrop Component
  * Hiển thị overlay backdrop với animation fade in/out và dark mode support
@@ -5923,6 +6347,56 @@ declare class OlOverlayContainer {
      * Trả về hàm hoàn tác — gọi khi lớp đóng để trả phần tử về chỗ cũ.
      */
     attach(el: HTMLElement): () => void;
+    /**
+     * Các lớp nổi ĐANG MỞ, xếp theo thứ tự mở — phần tử cuối là lớp trên cùng.
+     *
+     * Dùng mảng chứ không `Set`: thứ tự chính là thông tin cần, và một lớp không
+     * thể mở hai lần nên không sợ trùng.
+     */
+    private readonly openLayers;
+    /** Trình nghe Escape duy nhất, gắn khi có lớp đầu tiên mở. */
+    private escapeListener;
+    /**
+     * Đăng ký một lớp nổi vừa mở. Trả hàm gỡ — gọi khi lớp đóng.
+     *
+     * ## Vì sao cần
+     *
+     * Trước đây mỗi component tự gắn `@HostListener('document:keydown.escape')`.
+     * Không ai chặn lan truyền và không ai biết ai, nên **một phím Escape đóng
+     * MỌI lớp đang mở**: mở datepicker trong modal rồi nhấn Escape thì cả hai
+     * cùng đóng, người dùng mất luôn hộp thoại đang điền dở.
+     *
+     * Ở đây một trình nghe duy nhất, chỉ gọi `close()` của lớp **trên cùng**.
+     * Nhấn lần nữa mới tới lớp dưới — đúng cách người dùng chờ đợi.
+     *
+     * ## Dùng thế nào
+     *
+     * ```ts
+     * private releaseEscape: (() => void) | null = null;
+     *
+     * open(): void {
+     *   this.releaseEscape = this.overlayContainer.register(() => this.close());
+     * }
+     *
+     * close(): void {
+     *   this.releaseEscape?.();
+     *   this.releaseEscape = null;
+     * }
+     * ```
+     *
+     * Hàm gỡ **an toàn khi gọi nhiều lần** — `close()` thường chạy cả từ phím
+     * Escape lẫn từ nút đóng, và cả hai đường đều gọi nó.
+     */
+    register(close: () => void): () => void;
+    /**
+     * Gắn trình nghe khi có lớp đầu tiên, không gắn sẵn từ lúc dựng service.
+     *
+     * Không có lớp nào mở mà vẫn nghe phím là bắt mọi lần nhấn Escape của cả
+     * ứng dụng — kể cả khi người dùng đang gõ trong ô nhập bình thường.
+     */
+    private ensureEscapeListener;
+    /** Gỡ trình nghe khi lớp cuối cùng đóng — không để nó nghe vô ích. */
+    private teardownEscapeListenerIfIdle;
     /**
      * @deprecated Dùng `attach()`. Giữ lại vì đã publish trong
      * `@edmicro/olkit@1.1.1` — bỏ phương thức công khai là breaking change.
@@ -5932,6 +6406,6 @@ declare class OlOverlayContainer {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
-export { CHAT_BUBBLE_STATUS, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayBase, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay, stripDiacritics };
-export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, OlAvatarStatusPosition, OlBottomNavPosition, OlButtonType, OlCheckboxRadioFormAlign, OlCheckboxRadioGroupRole, OlDateRangePickerVariant, OlGalleryGap, OlGalleryRatio, OlHelperType, OlModalBackdrop, OlModalRole, OlSkeletonAnimation, OlSkeletonAspectRatio, OlSkeletonRounded, OlSkeletonType, OlSpeedDialTooltipPosition, OlTimepickerAddonType, OlToggleInputAlign, OlTreeNode, OlTreeNodeSelectionMode, OlTreeNodeToggleIcon, OlTreeSelectionMode, OlTreeToggleIcon, OtpInputSize, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SelectOption, SelectSize, SelectState, SeparatorOrientation, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TagInputSize, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToggleColor, TogglePosition, ToggleSize, YearCell };
+export { CHAT_BUBBLE_STATUS, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAppNav, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay, stripDiacritics };
+export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppNavConfig, AppNavGroup, AppNavItem, AppNavUser, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeColor, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, OlAvatarStatusPosition, OlBottomNavPosition, OlButtonType, OlCheckboxRadioFormAlign, OlCheckboxRadioGroupRole, OlDateRangePickerVariant, OlGalleryGap, OlGalleryRatio, OlHelperType, OlModalBackdrop, OlModalRole, OlSkeletonAnimation, OlSkeletonAspectRatio, OlSkeletonRounded, OlSkeletonType, OlSpeedDialTooltipPosition, OlTimepickerAddonType, OlToggleInputAlign, OlTreeNode, OlTreeNodeSelectionMode, OlTreeNodeToggleIcon, OlTreeSelectionMode, OlTreeToggleIcon, OtpInputSize, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SelectOption, SelectSize, SelectState, SeparatorOrientation, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TagInputSize, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToggleColor, TogglePosition, ToggleSize, YearCell };
 //# sourceMappingURL=edmicro-olkit.d.ts.map