@cyberskill/design 2.5.0 → 2.7.0

package/docs/vi/UPSTREAM.md

@@ -0,0 +1,39 @@
+# Kiểm chứng & đối soát upstream — cyberskill-official/design · v2.5.0
+
+Trạng thái: **Đã hợp nhất vào `main` (`v2.5.0`–`v2.6.0`)**.
+Đã kiểm chứng trực tiếp trên trình duyệt: **69/69** phép kiểm tra `D1`–`D10` (**10.0 / 10**), **64/64** phép kiểm tra cơ sở (**10.0 / 10**), và **146/146** trang hiển thị sạch qua các chế độ nguyên bản, ép tối và tương phản cao (`0 watch`).
+
+## 1 · Các bản sửa lỗi đã triển khai
+
+| Tệp | Thay đổi | Lý do |
+|---|---|---|
+| `dist/styles.css` | Toàn bộ chuỗi `styles.css` được làm phẳng thành một tệp (25 bảng kiểu, giữ nguyên thứ tự, đường dẫn `url()` giữ `../fonts`, `../assets`), được liên kết bởi các thẻ, trang hướng dẫn và UI kit. | Bộ kết xuất thẻ và các môi trường tiêu thụ không đi theo chuỗi `@import` vẫn nhận đủ phông chữ và token ngay ở lần vẽ đầu tiên. Được sinh lại qua `node scripts/flatten-css.mjs` (`npm run build:css`). |
+| `base/a11y.css` | Đã gỡ các quy tắc ghi đè thuộc tính tùy chỉnh `@media (prefers-contrast: more)` bị che khuất. | Bộ phân giải phạm vi trong `tokens/elements.css` (`:is(:root, [data-theme], …)`, độ đặc hiệu `0,3,0`) đã có độ ưu tiên cao hơn và sinh cùng giá trị tương phản cao. |
+| `tokens/elements.css` | Quy tắc đảo công tắc `prefers-contrast: more` rút gọn thành `:root { --_cs-standard: ; --_cs-high: initial; }`. | Kết quả tầng kế thừa không đổi (các quy tắc `[data-cs-contrast]` tường minh cùng độ đặc hiệu `0,1,0` và đứng sau theo thứ tự nguồn); giúp công cụ token ghi nhận các công tắc. |
+| `guidelines/guideline-language.js` | Thoát sớm khi đã có `window.CS_GuidelinesLanguage` hoặc không khớp bề mặt hướng dẫn nào; ngôn ngữ mặc định là **en** (`?language=vi` cho tiếng Việt). | Ngăn các công cụ đóng gói thực thi mọi tệp `.js` ném lỗi trên những bề mặt không phải trang hướng dẫn. |
+| `guidelines/atomic-view.html` | Giải cấu trúc `Image: CsImage`, `Comment: CsComment` và dùng tên bí danh trong các hàng Molecule. | Tránh che khuất `window.Image` / `window.Comment` khi công cụ bên ngoài gọi `new Image()`. |
+| `ui_kits/status-hub/static-locale.js` | Thoát sớm nếu trang không có `[data-preview-language-toggle]` / `[data-preview-language-select]`. | Tự động bỏ qua an toàn khi tập lệnh được đánh giá trên những trang không chứa công tắc ngôn ngữ. |
+| `components/feedback/feedback.card.html` | `.frame { flex: 1 1 100%; min-width: 0 }` | Ngăn khung minh họa toast bị co về chiều rộng bằng 0 trong hàng flex. |
+| `components/logo/logo.card.html` | Chữ thương hiệu trong cụm logo dùng `color: var(--cs-color-text-primary)`. | Đảm bảo chữ thương hiệu luôn nhìn thấy rõ ở chế độ tối. |
+
+## 2 · Bộ công cụ kiểm chứng đã phát hành (`audit/`)
+
+| Tệp | Mục đích |
+|---|---|
+| `audit/v2.5.0-verification.html`, `audit/verify-v2.5.0.js`, `audit/fixture-v2.5.0.html` | Bảng công cụ Kiểm chứng & Mẫu thử: 10 chiều đánh giá (`P0` an toàn nền pha sắc · `P1` tương phản WCAG 1.4.11 trên 32 phạm vi · `P2` tách lớp Umber, đồng bộ trạng thái không hợp lệ của 14 điều khiển, khoảng thoáng dấu tiếng Việt · `P3` kính lồng nhau, hợp đồng `DESIGN.md`/tài sản · `D8`–`D10` Bất biến học thuyết: focus hai vòng, vùng chạm ≥ 44px & an toàn chuyển động, tương phản cao, mật độ & trạng thái ngữ nghĩa), 69 phép kiểm tra × `v2.5.0+` / `v2.4.0` / `v2.3.1`, ma trận tương phản 32×6, báo cáo trường hợp biên, xuất JSON và bộ chuyển mẫu thử (`version × theme × element × variant`). |
+| `audit/v2.5.0-verification.json`, `_audit/ci/verify-audit-benchmarks-browser.mjs` | Biên nhận máy đọc và cổng chống thoái lui tự động (`npm run test:audit-regression`): đạt **10.0 / 10** (`69/69` trên `D1`–`D10`), bộ cơ sở nhúng đạt **64/64** (`v2.4.0` tag đạt `62/64`, `v2.3.1` đạt `8/64`), sức khỏe hiển thị đạt **146/146**, và **0 watch**. |
+| `audit/render-health.html` | Nạp toàn bộ 146 mẫu tài liệu, thẻ thành phần và trang UI-kit/hướng dẫn trong các khung ẩn (theo nguyên bản / ép tối / tương phản cao / bất kỳ phạm vi Ngũ Hành nào) và xác nhận không có trang mất kiểu, chưa phân giải, lỗi runtime, trống hoặc thiếu tương phản. |
+| `audit/fixture.html`, `audit/verify.js`, `audit/v2.4.0-verification.html` | Bộ nạp ba phiên bản (`?v=current|v240|baseline`) chạy lại 64 phép kiểm tra cơ sở trên `v2.5.0`, `v2.4.0` và `v2.3.1`. |
+| `audit/baseline-2.4.0/styles.flat.css`, `audit/baseline-2.3.1/styles.flat.css` | Các bản đóng gói phẳng `styles.css` từ tag `v2.4.0` và `v2.3.1` phục vụ đối chiếu trực tiếp ba phiên bản. |
+
+## 3 · Các mục đặc thù môi trường chủ không đưa vào upstream
+
+- Đổi tên tệp/xuất `OverlayManager` → `OverlayProvider` và bí danh `LocaleProvider.useMessages` (đặc thù quy tắc không gian tên gói của môi trường lưu trữ bên ngoài).
+- Không gian tên `window.DesignSystem_52f6e2` trong các thẻ (mẫu tài liệu chấp nhận cả biến toàn cục theo tiền tố môi trường chủ và `CyberSkillDS`).
+- Bản sao runtime DC đặc thù môi trường chủ và siêu dữ liệu sandbox (`thumbnail.html`, `github.md`).
+
+## 4 · Ghi chú đã ghi nhận
+
+- Mực trên nền pha sắc ở phạm vi tối mặc định: `.cs-item.is-selected` đạt **10.54:1**, `.cs-result__icon` đạt **8.42:1** — cả hai đều vượt xa ngưỡng WCAG AA (`4.5:1`).
+- `.cs-item.is-selected` áp dụng `--cs-color-text-accent` lên `border-color` và giữ màu chữ chính (`#F5EAD9`) theo đúng thiết kế.
+- Chấm chuyển trang của Carousel được đo cho con trỏ tinh trên máy tính; dưới `(pointer: coarse)`, `base/a11y.css` thay chấm `::before` bằng vùng chạm hướng tâm `44px` tô màu `--cs-color-text-accent`.

