@edmicro/olkit 1.0.20 → 1.1.1

package/types/edmicro-olkit.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterContentInit, OnDestroy, ElementRef, QueryList, TemplateRef, WritableSignal } from '@angular/core';
+import { OnInit, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, WritableSignal } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as _edmicro_olkit from '@edmicro/olkit';
 import { SafeHtml } from '@angular/platform-browser';
@@ -110,13 +110,13 @@ declare class OlAlert {
      * phần chữ cho `warning` thì icon và nút đóng bị bỏ quên — icon trắng trên
      * nền `#FFC022` tương phản **1.64**, gần như không nhìn thấy.
      */
-    private readonly solidNenSang;
+    private readonly solidHasLightBg;
     /**
      * Nền solid nào SÁNG LÊN ở chế độ tối đến mức phải lật chữ. Chỉ `success`:
      * đo được trắng 3.65 / đen 5.75 trên nền `#009966`. `danger` ở dark vẫn tối
      * (trắng 6.03) nên giữ nguyên.
      */
-    private readonly solidNenSangODark;
+    private readonly solidHasLightBgInDark;
     readonly iconClasses: _angular_core.Signal<string>;
     /** Nhãn tròn của layout `small`. */
     readonly badgeClasses: _angular_core.Signal<"text-xs font-semibold px-2.5 py-1 rounded-full me-3 shrink-0 bg-success-medium text-fg-success-strong" | "text-xs font-semibold px-2.5 py-1 rounded-full me-3 shrink-0 bg-warning-medium text-fg-warning-strong" | "text-xs font-semibold px-2.5 py-1 rounded-full me-3 shrink-0 bg-danger-medium text-fg-danger-strong" | "text-xs font-semibold px-2.5 py-1 rounded-full me-3 shrink-0 bg-brand-soft text-fg-brand-strong" | "text-xs font-semibold px-2.5 py-1 rounded-full me-3 shrink-0 bg-neutral-quaternary text-heading">;
@@ -239,8 +239,9 @@ declare class OlScrollArea {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlScrollArea, "ol-scroll-area", never, { "scrollbar": { "alias": "scrollbar"; "required": false; "isSignal": true; }; "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "innerClass": { "alias": "innerClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type ButtonColor = 'default' | 'brand' | 'primary' | 'alternative' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'green' | 'danger' | 'red' | 'warning' | 'yellow' | 'purple' | 'dark' | 'light';
-type ButtonSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+type ButtonColor = 'default' | 'brand' | 'primary' | 'alternative' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'green' | 'danger' | 'red' | 'warning' | 'yellow' | 'dark' | 'light';
+type ButtonSize = 'xs' | 'sm' | 'base' | 'l' | 'xl';
+type OlButtonType = 'button' | 'submit' | 'reset';
 declare class OlButton {
     readonly color: _angular_core.InputSignal<ButtonColor>;
     readonly size: _angular_core.InputSignal<ButtonSize>;
@@ -249,7 +250,7 @@ declare class OlButton {
     readonly iconOnly: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
+    readonly type: _angular_core.InputSignal<OlButtonType>;
     /**
      * Tên đọc được cho nút **chỉ có icon**. Không có nó thì trình đọc màn hình
      * đọc ra một nút trống — đo DOM 12 trang docs từng ra 48 nút như vậy.
@@ -396,10 +397,17 @@ type EmptySize = 'sm' | 'base';
 /**
  * Trạng thái rỗng — không có dữ liệu, không có kết quả tìm kiếm.
  *
- * Chưa có node Figma. Hình dạng rút từ chỗ duy nhất trong thư viện đang tự dựng
- * trạng thái rỗng: `ol-autocomplete` (`p-3 text-center text-sm text-body-subtle`
- * kèm một nút hành động). Đó là bản `sm`, dùng bên trong bảng thả xuống. Bản
- * `base` là cho giữa trang, chữ và khoảng cách lớn hơn.
+ * Bản `base` theo Figma `ol-table-empty` (trang ⤷ Tables, đọc 2026-09-15):
+ * padding dọc 64px ngang 24px, khoảng cách 8px, tiêu đề 18px Semi Bold,
+ * mô tả 14px Regular, nút hành động 40px.
+ *
+ * Figma vẽ khung biểu tượng 56px tròn nền `bg-neutral-secondary-medium` bằng
+ * frame tự vẽ, KHÔNG dùng `ol-icon-shape` — mà thang của component đó là
+ * 16·24·36·48·64·96 nên không có 56. Dùng `lg` (48px), gần nhất mà vẫn là
+ * component thật; đừng bịa cỡ 56 chỉ để khớp một frame vẽ tay.
+ *
+ * Bản `sm` rút từ `ol-autocomplete` (`p-3 text-center text-sm text-body-subtle`),
+ * dùng bên trong bảng thả xuống.
  *
  * Nút hành động đi qua slot `[actions]` để nơi gọi tự đặt `ol-button` — cùng
  * lối với slot `[tags]` của `ol-helper`.
@@ -410,7 +418,7 @@ declare class OlEmpty {
     readonly description: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<EmptySize>;
     readonly wrapperClasses: _angular_core.Signal<string>;
-    readonly titleClasses: _angular_core.Signal<"text-sm font-medium text-heading" | "text-base font-semibold text-heading">;
+    readonly titleClasses: _angular_core.Signal<"text-sm font-medium text-heading" | "text-lg font-semibold text-heading">;
     readonly iconSize: _angular_core.Signal<IconShapeSize>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlEmpty, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlEmpty, "ol-empty", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
@@ -419,6 +427,7 @@ declare class OlEmpty {
 type AvatarSize = '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
 type AvatarShape = 'rounded' | 'circle';
 type AvatarStatus = 'online' | 'offline' | 'alternative' | 'busy' | 'away';
+type OlAvatarStatusPosition = 'bottom-right' | 'top-right';
 declare class OlAvatar {
     readonly src: _angular_core.InputSignal<string>;
     readonly alt: _angular_core.InputSignal<string>;
@@ -428,12 +437,28 @@ declare class OlAvatar {
     readonly shape: _angular_core.InputSignal<AvatarShape>;
     readonly bordered: _angular_core.InputSignal<boolean>;
     readonly status: _angular_core.InputSignal<AvatarStatus | null>;
-    readonly statusPosition: _angular_core.InputSignal<"top-right" | "bottom-right">;
+    readonly statusPosition: _angular_core.InputSignal<OlAvatarStatusPosition>;
     readonly removable: _angular_core.InputSignal<boolean>;
     readonly name: _angular_core.InputSignal<string>;
     readonly helper: _angular_core.InputSignal<string>;
     readonly showHelper: _angular_core.InputSignal<boolean>;
     readonly remove: _angular_core.OutputEmitterRef<MouseEvent>;
+    /**
+     * Cỡ icon placeholder, tính theo px để BÁM cỡ avatar.
+     *
+     * Trước đây template ghi cứng `size="sm"` (16px) nên icon đứng yên ở mọi cỡ
+     * avatar — đo /avatar ngày 2026-09-16: 17 avatar có icon cho ra SÁU tỷ lệ
+     * khác nhau, từ 0,889 (avatar 18px) xuống 0,250 (avatar 64px).
+     *
+     * Figma KHÔNG có tỷ lệ để chép: biến thể `Type=Placeholder` dùng chữ viết
+     * tắt ("PH") chứ không phải icon. Nên lấy tỷ lệ 0,5 của cỡ `base` hiện tại
+     * làm chuẩn và áp cho cả thang — đó là cỡ dùng nhiều nhất, và là tỷ lệ duy
+     * nhất trong sáu cái trông cân đối.
+     *
+     * Dùng SỐ px chứ không phải tên cỡ: thang `IconSize` (14·16·20·24·32·40·48)
+     * quá thưa ở đầu nhỏ, ép `xs` (avatar 18px) phải lấy icon 14px — tỷ lệ 0,778.
+     */
+    protected readonly iconPx: _angular_core.Signal<number>;
     onRemoveClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAvatar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAvatar, "ol-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusPosition": { "alias": "statusPosition"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "showHelper": { "alias": "showHelper"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, ["*"], true, never>;
@@ -448,7 +473,7 @@ declare class OlAvatarGroup {
 }
 
 type BadgeTheme = 'brand' | 'gray' | 'white' | 'danger' | 'warning' | 'success' | 'default' | 'dark' | 'red' | 'yellow' | 'green';
-type BadgeSize = 'sm' | 'lg' | 'xs';
+type BadgeSize = 'xs' | 'sm' | 'lg';
 type BadgeShape = 'square' | 'pill';
 /**
  * Figma `ol-badge` #1146:22250 trục `Type` = `Default | With avatar | With dot |
@@ -650,7 +675,7 @@ declare class OlCarousel implements AfterContentInit {
      * để ghi đè.
      */
     readonly slideCountInput: _angular_core.InputSignal<number>;
-    private readonly soConDaDem;
+    private readonly countedSlides;
     /**
      * Làm sạch TRƯỚC khi ai đó dựng mảng từ nó.
      *
@@ -674,10 +699,33 @@ declare class OlCarousel implements AfterContentInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCarousel, "ol-carousel", never, { "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "slideCountInput": { "alias": "slideCount"; "required": false; "isSignal": true; }; "indicators": { "alias": "indicators"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Một slide trong `ol-carousel`.
+ *
+ * Component này CHỈ là vỏ ngữ nghĩa — `ol-carousel` dựng track trượt ngang
+ * (`translateX` + `[&>*]:w-full [&>*]:shrink-0`) nên bề rộng và vị trí do track
+ * quyết định, slide không tự đặt.
+ *
+ * BẢN CŨ SAI: template là `<div class="absolute inset-0 …">` kèm `opacity-100/0`
+ * theo input `active` — kiểu chồng lớp của carousel đời trước. Khi `ol-carousel`
+ * chuyển sang track trượt thì hai cơ chế xung khắc. Đo trên /carousel
+ * (2026-09-16), chiếu 3 slide vào track:
+ *
+ *   host    left 385 · 1439 · 2493   (xếp ngang ĐÚNG)
+ *   ruột    left 385 · 385  · 385    (CHỒNG NHAU)
+ *
+ * `absolute inset-0` neo theo tổ tiên `position: relative` gần nhất — đó là
+ * khung ngoài của carousel, KHÔNG phải host. Nên cả ba nội dung đè lên nhau ở
+ * vị trí slide đầu. Vì vậy docs phải chiếu `<div>` thô vào và component này
+ * chưa bao giờ được dùng (0 lượt).
+ *
+ * `host: { class: 'block h-full' }` là BẮT BUỘC: thẻ tuỳ biến mặc định
+ * `display: inline`, mà `[&>*]:w-full` của track không ép nổi chiều cao — đo
+ * bản thiếu class: host cao 0, slide trống trơn.
+ */
 declare class OlCarouselSlide {
-    readonly active: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlCarouselSlide, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCarouselSlide, "ol-carousel-slide", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlCarouselSlide, "ol-carousel-slide", never, {}, {}, never, ["*"], true, never>;
 }
 
 declare class OlClipboard {
@@ -700,7 +748,7 @@ declare class OlCollapse {
 
 type DatepickerViewMode = 'day' | 'month' | 'year';
 type DatepickerSelectionMode = 'single' | 'range';
-type DatepickerSize = 'sm' | 'md' | 'lg';
+type DatepickerSize = 'sm' | 'base' | 'lg';
 type DateRange = [Date | null, Date | null];
 interface DateCustomClass {
     date: Date;
@@ -813,6 +861,19 @@ declare class OlDatepicker implements ControlValueAccessor {
     readonly daysDisabled: _angular_core.InputSignal<number[]>;
     readonly datesDisabled: _angular_core.InputSignal<Date[]>;
     readonly datesEnabled: _angular_core.InputSignal<Date[]>;
+    /**
+     * Đẩ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 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.
+     */
+    readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly showFooter: _angular_core.InputSignal<boolean>;
     readonly inline: _angular_core.InputSignal<boolean>;
     readonly size: _angular_core.InputSignal<DatepickerSize>;
@@ -821,6 +882,12 @@ declare class OlDatepicker implements ControlValueAccessor {
     readonly timestampChange: _angular_core.OutputEmitterRef<number | null>;
     readonly isoChange: _angular_core.OutputEmitterRef<string | null>;
     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;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly inputValue: _angular_core.WritableSignal<string>;
     private onChange;
@@ -840,7 +907,7 @@ declare class OlDatepicker implements ControlValueAccessor {
      * `md`→w-5 khớp đúng ba giá trị bản cũ định dùng, và phần đệm để nguyên cho
      * div bọc (`ps-3.5`) lo — trộn vào đây là chỗ sinh lệch.
      */
-    readonly iconSize: _angular_core.Signal<"xs" | "sm" | "md">;
+    readonly iconSize: _angular_core.Signal<"xs" | "sm" | "base">;
     writeValue(val: Date | null | string): void;
     registerOnChange(fn: (val: Date | null) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -851,12 +918,15 @@ declare class OlDatepicker implements ControlValueAccessor {
     onPopupClear(): void;
     onInputChange(val: string): void;
     clearInput(event: MouseEvent): void;
+    /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
+    private donDepPanel;
     onDocumentClick(event: MouseEvent): void;
     onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDatepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDatepicker, "ol-datepicker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "dateChange": "dateChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "formattedChange": "formattedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDatepicker, "ol-datepicker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "dateChange": "dateChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "formattedChange": "formattedChange"; }, never, never, true, never>;
 }
 
+type OlDateRangePickerVariant = 'dual-inputs' | 'joined';
 declare class OlDateRangePicker implements ControlValueAccessor {
     readonly state: OlDatepickerStateService;
     private readonly hostEl;
@@ -867,7 +937,7 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     readonly fromLabel: _angular_core.InputSignal<string>;
     readonly toLabel: _angular_core.InputSignal<string>;
     readonly showInfoIcon: _angular_core.InputSignal<boolean>;
-    readonly variant: _angular_core.InputSignal<"dual-inputs" | "joined">;
+    readonly variant: _angular_core.InputSignal<OlDateRangePickerVariant>;
     readonly dualMonth: _angular_core.InputSignal<boolean>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly required: _angular_core.InputSignal<boolean>;
@@ -883,12 +953,31 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     readonly daysDisabled: _angular_core.InputSignal<number[]>;
     readonly datesDisabled: _angular_core.InputSignal<Date[]>;
     readonly datesEnabled: _angular_core.InputSignal<Date[]>;
+    /**
+     * Đẩ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 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.
+     */
+    readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly showFooter: _angular_core.InputSignal<boolean>;
     readonly presets: _angular_core.InputSignal<DatepickerPreset[]>;
     readonly inline: _angular_core.InputSignal<boolean>;
     readonly size: _angular_core.InputSignal<DatepickerSize>;
     readonly clearable: _angular_core.InputSignal<boolean>;
     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;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly startInputValue: _angular_core.WritableSignal<string>;
     readonly endInputValue: _angular_core.WritableSignal<string>;
@@ -900,7 +989,7 @@ declare class OlDateRangePicker implements ControlValueAccessor {
      * đầy đủ ở đó. Bốn icon lịch trong template này từng khoá cứng `size="sm"`
      * trong khi ô nhập co giãn theo `inputSizeClasses()`.
      */
-    readonly iconSize: _angular_core.Signal<"xs" | "sm" | "md">;
+    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">;
     writeValue(val: DateRange | null): void;
     registerOnChange(fn: (val: DateRange | null) => void): void;
@@ -915,10 +1004,12 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     onStartInputChange(val: string): void;
     onEndInputChange(val: string): void;
     clearRange(event: MouseEvent): void;
+    /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
+    private donDepPanel;
     onDocumentClick(event: MouseEvent): void;
     onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDateRangePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDateRangePicker, "ol-date-range-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDateRangePicker, "ol-date-range-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 
 declare class OlDatepickerDirective implements OnDestroy {
@@ -1059,7 +1150,7 @@ declare function generateYearsMatrix(viewDate: Date, selectedDate?: Date | null,
  *  cạnh dưới. */
 type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 /** Bề rộng (với left/right) hoặc chiều cao (với top/bottom). */
-type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type DrawerSize = 'sm' | 'base' | 'lg' | 'xl' | 'full';
 declare class OlDrawer {
     private readonly focusTrap;
     private readonly destroyRef;
@@ -1071,6 +1162,16 @@ declare class OlDrawer {
     readonly closeOnBackdrop: _angular_core.InputSignal<boolean>;
     readonly closeOnEscape: _angular_core.InputSignal<boolean>;
     readonly showClose: _angular_core.InputSignal<boolean>;
+    /**
+     * `ol-drawer-header` cũng tự vẽ nút đóng và cũng mặc định bật. Dùng chung
+     * hai component là HIỆN HAI CHỮ X chồng nhau — đo DOM /drawer ngày
+     * 2026-09-16 đếm được 2 nút trong cùng một ngăn kéo.
+     *
+     * Có header thì nhường nút đóng cho nó: header đặt nút trong hàng tiêu đề,
+     * đúng chỗ người dùng tìm, còn nút của `ol-drawer` neo tuyệt đối vào góc.
+     */
+    private readonly header;
+    protected readonly hienNutDong: _angular_core.Signal<boolean>;
     /** Nhãn cho trình đọc màn hình khi drawer không có tiêu đề nhìn thấy được. */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
@@ -1084,7 +1185,7 @@ declare class OlDrawer {
     toggle(): void;
     onBackdropClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDrawer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDrawer, "ol-drawer", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDrawer, "ol-drawer", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; }, ["header"], ["*"], true, never>;
 }
 
 /**
@@ -1143,9 +1244,25 @@ declare class OlDropdown {
     private readonly menuRef;
     private readonly cursorAnchorRef;
     private hideTimeoutId;
+    private readonly overlayContainer;
     private cleanupAutoUpdate;
+    /** Hàm trả menu về chỗ cũ khi đóng. */
+    private goMenu;
     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 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.
+     */
+    readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly placement: _angular_core.InputSignal<DropdownPlacement>;
     readonly trigger: _angular_core.InputSignal<DropdownTrigger>;
     readonly autoClose: _angular_core.InputSignal<DropdownAutoClose>;
@@ -1183,7 +1300,7 @@ declare class OlDropdown {
     toggle(): void;
     private clearHideTimeout;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDropdown, "ol-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "triggerClass": { "alias": "triggerClass"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["[slot=trigger], [trigger]", "[triggerIcon]", "[triggerIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDropdown, "ol-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "triggerClass": { "alias": "triggerClass"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["[slot=trigger], [trigger]", "[triggerIcon]", "[triggerIcon]", "*"], true, never>;
 }
 
 declare class OlDropdownItem {
@@ -1339,8 +1456,9 @@ interface HelperFeature {
  * Icon: Figma dùng `close` cho điều kiện chưa đạt, nhưng registry KHÔNG có tên
  * đó (cả ba bộ đều 0, aliasMap cũng không) — dùng `close-circle` thay.
  */
+type OlHelperType = 'default' | 'action' | 'strength' | 'tags' | 'features';
 declare class OlHelper {
-    readonly type: _angular_core.InputSignal<"default" | "action" | "strength" | "tags" | "features">;
+    readonly type: _angular_core.InputSignal<OlHelperType>;
     /** Chữ gợi ý chính — dùng ở `default`, `action`. */
     readonly text: _angular_core.InputSignal<string>;
     readonly state: _angular_core.InputSignal<HelperState>;
@@ -1426,7 +1544,8 @@ type ChoiceShape = 'card' | 'chip' | 'bare' | 'pill';
  * `ol-toggle` mà `ol-toggle` tự dựng thẻ `<label>` — lồng hai `<label>` là HTML
  * hỏng. Bốn kiểu này để lô sau.
  */
-declare class OlCheckboxRadioForm {
+type OlCheckboxRadioFormAlign = 'start' | 'center';
+declare class OlCheckboxRadioForm implements ControlValueAccessor {
     readonly checked: _angular_core.ModelSignal<boolean>;
     readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly control: _angular_core.InputSignal<ChoiceControl>;
@@ -1434,7 +1553,7 @@ declare class OlCheckboxRadioForm {
     readonly layout: _angular_core.InputSignal<ChoiceLayout>;
     readonly shape: _angular_core.InputSignal<ChoiceShape>;
     /** Figma canh giữa ở `Icons & text` và `Payment`, canh đầu ở các kiểu còn lại. */
-    readonly align: _angular_core.InputSignal<"center" | "start">;
+    readonly align: _angular_core.InputSignal<OlCheckboxRadioFormAlign>;
     readonly label: _angular_core.InputSignal<string>;
     readonly helper: _angular_core.InputSignal<string>;
     /** Con số cuối nhãn — Figma `ol-label-choice` variant `With number`. */
@@ -1461,6 +1580,20 @@ declare class OlCheckboxRadioForm {
     /** Ô vuông của `checkbox`, ô tròn của `radio` — Figma đều 16px. */
     readonly boxClasses: _angular_core.Signal<string>;
     toggle(): void;
+    /**
+     * Thiếu bốn phương thức này thì `formControlName` / `[formControl]` KHÔNG
+     * gắn được — dùng trong Reactive Forms là lỗi runtime "No value accessor
+     * for form control".
+     */
+    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;
+    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>;
 }
@@ -1486,6 +1619,7 @@ type ChoiceGroupLayout = 'stack' | 'row' | 'grid';
  * Nên ở đây chỉ giữ đúng phần component hoá được: hướng xếp, số cột, khoảng
  * cách 16px, và vai trò nhóm mà bộ đọc màn hình cần.
  */
+type OlCheckboxRadioGroupRole = 'group' | 'radiogroup';
 declare class OlCheckboxRadioGroup {
     /** Tiêu đề nhóm. Rỗng thì không render, nhưng nhóm vẫn giữ vai trò. */
     readonly label: _angular_core.InputSignal<string>;
@@ -1493,7 +1627,7 @@ declare class OlCheckboxRadioGroup {
     /** Số cột khi `layout='grid'`. Figma `Big cards grid` để 2 cột. */
     readonly columns: _angular_core.InputSignal<number>;
     /** `radiogroup` khi các thẻ bên trong chỉ chọn được một. */
-    readonly role: _angular_core.InputSignal<"group" | "radiogroup">;
+    readonly role: _angular_core.InputSignal<OlCheckboxRadioGroupRole>;
     /**
      * Tên class phải viết NGUYÊN VĂN trong mã. Tailwind v4 quét mã nguồn dạng
      * chữ để sinh CSS, nên `grid-cols-${n}` ghép lúc chạy sẽ không có luật nào
@@ -1513,7 +1647,7 @@ type InputSize = 'sm' | 'base' | 'lg' | 'xl';
  * có nhánh nào, nên `state="warning"` render y hệt `default`. Đã xoá.
  */
 type InputState = 'default' | 'error' | 'success';
-declare class OlInput {
+declare class OlInput implements ControlValueAccessor {
     /** Id tự sinh, dùng khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
     private readonly uid;
@@ -1522,7 +1656,12 @@ declare class OlInput {
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly helperText: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
+     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
+     * từ ngoài KHÔNG đổi — `[disabled]="true"` và `disabled()` vẫn như cũ.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly readonly: _angular_core.InputSignal<boolean>;
     readonly size: _angular_core.InputSignal<InputSize>;
     readonly state: _angular_core.InputSignal<InputState>;
@@ -1553,12 +1692,27 @@ declare class OlInput {
      * lệch 2px so với thiết kế.
      */
     readonly paddingClasses: _angular_core.Signal<string>;
+    /**
+     * Bốn phương thức này là thứ Angular Forms gọi tới. Thiếu chúng thì
+     * `formControlName` / `[formControl]` KHÔNG gắn được — dùng component trong
+     * Reactive Forms là lỗi runtime "No value accessor for form control".
+     */
+    private onChange;
+    private onTouched;
+    writeValue(val: string): void;
+    registerOnChange(fn: (val: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** 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;
     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"; }, 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; }; "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';
-declare class OlTextarea {
+declare class OlTextarea implements ControlValueAccessor {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
     private readonly uid;
@@ -1570,7 +1724,12 @@ declare class OlTextarea {
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly rows: _angular_core.InputSignal<number>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
+     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
+     * từ ngoài KHÔNG đổi — `[disabled]="true"` và `disabled()` vẫn như cũ.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly maxLength: _angular_core.InputSignal<number | undefined>;
     readonly showCharCount: _angular_core.InputSignal<boolean>;
@@ -1581,47 +1740,425 @@ declare class OlTextarea {
     readonly id: _angular_core.InputSignal<string>;
     readonly submitComment: _angular_core.OutputEmitterRef<string>;
     onSubmit(): void;
+    /**
+     * Bốn phương thức này là thứ Angular Forms gọi tới. Thiếu chúng thì
+     * `formControlName` / `[formControl]` KHÔNG gắn được — dùng component trong
+     * Reactive Forms là lỗi runtime "No value accessor for form control".
+     */
+    private onChange;
+    private onTouched;
+    writeValue(val: string): void;
+    registerOnChange(fn: (val: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** 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;
     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"; "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; }; "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>;
 }
 
-type SelectSize = 'sm' | 'md' | 'lg';
+/**
+ * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
+ * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
+ */
+type SelectSize = 'sm' | 'base' | 'lg' | 'md';
 type SelectState = 'default' | 'error' | 'success';
 interface SelectOption {
     label: string;
     value: any;
     disabled?: boolean;
+    /**
+     * Chip của mục này KHÔNG có nút gỡ, và Backspace cũng không gỡ được.
+     *
+     * Khác `disabled`: `disabled` chặn CHỌN mục, `locked` cho chọn nhưng không
+     * cho bỏ. Dùng cho thành viên bắt buộc, nhãn hệ thống, phân loại chỉ đọc.
+     * Nơi gọi vẫn gỡ được bằng cách ghi thẳng vào `value` — đây là ràng buộc ở
+     * giao diện, không phải ở dữ liệu.
+     */
+    locked?: boolean;
+    /**
+     * Icon đứng đầu mục, hiện CẢ trong danh sách LẪN trên ô đóng khi mục này
+     * được chọn. Tên icon theo `OlIconService` (`'star'` hoặc `'lucide:star'`).
+     */
+    icon?: string;
+    /**
+     * Chữ đứng đầu mục — dùng thay `icon` khi phần đầu là văn bản: mã lớp
+     * (`'12A1'`), chữ cái đầu, emoji. Bỏ qua nếu đã có `icon`.
+     */
+    prefix?: string;
+    /**
+     * Class màu cho phần đầu, ví dụ `'text-fg-success'`. Bỏ trống thì phần đầu
+     * theo màu chữ của dòng.
+     *
+     * Nhận CLASS chứ không nhận mã màu: mã màu cứng không đổi theo theme và
+     * không đổi theo chế độ tối — đúng lớp lỗi đã sửa ở `dark:text-white`.
+     */
+    prefixClass?: string;
+    [key: string]: any;
 }
-declare class OlSelect {
-    /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
-     *  aria-describedby luôn nối được với ô nhập. */
-    private readonly uid;
-    readonly inputId: _angular_core.Signal<string>;
-    readonly helperId: _angular_core.Signal<string>;
-    readonly describedBy: _angular_core.Signal<string | null>;
-    readonly ariaInvalid: _angular_core.Signal<"true" | null>;
+/** 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;
+    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;
+}
+/**
+ * `ol-select` — ô chọn có TÌM KIẾM, ĐA CHỌN, GOM NHÓM và CUỘN ẢO.
+ *
+ * Bản trước là thẻ `<select>` HTML gốc bọc khung Figma: 11 input, 0 output,
+ * không tìm kiếm, không đa chọn. Bản này dựng danh sách riêng nên làm được
+ * những việc `<select>` gốc không cho phép.
+ *
+ * ĐỌC `ng-select` 24.1.2 ĐỂ HỌC CÁCH LÀM, KHÔNG CHÉP MÃ và KHÔNG CÀI NÓ:
+ *
+ *   · Cuộn ảo — nó tính `indexByScrollTop = scrollTop / itemHeight`, lấy
+ *     `end = ceil(index) + itemsPerViewport + 1`, rồi chèn đệm trên/dưới cho
+ *     thanh cuộn đúng độ dài. Ở đây làm y hệt nguyên lý ấy bằng `computed`,
+ *     không cần `@angular/cdk`.
+ *   · Vai trò ARIA — `role="listbox"` cho danh sách, `role="option"` cho mục,
+ *     `aria-activedescendant` trỏ mục đang đánh dấu.
+ *   · Gỡ nảy cho ô tìm — gộp nhiều phím thành một lượt gọi.
+ *
+ * KHÁC ng-select ở hai chỗ, cố ý:
+ *   · nó nhận `typeahead` là một `Subject` để nơi gọi tự nối toán tử RxJS;
+ *     ở đây là `output` + `debounceMs` sẵn, nơi gọi chỉ cần một hàm.
+ *   · nó là ô chọn trần, phần nhãn/lỗi người dùng tự dựng; ở đây `label`,
+ *     `helperText`, `state`, `required` nằm sẵn trong component theo Figma.
+ */
+declare class OlSelect implements ControlValueAccessor {
     readonly value: _angular_core.ModelSignal<any>;
     readonly options: _angular_core.InputSignal<SelectOption[]>;
     readonly label: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
     readonly size: _angular_core.InputSignal<SelectSize>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly state: _angular_core.InputSignal<SelectState>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly showAsterisk: _angular_core.InputSignal<boolean>;
     readonly leftIcon: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()`,
+     * cần `set()` được. Cách dùng từ ngoài không đổi.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly searchable: _angular_core.InputSignal<boolean>;
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly labelKey: _angular_core.InputSignal<string>;
+    readonly valueKey: _angular_core.InputSignal<string>;
+    readonly groupBy: _angular_core.InputSignal<string>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    /**
+     * Đẩ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 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.
+     */
+    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. */
+    readonly maxSelectedItems: _angular_core.InputSignal<number>;
+    /** Đóng danh sách ngay sau khi chọn. Mặc định: đơn chọn đóng, đa chọn không. */
+    readonly closeOnSelect: _angular_core.InputSignal<boolean | null>;
+    /** Ẩn mục đã chọn khỏi danh sách (chỉ có nghĩa ở chế độ đa chọn). */
+    readonly hideSelected: _angular_core.InputSignal<boolean>;
+    /**
+     * Cho tạo giá trị chưa có trong `options`: gõ rồi bấm nút thêm, hoặc Enter
+     * khi không có mục nào đang được chọn bằng bàn phím.
+     *
+     * Cùng tên và cùng ý nghĩa với `allowCreate` của `ol-autocomplete` — đừng
+     * đặt tên khác cho cùng một khái niệm.
+     */
+    readonly allowCreate: _angular_core.InputSignal<boolean>;
+    /** Mẫu chữ trên nút tạo mới; `{term}` thay bằng chữ người dùng đang gõ. */
+    readonly createText: _angular_core.InputSignal<string>;
+    /** Kẻ một đường ngăn giữa các nhóm (chỉ có nghĩa khi `groupBy` bật). */
+    readonly groupSeparator: _angular_core.InputSignal<boolean>;
+    /**
+     * Ô tìm nằm ở đâu khi danh sách mở.
+     *
+     *   `'inline'` — thay chỗ nhãn ngay trên ô đóng. MẶC ĐỊNH, giữ nguyên hành
+     *     vi từ trước và cùng lối với `ol-autocomplete`.
+     *   `'panel'`  — nằm ở đầu panel, ô đóng vẫn hiện nhãn đang chọn. Cùng lối
+     *     với `ol-command` và với combobox của reui.
+     *
+     * Để mặc định `'inline'` vì 11 nơi trong repo đang dùng lối đó; đổi mặc
+     * định là đổi hành vi của cả 11 chỗ mà không ai yêu cầu.
+     */
+    readonly searchPosition: _angular_core.InputSignal<"panel" | "inline">;
+    /**
+     * Icon đứng đầu ô tìm khi `searchPosition="panel"`.
+     *
+     * Mặc định `'magnifer'` — cùng icon `ol-command` và `ol-autocomplete` dùng,
+     * và Figma `ol-autocomplete-examples` (#1149:53126) cho thấy **6/6 Type đều
+     * có `search` trong ô nhập**, nên có icon là đúng thiết kế chứ không phải
+     * lựa chọn tuỳ ý.
+     *
+     * KHÔNG ăn theo `icon` của mục đang chọn: đây là icon của Ô TÌM (việc tìm),
+     * còn icon mục nói về chính mục đó — hai nghĩa khác nhau. Đặt `''` để bỏ
+     * hẳn icon.
+     */
+    readonly searchIcon: _angular_core.InputSignal<string>;
+    /**
+     * Chữ đứng đầu ô tìm, dùng thay `searchIcon` khi muốn nhãn văn bản
+     * (`'Lọc:'`, `'Tìm'`). Bỏ qua nếu `searchIcon` còn giá trị.
+     */
+    readonly searchPrefix: _angular_core.InputSignal<string>;
+    /**
+     * Icon CỐ ĐỊNH của ô đóng — luôn hiện, dù đã chọn hay chưa.
+     *
+     * KHÁC `icon` của mục: cái đó đổi theo mục đang chọn, cái này đứng yên.
+     * Dùng khi ô chọn có một nghĩa cố định — `🗓 Ngày thi`, `👤 Người phụ
+     * trách` — và chỉ phần GIÁ TRỊ bên phải đổi. Đây là lối reui dùng cho
+     * `Set start` · `Add label` · `No assignee`.
+     *
+     * Khai cả `triggerIcon` và `icon` của mục thì `triggerIcon` thắng: nhãn cố
+     * định không được nhảy theo mục, nếu không nó hết cố định.
+     */
+    readonly triggerIcon: _angular_core.InputSignal<string>;
+    /**
+     * Nhãn CỐ ĐỊNH đứng trước giá trị trong ô đóng — luôn hiện như
+     * `triggerIcon`. Đặt tên qua input, người dùng cuối không sửa.
+     */
+    readonly triggerLabel: _angular_core.InputSignal<string>;
+    /** Bật thì component NGỪNG tự lọc, chỉ phát `search`. */
+    readonly remoteSearch: _angular_core.InputSignal<boolean>;
+    readonly minTermLength: _angular_core.InputSignal<number>;
+    readonly debounceMs: _angular_core.InputSignal<number>;
+    readonly typeToSearchText: _angular_core.InputSignal<string>;
+    /**
+     * Chỉ vẽ những mục trong tầm nhìn. Danh sách vài nghìn trường/học sinh mà
+     * vẽ hết thì trình duyệt đơ.
+     *
+     * Nguyên lý học từ `ng-select`: biết `itemHeight` cố định thì suy ra được
+     * mục đầu từ `scrollTop`, rồi chèn đệm trên/dưới cho thanh cuộn đúng độ
+     * dài. Không cần `@angular/cdk`.
+     */
+    readonly virtualScroll: _angular_core.InputSignal<boolean>;
+    /** Chiều cao MỘT dòng (px). Phải khớp thật, sai là nhảy chỗ khi cuộn. */
+    readonly itemHeight: _angular_core.InputSignal<number>;
+    /** Vẽ dư bao nhiêu dòng trên/dưới tầm nhìn cho đỡ giật. */
+    readonly bufferAmount: _angular_core.InputSignal<number>;
+    readonly search: _angular_core.OutputEmitterRef<string>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly cleared: _angular_core.OutputEmitterRef<void>;
+    readonly added: _angular_core.OutputEmitterRef<any>;
+    readonly removed: _angular_core.OutputEmitterRef<any>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<any>;
+    optionTemplate?: TemplateRef<any>;
+    labelTemplate?: TemplateRef<any>;
+    /**
+     * HỘP BỌC của lớp nổi — `appendTo="body"` đẩy chính phần tử này ra `<body>`,
+     * nên nó phải chứa CẢ ô tìm (khi `searchPosition="panel"`) lẫn danh sách.
+     * Trỏ vào riêng listbox thì hai phần tách nhau khi đẩy ra body.
+     */
+    private readonly panel;
+    /** Vùng CUỘN — là thẻ `role="listbox"`, không phải hộp bọc. */
+    private readonly danhSach;
+    /** Ô tìm ở đầu panel, để chuyển focus vào khi mở. */
+    private readonly oTimPanel;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    readonly scrollTop: _angular_core.WritableSignal<number>;
+    readonly panelHeight: _angular_core.WritableSignal<number>;
+    private readonly uid;
+    readonly inputId: _angular_core.Signal<string>;
+    readonly helperId: _angular_core.Signal<string>;
+    readonly listboxId: _angular_core.Signal<string>;
+    readonly describedBy: _angular_core.Signal<string | null>;
+    readonly ariaInvalid: _angular_core.Signal<"true" | null>;
+    protected readonly resolvedSize: _angular_core.Signal<SelectSize>;
     /**
      * Padding trái: 10 khi có icon, 3.5 khi không.
-     * Không dùng [class.ps-3.5] trên template vì Angular cắt phần sau dấu
-     * chấm — nó render ra "ps-3" (12px thay vì 14px).
+     * Không dùng `[class.ps-3.5]` vì Angular cắt phần sau dấu chấm — nó render
+     * ra `ps-3` (12px thay vì 14px).
      */
     readonly paddingStartClass: _angular_core.Signal<"ps-10" | "ps-3.5">;
-    readonly id: _angular_core.InputSignal<string>;
+    private onChange;
+    private onTouched;
+    private readonly destroyRef;
+    private readonly elementRef;
+    private readonly overlayContainer;
+    private readonly positioning;
+    /** Hàm trả panel về chỗ cũ + hàm ngắt theo dõi vị trí. */
+    private goPanel;
+    private ngatTheoDoi;
+    private daMo;
+    private hengio;
+    constructor();
+    /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
+    private donDepPanel;
+    /**
+     * `[minTermLength]="undefined"` (bind vào khoá state chưa có) đè mất giá
+     * 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 readonly safeMinTerm;
+    private readonly safeDebounce;
+    private readonly safeItemHeight;
+    private readonly safeBuffer;
+    readonly safeMaxSelected: _angular_core.Signal<number>;
+    getItemLabel(item: any): string;
+    getItemValue(item: any): any;
+    private bangNhau;
+    /**
+     * Giá trị đang chọn, LUÔN trả mảng — template chỉ có một đường đọc.
+     *
+     * CHUỖI RỖNG là CHƯA CHỌN, không phải "đã chọn giá trị rỗng".
+     *
+     * Bản cũ chỉ loại `null`/`undefined`, nên `signal<string>('')` — cách khởi
+     * tạo phổ biến nhất — làm `hasValue()` trả `true`: ô đóng đi vào nhánh "đã
+     * có giá trị" rồi vẽ `<span class="truncate"></span>` RỖNG thay vì
+     * placeholder. Đo trên `/select` ngày 2026-09-18: **6/26 ô chọn** trống
+     * trơn, không chữ không placeholder.
+     *
+     * `0` và `false` thì KHÔNG loại — chúng là giá trị chọn được hợp lệ (mã
+     * lớp 0, cờ bật/tắt). Chỉ `''` mới mơ hồ, và quy ước của các ô nhập là
+     * chuỗi rỗng nghĩa là trống.
+     */
+    readonly selectedValues: _angular_core.Signal<any[]>;
+    isSelected(item: any): boolean;
+    /** Nhãn hiển thị cho một giá trị — tra ngược trong `options`. */
+    getDisplayLabel(val: any): string;
+    /** Nhãn của ô khi đơn chọn: có giá trị thì hiện nhãn, không thì để trống. */
+    readonly singleLabel: _angular_core.Signal<string>;
+    readonly hasValue: _angular_core.Signal<boolean>;
+    /**
+     * Mục dữ liệu đang chọn ở chế độ ĐƠN chọn — để ô đóng vẽ được phần đầu
+     * (`icon`/`prefix`) chứ không chỉ có chữ.
+     *
+     * Trả `null` khi đa chọn: ở đó mỗi giá trị đã thành một chip riêng, phần
+     * đầu vẽ trên từng chip chứ không vẽ một lần cho cả ô.
+     */
+    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;
+    /** Mục này có phần đầu (icon hoặc chữ) để vẽ không. */
+    coPhanDau(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>;
+    /**
+     * Có hiện lối tạo mục mới không.
+     *
+     * Đòi chữ đang gõ KHÔNG trùng nhãn nào đã có (so không phân biệt hoa
+     * 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>;
+    /** Chữ trên nút tạo mới, đã thay `{term}`. */
+    readonly createLabel: _angular_core.Signal<string>;
+    /**
+     * Tạo một mục từ chữ đang gõ rồi chọn luôn.
+     *
+     * KHÔNG tự thêm vào `options` — mảng đó thuộc về nơi gọi, component ghi vào
+     * 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;
+    readonly waitingForTerm: _angular_core.Signal<boolean>;
+    readonly filteredOptions: _angular_core.Signal<SelectOption[]>;
+    /**
+     * Danh sách PHẲNG gồm tiêu đề nhóm xen giữa các mục.
+     *
+     * Phẳng chứ không lồng hai vòng lặp: `activeIndex` và id của mục đề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. Cùng lý do đã ghi ở `ol-autocomplete`.
+     */
+    readonly rows: _angular_core.Signal<Dong[]>;
+    /** 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.
+     *
+     * Đ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;
+    /**
+     * 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
+     * lọt màn hình và vùng đệm hai đầu.
+     *
+     * Tắt `virtualScroll` thì trả trọn danh sách — không có nhánh thứ hai nào
+     * trong template.
+     */
+    readonly viewport: _angular_core.Signal<{
+        rows: Dong[];
+        dauPad: number;
+        cuoiPad: number;
+    }>;
+    onPanelScroll(e: Event): void;
+    onDocumentClick(e: MouseEvent): void;
+    toggle(): void;
+    mo(): void;
+    dong(): void;
+    onSearchInput(val: string): void;
+    /**
+     * Phát `search` có GỠ NẢY. Gõ "nguyễn văn a" là 12 phím — không gỡ nảy thì
+     * 12 lượt gọi API, mà chỉ lượt cuối có ích.
+     */
+    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;
+    selectItem(item: any): void;
+    /**
+     * Mục này có bị khoá không gỡ không.
+     *
+     * Chặn ở ĐÂY chứ không chỉ ẩn nút × trong template: Backspace cũng gọi
+     * `removeValue`, ẩn nút mà không chặn hàm thì gõ Backspace vẫn gỡ được —
+     * khoá chỉ có tác dụng với chuột.
+     */
+    isLocked(val: any): boolean;
+    removeValue(val: any, e: Event): void;
+    clear(e: Event): void;
+    private datGiaTri;
+    onKeyDown(e: KeyboardEvent): void;
+    private diChuyen;
+    /**
+     * 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.
+     */
+    private cuonToiMuc;
+    optionId(i: number): string;
+    readonly activeOptionId: _angular_core.Signal<string | null>;
+    writeValue(val: any): void;
+    registerOnChange(fn: (val: any) => void): void;
+    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; }; "disabled": { "alias": "disabled"; "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; }; }, { "value": "valueChange"; }, never, ["[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; }; "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>;
 }
 
-type CheckboxSize = 'sm' | 'md' | 'lg';
+/**
+ * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
+ * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
+ */
+type CheckboxSize = 'sm' | 'base' | 'lg' | 'md';
 declare class OlCheckbox implements ControlValueAccessor {
     readonly checked: _angular_core.ModelSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
@@ -1633,6 +2170,8 @@ declare class OlCheckbox implements ControlValueAccessor {
      */
     readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly size: _angular_core.InputSignal<CheckboxSize>;
+    /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
+    protected readonly resolvedSize: _angular_core.Signal<CheckboxSize>;
     readonly indeterminate: _angular_core.InputSignal<boolean>;
     readonly card: _angular_core.InputSignal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
@@ -1664,7 +2203,11 @@ declare class OlCheckbox implements ControlValueAccessor {
     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>;
 }
 
-type RadioSize = 'sm' | 'md' | 'lg';
+/**
+ * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
+ * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
+ */
+type RadioSize = 'sm' | 'base' | 'lg' | 'md';
 declare class OlRadio implements ControlValueAccessor {
     readonly name: _angular_core.InputSignal<string>;
     readonly value: _angular_core.InputSignal<any>;
@@ -1679,6 +2222,8 @@ declare class OlRadio implements ControlValueAccessor {
      */
     readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly size: _angular_core.InputSignal<RadioSize>;
+    /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
+    protected readonly resolvedSize: _angular_core.Signal<RadioSize>;
     readonly card: _angular_core.InputSignal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
     readonly checked: _angular_core.InputSignal<boolean | null>;
@@ -1755,7 +2300,8 @@ type TogglePosition = 'start' | 'end';
  * `Settings`, và đoạn mô tả của `Integration` là 16px thay vì 14px. Ở đây dùng
  * 4px và 14px cho cả ba — thiết kế tự mâu thuẫn, không có bản đúng để theo.
  */
-declare class OlToggleInput {
+type OlToggleInputAlign = 'start' | 'center';
+declare class OlToggleInput implements ControlValueAccessor {
     readonly checked: _angular_core.ModelSignal<boolean>;
     readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
@@ -1766,8 +2312,22 @@ declare class OlToggleInput {
     readonly icon: _angular_core.InputSignal<string>;
     readonly togglePosition: _angular_core.InputSignal<TogglePosition>;
     /** Figma `Settings` canh giữa theo chiều dọc, hai variant kia canh đầu. */
-    readonly align: _angular_core.InputSignal<"center" | "start">;
+    readonly align: _angular_core.InputSignal<OlToggleInputAlign>;
     readonly cardClasses: _angular_core.Signal<string>;
+    /**
+     * Thiếu bốn phương thức này thì `formControlName` / `[formControl]` KHÔNG
+     * gắn được — dùng trong Reactive Forms là lỗi runtime "No value accessor
+     * for form control".
+     */
+    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;
+    constructor();
+    writeValue(val: boolean): void;
+    registerOnChange(fn: (val: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlToggleInput, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToggleInput, "ol-toggle-input", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "togglePosition": { "alias": "togglePosition"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; }, never, ["[logo]"], true, never>;
 }
@@ -1791,7 +2351,11 @@ declare class OlToggleGroup {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToggleGroup, "ol-toggle-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type FileInputSize = 'sm' | 'md' | 'lg';
+/**
+ * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
+ * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
+ */
+type FileInputSize = 'sm' | 'base' | 'lg' | 'md';
 declare class OlFileInput {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
@@ -1807,6 +2371,8 @@ declare class OlFileInput {
     readonly title: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<FileInputSize>;
+    /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
+    protected readonly resolvedSize: _angular_core.Signal<FileInputSize>;
     /**
      * Padding theo size. Không dùng [class.p-1.5] trên template vì Angular
      * cắt phần sau dấu chấm — nó render ra "p-1" (4px thay vì 6px).
@@ -1928,8 +2494,12 @@ declare class OlFloatingLabel implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFloatingLabel, "ol-floating-label", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "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; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "labelBg": { "alias": "labelBg"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "prefixVariant": { "alias": "prefixVariant"; "required": false; "isSignal": true; }; "suffixVariant": { "alias": "suffixVariant"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
-type InputCounterSize = 'sm' | 'md' | 'lg';
-declare class OlInputCounter {
+/**
+ * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
+ * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
+ */
+type InputCounterSize = 'sm' | 'base' | 'lg' | 'md';
+declare class OlInputCounter implements ControlValueAccessor {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
     private readonly uid;
@@ -1941,15 +2511,60 @@ declare class OlInputCounter {
     readonly min: _angular_core.InputSignal<number>;
     readonly max: _angular_core.InputSignal<number>;
     readonly step: _angular_core.InputSignal<number>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
+     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
+     * từ ngoài KHÔNG đổi.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly size: _angular_core.InputSignal<InputCounterSize>;
+    /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
+    protected readonly resolvedSize: _angular_core.Signal<InputCounterSize>;
     readonly label: _angular_core.InputSignal<string>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Ba cờ dưới đây khớp trục `Type` của Figma `ol-input-counter` (13 Type,
+     * đọc 2026-09-16). Phần lớn Type chỉ khác BỀ RỘNG nên không cần input —
+     * `With buttons` 144px · `Stacked placeholder` 192px · `With spaced buttons`
+     * 320px đều là một ô hai nút. Ba cái này thì khác CẤU TRÚC thật:
+     *
+     *   Inline        variant HORIZONTAL — nhãn nằm CẠNH khối, không nằm trên
+     *   Ghost input   ô nhập không nền không viền, khối gap 0 thay vì -1
+     *   One button    một nút bên phải thay vì hai
+     */
+    /** Nhãn nằm cạnh khối thay vì phía trên (Figma Type=Inline). */
+    readonly inline: _angular_core.InputSignal<boolean>;
+    /** Bỏ nền và viền của khối (Figma Type=Ghost input). */
+    readonly ghost: _angular_core.InputSignal<boolean>;
+    /** Chỉ hiện nút tăng, bỏ nút giảm (Figma Type=One button). */
+    readonly oneButton: _angular_core.InputSignal<boolean>;
+    /** Vỏ ngoài: `inline` xếp ngang, mặc định xếp dọc. */
+    protected readonly wrapperClasses: _angular_core.Signal<"w-full" | "flex w-full items-center gap-3">;
+    /** Nhãn: `inline` bỏ margin dưới vì nó nằm cạnh, không nằm trên. */
+    protected readonly labelClasses: _angular_core.Signal<"shrink-0 text-sm font-medium text-heading" | "block mb-1.5 text-sm font-medium text-heading">;
+    /** Khối nút+ô: `ghost` bỏ nền, viền và đổ bóng. */
+    protected readonly groupClasses: _angular_core.Signal<"relative inline-flex items-center overflow-hidden" | "relative inline-flex items-center rounded-md shadow-xs border border-default bg-neutral-primary overflow-hidden">;
+    /** Nút trong chế độ `ghost` cũng phải bỏ nền và đường ngăn. */
+    protected readonly ghostNut: _angular_core.Signal<"" | "bg-transparent border-0">;
     increment(): void;
     decrement(): void;
+    /**
+     * Thiếu bốn phương thức này thì `formControlName` / `[formControl]` KHÔNG
+     * gắn được — dùng trong Reactive Forms là lỗi runtime "No value accessor
+     * for form control".
+     */
+    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;
+    constructor();
+    writeValue(val: number): void;
+    registerOnChange(fn: (val: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlInputCounter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlInputCounter, "ol-input-counter", never, { "value": { "alias": "value"; "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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlInputCounter, "ol-input-counter", never, { "value": { "alias": "value"; "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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "ghost": { "alias": "ghost"; "required": false; "isSignal": true; }; "oneButton": { "alias": "oneButton"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1962,7 +2577,7 @@ declare class OlInputCounter {
  * responsive nào, nên cỡ ô nay do nơi gọi chọn qua `size`.
  */
 type OtpInputSize = 'sm' | 'base' | 'lg' | 'xl';
-declare class OlOtpInput {
+declare class OlOtpInput implements ControlValueAccessor {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
     private readonly uid;
@@ -1972,7 +2587,12 @@ declare class OlOtpInput {
     readonly ariaInvalid: _angular_core.Signal<null>;
     readonly length: _angular_core.InputSignal<number>;
     readonly value: _angular_core.ModelSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
+     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
+     * từ ngoài KHÔNG đổi.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly masked: _angular_core.InputSignal<boolean>;
@@ -1998,8 +2618,22 @@ declare class OlOtpInput {
     onKeyDown(event: KeyboardEvent, index: number): void;
     onPaste(event: ClipboardEvent): void;
     private focusIndex;
+    /**
+     * Thiếu bốn phương thức này thì `formControlName` / `[formControl]` KHÔNG
+     * gắn được — dùng trong Reactive Forms là lỗi runtime "No value accessor
+     * for form control".
+     */
+    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;
+    constructor();
+    writeValue(val: string): void;
+    registerOnChange(fn: (val: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlOtpInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlOtpInput, "ol-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlOtpInput, "ol-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "completed": "completed"; }, never, never, true, never>;
 }
 
 /**
@@ -2009,7 +2643,7 @@ declare class OlOtpInput {
  * trục size nào và dùng `rounded-xl` (24px).
  */
 type TagInputSize = 'sm' | 'base' | 'lg' | 'xl';
-declare class OlTagInput {
+declare class OlTagInput implements ControlValueAccessor {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
     private readonly uid;
@@ -2020,7 +2654,12 @@ declare class OlTagInput {
     readonly tags: _angular_core.ModelSignal<string[]>;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
+     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
+     * từ ngoài KHÔNG đổi — `[disabled]="true"` và `disabled()` vẫn như cũ.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly maxTags: _angular_core.InputSignal<number | undefined>;
     readonly id: _angular_core.InputSignal<string>;
@@ -2038,11 +2677,27 @@ declare class OlTagInput {
     addTag(tagText: string): void;
     removeTag(index: number): void;
     focusInput(): void;
+    /**
+     * Bốn phương thức này là thứ Angular Forms gọi tới. Thiếu chúng thì
+     * `formControlName` / `[formControl]` KHÔNG gắn được — dùng component trong
+     * Reactive Forms là lỗi runtime "No value accessor for form control".
+     */
+    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;
+    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;
     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"; }, never, never, true, 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>;
 }
 
-declare class OlRichTextEditor {
+declare class OlRichTextEditor implements ControlValueAccessor {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
      *  aria-describedby luôn nối được với ô nhập. */
     private readonly uid;
@@ -2054,7 +2709,12 @@ declare class OlRichTextEditor {
     readonly content: _angular_core.ModelSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
+     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
+     * từ ngoài KHÔNG đổi.
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly minHeight: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string>;
@@ -2065,8 +2725,22 @@ declare class OlRichTextEditor {
     insertList(ordered: boolean): void;
     insertLink(): void;
     insertCodeBlock(): void;
+    /**
+     * Thiếu bốn phương thức này thì `formControlName` / `[formControl]` KHÔNG
+     * gắn được — dùng trong Reactive Forms là lỗi runtime "No value accessor
+     * for form control".
+     */
+    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;
+    constructor();
+    writeValue(val: string): void;
+    registerOnChange(fn: (val: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlRichTextEditor, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRichTextEditor, "ol-rich-text-editor", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "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; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "content": "contentChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRichTextEditor, "ol-rich-text-editor", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "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; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "content": "contentChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 type TimepickerFormat = '24h' | '12h';
@@ -2083,6 +2757,7 @@ interface TimeObject {
     period?: 'AM' | 'PM';
     formatted: string;
 }
+type OlTimepickerAddonType = 'none' | 'left' | 'right';
 declare class OlTimepicker implements ControlValueAccessor {
     private readonly elementRef;
     readonly value: _angular_core.ModelSignal<string>;
@@ -2104,8 +2779,21 @@ declare class OlTimepicker implements ControlValueAccessor {
     readonly errorText: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string>;
     readonly minuteStep: _angular_core.InputSignal<number>;
+    /**
+     * Đẩ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 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.
+     */
+    readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly showPresets: _angular_core.InputSignal<boolean>;
-    readonly addonType: _angular_core.InputSignal<"none" | "left" | "right">;
+    readonly addonType: _angular_core.InputSignal<OlTimepickerAddonType>;
     readonly addonText: _angular_core.InputSignal<string>;
     readonly addonIcon: _angular_core.InputSignal<string>;
     private readonly generatedId;
@@ -2113,6 +2801,12 @@ declare class OlTimepicker implements ControlValueAccessor {
     readonly helperId: _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;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly selectedHour: _angular_core.WritableSignal<number>;
     readonly selectedMinute: _angular_core.WritableSignal<number>;
@@ -2136,6 +2830,8 @@ declare class OlTimepicker implements ControlValueAccessor {
     private onTouched;
     private emitAllChanges;
     constructor(elementRef: ElementRef);
+    /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
+    private donDepPanel;
     onDocumentClick(event: MouseEvent): void;
     toggleDropdown(): void;
     private scrollToSelected;
@@ -2154,10 +2850,14 @@ declare class OlTimepicker implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTimepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTimepicker, "ol-timepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "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; }; "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>;
 }
 
-type AutocompleteSize = 'sm' | 'md' | 'lg';
+/**
+ * Thang cỡ theo Figma: `sm | base | lg`. `'md'` là BÍ DANH của `'base'`,
+ * giữ cho mã cũ chạy tiếp và sẽ bỏ ở bản sau — dùng `'base'` cho mã mới.
+ */
+type AutocompleteSize = 'sm' | 'base' | 'lg' | 'md';
 type AutocompleteState = 'default' | 'error' | 'success';
 interface AutocompleteOption {
     label: string;
@@ -2187,6 +2887,8 @@ declare class OlAutocomplete implements ControlValueAccessor {
     readonly readonly: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly size: _angular_core.InputSignal<AutocompleteSize>;
+    /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
+    protected readonly resolvedSize: _angular_core.Signal<AutocompleteSize>;
     readonly state: _angular_core.InputSignal<AutocompleteState>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly showAsterisk: _angular_core.InputSignal<boolean>;
@@ -2195,8 +2897,50 @@ declare class OlAutocomplete implements ControlValueAccessor {
     readonly id: _angular_core.InputSignal<string>;
     readonly allowCreate: _angular_core.InputSignal<boolean>;
     readonly emptyText: _angular_core.InputSignal<string>;
+    /**
+     * Đẩ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 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.
+     */
+    readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly groupBy: _angular_core.InputSignal<string>;
+    /**
+     * LỌC TỪ XA. Bật lên thì component NGỪNG tự lọc `options` — nó chỉ phát
+     * `search` và hiển thị đúng những gì nơi gọi truyền lại vào `options`.
+     *
+     * Học cấu trúc `typeahead` của `ng-select` nhưng không mượn mã: ng-select
+     * nhận một `Subject` để nơi gọi tự nối toán tử RxJS. Ở đây dùng `output` +
+     * `minTermLength` + `debounceMs` để nơi gọi chỉ cần một hàm bắt sự kiện,
+     * không phải biết RxJS — hợp với lối signal của olkit.
+     */
+    readonly remoteSearch: _angular_core.InputSignal<boolean>;
+    /** Số ký tự tối thiểu mới phát `search`. Dưới mức này danh sách để trống. */
+    readonly minTermLength: _angular_core.InputSignal<number>;
+    /** Chờ ngừng gõ bao lâu (ms) mới phát `search`. 0 = phát ngay mỗi phím. */
+    readonly debounceMs: _angular_core.InputSignal<number>;
+    /** Chữ hiện khi `remoteSearch` đang chờ đủ `minTermLength`. */
+    readonly typeToSearchText: _angular_core.InputSignal<string>;
     readonly createOption: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Bảy sự kiện dưới đây trước nay KHÔNG có — nơi dùng chỉ bắt được
+     * `createOption`, nên không biết lúc nào người dùng mở danh sách, gỡ một thẻ
+     * hay xoá trắng. Đối chiếu `ng-select` 24.1.2 (đọc `.d.ts` từ npm): nó có 16
+     * output, ở đây lấy 7 cái thật sự dùng tới.
+     */
+    readonly search: _angular_core.OutputEmitterRef<string>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly cleared: _angular_core.OutputEmitterRef<void>;
+    readonly added: _angular_core.OutputEmitterRef<any>;
+    readonly removed: _angular_core.OutputEmitterRef<any>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<any>;
     optionTemplate?: TemplateRef<any>;
     private readonly generatedId;
     protected readonly inputId: _angular_core.Signal<string>;
@@ -2213,8 +2957,35 @@ declare class OlAutocomplete implements ControlValueAccessor {
     readonly activeIndex: _angular_core.WritableSignal<number>;
     private onChange;
     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 readonly destroyRef;
+    /** Trạng thái mở ở lượt chạy trước — để `effect` chỉ phát khi ĐỔI. */
+    private daMo;
+    /** Hẹn giờ gỡ nảy cho `search`. */
+    private hengio;
     constructor(elementRef: ElementRef);
+    /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
+    private donDepPanel;
     onDocumentClick(event: MouseEvent): void;
+    /**
+     * Chưa gõ đủ `minTermLength` ở chế độ từ xa — template hiện
+     * `typeToSearchText` thay vì `emptyText`. Hai thông báo khác nghĩa hẳn nhau:
+     * "gõ thêm đi" không phải "không tìm thấy".
+     */
+    readonly waitingForTerm: _angular_core.Signal<boolean>;
+    /**
+     * `minTermLength` đã lọc sạch. `[minTermLength]="undefined"` (bind vào một
+     * khoá state chưa có) đè mất giá trị mặc định, và `x < undefined` là `NaN`
+     * — luôn `false`, nên chế độ chờ không bao giờ bật. Cùng lớp lỗi BUG-009.
+     */
+    private readonly safeMinTerm;
+    /** `debounceMs` đã lọc sạch — xem lý do ở `safeMinTerm`. */
+    private readonly safeDebounce;
     readonly filteredOptions: _angular_core.Signal<any[]>;
     /**
      * Gom gợi ý thành nhóm theo khoá `groupBy`, cùng lối với `labelKey`/`valueKey`
@@ -2244,6 +3015,17 @@ declare class OlAutocomplete implements ControlValueAccessor {
     private areValuesEqual;
     onInputFocus(): void;
     onSearchChange(val: string): void;
+    /**
+     * Phát `search` có GỠ NẢY. Gõ "nguyễn văn a" là 12 phím — không gỡ nảy thì
+     * 12 lượt gọi API, mà chỉ lượt cuối có ích.
+     *
+     * Huỷ hẹn giờ cũ trước khi đặt mới, và huỷ nốt khi component bị huỷ
+     * (`destroyRef` ở constructor) — nếu không, gõ xong rồi rời trang thì
+     * `emit` chạy trên một component đã chết.
+     *
+     * Dưới `minTermLength` thì KHÔNG phát: nơi gọi không phải tự kiểm lại.
+     */
+    private phatSearch;
     selectOption(item: any): void;
     removeTag(valToRemove: any, event: MouseEvent): void;
     clearAll(event: MouseEvent): void;
@@ -2255,7 +3037,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAutocomplete, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAutocomplete, "ol-autocomplete", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "createOption": "createOption"; }, ["optionTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAutocomplete, "ol-autocomplete", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "createOption": "createOption"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate"], never, true, never>;
 }
 
 declare class OlKbd {
@@ -2295,13 +3077,32 @@ declare class OlListGroupItem {
      */
     private readonly parentListGroup;
     readonly hasDivider: _angular_core.Signal<boolean>;
+    /**
+     * Màu chữ theo trục `State` của Figma #1149:70209 (đọc 2026-09-16):
+     *
+     *   Initial       #4a5565  -> `text-body`
+     *   Hover/Active  #101828  -> `text-heading`
+     *   Disabled      #99a1af  -> `text-fg-disabled`
+     *
+     * Đo trước khi sửa: mục thường ra `rgb(16,24,40)` — tức là ĐÃ bằng màu
+     * Hover/Active, nên hover không đổi gì và mục thường đậm hơn Figma. Nguyên
+     * nhân: component không đặt màu cho trạng thái thường, chữ thừa kế màu của
+     * trang. `Disabled` thì vốn đã khớp đúng.
+     *
+     * Gộp thành MỘT chuỗi thay vì nhiều `[class.X]`: class tĩnh và class binding
+     * cùng thuộc tính tranh nhau theo thứ tự luật CSS chứ không theo thứ tự viết,
+     * và hai `[class.X]` trùng tên bị Angular gộp — cái sau thắng im lặng.
+     */
+    readonly textClasses: _angular_core.Signal<"text-heading font-semibold" | "cursor-not-allowed text-fg-disabled" | "text-body hover:text-heading">;
     handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlListGroupItem, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlListGroupItem, "ol-list-group-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
 }
 
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ModalSize = 'sm' | 'base' | 'lg' | 'xl' | '2xl';
 type ModalPlacement = 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type OlModalBackdrop = 'static' | 'dynamic';
+type OlModalRole = 'dialog' | 'alertdialog';
 declare class OlModal {
     private readonly focusTrap;
     private readonly destroyRef;
@@ -2318,14 +3119,14 @@ declare class OlModal {
     readonly title: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<ModalSize>;
     readonly dismissible: _angular_core.InputSignal<boolean>;
-    readonly backdrop: _angular_core.InputSignal<"static" | "dynamic">;
+    readonly backdrop: _angular_core.InputSignal<OlModalBackdrop>;
     readonly placement: _angular_core.InputSignal<ModalPlacement>;
     /**
      * Vai trò ARIA. `alertdialog` dành cho hộp thoại BẮT BUỘC trả lời — bộ đọc
      * màn hình đọc luôn phần mô tả và không cho lướt qua như `dialog` thường.
      * `ol-alert-dialog` đặt giá trị này; nơi khác cứ để mặc định.
      */
-    readonly role: _angular_core.InputSignal<"dialog" | "alertdialog">;
+    readonly role: _angular_core.InputSignal<OlModalRole>;
     readonly opened: _angular_core.OutputEmitterRef<void>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
     constructor();
@@ -2369,6 +3170,17 @@ type ModalFooterLayout = 'buttons' | 'three-buttons' | 'buttons-links' | 'pagina
  * Dải nút hành động cuối Modal — khớp Figma `ol-modal-footer`.
  * Figma có 4 biến thể: Buttons, 3 buttons, Buttons & links, Pagination.
  * Nút thật do nơi dùng truyền vào qua <ng-content>; component lo bố cục.
+ *
+ * KHÔNG lắp vào slot `[footer]` của `ol-modal`. Slot đó ĐÃ nằm sẵn trong một
+ * khung `p-5 border-t bg-neutral-secondary` do chính `ol-modal` dựng, nên lắp
+ * thêm component này vào là LỒNG HAI KHUNG. Đo /modal (2026-09-16): đệm cộng
+ * dồn 20 + 20 = 40px, hai viền trên 1px chồng nhau, nền lặp hai lần.
+ *
+ * Dùng nó khi tự dựng hộp thoại (không qua `ol-modal`), hoặc trong `ol-drawer`
+ * — `ol-drawer` chỉ có `<ng-content />` TRẦN nên ghép vừa khít. Đó là lý do
+ * `ol-drawer-footer` dùng được 9 lượt trong docs còn cái này 0 lượt.
+ *
+ * Với `ol-modal`, cách đúng là truyền nút trực tiếp: `<div footer>…</div>`.
  */
 declare class OlModalFooter {
     readonly layout: _angular_core.InputSignal<ModalFooterLayout>;
@@ -2457,6 +3269,18 @@ declare class OlPagination {
      * xảy ra. `type` đặt tường minh vẫn thắng; cờ chỉ điền vào chỗ trống.
      */
     readonly effectiveType: _angular_core.Signal<PaginationType>;
+    /**
+     * Trang đang xem — gộp `pageIndex` và bí danh `currentPage`.
+     *
+     * Bản cũ viết `pageIndex() || currentPage() || 1`. Vì `pageIndex` mặc định
+     * là **1** (giá trị thật, không phải 0), vế trái LUÔN đúng, nên
+     * `currentPage` chỉ có tác dụng khi `pageIndex` bằng 0 — tức không bao giờ
+     * trong cách dùng bình thường. Đo /pagination: đặt `[currentPage]="5"` mà
+     * trang vẫn ở 1, bí danh công khai nhưng vô dụng.
+     *
+     * Nay so với MẶC ĐỊNH: cái nào khác 1 thì đó là ý người dùng. `goToPage`
+     * đặt cả hai nên sau lần bấm đầu chúng luôn bằng nhau, không có xung đột.
+     */
     readonly effectivePageIndex: _angular_core.Signal<number>;
     /**
      * Luôn trả số nguyên trong [1, 5000].
@@ -2471,14 +3295,48 @@ declare class OlPagination {
      * `ol-carousel`.
      */
     readonly calculatedTotalPages: _angular_core.Signal<number>;
-    /** Mảng cho `@for` — dựng ở đây thay vì `[].constructor()` trong template. */
+    /**
+     * Mảng cho `@for` của ô chọn trang — dựng ở đây thay vì `[].constructor()`.
+     *
+     * CHẶN TRẦN 200 mục. `calculatedTotalPages` đã chặn ở 5000, đủ để không treo
+     * trang, nhưng 5000 `<option>` trong MỘT `<select>` thì không ai chọn nổi:
+     * đo 2026-09-17 với `total=100000` ra đúng 5000 thẻ `<option>`.
+     *
+     * Khi vượt trần, ô chọn chỉ liệt kê cửa sổ quanh trang hiện tại — người dùng
+     * vẫn nhảy xa được bằng Type `With input` (ô nhập số trang). Luôn kèm trang
+     * hiện tại, nếu không `[ngModel]` không khớp option nào và ô chọn hiện rỗng.
+     */
     readonly pageList: _angular_core.Signal<number[]>;
     readonly startRecord: _angular_core.Signal<number>;
     readonly endRecord: _angular_core.Signal<number>;
     readonly visiblePages: _angular_core.Signal<(number | "ellipsis")[]>;
+    /**
+     * Khoá `track` cho dãy nút số.
+     *
+     * `track $index` khiến Angular tái dùng CÙNG phần tử DOM cho một ý nghĩa
+     * khác. Nội dung vẫn vẽ đúng nên nhìn không ra, nhưng FOCUS thì ở lại:
+     * đo 2026-09-17 — người dùng tab tới nút "4", đổi sang trang 10, focus vẫn
+     * nằm trên đúng phần tử đó mà nút giờ mang số **"10"**. Bấm Enter là nhảy
+     * tới một trang khác hẳn trang mình đang nhìn.
+     *
+     * Không track thuần theo `page` được: `'ellipsis'` xuất hiện HAI lần trong
+     * cùng một danh sách (`[1, …, 9, 10, 11, …, 20]`) nên khoá sẽ trùng. Ghép
+     * thêm vị trí cho riêng nó là đủ phân biệt mà vẫn giữ khoá ổn định cho số.
+     */
+    trackPage(index: number, page: number | 'ellipsis'): string;
     goToPage(page: number): void;
     prev(): void;
     next(): void;
+    /**
+     * Đổi số dòng mỗi trang. Nhận thẳng SỐ vì template dùng `(ngModelChange)`,
+     * không còn `(change)` với `event.target`.
+     *
+     * `goToPage(1)` KHÔNG phát được sự kiện khi đang ở trang 1 (nó bỏ qua nếu
+     * trang không đổi), nên đặt `pageIndex` trực tiếp: đổi cỡ trang luôn phải
+     * đưa về trang đầu, còn đang ở đâu thì đưa về không phải việc của người gọi.
+     */
+    onPageSizeChange(newSize: number): void;
+    /** @deprecated Dùng `onPageSizeChange(number)`. Giữ cho mã ngoài đang gọi. */
     onPageSizeSelect(event: Event): void;
     handleJump(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlPagination, never>;
@@ -2503,6 +3361,19 @@ declare class OlPopover {
      */
     readonly headingLevel: _angular_core.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
     readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Đẩ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 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.
+     */
+    readonly appendTo: _angular_core.InputSignal<"body" | null>;
     readonly placement: _angular_core.InputSignal<PopoverPlacement>;
     readonly trigger: _angular_core.InputSignal<PopoverTrigger>;
     readonly offset: _angular_core.InputSignal<number>;
@@ -2517,7 +3388,10 @@ declare class OlPopover {
     readonly closeDelay: _angular_core.InputSignal<number>;
     readonly opened: _angular_core.OutputEmitterRef<void>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly overlayContainer;
     private cleanupAutoUpdate;
+    /** Hàm trả panel về chỗ cũ khi đóng. */
+    private goPanel;
     constructor();
     toggle(): void;
     open(): void;
@@ -2537,7 +3411,7 @@ declare class OlPopover {
     onTriggerClick(): void;
     private stopAutoUpdate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlPopover, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlPopover, "ol-popover", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["[trigger]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlPopover, "ol-popover", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["[trigger]", "*"], true, never>;
 }
 
 /**
@@ -2574,7 +3448,7 @@ declare class OlPopoverContent {
  * `ol-button` màu `light`/`purple`.
  */
 type ProgressColor = 'brand' | 'gray' | 'dark' | 'success' | 'danger' | 'warning' | 'purple' | 'indigo';
-type ProgressSize = 'sm' | 'md' | 'lg' | 'xl';
+type ProgressSize = 'sm' | 'base' | 'lg' | 'xl';
 /** Trục `Type` của Figma: nhãn nằm trên, cùng hàng, hay dưới thanh. */
 type ProgressLabelPosition = 'top' | 'side' | 'bottom';
 declare class OlProgress {
@@ -2587,13 +3461,13 @@ declare class OlProgress {
      * trên template: Angular cắt phần sau dấu chấm nên [class.h-1.5] render
      * ra "h-1" (4px thay vì 6px) và [class.h-2.5] ra "h-2" (8px thay vì 10px).
      */
-    readonly heightClass: _angular_core.Signal<"h-1.5" | "h-4" | "h-6" | "h-2.5">;
+    readonly heightClass: _angular_core.Signal<"h-4" | "h-1.5" | "h-6" | "h-2.5">;
     /**
      * Gom màu vào MỘT chuỗi thay vì nhiều `[class.bg-X]`: hai class nền cùng
      * lúc thì trình duyệt chọn theo thứ tự luật trong file CSS chứ không theo
      * thứ tự class, nên nhánh phải loại trừ nhau ngay từ chỗ sinh chuỗi.
      */
-    readonly barColorClass: _angular_core.Signal<"bg-warning-surface" | "bg-success-surface" | "bg-danger-surface" | "bg-brand" | "bg-dark" | "bg-purple-600" | "bg-gray-surface" | "bg-indigo-600">;
+    readonly barColorClass: _angular_core.Signal<"bg-warning-surface" | "bg-success-surface" | "bg-danger-surface" | "bg-brand" | "bg-dark" | "bg-gray-surface" | "bg-purple-600" | "bg-indigo-600">;
     readonly label: _angular_core.InputSignal<string>;
     readonly showProgress: _angular_core.InputSignal<boolean>;
     readonly hasLabel: _angular_core.Signal<boolean>;
@@ -2641,7 +3515,7 @@ declare class OlRating {
      * Cũng chặn số quá lớn: `max = 999999` dựng gần một triệu phần tử và treo
      * trang. Trần 50 sao là quá đủ cho mọi thang đánh giá.
      */
-    private readonly maxSach;
+    private readonly safeMax;
     readonly stars: _angular_core.Signal<number[]>;
     /** Figma vẽ 0..max, tức max + 1 nút. */
     readonly radioValues: _angular_core.Signal<number[]>;
@@ -2739,6 +3613,10 @@ declare class OlSidebarSubmenu {
  *   <ol-skeleton type="text" [width]="i === 4 ? '60%' : '100%'" />
  * }
  */
+type OlSkeletonType = 'text' | 'avatar' | 'card' | 'button' | 'image' | 'custom';
+type OlSkeletonRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type OlSkeletonAnimation = 'pulse' | 'wave' | 'none';
+type OlSkeletonAspectRatio = '16/9' | '4/3';
 declare class OlSkeleton {
     /**
      * Loại skeleton
@@ -2749,17 +3627,17 @@ declare class OlSkeleton {
      * - image: Tỷ lệ 16:9 hoặc 4:3
      * - custom: Tùy chỉnh width/height
      */
-    type: _angular_core.InputSignal<"custom" | "button" | "image" | "text" | "avatar" | "card">;
+    readonly type: _angular_core.InputSignal<OlSkeletonType>;
     /**
      * Chiều rộng của skeleton
      * Mặc định: 100% (hoặc theo preset của type)
      */
-    width: _angular_core.InputSignal<string | undefined>;
+    readonly width: _angular_core.InputSignal<string | undefined>;
     /**
      * Chiều cao của skeleton
      * Mặc định: theo preset của type
      */
-    height: _angular_core.InputSignal<string | undefined>;
+    readonly height: _angular_core.InputSignal<string | undefined>;
     /**
      * Bo tròn góc
      * - none: rounded-none
@@ -2769,20 +3647,20 @@ declare class OlSkeleton {
      * - xl: rounded-xl
      * - full: rounded-full (cho avatar)
      */
-    rounded: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl" | "none" | "full">;
+    readonly rounded: _angular_core.InputSignal<OlSkeletonRounded>;
     /**
      * Loại animation
      * - pulse: Nhấp nháy opacity (default)
      * - wave: Gradient di chuyển ngang
      * - none: Static không animation
      */
-    animation: _angular_core.InputSignal<"none" | "pulse" | "wave">;
+    readonly animation: _angular_core.InputSignal<OlSkeletonAnimation>;
     /**
      * Aspect ratio cho image type
      * - 16/9: Landscape (default)
      * - 4/3: Standard
      */
-    aspectRatio: _angular_core.InputSignal<"16/9" | "4/3">;
+    readonly aspectRatio: _angular_core.InputSignal<OlSkeletonAspectRatio>;
     /**
      * Computed classes cho skeleton
      */
@@ -2816,28 +3694,28 @@ interface SpeedDialAction {
 
 declare class OlSpeedDial {
     private readonly elementRef;
-    direction: _angular_core.InputSignal<SpeedDialDirection>;
-    type: _angular_core.InputSignal<SpeedDialType>;
-    trigger: _angular_core.InputSignal<SpeedDialTrigger>;
-    color: _angular_core.InputSignal<SpeedDialColor>;
-    icon: _angular_core.InputSignal<string>;
-    ariaLabel: _angular_core.InputSignal<string>;
-    tooltip: _angular_core.InputSignal<string | undefined>;
-    disabled: _angular_core.InputSignal<boolean>;
-    backdrop: _angular_core.InputSignal<boolean>;
-    closeOnClickOutside: _angular_core.InputSignal<boolean>;
-    closeOnEscape: _angular_core.InputSignal<boolean>;
-    actions: _angular_core.InputSignal<SpeedDialAction[]>;
-    customClass: _angular_core.InputSignal<string>;
-    isOpen: _angular_core.ModelSignal<boolean>;
-    onOpen: _angular_core.OutputEmitterRef<void>;
-    onClose: _angular_core.OutputEmitterRef<void>;
-    actionClick: _angular_core.OutputEmitterRef<SpeedDialAction>;
+    readonly direction: _angular_core.InputSignal<SpeedDialDirection>;
+    readonly type: _angular_core.InputSignal<SpeedDialType>;
+    readonly trigger: _angular_core.InputSignal<SpeedDialTrigger>;
+    readonly color: _angular_core.InputSignal<SpeedDialColor>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly tooltip: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly backdrop: _angular_core.InputSignal<boolean>;
+    readonly closeOnClickOutside: _angular_core.InputSignal<boolean>;
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    readonly actions: _angular_core.InputSignal<SpeedDialAction[]>;
+    readonly customClass: _angular_core.InputSignal<string>;
+    readonly isOpen: _angular_core.ModelSignal<boolean>;
+    readonly onOpen: _angular_core.OutputEmitterRef<void>;
+    readonly onClose: _angular_core.OutputEmitterRef<void>;
+    readonly actionClick: _angular_core.OutputEmitterRef<SpeedDialAction>;
     private hoverTimeout?;
     containerClasses: _angular_core.Signal<string>;
     itemsContainerClasses: _angular_core.Signal<string>;
     triggerButtonClasses: _angular_core.Signal<string>;
-    tooltipPositionForItems: _angular_core.Signal<"left" | "top">;
+    tooltipPositionForItems: _angular_core.Signal<"top" | "left">;
     toggle(): void;
     open(): void;
     close(): void;
@@ -2851,15 +3729,16 @@ declare class OlSpeedDial {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSpeedDial, "ol-speed-dial", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "onOpen": "onOpen"; "onClose": "onClose"; "actionClick": "actionClick"; }, never, ["*"], true, never>;
 }
 
+type OlSpeedDialTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 declare class OlSpeedDialItem {
-    label: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<string | undefined>;
-    tooltip: _angular_core.InputSignal<string | undefined>;
-    tooltipPosition: _angular_core.InputSignal<"left" | "right" | "top" | "bottom">;
-    disabled: _angular_core.InputSignal<boolean>;
-    type: _angular_core.InputSignal<SpeedDialType>;
-    customClass: _angular_core.InputSignal<string>;
-    onClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    readonly tooltip: _angular_core.InputSignal<string | undefined>;
+    readonly tooltipPosition: _angular_core.InputSignal<OlSpeedDialTooltipPosition>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly type: _angular_core.InputSignal<SpeedDialType>;
+    readonly customClass: _angular_core.InputSignal<string>;
+    readonly onClick: _angular_core.OutputEmitterRef<MouseEvent>;
     handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSpeedDialItem, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSpeedDialItem, "ol-speed-dial-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
@@ -2880,6 +3759,9 @@ declare class OlSpeedDialItem {
  * // Pulse spinner
  * <ol-spinner variant="pulse" size="xl" color="success" />
  */
+type OlSpinnerVariant = 'circle' | 'dots' | 'pulse';
+type OlSpinnerSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+type OlSpinnerColor = 'brand' | 'white' | 'success' | 'warning' | 'danger' | 'gray';
 declare class OlSpinner {
     /**
      * Variant của spinner
@@ -2887,7 +3769,7 @@ declare class OlSpinner {
      * - dots: 3 chấm tròn nhấp nhô
      * - pulse: Hình tròn nhấp nháy scale
      */
-    variant: _angular_core.InputSignal<"circle" | "pulse" | "dots">;
+    readonly variant: _angular_core.InputSignal<OlSpinnerVariant>;
     /**
      * Kích thước spinner
      * - xs: 12px (w-3 h-3)
@@ -2896,7 +3778,7 @@ declare class OlSpinner {
      * - lg: 36px (w-9 h-9)
      * - xl: 48px (w-12 h-12)
      */
-    size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+    readonly size: _angular_core.InputSignal<OlSpinnerSize>;
     /**
      * Màu sắc của spinner.
      *
@@ -2913,11 +3795,11 @@ declare class OlSpinner {
      * - danger: border-rose-600      (ngoài Figma)
      * - gray: border-gray-400        (ngoài Figma)
      */
-    color: _angular_core.InputSignal<"danger" | "brand" | "success" | "warning" | "white" | "gray">;
+    readonly color: _angular_core.InputSignal<OlSpinnerColor>;
     /**
      * Aria label cho accessibility
      */
-    ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     /**
      * Computed classes cho spinner container
      */
@@ -2964,6 +3846,81 @@ declare class OlTable {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTable, "ol-table", never, { "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "stripedColumns": { "alias": "stripedColumns"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Một hàng dữ liệu trong `ol-table`, mang được 5 trạng thái của Figma
+ * `ol-table-row` (trục `Trạng thái`, đọc 2026-09-16):
+ *
+ *   Mặc định  nền `bg-neutral-primary`          · viền dưới `border-default-subtle`
+ *   Sọc       nền `bg-neutral-secondary-medium` (#f9fafb)
+ *   Di chuột  nền `bg-neutral-tertiary`         (#f3f4f6)
+ *   Đã chọn   nền `bg-brand-softer`             (#f5f8ff)
+ *   Vô hiệu   nền như Mặc định, opacity 0,55
+ *
+ * `ol-table` vẫn là VỎ BỌC — người dùng tự viết `<thead>`/`<tbody>`/`<td>`.
+ * Component này chỉ thay chỗ của `<tr>`, không phải data-grid.
+ *
+ * HAI BẪY KỸ THUẬT đã đo trên trình duyệt thật (2026-09-16):
+ *
+ * 1. **Parser HTML đá thẻ lạ ra khỏi bảng.** Chỉ `<tr>` được nằm trong
+ *    `<tbody>`; gán chuỗi qua `innerHTML` thì `<ol-table-row>` bị "foster
+ *    parenting" đẩy ra ngoài bảng và hàng biến mất. Angular KHÔNG dính — nó
+ *    dựng DOM bằng `createElement`/`appendChild`, không qua parser, đo lại
+ *    `parentElement` vẫn là `tbody`. Nhưng ai copy mã mẫu vào một file `.html`
+ *    TĨNH sẽ thấy hàng mất, nên docs phải ghi rõ.
+ *
+ * 2. **Thẻ tuỳ biến mặc định `display: inline` làm ô co sập.** Đo bảng 300px,
+ *    3 ô: mặc định ra 12·11·13px cao 20; `table-row` ra 99·95·105px cao 25.
+ *    `contents` cũng cho ô đúng nhưng host cao 0 — không có hộp để tô nền, mà
+ *    4/5 trạng thái đều cần tô nền lên chính hàng. Vì vậy host BẮT BUỘC
+ *    `display: table-row`. Ràng buộc này vô hình: build xanh, chỉ đo DOM mới
+ *    thấy — đã khoá bằng spec.
+ */
+declare class OlTableRow {
+    /** Hàng đang được chọn — Figma `Trạng thái=Đã chọn`. */
+    readonly selected: _angular_core.InputSignal<boolean>;
+    /** Hàng bị vô hiệu — Figma `Trạng thái=Vô hiệu`, opacity 0,55. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Hàng nằm ở vị trí sọc — Figma `Trạng thái=Sọc`. */
+    readonly striped: _angular_core.InputSignal<boolean>;
+    /** Bật nền khi rê chuột — Figma `Trạng thái=Di chuột`. */
+    readonly hoverable: _angular_core.InputSignal<boolean>;
+    protected readonly rowClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTableRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTableRow, "ol-table-row", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Khung chờ của bảng — hiện trong lúc dữ liệu đang về.
+ *
+ * Figma `ol-table-loading` (trang ⤷ Tables, đọc 2026-09-16) ghi rõ mục đích:
+ * *"giữ đúng số cột và chiều cao dòng của bảng thật để không giật bố cục khi
+ * dữ liệu về. Không có dữ liệu thì chuyển sang Bảng rỗng."*
+ *
+ * Số đo lấy từ Figma: đầu bảng cao 38px nền `bg-brand-softer` (#f5f8ff), mỗi
+ * dòng cao 40px nền trắng, viền dưới `border-default-subtle`.
+ *
+ * Đây là MẢNH GHÉP RỜI, không phải trạng thái bên trong `ol-table`: người dùng
+ * tự quyết định hiện nó hay hiện bảng thật, đúng lối "khung + tự đặt `<tr>`".
+ */
+declare class OlTableLoading {
+    /** Số cột — phải khớp bảng thật, nếu không bố cục sẽ giật khi dữ liệu về. */
+    readonly columns: _angular_core.InputSignal<number>;
+    /** Số dòng giả. Figma vẽ 5. */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Vẽ cả hàng tiêu đề giả. */
+    readonly showHeader: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * `Array(n)` ném `Invalid array length` với số âm hoặc lẻ, và treo máy với
+     * số rất lớn — cùng họ lỗi BUG-010. Kẹp về khoảng dùng được trước khi dựng.
+     */
+    private readonly sach;
+    protected readonly colList: _angular_core.Signal<number[]>;
+    protected readonly rowList: _angular_core.Signal<number[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTableLoading, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTableLoading, "ol-table-loading", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class OlTabItem {
     readonly tabId: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
@@ -2984,8 +3941,25 @@ declare class OlTabItem {
     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>;
 }
 
-type TabsVariant = 'default' | 'underline' | 'border-bottom' | 'pills' | 'button' | 'boxed' | 'button-group' | 'vertical' | 'vertical-pills' | 'vertical-list' | 'card';
-type TabsSize = 'sm' | 'md' | 'lg';
+/**
+ * Kiểu hiển thị nhóm tab.
+ *
+ * Figma `ol-tabs` trục Type có 7 giá trị (đọc 2026-09-16):
+ *   Default · Pills · Button · Button group · Border bottom ·
+ *   Vertical with list item · Vertical pills
+ *
+ * `boxed` và `vertical` là biến thể code THÊM — ngoài Figma nhưng CÓ nhánh
+ * xử lý thật, giữ lại.
+ *
+ * `underline` là BÍ DANH của `border-bottom`: template đã xử lý nó ở 3 chỗ
+ * (`variant() === 'border-bottom' || variant() === 'underline'`) mà union
+ * lại thiếu — truyền vào là build đỏ dù mã chạy đúng. Nay khai đủ.
+ *
+ * `card` đã GỠ: chỉ khai trong union, KHÔNG nhánh nào xử lý. Đo DOM
+ * (/tabs, 2026-09-16): `variant="card"` render class y hệt `default`.
+ */
+type TabsVariant = 'default' | 'underline' | 'border-bottom' | 'pills' | 'button' | 'boxed' | 'button-group' | 'vertical' | 'vertical-pills' | 'vertical-list';
+type TabsSize = 'sm' | 'base' | 'lg';
 declare class OlTabs {
     readonly variant: _angular_core.InputSignal<TabsVariant>;
     readonly size: _angular_core.InputSignal<TabsSize>;
@@ -3000,6 +3974,21 @@ declare class OlTabs {
         title: string;
     }>;
     readonly items: _angular_core.Signal<readonly OlTabItem[]>;
+    /**
+     * Tab đang xem — gộp `selectedIndex` và bí danh `activeTab`.
+     *
+     * Bản cũ kiểm `typeof sel === 'number'` rồi trả luôn. Nhưng
+     * `selectedIndex` khai `model<number>(0)` nên điều kiện đó LUÔN đúng —
+     * `activeTab` không bao giờ được đọc. Hệ quả: đặt `activeTab = 2` ra tab 0,
+     * và đường chọn theo ID (`activeTab = 'tab-c'`) — tính năng RIÊNG của bí
+     * danh này — chưa bao giờ chạy.
+     *
+     * Cùng lỗi với `currentPage` của `ol-pagination`: alias công khai mà vô
+     * dụng vì vế trái luôn có giá trị thật.
+     *
+     * Nay so với MẶC ĐỊNH (0): cái nào khác 0 thì đó là ý người dùng.
+     * `selectTab` đặt cả hai nên sau lần bấm đầu chúng luôn bằng nhau.
+     */
     readonly currentIndex: _angular_core.Signal<number>;
     readonly currentItem: _angular_core.Signal<OlTabItem>;
     readonly isMobileDropdown: _angular_core.Signal<boolean>;
@@ -3073,7 +4062,7 @@ declare class OlToastService {
 }
 
 declare class OlToast implements OnInit, OnDestroy {
-    config: _angular_core.InputSignal<Toast>;
+    readonly config: _angular_core.InputSignal<Toast>;
     /**
      * Bậc thẻ tiêu đề (`<h1>`..`<h6>`). Mặc định **4** để giữ nguyên hành vi cũ.
      *
@@ -3081,7 +4070,7 @@ declare class OlToast implements OnInit, OnDestroy {
      * nhảy bậc và nơi gọi không sửa được.
      */
     readonly headingLevel: _angular_core.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
-    dismiss: _angular_core.OutputEmitterRef<void>;
+    readonly dismiss: _angular_core.OutputEmitterRef<void>;
     progress: _angular_core.WritableSignal<number>;
     private progressInterval?;
     private isPaused;
@@ -3110,6 +4099,40 @@ declare class OlToastContainer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToastContainer, "ol-toast-container", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Internal Tooltip Component
+ * Renders the actual tooltip content with theme and arrow support
+ * Used internally by OlTooltipDirective
+ */
+/**
+ * Tông màu tooltip. Khai ở ĐÂY và `OlTooltipDirective` dùng lại — hai nơi
+ * cùng một union, tách thành hai kiểu riêng là để người dùng phải nhớ chúng
+ * bằng nhau.
+ */
+type OlTooltipTheme = 'dark' | 'light' | 'brand';
+/** Hướng hiện tooltip so với phần tử đích. */
+type OlTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+declare class OlTooltip {
+    /** Tooltip content text */
+    readonly content: _angular_core.InputSignal<string>;
+    /** Theme variant */
+    readonly theme: _angular_core.InputSignal<OlTooltipTheme>;
+    /** Tooltip ID for ARIA */
+    readonly tooltipId: _angular_core.InputSignal<string>;
+    /** Show arrow */
+    readonly arrow: _angular_core.InputSignal<boolean>;
+    /**
+     * Computed tooltip classes based on theme
+     */
+    tooltipClasses: _angular_core.Signal<string>;
+    /**
+     * Computed arrow classes based on theme
+     */
+    arrowClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTooltip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTooltip, "ol-tooltip-internal", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "tooltipId": { "alias": "tooltipId"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Tooltip Directive
  * Provides accessible tooltips with Floating UI positioning
@@ -3132,17 +4155,17 @@ declare class OlTooltipDirective implements OnDestroy {
     private readonly injector;
     private readonly positioningService;
     /** Tooltip content */
-    olTooltip: _angular_core.InputSignal<string>;
+    readonly olTooltip: _angular_core.InputSignal<string>;
     /** Tooltip position */
-    tooltipPosition: _angular_core.InputSignal<"left" | "right" | "top" | "bottom">;
+    readonly tooltipPosition: _angular_core.InputSignal<OlTooltipPosition>;
     /** Tooltip theme */
-    tooltipTheme: _angular_core.InputSignal<"brand" | "dark" | "light">;
+    readonly tooltipTheme: _angular_core.InputSignal<OlTooltipTheme>;
     /** Delay before showing tooltip (ms) */
-    tooltipDelay: _angular_core.InputSignal<number>;
+    readonly tooltipDelay: _angular_core.InputSignal<number>;
     /** Disable tooltip */
-    tooltipDisabled: _angular_core.InputSignal<boolean>;
+    readonly tooltipDisabled: _angular_core.InputSignal<boolean>;
     /** Show arrow */
-    tooltipArrow: _angular_core.InputSignal<boolean>;
+    readonly tooltipArrow: _angular_core.InputSignal<boolean>;
     private showTimeout?;
     private hideTimeout?;
     private touchTimeout?;
@@ -3198,33 +4221,7 @@ declare class OlTooltipDirective implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OlTooltipDirective, "[olTooltip]", never, { "olTooltip": { "alias": "olTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipTheme": { "alias": "tooltipTheme"; "required": false; "isSignal": true; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; "isSignal": true; }; "tooltipArrow": { "alias": "tooltipArrow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * Internal Tooltip Component
- * Renders the actual tooltip content with theme and arrow support
- * Used internally by OlTooltipDirective
- */
-declare class OlTooltip {
-    /** Tooltip content text */
-    content: _angular_core.InputSignal<string>;
-    /** Theme variant */
-    theme: _angular_core.InputSignal<"brand" | "dark" | "light">;
-    /** Tooltip ID for ARIA */
-    tooltipId: _angular_core.InputSignal<string>;
-    /** Show arrow */
-    arrow: _angular_core.InputSignal<boolean>;
-    /**
-     * Computed tooltip classes based on theme
-     */
-    tooltipClasses: _angular_core.Signal<string>;
-    /**
-     * Computed arrow classes based on theme
-     */
-    arrowClasses: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTooltip, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTooltip, "ol-tooltip-internal", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "tooltipId": { "alias": "tooltipId"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | number;
+type IconSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | number;
 type IconColor = 'current' | 'brand' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'white' | 'muted' | string;
 type IconVariant = 'linear' | 'bold' | 'line-duotone' | 'file-type' | 'brand' | 'custom' | string;
 declare class OlIcon {
@@ -3295,11 +4292,12 @@ declare class OlIconService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
+type OlBottomNavPosition = 'fixed' | 'relative';
 declare class OlBottomNav {
     readonly bordered: _angular_core.InputSignal<boolean>;
     readonly shadow: _angular_core.InputSignal<boolean>;
     readonly safeArea: _angular_core.InputSignal<boolean>;
-    readonly position: _angular_core.InputSignal<"relative" | "fixed">;
+    readonly position: _angular_core.InputSignal<OlBottomNavPosition>;
     readonly navClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlBottomNav, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBottomNav, "ol-bottom-nav", never, { "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "safeArea": { "alias": "safeArea"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -3378,17 +4376,44 @@ interface OlTreeNode {
     data?: any;
 }
 
+type OlTreeSelectionMode = 'single' | 'multiple';
+type OlTreeToggleIcon = 'chevron' | 'plus-minus';
 declare class OlTree {
     readonly nodes: _angular_core.ModelSignal<OlTreeNode[]>;
     readonly checkable: _angular_core.InputSignal<boolean>;
-    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple">;
+    readonly selectionMode: _angular_core.InputSignal<OlTreeSelectionMode>;
     readonly bordered: _angular_core.InputSignal<boolean>;
-    readonly toggleIcon: _angular_core.InputSignal<"plus-minus" | "chevron">;
+    readonly toggleIcon: _angular_core.InputSignal<OlTreeToggleIcon>;
     readonly nodeSelect: _angular_core.OutputEmitterRef<OlTreeNode>;
     readonly nodeCheck: _angular_core.OutputEmitterRef<{
         node: OlTreeNode;
         checked: boolean;
     }>;
+    /**
+     * Node đang giữ điểm dừng Tab — ROVING TABINDEX theo chuẩn WAI-ARIA Tree
+     * View: đúng MỘT node mang `tabindex="0"`, mọi node còn lại `-1`.
+     *
+     * Trước đây mọi node đều `tabindex="0"`: cây 200 node thì người dùng bàn
+     * phím phải Tab 200 lần mới qua được. Figma ghi thẳng trong phần lưu ý —
+     * "Focus dùng viền 2px border-focus, BẮT BUỘC cho điều hướng bằng bàn phím"
+     * — nhưng mã không có một `keydown` nào (đo 2026-09-16).
+     *
+     * `null` nghĩa là chưa ai focus: khi đó node ĐẦU TIÊN giữ điểm dừng.
+     */
+    readonly focusedId: _angular_core.WritableSignal<string | null>;
+    /** Danh sách node ĐANG NHÌN THẤY, theo đúng thứ tự trên màn hình. */
+    private readonly visibleNodes;
+    /** Node nào thật sự giữ `tabindex="0"` lúc này. */
+    readonly tabbableId: _angular_core.Signal<string | null>;
+    /**
+     * Điều hướng bàn phím theo WAI-ARIA Tree View.
+     *
+     * Không dùng `preventDefault` cho phím không nhận: Tab phải thoát khỏi cây
+     * được, và chữ cái không khớp thì để nguyên cho trình duyệt.
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    /** Cha trực tiếp của một node, `null` nếu node ở mức gốc. */
+    private timCha;
     handleNodeClick(node: OlTreeNode): void;
     handleNodeCheck(event: {
         node: OlTreeNode;
@@ -3404,18 +4429,34 @@ declare class OlTree {
     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>;
 }
 
+type OlTreeNodeSelectionMode = 'single' | 'multiple';
+type OlTreeNodeToggleIcon = 'chevron' | 'plus-minus';
 declare class OlTreeNodeItem {
     readonly node: _angular_core.InputSignal<OlTreeNode>;
     readonly checkable: _angular_core.InputSignal<boolean>;
-    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple">;
-    readonly toggleIcon: _angular_core.InputSignal<"plus-minus" | "chevron">;
+    readonly selectionMode: _angular_core.InputSignal<OlTreeNodeSelectionMode>;
+    readonly toggleIcon: _angular_core.InputSignal<OlTreeNodeToggleIcon>;
     readonly level: _angular_core.InputSignal<number>;
+    /** Node nào giữ điểm dừng Tab — xem `focusedId` trong `ol-tree`. */
+    readonly tabbableId: _angular_core.InputSignal<string | null>;
+    /** Node nào đang được điều hướng tới; dùng để gọi `.focus()` thật. */
+    readonly focusedId: _angular_core.InputSignal<string | null>;
     readonly nodeClick: _angular_core.OutputEmitterRef<OlTreeNode>;
     readonly nodeCheck: _angular_core.OutputEmitterRef<{
         node: OlTreeNode;
         checked: boolean;
     }>;
     readonly toggleExpand: _angular_core.OutputEmitterRef<OlTreeNode>;
+    /** Người dùng bấm hoặc Tab vào node này — vỏ cây ghi lại làm điểm dừng. */
+    readonly nodeFocus: _angular_core.OutputEmitterRef<string>;
+    private readonly hang;
+    /** Roving tabindex: đúng một node trong cả cây mang `0`. */
+    protected readonly tabIndex: _angular_core.Signal<0 | -1>;
+    /** Mức sâu cho `aria-level` — WAI-ARIA đếm từ 1, `level` đếm từ 0. */
+    protected readonly ariaLevel: _angular_core.Signal<number>;
+    /** `aria-expanded` CHỈ đặt cho node có con; node lá để `null`. */
+    protected readonly ariaExpanded: _angular_core.Signal<boolean | null>;
+    constructor();
     /**
      * Nút cha có con chọn một phần thì ô của nó phải là dấu gạch.
      *
@@ -3430,12 +4471,12 @@ declare class OlTreeNodeItem {
      * Đếm ĐỆ QUY, không chỉ con trực tiếp: cháu chọn mà con chưa, thì con vẫn
      * phải là gạch chứ không phải trống.
      */
-    readonly motPhan: _angular_core.Signal<boolean>;
+    readonly indeterminate: _angular_core.Signal<boolean>;
     handleToggle(event: MouseEvent): void;
     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; }; }, { "nodeClick": "nodeClick"; "nodeCheck": "nodeCheck"; "toggleExpand": "toggleExpand"; }, never, never, true, 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>;
 }
 
 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';
@@ -3869,19 +4910,21 @@ declare class OlDeviceMockup {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDeviceMockup, "ol-device-mockup", never, { "device": { "alias": "device"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+type OlGalleryGap = 'sm' | 'md' | 'lg';
 declare class OlGallery {
     readonly cols: _angular_core.InputSignal<2 | 3 | 4 | 5>;
-    readonly gap: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly gap: _angular_core.InputSignal<OlGalleryGap>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlGallery, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlGallery, "ol-gallery", never, { "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+type OlGalleryRatio = 'square' | 'video' | 'portrait' | 'auto';
 declare class OlGalleryItem {
     readonly src: _angular_core.InputSignal<string>;
     readonly alt: _angular_core.InputSignal<string>;
     readonly title: _angular_core.InputSignal<string>;
     readonly subtitle: _angular_core.InputSignal<string>;
-    readonly ratio: _angular_core.InputSignal<"video" | "square" | "auto" | "portrait">;
+    readonly ratio: _angular_core.InputSignal<OlGalleryRatio>;
     readonly itemClick: _angular_core.OutputEmitterRef<void>;
     handleClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlGalleryItem, never>;
@@ -4133,6 +5176,60 @@ declare class OlPositioningService {
     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, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay };
-export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, OlTreeNode, 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 };
+/**
+ * Container CHUNG cho mọi lớp nổi, gắn thẳng vào `<body>`.
+ *
+ * VÌ SAO CẦN — đo trên `/modal` ngày 2026-09-17, dropdown đặt trong modal hỏng
+ * vì HAI lý do chồng nhau, và z-index chỉ chữa được một:
+ *
+ *   1. Khung modal có `z-index: 80` + `backdrop-filter: blur(4px)` nên nó TẠO
+ *      STACKING CONTEXT. Dropdown nằm bên trong chỉ xếp lớp so với anh em
+ *      CÙNG trong modal — đặt `z-index: 9999` cũng không thoát ra được.
+ *   2. Hộp thoại có `overflow: hidden` (giữ bo góc) nên phần dropdown tràn ra
+ *      bị CẮT THẬT. Không z-index nào chữa được điều này.
+ *
+ * CÁCH BA THƯ VIỆN LỚN LÀM (đọc mã tải từ npm, không nói từ trí nhớ):
+ *
+ *   · Angular CDK 22.1.7 — `document.body` (20 lượt gọi), một container chung
+ *     `cdk-overlay-container`, `z-index: 1000`.
+ *   · PrimeNG 22.1.1 — `appendTo` + `ZIndexUtils.generateZIndex` cấp z-index
+ *     ĐỘNG theo ngăn xếp (menu 1000 · modal 1100), không phải số cố định.
+ *   · ng-select 24 — `appendTo` + CDK Overlay, tức dùng lại cách của CDK.
+ *
+ * Cả ba cùng một nguyên lý: ĐẨY LỚP NỔI RA `<body>`. Không ai cố chữa bằng
+ * z-index đơn thuần.
+ *
+ * Ở đây lấy container chung của CDK cộng z-index động của PrimeNG — thang tĩnh
+ * không xử lý được ca modal chồng modal, mỗi lớp mở sau phải nằm trên lớp
+ * trước.
+ */
+declare class OlOverlayContainer {
+    private readonly doc;
+    private host;
+    /**
+     * Bộ đếm cấp z-index tăng dần.
+     *
+     * Mốc 1000 nằm TRÊN toàn bộ thang token của olkit (cao nhất là
+     * `--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. */
+    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.
+     */
+    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ũ.
+     */
+    gan(el: HTMLElement): () => void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlOverlayContainer, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+export { CHAT_BUBBLE_STATUS, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayBase, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay };
+export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, OlAvatarStatusPosition, OlBottomNavPosition, OlButtonType, OlCheckboxRadioFormAlign, OlCheckboxRadioGroupRole, OlDateRangePickerVariant, OlGalleryGap, OlGalleryRatio, OlHelperType, OlModalBackdrop, OlModalRole, OlSkeletonAnimation, OlSkeletonAspectRatio, OlSkeletonRounded, OlSkeletonType, OlSpeedDialTooltipPosition, OlTimepickerAddonType, OlToggleInputAlign, OlTreeNode, OlTreeNodeSelectionMode, OlTreeNodeToggleIcon, OlTreeSelectionMode, OlTreeToggleIcon, OtpInputSize, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SelectOption, SelectSize, SelectState, SeparatorOrientation, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TagInputSize, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToggleColor, TogglePosition, ToggleSize, YearCell };
 //# sourceMappingURL=edmicro-olkit.d.ts.map