@edmicro/olkit 1.1.1 → 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';
@@ -151,7 +151,13 @@ interface CommandGroup {
  * Phải xử lý `đ`/`Đ` riêng: chúng KHÔNG phải `d` cộng dấu phụ nên `NFD` không
  * tách ra được, `đăng nhập` sẽ không khớp `dang nhap` nếu bỏ bước này.
  */
-declare function boDau(chu: string): string;
+declare function stripDiacritics(text: string): string;
+/**
+ * @deprecated Dùng `stripDiacritics`. Giữ lại vì hàm này ĐÃ publish trong
+ * `@edmicro/olkit@1.1.1` (kiểm bằng `npm pack` rồi đọc `types/*.d.ts` — có
+ * trong danh sách export), bỏ đi là breaking change cho consumer.
+ */
+declare const boDau: typeof stripDiacritics;
 /**
  * Bảng lệnh ⌘K — gõ để tìm rồi nhảy thẳng tới nơi cần.
  *
@@ -168,6 +174,7 @@ declare function boDau(chu: string): string;
  */
 declare class OlCommand {
     private readonly focusTrap;
+    private readonly overlayContainer;
     private readonly destroyRef;
     private readonly panel;
     private readonly searchInput;
@@ -258,6 +265,38 @@ declare class OlButton {
      * Rỗng thì không phát ra thuộc tính, nút có chữ giữ nguyên tên từ nội dung.
      */
     readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Trạng thái mở/đóng của vùng mà nút này điều khiển.
+     *
+     * Cần vì đặt `[attr.aria-expanded]` thẳng lên `<ol-button>` **KHÔNG có tác
+     * dụng**: thuộc tính dừng ở thẻ bọc, không tới `<button>` bên trong — mà
+     * trình đọc màn hình đọc `<button>`. Đo `/collapse`: hai nút có
+     * `aria-expanded` trên host, `<button>` bên trong không có gì.
+     *
+     * Nhìn mã thì tưởng đã làm đúng trợ năng, nên đây là loại lỗi im lặng.
+     */
+    readonly ariaExpanded: _angular_core.InputSignal<boolean | null>;
+    /** `id` của vùng nội dung nút này điều khiển. Cùng lý do với `ariaExpanded`. */
+    readonly ariaControls: _angular_core.InputSignal<string>;
+    /** Trạng thái bật/tắt cho nút kiểu công tắc. Cùng lý do với `ariaExpanded`. */
+    readonly ariaPressed: _angular_core.InputSignal<boolean | null>;
+    /**
+     * Nội dung tooltip cho nút CHỈ-ICON, lấy từ `ariaLabel`.
+     *
+     * Đo 10 trang docs (BUG-018): **460 nút chỉ-icon, 0 nút câm** với trình đọc
+     * màn hình, nhưng **343 nút** có tên đọc được mà rê chuột không hiện gì.
+     * Chuẩn WAI-ARIA: nút chỉ-icon phải có nhãn NHÌN THẤY khi hover.
+     *
+     * Dùng `ariaLabel` sẵn có chứ không thêm input mới — cùng một thông tin.
+     *
+     * Chỉ bật cho `iconOnly`: nút có chữ đã tự hiện nghĩa, thêm tooltip lặp lại
+     * đúng dòng chữ đang nhìn là nhiễu.
+     *
+     * Rủi ro BUG-018 nêu ("chồng lên tooltip người dùng tự gắn") đã ĐO: hai
+     * directive lồng nhau, hover phần tử trong chỉ hiện MỘT tooltip vì
+     * `mouseenter` không nổi bọt. Xem `tooltip-nested.spec.ts`.
+     */
+    readonly tooltipText: _angular_core.Signal<string>;
     readonly btnClick: _angular_core.OutputEmitterRef<MouseEvent>;
     /**
      * Kích thước icon (px) theo bảng Figma ol-button.
@@ -268,7 +307,7 @@ declare class OlButton {
     readonly buttonClasses: _angular_core.Signal<string>;
     handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlButton, "ol-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "btnClick": "btnClick"; }, never, ["[leftIcon]", "[logo]", "*", "[rightIcon]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlButton, "ol-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; }, { "btnClick": "btnClick"; }, never, ["[leftIcon]", "[logo]", "*", "[rightIcon]"], true, never>;
 }
 
 type IconShapeSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
@@ -310,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
@@ -334,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>;
@@ -472,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';
 /**
@@ -485,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>;
@@ -501,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>;
     /**
@@ -513,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';
@@ -605,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';
@@ -661,7 +744,7 @@ declare class OlCard {
      * `flat` và `outline` đều được bảng API mô tả là "không bóng" — gộp một chỗ
      * để năm binding bóng không phải lặp lại điều kiện.
      */
-    readonly khongBong: _angular_core.Signal<boolean>;
+    readonly noShadow: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlCard, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCard, "ol-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "imgSrc": { "alias": "imgSrc"; "required": false; "isSignal": true; }; "imgAlt": { "alias": "imgAlt"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -733,22 +816,51 @@ declare class OlClipboard {
     readonly copied: _angular_core.WritableSignal<boolean>;
     /** Bao lâu thì nút quay lại biểu tượng sao chép, tính bằng mili giây. */
     readonly resetAfter: _angular_core.InputSignal<number>;
+    /**
+     * Tên đọc được cho nút. Nhánh "chưa sao chép" chỉ có SVG mang
+     * `aria-hidden="true"` nên nút HOÀN TOÀN CÂM với trình đọc màn hình — và đó
+     * là trạng thái người dùng thấy đầu tiên (BUG-013 mục 1b).
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Chuỗi báo đã sao chép. Bản cũ khoá cứng tiếng Anh `Copied!`. */
+    readonly copiedText: _angular_core.InputSignal<string>;
     copy(): void;
     private markCopied;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlClipboard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlClipboard, "ol-clipboard", never, { "targetValue": { "alias": "targetValue"; "required": false; "isSignal": true; }; "resetAfter": { "alias": "resetAfter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlClipboard, "ol-clipboard", never, { "targetValue": { "alias": "targetValue"; "required": false; "isSignal": true; }; "resetAfter": { "alias": "resetAfter"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "copiedText": { "alias": "copiedText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class OlCollapse {
     readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * `id` của vùng nội dung, để nút điều khiển bên ngoài trỏ tới bằng
+     * `aria-controls`.
+     *
+     * `ol-collapse` CHỈ bọc nội dung — nút bấm do người dùng tự đặt bên ngoài
+     * (xem demo `/collapse`), nên lib không gắn `aria-expanded` thay họ được.
+     * Cái lib làm được là cho vùng một `id` ổn định:
+     *
+     * ```html
+     * <ol-button [attr.aria-expanded]="!gap()" [attr.aria-controls]="noiDung.contentId()">
+     *   {{ gap() ? 'Mở ra' : 'Thu gọn' }}
+     * </ol-button>
+     * <ol-collapse #noiDung [(collapsed)]="gap">…</ol-collapse>
+     * ```
+     */
+    readonly contentId: _angular_core.InputSignal<string>;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlCollapse, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCollapse, "ol-collapse", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCollapse, "ol-collapse", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "contentId": { "alias": "contentId"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["*"], true, never>;
 }
 
 type DatepickerViewMode = 'day' | 'month' | 'year';
 type DatepickerSelectionMode = 'single' | 'range';
-type DatepickerSize = 'sm' | 'base' | 'lg';
+/**
+ * Thang cỡ khớp `ol-input` (`sm | base | lg | xl`) để đặt cạnh nhau không so
+ * le. Đo được trước khi thêm `xl`: `ol-input size="xl"` cao 52px mà datepicker
+ * không có cỡ tương ứng.
+ */
+type DatepickerSize = 'sm' | 'base' | 'lg' | 'xl';
 type DateRange = [Date | null, Date | null];
 interface DateCustomClass {
     date: Date;
@@ -864,14 +976,18 @@ declare class OlDatepicker implements ControlValueAccessor {
     /**
      * Đẩy khung lịch ra `<body>` thay vì để trong cây DOM của component.
      *
-     * Cần khi component nằm trong modal / drawer / bảng có `overflow: hidden`:
-     * khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING CONTEXT —
-     * z-index của lớp nổi không thoát ra được — và `overflow: hidden` CẮT luôn
-     * phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi cái thứ
-     * hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
+     * **Mặc định `'body'`** (từ bản này). Trước đây mặc định `null` — panel nằm
+     * trong cây DOM của component, nên hễ đặt vào modal / drawer / bảng có
+     * `overflow: hidden` là bị cắt, và người dùng phải tự biết mà bật. Đo
+     * /modal: khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING
+     * CONTEXT — z-index của lớp nổi không thoát ra được — và `overflow: hidden`
+     * CẮT luôn phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi
+     * cái thứ hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
      *
-     * Mặc định TẮT để không đổi hành vi mã đang chạy. Cùng tên và cùng ý nghĩa
-     * với `appendTo` của ng-select và PrimeNG.
+     * Đặt `null` để quay về hành vi cũ: cần khi CSS của nơi dùng nhắm vào panel
+     * qua cây DOM (`.form-cua-toi ol-select .panel`) — selector kiểu đó chết khi
+     * panel treo ra ngoài. Cùng tên và cùng ý nghĩa với `appendTo` của ng-select
+     * và PrimeNG.
      */
     readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly showFooter: _angular_core.InputSignal<boolean>;
@@ -884,17 +1000,55 @@ declare class OlDatepicker implements ControlValueAccessor {
     readonly formattedChange: _angular_core.OutputEmitterRef<string>;
     private readonly panel;
     private readonly overlayContainer;
-    private readonly positioning;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
-    private goPanel;
-    private ngatTheoDoi;
+    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;
     constructor();
-    readonly inputSizeClasses: _angular_core.Signal<"py-2 px-3 ps-9 text-xs rounded-lg" | "py-3.5 px-4 ps-11 text-base rounded-md" | "py-2.5 px-3.5 ps-10 text-sm rounded-md">;
+    /**
+     * Chiều cao khai bằng `h-*` CỐ ĐỊNH, không suy từ `py-*` + cỡ chữ.
+     *
+     * Bản cũ dùng `py-2 / py-2.5 / py-3.5` nên chiều cao phụ thuộc `line-height`
+     * của cỡ chữ và không bao giờ khớp thang `h-*` của họ form. Đo trên DOM thật
+     * (`/datepicker` và `/forms`, 8 ô nhập hiển thị):
+     *
+     * | cỡ   | datepicker cũ | ol-input | lệch |
+     * |------|---------------|----------|------|
+     * | sm   | 34px          | 36px     | −2   |
+     * | base | 42px          | 40px     | +2   |
+     * | lg   | 54px          | 48px     | +6   |
+     *
+     * Đặt cạnh nhau trong một hàng là thấy so le ngay, nặng nhất ở `lg`.
+     *
+     * Thang `9/10/12` là chuẩn CHUNG của họ form, không phải chép riêng của
+     * `ol-input`: `ol-timepicker` dùng `h-9/h-10/h-12`, `ol-select` dùng
+     * `min-h-9/min-h-10/min-h-12`. Datepicker là component DUY NHẤT lạc thang.
+     *
+     * 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<string>;
     /**
      * Cỡ icon lịch theo `size` của ô nhập.
      *
@@ -921,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>;
 }
@@ -956,14 +1109,18 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     /**
      * Đẩy khung lịch ra `<body>` thay vì để trong cây DOM của component.
      *
-     * Cần khi component nằm trong modal / drawer / bảng có `overflow: hidden`:
-     * khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING CONTEXT —
-     * z-index của lớp nổi không thoát ra được — và `overflow: hidden` CẮT luôn
-     * phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi cái thứ
-     * hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
+     * **Mặc định `'body'`** (từ bản này). Trước đây mặc định `null` — panel nằm
+     * trong cây DOM của component, nên hễ đặt vào modal / drawer / bảng có
+     * `overflow: hidden` là bị cắt, và người dùng phải tự biết mà bật. Đo
+     * /modal: khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING
+     * CONTEXT — z-index của lớp nổi không thoát ra được — và `overflow: hidden`
+     * CẮT luôn phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi
+     * cái thứ hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
      *
-     * Mặc định TẮT để không đổi hành vi mã đang chạy. Cùng tên và cùng ý nghĩa
-     * với `appendTo` của ng-select và PrimeNG.
+     * Đặt `null` để quay về hành vi cũ: cần khi CSS của nơi dùng nhắm vào panel
+     * qua cây DOM (`.form-cua-toi ol-select .panel`) — selector kiểu đó chết khi
+     * panel treo ra ngoài. Cùng tên và cùng ý nghĩa với `appendTo` của ng-select
+     * và PrimeNG.
      */
     readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly showFooter: _angular_core.InputSignal<boolean>;
@@ -974,13 +1131,20 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     readonly rangeChange: _angular_core.OutputEmitterRef<DateRange | null>;
     private readonly panel;
     private readonly overlayContainer;
-    private readonly positioning;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
-    private goPanel;
-    private ngatTheoDoi;
+    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();
@@ -990,7 +1154,30 @@ declare class OlDateRangePicker implements ControlValueAccessor {
      * trong khi ô nhập co giãn theo `inputSizeClasses()`.
      */
     readonly iconSize: _angular_core.Signal<"xs" | "sm" | "base">;
-    readonly inputSizeClasses: _angular_core.Signal<"py-2 px-3 text-xs rounded-lg" | "py-3.5 px-4 text-base rounded-md" | "py-2.5 px-3.5 text-sm rounded-md">;
+    /**
+     * Chiều cao `h-*` cố định — cùng luật với `ol-datepicker`, xem chú thích đầy
+     * đủ ở đó. Tài liệu BUG-019 chỉ nêu `ol-datepicker`, nhưng component này
+     * 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<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,
+     * không thuộc về input.
+     *
+     * Trước đây nhánh `joined` khoá cứng `text-sm py-2` nên `[size]` không có
+     * tác dụng gì. Đo /datepicker: `dual-inputs` ra 40px theo `h-10`, còn
+     * `joined` luôn **36px** ở mọi cỡ — suy từ `py-2` + cỡ chữ, không theo thang
+     * `h-*` của họ form. Đúng lỗi BUG-019 đã sửa cho `ol-datepicker`, sót lại ở
+     * nhánh này.
+     *
+     * Khung có `p-1` = 4px mỗi cạnh, nên input con lùi 8px để TỔNG chiều cao
+     * khớp thang: h-9 → h-7, h-10 → h-8, h-12 → h-10, h-13 → h-11.
+     */
+    readonly joinedWrapperClasses: _angular_core.Signal<"h-9" | "h-12" | "h-10" | "h-13">;
+    /** Input bên trong khung `joined` — trừ đi `p-1` của khung. */
+    readonly joinedInputClasses: _angular_core.Signal<"h-7 text-xs" | "h-10 text-base" | "h-11 text-base" | "h-8 text-sm">;
     writeValue(val: DateRange | null): void;
     registerOnChange(fn: (val: DateRange | null) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -1007,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>;
 }
@@ -1040,6 +1226,18 @@ declare class OlDatepickerHeader {
 declare class OlDayView {
     readonly state: OlDatepickerStateService;
     readonly customMatrix: _angular_core.InputSignal<DayCell[][] | null>;
+    /**
+     * Ghim chiều cao vùng lưới theo 6 hàng.
+     *
+     * Dùng khi popup hiện HAI tháng cạnh nhau: số hàng mỗi tháng khác nhau (4, 5
+     * hoặc 6) nên hai lịch cao lệch, lịch bên phải thò xuống dưới. Đo cặp
+     * 7+8/2025: tháng 7 cao 224px (5 hàng), tháng 8 cao 264px (6 hàng) — **lệch
+     * 40px**.
+     *
+     * Ghim chiều cao chứ KHÔNG đệm thêm hàng rỗng: hàng rỗng lại tái diễn đúng
+     * lỗi vừa sửa (dòng số mờ vô nghĩa dưới đáy lịch).
+     */
+    readonly fixedRows: _angular_core.InputSignal<boolean>;
     readonly daySelect: _angular_core.OutputEmitterRef<Date>;
     /** Nhãn thứ tiếng Việt theo Figma #1149:51169: CN · T2…T7. */
     readonly weekdays: string[];
@@ -1048,7 +1246,7 @@ declare class OlDayView {
     onMouseLeave(): void;
     getCellClasses(cell: DayCell): string[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDayView, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDayView, "ol-day-view", never, { "customMatrix": { "alias": "customMatrix"; "required": false; "isSignal": true; }; }, { "daySelect": "daySelect"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDayView, "ol-day-view", never, { "customMatrix": { "alias": "customMatrix"; "required": false; "isSignal": true; }; "fixedRows": { "alias": "fixedRows"; "required": false; "isSignal": true; }; }, { "daySelect": "daySelect"; }, never, never, true, never>;
 }
 
 declare class OlMonthView {
@@ -1089,6 +1287,67 @@ declare class OlDatepickerPopup {
     readonly showFooter: _angular_core.InputSignal<boolean>;
     readonly dualMonth: _angular_core.InputSignal<boolean>;
     readonly presets: _angular_core.InputSignal<DatepickerPreset[]>;
+    /**
+     * Lịch NHÚNG nằm trong luồng trang, không phải lớp nổi.
+     *
+     * Trần chiều cao và `overflow-y: auto` chỉ dành cho popup nổi — áp cho lịch
+     * nhúng là sai: nó ăn giá trị dự phòng `85svh` dù không ai đặt biến. Đo ở
+     * 414×500: lịch nhúng **bị cắt 56px**, footer chứa nút "Xác nhận" nằm NGOÀI
+     * khung, và nó mọc thanh cuộn riêng trong khi người dùng đáng lẽ chỉ cần cuộn
+     * trang như mọi nội dung khác.
+     */
+    readonly inline: _angular_core.InputSignal<boolean>;
+    /**
+     * Bề rộng màn tối thiểu để hiện hai lịch: hai lịch `w-63` (252px) + khe 24px
+     * + đệm 40px ≈ 570, làm tròn lên 600 cho chắc.
+     */
+    private static readonly MIN_WIDTH_TWO_MONTHS;
+    /**
+     * Bề rộng MÀN HÌNH.
+     *
+     * Đã thử đo popup và đo `#panel` bằng ResizeObserver — cả hai đều SAI vì
+     * chúng `absolute`/co theo nội dung, tạo vòng lặp phản hồi: hai lịch xuống
+     * dòng làm khung hẹp lại, khung hẹp lại không kéo được về một lịch. Đo thật:
+     * ở 1440px, đo popup ra 482 (vẫn 2 tháng xếp dọc), đo panel ra 440 (tụt về 1
+     * tháng dù màn rất rộng).
+     *
+     * Màn hình là thước ỔN ĐỊNH duy nhất ở đây — nó không phụ thuộc nội dung.
+     * Phần "chỗ thật còn lại bao nhiêu" vẫn do `flex-wrap` trong template lo, như
+     * chú thích ở đó đã nêu; hai cơ chế bổ sung nhau chứ không chống nhau:
+     * ngưỡng này cắt ca mobile (nơi hai lịch xếp dọc là không dùng được), còn
+     * `flex-wrap` lo ca khung cha hẹp trên desktop.
+     */
+    private readonly screenWidth;
+    /**
+     * `dualMonth` là ý định của người dùng, `showTwoMonths` là thứ VẼ ĐƯỢC.
+     *
+     * Đo ở 375×812: hai lịch + footer cao 690px trong khi chỗ trống dưới ô nhập
+     * chỉ ~320px — **49/70 ô ngày và toàn bộ nút "Xác nhận" nằm ngoài màn**,
+     * người dùng không chốt nổi dải ngày. Hẹp thì hiện một tháng, điều hướng
+     * bằng mũi tên vẫn đủ.
+     */
+    /**
+     * Trần chiều cao + cuộn CHỈ cho popup nổi.
+     *
+     * 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`).
+     */
+    readonly wrapperClasses: _angular_core.Signal<"" | "max-h-[var(--ol-dp-max-height,85svh)] overflow-y-auto overscroll-contain">;
+    /**
+     * Trần cho KHỐI LỊCH, để footer ghim lại còn vùng ngày cuộn.
+     *
+     * `wrapperClasses` đặt trần cho cả popup nên footer cuộn theo — đo
+     * /datepicker ở 1278px: footer cao 49px, đáy ở 383 trong khung 350, tràn
+     * 33px, nút "Xác nhận" phải cuộn mới thấy. Trần đặt thêm ở đây cho khối chứa
+     * `[lịch + footer]`, còn `overflow` nằm ở riêng vùng lịch bên trong.
+     *
+     * Trừ đi `p-3.5`/`sm:p-5` của wrapper: dùng `calc` thay số cứng vì đệm đổi
+     * theo breakpoint.
+     */
+    readonly calendarBlockClasses: _angular_core.Signal<"" | "max-h-[calc(var(--ol-dp-max-height,85svh)-2rem)] min-h-0">;
+    readonly showTwoMonths: _angular_core.Signal<boolean>;
+    constructor();
     readonly valueChange: _angular_core.OutputEmitterRef<Date | [Date | null, Date | null]>;
     readonly clearClick: _angular_core.OutputEmitterRef<void>;
     readonly applyClick: _angular_core.OutputEmitterRef<void>;
@@ -1100,7 +1359,7 @@ declare class OlDatepickerPopup {
     onFooterCancel(): void;
     applyPreset(preset: DatepickerPreset): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDatepickerPopup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDatepickerPopup, "ol-datepicker-popup", never, { "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "clearClick": "clearClick"; "applyClick": "applyClick"; "cancelClick": "cancelClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDatepickerPopup, "ol-datepicker-popup", never, { "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "clearClick": "clearClick"; "applyClick": "applyClick"; "cancelClick": "cancelClick"; }, never, never, true, never>;
 }
 
 /**
@@ -1125,7 +1384,16 @@ declare function isDateDisabled(date: Date, minDate?: Date | null, maxDate?: Dat
 declare function formatDate(date: Date | null | undefined, format?: string): string;
 declare function parseDate(dateStr: string, format?: string): Date | null;
 /**
- * Generates 42 days grid (6 weeks x 7 days) for the calendar view
+ * Dựng lưới ngày cho khung lịch: 6 tuần, rồi BỎ tuần cuối nếu nó không chứa
+ * ngày nào của tháng đang xem.
+ *
+ * Vì sao: bản cũ luôn trả cứng 6 hàng. Đo 84 tháng (2024–2030) thì **66 tháng
+ * (78,6%)** có hàng thứ 6 gồm TOÀN ngày tháng sau — một dòng số mờ vô nghĩa
+ * nằm dưới cùng, người dùng tưởng bấm được. Không phải ca hiếm mà là đa số.
+ *
+ * Không cắt cứng xuống 5 hàng: 18 tháng còn lại (ví dụ 8/2026, hàng cuối
+ * `30 31 1 2 3 4 5`) thực sự cần hàng thứ 6 — cắt cứng là mất ngày 30, 31.
+ * Điều kiện phải là "toàn bộ hàng nằm ngoài tháng", không phải "đủ 6 hàng".
  */
 declare function generateMonthMatrix(viewDate: Date, options?: {
     selectedDate?: Date | null;
@@ -1153,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>;
@@ -1204,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). */
@@ -1247,20 +1523,26 @@ declare class OlDropdown {
     private readonly overlayContainer;
     private cleanupAutoUpdate;
     /** Hàm trả menu về chỗ cũ khi đóng. */
-    private goMenu;
+    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>;
     /**
      * Đẩy menu ra `<body>` thay vì để trong cây DOM của component.
      *
-     * Cần khi component nằm trong modal / drawer / bảng có `overflow: hidden`:
-     * khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING CONTEXT —
-     * z-index của lớp nổi không thoát ra được — và `overflow: hidden` CẮT luôn
-     * phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi cái thứ
-     * hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
+     * **Mặc định `'body'`** (từ bản này). Trước đây mặc định `null` — panel nằm
+     * trong cây DOM của component, nên hễ đặt vào modal / drawer / bảng có
+     * `overflow: hidden` là bị cắt, và người dùng phải tự biết mà bật. Đo
+     * /modal: khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING
+     * CONTEXT — z-index của lớp nổi không thoát ra được — và `overflow: hidden`
+     * CẮT luôn phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi
+     * cái thứ hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
      *
-     * Mặc định TẮT để không đổi hành vi mã đang chạy. Cùng tên và cùng ý nghĩa
-     * với `appendTo` của ng-select và PrimeNG.
+     * Đặt `null` để quay về hành vi cũ: cần khi CSS của nơi dùng nhắm vào panel
+     * qua cây DOM (`.form-cua-toi ol-select .panel`) — selector kiểu đó chết khi
+     * panel treo ra ngoài. Cùng tên và cùng ý nghĩa với `appendTo` của ng-select
+     * và PrimeNG.
      */
     readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly placement: _angular_core.InputSignal<DropdownPlacement>;
@@ -1283,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>;
@@ -1565,7 +1846,28 @@ declare class OlCheckboxRadioForm implements ControlValueAccessor {
     /** Tên nhóm cho ô tròn — cùng `name` thì chỉ chọn được một. */
     readonly name: _angular_core.InputSignal<string>;
     readonly value: _angular_core.InputSignal<string>;
-    readonly inputId: _angular_core.InputSignal<string>;
+    /**
+     * Id của ô nhập, để `<label for>` nối được.
+     *
+     * TỰ SINH khi nơi gọi không truyền. Mặc định RỖNG trước đây làm
+     * `[attr.id]="inputId() || null"` ra `null`, nên `<ol-label [for]="">` trỏ
+     * vào hư không: đo `/checkbox-radio` ra **29 control không tên** trong cây
+     * trợ năng dù nhãn hiển thị đẹp trên màn hình (BUG-031).
+     *
+     * Cùng nếp với `ol-input`, `ol-checkbox`, `ol-select` — chúng đều
+     * `computed(() => this.id() || this.uid)`.
+     */
+    private readonly uid;
+    readonly inputIdInput: _angular_core.InputSignal<string>;
+    readonly inputId: _angular_core.Signal<string>;
+    /**
+     * Tên trợ năng khi thẻ KHÔNG có nhãn chữ.
+     *
+     * Ca `control="none"` kèm `icon`: thẻ chỉ là một ô vuông có icon, `label()`
+     * rỗng nên `<ol-label>` không render. Đo `/checkbox-radio`: ô nhập không
+     * tên trong cây trợ năng dù bấm được (BUG-031).
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly changed: _angular_core.OutputEmitterRef<boolean>;
     /** `none` vẫn phải bấm được, nên hàng luôn là nhãn bấm được trừ khi bị khoá. */
     readonly interactive: _angular_core.Signal<boolean>;
@@ -1588,14 +1890,14 @@ declare class OlCheckboxRadioForm implements ControlValueAccessor {
     private onChange;
     private onTouched;
     /** Lần chạy đầu của `effect` là lúc dựng, chưa phải người dùng đổi. */
-    private daKhoiTao;
+    private initialized;
     constructor();
     writeValue(val: boolean): void;
     registerOnChange(fn: (val: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlCheckboxRadioForm, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCheckboxRadioForm, "ol-checkbox-radio-form", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "controlPosition": { "alias": "controlPosition"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "number": { "alias": "number"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconBoxed": { "alias": "iconBoxed"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "changed": "changed"; }, never, ["[lead]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCheckboxRadioForm, "ol-checkbox-radio-form", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "controlPosition": { "alias": "controlPosition"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "number": { "alias": "number"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconBoxed": { "alias": "iconBoxed"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputIdInput": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "changed": "changed"; }, never, ["[lead]", "*"], true, never>;
 }
 
 /** Xếp dọc, xếp ngang, hay lưới nhiều cột. */
@@ -1669,11 +1971,35 @@ declare class OlInput implements ControlValueAccessor {
     readonly showAsterisk: _angular_core.InputSignal<boolean>;
     readonly labelIcon: _angular_core.InputSignal<boolean>;
     readonly labelTooltip: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng khi ô nhập KHÔNG có nhãn nhìn thấy được.
+     *
+     * `<label for>` chỉ render khi `label()` có chữ (`@if (label())` ở đầu
+     * template), nên bố cục đặt chữ BÊN NGOÀI component — bảng lọc, thanh công
+     * cụ, trang cài đặt — để lại một `<input>` hoàn toàn không tên. Có `label()`
+     * thì không cần truyền cái này; hai thứ cùng lúc thì `aria-label` thắng và
+     * người dùng bàn phím nghe một đằng, nhìn một nẻo.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly prefixText: _angular_core.InputSignal<string>;
     readonly suffixText: _angular_core.InputSignal<string>;
     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. */
@@ -1705,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 danhDauCham(): void;
+    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; }; "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';
@@ -1722,6 +2056,12 @@ declare class OlTextarea implements ControlValueAccessor {
     readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     readonly value: _angular_core.ModelSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng khi control KHÔNG có nhãn nhìn thấy được. Cùng lý do với
+     * `ol-input.ariaLabel`: `<label>` chỉ render khi `label()` có chữ, nên bố
+     * cục đặt chữ BÊN NGOÀI component để lại một control hoàn toàn không tên.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly rows: _angular_core.InputSignal<number>;
     /**
@@ -1754,16 +2094,60 @@ declare class OlTextarea implements ControlValueAccessor {
     /** Gọi từ template mỗi khi giá trị đổi, để form biết. */
     protected phatThayDoi(val: string): void;
     /** Gọi khi rời ô nhập — form dùng để đánh dấu `touched`. */
-    protected danhDauCham(): void;
+    protected markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTextarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTextarea, "ol-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "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>;
+    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>;
 }
 
 /**
- * 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.
+ * 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`.
+ *
+ * `'md'` là **BÍ DANH `@deprecated` của `'base'`** — quét toàn repo: **0 chỗ
+ * dùng** (cả docs app lẫn lib). Giữ cho mã ngoài đang gọi vì `@edmicro/olkit`
+ * đã publish công khai; bỏ input công khai là breaking change cho consumer mà
+ * repo không đo được. Dùng `'base'` cho mã mới.
+ *
+ * Cùng cách xử lý với `variant`/`currentPage` của `ol-pagination`.
+ *
+ * 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;
@@ -1799,14 +2183,14 @@ interface SelectOption {
     [key: string]: any;
 }
 /** Một dòng trong danh sách đã dựng phẳng — tiêu đề nhóm hoặc mục chọn được. */
-interface Dong {
-    loai: 'nhom' | 'muc';
-    ten: string;
+interface FlatRow {
+    kind: 'group' | 'option';
+    label: string;
     item?: any;
     /** Chỉ số trong danh sách MỤC (bỏ qua tiêu đề) — dùng cho bàn phím và aria. */
-    chiSo: number;
-    /** Chỉ ở dòng `nhom`: đây có phải nhóm ĐẦU TIÊN không (để không kẻ đường ngăn thừa). */
-    dauTien?: boolean;
+    index: number;
+    /** Chỉ ở dòng `group`: đây có phải nhóm ĐẦU TIÊN không (để không kẻ đường ngăn thừa). */
+    isFirstGroup?: boolean;
 }
 /**
  * `ol-select` — ô chọn có TÌM KIẾM, ĐA CHỌN, GOM NHÓM và CUỘN ẢO.
@@ -1835,6 +2219,11 @@ declare class OlSelect implements ControlValueAccessor {
     readonly value: _angular_core.ModelSignal<any>;
     readonly options: _angular_core.InputSignal<SelectOption[]>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng khi KHÔNG có `label()` nhìn thấy được. Có `label()` thì
+     * `aria-labelledby` đã lo — không cần truyền cái này.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<SelectSize>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly state: _angular_core.InputSignal<SelectState>;
@@ -1861,16 +2250,40 @@ declare class OlSelect implements ControlValueAccessor {
     /**
      * Đẩy danh sách ra `<body>` thay vì để trong cây DOM của component.
      *
-     * Cần khi ô chọn nằm trong modal / drawer / bảng có `overflow: hidden`:
-     * đo /modal ngày 2026-09-17 thấy khung modal có `z-index: 80` +
-     * `backdrop-filter` nên TẠO STACKING CONTEXT — `z-dropdown: 50` không thoát
-     * ra được — và hộp thoại `overflow: hidden` CẮT luôn phần tràn. Hai lỗi
-     * chồng nhau, z-index một mình không chữa nổi cái thứ hai.
+     * **Mặc định `'body'`** (từ bản này). Trước đây mặc định `null` — panel nằm
+     * trong cây DOM của component, nên hễ đặt vào modal / drawer / bảng có
+     * `overflow: hidden` là bị cắt, và người dùng phải tự biết mà bật. Đo
+     * /modal: khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING
+     * CONTEXT — z-index của lớp nổi không thoát ra được — và `overflow: hidden`
+     * CẮT luôn phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi
+     * cái thứ hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
      *
-     * Mặc định TẮT để không đổi hành vi mã đang chạy. Bật khi gặp cảnh trên.
-     * Cùng tên và cùng ý nghĩa với `appendTo` của ng-select và PrimeNG.
+     * Đặt `null` để quay về hành vi cũ: cần khi CSS của nơi dùng nhắm vào panel
+     * qua cây DOM (`.form-cua-toi ol-select .panel`) — selector kiểu đó chết khi
+     * panel treo ra ngoài. Cùng tên và cùng ý nghĩa với `appendTo` của ng-select
+     * 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. */
@@ -1970,7 +2383,7 @@ declare class OlSelect implements ControlValueAccessor {
      */
     private readonly panel;
     /** Vùng CUỘN — là thẻ `role="listbox"`, không phải hộp bọc. */
-    private readonly danhSach;
+    private readonly listboxRef;
     /** Ô tìm ở đầu panel, để chuyển focus vào khi mở. */
     private readonly oTimPanel;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
@@ -1981,26 +2394,61 @@ declare class OlSelect implements ControlValueAccessor {
     private readonly uid;
     readonly inputId: _angular_core.Signal<string>;
     readonly helperId: _angular_core.Signal<string>;
+    /**
+     * Id của `<label>`, để combobox trỏ vào bằng `aria-labelledby`.
+     *
+     * `<label for>` chỉ đặt tên cho form control GỐC (`input`, `select`,
+     * `textarea`, `button`) — KHÔNG cho `<div role="combobox">` dù id khớp
+     * hoàn toàn. Đo `/select`: 32/32 combobox không có tên trong cây trợ năng
+     * trong khi `labelFor` và `idCombobox` khớp y nhau (BUG-030).
+     */
+    readonly labelId: _angular_core.Signal<string>;
+    /**
+     * Id của nhãn cố định NẰM TRONG ô đóng (`triggerLabel`).
+     *
+     * Chữ đó đã có trong `textContent` của combobox, nhưng `role="combobox"`
+     * khiến trình đọc màn hình coi nội dung là GIÁ TRỊ chứ không phải TÊN —
+     * nghe ra "combobox, Khối: Khối 10" mà vẫn không biết đang chọn cái gì.
+     * Trỏ vào chính `<span>` đó nên tên nghe được trùng khít chữ nhìn thấy.
+     */
+    readonly triggerLabelId: _angular_core.Signal<string>;
     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;
     private readonly elementRef;
     private readonly overlayContainer;
-    private readonly positioning;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
-    private goPanel;
-    private ngatTheoDoi;
-    private daMo;
+    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;
     constructor();
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
@@ -2010,7 +2458,7 @@ declare class OlSelect implements ControlValueAccessor {
      * trị mặc định, và `x < undefined` ra `NaN` — luôn `false`. Cùng lớp lỗi
      * BUG-009, nên mọi input số đều đi qua một hàm lọc.
      */
-    private soDuong;
+    private positiveOr;
     private readonly safeMinTerm;
     private readonly safeDebounce;
     private readonly safeItemHeight;
@@ -2018,7 +2466,7 @@ declare class OlSelect implements ControlValueAccessor {
     readonly safeMaxSelected: _angular_core.Signal<number>;
     getItemLabel(item: any): string;
     getItemValue(item: any): any;
-    private bangNhau;
+    private sameValue;
     /**
      * Giá trị đang chọn, LUÔN trả mảng — template chỉ có một đường đọc.
      *
@@ -2050,15 +2498,30 @@ declare class OlSelect implements ControlValueAccessor {
      */
     readonly selectedItem: _angular_core.Signal<SelectOption | null>;
     /** Mục dữ liệu ứng với một giá trị — để chip đa chọn lấy `icon`/`prefix`. */
-    itemCua(val: any): SelectOption | null;
+    optionOf(val: any): SelectOption | null;
     /** Mục này có phần đầu (icon hoặc chữ) để vẽ không. */
-    coPhanDau(item: SelectOption | null | undefined): boolean;
+    hasPrefix(item: SelectOption | null | undefined): boolean;
     /**
      * Có mục nào xoá được không — nút "xoá tất cả" neo vào đây chứ không vào
      * `hasValue()`. Khi mọi mục đã chọn đều `locked`, nút hiện mà bấm không làm
      * gì: nút chết còn khó hiểu hơn là không có nút.
      */
-    readonly coTheXoa: _angular_core.Signal<boolean>;
+    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.
      *
@@ -2066,7 +2529,7 @@ declare class OlSelect implements ControlValueAccessor {
      * thường): còn mục khớp thì người dùng nên chọn mục đó, hiện thêm nút "tạo
      * mới" cùng tên chỉ làm họ tạo ra bản trùng.
      */
-    readonly coTheTao: _angular_core.Signal<boolean>;
+    readonly canCreate: _angular_core.Signal<boolean>;
     /** Chữ trên nút tạo mới, đã thay `{term}`. */
     readonly createLabel: _angular_core.Signal<string>;
     /**
@@ -2076,7 +2539,7 @@ declare class OlSelect implements ControlValueAccessor {
      * là sửa dữ liệu của người khác. Chỉ đặt giá trị và phát `added`; nơi gọi
      * nghe `added` rồi tự quyết có đưa vào danh sách hay không.
      */
-    taoMuc(): void;
+    createOption(): void;
     readonly waitingForTerm: _angular_core.Signal<boolean>;
     readonly filteredOptions: _angular_core.Signal<SelectOption[]>;
     /**
@@ -2086,17 +2549,26 @@ declare class OlSelect implements ControlValueAccessor {
      * theo chỉ số phẳng; lồng vào thì `$index` reset mỗi nhóm và điều hướng bàn
      * phím sai hết. Cùng lý do đã ghi ở `ol-autocomplete`.
      */
-    readonly rows: _angular_core.Signal<Dong[]>;
+    readonly rows: _angular_core.Signal<FlatRow[]>;
     /** Chỉ các dòng CHỌN ĐƯỢC — bàn phím chạy trên danh sách này. */
     readonly selectableItems: _angular_core.Signal<SelectOption[]>;
     /**
      * Chỉ số của mục ĐANG CHỌN trong danh sách đã lọc — điểm nhảy tới khi mở
-     * panel. Chưa chọn gì, hoặc mục đang chọn đã bị lọc/ẩn mất, thì về mục đầu.
+     * panel. CHƯA CHỌN GÌ thì trả `-1`: không mục nào được đánh dấu.
+     *
+     * Bản trước trả `0` cho ca chưa chọn, nên mở dropdown ra là option đầu đã có
+     * nền xám đặc trong khi `aria-selected="false"` — người dùng NHÌN thấy "đã
+     * chọn Toán" còn trình đọc màn hình NGHE "chưa chọn gì". Nặng hơn: bấm Enter
+     * ngay lúc đó là **chọn nhầm option đầu**. Đo /select: 5/5 ô chưa chọn đều
+     * dính (BUG-021).
+     *
+     * Đây đúng là hậu quả mà chú thích của `open()` từng cảnh báo cho ca ĐÃ có giá
+     * trị — bản sửa đó chữa nửa trên mà giữ nguyên nửa dưới.
      *
      * Đa chọn: lấy mục chọn ĐẦU TIÊN còn nhìn thấy. `hideSelected` ẩn hết mục
      * đã chọn nên ở đó luôn rơi về 0 — đúng, vì không còn mục nào để nhảy tới.
      */
-    private chiSoMucDangChon;
+    private selectedOptionIndex;
     /**
      * Khoảng dòng thật sự được vẽ. Nguyên lý lấy từ `ng-select`:
      * `scrollTop / itemHeight` cho mục đầu trong tầm nhìn, cộng thêm số dòng
@@ -2106,14 +2578,23 @@ declare class OlSelect implements ControlValueAccessor {
      * trong template.
      */
     readonly viewport: _angular_core.Signal<{
-        rows: Dong[];
-        dauPad: number;
-        cuoiPad: number;
+        rows: FlatRow[];
+        padTop: number;
+        padBottom: number;
     }>;
     onPanelScroll(e: Event): void;
     onDocumentClick(e: MouseEvent): void;
     toggle(): void;
+    open(): void;
+    close(): void;
+    /**
+     * @deprecated Dùng `open()`. Giữ lại vì `@edmicro/olkit` đã publish lên npm
+     * công khai — bỏ phương thức công khai là breaking change cho consumer mà
+     * repo này không đo được. Theo đúng nếp `@deprecated` ở `variant` của
+     * `ol-pagination` và `onPageSizeChangeEvent`.
+     */
     mo(): void;
+    /** @deprecated Dùng `close()`. Cùng lý do với `mo()`. */
     dong(): void;
     onSearchInput(val: string): void;
     /**
@@ -2122,7 +2603,7 @@ declare class OlSelect implements ControlValueAccessor {
      */
     private phatSearch;
     /** Đơn chọn đóng sau khi chọn, đa chọn thì không — trừ khi nơi gọi chốt khác. */
-    private nenDong;
+    private shouldClose;
     selectItem(item: any): void;
     /**
      * Mục này có bị khoá không gỡ không.
@@ -2134,16 +2615,16 @@ declare class OlSelect implements ControlValueAccessor {
     isLocked(val: any): boolean;
     removeValue(val: any, e: Event): void;
     clear(e: Event): void;
-    private datGiaTri;
+    private setValue;
     onKeyDown(e: KeyboardEvent): void;
-    private diChuyen;
+    private moveActive;
     /**
      * Kéo mục đang đánh dấu vào tầm nhìn.
      *
      * Cuộn ảo thì KHÔNG dùng `scrollIntoView` được — mục có thể chưa được vẽ.
-     * Tính thẳng `chiSo * itemHeight` mới đúng.
+     * Tính thẳng `index * itemHeight` mới đúng.
      */
-    private cuonToiMuc;
+    private scrollToOption;
     optionId(i: number): string;
     readonly activeOptionId: _angular_core.Signal<string | null>;
     writeValue(val: any): void;
@@ -2151,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; }; "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>;
 }
 
 /**
@@ -2162,6 +2643,12 @@ type CheckboxSize = 'sm' | 'base' | 'lg' | 'md';
 declare class OlCheckbox implements ControlValueAccessor {
     readonly checked: _angular_core.ModelSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng khi control KHÔNG có nhãn nhìn thấy được. Cùng lý do với
+     * `ol-input.ariaLabel`: `<label>` chỉ render khi `label()` có chữ, nên bố
+     * cục đặt chữ BÊN NGOÀI component để lại một control hoàn toàn không tên.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string>;
     /**
      * Khai bằng `model()` thay vì `input()` để Reactive Forms khoá được component:
@@ -2200,7 +2687,7 @@ declare class OlCheckbox implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCheckbox, "ol-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "standalone": { "alias": "standalone"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCheckbox, "ol-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "standalone": { "alias": "standalone"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -2214,6 +2701,12 @@ declare class OlRadio implements ControlValueAccessor {
     readonly selectedValue: _angular_core.ModelSignal<any>;
     readonly modelValue: _angular_core.ModelSignal<any>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng khi control KHÔNG có nhãn nhìn thấy được. Cùng lý do với
+     * `ol-input.ariaLabel`: `<label>` chỉ render khi `label()` có chữ, nên bố
+     * cục đặt chữ BÊN NGOÀI component để lại một control hoàn toàn không tên.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string>;
     /**
      * Khai bằng `model()` thay vì `input()` để Reactive Forms khoá được component:
@@ -2238,7 +2731,7 @@ declare class OlRadio implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlRadio, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRadio, "ol-radio", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectedValue": { "alias": "selectedValue"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "selectedValue": "selectedValueChange"; "modelValue": "modelValueChange"; "disabled": "disabledChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRadio, "ol-radio", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectedValue": { "alias": "selectedValue"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "selectedValue": "selectedValueChange"; "modelValue": "modelValueChange"; "disabled": "disabledChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -2250,6 +2743,12 @@ type ToggleColor = 'brand' | 'orange' | 'green' | 'red';
 declare class OlToggle implements ControlValueAccessor {
     readonly checked: _angular_core.ModelSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng khi control KHÔNG có nhãn nhìn thấy được. Cùng lý do với
+     * `ol-input.ariaLabel`: `<label>` chỉ render khi `label()` có chữ, nên bố
+     * cục đặt chữ BÊN NGOÀI component để lại một control hoàn toàn không tên.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string>;
     /**
      * Khai bằng `model()` thay vì `input()` để Reactive Forms khoá được component:
@@ -2271,7 +2770,7 @@ declare class OlToggle implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlToggle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToggle, "ol-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "justifyBetween": { "alias": "justifyBetween"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToggle, "ol-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "justifyBetween": { "alias": "justifyBetween"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 /** Công tắc đứng bên nào của hàng. Figma `Type=Default` để bên trái. */
@@ -2322,7 +2821,7 @@ declare class OlToggleInput implements ControlValueAccessor {
     private onChange;
     private onTouched;
     /** Lần chạy đầu của `effect` là lúc dựng, chưa phải người dùng đổi. */
-    private daKhoiTao;
+    private initialized;
     constructor();
     writeValue(val: boolean): void;
     registerOnChange(fn: (val: boolean) => void): void;
@@ -2416,6 +2915,29 @@ declare class OlRange implements ControlValueAccessor {
     private readonly generatedId;
     protected readonly inputId: _angular_core.Signal<string>;
     readonly helperId: _angular_core.Signal<string>;
+    /**
+     * Id riêng cho HAI tay trượt ở chế độ `dualRange`.
+     *
+     * Nhánh `dualRange` trước đây không có `[id]`, không `aria-label`, không
+     * `aria-describedby` — `<label for>` ở trên trỏ vào `inputId()` mà không
+     * input nào mang id đó. Đo `/range-slider`: **4/8 tay trượt không có tên**
+     * trong cây trợ năng (BUG-025).
+     *
+     * Người dùng bàn phím nghe "slider" trống trơn, không biết mình đang kéo
+     * đầu nào của khoảng.
+     */
+    readonly minThumbId: _angular_core.Signal<string>;
+    readonly maxThumbId: _angular_core.Signal<string>;
+    /**
+     * Tên của từng tay trượt: ghép nhãn chung với vai trò.
+     *
+     * Có `label()` thì ra "Khoảng giá — giá trị nhỏ nhất"; không có thì lùi về
+     * `ariaLabel()` của nơi gọi, rồi mới tới tên trần. KHÔNG để trống: ở chế độ
+     * dual, `<label for>` chỉ nối được MỘT trong hai tay trượt.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly minThumbLabel: _angular_core.Signal<string>;
+    readonly maxThumbLabel: _angular_core.Signal<string>;
     readonly describedBy: _angular_core.Signal<string | null>;
     readonly ariaInvalid: _angular_core.Signal<null>;
     readonly singlePercentage: _angular_core.Signal<number>;
@@ -2431,7 +2953,7 @@ declare class OlRange implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlRange, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRange, "ol-range", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "dualRange": { "alias": "dualRange"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "showMinMaxLabels"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "minValue": "minValueChange"; "maxValue": "maxValueChange"; "disabled": "disabledChange"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRange, "ol-range", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "dualRange": { "alias": "dualRange"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "showMinMaxLabels"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "minValue": "minValueChange"; "maxValue": "maxValueChange"; "disabled": "disabledChange"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
 }
 
 /**
@@ -2498,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. */
@@ -2544,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;
@@ -2557,7 +3079,7 @@ declare class OlInputCounter implements ControlValueAccessor {
     private onChange;
     private onTouched;
     /** Lần chạy đầu của `effect` là lúc dựng, chưa phải người dùng đổi. */
-    private daKhoiTao;
+    private initialized;
     constructor();
     writeValue(val: number): void;
     registerOnChange(fn: (val: number) => void): void;
@@ -2626,7 +3148,7 @@ declare class OlOtpInput implements ControlValueAccessor {
     private onChange;
     private onTouched;
     /** Lần chạy đầu của `effect` là lúc dựng, chưa phải người dùng đổi. */
-    private daKhoiTao;
+    private initialized;
     constructor();
     writeValue(val: string): void;
     registerOnChange(fn: (val: string) => void): void;
@@ -2685,14 +3207,20 @@ declare class OlTagInput implements ControlValueAccessor {
     private onChange;
     private onTouched;
     /** Lần chạy đầu của `effect` không phải người dùng đổi — bỏ qua. */
-    private daKhoiTao;
+    private initialized;
     constructor();
     writeValue(val: string[]): void;
     registerOnChange(fn: (val: string[]) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    /** Gọi khi rời ô nhập — form dùng để đánh dấu `touched`. */
-    protected danhDauCham(): void;
+    /**
+     * Gọi khi rời ô nhập — form dùng để đánh dấu `touched`.
+     *
+     * Trước đây hàm này KHÔNG được gọi ở đâu cả (template không có `(blur)`),
+     * nên `onTouched()` chưa bao giờ chạy: Reactive Forms không đánh dấu control
+     * là `touched`, và mọi kiểm tra dựa vào `ng-touched` im lặng không hoạt động.
+     */
+    protected markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTagInput, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTagInput, "ol-tag-input", never, { "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "tags": "tagsChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
@@ -2733,7 +3261,7 @@ declare class OlRichTextEditor implements ControlValueAccessor {
     private onChange;
     private onTouched;
     /** Lần chạy đầu của `effect` là lúc dựng, chưa phải người dùng đổi. */
-    private daKhoiTao;
+    private initialized;
     constructor();
     writeValue(val: string): void;
     registerOnChange(fn: (val: string) => void): void;
@@ -2762,6 +3290,11 @@ declare class OlTimepicker implements ControlValueAccessor {
     private readonly elementRef;
     readonly value: _angular_core.ModelSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng khi KHÔNG có `label()` nhìn thấy được. Có `label()` thì
+     * `aria-labelledby` đã lo — không cần truyền cái này.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly format: _angular_core.InputSignal<TimepickerFormat>;
     readonly size: _angular_core.InputSignal<TimepickerSize>;
@@ -2782,14 +3315,18 @@ declare class OlTimepicker implements ControlValueAccessor {
     /**
      * Đẩy bảng chọn giờ ra `<body>` thay vì để trong cây DOM của component.
      *
-     * Cần khi component nằm trong modal / drawer / bảng có `overflow: hidden`:
-     * khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING CONTEXT —
-     * z-index của lớp nổi không thoát ra được — và `overflow: hidden` CẮT luôn
-     * phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi cái thứ
-     * hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
+     * **Mặc định `'body'`** (từ bản này). Trước đây mặc định `null` — panel nằm
+     * trong cây DOM của component, nên hễ đặt vào modal / drawer / bảng có
+     * `overflow: hidden` là bị cắt, và người dùng phải tự biết mà bật. Đo
+     * /modal: khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING
+     * CONTEXT — z-index của lớp nổi không thoát ra được — và `overflow: hidden`
+     * CẮT luôn phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi
+     * cái thứ hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
      *
-     * Mặc định TẮT để không đổi hành vi mã đang chạy. Cùng tên và cùng ý nghĩa
-     * với `appendTo` của ng-select và PrimeNG.
+     * Đặt `null` để quay về hành vi cũ: cần khi CSS của nơi dùng nhắm vào panel
+     * qua cây DOM (`.form-cua-toi ol-select .panel`) — selector kiểu đó chết khi
+     * panel treo ra ngoài. Cùng tên và cùng ý nghĩa với `appendTo` của ng-select
+     * và PrimeNG.
      */
     readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly showPresets: _angular_core.InputSignal<boolean>;
@@ -2799,14 +3336,19 @@ declare class OlTimepicker implements ControlValueAccessor {
     private readonly generatedId;
     protected readonly inputId: _angular_core.Signal<string>;
     readonly helperId: _angular_core.Signal<string>;
+    /**
+     * Id của `<label>`, để combobox trỏ vào bằng `aria-labelledby`. Cùng lỗi
+     * với `ol-select`: `<label for>` không đặt tên cho `<div role="combobox">`
+     * dù id khớp — đo `/timepicker` ra 39 node không tên (BUG-031).
+     */
+    readonly labelId: _angular_core.Signal<string>;
     readonly describedBy: _angular_core.Signal<string | null>;
     readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     private readonly panel;
     private readonly overlayContainer;
-    private readonly positioning;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
-    private goPanel;
-    private ngatTheoDoi;
+    private detachPanel;
+    private stopTracking;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly selectedHour: _angular_core.WritableSignal<number>;
     readonly selectedMinute: _angular_core.WritableSignal<number>;
@@ -2850,14 +3392,14 @@ declare class OlTimepicker implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTimepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTimepicker, "ol-timepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "addonType": { "alias": "addonType"; "required": false; "isSignal": true; }; "addonText": { "alias": "addonText"; "required": false; "isSignal": true; }; "addonIcon": { "alias": "addonIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "timeChange": "timeChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "timeObjectChange": "timeObjectChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTimepicker, "ol-timepicker", 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; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "addonType": { "alias": "addonType"; "required": false; "isSignal": true; }; "addonText": { "alias": "addonText"; "required": false; "isSignal": true; }; "addonIcon": { "alias": "addonIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "timeChange": "timeChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "timeObjectChange": "timeObjectChange"; }, never, never, true, never>;
 }
 
 /**
  * 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;
@@ -2900,16 +3442,40 @@ declare class OlAutocomplete implements ControlValueAccessor {
     /**
      * Đẩy danh sách gợi ý ra `<body>` thay vì để trong cây DOM của component.
      *
-     * Cần khi component nằm trong modal / drawer / bảng có `overflow: hidden`:
-     * khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING CONTEXT —
-     * z-index của lớp nổi không thoát ra được — và `overflow: hidden` CẮT luôn
-     * phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi cái thứ
-     * hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
+     * **Mặc định `'body'`** (từ bản này). Trước đây mặc định `null` — panel nằm
+     * trong cây DOM của component, nên hễ đặt vào modal / drawer / bảng có
+     * `overflow: hidden` là bị cắt, và người dùng phải tự biết mà bật. Đo
+     * /modal: khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING
+     * CONTEXT — z-index của lớp nổi không thoát ra được — và `overflow: hidden`
+     * CẮT luôn phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi
+     * cái thứ hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
      *
-     * Mặc định TẮT để không đổi hành vi mã đang chạy. Cùng tên và cùng ý nghĩa
-     * với `appendTo` của ng-select và PrimeNG.
+     * Đặt `null` để quay về hành vi cũ: cần khi CSS của nơi dùng nhắm vào panel
+     * qua cây DOM (`.form-cua-toi ol-select .panel`) — selector kiểu đó chết khi
+     * panel treo ra ngoài. Cùng tên và cùng ý nghĩa với `appendTo` của ng-select
+     * 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
@@ -2959,13 +3525,14 @@ declare class OlAutocomplete implements ControlValueAccessor {
     private onTouched;
     private readonly panel;
     private readonly overlayContainer;
-    private readonly positioning;
     /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
-    private goPanel;
-    private ngatTheoDoi;
+    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. */
-    private daMo;
+    private wasOpen;
     /** Hẹn giờ gỡ nảy cho `search`. */
     private hengio;
     constructor(elementRef: ElementRef);
@@ -2998,7 +3565,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
      * một đường render thay vì hai nhánh song song.
      */
     readonly groupedOptions: _angular_core.Signal<{
-        ten: string;
+        name: string;
         items: any[];
     }[]>;
     /**
@@ -3008,7 +3575,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
      * nhóm: `activeIndex()` và `optionId(idx)` đều đánh theo chỉ số phẳng, lồng
      * vào thì `$index` reset mỗi nhóm và điều hướng bàn phím sai hết.
      */
-    tenNhomTaiVitri(idx: number): string | null;
+    groupNameAt(idx: number): string | null;
     getItemLabel(item: any): string;
     getItemValue(item: any): any;
     isSelected(item: any): boolean;
@@ -3037,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 {
@@ -3106,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.
@@ -3132,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;
@@ -3157,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). */
@@ -3172,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
@@ -3234,22 +3849,53 @@ 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>;
 }
 
-type PaginationType = 'default' | 'arrows' | 'dropdown-buttons' | 'text-buttons' | 'two-buttons' | 'buttons-helper' | 'with-dropdown' | 'with-input' | 'simple-input';
-type PaginationVariant = PaginationType | 'grouped' | 'separated';
+type PaginationType = 'default' | 'arrows' | 'dropdown-buttons' | 'text-buttons' | 'two-buttons' | 'buttons-helper' | 'with-dropdown' | 'with-input' | 'simple-input'
+/**
+ * `grouped` và `separated` trước chỉ có ở `PaginationVariant`. Thêm vào đây
+ * để người dùng chuyển từ `variant` (đã `@deprecated`) sang `type` mà không
+ * mất giá trị nào — nếu không, bỏ `variant` là bỏ luôn hai bố cục này.
+ *
+ * Chúng là BÍ DANH bố cục, không phải bố cục mới: `grouped` ≡ `default`,
+ * `separated` ≡ `text-buttons`. Xem `effectiveType`.
+ */
+ | 'grouped' | 'separated';
+/** @deprecated Dùng `PaginationType`. Nay hai kiểu đã trùng nhau hoàn toàn. */
+type PaginationVariant = PaginationType;
 declare class OlPagination {
     readonly type: _angular_core.InputSignal<PaginationType>;
-    readonly variant: _angular_core.InputSignal<PaginationVariant>;
+    /**
+     * @deprecated Dùng `type`. Giữ cho mã ngoài đang gọi — sẽ bỏ ở bản major sau.
+     *
+     * Hai input cho cùng MỘT trục là nguồn lỗi im lặng: người dùng truyền cả hai
+     * rồi không biết cái nào thắng. `effectiveType` bên dưới xử lý tường minh
+     * (`type` tường minh luôn thắng), nhưng bề mặt API vẫn nên còn một cái.
+     *
+     * `grouped`/`separated` chỉ có ở `variant` nên chúng đã được thêm vào
+     * `PaginationType`: `grouped` ≡ `default`, `separated` ≡ `text-buttons`.
+     *
+     * KHÔNG xoá ngay: `@edmicro/olkit` đã publish lên npm công khai (1.1.1), bỏ
+     * input công khai là breaking change cho consumer mà repo này không đo được.
+     * Theo đúng nếp `@deprecated` đã có sẵn ở `onPageSizeChangeEvent` bên dưới.
+     */
+    readonly variant: _angular_core.InputSignal<PaginationType>;
     readonly total: _angular_core.InputSignal<number>;
     readonly pageSize: _angular_core.ModelSignal<number>;
     readonly pageIndex: _angular_core.ModelSignal<number>;
+    /**
+     * @deprecated Dùng `pageIndex`. Giữ cho mã ngoài đang gọi — bỏ ở major sau.
+     *
+     * Cùng lý do với `variant`: hai input một trục. Xem chú thích `trangHienTai`
+     * bên dưới về cách gộp hai giá trị mà không xung đột.
+     */
     readonly currentPage: _angular_core.ModelSignal<number>;
     readonly totalPagesInput: _angular_core.InputSignal<number | null>;
     readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
@@ -3364,14 +4010,18 @@ declare class OlPopover {
     /**
      * Đẩy panel ra `<body>` thay vì để trong cây DOM của component.
      *
-     * Cần khi component nằm trong modal / drawer / bảng có `overflow: hidden`:
-     * khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING CONTEXT —
-     * z-index của lớp nổi không thoát ra được — và `overflow: hidden` CẮT luôn
-     * phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi cái thứ
-     * hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
+     * **Mặc định `'body'`** (từ bản này). Trước đây mặc định `null` — panel nằm
+     * trong cây DOM của component, nên hễ đặt vào modal / drawer / bảng có
+     * `overflow: hidden` là bị cắt, và người dùng phải tự biết mà bật. Đo
+     * /modal: khung modal có `z-index` + `backdrop-filter` nên TẠO STACKING
+     * CONTEXT — z-index của lớp nổi không thoát ra được — và `overflow: hidden`
+     * CẮT luôn phần tràn. Hai lỗi chồng nhau, z-index một mình không chữa nổi
+     * cái thứ hai. Xem chú thích đầy đủ trong `OlOverlayContainer`.
      *
-     * Mặc định TẮT để không đổi hành vi mã đang chạy. Cùng tên và cùng ý nghĩa
-     * với `appendTo` của ng-select và PrimeNG.
+     * Đặt `null` để quay về hành vi cũ: cần khi CSS của nơi dùng nhắm vào panel
+     * qua cây DOM (`.form-cua-toi ol-select .panel`) — selector kiểu đó chết khi
+     * panel treo ra ngoài. Cùng tên và cùng ý nghĩa với `appendTo` của ng-select
+     * và PrimeNG.
      */
     readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly placement: _angular_core.InputSignal<PopoverPlacement>;
@@ -3391,7 +4041,7 @@ declare class OlPopover {
     private readonly overlayContainer;
     private cleanupAutoUpdate;
     /** Hàm trả panel về chỗ cũ khi đóng. */
-    private goPanel;
+    private detachPanel;
     constructor();
     toggle(): void;
     open(): void;
@@ -3475,6 +4125,140 @@ declare class OlProgress {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlProgress, "ol-progress", never, { "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Thanh tiến trình mảnh ở mép trên trang — kiểu nprogress / YouTube.
+ *
+ * Dùng cho việc **không biết trước bao lâu**: chuyển route, tải dữ liệu nền.
+ * Khác `ol-progress` (thanh trong luồng, biết phần trăm chính xác) và khác
+ * `ol-loading-overlay` (phủ và CHẶN thao tác).
+ *
+ * Là SERVICE chứ không phải component đặt trong template, theo nếp
+ * `OlToastService`: nơi gọi thường là router guard hay HTTP interceptor, không
+ * phải template.
+ *
+ * ```ts
+ * // router guard
+ * progressBar.start();
+ * // ... điều hướng xong
+ * progressBar.done();
+ *
+ * // HTTP interceptor — `done()` trong `finalize` để lỗi cũng tắt thanh
+ * intercept(req: HttpRequest<unknown>, next: HttpHandler) {
+ *   this.pb.start();
+ *   return next.handle(req).pipe(finalize(() => this.pb.done()));
+ * }
+ * ```
+ *
+ * `<ol-progress-bar-top />` đặt một lần ở app root để vẽ.
+ *
+ * **Figma chưa vẽ component này** (node `3283:24173` chỉ có thanh trong luồng).
+ * Đã ghi vào `FIGMA-CAN-VE-THEM.md`; dựng theo thông lệ phổ biến và dùng token
+ * sẵn có, sẽ đối chiếu lại khi thiết kế vẽ xong.
+ */
+declare class OlProgressBarService {
+    /** Đếm số việc đang chạy, KHÔNG phải cờ bật/tắt. */
+    private readonly activeCount;
+    private readonly progressValue;
+    private timer;
+    /** Thanh có đang hiện. */
+    readonly visible: _angular_core.Signal<boolean>;
+    /** Phần trăm hiện tại (0–100). */
+    readonly percent: _angular_core.Signal<number>;
+    /**
+     * Bắt đầu một việc.
+     *
+     * Đếm việc thay vì đặt cờ: hai lời gọi HTTP song song thì `done()` của cái
+     * xong trước KHÔNG được tắt thanh khi cái kia còn chạy. Cờ boolean sẽ tắt
+     * sớm và thanh nhấp nháy.
+     */
+    start(): void;
+    /**
+     * Kết thúc một việc. Chỉ khi việc CUỐI xong thì thanh mới chạy tới 100 và ẩn.
+     */
+    done(): void;
+    /** Dừng mọi việc và ẩn ngay — dùng khi huỷ điều hướng. */
+    reset(): void;
+    private clearTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlProgressBarService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * Vẽ thanh tiến trình mép trên trang. Đặt MỘT LẦN ở app root.
+ *
+ * ```html
+ * <!-- app.html -->
+ * <ol-progress-bar-top />
+ * <router-outlet />
+ * ```
+ *
+ * Trạng thái do `OlProgressBarService` giữ — component này chỉ đọc. Xem chú
+ * thích đầy đủ ở service về lý do tách hai phần.
+ *
+ * `z-toast` (100) là bậc cao nhất trong thang z-index của lib: thanh này phải
+ * thấy được cả khi modal (80) đang mở, vì điều hướng và tải nền vẫn xảy ra
+ * trong lúc modal mở.
+ */
+declare class OlProgressBarTop {
+    readonly service: OlProgressBarService;
+    /** Màu thanh. Mặc định `brand` theo Figma `ol-progress` (#3283:24173). */
+    readonly color: _angular_core.InputSignal<"danger" | "brand" | "success" | "warning">;
+    readonly barClasses: _angular_core.Signal<"bg-warning-surface" | "bg-danger-surface" | "bg-brand" | "bg-success">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlProgressBarTop, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlProgressBarTop, "ol-progress-bar-top", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Lớp phủ mờ + spinner, **CHẶN** thao tác trong lúc tải hoặc lưu.
+ *
+ * Khác ba thứ đã có trong lib:
+ * - `ol-spinner` — vòng xoay đơn lẻ, không phủ, không chặn
+ * - `ol-skeleton` — THAY CHỖ nội dung, không phủ lên
+ * - `ol-table-loading` — skeleton hàng bảng, chỉ cho bảng
+ *
+ * Hai chế độ qua input `fullscreen`:
+ *
+ * ```html
+ * <!-- phủ MỘT VÙNG: cha PHẢI có `relative` -->
+ * <div class="relative">
+ *   <ol-loading-overlay [loading]="dangTai()" text="Đang tải..." />
+ *   <ol-table ... />
+ * </div>
+ *
+ * <!-- phủ TOÀN MÀN -->
+ * <ol-loading-overlay [loading]="dangLuu()" [fullscreen]="true" text="Đang lưu..." />
+ * ```
+ *
+ * **Ràng buộc của chế độ phủ vùng**: phần tử cha phải có `position: relative`
+ * (hoặc `absolute`/`fixed`). Thiếu nó thì `absolute inset-0` neo theo tổ tiên
+ * được định vị gần nhất — có thể là cả trang. Đây là ràng buộc của CSS, lib
+ * không tự thêm `relative` vào cha được vì không với tới phần tử đó.
+ *
+ * **Figma chưa vẽ component này** (node `3283:24173` chỉ có thanh tiến trình
+ * trong luồng). Đã ghi vào `FIGMA-CAN-VE-THEM.md`; dựng bằng token sẵn có
+ * (`bg-overlay-backdrop` mà modal/drawer/command đang dùng) và sẽ đối chiếu
+ * lại khi thiết kế vẽ xong.
+ */
+declare class OlLoadingOverlay {
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** Chữ dưới spinner. Rỗng thì chỉ hiện spinner. */
+    readonly text: _angular_core.InputSignal<string>;
+    /**
+     * Phủ toàn màn thay vì phủ vùng cha.
+     *
+     * Phủ vùng (mặc định) dùng cho bảng đang tải, form đang lưu. Phủ toàn màn
+     * dùng khi không được cho bấm bất cứ gì khác.
+     */
+    readonly fullscreen: _angular_core.InputSignal<boolean>;
+    /** Theo nếp `ol-table-loading`: nhãn mặc định tiếng Việt. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Spinner to hơn ở chế độ toàn màn cho cân với diện tích phủ. */
+    readonly spinnerSize: _angular_core.Signal<"base" | "lg">;
+    readonly wrapperClasses: _angular_core.Signal<"flex flex-col items-center justify-center gap-3 bg-overlay-backdrop backdrop-blur-xs fixed inset-0 z-modal" | "flex flex-col items-center justify-center gap-3 bg-overlay-backdrop backdrop-blur-xs absolute inset-0 z-raised">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlLoadingOverlay, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlLoadingOverlay, "ol-loading-overlay", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Trục `Type` của Figma `ol-rating` (#1149:82444). Code trước đây chỉ làm
  * được `Default`, hai kiểu kia Figma vẽ đủ mà code chưa có.
@@ -3498,6 +4282,16 @@ declare class OlRating {
     /** Nhãn hai đầu ở `radio-input` — Figma: "Không hài lòng" / "Rất hài lòng". */
     readonly minLabel: _angular_core.InputSignal<string>;
     readonly maxLabel: _angular_core.InputSignal<string>;
+    /**
+     * Tên trợ năng cho nhóm chấm điểm (`role="radiogroup"` ở nhánh
+     * `radio-input`).
+     *
+     * Trước đây nhóm lấy tên từ `minLabel()` — sai ngữ nghĩa: đó là nhãn ĐẦU
+     * THANG ("Rất tệ"), không phải tên của thang, và nó ĐÃ hiện thành chữ ngay
+     * bên cạnh nên trình đọc màn hình đọc lặp. `minLabel()` giữ làm dự phòng để
+     * mã đang chạy không mất tên khi chưa kịp đổi.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Tên nhóm radio; tự sinh khi nơi gọi không truyền. */
     readonly name: _angular_core.InputSignal<string>;
     /** Giá trị đang chọn ở `radio-input`; `null` là chưa chọn. */
@@ -3532,7 +4326,193 @@ declare class OlRating {
     radioClass(v: number): string;
     select(v: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlRating, never>;
-    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; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    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 {
@@ -3541,11 +4521,26 @@ declare class OlSidebar {
     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 {
@@ -3557,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>;
@@ -3567,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 {
@@ -3580,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>;
     /**
@@ -3590,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>;
 }
 
 /**
@@ -3694,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>;
@@ -3724,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>;
 }
@@ -3792,7 +4790,7 @@ declare class OlSpinner {
      * - white: border-white
      * - success: border-emerald-600  (ngoài Figma)
      * - warning: border-yellow-500   (ngoài Figma)
-     * - danger: border-rose-600      (ngoài Figma)
+     * - danger: text-fg-danger       (token — trùng rose-600 ở chế độ sáng)
      * - gray: border-gray-400        (ngoài Figma)
      */
     readonly color: _angular_core.InputSignal<OlSpinnerColor>;
@@ -3930,15 +4928,32 @@ 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>;
     protected readonly hostClass: _angular_core.Signal<"contents" | "flex min-h-0 w-full flex-1 flex-col">;
     private readonly parentTabs;
     readonly isActive: _angular_core.Signal<boolean>;
+    /**
+     * Có dựng `role="tabpanel"` hay không (BUG-026).
+     *
+     * Ở chế độ `mobile` với các variant `default`/`pills`/`border-bottom`/
+     * `underline`, `ol-tabs` render một `<select>` thay cho hàng tab — KHÔNG
+     * sinh `role="tab"` nào. Panel vẫn khai `role="tabpanel"` +
+     * `aria-labelledby="<tabId>"` thì nó thành **panel mồ côi**: vai trò đòi
+     * phải có một `tab` điều khiển nó, mà `aria-labelledby` lại trỏ vào một id
+     * KHÔNG TỒN TẠI trong DOM.
+     *
+     * ARIA hỏng tệ hơn không có ARIA: bộ đọc màn hình thông báo một cấu trúc
+     * tab không hề tồn tại. Chế độ `<select>` đã tự có tên ("Chọn tab") nên bỏ
+     * hẳn vai trò là đúng, không phải mất mát.
+     *
+     * Không có `parentTabs` (dùng `ol-tab-item` rời) thì giữ nguyên hành vi cũ.
+     */
+    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>;
 }
 
 /**
@@ -4313,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';
@@ -4345,6 +5360,20 @@ type StepperOrientation = 'horizontal' | 'vertical';
 type StepperBreakpoint = 'desktop' | 'mobile';
 declare class OlStepper {
     readonly currentStep: _angular_core.ModelSignal<number>;
+    /**
+     * Tên đọc được cho nút của một bước.
+     *
+     * Nút bước chỉ chiếu icon ở 3/4 nhánh (`completed` -> check, `error` ->
+     * info-circle, có `icon` riêng -> icon đó); chỉ nhánh cuối mới có số thứ tự
+     * làm chữ. `ol-icon` không tự sinh tên đọc được nên **bước càng hoàn thành
+     * thì càng mất tên** — ngược hẳn mong đợi.
+     *
+     * Đo `/stepper` bằng accessibility tree: **39/61 nút câm** (BUG-013 mục 1).
+     *
+     * Nhãn gồm số thứ tự + tiêu đề (nếu có) + trạng thái, để người dùng trình
+     * đọc màn hình biết đang ở đâu mà không phải đoán từ icon.
+     */
+    stepAriaLabel(i: number): string;
     readonly variant: _angular_core.InputSignal<StepperVariant>;
     readonly orientation: _angular_core.InputSignal<StepperOrientation>;
     readonly breakpoint: _angular_core.InputSignal<StepperBreakpoint>;
@@ -4368,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;
@@ -4380,6 +5409,41 @@ type OlTreeSelectionMode = 'single' | 'multiple';
 type OlTreeToggleIcon = 'chevron' | 'plus-minus';
 declare class OlTree {
     readonly nodes: _angular_core.ModelSignal<OlTreeNode[]>;
+    /**
+     * Template tuỳ biến cho nội dung mỗi hàng, khai bằng `#nodeTemplate`:
+     *
+     * ```html
+     * <ol-tree [nodes]="nodes">
+     *   <ng-template #nodeTemplate let-node>
+     *     <ol-icon [name]="node.icon" />
+     *     <span class="truncate flex-1">{{ node.label }}</span>
+     *   </ng-template>
+     * </ol-tree>
+     * ```
+     *
+     * Theo đúng nếp `@ContentChild('optionTemplate')` của `ol-select`. Template
+     * đượ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>;
@@ -4413,7 +5477,7 @@ declare class OlTree {
      */
     handleKeydown(event: KeyboardEvent): void;
     /** Cha trực tiếp của một node, `null` nếu node ở mức gốc. */
-    private timCha;
+    private findParent;
     handleNodeClick(node: OlTreeNode): void;
     handleNodeCheck(event: {
         node: OlTreeNode;
@@ -4426,13 +5490,33 @@ 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"; }, never, 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';
 type OlTreeNodeToggleIcon = 'chevron' | 'plus-minus';
 declare class OlTreeNodeItem {
     readonly node: _angular_core.InputSignal<OlTreeNode>;
+    /**
+     * Template tuỳ biến cho PHẦN NỘI DUNG của hàng (icon · nhãn · count · badge).
+     *
+     * Truyền qua `input` chứ không `inject` ngược cây: node vốn đã nhận 7 input
+     * truyền xuống đệ quy, thêm một cái là đúng nếp sẵn có — còn `inject` ngược
+     * là dựng thêm một cơ chế mới cho cùng một việc.
+     *
+     * Chỉ thay NỘI DUNG, KHÔNG thay cả hàng. Thẻ `role="treeitem"` cùng
+     * `aria-level` / `aria-expanded` / roving tabindex và nút mở rộng, checkbox
+     * đều do lib giữ. Cho người dùng vẽ cả hàng là mất ARIA vừa làm đúng chuẩn ở
+     * 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>;
@@ -4456,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.
@@ -4476,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; }; "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';
@@ -4945,86 +6046,34 @@ declare class OlJumbotron {
     readonly subtitle: _angular_core.InputSignal<string>;
     readonly badgeText: _angular_core.InputSignal<string>;
     readonly variant: _angular_core.InputSignal<JumbotronVariant>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlJumbotron, never>;
-    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.
+     * Class cho badge — đổi theo `variant` vì NỀN đổi theo `variant`.
+     *
+     * Bản cũ khoá cứng `bg-white/10 … text-fg-yellow` cho mọi biến thể. Hợp lý
+     * trên nền tối, nhưng `variant="light"` có nền gần trắng nên chữ vàng chỉ
+     * đạt **1.58:1** — dưới xa ngưỡng WCAG 4.5 (BUG-013 mục 3b). Đo cả 5 badge
+     * trên `/jumbotron`:
+     *
+     * | nền                    | tỷ lệ    |
+     * |------------------------|----------|
+     * | `light` rgb(249,250,251) | **1.58** |
+     * | `brand` rgb(43,65,130)   | **4.45** (thiếu 0.05) |
+     * | `dark` rgb(16,24,40)     | 8.18 ✅  |
+     *
+     * `brand` cũng trượt (4.45, thiếu 0.05) — sát ngưỡng vẫn là trượt. Sửa bằng
+     * cách làm nền badge TỐI hơn (`bg-white/5` thay `bg-white/10`) để giữ sắc
+     * vàng, thay vì đổi màu chữ: đo `bg-white/5` ra **5.15**.
+     *
+     * Đã thử `text-fg-yellow-strong`, `text-yellow-200`, `text-yellow-100` —
+     * cả ba là **class chết**, `getComputedStyle` trả về đen. `text-white` đạt
+     * 7.3 nhưng mất sắc vàng của badge.
+     *
+     * Nền badge cũng phải đổi ở `light`: `bg-white/10` trên nền sáng gần như
+     * vô hình.
      */
-    protected cleanup(): void;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlOverlayBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OlOverlayBase, never, never, {}, {}, never, never, true, never>;
+    readonly badgeClasses: _angular_core.Signal<"inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold border backdrop-blur-md bg-warning-soft border-warning-subtle text-fg-warning" | "inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold border backdrop-blur-md bg-white/5 border-white/20 text-fg-yellow">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlJumbotron, never>;
+    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>;
 }
 
 /**
@@ -5065,6 +6114,17 @@ declare class OlFocusTrapService {
     private previousActiveElement;
     private trapElement;
     private focusableElements;
+    /**
+     * ĐẾM overlay đang mở, không dùng cờ bật/tắt.
+     *
+     * Mở modal rồi mở `ol-command` từ trong nó: đóng cái sau KHÔNG được nhả khoá
+     * khi cái trước còn mở. Cờ boolean sẽ nhả sớm và nền cuộn lại giữa lúc modal
+     * vẫn hiện — cùng lớp lỗi với `OlProgressBarService`.
+     */
+    private openOverlayCount;
+    /** Giá trị `overflow`/`paddingRight` của `body` trước khi khoá, để trả lại. */
+    private prevOverflow;
+    private prevPaddingRight;
     /**
      * Selector cho các elements có thể focus được
      */
@@ -5079,6 +6139,33 @@ declare class OlFocusTrapService {
      * Release focus trap và restore focus về element trước đó
      */
     release(): void;
+    /**
+     * Khoá cuộn trang nền.
+     *
+     * `aria-modal="true"` là lời hứa với trợ năng rằng phần còn lại của trang
+     * không tương tác được. Đo `/modal` trước khi sửa: overlay mở mà
+     * `body.overflow` vẫn `visible`, lăn chuột làm nền trôi 1317 → 1717 trong
+     * khi overlay đứng yên — người dùng mất ngữ cảnh (BUG-027).
+     *
+     * Khoá trên phần tử CUỘN THẬT (`document.scrollingElement`), KHÔNG mặc định
+     * là `body`. Đo `/modal`: `scrollingElement` là `<html>` với
+     * `scrollTop 1817`, còn `body.scrollTop` = 0 — đặt `overflow: hidden` trên
+     * `body` thì nền vẫn cuộn y nguyên (đã thử: 1317 → 1717).
+     *
+     * Bù `padding-right` bằng đúng bề rộng thanh cuộn: đặt `overflow: hidden`
+     * làm thanh cuộn dọc biến mất nên trang giật ngang vài px nếu không bù.
+     *
+     * KHÔNG dùng `position: fixed`: cách đó phải tự lưu và trả lại `scrollY`,
+     * quên là trang nhảy về đầu khi đóng. `overflow: hidden` giữ nguyên vị trí.
+     */
+    private lockScroll;
+    /**
+     * Phần tử cuộn thật của trang. `document.scrollingElement` là `<html>` ở chế
+     * độ chuẩn và `<body>` ở chế độ quirks — không đoán, hỏi trình duyệt.
+     */
+    private scrollingEl;
+    /** Nhả khoá khi overlay CUỐI cùng đóng. */
+    private unlockScroll;
     /**
      * Update danh sách focusable elements trong trap element
      */
@@ -5113,6 +6200,24 @@ interface PositioningOptions {
     shift?: boolean;
     arrow?: HTMLElement;
     middleware?: Middleware[];
+    /**
+     * Giới hạn kích thước floating element theo chỗ trống còn lại.
+     *
+     * Cần cho popup CAO (lịch, danh sách dài): `flip` chỉ lật sang phía đối diện
+     * khi phía đó rộng hơn, nhưng nếu CẢ HAI phía đều không đủ thì popup vẫn tràn
+     * khỏi màn. `size` cho nó một trần thật để cuộn bên trong.
+     */
+    size?: {
+        /** Chiều cao tối thiểu, dưới mức này thì `flip` mới đổi phía. */
+        minHeight?: number;
+        /** Chừa mép màn. */
+        padding?: number;
+        /** Gọi khi có kích thước khả dụng mới. */
+        apply?: (args: {
+            availableHeight: number;
+            availableWidth: number;
+        }) => void;
+    };
 }
 /**
  * Return type cho positioned coordinates
@@ -5213,23 +6318,94 @@ declare class OlOverlayContainer {
      * `--z-toast: 100`), nên lớp nổi trong container luôn phủ mọi thứ vẽ theo
      * thang đó. Cùng mốc CDK và PrimeNG dùng.
      */
-    private zHienTai;
-    /** Container chung, tạo một lần rồi dùng lại. */
+    private currentZ;
+    /**
+     * Container chung, tạo một lần rồi dùng lại.
+     *
+     * Tìm trong DOM trước khi tạo mới. Service khai `providedIn: 'root'` nên mỗi
+     * injector dựng một instance với `host = null` — trong ứng dụng thật chỉ có
+     * một injector, nhưng mỗi `TestBed` là một cái. Không tìm lại thì container
+     * chồng chất: đo được 4 test `select-append-to.spec.ts` đỏ 1 trên 3 lần
+     * chạy, vì chúng giả định CHỈ MỘT container.
+     *
+     * Dùng lại cũng đúng hơn về mặt hành vi: hai instance service không nên vẽ
+     * ra hai lớp phủ chồng nhau.
+     */
     getContainer(): HTMLElement;
     /**
      * Cấp z-index cho một lớp vừa mở. Mỗi lần gọi trả số LỚN HƠN lần trước —
      * lớp mở sau luôn nằm trên, kể cả khi mở modal trong modal.
      */
+    nextZIndex(): number;
+    /**
+     * @deprecated Dùng `nextZIndex()`. Giữ lại vì đã publish trong
+     * `@edmicro/olkit@1.1.1` — bỏ phương thức công khai là breaking change.
+     */
     capZIndex(): number;
     /**
      * Chuyển một phần tử vào container và cấp z-index.
      * 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.
+     */
     gan(el: HTMLElement): () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlOverlayContainer, never>;
     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, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayBase, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, 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 };
-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