package/docs/vi/consuming.md

@@ -1,6 +1,6 @@
 # Tiêu thụ & nâng cấp CyberSkill Design System
 
-**Checkout nguồn:** VERSION **<!-- cs-source-version:checkout -->2.5.0<!-- /cs-source-version -->** là định danh nguồn cục bộ, không xác nhận phiên bản có trên registry. Với bản ứng viên chưa công bố, kiểm chứng tarball gói cục bộ hoặc checkout nguồn đã rà soát. Lệnh registry bên dưới chỉ bản ổn định 2.3.0 đã công bố (và inventory sibling ADOPT-001 ghi ngày tại 1.7.2), không tự đổi khi chuẩn bị bản phát hành. Chuẩn bị không cấp quyền công bố.
+**Checkout nguồn:** VERSION **<!-- cs-source-version:checkout -->2.7.0<!-- /cs-source-version -->** là định danh nguồn cục bộ, không xác nhận phiên bản có trên registry. Với bản ứng viên chưa công bố, kiểm chứng tarball gói cục bộ hoặc checkout nguồn đã rà soát. Lệnh registry bên dưới chỉ bản ổn định 2.6.0 đã công bố (và inventory sibling ADOPT-001 ghi ngày tại 1.7.2), không tự đổi khi chuẩn bị bản phát hành. Chuẩn bị không cấp quyền công bố.
 
 Cách mọi project — do người hoặc agent điều khiển — áp dụng design system HTML-first này, và cách nhận update an toàn. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 

package/docs/vi/contrast-report.md

@@ -1,6 +1,6 @@
 # Báo cáo contrast — cặp elemental (APCA)
 
-Tạo · quét tại VERSION 2.5.0.
+Tạo · quét tại VERSION 2.7.0.
 
 Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 

package/docs/vi/conventions.md

@@ -79,7 +79,7 @@ phần tử HTML, không dùng trong URL, thuộc tính, CSS hay script.
 
 **Element variant mới** — ở trong envelope oklch của element; đặt 10 token hợp đồng `--cs-accent-*` (gồm `--cs-accent-on-strong` ≥4.5:1 và APCA75 cho nội dung thường trên `-strong`) cộng `--cs-color-text-accent`/`--cs-color-link` (APCA-check cả hai); aurora wash kế thừa từ element qua `.cs-aurora-wash` (chỉ override class rule nếu variant thật sự cần ảnh riêng); đối tác gradient (`grad-b`) phải theo Tương sinh.
 
