@edmicro/olkit 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edmicro/olkit",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Ôn Luyện Design System UI Component Library for Angular",
   "author": "EDMICRO",
   "license": "MIT",

package/types/edmicro-olkit.d.ts

@@ -544,6 +544,21 @@ declare class OlBadge {
      * khác trong thư viện — badge từng là chỗ duy nhất gọi trục này là `theme`.
      */
     readonly color: _angular_core.InputSignal<BadgeColor>;
+    /**
+     * Có vẽ viền không. Tắt thì giữ nguyên nền và màu chữ của `color`.
+     *
+     * Viền là thuộc tính ĐỘC LẬP với màu, nên tách thành input riêng thay vì
+     * thêm giá trị vào `BadgeColor`: làm thành màu thì muốn "brand không viền"
+     * và "danger không viền" phải nhân đôi cả bảng 12 màu thành 24.
+     *
+     * Khác `color="ghost"`: ghost bỏ CẢ nền lẫn viền và ép chữ về `text-heading`
+     * — nó là một màu. `[bordered]="false"` chỉ bỏ viền.
+     *
+     * Class `border` VẪN giữ (đổi thành `border-transparent`) chứ không bỏ hẳn:
+     * badge tính chiều cao theo hộp viền, bỏ đi là badge không viền thấp hơn
+     * badge thường đúng 2px khi đặt cạnh nhau. Cùng lý do với `ghost`.
+     */
+    readonly bordered: _angular_core.InputSignal<boolean>;
     /**
      * @deprecated Dùng `color`.
      *
@@ -580,7 +595,7 @@ declare class OlBadge {
     readonly dotClasses: _angular_core.Signal<"bg-fg-brand-strong" | "bg-fg-danger-strong" | "bg-fg-warning" | "bg-success-strong" | "bg-heading">;
     onDismiss(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlBadge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBadge, "ol-badge", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "avatarText": { "alias": "avatarText"; "required": false; "isSignal": true; }; "secondaryText": { "alias": "secondaryText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBadge, "ol-badge", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "avatarText": { "alias": "avatarText"; "required": false; "isSignal": true; }; "secondaryText": { "alias": "secondaryText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["*"], true, never>;
 }
 
 type BannerVariant = 'brand' | 'gradient' | 'warning' | 'dark' | 'subtle';
@@ -683,6 +698,30 @@ declare class OlBreadcrumbItem {
      * còn `disabled` là chặng có tồn tại nhưng không đi tới được.
      */
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Cho phép bấm để chuyển trang hay không. Mặc định **bật** — giữ hành vi cũ.
+     *
+     * Tắt khi muốn chặng VẪN hiện như liên kết (chữ xanh khi rê chuột, Tab tới
+     * được, trình đọc màn hình vẫn đọc là liên kết) nhưng KHÔNG tự điều hướng —
+     * ví dụ cần hỏi xác nhận trước khi rời trang đang sửa dở, hoặc nơi dùng tự
+     * xử lý điều hướng qua `(itemClick)`.
+     *
+     * Khác `disabled`: `disabled` bỏ HẲN thẻ `<a>`, chặng thành chữ xám không
+     * bấm được và không Tab tới được. `[clickable]="false"` giữ nguyên vẻ ngoài
+     * và trợ năng của liên kết, chỉ chặn hành vi điều hướng.
+     *
+     * Chặn bằng `preventDefault()` trong `(click)` chứ không bỏ `[routerLink]`:
+     * bỏ binding thì `<a>` mất `href`, trình đọc màn hình không còn coi nó là
+     * liên kết, và người dùng mất luôn khả năng xem đích đến ở thanh trạng thái.
+     */
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Phát khi người dùng bấm vào chặng — kể cả khi `[clickable]="false"`.
+     *
+     * Nhờ vậy nơi dùng chặn điều hướng mặc định rồi tự quyết: hỏi xác nhận, lưu
+     * nháp, hay điều hướng bằng đường khác.
+     */
+    readonly itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
     private readonly parentBreadcrumb;
     readonly isCurrent: _angular_core.Signal<boolean>;
     readonly effectiveSeparator: _angular_core.Signal<BreadcrumbSeparator>;
@@ -692,8 +731,23 @@ declare class OlBreadcrumbItem {
      * người dùng tưởng nó hỏng.
      */
     readonly isLink: _angular_core.Signal<boolean>;
+    /**
+     * `href` tĩnh dựng từ `routerLink()`, dùng cho nhánh `clickable=false`.
+     *
+     * Giữ được thuộc tính `href` thật trên thẻ `<a>` nên trợ năng không đổi;
+     * `preventDefault()` trong `onClick` lo phần chặn đi.
+     */
+    protected readonly staticHref: _angular_core.Signal<string>;
+    /**
+     * Chặn điều hướng khi `[clickable]="false"`, nhưng VẪN phát `itemClick` để
+     * nơi dùng tự xử lý.
+     *
+     * `preventDefault()` chặn cả `routerLink` lẫn `href`: RouterLink bỏ qua sự
+     * kiện đã bị chặn, còn trình duyệt không đi theo `href` nữa.
+     */
+    protected onClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlBreadcrumbItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBreadcrumbItem, "ol-breadcrumb-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showSeparator": { "alias": "showSeparator"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlBreadcrumbItem, "ol-breadcrumb-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showSeparator": { "alias": "showSeparator"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
 }
 
 type AppDevice = 'appstore' | 'googleplay' | 'google-play' | 'apple' | 'google';
@@ -1073,8 +1127,35 @@ declare class OlDatepicker implements ControlValueAccessor {
     onInputChange(val: string): void;
     clearInput(event: MouseEvent): void;
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
-    private donDepPanel;
-    onDocumentClick(event: MouseEvent): void;
+    private detachPanelNow;
+    /**
+     * Phần tử được bấm có thuộc datepicker này không.
+     *
+     * Ngăn xếp `OlOverlayContainer` gọi hàm này để biết một cú click là "trong"
+     * hay "ngoài". Trước đây mỗi component tự nghe `document:click`, nên một cú
+     * bấm ra ngoài đóng luôn MỌI lớp — mở datepicker trong modal rồi bấm nền là
+     * mất cả hộp thoại đang điền dở. Đo /modal ngày 2026-09-24 xác nhận.
+     *
+     * ## Phải kiểm CẢ PANEL, không chỉ host
+     *
+     * Với `appendTo="body"` panel đã bị `overlayContainer.attach()` chuyển ra
+     * `.ol-overlay-container` — không còn là con của host, nên click vào chính
+     * popup bị coi là click ra ngoài. Đo /modal: bật `appendTo` rồi bấm một
+     * ngày → popup ĐÓNG NGAY, range picker cần hai ngày nên người dùng không
+     * chọn nổi ngày kết thúc.
+     *
+     * Tắt `appendTo` thì popup ở lại đúng — lỗi chỉ xuất hiện khi treo ra ngoài,
+     * tức đúng ca sinh ra để dùng trong modal.
+     */
+    private ownsTarget;
+    /**
+     * Đóng popup khi component bị huỷ.
+     *
+     * Bắt buộc với `appendTo="body"`: panel treo vào `<body>` chứ không phải cây
+     * DOM của component, nên Angular huỷ component mà panel VẪN Ở LẠI. Chuyển
+     * trang khi đang mở lịch là để lại một popup mồ côi không ai đóng được.
+     */
+    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>;
 }
@@ -1192,8 +1273,26 @@ declare class OlDateRangePicker implements ControlValueAccessor {
     onEndInputChange(val: string): void;
     clearRange(event: MouseEvent): void;
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
-    private donDepPanel;
-    onDocumentClick(event: MouseEvent): void;
+    private detachPanelNow;
+    /**
+     * Phần tử được bấm có thuộc bộ chọn khoảng này không.
+     *
+     * Xem chú thích cùng tên ở `ol-datepicker` — hai component dùng chung cơ
+     * chế. Range picker còn nhạy hơn: nó cần HAI cú bấm (ngày đầu, ngày cuối),
+     * nên popup đóng sớm là người dùng không chọn nổi khoảng.
+     *
+     * Phải kiểm cả panel vì với `appendTo="body"` nó đã bị chuyển ra
+     * `.ol-overlay-container`, không còn là con của host.
+     */
+    private ownsTarget;
+    /**
+     * Đóng popup khi component bị huỷ.
+     *
+     * Bắt buộc với `appendTo="body"`: panel treo vào `<body>` nên Angular huỷ
+     * component mà panel VẪN Ở LẠI. Chuyển trang khi đang mở lịch là để lại một
+     * popup mồ côi không ai đóng được.
+     */
+    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>;
 }
@@ -1630,6 +1729,112 @@ declare class OlFooter {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlFooter, "ol-footer", never, { "container": { "alias": "container"; "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]`.
@@ -2030,7 +2235,7 @@ declare class OlInput implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     /** Gọi từ template mỗi khi giá trị đổi, để form biết. */
-    protected phatThayDoi(val: string): void;
+    protected emitChange(val: string): void;
     /**
      * Xoá nội dung ô.
      *
@@ -2092,41 +2297,13 @@ declare class OlTextarea implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     /** Gọi từ template mỗi khi giá trị đổi, để form biết. */
-    protected phatThayDoi(val: string): void;
+    protected emitChange(val: string): void;
     /** 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>;
 }
 
-/**
- * Bảng chuẩn kích thước và trạng thái cho MỌI ô nhập của thư viện.
- *
- * ## Vì sao cần
- *
- * Chín component họ form từng tự khai kích thước riêng, và chúng trôi khỏi
- * nhau. Đo ngày 2026-09-23 trên chín component:
- *
- *   thiếu cỡ `xl`   3 component  (select · autocomplete · input-counter)
- *   nền sai          3 component  (autocomplete · timepicker · datepicker)
- *   viền sai         5 component
- *   đệm ngang lệch   2px ở cả ba cỡ đầu (datepicker so với input)
- *   cỡ chữ `sm` lệch 2px (14px vs 12px)
- *
- * Nền và viền lệch **chỉ lộ ở chế độ tối**: sáng thì `--bg-secondary` và
- * `--bg-secondary-medium` cùng ra `#f9fafb`, tối thì `gray-950` vs `gray-800`.
- * Nên lỗi sống rất lâu — người dựng nhìn chế độ sáng, thấy giống hệt nhau.
- *
- * Đọc từ đây thì thêm ô nhập mới cũng tự khớp, và đổi thang chỉ sửa một chỗ.
- *
- * ## Không gộp chiều cao với đệm ngang
- *
- * Hai thứ tách riêng vì component có icon cần `ps-*` thay `px-*`. Gộp lại thì
- * mỗi component phải cắt chuỗi ra để bỏ phần đệm — dễ sai hơn là ghép vào.
- */
-/** Bốn cỡ của họ form. Trùng `InputSize`, `SelectSize`, `DatepickerSize`. */
-type FieldSize = 'sm' | 'base' | 'lg' | 'xl';
-
 /**
  * Thang cỡ theo Figma: `sm | base | lg`.
  *
@@ -2452,7 +2629,7 @@ declare class OlSelect implements ControlValueAccessor {
     private hengio;
     constructor();
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
-    private donDepPanel;
+    private detachPanelNow;
     /**
      * `[minTermLength]="undefined"` (bind vào khoá state chưa có) đè mất giá
      * trị mặc định, và `x < undefined` ra `NaN` — luôn `false`. Cùng lớp lỗi
@@ -2601,7 +2778,7 @@ declare class OlSelect implements ControlValueAccessor {
      * Phát `search` có GỠ NẢY. Gõ "nguyễn văn a" là 12 phím — không gỡ nảy thì
      * 12 lượt gọi API, mà chỉ lượt cuối có ích.
      */
-    private phatSearch;
+    private emitSearch;
     /** Đơn chọn đóng sau khi chọn, đa chọn thì không — trừ khi nơi gọi chốt khác. */
     private shouldClose;
     selectItem(item: any): void;
@@ -3298,6 +3475,20 @@ declare class OlTimepicker implements ControlValueAccessor {
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly format: _angular_core.InputSignal<TimepickerFormat>;
     readonly size: _angular_core.InputSignal<TimepickerSize>;
+    /**
+     * Đệm ngang và cỡ chữ theo BẢNG CHUẨN họ form.
+     *
+     * Trước đây template ghim cứng `px-3.5` (14px cho mọi cỡ) và không đặt cỡ
+     * chữ nào, nên nó thừa kế 16px mặc định. Đo trên /datepicker mục 8 ngày
+     * 2026-09-24, đặt cạnh ba ô kia:
+     *
+     *   sm/base   timepicker chữ 16px · ba ô kia 14px
+     *   mọi cỡ    timepicker đệm 14px · input 10/12/14/16px theo cỡ
+     *
+     * Gom vào MỘT chuỗi thay vì nhiều `[class.px-*]`: Angular cắt tên class ở
+     * dấu chấm nên `[class.px-2.5]` render ra `px-2`, lệch 2px so với thiết kế.
+     */
+    protected readonly fieldTextClasses: _angular_core.Signal<string>;
     readonly state: _angular_core.InputSignal<TimepickerState>;
     /**
      * Khai bằng `model()` thay vì `input()` để Reactive Forms khoá được component:
@@ -3373,7 +3564,7 @@ declare class OlTimepicker implements ControlValueAccessor {
     private emitAllChanges;
     constructor(elementRef: ElementRef);
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
-    private donDepPanel;
+    private detachPanelNow;
     onDocumentClick(event: MouseEvent): void;
     toggleDropdown(): void;
     private scrollToSelected;
@@ -3430,7 +3621,24 @@ declare class OlAutocomplete implements ControlValueAccessor {
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly size: _angular_core.InputSignal<AutocompleteSize>;
     /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
-    protected readonly resolvedSize: _angular_core.Signal<AutocompleteSize>;
+    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.
+     *
+     * 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
+     *         thay vì 10px. Đây là lý do phải gom vào chuỗi, không bind lẻ.
+     *   base  dùng chung `px-3.5` với `lg` = 14px, bảng chuẩn quy định 12px.
+     *   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>;
+    /**
+     * 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
+     * giá trị đúng một cách tình cờ, hỏng ngay khi cỡ gốc đổi.
+     */
+    protected readonly fieldTextClass: _angular_core.Signal<string>;
     readonly state: _angular_core.InputSignal<AutocompleteState>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly showAsterisk: _angular_core.InputSignal<boolean>;
@@ -3537,7 +3745,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
     private hengio;
     constructor(elementRef: ElementRef);
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
-    private donDepPanel;
+    private detachPanelNow;
     onDocumentClick(event: MouseEvent): void;
     /**
      * Chưa gõ đủ `minTermLength` ở chế độ từ xa — template hiện
@@ -3592,7 +3800,7 @@ declare class OlAutocomplete implements ControlValueAccessor {
      *
      * Dưới `minTermLength` thì KHÔNG phát: nơi gọi không phải tự kiểm lại.
      */
-    private phatSearch;
+    private emitSearch;
     selectOption(item: any): void;
     removeTag(valToRemove: any, event: MouseEvent): void;
     clearAll(event: MouseEvent): void;
@@ -3694,8 +3902,74 @@ declare class OlModal {
     readonly headingLevel: _angular_core.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
     readonly isOpen: _angular_core.ModelSignal<boolean>;
     readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Icon đứng trước tiêu đề ở phần đầu mặc định.
+     *
+     * Thêm 2026-09-24 cùng `description`. Trước đó `ol-modal` chỉ có `title`,
+     * nên muốn có icon hay dòng mô tả là phải lắp `ol-modal-header` thủ công —
+     * và lắp rồi thì `title` bị bỏ qua, phải khai lại qua `heading`. Đo trên
+     * /modal: 13 chỗ dùng modal, chỗ nào cần icon đều lặp lại đúng khuôn đó.
+     *
+     * Vẫn dùng `ol-modal-header` được khi cần thứ phần đầu mặc định không có
+     * (`supportingText`, `helperText`, nút tuỳ biến); lắp nó vào thì phần đầu
+     * mặc định tự tắt, xem `showDefaultHeader`.
+     */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Dòng mô tả dưới tiêu đề ở phần đầu mặc định. Xem chú thích ở `icon`. */
+    readonly description: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<ModalSize>;
+    /**
+     * Cho phép đóng hộp thoại bằng Escape hoặc bấm ra nền mờ.
+     *
+     * Tắt khi người dùng BUỘC phải chọn một phương án — xác nhận xoá, đồng ý
+     * điều khoản. Không còn ẩn nút X nữa: xem `showClose`.
+     */
     readonly dismissible: _angular_core.InputSignal<boolean>;
+    /**
+     * Có vẽ nút X ở góc phải phần đầu không. Mặc định **theo `dismissible`**.
+     *
+     * TÁCH KHỎI `dismissible` (2026-09-24). Trước đây một input gánh BỐN việc —
+     * hiện nút X, đóng bằng Escape, đóng khi bấm nền, và quyết định có dựng
+     * phần đầu — nên `[dismissible]="false"` (chỉ định chặn bấm-ra-ngoài) kéo
+     * theo MẤT nút X. Người dùng phải tự lắp `ol-modal-header` để lấy lại nút,
+     * tức phải khai lại cả tiêu đề vốn đã truyền qua `title`.
+     *
+     * Nay ba trường hợp tách bạch:
+     *
+     *   `[dismissible]="false"`                     chặn Escape + nền mờ, VẪN có nút X
+     *   `[dismissible]="false" [showClose]="false"` không lối thoát nào ngoài nút trong nội dung
+     *   `[showClose]="false"`                       giấu nút X, vẫn đóng được bằng Escape/nền
+     *
+     * Mặc định `true` — nút X LUÔN hiện trừ khi tắt tường minh.
+     *
+     * ĐÂY LÀ THAY ĐỔI PHÁ VỠ so với bản trước: `[dismissible]="false"` vốn ẩn
+     * nút X, nay vẫn giữ. Nơi nào thật sự muốn không có lối thoát nào phải thêm
+     * `[showClose]="false"`. Đổi vì hành vi cũ là LỖI chứ không phải lựa chọn:
+     * người dùng chặn bấm-ra-ngoài rồi mất nút đóng, phải tự lắp
+     * `ol-modal-header` để lấy lại — tức khai lại tiêu đề đã truyền qua `title`.
+     */
+    readonly showClose: _angular_core.InputSignal<boolean>;
+    /** Nút X có hiện không. Tách hẳn khỏi `dismissible` từ 2026-09-24. */
+    protected readonly closeVisible: _angular_core.Signal<boolean>;
+    /**
+     * Có `<ol-modal-header>` lồng bên trong không.
+     *
+     * Dùng để KHÔNG dựng phần đầu mặc định khi người dùng đã tự lắp header
+     * riêng. Trước đây phải tắt tay bằng `title=""` kèm `[dismissible]="false"`
+     * — quên một trong hai là lồng HAI khung header chồng nhau, mà build vẫn
+     * xanh nên chỉ nhìn mới thấy.
+     *
+     * `descendants: false` để chỉ bắt header là CON TRỰC TIẾP. Một `ol-modal`
+     * lồng trong nội dung của modal này thì header của nó không tính.
+     */
+    private readonly projectedHeader;
+    /**
+     * Có dựng phần đầu mặc định không.
+     *
+     * Người dùng lắp `ol-modal-header` riêng thì thôi — nếu không sẽ có hai
+     * khung `p-3` chồng nhau, nút đóng hiện hai lần.
+     */
+    protected readonly showDefaultHeader: _angular_core.Signal<boolean>;
     readonly backdrop: _angular_core.InputSignal<OlModalBackdrop>;
     readonly placement: _angular_core.InputSignal<ModalPlacement>;
     /**
@@ -3715,7 +3989,7 @@ declare class OlModal {
     toggle(): void;
     isVisible(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlModal, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlModal, "ol-modal", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, never, ["*", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlModal, "ol-modal", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "opened": "opened"; "closed": "closed"; }, ["projectedHeader"], ["*", "[footer]"], true, never>;
 }
 
 /**
@@ -5557,6 +5831,16 @@ declare class OlTreeNodeItem {
         selected: boolean;
         expanded: boolean;
     }>;
+    /**
+     * Chỉ `id` của nút, tách khỏi cả object.
+     *
+     * `effect` bên dưới đọc tín hiệu này thay vì `this.node()`: đọc cả object
+     * thì effect chạy lại mỗi lần nơi dùng thay MẢNG gốc — kiểu tải lại danh
+     * sách từ máy chủ — dù chính nút này không đổi gì. `computed` chỉ phát tín
+     * hiệu khi GIÁ TRỊ đổi, mà `id` là chuỗi nên so sánh bằng `===`: tải lại
+     * 100 nút với cùng id thì effect không chạy lần nào.
+     */
+    private readonly nodeId;
     constructor();
     /**
      * Nút cha có con chọn một phần thì ô của nó phải là dấu gạch.
@@ -6308,6 +6592,26 @@ declare class OlPositioningService {
  * không xử lý được ca modal chồng modal, mỗi lớp mở sau phải nằm trên lớp
  * trước.
  */
+/**
+ * Một lớp nổi đang mở trong ngăn xếp.
+ *
+ * `contains` cho phép ngăn xếp biết một cú click thuộc về lớp nào. Thiếu nó
+ * thì mỗi component phải tự nghe `document:click` và tự đoán — mà chúng không
+ * biết nhau, nên MỘT cú bấm ra ngoài đóng luôn mọi lớp: mở datepicker trong
+ * modal rồi bấm nền là mất cả hộp thoại đang điền dở. Đo /modal ngày
+ * 2026-09-24 xác nhận đúng như vậy.
+ */
+interface OverlayLayer {
+    /** Đóng lớp này. */
+    close: () => void;
+    /**
+     * Phần tử được bấm có thuộc lớp này không (kể cả phần đã treo ra `<body>`).
+     *
+     * Trả `undefined` nghĩa là lớp không tham gia cơ chế click-ngoài — nó tự lo,
+     * hoặc chỉ đóng bằng Escape và nút đóng.
+     */
+    contains?: (target: EventTarget | null) => boolean;
+}
 declare class OlOverlayContainer {
     private readonly doc;
     private host;
@@ -6356,6 +6660,12 @@ declare class OlOverlayContainer {
     private readonly openLayers;
     /** Trình nghe Escape duy nhất, gắn khi có lớp đầu tiên mở. */
     private escapeListener;
+    /**
+     * Trình nghe click duy nhất — cùng nguyên tắc với Escape.
+     *
+     * Bấm ra ngoài chỉ đóng lớp TRÊN CÙNG, lớp dưới chờ cú bấm sau.
+     */
+    private clickListener;
     /**
      * Đăng ký một lớp nổi vừa mở. Trả hàm gỡ — gọi khi lớp đóng.
      *
@@ -6387,7 +6697,7 @@ declare class OlOverlayContainer {
      * Hàm gỡ **an toàn khi gọi nhiều lần** — `close()` thường chạy cả từ phím
      * Escape lẫn từ nút đóng, và cả hai đường đều gọi nó.
      */
-    register(close: () => void): () => void;
+    register(close: () => void, contains?: (target: EventTarget | null) => boolean): () => void;
     /**
      * Gắn trình nghe khi có lớp đầu tiên, không gắn sẵn từ lúc dựng service.
      *
@@ -6395,8 +6705,32 @@ declare class OlOverlayContainer {
      * ứng dụng — kể cả khi người dùng đang gõ trong ô nhập bình thường.
      */
     private ensureEscapeListener;
-    /** Gỡ trình nghe khi lớp cuối cùng đóng — không để nó nghe vô ích. */
-    private teardownEscapeListenerIfIdle;
+    /**
+     * Trình nghe click duy nhất cho cả ngăn xếp.
+     *
+     * ## Vì sao không để mỗi component tự nghe
+     *
+     * Trước đây `ol-datepicker`, `ol-select`, `ol-dropdown`… mỗi cái một
+     * `@HostListener('document:click')`. Chúng không biết nhau, nên một cú bấm
+     * ra ngoài kích hoạt TẤT CẢ cùng lúc: mở datepicker trong modal rồi bấm nền
+     * thì cả datepicker lẫn modal cùng đóng, người dùng mất hộp thoại đang điền
+     * dở. Đo /modal ngày 2026-09-24: `dp=1, modal=true` -> sau MỘT cú bấm còn
+     * `dp=0, modal=false`.
+     *
+     * Escape đã giải đúng từ trước (xem `ensureEscapeListener`); đây là áp cùng
+     * nguyên tắc cho chuột.
+     *
+     * ## Chỉ lớp TRÊN CÙNG đóng
+     *
+     * Click nằm trong lớp trên cùng -> không đóng gì. Nằm ngoài -> đóng đúng lớp
+     * đó, và `stopPropagation` chặn lớp dưới nhận cùng cú bấm ấy.
+     *
+     * Lớp không khai `contains` thì bị bỏ qua hoàn toàn — nó tự lo phần click
+     * của mình, ngăn xếp không đoán thay.
+     */
+    private ensureClickListener;
+    /** Gỡ hai trình nghe khi lớp cuối cùng đóng — không để chúng nghe vô ích. */
+    private teardownListenersIfIdle;
     /**
      * @deprecated Dùng `attach()`. Giữ lại vì đã publish trong
      * `@edmicro/olkit@1.1.1` — bỏ phương thức công khai là breaking change.
@@ -6406,6 +6740,6 @@ declare class OlOverlayContainer {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
-export { CHAT_BUBBLE_STATUS, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAppNav, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay, stripDiacritics };
-export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppNavConfig, AppNavGroup, AppNavItem, AppNavUser, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeColor, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, OlAvatarStatusPosition, OlBottomNavPosition, OlButtonType, OlCheckboxRadioFormAlign, OlCheckboxRadioGroupRole, OlDateRangePickerVariant, OlGalleryGap, OlGalleryRatio, OlHelperType, OlModalBackdrop, OlModalRole, OlSkeletonAnimation, OlSkeletonAspectRatio, OlSkeletonRounded, OlSkeletonType, OlSpeedDialTooltipPosition, OlTimepickerAddonType, OlToggleInputAlign, OlTreeNode, OlTreeNodeSelectionMode, OlTreeNodeToggleIcon, OlTreeSelectionMode, OlTreeToggleIcon, OtpInputSize, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SelectOption, SelectSize, SelectState, SeparatorOrientation, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TagInputSize, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToggleColor, TogglePosition, ToggleSize, YearCell };
+export { CHAT_BUBBLE_STATUS, FIELD_ASTERISK, FIELD_DISABLED, FIELD_HEIGHT, FIELD_HELPER, FIELD_HELPER_GAP, FIELD_LABEL, FIELD_LABEL_GAP, FIELD_MIN_HEIGHT, FIELD_PADDING_X, FIELD_RADIUS, FIELD_STATE, FIELD_TEXT, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAppNav, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, fieldSizeClasses, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay, stripDiacritics };
+export type { AccordionVariant, AlertColor, AlertDialogTone, AlertLayout, AlertRounded, AlertType, AlertVariant, AppDevice, AppNavConfig, AppNavGroup, AppNavItem, AppNavUser, AppTheme, AutocompleteOption, AutocompleteSize, AutocompleteState, AvatarShape, AvatarSize, AvatarStatus, BadgeColor, BadgeShape, BadgeSize, BadgeTheme, BadgeType, BannerPosition, BannerVariant, BoxplotDataPoint, BreadcrumbItemStatus, BreadcrumbSeparator, BreadcrumbVariant, ButtonColor, ButtonGroupColor, ButtonGroupOrientation, ButtonGroupSize, ButtonSize, CardPadding, CardRadius, CardShadow, CardVariant, ChartDataPoint, ChartSeries, ChartType, ChatBubbleStatus, ChatSender, CheckboxSize, ChoiceControl, ChoiceControlPosition, ChoiceGroupLayout, ChoiceLayout, ChoiceShape, CommandGroup, CommandItem, DateCustomClass, DateRange, DatepickerPreset, DatepickerSelectionMode, DatepickerSize, DatepickerViewMode, DayCell, DeviceType, DrawerFooterLayout, DrawerPlacement, DrawerSize, DropdownAutoClose, DropdownPlacement, DropdownTrigger, EmptySize, FieldSize, FieldState, FileInputSize, FloatingLabelSize, FloatingLabelState, FloatingLabelVariant, HeatmapData, HelperFeature, HelperRule, HelperSize, HelperState, IconColor, IconShapeColor, IconShapeSize, IconShapeType, IconSize, IconVariant, InputCounterSize, InputSize, InputState, JumbotronVariant, ListGroupType, ModalFooterLayout, ModalPlacement, ModalSize, MonthCell, OlAvatarStatusPosition, OlBottomNavPosition, OlButtonType, OlCheckboxRadioFormAlign, OlCheckboxRadioGroupRole, OlDateRangePickerVariant, OlGalleryGap, OlGalleryRatio, OlHelperType, OlModalBackdrop, OlModalRole, OlSkeletonAnimation, OlSkeletonAspectRatio, OlSkeletonRounded, OlSkeletonType, OlSpeedDialTooltipPosition, OlTimepickerAddonType, OlToggleInputAlign, OlTreeNode, OlTreeNodeSelectionMode, OlTreeNodeToggleIcon, OlTreeSelectionMode, OlTreeToggleIcon, OtpInputSize, OverlayLayer, PaginationType, PaginationVariant, PopoverPlacement, PopoverTrigger, PositionedCoordinates, PositioningOptions, ProgressColor, ProgressLabelPosition, ProgressSize, RadarIndicator, RadioSize, RatingType, ScatterDataPoint, ScatterSeries, ScrollAreaAxis, ScrollAreaScrollbar, SelectOption, SelectSize, SelectState, SeparatorOrientation, SpeedDialAction, SpeedDialColor, SpeedDialDirection, SpeedDialTrigger, SpeedDialType, StepState, StepperBreakpoint, StepperOrientation, StepperVariant, TabsSize, TabsVariant, TagInputSize, TextareaState, TimeObject, TimepickerFormat, TimepickerSize, TimepickerState, Toast, ToastConfig, ToastPosition, ToggleColor, TogglePosition, ToggleSize, YearCell };
 //# sourceMappingURL=edmicro-olkit.d.ts.map