@edmicro/olkit 1.1.5 → 1.1.7

package/types/edmicro-olkit.d.ts

@@ -131,6 +131,17 @@ declare class OlAlert {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAlert, "ol-alert", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, { "onDismiss": "onDismiss"; }, never, ["[badge]", "*", "[alertActions]"], true, never>;
 }
 
+/**
+ * Bỏ dấu tiếng Việt để gõ không dấu vẫn tìm ra.
+ *
+ * Phải xử lý `đ`/`Đ` riêng: chúng KHÔNG phải `d` cộng dấu phụ nên `NFD` không
+ * tách ra được, `đăng nhập` sẽ không khớp `dang nhap` nếu bỏ bước này.
+ *
+ * Dùng chung cho mọi ô có tìm kiếm (`ol-command`, `ol-select`); `ol-command`
+ * export lại để giữ API công khai từ 1.1.1.
+ */
+declare function stripDiacritics(text: string): string;
+
 /** Một lệnh trong bảng. `keywords` để tìm được bằng từ khác với chữ hiển thị. */
 interface CommandItem {
     id: string;
@@ -145,13 +156,7 @@ interface CommandGroup {
     label: string;
     items: CommandItem[];
 }
-/**
- * Bỏ dấu tiếng Việt để gõ không dấu vẫn tìm ra.
- *
- * Phải xử lý `đ`/`Đ` riêng: chúng KHÔNG phải `d` cộng dấu phụ nên `NFD` không
- * tách ra được, `đăng nhập` sẽ không khớp `dang nhap` nếu bỏ bước này.
- */
-declare function stripDiacritics(text: string): string;
+
 /**
  * @deprecated Dùng `stripDiacritics`. Giữ lại vì hàm này ĐÃ publish trong
  * `@edmicro/olkit@1.1.1` (kiểm bằng `npm pack` rồi đọc `types/*.d.ts` — có
@@ -246,6 +251,106 @@ 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>;
 }
 
+/** Một mục trong mục lục. */
+interface OlScrollspyItem {
+    /** `id` của phần tử trên trang mà mục này trỏ tới. */
+    id: string;
+    label: string;
+    /** Cấp thụt lề: 1 là mục chính, 2 là mục con. */
+    level?: 1 | 2;
+}
+type OlScrollspyOrientation = 'vertical' | 'horizontal';
+/**
+ * Mục lục tự đánh dấu phần đang xem.
+ *
+ * Chưa có node Figma — dựng theo design system, mục đang xem dùng
+ * `text-fg-brand` và một vạch `bg-brand` bên trái (dọc) hoặc dưới (ngang).
+ *
+ * ## Vì sao `IntersectionObserver` chứ không nghe sự kiện `scroll`
+ *
+ * Nghe `scroll` thì mỗi lần cuộn là một lần chạy tay tính `getBoundingClientRect()`
+ * cho MỌI phần — trang 63 mục như docs olkit là 63 phép đo mỗi khung hình.
+ * `IntersectionObserver` để trình duyệt tự báo, và chỉ báo phần nào đổi trạng
+ * thái.
+ *
+ * ## `rootMargin` quyết định "đang xem" nghĩa là gì
+ *
+ * Mặc định `-20% 0px -70% 0px` thu vùng quan sát thành một dải ngang mỏng ở
+ * khoảng 1/4 trên màn hình. Không thu thì phần nào chạm mép dưới màn hình cũng
+ * tính là đang xem, và cuộn một nhịp có thể sáng ba mục cùng lúc.
+ *
+ * Dải mỏng cũng xử lý được phần NGẮN hơn màn hình: nếu đợi phần chiếm trọn
+ * viewport mới tính, mục ngắn không bao giờ được đánh dấu.
+ *
+ * ## Phần cuối trang không bao giờ chạm dải
+ *
+ * Cuộn hết cỡ mà phần cuối vẫn nằm dưới dải quan sát thì nó không sáng. Nên
+ * khi chạm đáy trang, component đánh dấu thẳng mục cuối — `atBottom()`.
+ *
+ * ## Lưu ý khi viết test
+ *
+ * jsdom KHÔNG có `IntersectionObserver` (đo 2026-09-26: `typeof` trả
+ * `'undefined'`). Component tự bảo vệ bằng cách kiểm trước khi dùng, nên spec
+ * dựng được và khoá được phần hiển thị; còn việc đánh dấu theo cuộn phải
+ * nghiệm thu trên trình duyệt. Đừng giả lập `IntersectionObserver` rồi tưởng
+ * đã kiểm hành vi thật.
+ */
+declare class OlScrollspy {
+    private readonly elementRef;
+    private readonly destroyRef;
+    readonly items: _angular_core.InputSignal<OlScrollspyItem[]>;
+    readonly orientation: _angular_core.InputSignal<OlScrollspyOrientation>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Vùng quan sát, theo cú pháp `rootMargin` của `IntersectionObserver`.
+     *
+     * Đổi giá trị này khi trang có thanh trên cố định: `-80px 0px -70% 0px` đẩy
+     * mép trên xuống dưới thanh đó.
+     */
+    readonly rootMargin: _angular_core.InputSignal<string>;
+    /** Cuộn mượt khi bấm mục. Tắt nếu trang tự lo việc cuộn. */
+    readonly smoothScroll: _angular_core.InputSignal<boolean>;
+    /**
+     * Khung cuộn chứa nội dung. `null` (mặc định) nghĩa là cả trang.
+     *
+     * BẮT BUỘC truyền khi nội dung nằm trong một khung `overflow-y-auto` riêng:
+     * `IntersectionObserver` mặc định quan sát theo VIEWPORT, nên phần nào cũng
+     * "đang hiện" khi khung con nằm trong tầm mắt — đo được: cuộn khung con từ
+     * đầu tới đáy mà không mục nào sáng.
+     */
+    readonly scrollRoot: _angular_core.InputSignal<HTMLElement | null>;
+    private readonly currentId;
+    /** `id` của phần đang xem. Rỗng khi chưa phần nào vào vùng quan sát. */
+    readonly activeId: _angular_core.Signal<string>;
+    readonly activeChange: _angular_core.OutputEmitterRef<string>;
+    private observer;
+    constructor();
+    private startObserving;
+    /** Khung (hoặc trang) đã cuộn tới sát đáy chưa — sai số 4px cho tròn số lẻ. */
+    private atBottom;
+    private stopObserving;
+    private setActive;
+    /**
+     * Bấm mục thì cuộn tới phần tương ứng và đánh dấu NGAY.
+     *
+     * Không đợi `IntersectionObserver` báo: cuộn mượt mất vài trăm mili giây, và
+     * trong quãng đó mục vừa bấm chưa sáng — người dùng tưởng bấm hụt.
+     */
+    protected onClick(event: MouseEvent, item: OlScrollspyItem): void;
+    protected readonly navClasses: _angular_core.Signal<"block" | "block w-full overflow-x-auto">;
+    protected readonly listClasses: _angular_core.Signal<"flex flex-col gap-0.5 border-s border-default ps-0" | "flex items-center gap-1 border-b border-default">;
+    /**
+     * Class của một mục.
+     *
+     * Gom vào MỘT chuỗi qua ba-ngôi thay vì nhiều `[class.x]` rời: hai class
+     * cùng thuộc tính thì trình duyệt chọn theo thứ tự luật trong file CSS chứ
+     * không theo thứ tự viết, kết quả đổi theo bản build.
+     */
+    protected linkClasses(item: OlScrollspyItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlScrollspy, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlScrollspy, "ol-scrollspy", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "rootMargin": { "alias": "rootMargin"; "required": false; "isSignal": true; }; "smoothScroll": { "alias": "smoothScroll"; "required": false; "isSignal": true; }; "scrollRoot": { "alias": "scrollRoot"; "required": false; "isSignal": true; }; }, { "activeChange": "activeChange"; }, never, never, true, never>;
+}
+
 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';
@@ -952,6 +1057,178 @@ interface DatepickerPreset {
     range: () => [Date, Date];
 }
 
+/**
+ * Bảng chuẩn kích thước và trạng thái cho MỌI ô nhập của thư viện.
+ *
+ * ## Vì sao cần
+ *
+ * Chín component họ form từng tự khai kích thước riêng, và chúng trôi khỏi
+ * nhau. Đo ngày 2026-09-23 trên chín component:
+ *
+ *   thiếu cỡ `xl`   3 component  (select · autocomplete · input-counter)
+ *   nền sai          3 component  (autocomplete · timepicker · datepicker)
+ *   viền sai         5 component
+ *   đệm ngang lệch   2px ở cả ba cỡ đầu (datepicker so với input)
+ *   cỡ chữ `sm` lệch 2px (14px vs 12px)
+ *
+ * Nền và viền lệch **chỉ lộ ở chế độ tối**: sáng thì `--bg-secondary` và
+ * `--bg-secondary-medium` cùng ra `#f9fafb`, tối thì `gray-950` vs `gray-800`.
+ * Nên lỗi sống rất lâu — người dựng nhìn chế độ sáng, thấy giống hệt nhau.
+ *
+ * Đọc từ đây thì thêm ô nhập mới cũng tự khớp, và đổi thang chỉ sửa một chỗ.
+ *
+ * ## Không gộp chiều cao với đệm ngang
+ *
+ * Hai thứ tách riêng vì component có icon cần `ps-*` thay `px-*`. Gộp lại thì
+ * mỗi component phải cắt chuỗi ra để bỏ phần đệm — dễ sai hơn là ghép vào.
+ */
+/** Bốn cỡ của họ form. Trùng `InputSize`, `SelectSize`, `DatepickerSize`. */
+type FieldSize = 'sm' | 'base' | 'lg' | 'xl';
+/** Ba trạng thái hiển thị. */
+type FieldState = 'default' | 'error' | 'success';
+/**
+ * Chiều cao theo cỡ — **cố định bằng `h-*`**, không suy từ `py-*`.
+ *
+ * Suy từ đệm dọc thì chiều cao phụ thuộc `line-height` của cỡ chữ và không
+ * bao giờ khớp thang chung. Đo trước khi chuẩn hoá: datepicker ra 34/42/54
+ * trong khi input ra 36/40/48 — đặt cạnh nhau là so le ngay, nặng nhất ở `lg`.
+ *
+ * `xl` (52px) là cỡ mới nhất; ba component còn thiếu nó sẽ so le 12px khi đặt
+ * cạnh một `ol-input size="xl"`.
+ */
+declare const FIELD_HEIGHT: Record<FieldSize, string>;
+/**
+ * Chiều cao TỐI THIỂU — cho component cao theo nội dung.
+ *
+ * `ol-select` nhiều lựa chọn, `ol-tag-input` nhiều thẻ: chúng phải giãn ra khi
+ * nội dung xuống dòng, nên `h-*` cố định sẽ cắt mất. Giá trị bằng đúng
+ * `FIELD_HEIGHT` để một dòng vẫn cao bằng các ô khác.
+ */
+declare const FIELD_MIN_HEIGHT: Record<FieldSize, string>;
+/**
+ * Đệm ngang theo Figma `ol-input`: sm 10px · base 12px · lg 14px · xl 16px.
+ *
+ * KHÔNG dùng `[class.px-2.5]` trên template: Angular cắt phần sau dấu chấm
+ * nên nó render ra `px-2`, lệch 2px so với thiết kế. Phải gom vào một chuỗi.
+ */
+declare const FIELD_PADDING_X: Record<FieldSize, string>;
+/**
+ * `FIELD_PADDING_X` tách hai đầu — cho ô có icon: phần tử ĐẦU TIÊN trong khung
+ * (icon hoặc ô gõ) nhận lề đầu, phần tử CUỐI nhận lề cuối, ở giữa chỉ còn
+ * `FIELD_ICON_GAP`.
+ */
+declare const FIELD_PADDING_START: Record<FieldSize, string>;
+declare const FIELD_PADDING_END: Record<FieldSize, string>;
+/**
+ * Icon ↔ chữ trong khung: 8px, mọi cỡ — Figma `ol-input` (1149:46826) và
+ * `ol-timepicker` (1149:52243) đều `itemSpacing: 8`.
+ *
+ * Chỉ một nguồn tạo khoảng này. Bản cũ của `ol-input` có cả `gap-2` ở khung
+ * lẫn `ps-2.5`/`pe-2.5` ở ô gõ → icon cách chữ 18px (đo 2026-09-29).
+ */
+declare const FIELD_ICON_GAP = "gap-2";
+/**
+ * Đệm dọc của khung CHỌN NHIỀU (chip cao 24px). Nhãn nổi Bordered nằm vắt
+ * qua viền trên, nửa dưới lấn vào khung ~10px — đệm 4px thường lệ để chip
+ * nằm dưới chữ nhãn (đo 2026-09-29: đè 3px, 32/96 ô). Chừa 10px thì một
+ * dòng chip vẫn cao đúng 40px: 1 + 10 + 24 + 4 + 1.
+ */
+declare function multiValuePadY(floatingOutlined: boolean): string;
+/**
+ * Chỗ dành cho icon 16px nằm `absolute` ở đầu/cuối khung: lề cỡ + 16px +
+ * `FIELD_ICON_GAP` 8px. Dùng khi icon ra khỏi luồng (select, autocomplete
+ * chọn nhiều) nên khung phải tự chừa chỗ.
+ */
+declare const FIELD_ICON_RESERVE_START: Record<FieldSize, string>;
+declare const FIELD_ICON_RESERVE_END: Record<FieldSize, string>;
+/** Chỗ cho nút xoá 14px (`close` cỡ xs) nằm `absolute` cuối ô: lề cỡ + 14 + 8. */
+declare const FIELD_CLEAR_RESERVE_END: Record<FieldSize, string>;
+/**
+ * Như `FIELD_ICON_RESERVE_START` nhưng cho icon lịch của datepicker, vốn to
+ * theo cỡ ô (14 / 16 / 20 / 20px): lề cỡ + icon + 8px = 32 / 36 / 42 / 44.
+ */
+declare const PICKER_ICON_RESERVE_START: Record<FieldSize, string>;
+/**
+ * Cỡ chữ theo cỡ ô.
+ *
+ * `sm` là **14px** (`text-sm`), không phải 12px. Datepicker từng dùng
+ * `text-xs` nên chữ trong ô nhỏ hơn hẳn các ô cùng hàng.
+ */
+declare const FIELD_TEXT: Record<FieldSize, string>;
+/**
+ * Nền · viền · vòng focus theo trạng thái.
+ *
+ * Dùng `-medium` cho cả nền lẫn viền ở trạng thái thường. Hai tên gần giống
+ * nhau (`bg-neutral-secondary` vs `bg-neutral-secondary-medium`) nhưng **khác
+ * hẳn ở chế độ tối**, nên nhầm một chữ là ô đó lệch màu mà chế độ sáng không
+ * lộ ra.
+ *
+ * Dùng `focus-within:` chứ không `focus:`: viền nằm trên thẻ bọc, còn focus
+ * rơi vào `<input>` bên trong. `focus:` trên thẻ bọc không bao giờ khớp.
+ */
+declare const FIELD_STATE: Record<FieldState, string>;
+/** Nền và con trỏ khi ô bị khoá. Áp đè lên `FIELD_STATE`. */
+declare const FIELD_DISABLED = "bg-disabled opacity-60 cursor-not-allowed";
+/** Bo góc — 12px cho mọi cỡ, theo Figma `bieu-mau.md`. */
+declare const FIELD_RADIUS = "rounded-md";
+/**
+ * Lớp của nhãn phía trên ô.
+ *
+ * `text-heading` chứ không `text-body`: nhãn là thứ người dùng đọc đầu tiên để
+ * biết ô này hỏi gì, nó phải đậm hơn chữ phụ.
+ */
+declare const FIELD_LABEL = "inline-flex items-center gap-1 text-sm font-medium text-heading";
+/** Khoảng cách nhãn → ô. */
+declare const FIELD_LABEL_GAP = "mb-1.5";
+/**
+ * Vị trí nhãn so với ô: `top` (mặc định, nhãn trên ô) hoặc `left` (nhãn cùng
+ * hàng, bên trái — form dạng bảng: cài đặt, hồ sơ). Nhãn nổi thắng cả hai.
+ */
+type LabelPosition = 'top' | 'left';
+/**
+ * Khung ngoài của host khi nhãn `left`: lưới 2 cột. Cột 1 = nhãn, rộng theo
+ * `--ol-label-w` (input `labelWidth`, mặc định 8rem). Cột 2 = mọi thứ còn lại
+ * — khung nhập, dòng gợi ý/lỗi — nên chữ lỗi thẳng mép ô, không chui xuống
+ * dưới nhãn. `[&>ol-field-label]` cụ thể hơn `[&>*]` nên nhãn thắng cột.
+ */
+declare const FIELD_LABEL_BESIDE = "grid grid-cols-[var(--ol-label-w,8rem)_minmax(0,1fr)] items-start gap-x-3 [&>*]:col-start-2 [&>ol-field-label]:col-start-1 [&>ol-field-label]:row-start-1";
+/** Lớp khung ngoài theo vị trí nhãn — rỗng khi nhãn trên hoặc nhãn nổi. */
+declare function fieldLabelLayout(position: LabelPosition, floating: boolean): string;
+/** Dấu sao bắt buộc. */
+declare const FIELD_ASTERISK = "text-fg-danger font-bold";
+/**
+ * Chữ trợ giúp dưới ô, đổi màu theo trạng thái.
+ *
+ * Trạng thái lỗi mà chữ vẫn màu phụ thì người dùng không biết dòng đó là lời
+ * giải thích lỗi hay chú thích thường.
+ */
+declare const FIELD_HELPER: Record<FieldState, string>;
+/** Khoảng cách ô → chữ trợ giúp. */
+declare const FIELD_HELPER_GAP = "mt-1.5";
+/**
+ * Gộp chiều cao · đệm ngang · cỡ chữ · bo góc cho một cỡ.
+ *
+ * Tiện cho component không có icon. Component có icon tự ghép từ các bảng
+ * riêng để thay `px-*` bằng `ps-*`.
+ */
+declare function fieldSizeClasses(size: FieldSize): string;
+/**
+ * Ba kiểu nhãn nổi — Figma `ol-floating-label` (#1149:50454) trục `Type`:
+ *
+ * - `outlined` — **Bordered**: viền đủ, nhãn nổi nằm ĐÈ lên viền trên.
+ * - `filled`   — **With background**: nền xám + gạch chân 2px, nhãn nổi thành
+ *                một hàng 20px ở trên, nằm trong nền.
+ * - `standard` — **Default**: chỉ gạch chân 2px, nhãn nổi thành hàng 20px ở trên.
+ */
+type FloatingVariant = 'outlined' | 'filled' | 'standard';
+/**
+ * Vị trí ngang của nhãn KHI NỔI (px) = đệm ngang của ô (`FIELD_PADDING_X`) —
+ * Figma đặt nhãn nổi thẳng mép chữ, kể cả khi có icon đầu (nhãn nổi lên trên
+ * cột icon). Phải là SỐ vì nhãn đặt bằng `style.left`, cùng hệ với vị trí nằm
+ * yên (đo lúc chạy).
+ */
+declare const FLOAT_LABEL_START: Record<FieldSize, number>;
+
 declare class OlDatepickerStateService {
     readonly viewMode: _angular_core.WritableSignal<DatepickerViewMode>;
     readonly viewDate: _angular_core.WritableSignal<Date>;
@@ -999,7 +1276,11 @@ declare class OlDatepickerStateService {
 }
 
 declare class OlDatepicker implements ControlValueAccessor {
-    readonly state: OlDatepickerStateService;
+    /**
+     * Trạng thái lịch (ngày đang xem, khoảng đã chọn…). Tên cũ `state` nhường
+     * cho input `state` (lỗi / thành công) — cùng tên với mọi ô nhập khác.
+     */
+    readonly pickerState: OlDatepickerStateService;
     private readonly hostEl;
     /** Id do nơi gọi truyền; trống thì dùng id tự sinh bên dưới. */
     readonly id: _angular_core.InputSignal<string>;
@@ -1013,6 +1294,33 @@ declare class OlDatepicker implements ControlValueAccessor {
     readonly value: _angular_core.ModelSignal<Date | null>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Trạng thái hiển thị — lỗi / thành công, cùng thang `FIELD_STATE` với mọi ô
+     * nhập khác. Trước đây datepicker không có (tên `state` bị service chiếm).
+     */
+    readonly state: _angular_core.InputSignal<FieldState>;
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung (sau icon lịch), nổi lên khi focus, mở
+     * lịch hoặc đã có ngày (kể cả chữ đang gõ dở).
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /** Khung nhãn + ô: cột dọc (nhãn trên) hoặc lưới 2 cột (nhãn trái). */
+    protected readonly stackClasses: _angular_core.Signal<string>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
     readonly helperText: _angular_core.InputSignal<string>;
     readonly required: _angular_core.InputSignal<boolean>;
     /**
@@ -1103,6 +1411,16 @@ declare class OlDatepicker implements ControlValueAccessor {
      * ngang và `ps-*` cho chỗ icon lịch.
      */
     readonly inputSizeClasses: _angular_core.Signal<string>;
+    private readonly sizeClasses;
+    protected readonly showClear: _angular_core.Signal<boolean>;
+    /**
+     * `ms-px`/`me-px`: div bọc icon tính từ mép NGOÀI viền 1px của ô, còn đệm
+     * ô tính từ mép trong. Nhãn nổi `filled`/`standard` không có viền hai bên
+     * (chỉ gạch dưới) thì không bù.
+     */
+    private readonly sideBorder;
+    protected readonly leadPadClass: _angular_core.Signal<string>;
+    protected readonly trailPadClass: _angular_core.Signal<string>;
     /**
      * Cỡ icon lịch theo `size` của ô nhập.
      *
@@ -1157,17 +1475,57 @@ declare class OlDatepicker implements ControlValueAccessor {
      */
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDatepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDatepicker, "ol-datepicker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "dateChange": "dateChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "formattedChange": "formattedChange"; }, never, never, true, never>;
+    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; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "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;
+    /**
+     * Trạng thái lịch (ngày đang xem, khoảng đã chọn…). Tên cũ `state` nhường
+     * cho input `state` (lỗi / thành công) — cùng tên với mọi ô nhập khác.
+     */
+    readonly pickerState: OlDatepickerStateService;
     private readonly hostEl;
     readonly value: _angular_core.ModelSignal<DateRange | null>;
     readonly startPlaceholder: _angular_core.InputSignal<string>;
     readonly endPlaceholder: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    /** Lỗi / thành công — cùng thang `FIELD_STATE` với mọi ô nhập khác. */
+    readonly state: _angular_core.InputSignal<FieldState>;
+    /**
+     * Nhãn nổi. `joined`: một nhãn (`label`) cho cả khung. `dual-inputs`: mỗi ô
+     * một nhãn (`fromLabel` / `toLabel`), nổi riêng theo ô đó có ngày hay không.
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /**
+     * `joined`: một nhãn cho cả khung → khung ngoài thành lưới. `dual-inputs`:
+     * mỗi ô một nhãn ("Từ" / "Đến") → khung ngoài giữ cột dọc, từng CỘT thành lưới.
+     */
+    protected readonly stackClasses: _angular_core.Signal<string>;
+    protected readonly columnClasses: _angular_core.Signal<string>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
+    /**
+     * Id hai ô `dual-inputs` — để `<label for>` nối được. Bản cũ hai nhãn
+     * "Từ"/"Đến" KHÔNG có `for`, ô không có id: bấm nhãn không focus, trình đọc
+     * màn hình đọc hai ô không tên.
+     */
+    private readonly uid;
+    readonly startInputId: string;
+    readonly endInputId: string;
     readonly fromLabel: _angular_core.InputSignal<string>;
     readonly toLabel: _angular_core.InputSignal<string>;
     readonly showInfoIcon: _angular_core.InputSignal<boolean>;
@@ -1241,7 +1599,27 @@ declare class OlDateRangePicker implements ControlValueAccessor {
      * dùng y hệt `py-2 / py-2.5 / py-3.5` nên lệch cùng một kiểu; sửa một nửa là
      * để lại đúng lỗi đó ở chỗ khác.
      */
+    /**
+     * Hai ô của dạng `dual-inputs`: icon lịch ở lề theo cỡ, chữ cách icon 8px.
+     * Ô "Đến" mang nút xoá `absolute` nên lề phải chừa chỗ cho nó.
+     */
     readonly inputSizeClasses: _angular_core.Signal<string>;
+    readonly endInputClasses: _angular_core.Signal<string>;
+    private inputClasses;
+    protected readonly showClear: _angular_core.Signal<boolean>;
+    /**
+     * `ms-px`/`me-px`: div bọc icon tính từ mép NGOÀI viền 1px của ô, còn đệm
+     * ô tính từ mép trong. Nhãn nổi `filled`/`standard` không có viền hai bên
+     * (chỉ gạch dưới) thì không bù.
+     */
+    private readonly sideBorder;
+    protected readonly leadPadClass: _angular_core.Signal<string>;
+    protected readonly trailPadClass: _angular_core.Signal<string>;
+    /**
+     * Dạng `joined`: khung có `p-1` (4px), nên icon lùi thêm lề cỡ − 4px để
+     * mép icon cách viền đúng lề cỡ như mọi ô; chữ cách icon 8px.
+     */
+    protected readonly joinedIconPadClass: _angular_core.Signal<string>;
     /**
      * Cỡ cho biến thể `joined` — khung bọc mang viền, hai input bên trong trong
      * suốt. Phải tách khỏi `inputSizeClasses()`: ở đây chiều cao thuộc về KHUNG,
@@ -1256,9 +1634,10 @@ declare class OlDateRangePicker implements ControlValueAccessor {
      * Khung có `p-1` = 4px mỗi cạnh, nên input con lùi 8px để TỔNG chiều cao
      * khớp thang: h-9 → h-7, h-10 → h-8, h-12 → h-10, h-13 → h-11.
      */
-    readonly joinedWrapperClasses: _angular_core.Signal<"h-9" | "h-12" | "h-10" | "h-13">;
+    readonly joinedWrapperClasses: _angular_core.Signal<string>;
+    private readonly joinedHeight;
     /** Input bên trong khung `joined` — trừ đi `p-1` của khung. */
-    readonly joinedInputClasses: _angular_core.Signal<"h-7 text-xs" | "h-10 text-base" | "h-11 text-base" | "h-8 text-sm">;
+    readonly joinedInputClasses: _angular_core.Signal<string>;
     writeValue(val: DateRange | null): void;
     registerOnChange(fn: (val: DateRange | null) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -1294,7 +1673,7 @@ declare class OlDateRangePicker implements ControlValueAccessor {
      */
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDateRangePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDateRangePicker, "ol-date-range-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dualMonth": { "alias": "dualMonth"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "daysDisabled": { "alias": "daysDisabled"; "required": false; "isSignal": true; }; "datesDisabled": { "alias": "datesDisabled"; "required": false; "isSignal": true; }; "datesEnabled": { "alias": "datesEnabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
+    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; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "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 {
@@ -1629,6 +2008,8 @@ declare class OlDropdown {
     private detachMenu;
     /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi đang đóng. */
     private releaseEscape;
+    /** Hàm gỡ listener Tab trên panel. `null` khi đang đóng. */
+    private releaseMenuKeydown;
     readonly label: _angular_core.InputSignal<string | null>;
     readonly isOpen: _angular_core.ModelSignal<boolean>;
     /**
@@ -1679,6 +2060,75 @@ declare class OlDropdown {
     onTriggerClick(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
+    /**
+     * Danh sách phần tử nhận được tiêu điểm, theo thứ tự nhìn thấy.
+     *
+     * `tabindex="-1"` bị loại: đó là dấu hiệu tác giả cố ý đưa phần tử ra khỏi
+     * đường Tab. `:disabled` cũng loại — trình duyệt không cho nó nhận tiêu điểm.
+     *
+     * Lọc phần ẩn bằng `[hidden]`/`[aria-hidden]` chứ KHÔNG `offsetParent`:
+     * `offsetParent` là `null` với mọi phần tử trong `position: fixed`, và luôn
+     * `null` trong jsdom — dùng nó thì danh sách rỗng, hàm thoát sớm, và toàn bộ
+     * xử lý Tab lặng lẽ không chạy. Đã mắc: spec đỏ 3 ca trong khi trình duyệt
+     * thật vẫn đúng, vì hai môi trường cho `offsetParent` khác nhau.
+     */
+    private focusableItems;
+    /**
+     * Nút mở panel, kể cả khi nơi dùng tự khai qua slot `[trigger]`.
+     *
+     * `triggerButtonRef` CHỈ có giá trị với nút mặc định của component — hai
+     * nhánh `@if` trong template vẽ ra nó. Nơi dùng truyền nút riêng qua
+     * `<ng-content select="[trigger]">` thì cả hai nhánh đều không chạy và ref
+     * là `undefined`. Đo 2026-09-25: header onluyenv4 (streak, chuông) đều dùng
+     * nút slot, nên mọi xử lý bám vào ref đó lặng lẽ không chạy — gồm cả việc
+     * trả tiêu điểm về nút sau khi Escape, vốn có từ trước.
+     *
+     * Nên tìm nút thật trong cây DOM của host khi không có ref.
+     */
+    private triggerElement;
+    /**
+     * Phần tử nhận tiêu điểm đứng ngay sau `element` trong thứ tự Tab của trang.
+     *
+     * Quét từ `<body>` và loại chính panel ra: panel treo cuối `<body>` nên nếu
+     * tính cả nó thì "phần tử sau nút trigger" lại rơi vào panel vừa đóng.
+     */
+    private nextFocusableAfter;
+    /**
+     * Tab từ nút trigger khi panel đang mở → nhảy VÀO mục đầu panel.
+     *
+     * Vì sao cần: `appendTo="body"` treo panel ra cuối `<body>`, nên trong thứ
+     * tự DOM nó nằm SAU toàn bộ nội dung trang. Bàn phím đi theo thứ tự DOM chứ
+     * không theo vị trí nhìn thấy, nên Tab từ nút trigger nhảy sang phần tử kế
+     * tiếp trong header rồi xuống thân trang — panel mở ngay trước mắt mà không
+     * bao giờ tới được. Đo 2026-09-25: 8 lượt Tab, không lượt nào vào panel.
+     *
+     * KHÔNG cuốn tiêu điểm lúc mở: người dùng chuột không cần, và nhảy tiêu điểm
+     * khi họ chưa yêu cầu là cướp quyền điều khiển. Chỉ khi họ chủ động nhấn Tab
+     * mới dẫn vào — đúng lúc họ đang tìm đường đi tiếp.
+     *
+     * Shift+Tab bỏ qua: người dùng đang muốn lùi RA, giữ họ lại là bẫy.
+     */
+    onTriggerKeydown(event: KeyboardEvent): void;
+    /**
+     * Tab BÊN TRONG panel — giữ đường đi liền mạch với chỗ panel đang hiện.
+     *
+     * Panel nằm cuối `<body>` nên nếu để trình duyệt tự xử, Tab ở mục cuối sẽ
+     * rơi xuống phần tử sau panel trong DOM (thường là hết trang), còn Shift+Tab
+     * ở mục đầu nhảy ngược lên thân trang — cả hai đều bỏ qua nút trigger, tức
+     * người dùng mất mốc quay về.
+     *
+     * KHÔNG bẫy vòng tròn như hộp thoại: chuẩn WAI-ARIA cho menu quy định Tab
+     * phải THOÁT được ra trang. Nên:
+     *
+     * - Tab ở mục CUỐI → đóng panel, trả tiêu điểm về nút trigger rồi để trình
+     *   duyệt đi tiếp bình thường (phần tử sau nút trong header)
+     * - Shift+Tab ở mục ĐẦU → về thẳng nút trigger, panel vẫn mở để người dùng
+     *   còn thấy mình vừa rời khỏi đâu
+     *
+     * Giữa các mục thì không can thiệp — panel là một khối liền trong DOM nên
+     * trình duyệt tự đi đúng.
+     */
+    onMenuKeydown(event: KeyboardEvent): void;
     show(): void;
     hide(): void;
     toggle(): void;
@@ -1702,6 +2152,19 @@ declare class OlDropdownItem {
     readonly itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
     private readonly parentDropdown;
     readonly isItemActive: _angular_core.Signal<boolean>;
+    /**
+     * Hình học theo Figma `ol-dropdown-item` (node 1149:39652, đo 2026-09-28):
+     * lề 8px bốn cạnh (`px-2 py-2`, cao 36px), icon 16px cách chữ 6px, bo 8px
+     * (`rounded` = `--radius: 8px`), chữ 14px medium. Bản trước `px-3` (12px),
+     * icon cách chữ 10px, bo 6px.
+     *
+     * Độ đậm nằm TRONG từng nhánh, không gắn vô điều kiện — hai class cùng thuộc
+     * tính thì thắng thua theo thứ tự luật CSS, không theo thứ tự trong chuỗi.
+     *
+     * Trạng thái đang chọn: Figma KHÔNG vẽ (chỉ có Initial / Hover / Disabled).
+     * Bản trước tự đặt `bg-brand-softer` (#F5F8FF trên nền trắng — gần như không
+     * thấy, báo 2026-09-28). Nay `bg-brand-soft` (#E3EAFF) + chữ brand đậm.
+     */
     readonly itemClasses: _angular_core.Signal<string>;
     handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDropdownItem, never>;
@@ -1722,122 +2185,129 @@ declare class OlDropdownHeader {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDropdownHeader, "ol-dropdown-header", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class OlFooter {
+/**
+ * Ô tìm ở đầu menu — Figma `ol-dropdown-header` Type=Form (1149:39893): một
+ * `ol-input` cỡ sm có icon tìm, đặt trên danh sách (`ol-dropdown` Type=Users,
+ * Type=With scroll).
+ *
+ * Component KHÔNG tự lọc: mục trong menu do nơi dùng chiếu vào, có thể lấy từ
+ * máy chủ, nên nơi dùng lọc theo `query` rồi hiện `ol-dropdown-state` khi rỗng
+ * hoặc đang tải.
+ *
+ * Bàn phím: ↓ xuống mục đầu, Enter chọn mục đầu còn bấm được. Esc do
+ * `ol-dropdown` lo (đóng + trả tiêu điểm về nút mở).
+ *
+ * `sticky`: menu dài có `menuClass="max-h-… overflow-y-auto"` thì ô tìm đứng
+ * yên trên đỉnh khi cuộn danh sách. `-top-2 -mt-2 pt-2` phủ luôn đệm 8px của
+ * menu, để mục cuộn qua không lộ ra phía trên ô tìm.
+ */
+declare class OlDropdownSearch {
+    readonly query: _angular_core.ModelSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Mở menu thì đưa tiêu điểm vào ô tìm — người mở menu có ô tìm là để gõ. */
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    /** Đóng menu thì xoá từ khoá, lần mở sau thấy lại đủ danh sách. */
+    readonly clearOnClose: _angular_core.InputSignal<boolean>;
+    private readonly host;
+    private readonly dropdown;
+    constructor();
+    protected onKeydown(event: KeyboardEvent): void;
+    private field;
     /**
-     * Giới hạn nội dung trong khung rộng tối đa và căn giữa. Tắt đi thì chân
-     * trang trải hết bề ngang — dùng khi trang đã có khung bao ngoài.
+     * Mục đầu còn bấm được trong CÙNG menu — bỏ qua mục khoá. Tính cả
+     * `menuitemcheckbox`/`menuitemradio` (menu chọn nhiều, chọn một).
      */
-    readonly container: _angular_core.InputSignal<boolean>;
-    readonly innerClasses: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFooter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFooter, "ol-footer", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    private firstItem;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDropdownSearch, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDropdownSearch, "ol-dropdown-search", never, { "query": { "alias": "query"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "clearOnClose": { "alias": "clearOnClose"; "required": false; "isSignal": true; }; }, { "query": "queryChange"; }, never, never, true, never>;
 }
 
+type DropdownStateType = 'loading' | 'empty' | 'no-results';
 /**
- * Bảng chuẩn kích thước và trạng thái cho MỌI ô nhập của thư viện.
+ * Trạng thái của menu khi KHÔNG có mục nào để hiện — Figma `ol-dropdown`
+ * Type=Đang tải (5266:29107) · Rỗng (5266:29111) · Không có kết quả (5266:29114).
  *
- * ## Vì sao cần
+ * Figma ghi: "Menu lấy dữ liệu từ máy chủ phải có đủ bốn trạng thái. Thiếu
+ * Đang tải / Rỗng / Không có kết quả là lỗi hay gặp nhất ở ô tìm kiếm gợi ý."
  *
- * Chín component họ form từng tự khai kích thước riêng, và chúng trôi khỏi
- * nhau. Đo ngày 2026-09-23 trên chín component:
+ * Đệm 24/16px, căn giữa. Đang tải: ba thanh xương cao 10px (thanh cuối ngắn
+ * ~70%), cách 10px. Hai trạng thái chữ: tiêu đề 14px đậm vừa `text-heading`,
+ * dòng phụ 12px `text-body-subtle`, cách 8px.
  *
- *   thiếu cỡ `xl`   3 component  (select · autocomplete · input-counter)
- *   nền sai          3 component  (autocomplete · timepicker · datepicker)
- *   viền sai         5 component
- *   đệm ngang lệch   2px ở cả ba cỡ đầu (datepicker so với input)
- *   cỡ chữ `sm` lệch 2px (14px vs 12px)
- *
- * Nền và viền lệch **chỉ lộ ở chế độ tối**: sáng thì `--bg-secondary` và
- * `--bg-secondary-medium` cùng ra `#f9fafb`, tối thì `gray-950` vs `gray-800`.
- * Nên lỗi sống rất lâu — người dựng nhìn chế độ sáng, thấy giống hệt nhau.
- *
- * Đọc từ đây thì thêm ô nhập mới cũng tự khớp, và đổi thang chỉ sửa một chỗ.
- *
- * ## Không gộp chiều cao với đệm ngang
- *
- * Hai thứ tách riêng vì component có icon cần `ps-*` thay `px-*`. Gộp lại thì
- * mỗi component phải cắt chuỗi ra để bỏ phần đệm — dễ sai hơn là ghép vào.
+ * `role="status"`: trình đọc màn hình báo khi danh sách vừa lọc ra rỗng —
+ * người dùng gõ tìm không nhìn thấy menu thì vẫn biết không có kết quả.
  */
-/** Bốn cỡ của họ form. Trùng `InputSize`, `SelectSize`, `DatepickerSize`. */
-type FieldSize = 'sm' | 'base' | 'lg' | 'xl';
-/** Ba trạng thái hiển thị. */
-type FieldState = 'default' | 'error' | 'success';
-/**
- * Chiều cao theo cỡ — **cố định bằng `h-*`**, không suy từ `py-*`.
- *
- * Suy từ đệm dọc thì chiều cao phụ thuộc `line-height` của cỡ chữ và không
- * bao giờ khớp thang chung. Đo trước khi chuẩn hoá: datepicker ra 34/42/54
- * trong khi input ra 36/40/48 — đặt cạnh nhau là so le ngay, nặng nhất ở `lg`.
- *
- * `xl` (52px) là cỡ mới nhất; ba component còn thiếu nó sẽ so le 12px khi đặt
- * cạnh một `ol-input size="xl"`.
- */
-declare const FIELD_HEIGHT: Record<FieldSize, string>;
+declare class OlDropdownState {
+    readonly type: _angular_core.InputSignal<DropdownStateType>;
+    /** Tiêu đề — bỏ trống thì dùng câu mặc định theo `type`. */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Dòng phụ — bỏ trống thì dùng câu mặc định theo `type`. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Từ khoá vừa tìm — chèn vào câu mặc định của `no-results`. */
+    readonly query: _angular_core.InputSignal<string>;
+    protected readonly boxClasses: _angular_core.Signal<"flex flex-col items-center gap-2.5 px-4 py-6" | "flex flex-col items-center gap-2 px-4 py-6 text-center">;
+    protected readonly resolvedHeading: _angular_core.Signal<string>;
+    protected readonly resolvedDescription: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlDropdownState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlDropdownState, "ol-dropdown-state", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class OlFooter {
+    /**
+     * Giới hạn nội dung trong khung rộng tối đa và căn giữa. Tắt đi thì chân
+     * trang trải hết bề ngang — dùng khi trang đã có khung bao ngoài.
+     */
+    readonly container: _angular_core.InputSignal<boolean>;
+    readonly innerClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFooter, "ol-footer", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type OlFrameSpacing = 'xs' | 'sm' | 'base' | 'lg';
+type OlFrameRounded = 'sm' | 'md' | 'lg' | 'xl';
+type OlFrameVariant = 'default' | 'ghost';
 /**
- * Chiều cao TỐI THIỂU — cho component cao theo nội dung.
+ * Khung bọc nhiều mảng nội dung, khoảng cách đều nhau.
  *
- * `ol-select` nhiều lựa chọn, `ol-tag-input` nhiều thẻ: chúng phải giãn ra khi
- * nội dung xuống dòng, nên `h-*` cố định sẽ cắt mất. Giá trị bằng đúng
- * `FIELD_HEIGHT` để một dòng vẫn cao bằng các ô khác.
- */
-declare const FIELD_MIN_HEIGHT: Record<FieldSize, string>;
-/**
- * Đệm ngang theo Figma `ol-input`: sm 10px · base 12px · lg 14px · xl 16px.
+ * Chưa có node Figma — dựng theo design system.
  *
- * KHÔNG dùng `[class.px-2.5]` trên template: Angular cắt phần sau dấu chấm
- * nên nó render ra `px-2`, lệch 2px so với thiết kế. Phải gom vào một chuỗi.
- */
-declare const FIELD_PADDING_X: Record<FieldSize, string>;
-/**
- * Cỡ chữ theo cỡ ô.
+ * ## Vì sao KHÔNG dùng `ol-card` cho việc này
  *
- * `sm` là **14px** (`text-sm`), không phải 12px. Datepicker từng dùng
- * `text-xs` nên chữ trong ô nhỏ hơn hẳn các ô cùng hàng.
- */
-declare const FIELD_TEXT: Record<FieldSize, string>;
-/**
- * Nền · viền · vòng focus theo trạng thái.
+ * `ol-card` là MỘT thẻ nội dung: có ảnh bìa, có `href`, có trạng thái chọn.
+ * Còn đây là cái khung xếp NHIỀU mảng cạnh nhau với khoảng cách đều — như cột
+ * thiết lập, bảng điều khiển, hay danh sách nhóm. Lồng nhiều `ol-card` vào một
+ * `div` rồi tự đặt `space-y-*` cũng ra kết quả, nhưng mỗi nơi dùng lại chọn
+ * một khoảng cách khác và trang trông lộn xộn.
  *
- * Dùng `-medium` cho cả nền lẫn viền ở trạng thái thường. Hai tên gần giống
- * nhau (`bg-neutral-secondary` vs `bg-neutral-secondary-medium`) nhưng **khác
- * hẳn ở chế độ tối**, nên nhầm một chữ là ô đó lệch màu mà chế độ sáng không
- * lộ ra.
+ * ## `stacked` bỏ viền giữa, không phải bỏ viền hết
  *
- * Dùng `focus-within:` chứ không `focus:`: viền nằm trên thẻ bọc, còn focus
- * rơi vào `<input>` bên trong. `focus:` trên thẻ bọc không bao giờ khớp.
- */
-declare const FIELD_STATE: Record<FieldState, string>;
-/** Nền và con trỏ khi ô bị khoá. Áp đè lên `FIELD_STATE`. */
-declare const FIELD_DISABLED = "bg-disabled opacity-60 cursor-not-allowed";
-/** Bo góc — 12px cho mọi cỡ, theo Figma `bieu-mau.md`. */
-declare const FIELD_RADIUS = "rounded-md";
-/**
- * Lớp của nhãn phía trên ô.
+ * Xếp chồng thì các mảng dính thành một khối liền, chỉ còn một viền ngoài và
+ * kẻ ngăn mảnh ở giữa — giống `ol-list-group`. Tách rời thì mỗi mảng là một
+ * thẻ riêng có viền đủ bốn cạnh.
  *
- * `text-heading` chứ không `text-body`: nhãn là thứ người dùng đọc đầu tiên để
- * biết ô này hỏi gì, nó phải đậm hơn chữ phụ.
- */
-declare const FIELD_LABEL = "inline-flex items-center gap-1 text-sm font-medium text-heading";
-/** Khoảng cách nhãn → ô. */
-declare const FIELD_LABEL_GAP = "mb-1.5";
-/** Dấu sao bắt buộc. */
-declare const FIELD_ASTERISK = "text-fg-danger font-bold";
-/**
- * Chữ trợ giúp dưới ô, đổi màu theo trạng thái.
+ * Làm bằng `divide-y` cộng `overflow-hidden` trên khung, KHÔNG bằng
+ * `[&>*:not(:last-child)]:border-b`: biến thể `:last-child` trong chuỗi class
+ * của component con sẽ khớp MỌI thể hiện của con đó, kể cả khi nó là con duy
+ * nhất ở nơi khác — lỗi đã gặp trong repo này.
  *
- * Trạng thái lỗi mà chữ vẫn màu phụ thì người dùng không biết dòng đó là lời
- * giải thích lỗi hay chú thích thường.
- */
-declare const FIELD_HELPER: Record<FieldState, string>;
-/** Khoảng cách ô → chữ trợ giúp. */
-declare const FIELD_HELPER_GAP = "mt-1.5";
-/**
- * Gộp chiều cao · đệm ngang · cỡ chữ · bo góc cho một cỡ.
+ * ## `ghost` bỏ nền và viền, giữ khoảng cách
  *
- * Tiện cho component không có icon. Component có icon tự ghép từ các bảng
- * riêng để thay `px-*` bằng `ps-*`.
+ * Dùng khi khung nằm trong một thẻ đã có viền rồi — hai lớp viền lồng nhau
+ * trông như lỗi hiển thị.
  */
-declare function fieldSizeClasses(size: FieldSize): string;
+declare class OlFrame {
+    readonly spacing: _angular_core.InputSignal<OlFrameSpacing>;
+    readonly rounded: _angular_core.InputSignal<OlFrameRounded>;
+    readonly variant: _angular_core.InputSignal<OlFrameVariant>;
+    /** Dính các mảng thành một khối liền, chỉ còn kẻ ngăn ở giữa. */
+    readonly stacked: _angular_core.InputSignal<boolean>;
+    /** Xếp ngang thay vì dọc. Khoảng cách và kẻ ngăn đổi trục theo. */
+    readonly horizontal: _angular_core.InputSignal<boolean>;
+    protected readonly frameClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFrame, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFrame, "ol-frame", never, { "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
 
 /**
  * Nhãn cho ô nhập — khớp Figma `ol-label` (#1149:94727), trục
@@ -2211,6 +2681,28 @@ declare class OlInput implements ControlValueAccessor {
     readonly cleared: _angular_core.OutputEmitterRef<void>;
     readonly rightHelperText: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung, nổi lên khi focus hoặc có chữ — thay
+     * cho nhãn phía trên ô. Xem `OlFieldFrame`.
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
+    /** Có chữ → nhãn nổi. `0` (input number) là CÓ giá trị. */
+    readonly hasValue: _angular_core.Signal<boolean>;
     /** Id thực dùng: ưu tiên id do nơi gọi truyền, không thì dùng id tự sinh. */
     readonly inputId: _angular_core.Signal<string>;
     readonly helperId: _angular_core.Signal<string>;
@@ -2227,6 +2719,18 @@ declare class OlInput implements ControlValueAccessor {
      * lệch 2px so với thiết kế.
      */
     readonly paddingClasses: _angular_core.Signal<string>;
+    /**
+     * Khoảng icon ↔ chữ đúng 8px (`FIELD_ICON_GAP`): icon mang lề đầu/cuối của
+     * khung, ô gõ bỏ lề phía có icon. Khung KHÔNG có `gap` — add-on chữ/icon
+     * phải sát ô gõ (Figma Type=Add-on: gap 0).
+     */
+    protected readonly hasLeadingIcon: _angular_core.Signal<boolean>;
+    protected readonly hasTrailingIcon: _angular_core.Signal<boolean>;
+    protected readonly showClear: _angular_core.Signal<boolean>;
+    protected readonly leadIconClasses: _angular_core.Signal<string>;
+    /** Nút xoá đứng trước icon trạng thái thì để `ps-2` của icon tạo khoảng. */
+    protected readonly clearClasses: _angular_core.Signal<string>;
+    protected readonly trailIconClasses: _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
@@ -2251,7 +2755,7 @@ declare class OlInput implements ControlValueAccessor {
     /** Gọi khi rời ô nhập — form dùng để đánh dấu `touched`. */
     protected markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlInput, "ol-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "labelIcon": { "alias": "labelIcon"; "required": false; "isSignal": true; }; "labelTooltip": { "alias": "labelTooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "prefixText": { "alias": "prefixText"; "required": false; "isSignal": true; }; "suffixText": { "alias": "suffixText"; "required": false; "isSignal": true; }; "addOnIcon": { "alias": "addOnIcon"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "rightHelperText": { "alias": "rightHelperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "cleared": "cleared"; }, never, ["[addOnIcon], [leftIcon]", "[leftIcon]", "[rightIcon]", "[rightHelperAction]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlInput, "ol-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "labelIcon": { "alias": "labelIcon"; "required": false; "isSignal": true; }; "labelTooltip": { "alias": "labelTooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "prefixText": { "alias": "prefixText"; "required": false; "isSignal": true; }; "suffixText": { "alias": "suffixText"; "required": false; "isSignal": true; }; "addOnIcon": { "alias": "addOnIcon"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "rightHelperText": { "alias": "rightHelperText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "cleared": "cleared"; }, never, ["[addOnIcon], [leftIcon]", "[rightIcon]", "[rightHelperAction]"], true, never>;
 }
 
 type TextareaState = 'default' | 'error' | 'success';
@@ -2287,6 +2791,26 @@ declare class OlTextarea implements ControlValueAccessor {
     readonly showAsterisk: _angular_core.InputSignal<boolean>;
     readonly commentBox: _angular_core.InputSignal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung ở dòng đầu, nổi lên khi focus hoặc có
+     * chữ. Không áp cho `commentBox` (thẻ bình luận có bố cục riêng).
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
     readonly submitComment: _angular_core.OutputEmitterRef<string>;
     onSubmit(): void;
     /**
@@ -2305,7 +2829,7 @@ declare class OlTextarea implements ControlValueAccessor {
     /** Gọi khi rời ô nhập — form dùng để đánh dấu `touched`. */
     protected markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTextarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTextarea, "ol-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharCount": { "alias": "showCharCount"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "commentBox": { "alias": "commentBox"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "submitComment": "submitComment"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTextarea, "ol-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharCount": { "alias": "showCharCount"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "commentBox": { "alias": "commentBox"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "submitComment": "submitComment"; }, never, never, true, never>;
 }
 
 /**
@@ -2417,6 +2941,26 @@ declare class OlSelect implements ControlValueAccessor {
      * cần `set()` được. Cách dùng từ ngoài không đổi.
      */
     readonly disabled: _angular_core.ModelSignal<boolean>;
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung, nổi lên khi focus, mở danh sách hoặc có
+     * lựa chọn. Đa chọn: nhãn nằm yên ở dòng đầu, nổi lên không đẩy thẻ.
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly multiple: _angular_core.InputSignal<boolean>;
     readonly searchable: _angular_core.InputSignal<boolean>;
@@ -2426,6 +2970,10 @@ declare class OlSelect implements ControlValueAccessor {
     readonly labelKey: _angular_core.InputSignal<string>;
     readonly valueKey: _angular_core.InputSignal<string>;
     readonly groupBy: _angular_core.InputSignal<string>;
+    /**
+     * Tiêu đề khi danh sách rỗng. Bỏ trống thì theo Figma: có từ khoá →
+     * "Không tìm thấy “…”", chưa có mục nào → "Chưa có mục nào".
+     */
     readonly emptyText: _angular_core.InputSignal<string>;
     readonly searchPlaceholder: _angular_core.InputSignal<string>;
     /**
@@ -2567,6 +3115,7 @@ declare class OlSelect implements ControlValueAccessor {
     private readonly listboxRef;
     /** Ô tìm ở đầu panel, để chuyển focus vào khi mở. */
     private readonly oTimPanel;
+    private readonly inlineSearch;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly searchQuery: _angular_core.WritableSignal<string>;
     readonly activeIndex: _angular_core.WritableSignal<number>;
@@ -2616,9 +3165,15 @@ declare class OlSelect implements ControlValueAccessor {
      * 10/12/14/16px. Đặt `ol-select size="sm"` cạnh `ol-input size="sm"` là
      * lệch 4px, và ở `xl` lệch 2px theo chiều ngược lại.
      *
-     * Có icon trái thì `ps-10` cố định — chỗ đó dành cho icon, không phải đệm.
+     * Icon trái và cụm nút phải đều `absolute`, nên khung tự chừa chỗ cho
+     * chúng bằng `FIELD_ICON_RESERVE_*`: icon ↔ chữ đúng 8px. Bản cũ `ps-10` /
+     * `pe-10` cố định cho mọi cỡ ra 10px ở cỡ base, 14px ở sm (đo 2026-09-29).
      */
     readonly paddingStartClass: _angular_core.Signal<string>;
+    private readonly floatingOutlined;
+    /** Icon trái và cụm nút phải nằm ở lề theo cỡ, như `ol-input`. */
+    protected readonly leftIconPadClass: _angular_core.Signal<string>;
+    protected readonly controlPadClass: _angular_core.Signal<string>;
     private onChange;
     private onTouched;
     private readonly destroyRef;
@@ -2813,7 +3368,7 @@ declare class OlSelect implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSelect, "ol-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; "matchTriggerWidth": { "alias": "matchTriggerWidth"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "hideSelected": { "alias": "hideSelected"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "createText": { "alias": "createText"; "required": false; "isSignal": true; }; "groupSeparator": { "alias": "groupSeparator"; "required": false; "isSignal": true; }; "searchPosition": { "alias": "searchPosition"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; "searchPrefix": { "alias": "searchPrefix"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate", "labelTemplate"], ["[leftIcon]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSelect, "ol-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; "matchTriggerWidth": { "alias": "matchTriggerWidth"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "hideSelected": { "alias": "hideSelected"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "createText": { "alias": "createText"; "required": false; "isSignal": true; }; "groupSeparator": { "alias": "groupSeparator"; "required": false; "isSignal": true; }; "searchPosition": { "alias": "searchPosition"; "required": false; "isSignal": true; }; "searchIcon": { "alias": "searchIcon"; "required": false; "isSignal": true; }; "searchPrefix": { "alias": "searchPrefix"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate", "labelTemplate"], ["[leftIcon]"], true, never>;
 }
 
 /**
@@ -3031,45 +3586,531 @@ declare class OlToggleGroup {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlToggleGroup, "ol-toggle-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Một lựa chọn của `ol-segmented`. `value` là thứ đổ vào model — dùng chuỗi
+ * hoặc số, so bằng `===`.
+ */
+interface SegmentedOption<T = string | number> {
+    value: T;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    /**
+     * Màu của mục KHI ĐANG CHỌN — cho lựa chọn mang nghĩa (Đạt / Chưa đạt,
+     * Đúng / Sai). Không truyền thì nền trắng chữ đậm như mặc định.
+     */
+    color?: SegmentedColor;
+}
+type SegmentedColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+type SegmentedSize = 'sm' | 'base';
+/**
+ * Chọn MỘT trong vài chế độ loại trừ nhau, đặt cạnh nhau trên một rãnh xám;
+ * mục đang chọn nổi lên nền trắng (segmented control).
+ *
+ * Khác `ol-tabs`: tabs chuyển PANEL nội dung, đây chọn GIÁ TRỊ (có CVA, dùng
+ * được trong form). Khác `ol-toggle`: công tắc chỉ có hai trạng thái bật/tắt.
+ *
+ * Trợ năng theo mẫu radio group của WAI-ARIA: `role="radiogroup"`, mỗi mục
+ * `role="radio"`, chỉ mục đang chọn nằm trong thứ tự Tab (roving tabindex),
+ * mũi tên trái/phải/lên/xuống chuyển VÀ chọn luôn, Home/End về đầu/cuối.
+ *
+ * Figma chưa có thiết kế (tra `lip4g3...` 2026-09-28: không có component nào
+ * tên segmented) — dựng theo token của hệ thống.
+ */
+declare class OlSegmented implements ControlValueAccessor {
+    readonly options: _angular_core.InputSignal<SegmentedOption<string | number>[]>;
+    readonly value: _angular_core.ModelSignal<string | number | null>;
+    readonly size: _angular_core.InputSignal<SegmentedSize>;
+    /** Giãn hết bề ngang khung, các mục chia đều. */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    /** `model()` để `setDisabledState()` của Reactive Forms đặt được. */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    /** Tên nhóm cho bộ đọc màn hình — nên đặt, vì nhóm không có nhãn nhìn thấy. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly host;
+    private onChange;
+    private onTouched;
+    protected readonly hostClasses: _angular_core.Signal<"block w-full" | "inline-block max-w-full">;
+    protected readonly trackClasses: _angular_core.Signal<string>;
+    /** Mục đang Tab vào được: mục đang chọn, không có thì mục bật đầu tiên. */
+    protected readonly focusIndex: _angular_core.Signal<number>;
+    protected itemClasses(option: SegmentedOption): string;
+    select(option: SegmentedOption): void;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    /** Mục bật kế tiếp theo chiều `step`, vòng quanh. -1 khi không có. */
+    private nextEnabled;
+    writeValue(v: string | number | null): void;
+    registerOnChange(fn: (v: string | number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlSegmented, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlSegmented, "ol-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+}
+
+/**
+ * Loại tệp — nhận biết để chọn icon, màu và chữ mô tả.
+ *
+ * Mười loại phủ gần hết tệp giáo viên/học sinh tải lên: bài làm (ảnh, PDF,
+ * Word), bảng điểm (Excel), bài giảng (PowerPoint, video), nghe (audio), nộp
+ * gộp (nén), bài tin học (mã nguồn), ghi chú (văn bản thô).
+ */
+type FileKind = 'image' | 'pdf' | 'word' | 'excel' | 'powerpoint' | 'video' | 'audio' | 'archive' | 'code' | 'text' | 'other';
+interface FileKindMeta {
+    label: string;
+    /** Họ lucide `file-*` — một họ nét cho mọi loại, nhìn đồng bộ. */
+    icon: string;
+    /**
+     * Màu ô icon, lấy từ bảng màu `ol-icon-shape` — không tự tô. KHÔNG dùng
+     * `dark`: nó là ô ĐẶC đen giữa các ô nền nhạt, nặng hơn hẳn (đo 2026-09-28).
+     */
+    color: IconShapeColor;
+}
+declare const FILE_KIND_META: Record<FileKind, FileKindMeta>;
+/** Phần mở rộng, chữ thường, không dấu chấm. Không có → chuỗi rỗng. */
+declare function fileExtension(name: string): string;
+/**
+ * Nhận biết loại tệp — ưu tiên PHẦN MỞ RỘNG, lùi về MIME.
+ *
+ * Không tin MIME trước: trình duyệt đoán MIME theo đuôi và hệ điều hành, nên
+ * cùng một tệp `.docx` có máy báo `application/vnd.openxml…`, có máy báo rỗng
+ * (Windows thiếu Office), và `.csv` có máy báo `application/vnd.ms-excel`.
+ */
+declare function detectFileKind(name: string, mime?: string): FileKind;
+/**
+ * Byte → chữ ngắn theo cách người Việt đọc: `850 B`, `12,4 KB`, `3,2 MB`.
+ * Dấu phẩy thập phân; số nguyên thì bỏ phần lẻ (`2 MB`, không `2,0 MB`).
+ */
+declare function formatFileSize(bytes: number): string;
+/**
+ * Tệp có khớp chuỗi `accept` của thẻ `<input type="file">` không.
+ *
+ * Hiểu đủ ba dạng của chuẩn HTML: đuôi (`.pdf`), MIME đầy đủ
+ * (`application/pdf`), MIME đại diện (`image/*`). `*` hoặc rỗng → nhận hết.
+ *
+ * Cần tự kiểm vì `accept` chỉ LỌC hộp thoại chọn tệp — kéo thả thì trình duyệt
+ * không lọc gì, và người dùng đổi bộ lọc hộp thoại sang "Tất cả tệp" là chọn
+ * được tệp bất kỳ.
+ */
+declare function matchesAccept(file: {
+    name: string;
+    type: string;
+}, accept: string): boolean;
+type FileRejectReason = 'type' | 'size' | 'count';
+interface FileRejection {
+    file: File;
+    reason: FileRejectReason;
+    /** Câu báo lỗi tiếng Việt, hiện được ngay. */
+    message: string;
+}
+interface FileValidationRules {
+    accept?: string;
+    /** Byte. 0 hoặc không truyền → không giới hạn. */
+    maxSize?: number;
+    /** Tổng số tệp tối đa, TÍNH CẢ tệp đã có. 0 → không giới hạn. */
+    maxFiles?: number;
+    /** Số tệp đang có sẵn trước lượt chọn này. */
+    existingCount?: number;
+}
+interface FileValidationResult {
+    accepted: File[];
+    rejected: FileRejection[];
+}
+/**
+ * Chia tệp thành nhận / loại, kèm lý do từng tệp bị loại.
+ *
+ * Thứ tự kiểm: định dạng → dung lượng → số lượng. Tệp sai định dạng không
+ * chiếm chỗ trong hạn mức số lượng — chọn 3 tệp, 1 tệp `.exe`, giới hạn 2 thì
+ * nhận 2 tệp hợp lệ chứ không loại oan tệp thứ ba vì tệp `.exe` đứng trước.
+ */
+declare function validateFiles(files: File[], rules?: FileValidationRules): FileValidationResult;
+/** Trạng thái tải của một tệp — nơi gọi cập nhật theo tiến trình HTTP thật. */
+type UploadStatus = 'idle' | 'uploading' | 'success' | 'error';
+/**
+ * Một tệp trong danh sách tải lên.
+ *
+ * `file` có thể vắng: tệp đã có sẵn trên máy chủ (mở lại bài đã nộp) chỉ có
+ * tên, dung lượng và `url`, không có đối tượng `File`.
+ */
+interface OlUploadFile {
+    id: string;
+    name: string;
+    size: number;
+    file?: File;
+    /** Ảnh xem trước hoặc liên kết tải về. */
+    url?: string;
+    status?: UploadStatus;
+    /** 0–100, chỉ dùng khi `status = 'uploading'`. */
+    progress?: number;
+    /** Câu báo lỗi khi `status = 'error'`. */
+    error?: string;
+}
+/** File → OlUploadFile, gán id duy nhất để `@for track` không lẫn hai tệp trùng tên. */
+declare function toUploadFile(file: File): OlUploadFile;
+/**
+ * Tệp trong một lần dán (Ctrl+V / ⌘V).
+ *
+ * Đọc cả `clipboardData.files` lẫn `items` loại `file`: Chrome đặt ảnh chụp
+ * màn hình ở cả hai, Safari có lúc chỉ ở `items`. Gộp theo đối tượng để không
+ * nhận một ảnh hai lần.
+ *
+ * Ảnh chụp màn hình dán vào LUÔN tên `image.png` — dán ba lần là ba tệp trùng
+ * tên, không phân biệt được trong danh sách. Đổi thành "Ảnh dán 14-32-05.png".
+ */
+declare function filesFromClipboard(data: DataTransfer | null, now?: Date): File[];
+/** Phím tắt dán theo hệ điều hành — để gợi ý đúng chữ người dùng thấy trên bàn phím. */
+declare function pasteShortcutLabel(platform?: string): string;
+/** Đang gõ trong ô nhập chữ — dán ở đó là dán CHỮ, không được cướp. */
+declare function isEditableTarget(target: EventTarget | null): boolean;
+
 /**
  * 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. */
-    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<null>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly helperText: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly dropzone: _angular_core.InputSignal<boolean>;
+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. */
+    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<null>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly dropzone: _angular_core.InputSignal<boolean>;
+    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).
+     */
+    readonly paddingClass: _angular_core.Signal<"p-1" | "p-1.5" | "p-2">;
+    readonly accept: _angular_core.InputSignal<string>;
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    /** Byte. 0 → không giới hạn. Có giá trị thì vùng kéo thả ghi "Dung lượng tối đa". */
+    readonly maxSize: _angular_core.InputSignal<number>;
+    /** Nhãn nút trong vùng kéo thả (Figma Advanced). Rỗng → không vẽ nút. */
+    readonly ctaLabel: _angular_core.InputSignal<string>;
+    /** Figma State: Danger / Success. Tệp bị loại tự chuyển sang `error`. */
+    readonly state: _angular_core.InputSignal<"error" | "success" | "default">;
+    /** Tệp đã nhận (sau khi kiểm). */
+    readonly selectedFiles: _angular_core.WritableSignal<File[]>;
+    protected readonly items: _angular_core.WritableSignal<OlUploadFile[]>;
+    protected readonly errors: _angular_core.WritableSignal<string[]>;
+    readonly filesChanged: _angular_core.OutputEmitterRef<File[]>;
+    /** Tệp bị loại kèm lý do — component đã tự hiện câu lỗi. */
+    readonly rejected: _angular_core.OutputEmitterRef<FileRejection[]>;
+    private readonly dropInput;
+    private readonly host;
+    protected readonly zoneState: _angular_core.Signal<"error" | "success" | "default">;
+    /**
+     * Dòng phụ trong vùng: "Dung lượng tối đa" nếu có `maxSize`, không thì
+     * `description` — giữ nguyên chữ của mã cũ đang truyền `description`.
+     */
+    protected readonly zoneHint: _angular_core.Signal<string>;
+    onFileSelected(event: Event): void;
+    protected openPicker(): void;
+    /** Nhận tệp từ hộp chọn hoặc kéo thả: kiểm định dạng + dung lượng rồi phát. */
+    protected receive(incoming: File[]): void;
+    /** Dán tệp (Ctrl+V / ⌘V) khi tiêu điểm ở ô hoặc vùng kéo thả. */
+    protected onPaste(event: ClipboardEvent): void;
+    /**
+     * Ô thường (không dropzone) hiện tên tệp bằng CHÍNH `<input type="file">` —
+     * nhận tệp dán mà không gán vào nó thì ô vẫn ghi "Chưa chọn tệp" dù đã nhận.
+     * `DataTransfer` là cách duy nhất gán `files` cho ô tệp.
+     */
+    private syncNativeInput;
+    protected removeItem(item: OlUploadFile): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFileInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFileInput, "ol-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dropzone": { "alias": "dropzone"; "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; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; "rejected": "rejected"; }, never, never, true, never>;
+}
+
+/**
+ * Ba dạng của một tệp:
+ *
+ * - `row`  — dòng trong danh sách: icon loại tệp, tên, dung lượng, thanh tiến
+ *   trình khi đang tải, nút thử lại khi lỗi. Figma không vẽ dạng này; dựng theo
+ *   token để danh sách tải nhiều tệp có chỗ báo tiến trình từng tệp.
+ * - `chip` — Figma "Button header + Dropbox (uploaded no limit)": viên bo góc,
+ *   nút xem 👁 + tên + ✕.
+ * - `card` — Figma "Button header + Dropbox (uploaded max 1 file)": khung viền,
+ *   icon + tên ở giữa, ✕ ở góc.
+ */
+type FileItemVariant = 'row' | 'chip' | 'card';
+declare class OlFileItem {
+    readonly file: _angular_core.InputSignal<OlUploadFile>;
+    readonly variant: _angular_core.InputSignal<FileItemVariant>;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    /** Hiện nút xem 👁 — nơi gọi tự mở tệp khi nhận `(preview)`. */
+    readonly previewable: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly remove: _angular_core.OutputEmitterRef<OlUploadFile>;
+    readonly preview: _angular_core.OutputEmitterRef<OlUploadFile>;
+    readonly retry: _angular_core.OutputEmitterRef<OlUploadFile>;
+    protected readonly kind: _angular_core.Signal<_edmicro_olkit.FileKind>;
+    protected readonly meta: _angular_core.Signal<_edmicro_olkit.FileKindMeta>;
+    protected readonly sizeText: _angular_core.Signal<string>;
+    protected readonly status: _angular_core.Signal<_edmicro_olkit.UploadStatus>;
+    protected readonly progress: _angular_core.Signal<number>;
+    /** Dòng phụ dưới tên: dung lượng + trạng thái, đọc được cả khi không nhìn màu. */
+    protected readonly metaText: _angular_core.Signal<string>;
+    protected readonly metaClass: _angular_core.Signal<"text-xs text-fg-danger" | "text-xs text-body-subtle">;
+    protected readonly rowClass: _angular_core.Signal<string>;
+    /** Nút hành động nhỏ — cùng hình với nút đóng của drawer/modal. */
+    protected readonly actionClass = "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:pointer-events-none disabled:opacity-50";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFileItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFileItem, "ol-file-item", never, { "file": { "alias": "file"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "previewable": { "alias": "previewable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "remove": "remove"; "preview": "preview"; "retry": "retry"; }, never, never, true, never>;
+}
+
+/**
+ * Vùng kéo–thả, theo Figma `ol-file-input-form` Type=Advanced (1149:48977):
+ * icon tải lên · "Nhấn để tải lên hoặc kéo thả" · "Dung lượng tối đa: …" ·
+ * (tuỳ chọn) nút "Chọn tệp".
+ *
+ * ## Cả vùng là MỘT `<button>`
+ *
+ * Bản cũ trong `ol-file-input` đặt `<input type="file" class="hidden">` —
+ * `display: none` nên Tab không tới được, bàn phím không mở được hộp chọn tệp.
+ * Ở đây vùng là nút thật: Tab tới, Enter/Space mở hộp chọn (qua `(pick)`, nơi
+ * gọi gọi `input.click()`), và trình đọc màn hình đọc nhãn của nút.
+ *
+ * Nút "Chọn tệp" bên trong chỉ là HÌNH (`<span>`), không lồng `<button>` trong
+ * `<button>` — HTML cấm, và hai nút lồng nhau làm một lần bấm bắn hai sự kiện.
+ */
+declare class OlFileDropzone {
+    readonly title: _angular_core.InputSignal<string>;
+    /** Dòng phụ, ví dụ "Dung lượng tối đa: 30MB". Rỗng → không vẽ. */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Nhãn nút "Chọn tệp" trong vùng (Figma Advanced). Rỗng → không vẽ nút. */
+    readonly ctaLabel: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Trạng thái viền: lỗi / thành công (Figma State=Danger / Success). */
+    readonly state: _angular_core.InputSignal<"error" | "success" | "default">;
+    /** Chiều cao tối thiểu — vùng trong khung có tiêu đề thấp hơn vùng đứng riêng. */
+    readonly compact: _angular_core.InputSignal<boolean>;
+    readonly describedBy: _angular_core.InputSignal<string>;
+    /** Dòng "hoặc dán ⌘V / Ctrl+V". Tắt khi nơi gọi không nhận tệp dán. */
+    readonly pasteHint: _angular_core.InputSignal<boolean>;
+    protected readonly shortcut: string;
+    /** Bấm vào vùng (chuột hoặc bàn phím) — nơi gọi mở hộp chọn tệp. */
+    readonly pick: _angular_core.OutputEmitterRef<void>;
+    /** Tệp thả hoặc DÁN vào vùng. CHƯA kiểm định dạng — việc của nơi gọi. */
+    readonly filesDropped: _angular_core.OutputEmitterRef<File[]>;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    protected readonly zoneClass: _angular_core.Signal<string>;
+    protected onDragOver(event: DragEvent): void;
+    protected onDragLeave(event: DragEvent): void;
+    /**
+     * Dán khi tiêu điểm đang ở vùng. Có tệp thì nhận và `stopPropagation` — khung
+     * cha (`ol-file-upload`) cũng nghe `paste`, không chặn là nhận hai lần. Không
+     * có tệp (dán chữ) thì để yên cho trình duyệt.
+     */
+    protected onPaste(event: ClipboardEvent): void;
+    protected onDrop(event: DragEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFileDropzone, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFileDropzone, "ol-file-dropzone", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "pasteHint": { "alias": "pasteHint"; "required": false; "isSignal": true; }; }, { "pick": "pick"; "filesDropped": "filesDropped"; }, never, never, true, never>;
+}
+
+/**
+ * Toán phóng/kéo ảnh — hàm thuần, không đụng DOM, để test chính xác từng px.
+ *
+ * Ảnh vẽ bằng `transform: translate(x, y) scale(s)`, gốc biến đổi ở TÂM ảnh.
+ * Một điểm `p` của ảnh (tính từ tâm, đơn vị px lúc chưa phóng) hiện ra ở
+ * `q = t + s·p` so với tâm khung. Phóng quanh điểm `q` (chỗ bấm / con trỏ /
+ * giữa hai ngón) nghĩa là giữ `q` đứng yên: `p = (q − t) / s`, `t' = q − s'·p`.
+ */
+interface ZoomState {
+    scale: number;
+    x: number;
+    y: number;
+}
+
+/** Một ảnh trong trình xem. */
+interface OlPreviewImage {
+    src: string;
+    /** Chữ thay thế — cũng hiện làm chú thích dưới ảnh. */
+    alt?: string;
+}
+/**
+ * Xem ảnh phóng to trên lớp phủ toàn màn (lightbox) — một ảnh hoặc lướt qua
+ * nhiều ảnh.
+ *
+ * - Nhiều ảnh: nút ‹ › hai bên, số thứ tự "2 / 5", phím ← → chuyển ảnh, vòng quanh.
+ * - Phóng to/thu nhỏ (1×–4×): bấm ảnh để phóng 2× đúng chỗ bấm, bấm lại để về;
+ *   nút − / + trên thanh, phím + − 0; cuộn chuột / chụm trackpad quanh con
+ *   trỏ; chụm hai ngón trên điện thoại. Đang phóng thì kéo để xem chỗ khác.
+ * - Escape, nút ✕ hoặc bấm ra nền tối để đóng. Tiêu điểm bị giữ trong lớp phủ
+ *   và trả về chỗ cũ khi đóng; nền trang khoá cuộn (`OlFocusTrapService`).
+ * - Escape đi qua ngăn xếp `OlOverlayContainer`: mở trình xem trong modal rồi
+ *   nhấn Escape chỉ đóng trình xem, modal còn nguyên.
+ *
+ * Dùng riêng được (`[(open)]` + `[images]` + `[(index)]`); `ol-file-upload`
+ * chế độ `image`/`images` dùng nó để xem ảnh vừa chọn.
+ */
+declare class OlImagePreview {
+    readonly images: _angular_core.InputSignal<OlPreviewImage[]>;
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Ảnh đang xem, tính từ 0. */
+    readonly index: _angular_core.ModelSignal<number>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly panel;
+    private readonly thumbStrip;
+    private readonly imageEl;
+    protected readonly zoom: _angular_core.WritableSignal<ZoomState>;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    protected readonly zoomPercent: _angular_core.Signal<number>;
+    protected readonly canZoomIn: _angular_core.Signal<boolean>;
+    protected readonly canZoomOut: _angular_core.Signal<boolean>;
+    protected readonly imageStyle: _angular_core.Signal<string>;
+    protected readonly imageClasses: _angular_core.Signal<string>;
+    /** Ngón tay / chuột đang ấn trên ảnh, theo pointerId. */
+    private readonly pointers;
+    private pinchStart;
+    private moved;
+    /** Vừa kéo xong: cú `click` theo sau không được tính là bấm (phóng / đóng). */
+    private suppressClick;
+    private readonly focusTrap;
+    private readonly overlayContainer;
+    private releaseEscape;
+    protected readonly count: _angular_core.Signal<number>;
+    /** Kẹp chỉ số: danh sách ảnh có thể ngắn lại (vừa xoá ảnh) trong lúc đang mở. */
+    protected readonly current: _angular_core.Signal<number>;
+    protected readonly image: _angular_core.Signal<OlPreviewImage>;
+    constructor();
+    /** Ô ảnh nhỏ: ảnh đang xem rõ + viền trắng; ảnh khác mờ, rê chuột thì rõ. */
+    protected thumbClasses(i: number): string;
+    close(): void;
+    next(): void;
+    prev(): void;
+    private go;
+    protected onKeydown(event: KeyboardEvent): void;
+    /** Bấm đúng nền tối (không phải ảnh hay nút) thì đóng. */
+    protected onBackdropClick(event: MouseEvent): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    /** Bàn phím trên ảnh (Enter / Space): phóng 2× quanh tâm, hoặc về cỡ gốc. */
+    toggleZoom(): void;
+    resetZoom(): void;
+    /** Kích thước ảnh khi CHƯA phóng (offsetWidth không tính transform). */
+    private imageSize;
+    /**
+     * Điểm màn hình → toạ độ tính từ TÂM ảnh lúc chưa phóng. Hộp đã biến đổi có
+     * tâm = tâm gốc + (x, y) — phóng quanh tâm không dời tâm.
+     */
+    private toCenter;
+    private zoomAround;
+    /** Bấm ảnh: đang ở cỡ gốc thì phóng 2× đúng chỗ bấm, đang phóng thì về. */
+    protected onImageClick(event: MouseEvent): void;
+    /** Cuộn chuột / chụm trackpad (trình duyệt gửi wheel + ctrlKey): phóng quanh con trỏ. */
+    protected onWheel(event: WheelEvent): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    private pinchDistance;
+    private releaseTraps;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlImagePreview, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlImagePreview, "ol-image-preview", never, { "images": { "alias": "images"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "index": "indexChange"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * - `single`   — một tệp; đã có thì thẻ tệp + nút "Thay đổi"
+ * - `multiple` — nhiều tệp dạng chip (👁 + tên + ✕), cuộn khi dài
+ * - `image`    — một ảnh bìa phủ kín khung; bấm ảnh để xem phóng to
+ * - `images`   — nhiều ảnh dạng lưới ô vuông; bấm ô để xem, lướt ‹ › qua các ảnh
+ * - `list`     — nhiều tệp dạng DÒNG có thanh tiến trình — Figma không có,
+ *   dùng khi tải tệp lớn cần báo tiến trình từng tệp
+ */
+type FileUploadMode = 'single' | 'multiple' | 'image' | 'images' | 'list';
+/**
+ * Khung tải tệp có tiêu đề — Figma `ol-file-input-form` "Button header + …"
+ * (3587:6834 · 3592:6990 · 3603:2606 · 3611:3494).
+ *
+ * ## Component KHÔNG tự tải lên máy chủ
+ *
+ * Nó nhận tệp, kiểm định dạng/dung lượng/số lượng, thêm vào `files` với
+ * `status: 'idle'` rồi phát `(filesAdded)`. Nơi gọi gửi HTTP và cập nhật
+ * `status`/`progress` của từng tệp qua `[(files)]`. Để component tự gọi HTTP
+ * thì nó phải biết URL, header xác thực, dạng phản hồi — ba thứ khác nhau ở
+ * mỗi màn.
+ */
+declare class OlFileUpload {
     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>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly mode: _angular_core.InputSignal<FileUploadMode>;
+    /** Chuỗi `accept` của `<input type="file">` — cũng dùng để KIỂM tệp kéo thả. */
+    readonly accept: _angular_core.InputSignal<string>;
+    /** Byte. 0 → không giới hạn. */
+    readonly maxSize: _angular_core.InputSignal<number>;
+    /** Chỉ cho `multiple`/`list`. 0 → không giới hạn. */
+    readonly maxFiles: _angular_core.InputSignal<number>;
+    /** Nhãn nút ở đầu khung. Rỗng → tự chọn theo chế độ và trạng thái. */
+    readonly buttonLabel: _angular_core.InputSignal<string>;
+    /** Hiện nút 👁 trên từng tệp. */
+    readonly previewable: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
     /**
-     * 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).
+     * Nhận tệp dán (Ctrl+V / ⌘V) ở BẤT KỲ ĐÂU trên trang, không chỉ khi tiêu
+     * điểm ở trong khung. Chỉ bật khi màn có MỘT khung tải — hai khung cùng bật
+     * thì một lần dán vào cả hai. Đang gõ trong ô nhập chữ thì bỏ qua.
      */
-    readonly paddingClass: _angular_core.Signal<"p-1" | "p-1.5" | "p-2">;
-    readonly accept: _angular_core.InputSignal<string>;
-    readonly multiple: _angular_core.InputSignal<boolean>;
-    readonly id: _angular_core.InputSignal<string>;
-    readonly selectedFiles: _angular_core.WritableSignal<File[]>;
-    readonly isDragging: _angular_core.WritableSignal<boolean>;
-    readonly filesChanged: _angular_core.OutputEmitterRef<File[]>;
-    onFileSelected(event: Event): void;
-    onDragOver(event: DragEvent): void;
-    onDragLeave(event: DragEvent): void;
-    onDrop(event: DragEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFileInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFileInput, "ol-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dropzone": { "alias": "dropzone"; "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; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; }, never, never, true, never>;
+    readonly pasteFromPage: _angular_core.InputSignal<boolean>;
+    /** Dòng gợi ý dưới khung, ví dụ định dạng cho phép. */
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly files: _angular_core.ModelSignal<OlUploadFile[]>;
+    /** Tệp VỪA nhận, đã qua kiểm — nơi gọi bắt đầu tải lên từ đây. */
+    readonly filesAdded: _angular_core.OutputEmitterRef<File[]>;
+    readonly fileRemove: _angular_core.OutputEmitterRef<OlUploadFile>;
+    readonly filePreview: _angular_core.OutputEmitterRef<OlUploadFile>;
+    readonly fileRetry: _angular_core.OutputEmitterRef<OlUploadFile>;
+    /** Tệp bị loại kèm lý do — component đã tự hiện câu lỗi dưới khung. */
+    readonly rejected: _angular_core.OutputEmitterRef<FileRejection[]>;
+    private readonly fileInput;
+    private readonly host;
+    protected readonly uid: string;
+    protected readonly errors: _angular_core.WritableSignal<string[]>;
+    protected readonly isMultiple: _angular_core.Signal<boolean>;
+    protected readonly isImageMode: _angular_core.Signal<boolean>;
+    protected readonly hasFiles: _angular_core.Signal<boolean>;
+    protected readonly limitReached: _angular_core.Signal<boolean>;
+    protected readonly resolvedButtonLabel: _angular_core.Signal<string>;
+    protected readonly hintText: _angular_core.Signal<string>;
+    protected readonly describedBy: _angular_core.Signal<string>;
+    /**
+     * Ảnh xem trước cho chế độ `image`/`images`, theo id tệp: `url` có sẵn (ảnh
+     * đã trên máy chủ) hoặc object URL tạo từ `File`.
+     *
+     * Object URL phải THU HỒI khi tệp bị xoá / component huỷ, không thì mỗi ảnh
+     * rò một khối bộ nhớ bằng cả ảnh. Giữ theo id để thêm một ảnh không tạo lại
+     * URL của các ảnh cũ (ảnh cũ sẽ nháy vì `src` đổi).
+     */
+    protected readonly imageUrls: _angular_core.WritableSignal<Record<string, string>>;
+    private readonly objectUrls;
+    /** Ảnh cho trình xem — chỉ tệp đã có URL. */
+    protected readonly previewImages: _angular_core.Signal<OlPreviewImage[]>;
+    protected readonly previewOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly previewIndex: _angular_core.WritableSignal<number>;
+    constructor();
+    /** Tạo URL cho ảnh mới, thu hồi URL của ảnh đã bị xoá. */
+    private syncImageUrls;
+    /** Mở trình xem tại ảnh của tệp này, và phát `(filePreview)`. */
+    openPreview(file: OlUploadFile): void;
+    openPicker(): void;
+    protected onInputChange(event: Event): void;
+    /** Nhận tệp từ hộp chọn hoặc kéo thả: kiểm, thêm vào `files`, phát sự kiện. */
+    addFiles(incoming: File[]): void;
+    /** Dán tệp khi tiêu điểm trong khung (nút, chip, dòng tệp). */
+    protected onPaste(event: ClipboardEvent): void;
+    /** Thả thêm tệp vào vùng chip đã có tệp. */
+    protected onListDrop(event: DragEvent): void;
+    protected removeFile(file: OlUploadFile): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFileUpload, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFileUpload, "ol-file-upload", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "previewable": { "alias": "previewable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pasteFromPage": { "alias": "pasteFromPage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "files": { "alias": "files"; "required": false; "isSignal": true; }; }, { "files": "filesChange"; "filesAdded": "filesAdded"; "fileRemove": "fileRemove"; "filePreview": "filePreview"; "fileRetry": "fileRetry"; "rejected": "rejected"; }, never, ["[actions]"], true, never>;
 }
 
 declare class OlRange implements ControlValueAccessor {
@@ -3137,66 +4178,6 @@ declare class OlRange implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRange, "ol-range", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "dualRange": { "alias": "dualRange"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "showMinMaxLabels"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "minValue": "minValueChange"; "maxValue": "maxValueChange"; "disabled": "disabledChange"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
 }
 
-/**
- * Figma `ol-floating-label` #1149:50454 trục `Type` chỉ có
- * `Default | With background | Bordered` — ánh xạ sang `outlined`/`filled`.
- * `standard` không có trong thiết kế và template cũng **không có nhánh nào**
- * cho nó (grep ra 0 lượt), nên truyền vào là ra y hệt `outlined`. Đã xoá.
- */
-type FloatingLabelVariant = 'outlined' | 'filled';
-/**
- * Figma `ol-floating-label` (#1149:50454) có `Size=[sm|base|lg|xl]`; code
- * trước đây thiếu `xl`. Đo trên Figma, `xl` giống hệt `lg` trừ chiều cao
- * (48 -> 52px) và padding dọc (12 -> 14px): cùng gap 8, cùng icon 20px,
- * cùng cỡ chữ 16px, cùng bo góc 12px.
- */
-type FloatingLabelSize = 'sm' | 'base' | 'lg' | 'xl';
-type FloatingLabelState = 'default' | 'error' | 'success';
-declare class OlFloatingLabel implements ControlValueAccessor {
-    readonly value: _angular_core.ModelSignal<string>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly type: _angular_core.InputSignal<string>;
-    readonly variant: _angular_core.InputSignal<FloatingLabelVariant>;
-    readonly size: _angular_core.InputSignal<FloatingLabelSize>;
-    readonly state: _angular_core.InputSignal<FloatingLabelState>;
-    /**
-     * Khai bằng `model()` thay vì `input()` để Reactive Forms khoá được component:
-     * `setDisabledState()` cần `set()` giá trị, mà `input()` chỉ đọc. Cách dùng từ
-     * ngoài không đổi — `[disabled]="true"` và `disabled()` trong template vẫn như cũ.
-     */
-    readonly disabled: _angular_core.ModelSignal<boolean>;
-    readonly readonly: _angular_core.InputSignal<boolean>;
-    readonly helperText: _angular_core.InputSignal<string>;
-    readonly errorText: _angular_core.InputSignal<string>;
-    readonly id: _angular_core.InputSignal<string>;
-    readonly autocomplete: _angular_core.InputSignal<string>;
-    readonly labelBg: _angular_core.InputSignal<string>;
-    readonly prefixIcon: _angular_core.InputSignal<string>;
-    readonly suffixIcon: _angular_core.InputSignal<string>;
-    readonly prefixVariant: _angular_core.InputSignal<string>;
-    readonly suffixVariant: _angular_core.InputSignal<string>;
-    readonly hasPrefix: _angular_core.Signal<boolean>;
-    readonly hasSuffix: _angular_core.Signal<boolean>;
-    readonly isFocused: _angular_core.WritableSignal<boolean>;
-    readonly isFloated: _angular_core.Signal<boolean>;
-    private readonly generatedId;
-    protected 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>;
-    private onChange;
-    private onTouched;
-    onFocus(): void;
-    onBlur(): void;
-    onModelChange(val: string): void;
-    writeValue(val: string): void;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
-    setDisabledState(isDisabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlFloatingLabel, never>;
-    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>;
-}
-
 /**
  * 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.
@@ -3367,6 +4348,26 @@ declare class OlTagInput implements ControlValueAccessor {
     readonly maxTags: _angular_core.InputSignal<number | undefined>;
     readonly id: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<TagInputSize>;
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung ở dòng đầu, nổi lên khi focus, đang gõ
+     * hoặc đã có thẻ. Khung giãn nhiều dòng — nhãn nổi không đẩy thẻ.
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
     /**
      * Gom chiều cao + padding vào MỘT chuỗi thay vì nhiều `[class.X]`: hai class
      * cùng thuộc tính đều nằm trên thẻ thì trình duyệt chọn theo thứ tự luật CSS
@@ -3403,7 +4404,7 @@ declare class OlTagInput implements ControlValueAccessor {
      */
     protected markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTagInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTagInput, "ol-tag-input", never, { "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "tags": "tagsChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+    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; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "required": false; "isSignal": true; }; }, { "tags": "tagsChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 declare class OlRichTextEditor implements ControlValueAccessor {
@@ -3476,6 +4477,26 @@ declare class OlTimepicker implements ControlValueAccessor {
      * `aria-labelledby` đã lo — không cần truyền cái này.
      */
     readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung (sau icon đồng hồ), nổi lên khi focus,
+     * mở bảng chọn hoặc đã có giờ. Có addon thì nhãn nằm trong ô, không trùm addon.
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly format: _angular_core.InputSignal<TimepickerFormat>;
     readonly size: _angular_core.InputSignal<TimepickerSize>;
@@ -3587,7 +4608,7 @@ declare class OlTimepicker implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTimepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTimepicker, "ol-timepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "addonType": { "alias": "addonType"; "required": false; "isSignal": true; }; "addonText": { "alias": "addonText"; "required": false; "isSignal": true; }; "addonIcon": { "alias": "addonIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "timeChange": "timeChange"; "timestampChange": "timestampChange"; "isoChange": "isoChange"; "timeObjectChange": "timeObjectChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTimepicker, "ol-timepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "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>;
 }
 
 /**
@@ -3611,6 +4632,28 @@ declare class OlAutocomplete implements ControlValueAccessor {
     readonly value: _angular_core.ModelSignal<any>;
     readonly options: _angular_core.InputSignal<any[]>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung (sau icon kính lúp), nổi lên khi focus,
+     * đang gõ, mở danh sách hoặc đã chọn. Đa chọn: nổi lên không đẩy thẻ.
+     */
+    readonly floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    readonly labelWidth: _angular_core.InputSignal<string>;
+    protected readonly labelLayout: _angular_core.Signal<string>;
+    protected readonly labelBeside: _angular_core.Signal<boolean>;
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    readonly floatingVariant: _angular_core.InputSignal<FloatingVariant>;
+    /** Có giá trị để nhãn nổi: đã chọn (một hay nhiều) hoặc đang có chữ gõ. */
+    protected readonly hasFloatValue: _angular_core.Signal<boolean>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly labelKey: _angular_core.InputSignal<string>;
     readonly valueKey: _angular_core.InputSignal<string>;
@@ -3628,7 +4671,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
     protected readonly resolvedSize: _angular_core.Signal<FieldSize>;
     /**
      * Đệm ngang theo BẢNG CHUẨN họ form. Chỉ dùng khi KHÔNG `multiple` —
-     * chế độ nhiều thẻ có đệm riêng (`px-1.5 py-1`) vì các thẻ tự mang đệm.
+     * chế độ nhiều thẻ dùng `boxPaddingClass`.
      *
      * Ba lỗi cũ gộp làm một chỗ này (đo /autocomplete 2026-09-24):
      *   sm    `[class.px-2.5]` -> Angular CẮT ở dấu chấm, render `px-2` = 8px
@@ -3637,6 +4680,26 @@ declare class OlAutocomplete implements ControlValueAccessor {
      *   xl    có `px-4` nhưng nằm ở `[class.px-4]` rời, dễ lệch khỏi ba cỡ kia.
      */
     protected readonly fieldPaddingClass: _angular_core.Signal<string>;
+    /**
+     * Đệm khung. Chọn nhiều: icon kính lúp vẫn là phần tử đầu nên lề đầu theo
+     * cỡ như ô đơn (bản cũ `ps-1.5` để icon cách mép 6px, ô đơn 12px — hai ô
+     * cạnh nhau lệch nhau rõ). Lề cuối chừa chỗ cụm nút absolute: lề cỡ + icon
+     * 16px + `FIELD_ICON_GAP` 8px.
+     */
+    protected readonly boxPaddingClass: _angular_core.Signal<string>;
+    /**
+     * Cụm nút cuối (xoá / chevron / spinner). Rộng icon 16px + `ps-0.5` để chữ
+     * ↔ icon đúng 8px (`gap-1.5` của khung + 2px) — bản cũ `w-7` ra 18px.
+     * `justify-end`: spinner 12px vẫn neo mép phải như icon.
+     */
+    protected readonly controlClass: _angular_core.Signal<string>;
+    /**
+     * Đã có thẻ (chọn nhiều): khi KHÔNG gõ, ô gõ co về 0 (`min-w-0`, vẫn
+     * `flex-1`) nên luôn ở cùng dòng chip cuối — không đẻ ra một dòng trống.
+     * Focus để gõ thì mới cần chỗ (`focus:min-w-16`), lúc đó xuống dòng là đúng.
+     * Đo 2026-09-29: dòng chip cuối còn 43px, `min-w-12` (48px) vẫn rớt.
+     */
+    protected readonly hasChips: _angular_core.Signal<boolean>;
     /**
      * Cỡ chữ theo BẢNG CHUẨN. Trước đây `[class.text-base]` chỉ khai cho `lg`,
      * `xl` không có nhánh nào nên rơi về 16px MẶC ĐỊNH của trình duyệt — trùng
@@ -3816,7 +4879,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlAutocomplete, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlAutocomplete, "ol-autocomplete", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; "matchTriggerWidth": { "alias": "matchTriggerWidth"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "createOption": "createOption"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate"], never, true, never>;
+    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; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "floatingVariant": { "alias": "floatingVariant"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; "matchTriggerWidth": { "alias": "matchTriggerWidth"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "remoteSearch": { "alias": "remoteSearch"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "createOption": "createOption"; "search": "search"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; "added": "added"; "removed": "removed"; "selectionChange": "selectionChange"; }, ["optionTemplate"], never, true, never>;
 }
 
 declare class OlKbd {
@@ -4082,6 +5145,30 @@ declare class OlModalFooter {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlModalFooter, "ol-modal-footer", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Mốc gập menu vào ☰, theo bề rộng THANH. `xl` (78rem ≈ 1248px) là mặc định cũ.
+ * `md` (48rem = 768px) / `lg` (64rem = 1024px) cho thanh muốn giữ menu lâu hơn —
+ * thường kèm `compactItems`, vì menu đầy đủ chữ hiếm khi vừa 768px.
+ */
+type NavbarCollapseAt = 'md' | 'lg' | 'xl';
+/**
+ * Ba nấc hiển thị khi `compactItems` bật — thanh ĐO chỗ trống thật và chọn nấc
+ * đầy đủ nhất còn vừa, ghi vào `data-density` trên gốc `<nav>`:
+ *
+ * - `full`    — đủ hết.
+ * - `medium`  — vẫn ĐỦ CHỮ và icon menu; bỏ phần PHỤ của nơi gọi.
+ * - `text`    — đủ chữ, bỏ icon đầu mục (−24px mỗi mục).
+ * - `compact` — mục có icon chỉ còn icon (chữ `sr-only`, có `title`).
+ *
+ * Từ `medium` trở xuống gốc có thêm `data-condensed`: nơi gọi ẩn phần phụ
+ * (dòng phụ dưới logo, nhãn "Năm học:"…) bằng MỘT class
+ * `group-data-[condensed]/navbar:hidden`, không phải liệt kê từng nấc.
+ *
+ * Bản trước đổi sang icon ở mốc CỨNG 78rem: thanh 1180px chỉ thiếu 3px là vừa
+ * đủ chữ mà vẫn thành icon, để trống một khoảng lớn giữa menu và nút (báo
+ * 2026-09-28 kèm ảnh).
+ */
+type NavbarDensity = 'full' | 'medium' | 'text' | 'compact';
 declare class OlNavbar {
     readonly brandLogo: _angular_core.InputSignal<string>;
     readonly brandName: _angular_core.InputSignal<string>;
@@ -4090,19 +5177,71 @@ declare class OlNavbar {
     readonly fluid: _angular_core.InputSignal<boolean>;
     readonly showSearch: _angular_core.InputSignal<boolean>;
     readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    /** Thanh hẹp hơn mốc này thì mục menu gập vào ☰. Xem `NavbarCollapseAt`. */
+    readonly collapseAt: _angular_core.InputSignal<NavbarCollapseAt>;
+    /**
+     * Tự co theo chỗ trống thật (`full` → `medium` → `compact`, xem
+     * `NavbarDensity`) thay vì gập menu. Thường đi kèm `collapseAt="md"`/`"lg"`.
+     */
+    readonly compactItems: _angular_core.InputSignal<boolean>;
     readonly isCollapsed: _angular_core.ModelSignal<boolean>;
     readonly onSearch: _angular_core.OutputEmitterRef<string>;
     readonly onToggleMobileMenu: _angular_core.OutputEmitterRef<boolean>;
     searchQuery: string;
     private readonly elementRef;
+    private readonly mobilePanel;
+    private readonly navWrap;
+    private readonly destroyRef;
+    /** Nơi gọi có khai `slot="mobile-links"` (hoặc `slot="mobile"`) riêng. */
+    readonly hasMobileLinks: _angular_core.WritableSignal<boolean>;
+    /** Panel ☰ có gì để hiện — không thì đừng vẽ một dải trống có padding. */
+    readonly hasPanelContent: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /** Chiều cao khối mục xếp dọc (0 khi không xếp dọc) → `--ol-nav-stack-h`. */
+    private observeStackHeight;
+    private observeDensity;
+    /**
+     * Thử từ nấc đầy đủ nhất xuống, dừng ở nấc đầu tiên vừa hàng. Đặt thuộc tính
+     * rồi đọc kích thước NGAY (ép trình duyệt tính lại) nên không nháy khung nào
+     * — trạng thái cuối được gán trước khi vẽ.
+     *
+     * Đo bằng `scrollWidth`: logo có `min-w-0 truncate`, bị ép co thì
+     * `offsetWidth` nhỏ đi và phép đo báo "vừa" sai.
+     */
+    updateDensity(): void;
+    private isStacked;
+    /**
+     * Đo lại mỗi lần mở ☰, không chỉ lúc đầu: nội dung chiếu vào có thể nằm
+     * trong @if của nơi gọi và xuất hiện muộn.
+     */
+    private detectMobileSlots;
+    /**
+     * Khối mục menu. Khung ≥ 78rem: nằm ngang cạnh logo.
+     *
+     * Khung hẹp mà ☰ đang mở và KHÔNG có menu di động riêng: xuống dòng
+     * (`col-span-full row-start-2`) và xếp dọc — chính các mục desktop thành menu
+     * di động. Bản trước chỉ ẩn chúng, nên 5/7 thanh trên /navbar và /blocks bấm
+     * ☰ ra bảng trống (đo iPhone 13 giả lập, 2026-09-28).
+     */
+    protected readonly bp: _angular_core.Signal<{
+        row: string;
+        wide: string;
+        stackReset: string;
+        hide: string;
+    }>;
+    /** Hàng trên: lưới ở khung hẹp (logo | nút), flex từ mốc gập trở lên. */
+    readonly rowClasses: _angular_core.Signal<string>;
+    readonly toggleClasses: _angular_core.Signal<string>;
+    readonly navWrapClasses: _angular_core.Signal<string>;
+    readonly mobilePanelClasses: _angular_core.Signal<string>;
     readonly navbarClasses: _angular_core.Signal<string>;
-    readonly containerClasses: _angular_core.Signal<"w-full px-4 sm:px-6" | "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">;
+    readonly containerClasses: _angular_core.Signal<"w-full px-4 @[40rem]:px-6" | "max-w-7xl mx-auto px-4 @[40rem]:px-6 @5xl:px-8">;
     toggleMobileMenu(): void;
     handleSearchSubmit(): void;
     handleSearchInput(event: Event): void;
     handleGlobalKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlNavbar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlNavbar, "ol-navbar", never, { "brandLogo": { "alias": "brandLogo"; "required": false; "isSignal": true; }; "brandName": { "alias": "brandName"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "onSearch": "onSearch"; "onToggleMobileMenu": "onToggleMobileMenu"; }, never, ["[slot=brand], [brand]", "[slot=navigation], [navigation], ol-navbar-item, ol-nav-dropdown", "[slot=actions], [actions]", "[slot=mobile-user]", "[slot=mobile], [slot=mobile-links]", "[slot=mobile-actions]", "[slot=mobile-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlNavbar, "ol-navbar", never, { "brandLogo": { "alias": "brandLogo"; "required": false; "isSignal": true; }; "brandName": { "alias": "brandName"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "collapseAt": { "alias": "collapseAt"; "required": false; "isSignal": true; }; "compactItems": { "alias": "compactItems"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "onSearch": "onSearch"; "onToggleMobileMenu": "onToggleMobileMenu"; }, never, ["[slot=brand], [brand]", "[slot=navigation], [navigation], ol-navbar-item, ol-nav-dropdown", "[slot=actions], [actions]", "[slot=mobile-user]", "[slot=mobile], [slot=mobile-links]", "[slot=mobile-actions]", "[slot=mobile-footer]"], true, never>;
 }
 
 declare class OlNavbarItem {
@@ -4125,7 +5264,40 @@ declare class OlNavDropdown {
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string | null>;
     readonly alignRight: _angular_core.InputSignal<boolean>;
+    /**
+     * Đang ở một trang CON của menu này (ví dụ "Lớp học" khi đang xem 10A1).
+     * Cùng hình với `ol-navbar-item` active — nền brand nhạt, chữ brand đậm —
+     * để thanh điều hướng luôn chỉ ra người dùng đang ở phân hệ nào.
+     */
+    readonly active: _angular_core.InputSignal<boolean>;
+    protected readonly triggerClasses: _angular_core.Signal<string>;
+    /**
+     * Số cột của panel. `1` (mặc định) là menu thường; từ `2` là mega-menu.
+     *
+     * Mega-menu dùng cho menu có nhiều nhóm mục — thay vì một cột dài phải cuộn,
+     * chia thành cột đứng cạnh nhau và người dùng quét mắt một lượt là thấy hết.
+     *
+     * Dưới `md` LUÔN về một cột bất kể giá trị: hai cột trên màn 390px là mỗi
+     * cột 150px, chữ vỡ dòng giữa từ. Ngưỡng theo breakpoint chứ không theo bề
+     * ngang panel vì panel treo tự do, không có container để đo.
+     */
+    readonly columns: _angular_core.InputSignal<1 | 2 | 3 | 4>;
+    /**
+     * Panel rộng bằng cả navbar thay vì bám mép nút.
+     *
+     * Mega-menu nhiều cột mà vẫn bám mép nút thì nửa panel tràn ra ngoài màn
+     * hình khi nút nằm bên phải. Trải hết chiều ngang thì luôn nằm trong khung.
+     */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Class của panel.
+     *
+     * Gom vào MỘT chuỗi thay vì nhiều `[class.x]` rời: hai class cùng thuộc tính
+     * thì trình duyệt chọn theo thứ tự luật trong file CSS chứ không theo thứ tự
+     * viết, kết quả đổi theo bản build.
+     */
+    protected readonly panelClasses: _angular_core.Signal<string>;
     private readonly elementRef;
     private readonly overlayContainer;
     constructor();
@@ -4133,9 +5305,120 @@ declare class OlNavDropdown {
     close(): void;
     handleClickOutside(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlNavDropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlNavDropdown, "ol-nav-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "alignRight": { "alias": "alignRight"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=trigger], [trigger]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlNavDropdown, "ol-nav-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "alignRight": { "alias": "alignRight"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=trigger], [trigger]", "*"], true, never>;
+}
+
+/** Một mục trong menu thả xuống. */
+interface OlMenubarItem {
+    id: string;
+    label: string;
+    /** Chữ phụ bên phải: phím tắt, ví dụ "⌘S". */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Kẻ ngăn NGAY TRƯỚC mục này. */
+    separatorBefore?: boolean;
+}
+/** Một menu trên thanh: nhãn trên thanh + danh sách mục. */
+interface OlMenubarMenu {
+    id: string;
+    label: string;
+    items: OlMenubarItem[];
+    disabled?: boolean;
+}
+/**
+ * Thanh menu kiểu ứng dụng để bàn — Tệp · Sửa · Xem.
+ *
+ * Chưa có node Figma — dựng theo design system, dùng lại cách trình bày của
+ * `ol-dropdown-item`.
+ *
+ * ## Khác `ol-dropdown` ở ba điểm, và đó là lý do có component riêng
+ *
+ * 1. **Mở một menu rồi RÊ sang menu kế là mở luôn**, không phải bấm lại. Đây
+ *    là hành vi người dùng đã quen từ phần mềm để bàn; thiếu nó thì thanh menu
+ *    chỉ là mấy cái dropdown đặt cạnh nhau.
+ * 2. **Mũi tên trái/phải đi giữa các menu**, lên/xuống đi trong menu đang mở.
+ *    WAI-ARIA quy định `role="menubar"` phải làm vậy.
+ * 3. **Một menu mở thì menu khác đóng** — không bao giờ có hai panel cùng lúc.
+ *
+ * ## Vì sao KHÔNG treo panel ra `<body>`
+ *
+ * Thanh menu thường nằm ngay dưới tiêu đề cửa sổ, không bị `overflow: hidden`
+ * cắt như dropdown trong bảng. Giữ panel trong cây DOM thì Tab đi vào được tự
+ * nhiên, không phải xử lý riêng như `ol-dropdown` đã phải làm.
+ *
+ * ## Lưu ý khi viết test
+ *
+ * Rê chuột giữa các menu cần bố cục thật để tính vị trí. jsdom không có, nên
+ * spec khoá phần bàn phím và trạng thái mở/đóng; hành vi rê nghiệm thu trên
+ * trình duyệt.
+ */
+declare class OlMenubar {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly overlayContainer;
+    readonly menus: _angular_core.InputSignal<OlMenubarMenu[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** `id` của menu đang mở. Rỗng nghĩa là không menu nào mở. */
+    private readonly openId;
+    readonly openMenuId: _angular_core.Signal<string>;
+    readonly itemSelect: _angular_core.OutputEmitterRef<{
+        menu: OlMenubarMenu;
+        item: OlMenubarItem;
+    }>;
+    private releaseEscape;
+    constructor();
+    protected toggle(menu: OlMenubarMenu): void;
+    /**
+     * Rê sang menu khác khi ĐANG có menu mở thì mở luôn menu đó.
+     *
+     * Không mở khi chưa menu nào mở — nếu không, lướt chuột ngang thanh là bung
+     * ra một panel người dùng không định mở.
+     */
+    protected onMenuHover(menu: OlMenubarMenu): void;
+    private open;
+    private closeAll;
+    protected onItemClick(menu: OlMenubarMenu, item: OlMenubarItem): void;
+    /**
+     * Mũi tên trái/phải đi giữa các menu — WAI-ARIA quy định cho `role="menubar"`.
+     *
+     * Vòng lại đầu khi tới cuối: thanh menu là một dải kín, không phải danh sách
+     * có điểm dừng. Người dùng nhấn phải liên tục thì quay về menu đầu.
+     *
+     * Dùng `(keydown)` trần rồi tự lọc phím vì thẻ đã có `(click)` — hai listener
+     * khác kiểu sự kiện trên cùng thẻ thì Angular suy `$event` theo cái đầu.
+     */
+    protected onTriggerKeydown(event: KeyboardEvent, index: number): void;
+    /**
+     * Menu kế tiếp **còn dùng được** theo hướng `step`, vòng lại khi tới biên.
+     *
+     * Phải bỏ qua menu `disabled`: nút gốc có thuộc tính `disabled` nên
+     * `.focus()` trên nó KHÔNG có tác dụng nào — tiêu điểm đứng nguyên chỗ cũ và
+     * người dùng tưởng bàn phím hỏng. Spec bắt đúng lỗi này khi menu cuối bị vô
+     * hiệu: nhấn End là tiêu điểm rơi về `<body>`.
+     *
+     * Trả `null` khi KHÔNG có menu nào dùng được — lúc đó không `preventDefault`,
+     * để phím về lại hành vi mặc định của trình duyệt.
+     *
+     * Nhận `from` ngoài dải (-1 hoặc `length`) để Home/End dùng chung một phép:
+     * Home là "từ trước mục đầu, đi sang phải", End là "từ sau mục cuối, đi sang
+     * trái".
+     */
+    private nextEnabled;
+    protected triggerClasses(menu: OlMenubarMenu): string;
+    protected itemClasses(item: OlMenubarItem): string;
+    protected readonly hasMenus: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlMenubar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlMenubar, "ol-menubar", never, { "menus": { "alias": "menus"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, never, never, true, never>;
 }
 
+/**
+ * Bố cục thanh phân trang (Figma `ol-pagination` #1149:81850).
+ *
+ * `with-dropdown` là BÍ DANH: ≡ `text-buttons` + `[withDropdown]="true"`. Ô
+ * chọn cỡ trang nay là cờ riêng gắn được vào MỌI type; giữ giá trị này vì gói
+ * đã publish. (Chú thích đặt ở đây, không chen giữa các giá trị: guard
+ * `check:gia-tri-ma-mau` đọc union sẽ đứt ở khối chú thích.)
+ */
 type PaginationType = 'default' | 'arrows' | 'dropdown-buttons' | 'text-buttons' | 'two-buttons' | 'buttons-helper' | 'with-dropdown' | 'with-input' | 'simple-input'
 /**
  * `grouped` và `separated` trước chỉ có ở `PaginationVariant`. Thêm vào đây
@@ -4180,6 +5463,17 @@ declare class OlPagination {
     readonly showText: _angular_core.InputSignal<boolean>;
     readonly text: _angular_core.InputSignal<string>;
     readonly showInfo: _angular_core.InputSignal<boolean>;
+    /**
+     * Thêm ô chọn số dòng mỗi trang ("10 mỗi trang") vào BẤT KỲ type nào — cạnh
+     * dãy số, cạnh hai nút, cạnh ô nhập trang… Trước đây nó chỉ có ở một type
+     * riêng (`with-dropdown`), muốn nó cạnh `arrows` hay `two-buttons` là không
+     * được. Danh sách lấy từ `pageSizeOptions`, đổi thì phát `(pageChange)` về 1.
+     */
+    readonly withDropdown: _angular_core.InputSignal<boolean>;
+    /**
+     * @deprecated Dùng `withDropdown`. Bí danh: bật là thêm ô chọn cỡ trang. Khi
+     * không đặt `type`, nó vẫn chọn bố cục `with-dropdown` như trước.
+     */
     readonly showSizeChanger: _angular_core.InputSignal<boolean>;
     readonly showQuickJumper: _angular_core.InputSignal<boolean>;
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
@@ -4193,6 +5487,10 @@ 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>;
+    /** Bố cục vẽ ra: `with-dropdown` là bí danh nên quy về `text-buttons`. */
+    readonly layoutType: _angular_core.Signal<PaginationType>;
+    /** Có vẽ ô chọn cỡ trang không — cờ riêng, độc lập với type. */
+    readonly hasPageSizeDropdown: _angular_core.Signal<boolean>;
     /**
      * Trang đang xem — gộp `pageIndex` và bí danh `currentPage`.
      *
@@ -4264,7 +5562,7 @@ declare class OlPagination {
     onPageSizeSelect(event: Event): void;
     handleJump(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlPagination, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlPagination, "ol-pagination", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "totalPagesInput": { "alias": "totalPages"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showText": { "alias": "showText"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "showInfo": { "alias": "showInfo"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showQuickJumper": { "alias": "showQuickJumper"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "pageIndex": "pageIndexChange"; "currentPage": "currentPageChange"; "pageChange": "pageChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlPagination, "ol-pagination", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "totalPagesInput": { "alias": "totalPages"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showText": { "alias": "showText"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "showInfo": { "alias": "showInfo"; "required": false; "isSignal": true; }; "withDropdown": { "alias": "withDropdown"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showQuickJumper": { "alias": "showQuickJumper"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "pageIndex": "pageIndexChange"; "currentPage": "currentPageChange"; "pageChange": "pageChange"; }, never, never, true, never>;
 }
 
 type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
@@ -4320,6 +5618,29 @@ declare class OlPopover {
     private cleanupAutoUpdate;
     /** Hàm trả panel về chỗ cũ khi đóng. */
     private detachPanel;
+    /**
+     * Selector cho phần tử nhận được tiêu điểm.
+     *
+     * `tabindex="-1"` bị loại: đó là dấu hiệu tác giả cố ý đưa phần tử ra khỏi
+     * đường Tab. `:disabled` cũng loại — trình duyệt không cho nó nhận tiêu điểm.
+     */
+    private static readonly FOCUSABLE;
+    /**
+     * Phần tử nhận tiêu điểm bên trong `root`, theo thứ tự nhìn thấy.
+     *
+     * Lọc phần ẩn bằng `[hidden]`/`[aria-hidden]` chứ KHÔNG `offsetParent`:
+     * `offsetParent` là `null` với mọi phần tử trong `position: fixed` — mà panel
+     * nổi hay dùng đúng kiểu định vị đó — nên danh sách sẽ rỗng và toàn bộ xử lý
+     * Tab lặng lẽ không chạy.
+     */
+    private focusablesIn;
+    /**
+     * Phần tử nhận tiêu điểm đứng ngay sau `element` trong thứ tự Tab của trang.
+     *
+     * Loại chính panel ra: nó treo cuối `<body>` nên nếu tính cả thì "phần tử sau
+     * nút trigger" lại rơi vào panel vừa đóng.
+     */
+    private nextFocusableAfter;
     constructor();
     toggle(): void;
     open(): void;
@@ -4607,6 +5928,99 @@ declare class OlRating {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlRating, "ol-rating", never, { "rating": { "alias": "rating"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "score": { "alias": "score"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "minLabel": { "alias": "minLabel"; "required": false; "isSignal": true; }; "maxLabel": { "alias": "maxLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+type OlResizableDirection = 'horizontal' | 'vertical';
+/**
+ * Hai khung chia nhau một vùng, kéo vạch giữa để đổi tỉ lệ.
+ *
+ * Chưa có node Figma — dựng theo design system: vạch kéo dùng `bg-default`,
+ * sáng lên `bg-brand` khi rê chuột hoặc đang kéo.
+ *
+ * ## Vì sao tỉ lệ phần trăm chứ không pixel
+ *
+ * Người dùng đổi cỡ cửa sổ thì hai khung phải giãn theo. Lưu pixel thì khung
+ * trái giữ nguyên còn khung phải nuốt toàn bộ phần thêm — tỉ lệ người dùng
+ * chọn biến mất.
+ *
+ * ## Bắt chuột trên `document`, không trên vạch
+ *
+ * Kéo nhanh thì con trỏ rời khỏi vạch trước khi trình duyệt kịp gửi sự kiện
+ * tiếp theo; nghe trên chính vạch thì kéo đứt đoạn. Nghe trên `document` lúc
+ * đang kéo và gỡ ngay khi thả.
+ *
+ * `setPointerCapture` giải quyết đúng việc này nhưng không có trong jsdom, nên
+ * spec sẽ không chạy được nhánh kéo — dùng `document` thì cả hai môi trường
+ * cùng một đường mã.
+ *
+ * ## Bàn phím
+ *
+ * Vạch là `role="separator"` có `tabindex`, mũi tên đổi 2% mỗi lần, Home/End
+ * về hai biên. Không có phần này thì người dùng bàn phím không đổi được tỉ lệ
+ * — và một khung chia đôi không kéo được thì chỉ là hai `<div>` cạnh nhau.
+ *
+ * ## Lưu ý khi viết test
+ *
+ * jsdom không tính bố cục: `getBoundingClientRect()` trả 0 cho mọi thứ, nên
+ * phép quy đổi toạ độ chuột sang phần trăm luôn ra `NaN` hoặc 0. Spec khoá
+ * phần bàn phím và ràng buộc min/max (tính thuần số); việc kéo chuột nghiệm
+ * thu trên trình duyệt.
+ */
+declare class OlResizable {
+    private readonly elementRef;
+    private readonly destroyRef;
+    readonly direction: _angular_core.InputSignal<OlResizableDirection>;
+    /** Tỉ lệ khung ĐẦU, tính bằng phần trăm. Hai chiều để nơi dùng lưu lại được. */
+    readonly ratio: _angular_core.ModelSignal<number>;
+    /** Chặn dưới và chặn trên, phần trăm. Khung nào cũng không nhỏ hơn `minRatio`. */
+    readonly minRatio: _angular_core.InputSignal<number>;
+    readonly maxRatio: _angular_core.InputSignal<number>;
+    /** Bước đổi mỗi lần nhấn mũi tên, phần trăm. */
+    readonly keyboardStep: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Bắn khi thả chuột hoặc nhấn phím — KHÔNG bắn liên tục lúc đang kéo.
+     *
+     * Tên là `resizeEnd` chứ không `ratioChange`: `model()` đã tự sinh
+     * `ratioChange` cho binding hai chiều, khai thêm output trùng tên là lỗi
+     * biên dịch NG1054. Hai thứ cũng khác nghĩa — `ratioChange` bắn mỗi lần giá
+     * trị đổi (kể cả từng nhịp kéo), còn `resizeEnd` chỉ bắn khi người dùng đã
+     * thả tay, đúng lúc nên lưu tỉ lệ xuống máy chủ.
+     */
+    readonly resizeEnd: _angular_core.OutputEmitterRef<number>;
+    private readonly dragging;
+    private releaseDrag;
+    constructor();
+    /** Ép tỉ lệ vào khoảng cho phép. Tách ra để spec khoá được mà không cần DOM. */
+    clamp(value: number): number;
+    protected onPointerDown(event: PointerEvent): void;
+    private stopDrag;
+    private applyFromPointer;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected readonly rootClasses: _angular_core.Signal<"flex h-full w-full" | "flex h-full w-full flex-col">;
+    /** Kích thước khung đầu — `flex-basis` phần trăm, khung sau lấp phần còn lại. */
+    protected readonly firstStyle: _angular_core.Signal<string>;
+    /**
+     * Vạch chia.
+     *
+     * ## Vùng bấm rộng hơn vạch nhìn thấy
+     *
+     * Vạch chỉ dày 6px thì đúng thẩm mỹ nhưng vùng bấm 6px vi phạm WCAG 2.5.8
+     * (ngưỡng 24px) — đo trên trình duyệt ra `6×188px`. Nên vạch nhận
+     * `w-6`/`h-6` để vùng bấm đủ 24px, còn phần MÀU nằm ở `::before` chỉ
+     * 6px ở giữa. Người dùng thấy vạch mảnh, tay và con trỏ thì có 24px để bắt.
+     *
+     * `::before` khai trong `handleBarClasses()` và đặt qua một `<span>` con chứ
+     * không dùng biến thể `before:` của Tailwind: `before:` cần nhiều class cho
+     * cùng một hình và khó đọc hơn một phần tử thật.
+     */
+    protected readonly handleClasses: _angular_core.Signal<string>;
+    /** Phần MÀU của vạch — mảnh 6px, nằm giữa vùng bấm 24px. */
+    protected readonly handleBarClasses: _angular_core.Signal<string>;
+    protected readonly ariaOrientation: _angular_core.Signal<"vertical" | "horizontal">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlResizable, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlResizable, "ol-resizable", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; "minRatio": { "alias": "minRatio"; "required": false; "isSignal": true; }; "maxRatio": { "alias": "maxRatio"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "ratio": "ratioChange"; "resizeEnd": "resizeEnd"; }, never, ["[first]", "[second]"], true, never>;
+}
+
 /**
  * Kiểu dữ liệu cho `ol-app-nav` — menu điều hướng Ôn Luyện.
  *
@@ -5402,13 +6816,13 @@ declare class OlToastContainer {
  * 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';
+type OlTooltipTheme = 'subtle' | '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 */
+    /** Theme variant — mặc định `subtle` (nền Primary 50). */
     readonly theme: _angular_core.InputSignal<OlTooltipTheme>;
     /** Tooltip ID for ARIA */
     readonly tooltipId: _angular_core.InputSignal<string>;
@@ -5585,6 +6999,134 @@ declare class OlIconService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
+type OlIconStackSize = 'sm' | 'base' | 'lg';
+/**
+ * Chồng nhiều icon hoặc logo lên nhau, kèm số đếm "+N".
+ *
+ * Chưa có node Figma — dựng theo `ol-avatar-group`, component cùng cơ chế đã
+ * có trong thư viện. Khác ở chỗ: avatar là ảnh người nên luôn tròn, còn icon
+ * thường là biểu tượng dịch vụ hay môn học nên mặc định bo vừa (`rounded-lg`)
+ * và có nền để icon một màu vẫn tách khỏi icon bên dưới.
+ *
+ * ## Vòng viền là thứ làm nên hiệu ứng chồng
+ *
+ * Mỗi ô có `ring-2 ring-buffer` — vòng viền màu nền trang, không phải viền
+ * màu. Nhờ nó hai ô chồng nhau vẫn thấy rõ ranh giới. Bỏ vòng này thì các ô
+ * dính thành một khối nhoè.
+ *
+ * `ring-buffer` chứ không `ring-white`: ở chế độ tối nền không phải trắng, và
+ * viền trắng trên nền đen là đường kẻ sáng chói quanh mỗi icon.
+ *
+ * ## Thứ tự chồng
+ *
+ * Mặc định ô ĐẦU nằm trên — giống xếp bài. `reverse` lật lại cho ô cuối nằm
+ * trên, dùng khi ô cuối là thứ cần nhấn (icon "thêm", trạng thái mới nhất).
+ *
+ * Làm bằng `flex-row-reverse` cộng đảo thứ tự dữ liệu chứ không bằng
+ * `z-index`: `z-index` cần stacking context và sẽ hỏng khi nơi gọi đặt
+ * component vào một phần tử có `transform` hay `opacity`.
+ */
+declare class OlIconStack {
+    readonly size: _angular_core.InputSignal<OlIconStackSize>;
+    /** Số đếm "+N" ở cuối. `null` thì không vẽ. */
+    readonly counter: _angular_core.InputSignal<string | number | null>;
+    readonly counterAriaLabel: _angular_core.InputSignal<string>;
+    /** Lật thứ tự chồng: ô CUỐI nằm trên thay vì ô đầu. */
+    readonly reverse: _angular_core.InputSignal<boolean>;
+    /**
+     * Bo góc của từng ô. `full` cho logo tròn, `lg` cho biểu tượng vuông.
+     *
+     * Áp lên CON qua biến thể `*:` của Tailwind, nên nơi gọi chỉ việc đặt
+     * `<ol-icon>` hay `<img>` vào là xong.
+     */
+    readonly rounded: _angular_core.InputSignal<"lg" | "full">;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    /**
+     * Ô đếm "+N".
+     *
+     * `text-heading` chứ KHÔNG `text-body`: tổ hợp `bg-neutral-quaternary` +
+     * `text-body` đo được 6.10 ở chế độ sáng nhưng chỉ 3.96 ở chế độ tối — dưới
+     * ngưỡng WCAG 4.5. Đây là kết luận đã đo ở `ol-avatar-group` (BUG-016 mục 5),
+     * theo tiền lệ sẵn có chứ không đoán lại.
+     *
+     * Chú thích để Ở ĐÂY chứ không trong template: template là một chuỗi
+     * template literal, nên dấu backtick trong chú thích HTML đóng chuỗi sớm và
+     * TS báo lỗi ở dòng chẳng liên quan (đã mắc khi viết file này).
+     */
+    protected readonly counterClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlIconStack, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlIconStack, "ol-icon-stack", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "counterAriaLabel": { "alias": "counterAriaLabel"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type OlItemSize = 'sm' | 'base' | 'lg';
+type OlItemAlign = 'start' | 'center';
+/**
+ * Một dòng nội dung: phần dẫn đầu · tiêu đề + mô tả · phần hành động.
+ *
+ * Chưa có node Figma — dựng theo design system, lấy khoảng cách và cỡ chữ từ
+ * `ol-checkbox-radio-form` (component gần nhất đang có cấu trúc này).
+ *
+ * ## Vì sao KHÔNG mở rộng `ol-list-group-item`
+ *
+ * Cái đó là `<li>` và phải nằm trong `<ul>` của `ol-list-group` — HTML quy
+ * định vậy. Còn dòng nội dung thì hay đứng một mình trong thẻ, trong ngăn kéo,
+ * hay trong kết quả tìm kiếm. Nhồi cấu trúc vào `<li>` là buộc mọi nơi dùng
+ * phải bọc thêm `<ul>` không có ý nghĩa ngữ nghĩa nào.
+ *
+ * Hai component dùng chung cách xếp; `ol-item` lo phần bên trong, đặt ở đâu là
+ * việc của nơi gọi.
+ *
+ * ## Ba khe, KHÔNG phải ba input
+ *
+ * `[lead]` và `[actions]` là khe cắm chứ không phải input nhận tên icon: phần
+ * dẫn đầu có thể là icon, avatar, ảnh bìa hay số thứ tự; phần hành động có thể
+ * là nút, huy hiệu, hay một dòng chữ. Nhận tên icon thì mỗi lần cần thứ khác
+ * lại phải thêm một input.
+ *
+ * Riêng `icon` giữ lại làm lối tắt cho ca hay gặp nhất. Nó nằm TRONG cùng khe
+ * `[lead]`, sau nội dung chiếu — nơi gọi truyền cả hai thì có hai phần dẫn đầu
+ * cạnh nhau, nhưng đó là ca hiếm và không đáng thêm selector CSS để chặn.
+ */
+declare class OlItem {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    /** Lối tắt cho phần dẫn đầu dạng icon. Khe `[lead]` đè lên nó. */
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<OlItemSize>;
+    /**
+     * Căn phần dẫn đầu và hành động theo chiều dọc.
+     *
+     * `start` khi mô tả dài hai ba dòng — icon căn giữa một khối cao trông như
+     * trôi lơ lửng. `center` khi chỉ có tiêu đề.
+     */
+    readonly align: _angular_core.InputSignal<OlItemAlign>;
+    /** Bấm được: thêm hiệu ứng hover và con trỏ tay, phát `itemClick`. */
+    readonly interactive: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Biến cả dòng thành liên kết. Bỏ qua khi `disabled`. */
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /**
+     * Enter và Space kích hoạt dòng `interactive`, như một `<button>` thật.
+     *
+     * Dùng `(keydown)` trần rồi tự lọc phím, KHÔNG `(keydown.enter)`: hai
+     * listener khác kiểu sự kiện trên cùng một thẻ thì Angular suy `$event` theo
+     * cái đầu — `(click)` đứng trước nên `$event` thành `MouseEvent` và TS báo
+     * lỗi ở dòng `keydown`.
+     *
+     * `preventDefault` cho Space, nếu không trang cuộn xuống một màn cùng lúc.
+     */
+    protected onKeyActivate(event: KeyboardEvent): void;
+    protected onClick(event: MouseEvent): void;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    protected readonly titleClasses: _angular_core.Signal<string>;
+    protected readonly descriptionClasses: _angular_core.Signal<string>;
+    /** Cỡ icon lối tắt, theo cỡ dòng. */
+    protected readonly iconSize: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlItem, "ol-item", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["[lead]", "*", "[actions]"], true, never>;
+}
+
 type OlBottomNavPosition = 'fixed' | 'relative';
 declare class OlBottomNav {
     readonly bordered: _angular_core.InputSignal<boolean>;
@@ -6423,6 +7965,24 @@ declare class OlFocusTrapService {
      * @param autoFocus Tự động focus vào element đầu tiên (default: true)
      */
     trap(element: HTMLElement, autoFocus?: boolean): void;
+    /**
+     * Chọn phần tử nhận focus khi overlay mở.
+     *
+     * Bản trước lấy phần tử focus được ĐẦU TIÊN theo thứ tự DOM. Header đứng
+     * trước nội dung nên mở modal/drawer nào tiêu điểm cũng rơi vào nút ✕ —
+     * người dùng phải Tab qua nút đóng mới tới ô nhập đầu tiên, và lỡ Enter là
+     * đóng mất hộp thoại vừa mở (báo 2026-09-28).
+     *
+     * Thứ tự ưu tiên:
+     * 1. phần tử nơi gọi đánh dấu `autofocus` / `data-autofocus` — trình duyệt
+     *    chỉ tôn trọng `autofocus` lúc tải trang, không phải lúc chèn hộp thoại,
+     *    nên service tự làm
+     * 2. phần tử đầu tiên KHÔNG phải nút đóng (`[data-ol-dismiss]`) — thường là ô
+     *    nhập đầu tiên trong nội dung; nội dung không có gì bấm được thì tới nút
+     *    đầu tiên ở footer
+     * 3. không còn gì khác mới về nút đóng, như cũ
+     */
+    private initialFocusTarget;
     /**
      * Release focus trap và restore focus về element trước đó
      */
@@ -6458,6 +8018,15 @@ declare class OlFocusTrapService {
      * Update danh sách focusable elements trong trap element
      */
     private updateFocusableElements;
+    /**
+     * Phần tử có đang hiện không.
+     *
+     * KHÔNG dùng `offsetParent !== null`: nó trả `null` cho chính phần tử
+     * `position: fixed` (nút nổi trong drawer/modal) dù phần tử hiện rõ, và luôn
+     * `null` trong jsdom — nên mọi phần tử bị lọc mất, service không focus được
+     * gì và spec không viết được.
+     */
+    private isVisible;
     /**
      * Handle keyboard navigation trong trap
      */
@@ -6744,6 +8313,6 @@ declare class OlOverlayContainer {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
-export { CHAT_BUBBLE_STATUS, FIELD_ASTERISK, FIELD_DISABLED, FIELD_HEIGHT, FIELD_HELPER, FIELD_HELPER_GAP, FIELD_LABEL, FIELD_LABEL_GAP, FIELD_MIN_HEIGHT, FIELD_PADDING_X, FIELD_RADIUS, FIELD_STATE, FIELD_TEXT, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAppNav, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, fieldSizeClasses, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay, stripDiacritics };
-export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppNavConfig, AppNavGroup, AppNavItem, AppNavUser, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeColor, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FieldSize, FieldState, 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, OverlayLayer, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SelectOption, SelectSize, SelectState, SeparatorOrientation, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TagInputSize, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToggleColor, TogglePosition, ToggleSize, YearCell };
+export { CHAT_BUBBLE_STATUS, FIELD_ASTERISK, FIELD_CLEAR_RESERVE_END, FIELD_DISABLED, FIELD_HEIGHT, FIELD_HELPER, FIELD_HELPER_GAP, FIELD_ICON_GAP, FIELD_ICON_RESERVE_END, FIELD_ICON_RESERVE_START, FIELD_LABEL, FIELD_LABEL_BESIDE, FIELD_LABEL_GAP, FIELD_MIN_HEIGHT, FIELD_PADDING_END, FIELD_PADDING_START, FIELD_PADDING_X, FIELD_RADIUS, FIELD_STATE, FIELD_TEXT, FILE_KIND_META, FLOAT_LABEL_START, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAppNav, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlDropdownSearch, OlDropdownState, OlEmpty, OlFileDropzone, OlFileInput, OlFileItem, OlFileUpload, OlFocusTrapService, OlFooter, OlFrame, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlIconStack, OlImagePreview, OlInput, OlInputCounter, OlItem, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlMenubar, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlResizable, OlRichTextEditor, OlScrollArea, OlScrollspy, OlSegmented, 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, PICKER_ICON_RESERVE_START, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, detectFileKind, endOfDay, fieldLabelLayout, fieldSizeClasses, fileExtension, filesFromClipboard, formatDate, formatFileSize, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isEditableTarget, isSameDay, isSameMonth, isSameYear, isToday, matchesAccept, multiValuePadY, parseDate, pasteShortcutLabel, startOfDay, stripDiacritics, toUploadFile, validateFiles };
+export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppNavConfig, AppNavGroup, AppNavItem, AppNavUser, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeColor, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownStateType, DropdownTrigger, EmptySize, FieldSize, FieldState, FileInputSize, FileItemVariant, FileKind, FileKindMeta, FileRejectReason, FileRejection, FileUploadMode, FileValidationResult, FileValidationRules, FloatingVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, LabelPosition, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, NavbarCollapseAt, NavbarDensity, OlAvatarStatusPosition, OlBottomNavPosition, OlButtonType, OlCheckboxRadioFormAlign, OlCheckboxRadioGroupRole, OlDateRangePickerVariant, OlFrameRounded, OlFrameSpacing, OlFrameVariant, OlGalleryGap, OlGalleryRatio, OlHelperType, OlIconStackSize, OlItemAlign, OlItemSize, OlMenubarItem, OlMenubarMenu, OlModalBackdrop, OlModalRole, OlPreviewImage, OlResizableDirection, OlScrollspyItem, OlScrollspyOrientation, OlSkeletonAnimation, OlSkeletonAspectRatio, OlSkeletonRounded, OlSkeletonType, OlSpeedDialTooltipPosition, OlTimepickerAddonType, OlToggleInputAlign, OlTreeNode, OlTreeNodeSelectionMode, OlTreeNodeToggleIcon, OlTreeSelectionMode, OlTreeToggleIcon, OlUploadFile, OtpInputSize, OverlayLayer, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SegmentedColor, SegmentedOption, SegmentedSize, 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, UploadStatus, YearCell };
 //# sourceMappingURL=edmicro-olkit.d.ts.map