-**Ship check** — theo gate kiểm chứng portable trong `docs/doctrine.md`, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.5.0<!-- /cs-source-version -->**.
+**Ship check** — theo gate kiểm chứng portable trong `docs/doctrine.md`, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.7.0<!-- /cs-source-version -->**.
 
 ## Decision log (owner duyệt)
 

package/docs/vi/entrypoints/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "2.5.0"
+version: "2.7.0"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:
@@ -287,7 +287,7 @@ Các giá trị ghi đè theo phạm vi (tách biệt với các hàng token cơ
 ### Triết lý khoảng trắng, thang bán kính bo góc và hình học đa phương tiện
 
 - **Khoảng trắng và nhịp phân đoạn:** tách các dải nội dung lớn bằng `--cs-space-16` (`64px`) đến `--cs-space-24` (`96px`), giữ đệm trong của thẻ ở `--cs-space-4` (`16px`) đến `--cs-space-6` (`24px`), và giới hạn độ rộng cột đọc dài bằng `.cs-prose` (`--cs-prose-measure` `45rem`).
-- **Thang bán kính bo góc và hình học đa phương tiện (`Shapes`):** `--cs-radius-sm` (`4px`) cho `.cs-kbd`, `.cs-code`, và nhãn nhỏ; `--cs-radius-md` (`8px`) cho `.cs-button`, `.cs-field__control`, `.cs-popover__panel`, và `.cs-menu__list`; `--cs-radius-lg` (`14px`) cho `.cs-card`, `.cs-dialog`, `.cs-cmdk`, và tấm kính `.cs-surface-*`; `--cs-radius-full` (`999px`) cho `.cs-badge`, `.cs-tag`, và `.cs-avatar` tròn; đóng khung hình ảnh bằng `.cs-card__media`, `AspectRatio` (`16:9`, `4:3`, `1:1`), `.cs-image__zoom`, và `.cs-aurora--photo`; tài nguyên logo chính thức nằm tại `assets/logo-mark.svg`, `assets/logo-mark.png`, `assets/favicon.svg`, và `components/logo/logo-data.js` (không có thư mục `assets/logos/*`).
+- **Thang bán kính bo góc và hình học đa phương tiện (`Shapes`):** `--cs-radius-sm` (`4px`) cho `.cs-kbd`, `.cs-code`, và nhãn nhỏ; `--cs-radius-md` (`8px`) cho `.cs-button`, `.cs-field__control`, `.cs-popover__panel`, và `.cs-menu__list`; `--cs-radius-lg` (`14px`) cho `.cs-card`, `.cs-dialog`, `.cs-cmdk`, và tấm kính `.cs-surface-*`; `--cs-radius-full` (`999px`) cho `.cs-badge`, `.cs-tag`, và `.cs-avatar` tròn; đóng khung hình ảnh bằng `.cs-card__media`, `AspectRatio` (`16:9`, `4:3`, `1:1`), `.cs-image__zoom`, và `.cs-aurora--photo`; tài nguyên logo chính thức nằm tại `assets/logo-mark.svg`, `assets/logo-mark.png`, `assets/favicon.svg`, và `components/logo/logo-data.js` (không có thư mục `assets/logos/*`; trong bản xem trước HTML đơn tệp hoặc sandbox đám mây không có máy chủ tài nguyên tĩnh, nhúng trực tiếp `<svg viewBox="0 0 64 64">` nội tuyến thay vì `<img src="assets/logo-mark.svg">`).
 
 ## Độ nổi
 
@@ -399,7 +399,7 @@ Quyết định thiết kế ở cấp thành phần (button · textfield). Giá
 
 ## Cấu trúc thành phần HTML tĩnh (.cs-*)
 
-Bên dùng HTML tĩnh và công cụ sinh mã không kèm runtime định kiểu trực tiếp cho phần tử HTML ngữ nghĩa bằng các lớp `.cs-*` từ `styles.css` (hoặc `styles.layered.css`). Quản lý trạng thái tương tác, điều hướng bàn phím, giữ focus trong lớp phủ và thông báo ARIA động cần thành phần React hoặc mã kịch bản do bên dùng cung cấp; xem `docs/static-html-reference.md` để đối chiếu DOM đã kết xuất.
+Bên dùng HTML tĩnh và công cụ sinh mã không kèm runtime định kiểu trực tiếp cho phần tử HTML ngữ nghĩa bằng các lớp `.cs-*` từ `styles.css` (hoặc `styles.layered.css`). `dist/styles.css` là cùng tập hợp được làm phẳng thành một tệp cho các môi trường không theo chuỗi `@import` (bộ kết xuất thẻ, một số sandbox); sinh lại bằng `npm run build:css` sau khi sửa `tokens/` hoặc `base/`; các thẻ hướng dẫn trong `guidelines/` mặc định hiển thị tiếng Anh (`?language=vi` cho tiếng Việt). Quản lý trạng thái tương tác, điều hướng bàn phím, giữ focus trong lớp phủ và thông báo ARIA động cần thành phần React hoặc mã kịch bản do bên dùng cung cấp; xem `docs/static-html-reference.md` để đối chiếu DOM đã kết xuất.
 
 - **Tác vụ và nút bấm (`base/components.css`):** nút chính `.cs-button`, các biến thể `.cs-button--secondary`, `.cs-button--tertiary`, `.cs-button--ghost`, `.cs-button--danger`, `.cs-button--danger-ghost`; kích thước `.cs-button--xs` (`28px`, nâng lên `44px` khi `pointer: coarse`), `.cs-button--sm` (`36px`, nâng lên `44px` khi `pointer: coarse`), cỡ trung bình mặc định (`44px`), `.cs-button--lg` (`52px`), trải rộng toàn khung `.cs-button--full`; trạng thái `.is-disabled`, `.is-loading` kèm `.cs-button__spinner`.
 - **Điều khiển biểu mẫu và trường nhập (`base/components.css`, `base/forms.css`, `base/controls.css`):** khung trường `.cs-field` gồm `.cs-field__label`, `.cs-field__control`, `.cs-field__description`, `.cs-field__error` và trạng thái lỗi `.cs-field.is-invalid`; điều khiển lựa chọn `.cs-check`, `.cs-radio`, `.cs-switch` (`.cs-switch__track`); ô nhập phức hợp `.cs-select`, `.cs-native-select`, `.cs-search` (`.cs-search__clear`), `.cs-stepper`, `.cs-otp`, `.cs-slider`, `.cs-segmented`.

package/docs/vi/entrypoints/README.md

@@ -4,20 +4,20 @@
 
 [![Design System Gates](https://github.com/cyberskill-official/design/actions/workflows/design-system-gates.yml/badge.svg)](https://github.com/cyberskill-official/design/actions/workflows/design-system-gates.yml)
 
-Hệ thống thiết kế ấm áp, chuẩn doanh nghiệp, **ưu tiên tiếng Việt** cho **CyberSkill** — studio phần mềm Sài Gòn (thành lập 2020) biến *điều ước* rõ ràng thành phần mềm hoạt động. Neo trên **Umber** và **Ochre**, dẫn dắt bởi thần đèn vàng **Lumi**, mọi bề mặt giải quyết bốn trục độc lập: **Theme** (light · dark · system) × **Element** (bản sắc sản phẩm Ngũ Hành: Kim · Mộc · Thủy · Hỏa · Thổ, 15 biến thể) × **Language** (EN · VI) × **Style** (`data-cs-style` — gói duy nhất **liquid-glass**; không khai báo ≡ mặc định). Phía sử dụng chỉ cần liên kết một tệp: **`styles.css`**.
+Hệ thống thiết kế ấm áp, chuẩn doanh nghiệp, **ưu tiên tiếng Việt** cho **CyberSkill** — studio phần mềm Sài Gòn (thành lập 2020) biến *điều ước* rõ ràng thành phần mềm hoạt động. Neo trên **Umber** và **Ochre**, dẫn dắt bởi thần đèn vàng **Lumi**, mọi bề mặt giải quyết bốn trục độc lập: **Theme** (light · dark · system) × **Element** (bản sắc sản phẩm Ngũ Hành: Kim · Mộc · Thủy · Hỏa · Thổ, 15 biến thể) × **Language** (EN · VI) × **Style** (`data-cs-style` — gói duy nhất **liquid-glass**; không khai báo ≡ mặc định). Phía sử dụng chỉ cần liên kết một tệp: **`styles.css`** (`dist/styles.css` là cùng closure được làm phẳng thành một tệp cho các môi trường không theo chuỗi `@import` như bộ hiển thị thẻ và một số sandbox; sinh lại bằng `npm run build:css` sau khi sửa `tokens/` hoặc `base/`).
 
 ---
 
 ## Bắt đầu tại đây
 
-Đây là **tài liệu điểm vào** của CyberSkill Design System — VERSION của bản nguồn **<!-- cs-source-version:checkout -->2.5.0<!-- /cs-source-version -->** (xem `VERSION`; không xác nhận phiên bản có trên registry). **Trang sản phẩm** là Storybook tại **`/`** trên `design.cyberskill.world` (chỉ trên host; cục bộ: `npm run storybook`). Tài liệu vận hành được công bố ở thanh bên **Docs** của Storybook và Thư viện tài liệu tại `/docs/viewer.html` (các đường dẫn cũ `/dashboard`, `/dashboard.html` và `/playground/*` chuyển hướng về `/`).
+Đây là **tài liệu điểm vào** của CyberSkill Design System — VERSION của bản nguồn **<!-- cs-source-version:checkout -->2.7.0<!-- /cs-source-version -->** (xem `VERSION`; không xác nhận phiên bản có trên registry). **Trang sản phẩm** là Storybook tại **`/`** trên `design.cyberskill.world` (chỉ trên host; cục bộ: `npm run storybook`). Tài liệu vận hành được công bố ở thanh bên **Docs** của Storybook và Thư viện tài liệu tại `/docs/viewer.html` (các đường dẫn cũ `/dashboard`, `/dashboard.html` và `/playground/*` chuyển hướng về `/`).
 
 ### Bắt đầu nhanh theo đối tượng
 
 - **Nhà thiết kế** — mở Storybook (**Foundations / Components / Templates / Pages / Docs**). **Templates** liệt kê toàn bộ <!-- cs-count:templates -->85<!-- /cs-count --> điểm khởi đầu (Gallery → Atomic View, cùng story theo nhóm, gồm bộ 38 tài liệu VN A4 (Employment Suite + khung thương mại) tại **Templates → HR**). Đổi trực tiếp Theme × Element × Language × Style qua thanh công cụ Storybook, Atomic View và mẫu Elements Geometry.
 - **Soạn template trình duyệt** (máy chủ HTTP tĩnh) — đọc `SKILL.md` (chọn runtime + ràng buộc thiết kế), rồi hướng dẫn bên dưới; phối hợp `styles.css` + ESM đã biên dịch `@cyberskill/design` (`dist/esm/_esm/react.mjs`; JSX thô qua `@cyberskill/design/source`) / `_esm/cs.mjs` cũ / `_ds_bundle.js` (tìm theo tiền tố). `support.js` được cung cấp thông dịch `*.dc.html` trong trình duyệt; xem `docs/template-grammar.md` về ngữ pháp và ranh giới chỉ ở host. Hợp đồng component nằm cạnh từng component (`.d.ts` + `.prompt.md`).
 - **Tĩnh / open-spec** (ví dụ Google Stitch) — bắt đầu từ **`DESIGN.md`** (open-spec được sinh) → `llms.txt` → `tokens/tokens.dtcg.json`. Dựng giao diện **tĩnh** bằng `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/`. Dùng `.dc.html` qua trình thông dịch được cung cấp hoặc công cụ hiểu ngữ pháp; công cụ HTML thuần dùng `.cs-*` hoặc ảnh chụp kết quả hiển thị đã kiểm chứng.
-- **Người triển khai** — gói npm ổn định đã công bố **`@cyberskill/design@2.3.0`** (xem `docs/consuming.md`; quyền dùng trong `docs/consumer-grant.md` — vẫn UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Demo trình duyệt:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, `_esm/cs.mjs` cũ). Hoặc liên kết **`styles.css`** từ clone/subtree (một tệp cho toàn bộ), hoặc chép thư mục `templates/<slug>/` và sửa một dòng trong `ds-base.js` (đổi liên kết một dòng, được kiểm định đầu cuối tháng 7/2026). Xác định scope bằng `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Dấu hiệu bản phát hành: SHA đầu nhánh + `docs/release-notes.md` (VERSION nguồn là **<!-- cs-source-version:release-signal -->2.5.0<!-- /cs-source-version -->**; không có CHANGELOG).
+- **Người triển khai** — gói npm ổn định đã công bố **`@cyberskill/design@2.6.0`** (xem `docs/consuming.md`; quyền dùng trong `docs/consumer-grant.md` — vẫn UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Demo trình duyệt:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, `_esm/cs.mjs` cũ). Hoặc liên kết **`styles.css`** từ clone/subtree (một tệp cho toàn bộ), hoặc chép thư mục `templates/<slug>/` và sửa một dòng trong `ds-base.js` (đổi liên kết một dòng, được kiểm định đầu cuối tháng 7/2026). Xác định scope bằng `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Dấu hiệu bản phát hành: SHA đầu nhánh + `docs/release-notes.md` (VERSION nguồn là **<!-- cs-source-version:release-signal -->2.7.0<!-- /cs-source-version -->**; không có CHANGELOG).
 - **Người bảo trì** — `docs/doctrine.md` (mở rộng + kiểm chứng), rồi `CONTRIBUTING.md` và `docs/quality-gates.md`.
 
 ### Bản đồ tài liệu — phía sử dụng
@@ -151,7 +151,7 @@ CyberSkill **không kèm thư viện icon bên ngoài**. Hệ thống dùng **b
 <!-- END CATALOG COMPONENT INVENTORY -->
 
 - **Điểm nổi bật:** **Button** — primary Umber; biến thể primary/secondary/tertiary/ghost/danger/danger-ghost; cỡ xs–lg; loading, icon, fullWidth. **TextField / Textarea / Select / NativeSelect** dùng chung khung `.cs-field` (nhãn + mô tả/lỗi; an toàn dấu/IME). **DataTable** — caption, header có scope, render theo cột, bộ trạng thái idle/loading/error/empty. **Card** — panel ấm + header/body/footer. **Logo** hiển thị đúng biểu trưng chính thức; **Icon** điều khiển bộ icon nét nội bộ. Họ **AI-native** mang doctrine giải trình của thương hiệu — công bố, review của con người, thu nhận điều ước và độ tin cậy, đều diễn đạt bằng lời (không chỉ bằng màu).
-- **Cài đặt / tên gói:** Tên gói là **`@cyberskill/design`** (VERSION bản nguồn **<!-- cs-source-version:package-source -->2.5.0<!-- /cs-source-version -->**; quyền trong `docs/consumer-grant.md` chi phối *sử dụng* — gói vẫn UNLICENSED). **Không** cài `@cyberskill/react` cho cây này — tên đó thuộc danh mục trang marketing lịch sử, không phải gói này.
+- **Cài đặt / tên gói:** Tên gói là **`@cyberskill/design`** (VERSION bản nguồn **<!-- cs-source-version:package-source -->2.7.0<!-- /cs-source-version -->**; quyền trong `docs/consumer-grant.md` chi phối *sử dụng* — gói vẫn UNLICENSED). **Không** cài `@cyberskill/react` cho cây này — tên đó thuộc danh mục trang marketing lịch sử, không phải gói này.
 - **Danh mục nguồn và phần mở rộng:** Bề mặt CyberSkill trước đây có sáu primitive — `Button`, `TextField`, `Dialog`, `DataTable`, `AIDisclosureBadge`, `HumanReviewGate` — cùng `Logo` thương hiệu. Mọi thành phần khác trong gói **này** là **mở rộng có chủ ý**, dựng bằng vốn token riêng của thương hiệu: `Icon`, các primitive Forms / Feedback / Data / Navigation / Overlays chuẩn, nhóm AI-native (`PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`) chính thức hóa luồng điều ước Lumi, và linh vật `LumiAvatar`.
 
 ---
@@ -240,7 +240,7 @@ tokens/                    fonts · colors · typography · spacing · elevation
 base/                      reset · typography · components · forms · feedback · data · navigation · ai · controls · collections · shell · glass · interaction · a11y · responsive
 components/                button · textfield · dialog · datatable · forms · feedback · data · navigation · overlays · ai · logo · icon · brand
                            (each Name: Name.jsx + Name.d.ts + Name.prompt.md; one *.card.html per group)
-guidelines/                specimen cards (Colors · Type · Spacing · Surfaces · Brand · Motion · Elements · Responsive & Bilingual) · atomic-view.html
+guidelines/                specimen cards (Colors · Type · Spacing · Surfaces · Brand · Motion · Elements · Responsive & Bilingual; default to English, `?language=vi` for Vietnamese) · atomic-view.html
 templates/                 marketing-page · dashboard · slide-deck · auth · settings · app-shell · article · email (copyable .dc.html)
                            + team artifacts — tech (release/incident/rfc) · team (meeting-agenda) · hr (announcement) · board (report/deck/memo) · marketing (brief/newsletter/launch/case-study/press-release)
                            + business — legal (vn-mutual-nda / msa / sow; fictional legal-nda retired) · finance (invoice/quote) · sales (one-pager/proposal-deck) — letter print docs + client deck
@@ -270,6 +270,7 @@ SKILL.md                   Agent-Skills-compatible entry
 - **Thang chữ, chuyển động & vai trò tương phản:** `tokens/typography.css` và `tokens/motion.css` cung cấp alias vai trò ngữ nghĩa (`--cs-text-h1`…) và tiện ích `.cs-h1` / `.cs-body` trong `base/typography.css`. Trạng thái ngữ nghĩa cung cấp vai trò nền, chữ ghép cặp (`-fg`) và chữ trên bề mặt (`-text`) riêng. `--cs-accent-on-strong` là chữ ghép cặp cho nền nhấn mạnh (APCA ≥ 75 cho văn bản nội dung và WCAG ≥ 4.5 ở cả hai chế độ; bộ sinh nhắm 78, kiểm chứng bởi `test:strong-text-contrast`).
 - **UI kit & catalog tham chiếu:** UI kit là bản tái hiện diện mạo HTML-first với dữ liệu hư cấu. Số lượng khai báo và vai trò tài liệu công khai được sinh trong [catalog tham chiếu](../../../docs/reference-catalog.json).
 - **Kiểm chứng tiếp cận:** `_audit/a11y-harness.html` và `npm run test:a11y-harness` kiểm tra tên tiếp cận bằng axe cục bộ được ghim trên Chromium, Firefox và WebKit.
+- **Bảng kiểm chứng, quét sức khỏe hiển thị & cổng chống thoái lui:** `audit/v2.5.0-verification.html` chấm 69 phép kiểm tra trên 10 chiều (`D1`–`D7` khắc phục + `D8`–`D10` Bất biến học thuyết) đạt **10.0 / 10** và nhúng bộ cơ sở 64 phép kiểm tra (**64/64** trên bản hiện tại, **62/64** trên v2.4.0, **8/64** trên v2.3.1); `audit/render-health.html` quét toàn bộ **146** template, thẻ và UI kit với **0 bad** ở chế độ gốc, khi ép `theme=dark`, và khi kết hợp `theme=dark` + `contrast=high` trên `set=cards`, cùng bằng chứng máy đọc tại `audit/v2.5.0-verification.json` và được cưỡng chế bởi `npm run test:audit-regression` (`_audit/ci/verify-audit-benchmarks-browser.mjs`). Mực nền nhuộm phạm vi mặc định tối đạt **8.42:1–10.54:1** (`.cs-result__icon` đạt **8.42:1**, `.cs-item.is-selected` đạt **10.54:1** — cả hai đều vượt chuẩn WCAG AAA `7:1` với `0 watch`).
 
 <!-- BEGIN PINNED TOOLCHAIN BOOTSTRAP -->
 Trước khi chạy các lệnh `npm ci` hoặc `npm run` trong kho nguồn, dùng Node >=22.12.0 và chạy trực tiếp `node scripts/bootstrap-toolchain.mjs`. Lệnh này cài fixture npm 11.21.1 đã audit, ghim bằng lockfile, với lifecycle scripts bị tắt. Thêm `_audit/ci/fixtures/npm-cli/node_modules/.bin` vào PATH, hoặc chạy `node scripts/npm.mjs ci` và dùng `node scripts/npm.mjs` thay cho `npm` ở các lệnh tiếp theo (`devEngines` từ chối phiên bản npm khác trong kho nguồn; người dùng gói đã phát hành giữ package manager riêng). Xem [hướng dẫn kiểm tra và toolchain](../../../docs/validation.md).

package/docs/vi/guideline-language.md

@@ -1,6 +1,6 @@
 # Chế độ xem hướng dẫn ưu tiên tiếng Việt
 
-Hướng dẫn được biên soạn trong `guidelines/` mở bằng tiếng Việt. Mỗi hướng dẫn cũng có chế độ tiếng Anh gốc qua `?language=en`; `?lang=en` là bí danh. Đường dẫn trang và bookmark `#fragment` hiện có vẫn hợp lệ. Dùng `?language=vi` để chọn tiếng Việt rõ ràng. Trang `rtl-preview.html` tiếng Ả Rập là phép kiểm tra hai chiều có chủ ý, giữ nguyên nội dung và hướng chữ Ả Rập.
+Hướng dẫn được biên soạn trong `guidelines/` mặc định mở bằng tiếng Anh và cung cấp chế độ tiếng Việt qua `?language=vi`; `?lang=vi` là bí danh (`?language=en` / `?lang=en` chọn tiếng Anh rõ ràng). Đường dẫn trang và bookmark `#fragment` hiện có vẫn hợp lệ. Trang `rtl-preview.html` tiếng Ả Rập là phép kiểm tra hai chiều có chủ ý, giữ nguyên nội dung và hướng chữ Ả Rập.
 
 Trục Ngôn ngữ đổi văn bản hướng dẫn và mô tả ảnh hỗ trợ tiếp cận thực tế, không chỉ đổi `lang` của tài liệu. Atomic View áp dụng cùng lựa chọn cho giao diện hướng dẫn và hướng dẫn chuyển động được nhúng. Ví dụ component giữ hành vi ngôn ngữ đã khai báo: ví dụ dùng tham số ngôn ngữ theo trục, ví dụ tiếng Anh cố định có phạm vi tiếng Anh, còn nhãn tiếng Việt rõ ràng vẫn là tiếng Việt bên trong các ví dụ đó. Phép thử component tiếng Nhật được giữ lại; văn xuôi hướng dẫn chỉ hỗ trợ tiếng Việt và tiếng Anh.
 
@@ -22,4 +22,4 @@ Chính sách màu chỉ cho nguồn trong `scripts/guideline-hex-policy.json` gh
 
 Các kiểm tra tập trung xác minh mọi chủ sở hữu nguồn đã khai báo ở hai chế độ, mô tả hỗ trợ tiếp cận và ngôn ngữ cây con, compiler/CSP thực tế, tiêu điểm bàn phím và chọn ngôn ngữ bằng điều khiển native, đồng bộ hướng dẫn lồng và văn bản được escape. Bằng chứng trình duyệt phân biệt canvas thẻ trên máy tính với điều khiển chạm và mẫu có chiều rộng cố định. Kiểm tra tự động về độ đầy đủ và kết xuất không xác lập chất lượng ngôn ngữ hay nghiệm thu thị giác/hỗ trợ tiếp cận của con người. Nghiệm thu bản dịch tiếng Việt vẫn chưa được xác minh cho đến khi có người rà soát.
 
-HTML nguồn tiếng Anh giữ `lang="en"` khi JavaScript bị tắt hoặc không tải được tập lệnh ngôn ngữ. Runtime chiếu nội dung đã chọn trước khi đặt ngôn ngữ tài liệu; giao diện có thực thi mặc định là tiếng Việt.
+HTML nguồn tiếng Anh giữ `lang="en"` khi JavaScript bị tắt hoặc không tải được tập lệnh ngôn ngữ. Runtime chiếu nội dung đã chọn trước khi đặt ngôn ngữ tài liệu; giao diện có thực thi mặc định là tiếng Anh (`?language=vi` cho tiếng Việt).

package/docs/vi/release-notes.md

@@ -1,6 +1,6 @@
 # Ghi chú phát hành
 
-Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.5.0<!-- /cs-source-version -->** là phiên bản trong repository. Trang này cung cấp nội dung Storybook **Release Notes**; sửa cục bộ chưa xác nhận nội dung đang triển khai tại `design.cyberskill.world`.
+Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.7.0<!-- /cs-source-version -->** là phiên bản trong repository. Trang này cung cấp nội dung Storybook **Release Notes**; sửa cục bộ chưa xác nhận nội dung đang triển khai tại `design.cyberskill.world`.
 
 ## Bản sửa đổi chưa phát hành — đã triển khai cục bộ, chờ nghiệm thu
 
@@ -28,6 +28,30 @@ Các thay đổi này thuộc working tree đang sửa đổi. Đây chưa phả
 
 Release vẫn chờ nghiệm thu thị giác của con người, kiểm tra native/công nghệ hỗ trợ thủ công bắt buộc, quyết định về nguồn gốc tài nguyên và nghiệm thu hiện vật pilot đã thay đổi. Bằng chứng hỗ trợ đã thay đổi phải được review lại trong `components/lifecycle.json`. EN/VI là phạm vi ngôn ngữ mục tiêu; tiếng Nhật vẫn là spike chưa đầy đủ. Ghi chú này không cho phép mở rộng cam kết hỗ trợ, deprecate hay loại bỏ API.
 
+## Release — `@cyberskill/design@2.6.0`
+
+Phiên bản minor ổn định đã công bố được ghi nhận trong `_audit/ci/fixtures/npm-published-release.json` (quan sát lúc `2026-11-09T17:39:34.494Z`, tag `v2.6.0` tại commit `48ed4be40e83bc6d5e2763b03111b07aa2c26df4`).
+
+- **Benchmark 10 chiều & Cổng chống thoái lui tự động trên CI (`audit/v2.5.0-verification.html`, `audit/verify-v2.5.0.js`, `audit/fixture-v2.5.0.html`, `_audit/ci/verify-audit-benchmarks-browser.mjs`):** Mở rộng bộ kiểm toán trình duyệt trực tiếp lên **10 chiều (`69/69` phép kiểm tra đạt `10.0 / 10`, `0 watch`)** với `D8` (Vùng chạm ≥ 44px, Bảo toàn vòng lấy nét, Chế độ tương phản cao), `D9` (Đầy đủ token 5 Hành × 2 Chủ đề × 3 Biến thể, Toàn vẹn trang in A4, Giảm chuyển động), và `D10` (Nhận diện thương hiệu, Đầy đủ song ngữ EN/VI, Độ thuần khiết token), được cưỡng chế trong CI và `prepublishOnly` qua `npm run test:audit-regression`.
+- **Xuất CSS phẳng một tệp & Hướng dẫn logo nội tuyến (`package.json`, `scripts/flatten-css.mjs`, `DESIGN.md`, `docs/vi/entrypoints/DESIGN.md`):** Mở `"./dist/styles.css": "./dist/styles.css"` trong `package.json#exports`, tự động đóng dấu `VERSION` vào tiêu đề `dist/styles.css`, và quy định mẫu logo `<svg viewBox="0 0 64 64">` nội tuyến cho môi trường một tệp và cloud sandbox.
+- **Xác thực nhanh shard `act` gắn với commit (`.github/workflows/design-system-gates.yml`, `scripts/run-act-ci.mjs`, `scripts/verify-ci-checks.mjs`):** Kiểm chứng biên nhận `ci/act/unit-tests (1/4..4/4)` gắn với commit trước các bước cài đặt phụ thuộc và trình duyệt nặng, rút ngắn thời gian chạy `unit-tests` trên GitHub Actions xuống ~15 giây khi đã xác minh cục bộ qua `act`.
+
+```bash
+npm install @cyberskill/design@2.6.0
+```
+
+## Release — `@cyberskill/design@2.5.0`
+
+Phiên bản minor ổn định đã công bố được ghi nhận trong `_audit/ci/fixtures/npm-published-release.json` (quan sát lúc `2026-11-09T06:04:11.249Z`, tag `v2.5.0` tại commit `6e7fe3c158b122c8ca19b8253eb06460c7f2f919`). Các tag kho mã `v2.3.1` và `v2.4.0` đi trước `v2.5.0`.
+
+- **Đồng bộ chủ đề lồng nhau & Liquid Glass (`base/glass.css`, `tokens/theme-dark.css`):** Tính lại các token `--_cs-light` / `--_cs-dark`, `--_cs-surface-scrim` và toàn bộ tám chất liệu `--cs-glass-*-{bg,border}` bên trong các khối `[data-theme]` lồng nhau.
+- **Tương phản 32 scope & an toàn nền Dark mặc định (`base/collections.css`, `base/controls.css`, `base/feedback.css`, `base/shell.css`, `base/ai.css`):** Thay nền `--cs-accent-tint` thiếu scope ở Dark Mode bằng `color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))`, nâng các chỉ báo phi văn bản lên `--cs-color-text-accent` (`WCAG 1.4.11 ≥ 3:1` trên toàn bộ 32 scope) và bổ sung viền nội tiếp cho bề mặt Umber trên nền tối.
+- **Đồng bộ trạng thái lỗi 13 form control & chiều cao dòng tiếng Việt (`base/components.css`, `base/controls.css`, `base/typography.css`, `base/data.css`):** Thống nhất viền lỗi `.is-invalid` / `[aria-invalid="true"]` trên cả 13 loại form control và áp dụng `:lang(vi) { line-height: 1.22; }` cho `.cs-display` cùng `.cs-stat__value`.
+
+```bash
+npm install @cyberskill/design@2.5.0
+```
+
 ## Release — `@cyberskill/design@2.3.0`
 
 Phiên bản minor ổn định đã công bố được ghi nhận trong `_audit/ci/fixtures/npm-published-release.json` (quan sát lúc `2026-11-06T03:56:00.000Z`, tag `v2.3.0` tại commit `1f873e812e9a02ec68bbc49c3b7ae3248a165ac9`).