@edmicro/olkit 1.1.6 → 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ó
@@ -1052,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>;
@@ -1099,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>;
@@ -1113,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>;
     /**
@@ -1203,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.
      *
@@ -1257,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>;
@@ -1341,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,
@@ -1356,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;
@@ -1394,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 {
@@ -1906,6 +2185,74 @@ 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>;
 }
 
+/**
+ * Ô 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;
+    /**
+     * 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).
+     */
+    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';
+/**
+ * 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).
+ *
+ * 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 ý."
+ *
+ * Đệ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.
+ *
+ * `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ả.
+ */
+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
@@ -1962,112 +2309,6 @@ declare class OlFrame {
     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>;
 }
 
-/**
- * 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>;
-/**
- * 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";
-/** 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;
-
 /**
  * Nhãn cho ô nhập — khớp Figma `ol-label` (#1149:94727), trục
  * `Type=[Default | Required & icon | Two texts]`.
@@ -2440,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>;
@@ -2456,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
@@ -2480,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';
@@ -2516,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;
     /**
@@ -2534,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>;
 }
 
 /**
@@ -2646,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>;
@@ -2655,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>;
     /**
@@ -2796,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>;
@@ -2845,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;
@@ -3042,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>;
 }
 
 /**
@@ -3269,7 +3595,13 @@ interface SegmentedOption<T = string | number> {
     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;
@@ -3846,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.
@@ -4076,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
@@ -4112,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 {
@@ -4185,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>;
@@ -4296,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>;
 }
 
 /**
@@ -4320,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>;
@@ -4337,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
@@ -4346,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
@@ -4525,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 {
@@ -4791,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>;
@@ -4799,6 +5177,13 @@ 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>;
@@ -4814,6 +5199,16 @@ declare class OlNavbar {
     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
@@ -4828,8 +5223,17 @@ declare class OlNavbar {
      * 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<"hidden" | "@[78rem]:hidden absolute inset-x-0 top-[calc(100%+var(--ol-nav-stack-h,0px))] z-dropdown max-h-[calc(100dvh-5rem)] overflow-y-auto border-t border-default bg-neutral-primary px-4 pt-4 pb-6 space-y-4 animate-in fade-in slide-in-from-top-2 duration-150 shadow-xl">;
+    readonly mobilePanelClasses: _angular_core.Signal<string>;
     readonly navbarClasses: _angular_core.Signal<string>;
     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;
@@ -4837,7 +5241,7 @@ declare class OlNavbar {
     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 {
@@ -7909,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, FILE_KIND_META, 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, OlFileDropzone, OlFileInput, OlFileItem, OlFileUpload, OlFloatingLabel, 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, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, detectFileKind, endOfDay, fieldSizeClasses, fileExtension, filesFromClipboard, formatDate, formatFileSize, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isEditableTarget, isSameDay, isSameMonth, isSameYear, isToday, matchesAccept, 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, DropdownTrigger, EmptySize, FieldSize, FieldState, FileInputSize, FileItemVariant, FileKind, FileKindMeta, FileRejectReason, FileRejection, FileUploadMode, FileValidationResult, FileValidationRules, 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, 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, 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 };
+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