@edmicro/olkit 1.1.1 → 1.1.2

package/types/edmicro-olkit.d.ts

@@ -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.
  *
@@ -258,6 +264,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 +306,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';
@@ -661,7 +699,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 +771,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 +931,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 +955,39 @@ 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ỡ theo dõi trần chiều cao popup. */
+    private stopTrackingHeight;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly inputValue: _angular_core.WritableSignal<string>;
     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<"h-9 px-3 ps-9 text-xs rounded-md" | "h-12 px-4 ps-11 text-base rounded-md" | "h-13 px-4 ps-11 text-base rounded-md" | "h-10 px-3.5 ps-10 text-sm rounded-md">;
     /**
      * Cỡ icon lịch theo `size` của ô nhập.
      *
@@ -956,14 +1049,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,10 +1071,10 @@ 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ỡ 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>;
@@ -990,7 +1087,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<"h-9 px-3 text-xs rounded-md" | "h-12 px-4 text-base rounded-md" | "h-13 px-4 text-base rounded-md" | "h-10 px-3.5 text-sm rounded-md">;
+    /**
+     * 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;
@@ -1040,6 +1160,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 +1180,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 +1221,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-[var(...)]]`: 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 +1293,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 +1318,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;
@@ -1247,20 +1449,24 @@ declare class OlDropdown {
     private readonly overlayContainer;
     private cleanupAutoUpdate;
     /** Hàm trả menu về chỗ cũ khi đóng. */
-    private goMenu;
+    private detachMenu;
     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>;
@@ -1565,7 +1771,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 +1815,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,6 +1896,16 @@ 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>;
@@ -1706,9 +1943,9 @@ declare class OlInput 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<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; }; "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>;
 }
 
 type TextareaState = 'default' | 'error' | 'success';
@@ -1722,6 +1959,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,14 +1997,24 @@ 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.
+ * 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`.
+ *
+ * LƯU Ý cho lượt sau: họ form nay là `sm | base | lg | xl` (`ol-input`,
+ * `ol-timepicker`, `ol-datepicker`). `ol-select` **thiếu `xl`** — thêm được
+ * nhưng là mở rộng API, cần chốt trước.
  */
 type SelectSize = 'sm' | 'base' | 'lg' | 'md';
 type SelectState = 'default' | 'error' | 'success';
@@ -1799,14 +2052,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 +2088,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,14 +2119,18 @@ 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>;
     /** Tối đa bao nhiêu mục được chọn ở chế độ đa chọn. 0 = không giới hạn. */
@@ -1970,7 +2232,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,6 +2243,24 @@ 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>;
@@ -1996,11 +2276,10 @@ declare class OlSelect implements ControlValueAccessor {
     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;
+    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 +2289,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 +2297,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 +2329,15 @@ 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ó hiện lối tạo mục mới không.
      *
@@ -2066,7 +2345,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 +2355,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 +2365,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 +2394,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 +2419,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 +2431,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 +2448,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; }; "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 +2459,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 +2503,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 +2517,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 +2547,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 +2559,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 +2586,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 +2637,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 +2731,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 +2769,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>;
 }
 
 /**
@@ -2557,7 +2895,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 +2964,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 +3023,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 +3077,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 +3106,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 +3131,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 +3152,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,7 +3208,7 @@ 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>;
 }
 
 /**
@@ -2900,14 +3258,18 @@ 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>;
     readonly groupBy: _angular_core.InputSignal<string>;
@@ -2959,13 +3321,12 @@ 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;
+    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 +3359,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 +3369,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;
@@ -3242,14 +3603,44 @@ declare class OlNavDropdown {
     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 +3755,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 +3786,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 +3870,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 +4027,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 +4071,7 @@ 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>;
 }
 
 declare class OlSidebar {
@@ -3792,7 +4331,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>;
@@ -3937,6 +4476,23 @@ declare class OlTabItem {
     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>;
 }
@@ -4345,6 +4901,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>;
@@ -4380,6 +4950,22 @@ 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>;
     readonly checkable: _angular_core.InputSignal<boolean>;
     readonly selectionMode: _angular_core.InputSignal<OlTreeSelectionMode>;
     readonly bordered: _angular_core.InputSignal<boolean>;
@@ -4413,7 +4999,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 +5012,26 @@ 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"], 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>;
     readonly checkable: _angular_core.InputSignal<boolean>;
     readonly selectionMode: _angular_core.InputSignal<OlTreeNodeSelectionMode>;
     readonly toggleIcon: _angular_core.InputSignal<OlTreeNodeToggleIcon>;
@@ -4476,7 +5075,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; }; "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,6 +5544,32 @@ declare class OlJumbotron {
     readonly subtitle: _angular_core.InputSignal<string>;
     readonly badgeText: _angular_core.InputSignal<string>;
     readonly variant: _angular_core.InputSignal<JumbotronVariant>;
+    /**
+     * 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.
+     */
+    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 +5690,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 +5715,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 +5776,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 +5894,44 @@ 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;
+    /**
+     * @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 { CHAT_BUBBLE_STATUS, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayBase, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay, stripDiacritics };
 export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, OlAvatarStatusPosition, OlBottomNavPosition, OlButtonType, OlCheckboxRadioFormAlign, OlCheckboxRadioGroupRole, OlDateRangePickerVariant, OlGalleryGap, OlGalleryRatio, OlHelperType, OlModalBackdrop, OlModalRole, OlSkeletonAnimation, OlSkeletonAspectRatio, OlSkeletonRounded, OlSkeletonType, OlSpeedDialTooltipPosition, OlTimepickerAddonType, OlToggleInputAlign, OlTreeNode, OlTreeNodeSelectionMode, OlTreeNodeToggleIcon, OlTreeSelectionMode, OlTreeToggleIcon, OtpInputSize, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SelectOption, SelectSize, SelectState, SeparatorOrientation, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TagInputSize, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToggleColor, TogglePosition, ToggleSize, YearCell };
 //# sourceMappingURL=edmicro-olkit.d.ts.map