@cyberskill/design 2.0.0 → 2.2.0

package/docs/vi/ci-cd.md

@@ -18,7 +18,7 @@
 5. **`docs-consistency-blocker`** — merge blocker `docs-consistency` + `bilingual-parity`.
 6. **`whole-set-audits`** — quyết định B của owner: mọi push/PR, cộng nightly `0 3 * * *` và `workflow_dispatch` (responsive + language + theme overflow, ~15–20 phút).
 7. **`figma-variables-push`** — trên push `main` + thủ công. **`FIGMA_TOKEN` / `FIGMA_FILE_KEY` trống → soft-skip** (exit 0 + report). Quyết định A giữ tích hợp này ở trạng thái tùy chọn. Khi có thông tin xác thực, chỉ phản hồi giới hạn truy cập Variables và API không khả dụng đã mô tả trong `docs/figma.md` mới được soft-skip. Lỗi scope khi kiểm tra file, lỗi quyền ghi thông thường và dữ liệu token local không hợp lệ vẫn là lỗi cứng. Soft-skip không chứng minh đã đồng bộ Variables live.
-8. **`pixel-diff`** — so sánh ảnh chụp màn hình Playwright Chromium (`_audit/ci/pixel-diff.mjs`) với 15 baseline chọn lọc trong `_audit/baselines/*.png`; upload `pixel-baselines-linux` và `_audit/ci/pixel-diff-report.json`.
+8. **`pixel-diff`** — so sánh ảnh chụp màn hình Playwright Chromium (`_audit/ci/pixel-diff.mjs`) với 16 baseline chọn lọc trong `_audit/baselines/*.png`; upload `pixel-baselines-linux` và `_audit/ci/pixel-diff-report.json`.
 9. **`regenerate-tokens`** (pull request) + **`regenerate-tokens-push`** (push `main` / schedule / thủ công) — path filter phủ element seeds/packs (`element-seeds.json`, `elements.css`, mirror JSON/JS/DTCG, `generate-element-packs.mjs`) cộng natives / `VERSION`. Regenerate chạy `npm run tokens:generate`, gồm toàn bộ export token, bản sao native và output/catalog phụ thuộc. Trên **pull request** job chạy với `contents: read`, không bao giờ push, và **exit 1** khi có drift: chạy pipeline này ở local rồi chuẩn bị diff đã review (freshness bắt buộc trên PR). Chỉ job song sinh push/schedule/thủ công giữ `contents: write` và có thể auto-commit với `PUSH_TOKEN` (hoặc `github.token`). Auto-commit **không** dùng `[skip ci]` — tip được push phải chạy lại bảng gate (FIND-021 / TASK-IMP-008); lần chạy thứ hai deterministic là no-op.
 10. **`npm-hello-smoke`** — chứng minh consumer registry cho `@cyberskill/design@$VERSION` (**fail-closed**, FIND-087): `examples/npm-hello` → `npm install` từ registry + `npm run smoke`. Nếu VERSION **không** có trên registry, job **fail** (không soft-skip pack proof trên `cyberskill-official/design`). Fork chỉ được opt-in pack local khi đặt biến repo **`NPM_HELLO_ALLOW_LOCAL_PACK=true`**. Path-filtered trên push/PR khi `examples/npm-hello/**`, bề mặt publish package, hoặc workflow này đổi; luôn chạy trên schedule / `workflow_dispatch`.
 11. **`notify-schedule-failure`** — phát error annotation và exit 1 khi lượt chạy lịch trình hàng đêm bị lỗi; job không tạo hoặc cập nhật issue.

package/docs/vi/component-api.md

@@ -18,7 +18,7 @@ Hợp đồng công khai cho export được chọn là bộ ba `.d.ts`, `.jsx`,
 
 Với component khai báo `value`, `defaultValue`, `onChange`, `value` là state controlled, `defaultValue` khởi tạo state local, `onChange` báo thay đổi. Đối số callback theo khai báo từng component: có thể là scalar, collection hoặc event. Không thay DOM event native cho callback khai báo trả giá trị. Không chuyển quyền quản lý controlled/local trong một lần mount. [Consuming](consuming.md) mô tả ngoại lệ hiện tại và tích hợp form.
 
-API open-state khác nhau: một số overlay yêu cầu `open` và dùng `onClose`; số khác khai báo `open`, `defaultOpen`, `onOpenChange`. `onDismiss`, `onClose`, `onOpenChange` là hợp đồng riêng. Callback form được await chấp nhận kiểu trả về bất đồng bộ đã khai báo. Dùng khai báo của export được chọn thay vì giả định mọi component hỗ trợ bộ ba ownership.
+Callback open-state dùng chung `onOpenChange(open)`. Dialog, Drawer, Tour, CommandPalette, Toast và Alert nhận callback này. `onClose` vẫn là alias không tham số được hỗ trợ và vẫn chạy sau `onOpenChange(false)`. `onDismiss` của Alert vẫn là handler click được hỗ trợ và vẫn chạy sau hai callback kia. Callback form được await chấp nhận kiểu trả về bất đồng bộ đã khai báo. Dùng khai báo của export được chọn thay vì giả định mọi component hỗ trợ bộ ba ownership.
 
 ## Composition, ref và attribute native
 

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.0.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 và inventory sibling bên dưới chỉ bản ổn định 1.7.2 đã công bố, 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.2.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 và inventory sibling bên dưới chỉ bản ổn định 1.7.2 đã công bố, 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.0.0.
+Tạo · quét tại VERSION 2.2.0.
 
 Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
@@ -14,6 +14,81 @@ Pack được generate từ `tokens/element-seeds.json` (thang soft / middle / d
 | root (Thổ mặc định) | accent-bright trên ink (tiêu đề) | #F4BA17 / #45210E | 66.3 | ✓ |
 | root (Thổ mặc định) | accent-on trên accent-bright (chữ CTA) | #45210E / #F4BA17 | 66.3 | ✓ |
 | root (Thổ mặc định) | accent-bright trên panel tối (nhãn dark) | #F4BA17 / #221710 | 69.2 | ✓ |
+| tho · sand | text-accent trên trắng (nhãn đậm) | #695300 / #FFFFFF | 85.5 | ✓ |
+| tho · sand | text-accent trên tint (nhãn đậm) | #695300 / #FEF8E7 | 81.4 | ✓ |
+| tho · sand | accent-bright trên ink (tiêu đề) | #FDEAB7 / #292108 | 92.5 | ✓ |
+| tho · sand | accent-on trên accent-bright (chữ CTA) | #271E06 / #FDEAB7 | 91.6 | ✓ |
+| tho · sand | accent-bright trên panel tối (nhãn dark) | #F9E5AE / #221710 | 90.5 | ✓ |
+| tho | text-accent trên trắng (nhãn đậm) | #6E3B0E / #FFFFFF | 90.7 | ✓ |
+| tho | text-accent trên tint (nhãn đậm) | #6E3B0E / #FBF4E9 | 84.6 | ✓ |
+| tho | accent-bright trên ink (tiêu đề) | #F4BA17 / #45210E | 66.3 | ✓ |
+| tho | accent-on trên accent-bright (chữ CTA) | #45210E / #F4BA17 | 66.3 | ✓ |
+| tho | accent-bright trên panel tối (nhãn dark) | #FDD378 / #221710 | 81.9 | ✓ |
+| tho · clay | text-accent trên trắng (nhãn đậm) | #462402 / #FFFFFF | 100.2 | ✓ |
+| tho · clay | text-accent trên tint (nhãn đậm) | #462402 / #FCEEE3 | 91.5 | ✓ |
+| tho · clay | accent-bright trên ink (tiêu đề) | #F2C5A3 / #321B07 | 74.4 | ✓ |
+| tho · clay | accent-on trên accent-bright (chữ CTA) | #080200 / #F2C5A3 | 77.4 | ✓ |
+| tho · clay | accent-bright trên panel tối (nhãn dark) | #F8C7A1 / #221710 | 77.1 | ✓ |
+| hoa · plasma | text-accent trên trắng (nhãn đậm) | #714B4D / #FFFFFF | 85.8 | ✓ |
+| hoa · plasma | text-accent trên tint (nhãn đậm) | #714B4D / #FFF5F5 | 81.1 | ✓ |
+| hoa · plasma | accent-bright trên ink (tiêu đề) | #FFE3E4 / #2B1E1E | 91.5 | ✓ |
+| hoa · plasma | accent-on trên accent-bright (chữ CTA) | #281B1C / #FFE3E4 | 90.8 | ✓ |
+| hoa · plasma | accent-bright trên panel tối (nhãn dark) | #FDDDDE / #221710 | 89.4 | ✓ |
+| hoa | text-accent trên trắng (nhãn đậm) | #793609 / #FFFFFF | 90 | ✓ |
+| hoa | text-accent trên tint (nhãn đậm) | #793609 / #FFF1EA | 83.2 | ✓ |
+| hoa | accent-bright trên ink (tiêu đề) | #FFD3BD / #3A1501 | 83 | ✓ |
+| hoa | accent-on trên accent-bright (chữ CTA) | #361402 / #FFD3BD | 82.8 | ✓ |
+| hoa | accent-bright trên panel tối (nhãn dark) | #FECDB4 / #221710 | 81.2 | ✓ |
+| hoa · lava | text-accent trên trắng (nhãn đậm) | #550306 / #FFFFFF | 100.5 | ✓ |
+| hoa · lava | text-accent trên tint (nhãn đậm) | #550306 / #FFEBE9 | 91.1 | ✓ |
+| hoa · lava | accent-bright trên ink (tiêu đề) | #FFBCB4 / #400C0B | 73.4 | ✓ |
+| hoa · lava | accent-on trên accent-bright (chữ CTA) | #0D0000 / #FFBCB4 | 76.6 | ✓ |
+| hoa · lava | accent-bright trên panel tối (nhãn dark) | #FFC1B9 / #221710 | 76.7 | ✓ |
+| thuy · mist | text-accent trên trắng (nhãn đậm) | #116060 / #FFFFFF | 85.1 | ✓ |
+| thuy · mist | text-accent trên tint (nhãn đậm) | #116060 / #E6FDFC | 81.1 | ✓ |
+| thuy · mist | accent-bright trên ink (tiêu đề) | #B1FBF9 / #032727 | 94 | ✓ |
+| thuy · mist | accent-on trên accent-bright (chữ CTA) | #012525 / #B1FBF9 | 92.7 | ✓ |
+| thuy · mist | accent-bright trên panel tối (nhãn dark) | #A6F8F6 / #221710 | 92.7 | ✓ |
+| thuy | text-accent trên trắng (nhãn đậm) | #0D535C / #FFFFFF | 89.5 | ✓ |
+| thuy | text-accent trên tint (nhãn đậm) | #0D535C / #DFFBFF | 84 | ✓ |
+| thuy | accent-bright trên ink (tiêu đề) | #94EFFD / #03272C | 85.8 | ✓ |
+| thuy | accent-on trên accent-bright (chữ CTA) | #012429 / #94EFFD | 85.4 | ✓ |
+| thuy | accent-bright trên panel tối (nhãn dark) | #79EDFF / #221710 | 84.6 | ✓ |
+| thuy · ocean | text-accent trên trắng (nhãn đậm) | #003142 / #FFFFFF | 100.1 | ✓ |
+| thuy · ocean | text-accent trên tint (nhãn đậm) | #003142 / #E5F3FA | 91.5 | ✓ |
+| thuy · ocean | accent-bright trên ink (tiêu đề) | #A9D8ED / #092531 | 76.1 | ✓ |
+| thuy · ocean | accent-on trên accent-bright (chữ CTA) | #001721 / #A9D8ED | 78.1 | ✓ |
+| thuy · ocean | accent-bright trên panel tối (nhãn dark) | #A5D8F0 / #221710 | 77.1 | ✓ |
+| moc · bamboo | text-accent trên trắng (nhãn đậm) | #4A5B02 / #FFFFFF | 86 | ✓ |
+| moc · bamboo | text-accent trên tint (nhãn đậm) | #4A5B02 / #F5FBE8 | 82.1 | ✓ |
+| moc · bamboo | accent-bright trên ink (tiêu đề) | #E2F4BA / #1E250A | 93.4 | ✓ |
+| moc · bamboo | accent-on trên accent-bright (chữ CTA) | #1C2307 / #E2F4BA | 92.3 | ✓ |
+| moc · bamboo | accent-bright trên panel tối (nhãn dark) | #DCF0B1 / #221710 | 91.7 | ✓ |
+| moc | text-accent trên trắng (nhãn đậm) | #24570B / #FFFFFF | 89.2 | ✓ |
+| moc | text-accent trên tint (nhãn đậm) | #24570B / #EAFAE5 | 83.4 | ✓ |
+| moc | accent-bright trên ink (tiêu đề) | #B9F0A6 / #0D2902 | 85.9 | ✓ |
+| moc | accent-on trên accent-bright (chữ CTA) | #0A2700 / #B9F0A6 | 85.4 | ✓ |
+| moc | accent-bright trên panel tối (nhãn dark) | #B2EC9E / #221710 | 84.5 | ✓ |
+| moc · forest | text-accent trên trắng (nhãn đậm) | #04361D / #FFFFFF | 99.7 | ✓ |
+| moc · forest | text-accent trên tint (nhãn đậm) | #04361D / #E6F5EB | 91.5 | ✓ |
+| moc · forest | accent-bright trên ink (tiêu đề) | #ACDDBD / #0B2818 | 76.4 | ✓ |
+| moc · forest | accent-on trên accent-bright (chữ CTA) | #011C0D / #ACDDBD | 78.1 | ✓ |
+| moc · forest | accent-bright trên panel tối (nhãn dark) | #A8DFBB / #221710 | 78.3 | ✓ |
+| kim · titanium | text-accent trên trắng (nhãn đậm) | #3D5670 / #FFFFFF | 86.4 | ✓ |
+| kim · titanium | text-accent trên tint (nhãn đậm) | #3D5670 / #F3F8FE | 81.8 | ✓ |
+| kim · titanium | accent-bright trên ink (tiêu đề) | #DDEDFF / #1A232B | 92.5 | ✓ |
+| kim · titanium | accent-on trên accent-bright (chữ CTA) | #182029 / #DDEDFF | 91.6 | ✓ |
+| kim · titanium | accent-bright trên panel tối (nhãn dark) | #D6E9FD / #221710 | 90.8 | ✓ |
+| kim | text-accent trên trắng (nhãn đậm) | #564B27 / #FFFFFF | 89.6 | ✓ |
+| kim | text-accent trên tint (nhãn đậm) | #564B27 / #F8F4EA | 83.2 | ✓ |
+| kim | accent-bright trên ink (tiêu đề) | #E8DEBD / #262112 | 84.3 | ✓ |
+| kim | accent-on trên accent-bright (chữ CTA) | #241F0F / #E8DEBD | 84 | ✓ |
+| kim | accent-bright trên panel tối (nhãn dark) | #E3D9B8 / #221710 | 82.3 | ✓ |
+| kim · steel | text-accent trên trắng (nhãn đậm) | #1B2E4C / #FFFFFF | 100 | ✓ |
+| kim · steel | text-accent trên tint (nhãn đậm) | #1B2E4C / #EBF1FB | 91.4 | ✓ |
+| kim · steel | accent-bright trên ink (tiêu đề) | #BED0F0 / #182232 | 75 | ✓ |
+| kim · steel | accent-on trên accent-bright (chữ CTA) | #020818 / #BED0F0 | 78 | ✓ |
+| kim · steel | accent-bright trên panel tối (nhãn dark) | #BBD0F4 / #221710 | 76 | ✓ |
 
 **Số cặp không đạt: 0.** Mọi cặp chữ đều đạt Lc ≥ 60.
 
@@ -24,6 +99,81 @@ Pack được generate từ `tokens/element-seeds.json` (thang soft / middle / d
 Các dòng dùng màu `--cs-color-link` đã khai báo cho light hoặc dark. Nền trắng, trang tham chiếu, nền nâng tham chiếu và panel tối tham chiếu là các màu cố định; vai trò nền của element dùng `color-mix()` và không được đo trong những dòng này. Kiểm tra nền đã render, tùy chọn và tương tác có phạm vi riêng.
 | Phạm vi | Cặp màu | chữ / nền | Tỷ lệ | Kết quả |
 |---|---|---|---|---|
+| tho · sand | liên kết trên trắng (chữ thân) | #695300 / #FFFFFF | 7.40:1 | ✓ |
+| tho · sand | liên kết trên trang tham chiếu (chữ thân) | #695300 / #FFFDF8 | 7.28:1 | ✓ |
+| tho · sand | liên kết trên tint (chữ thân) | #695300 / #FEF8E7 | 6.98:1 | ✓ |
+| tho · sand | liên kết trên nền kem nâng tham chiếu (chữ thân) | #695300 / #FBF4E9 | 6.77:1 | ✓ |
+| tho · sand | liên kết trên panel tối tham chiếu (chữ thân) | #F9E5AE / #221710 | 14.06:1 | ✓ |
+| tho | liên kết trên trắng (chữ thân) | #644A05 / #FFFFFF | 8.32:1 | ✓ |
+| tho | liên kết trên trang tham chiếu (chữ thân) | #644A05 / #FFFDF8 | 8.19:1 | ✓ |
+| tho | liên kết trên tint (chữ thân) | #644A05 / #FBF4E9 | 7.62:1 | ✓ |
+| tho | liên kết trên nền kem nâng tham chiếu (chữ thân) | #644A05 / #FBF4E9 | 7.62:1 | ✓ |
+| tho | liên kết trên panel tối tham chiếu (chữ thân) | #FFD57A / #221710 | 12.56:1 | ✓ |
+| tho · clay | liên kết trên trắng (chữ thân) | #462402 / #FFFFFF | 13.87:1 | ✓ |
+| tho · clay | liên kết trên trang tham chiếu (chữ thân) | #462402 / #FFFDF8 | 13.65:1 | ✓ |
+| tho · clay | liên kết trên tint (chữ thân) | #462402 / #FCEEE3 | 12.21:1 | ✓ |
+| tho · clay | liên kết trên nền kem nâng tham chiếu (chữ thân) | #462402 / #FBF4E9 | 12.70:1 | ✓ |
+| tho · clay | liên kết trên panel tối tham chiếu (chữ thân) | #FFD2AF / #221710 | 12.60:1 | ✓ |
+| hoa · plasma | liên kết trên trắng (chữ thân) | #714B4D / #FFFFFF | 7.46:1 | ✓ |
+| hoa · plasma | liên kết trên trang tham chiếu (chữ thân) | #714B4D / #FFFDF8 | 7.34:1 | ✓ |
+| hoa · plasma | liên kết trên tint (chữ thân) | #714B4D / #FFF5F5 | 6.97:1 | ✓ |
+| hoa · plasma | liên kết trên nền kem nâng tham chiếu (chữ thân) | #714B4D / #FBF4E9 | 6.83:1 | ✓ |
+| hoa · plasma | liên kết trên panel tối tham chiếu (chữ thân) | #FDDDDE / #221710 | 13.83:1 | ✓ |
+| hoa | liên kết trên trắng (chữ thân) | #793609 / #FFFFFF | 8.96:1 | ✓ |
+| hoa | liên kết trên trang tham chiếu (chữ thân) | #793609 / #FFFDF8 | 8.81:1 | ✓ |
+| hoa | liên kết trên tint (chữ thân) | #793609 / #FFF1EA | 8.11:1 | ✓ |
+| hoa | liên kết trên nền kem nâng tham chiếu (chữ thân) | #793609 / #FBF4E9 | 8.20:1 | ✓ |
+| hoa | liên kết trên panel tối tham chiếu (chữ thân) | #FFD1BA / #221710 | 12.59:1 | ✓ |
+| hoa · lava | liên kết trên trắng (chữ thân) | #550306 / #FFFFFF | 14.98:1 | ✓ |
+| hoa · lava | liên kết trên trang tham chiếu (chữ thân) | #550306 / #FFFDF8 | 14.74:1 | ✓ |
+| hoa · lava | liên kết trên tint (chữ thân) | #550306 / #FFEBE9 | 13.06:1 | ✓ |
+| hoa · lava | liên kết trên nền kem nâng tham chiếu (chữ thân) | #550306 / #FBF4E9 | 13.71:1 | ✓ |
+| hoa · lava | liên kết trên panel tối tham chiếu (chữ thân) | #FDD0CA / #221710 | 12.56:1 | ✓ |
+| thuy · mist | liên kết trên trắng (chữ thân) | #116060 / #FFFFFF | 7.33:1 | ✓ |
+| thuy · mist | liên kết trên trang tham chiếu (chữ thân) | #116060 / #FFFDF8 | 7.21:1 | ✓ |
+| thuy · mist | liên kết trên tint (chữ thân) | #116060 / #E6FDFC | 6.92:1 | ✓ |
+| thuy · mist | liên kết trên nền kem nâng tham chiếu (chữ thân) | #116060 / #FBF4E9 | 6.71:1 | ✓ |
+| thuy · mist | liên kết trên panel tối tham chiếu (chữ thân) | #A6F8F6 / #221710 | 14.51:1 | ✓ |
+| thuy | liên kết trên trắng (chữ thân) | #0D535C / #FFFFFF | 8.72:1 | ✓ |
+| thuy | liên kết trên trang tham chiếu (chữ thân) | #0D535C / #FFFDF8 | 8.58:1 | ✓ |
+| thuy | liên kết trên tint (chữ thân) | #0D535C / #DFFBFF | 8.05:1 | ✓ |
+| thuy | liên kết trên nền kem nâng tham chiếu (chữ thân) | #0D535C / #FBF4E9 | 7.98:1 | ✓ |
+| thuy | liên kết trên panel tối tham chiếu (chữ thân) | #79EDFF / #221710 | 12.83:1 | ✓ |
+| thuy · ocean | liên kết trên trắng (chữ thân) | #003142 / #FFFFFF | 13.83:1 | ✓ |
+| thuy · ocean | liên kết trên trang tham chiếu (chữ thân) | #003142 / #FFFDF8 | 13.61:1 | ✓ |
+| thuy · ocean | liên kết trên tint (chữ thân) | #003142 / #E5F3FA | 12.21:1 | ✓ |
+| thuy · ocean | liên kết trên nền kem nâng tham chiếu (chữ thân) | #003142 / #FBF4E9 | 12.66:1 | ✓ |
+| thuy · ocean | liên kết trên panel tối tham chiếu (chữ thân) | #AFE2FA / #221710 | 12.59:1 | ✓ |
+| moc · bamboo | liên kết trên trắng (chữ thân) | #4A5B02 / #FFFFFF | 7.53:1 | ✓ |
+| moc · bamboo | liên kết trên trang tham chiếu (chữ thân) | #4A5B02 / #FFFDF8 | 7.41:1 | ✓ |
+| moc · bamboo | liên kết trên tint (chữ thân) | #4A5B02 / #F5FBE8 | 7.12:1 | ✓ |
+| moc · bamboo | liên kết trên nền kem nâng tham chiếu (chữ thân) | #4A5B02 / #FBF4E9 | 6.89:1 | ✓ |
+| moc · bamboo | liên kết trên panel tối tham chiếu (chữ thân) | #DCF0B1 / #221710 | 14.31:1 | ✓ |
+| moc | liên kết trên trắng (chữ thân) | #24570B / #FFFFFF | 8.60:1 | ✓ |
+| moc | liên kết trên trang tham chiếu (chữ thân) | #24570B / #FFFDF8 | 8.46:1 | ✓ |
+| moc | liên kết trên tint (chữ thân) | #24570B / #EAFAE5 | 7.90:1 | ✓ |
+| moc | liên kết trên nền kem nâng tham chiếu (chữ thân) | #24570B / #FBF4E9 | 7.87:1 | ✓ |
+| moc | liên kết trên panel tối tham chiếu (chữ thân) | #B2EC9E / #221710 | 12.84:1 | ✓ |
+| moc · forest | liên kết trên trắng (chữ thân) | #04361D / #FFFFFF | 13.54:1 | ✓ |
+| moc · forest | liên kết trên trang tham chiếu (chữ thân) | #04361D / #FFFDF8 | 13.32:1 | ✓ |
+| moc · forest | liên kết trên tint (chữ thân) | #04361D / #E6F5EB | 12.01:1 | ✓ |
+| moc · forest | liên kết trên nền kem nâng tham chiếu (chữ thân) | #04361D / #FBF4E9 | 12.39:1 | ✓ |
+| moc · forest | liên kết trên panel tối tham chiếu (chữ thân) | #B0E7C3 / #221710 | 12.57:1 | ✓ |
+| kim · titanium | liên kết trên trắng (chữ thân) | #3D5670 / #FFFFFF | 7.60:1 | ✓ |
+| kim · titanium | liên kết trên trang tham chiếu (chữ thân) | #3D5670 / #FFFDF8 | 7.48:1 | ✓ |
+| kim · titanium | liên kết trên tint (chữ thân) | #3D5670 / #F3F8FE | 7.12:1 | ✓ |
+| kim · titanium | liên kết trên nền kem nâng tham chiếu (chữ thân) | #3D5670 / #FBF4E9 | 6.95:1 | ✓ |
+| kim · titanium | liên kết trên panel tối tham chiếu (chữ thân) | #D6E9FD / #221710 | 14.13:1 | ✓ |
+| kim | liên kết trên trắng (chữ thân) | #564B27 / #FFFFFF | 8.64:1 | ✓ |
+| kim | liên kết trên trang tham chiếu (chữ thân) | #564B27 / #FFFDF8 | 8.50:1 | ✓ |
+| kim | liên kết trên tint (chữ thân) | #564B27 / #F8F4EA | 7.86:1 | ✓ |
+| kim | liên kết trên nền kem nâng tham chiếu (chữ thân) | #564B27 / #FBF4E9 | 7.90:1 | ✓ |
+| kim | liên kết trên panel tối tham chiếu (chữ thân) | #E5DBBA / #221710 | 12.66:1 | ✓ |
+| kim · steel | liên kết trên trắng (chữ thân) | #1B2E4C / #FFFFFF | 13.62:1 | ✓ |
+| kim · steel | liên kết trên trang tham chiếu (chữ thân) | #1B2E4C / #FFFDF8 | 13.40:1 | ✓ |
+| kim · steel | liên kết trên tint (chữ thân) | #1B2E4C / #EBF1FB | 12.00:1 | ✓ |
+| kim · steel | liên kết trên nền kem nâng tham chiếu (chữ thân) | #1B2E4C / #FBF4E9 | 12.47:1 | ✓ |
+| kim · steel | liên kết trên panel tối tham chiếu (chữ thân) | #C8DBFD / #221710 | 12.53:1 | ✓ |
 
 **Số cặp liên kết không đạt: 0.**
 
@@ -32,6 +182,36 @@ Các dòng dùng màu `--cs-color-link` đã khai báo cho light hoặc dark. N
 Ghép `--cs-accent-strong` với `--cs-accent-on-strong`: cả pack light và dark phải đạt ngưỡng chữ thân Lc ≥ 75 (mục tiêu của generator là 78) và WCAG ≥ 4.5:1. Nút primary ở chế độ dark dùng màu chữ đi cặp này. Các màu neo thương hiệu và tám vai trò accent còn lại giữ nguyên giá trị.
 | Phạm vi | Chế độ | chữ / nền | Lc | Kết quả |
 |---|---|---|---|---|
+| tho · sand | sáng | #FFFFFF / #856A03 | 80.8 | ✓ |
+| tho · sand | tối | #FFFFFF / #80671A | 82.2 | ✓ |
+| tho | sáng | #FFFFFF / #916D11 | 78.4 | ✓ |
+| tho | tối | #FFFFFF / #6E5205 | 90.1 | ✓ |
+| tho · clay | sáng | #FFFFFF / #5A3004 | 99.5 | ✓ |
+| tho · clay | tối | #FFFFFF / #5C3001 | 99.3 | ✓ |
+| hoa · plasma | sáng | #FFFFFF / #896163 | 81.7 | ✓ |
+| hoa · plasma | tối | #FFFFFF / #836061 | 82.8 | ✓ |
+| hoa | sáng | #FFFFFF / #96440B | 87.5 | ✓ |
+| hoa | tối | #FFFFFF / #883E0D | 90.9 | ✓ |
+| hoa · lava | sáng | #FFFFFF / #760008 | 98.8 | ✓ |
+| hoa · lava | tối | #FFFFFF / #6D1D19 | 99.2 | ✓ |
+| thuy · mist | sáng | #FFFFFF / #037D7D | 79.2 | ✓ |
+| thuy · mist | tối | #FFFFFF / #077A79 | 80.4 | ✓ |
+| thuy | sáng | #FFFFFF / #166B76 | 85.6 | ✓ |
+| thuy | tối | #FFFFFF / #04626D | 89.0 | ✓ |
+| thuy · ocean | sáng | #FFFFFF / #034257 | 98.8 | ✓ |
+| thuy · ocean | tối | #FFFFFF / #00445A | 98.2 | ✓ |
+| moc · bamboo | sáng | #FFFFFF / #62780E | 79.7 | ✓ |
+| moc · bamboo | tối | #FFFFFF / #607420 | 81.2 | ✓ |
+| moc | sáng | #FFFFFF / #2B7100 | 85.1 | ✓ |
+| moc | tối | #FFFFFF / #286704 | 88.6 | ✓ |
+| moc · forest | sáng | #FFFFFF / #0A4829 | 98.3 | ✓ |
+| moc · forest | tối | #FFFFFF / #074A29 | 97.8 | ✓ |
+| kim · titanium | sáng | #FFFFFF / #56708B | 80.8 | ✓ |
+| kim · titanium | tối | #FFFFFF / #576D83 | 82.0 | ✓ |
+| kim | sáng | #FFFFFF / #6A5E3A | 86.9 | ✓ |
+| kim | tối | #FFFFFF / #615633 | 90.1 | ✓ |
+| kim · steel | sáng | #FFFFFF / #293C5C | 99.4 | ✓ |
+| kim · steel | tối | #FFFFFF / #2B3D5D | 99.0 | ✓ |
 
 **Số cặp chữ thân trên nền strong không đạt: 0.** Đây là phép tính tĩnh cho cặp màu đã khai báo; kiểm tra hồi quy browser và kiểm tra template/raster thực tế có phạm vi riêng. Bảng này không chứng minh tương phản khi có độ trong suốt, gradient, chuyển tiếp hay lớp phủ tùy ý.
 
@@ -40,4 +220,19 @@ Ghép `--cs-accent-strong` với `--cs-accent-on-strong`: cả pack light và da
 Các ngưỡng đề xuất trong `_audit/apca-dark-preview.html`: bright ≥ 75 · accent ≥ 60 · on-strong/strong ≥ 75 · ink-on-tint ≥ 75. Accent và bright không phải vai trò chữ thân thông thường dùng được trên mọi nền.
 | Pack | bright | accent | on | ink |
 |---|---|---|---|---|
+| tho · sand | 90.5 | 76.1 | 82.2 | 87.4 |
+| tho | 81.9 | 64.7 | 90.1 | 81 |
+| tho · clay | 77.1 | 60.6 | 99.3 | 79.4 |
+| hoa · plasma | 89.4 | 75.1 | 82.8 | 86.4 |
+| hoa | 81.2 | 63.2 | 90.9 | 80.3 |
+| hoa · lava | 76.7 | 60.9 | 99.2 | 79.2 |
+| thuy · mist | 92.7 | 78.7 | 80.4 | 89.3 |
+| thuy | 84.6 | 67.7 | 89 | 83.5 |
+| thuy · ocean | 77.1 | 60.9 | 98.2 | 79.2 |
+| moc · bamboo | 91.7 | 77.9 | 81.2 | 88.4 |
+| moc | 84.5 | 67.9 | 88.6 | 83.4 |
+| moc · forest | 78.3 | 61.7 | 97.8 | 78.6 |
+| kim · titanium | 90.8 | 76.5 | 82 | 87.8 |
+| kim | 82.3 | 65.2 | 90.1 | 81.4 |
+| kim · steel | 76 | 61.5 | 99 | 78.3 |
 

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.0.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.2.0<!-- /cs-source-version -->**.
 
 ## Decision log (owner duyệt)
 

package/docs/vi/decisions/component-specification-evidence.md

@@ -4,7 +4,7 @@
 
 Thẻ JSX, thuộc tính, phép trải, phím literal và biểu thức tham chiếu tham số giữ vị trí chính xác trong nguồn. Phép trải ghi đích/thứ tự ghi đè chưa xác minh; biểu thức là ứng viên slot, không phải slot được chấp nhận. Class hook giữ scope tệp hiện có. Định nghĩa prop chuẩn được tham chiếu thay vì sao chép thành hệ kiểu thứ hai. Khai báo native tồn tại vẫn không chứng minh có forwarding.
 
-`scripts/component-semantics-source.json` quản lý 614 nhóm ngữ nghĩa đã rà soát có giới hạn, gồm cấu trúc và ví dụ thuộc quyền sở hữu cho đủ 120 component, cùng 122 yêu cầu hành vi trên 81 component sau lượt sửa quy tắc mở rộng. Yêu cầu ánh xạ tới khẳng định có tên đã rà soát chính xác. 106 nhóm chưa xác minh và mọi prop do tác giả khai báo vẫn được liệt kê để đặc tả tiếp. Việc có constructor trong ca có tên chỉ là tham chiếu fixture, không bao giờ đủ chứng minh bao phủ. Đặc tả hành vi và trợ năng đầy đủ vẫn là công việc kỹ thuật còn mở.
+`scripts/component-semantics-source.json` quản lý một dữ kiện đã rà soát có giới hạn trong từng nhóm trong sáu nhóm ngữ nghĩa cho đủ 120 component, cùng 161 yêu cầu hành vi trên đủ 120 component. 39 export trước đây không có yêu cầu, mỗi export nay ánh xạ một ca cổng trợ năng có tên. Yêu cầu ánh xạ tới khẳng định có tên chính xác. Mọi prop do tác giả khai báo vẫn được liệt kê vì một dữ kiện nhóm không phải hợp đồng theo từng prop. Việc có constructor trong ca có tên chỉ là tham chiếu fixture, không bao giờ đủ chứng minh bao phủ. `completeBehaviorSpecifications` đếm export đã rà soát cấu trúc, slot và ví dụ và có khẳng định trên board hành vi. `completeAccessibilitySpecifications` đếm export đã rà soát vai trò, trạng thái và bàn phím và có khẳng định trên cổng trợ năng. Hai số này không phải ma trận prop đầy đủ hay nghiệm thu trợ năng thủ công.
 
 Ghi thực thi thật bằng `node scripts/capture-component-behavior-evidence.mjs .`, rồi `node scripts/verify-component-behavior-evidence.mjs .`. Capture chạy mọi ca hành vi và board trợ năng có tên trong Chromium, Firefox, WebKit, cộng hồi quy field-association ba engine hiện có. Verifier yêu cầu khớp chính xác nguồn, bundle, CSS, kiểm thử, vị trí assertion, tập ca và tập engine. Nó từ chối producer cũ, ca lỗi/thiếu và engine trùng. Đầu ra đạt chỉ xác minh các yêu cầu được ánh xạ trên đúng producer đã ghi. Không thay thế gate board đầy đủ, trợ năng thủ công hay nghiệm thu release.
 

package/docs/vi/decisions/token-alias-compatibility.md

@@ -1,6 +1,6 @@
 # Tương thích tên token theo cách bổ sung
 
-Giữ nguyên 22 tên CSS camelCase đã công bố và giá trị hiện có. Tên kebab-case mới là bí danh đọc một chiều, ví dụ `--cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX)`. Các phạm vi mật độ khai báo lại bí danh cạnh giá trị cũ để compact, comfortable và phạm vi lồng nhau nhất quán. Nếu ứng dụng ghi đè tên cũ trên phần tử con tùy ý không có thuộc tính phạm vi, phải khai báo lại bí danh tại đó khi sử dụng bí danh. Cơ chế kế thừa biến CSS không tạo liên kết hai chiều trực tiếp. Tên cũ vẫn là đầu vào ghi đè trong đợt tương thích này.
+22 tên kebab-case sở hữu giá trị cụ thể, ví dụ `--cs-component-button-md-padding-x: 20px`. Tên camelCase đã công bố đọc tên đó, ví dụ `--cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x)`. Ghi đè tên kebab cập nhật cả hai cách viết. Ghi đè riêng tên camelCase chỉ che cách viết đó và không đổi giá trị kebab. Phạm vi mật độ đặt literal kebab và trỏ tên camelCase vào đó, nên compact, comfortable và phạm vi lồng nhau vẫn nhất quán. Định danh native không đổi: hằng camelCase giữ tên cũ, hằng kebab giữ hậu tố `Alias` với cùng số.
 
 `tokens/base-inventory.json` khai báo từng bí danh và kiểu. Extension `com.cyberskill.nativeAliasOf` cùng `nativeName` phân biệt hằng native mới như `componentButtonMdPaddingXAlias` với tên hiện có. Hai tên có cùng giá trị số đã phân giải; mọi dòng hằng Swift, Kotlin và Dart hiện có giữ nguyên. Tên chưa được duyệt hoặc trùng nhau làm bộ sinh thất bại trước khi ghi đầu ra. DTCG dùng tham chiếu nội bộ tài liệu theo chuẩn và giữ ánh xạ tương thích trong metadata có namespace.
 

package/docs/vi/design-styles.md

@@ -44,7 +44,7 @@ Không invent trục sản phẩm thứ năm, và không thêm Style pack thứ
 
 ## Công tắc theme nội bộ
 
-Bộ phân giải theme chuẩn được `scripts/generate-element-packs.mjs` sinh vào `tokens/elements.css`. Hai custom property riêng tư `--_cs-light` và `--_cs-dark` chọn một nhánh trong khai báo như `color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre));`. Công tắc có giá trị `initial` làm `var()` dùng fallback; công tắc rỗng không đóng góp giá trị. Theme sáng đặt công tắc sáng thành `initial` và công tắc tối rỗng; theme tối đảo ngược. `data-theme="system"` khai báo tường minh theo `prefers-color-scheme`.
+Bộ phân giải theme chuẩn được `scripts/generate-element-packs.mjs` sinh vào `tokens/elements.css`. Hai custom property riêng tư `--_cs-light` và `--_cs-dark` chọn một nhánh trong khai báo như `color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre));`. Hai phép thế được nối liền, không có khoảng trắng trong stylesheet: khoảng trắng còn lại khi kênh không dùng là rỗng và khiến `background` cùng `border-color` giữ màu đã dùng trước đó. Công tắc có giá trị `initial` làm `var()` dùng fallback; công tắc rỗng không đóng góp giá trị. Theme sáng đặt công tắc sáng thành `initial` và công tắc tối rỗng; theme tối đảo ngược. `data-theme="system"` khai báo tường minh theo `prefers-color-scheme`.
 
 Consumer chọn `data-theme="light|dark|system"` và dùng token công khai `--cs-*`. Không đặt trực tiếp công tắc riêng tư, sao chép khối phân giải được sinh, hoặc đăng ký các công tắc này bằng `@property`: hành vi giá trị rỗng/không hợp lệ là một phần của bộ phân giải nội bộ. Binding được lặp tại ranh giới scope để thay đổi element và theme lồng nhau tính lại giá trị, thay vì kế thừa giá trị đã chọn của cha. Hậu duệ không đánh dấu kế thừa scope bao quanh.
 

package/docs/vi/entrypoints/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "2.0.0"
+version: "2.2.0"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:
@@ -66,14 +66,14 @@ Gói màu nhấn mặc định = Thổ (nguyên tố của studio). Toàn bộ 1
 | Token | Giá trị |
 |---|---|
 | `--cs-accent` | `#F4BA17` |
-| `--cs-accent-strong` | `#916D10` |
+| `--cs-accent-strong` | `#916D11` |
 | `--cs-accent-bright` | `#F4BA17` |
 | `--cs-accent-on` | `#45210E` |
 | `--cs-accent-tint` | `#FBF4E9` |
 | `--cs-accent-ink` | `#45210E` |
 | `--cs-accent-glow` | `rgba(244, 186, 23, 0.48)` |
 | `--cs-accent-grad-a` | `#F4BA17` |
-| `--cs-accent-grad-b` | `#F3B958` |
+| `--cs-accent-grad-b` | `#C4B78F` |
 | `--cs-accent-on-strong` | `#FFFFFF` |
 
 ### Bảng màu tài liệu
@@ -101,9 +101,9 @@ Các họ chữ được tự lưu trữ (Be Vietnam Pro · Space Grotesk · Jet
 | `--cs-font-weight-semibold` | `600` |
 | `--cs-font-weight-bold` | `700` |
 | `--cs-font-weight-extrabold` | `800` |
-| `--cs-font-lineHeight-body` | `1.5` |
-| `--cs-font-lineHeight-heading` | `1.35` |
-| `--cs-font-lineHeight-tight` | `1.15` |
+| `--cs-font-lineHeight-body` | `var(--cs-font-line-height-body)` |
+| `--cs-font-lineHeight-heading` | `var(--cs-font-line-height-heading)` |
+| `--cs-font-lineHeight-tight` | `var(--cs-font-line-height-tight)` |
 | `--cs-font-size-2xs` | `0.6875rem` |
 | `--cs-font-size-xs` | `0.75rem` |
 | `--cs-font-size-sm` | `0.875rem` |
@@ -115,9 +115,9 @@ Các họ chữ được tự lưu trữ (Be Vietnam Pro · Space Grotesk · Jet
 | `--cs-font-size-3xl` | `2.25rem` |
 | `--cs-font-size-4xl` | `3rem` |
 | `--cs-font-size-5xl` | `3.75rem` |
-| `--cs-font-line-height-body` | `var(--cs-font-lineHeight-body)` |
-| `--cs-font-line-height-heading` | `var(--cs-font-lineHeight-heading)` |
-| `--cs-font-line-height-tight` | `var(--cs-font-lineHeight-tight)` |
+| `--cs-font-line-height-body` | `1.5` |
+| `--cs-font-line-height-heading` | `1.35` |
+| `--cs-font-line-height-tight` | `1.15` |
 
 ### Vai trò chữ và khoảng cách ký tự
 
@@ -201,26 +201,26 @@ Các giá trị ghi đè theo phạm vi (tách biệt với các hàng token cơ
 | `data-cs-density="compact"` | `--cs-density-space-6` | `18px` |
 | `data-cs-density="compact"` | `--cs-density-control-gap` | `6px` |
 | `data-cs-density="compact"` | `--cs-component-button-gap` | `6px` |
-| `data-cs-density="compact"` | `--cs-component-button-xs-paddingY` | `3px` |
-| `data-cs-density="compact"` | `--cs-component-button-xs-padding-y` | `var(--cs-component-button-xs-paddingY)` |
-| `data-cs-density="compact"` | `--cs-component-button-xs-paddingX` | `8px` |
-| `data-cs-density="compact"` | `--cs-component-button-xs-padding-x` | `var(--cs-component-button-xs-paddingX)` |
-| `data-cs-density="compact"` | `--cs-component-button-sm-paddingY` | `6px` |
-| `data-cs-density="compact"` | `--cs-component-button-sm-padding-y` | `var(--cs-component-button-sm-paddingY)` |
-| `data-cs-density="compact"` | `--cs-component-button-sm-paddingX` | `12px` |
-| `data-cs-density="compact"` | `--cs-component-button-sm-padding-x` | `var(--cs-component-button-sm-paddingX)` |
-| `data-cs-density="compact"` | `--cs-component-button-md-paddingY` | `10px` |
-| `data-cs-density="compact"` | `--cs-component-button-md-padding-y` | `var(--cs-component-button-md-paddingY)` |
-| `data-cs-density="compact"` | `--cs-component-button-md-paddingX` | `16px` |
-| `data-cs-density="compact"` | `--cs-component-button-md-padding-x` | `var(--cs-component-button-md-paddingX)` |
-| `data-cs-density="compact"` | `--cs-component-button-lg-paddingY` | `12px` |
-| `data-cs-density="compact"` | `--cs-component-button-lg-padding-y` | `var(--cs-component-button-lg-paddingY)` |
-| `data-cs-density="compact"` | `--cs-component-button-lg-paddingX` | `22px` |
-| `data-cs-density="compact"` | `--cs-component-button-lg-padding-x` | `var(--cs-component-button-lg-paddingX)` |
-| `data-cs-density="compact"` | `--cs-component-textfield-paddingY` | `8px` |
-| `data-cs-density="compact"` | `--cs-component-textfield-padding-y` | `var(--cs-component-textfield-paddingY)` |
-| `data-cs-density="compact"` | `--cs-component-textfield-paddingX` | `10px` |
-| `data-cs-density="compact"` | `--cs-component-textfield-padding-x` | `var(--cs-component-textfield-paddingX)` |
+| `data-cs-density="compact"` | `--cs-component-button-xs-paddingY` | `var(--cs-component-button-xs-padding-y)` |
+| `data-cs-density="compact"` | `--cs-component-button-xs-padding-y` | `3px` |
+| `data-cs-density="compact"` | `--cs-component-button-xs-paddingX` | `var(--cs-component-button-xs-padding-x)` |
+| `data-cs-density="compact"` | `--cs-component-button-xs-padding-x` | `8px` |
+| `data-cs-density="compact"` | `--cs-component-button-sm-paddingY` | `var(--cs-component-button-sm-padding-y)` |
+| `data-cs-density="compact"` | `--cs-component-button-sm-padding-y` | `6px` |
+| `data-cs-density="compact"` | `--cs-component-button-sm-paddingX` | `var(--cs-component-button-sm-padding-x)` |
+| `data-cs-density="compact"` | `--cs-component-button-sm-padding-x` | `12px` |
+| `data-cs-density="compact"` | `--cs-component-button-md-paddingY` | `var(--cs-component-button-md-padding-y)` |
+| `data-cs-density="compact"` | `--cs-component-button-md-padding-y` | `10px` |
+| `data-cs-density="compact"` | `--cs-component-button-md-paddingX` | `var(--cs-component-button-md-padding-x)` |
+| `data-cs-density="compact"` | `--cs-component-button-md-padding-x` | `16px` |
+| `data-cs-density="compact"` | `--cs-component-button-lg-paddingY` | `var(--cs-component-button-lg-padding-y)` |
+| `data-cs-density="compact"` | `--cs-component-button-lg-padding-y` | `12px` |
+| `data-cs-density="compact"` | `--cs-component-button-lg-paddingX` | `var(--cs-component-button-lg-padding-x)` |
+| `data-cs-density="compact"` | `--cs-component-button-lg-padding-x` | `22px` |
+| `data-cs-density="compact"` | `--cs-component-textfield-paddingY` | `var(--cs-component-textfield-padding-y)` |
+| `data-cs-density="compact"` | `--cs-component-textfield-padding-y` | `8px` |
+| `data-cs-density="compact"` | `--cs-component-textfield-paddingX` | `var(--cs-component-textfield-padding-x)` |
+| `data-cs-density="compact"` | `--cs-component-textfield-padding-x` | `10px` |
 | `data-cs-density="comfortable"` | `--cs-density-space-1` | `var(--cs-space-1)` |
 | `data-cs-density="comfortable"` | `--cs-density-space-2` | `var(--cs-space-2)` |
 | `data-cs-density="comfortable"` | `--cs-density-space-3` | `var(--cs-space-3)` |
@@ -229,26 +229,26 @@ Các giá trị ghi đè theo phạm vi (tách biệt với các hàng token cơ
 | `data-cs-density="comfortable"` | `--cs-density-space-6` | `var(--cs-space-6)` |
 | `data-cs-density="comfortable"` | `--cs-density-control-gap` | `var(--cs-component-button-gap)` |
 | `data-cs-density="comfortable"` | `--cs-component-button-gap` | `8px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-xs-paddingY` | `4px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-xs-padding-y` | `var(--cs-component-button-xs-paddingY)` |
-| `data-cs-density="comfortable"` | `--cs-component-button-xs-paddingX` | `10px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-xs-padding-x` | `var(--cs-component-button-xs-paddingX)` |
-| `data-cs-density="comfortable"` | `--cs-component-button-sm-paddingY` | `8px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-sm-padding-y` | `var(--cs-component-button-sm-paddingY)` |
-| `data-cs-density="comfortable"` | `--cs-component-button-sm-paddingX` | `14px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-sm-padding-x` | `var(--cs-component-button-sm-paddingX)` |
-| `data-cs-density="comfortable"` | `--cs-component-button-md-paddingY` | `12px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-md-padding-y` | `var(--cs-component-button-md-paddingY)` |
-| `data-cs-density="comfortable"` | `--cs-component-button-md-paddingX` | `20px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-md-padding-x` | `var(--cs-component-button-md-paddingX)` |
-| `data-cs-density="comfortable"` | `--cs-component-button-lg-paddingY` | `16px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-lg-padding-y` | `var(--cs-component-button-lg-paddingY)` |
-| `data-cs-density="comfortable"` | `--cs-component-button-lg-paddingX` | `28px` |
-| `data-cs-density="comfortable"` | `--cs-component-button-lg-padding-x` | `var(--cs-component-button-lg-paddingX)` |
-| `data-cs-density="comfortable"` | `--cs-component-textfield-paddingY` | `10px` |
-| `data-cs-density="comfortable"` | `--cs-component-textfield-padding-y` | `var(--cs-component-textfield-paddingY)` |
-| `data-cs-density="comfortable"` | `--cs-component-textfield-paddingX` | `12px` |
-| `data-cs-density="comfortable"` | `--cs-component-textfield-padding-x` | `var(--cs-component-textfield-paddingX)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-xs-padding-y` | `4px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-xs-paddingY` | `var(--cs-component-button-xs-padding-y)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-xs-padding-x` | `10px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-xs-paddingX` | `var(--cs-component-button-xs-padding-x)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-sm-padding-y` | `8px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-sm-paddingY` | `var(--cs-component-button-sm-padding-y)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-sm-padding-x` | `14px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-sm-paddingX` | `var(--cs-component-button-sm-padding-x)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-md-padding-y` | `12px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-md-paddingY` | `var(--cs-component-button-md-padding-y)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-md-padding-x` | `20px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-md-paddingX` | `var(--cs-component-button-md-padding-x)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-lg-padding-y` | `16px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-lg-paddingY` | `var(--cs-component-button-lg-padding-y)` |
+| `data-cs-density="comfortable"` | `--cs-component-button-lg-padding-x` | `28px` |
+| `data-cs-density="comfortable"` | `--cs-component-button-lg-paddingX` | `var(--cs-component-button-lg-padding-x)` |
+| `data-cs-density="comfortable"` | `--cs-component-textfield-padding-y` | `10px` |
+| `data-cs-density="comfortable"` | `--cs-component-textfield-paddingY` | `var(--cs-component-textfield-padding-y)` |
+| `data-cs-density="comfortable"` | `--cs-component-textfield-padding-x` | `12px` |
+| `data-cs-density="comfortable"` | `--cs-component-textfield-paddingX` | `var(--cs-component-textfield-padding-x)` |
 
 ### Bố cục và biểu tượng
 
@@ -331,46 +331,46 @@ Quyết định thiết kế ở cấp thành phần (button · textfield). Giá
 | `--cs-component-button-primary-fg` | `#FFFFFF` | `#1a1108` |
 | `--cs-component-button-gap` | `8px` | — |
 | `--cs-component-button-radius` | `8px` | — |
-| `--cs-component-button-xs-paddingY` | `4px` | — |
-| `--cs-component-button-xs-paddingX` | `10px` | — |
-| `--cs-component-button-xs-minHeight` | `28px` | — |
-| `--cs-component-button-xs-minWidth` | `28px` | — |
-| `--cs-component-button-xs-minHeight-coarse` | `44px` | — |
-| `--cs-component-button-sm-paddingY` | `8px` | — |
-| `--cs-component-button-sm-paddingX` | `14px` | — |
-| `--cs-component-button-sm-minHeight` | `36px` | — |
-| `--cs-component-button-sm-minHeight-coarse` | `44px` | — |
-| `--cs-component-button-md-paddingY` | `12px` | — |
-| `--cs-component-button-md-paddingX` | `20px` | — |
-| `--cs-component-button-md-minHeight` | `44px` | — |
-| `--cs-component-button-md-minHeight-coarse` | `44px` | — |
-| `--cs-component-button-lg-paddingY` | `16px` | — |
-| `--cs-component-button-lg-paddingX` | `28px` | — |
-| `--cs-component-button-lg-minHeight` | `52px` | — |
+| `--cs-component-button-xs-paddingY` | `var(--cs-component-button-xs-padding-y)` | — |
+| `--cs-component-button-xs-paddingX` | `var(--cs-component-button-xs-padding-x)` | — |
+| `--cs-component-button-xs-minHeight` | `var(--cs-component-button-xs-min-height)` | — |
+| `--cs-component-button-xs-minWidth` | `var(--cs-component-button-xs-min-width)` | — |
+| `--cs-component-button-xs-minHeight-coarse` | `var(--cs-component-button-xs-min-height-coarse)` | — |
+| `--cs-component-button-sm-paddingY` | `var(--cs-component-button-sm-padding-y)` | — |
+| `--cs-component-button-sm-paddingX` | `var(--cs-component-button-sm-padding-x)` | — |
+| `--cs-component-button-sm-minHeight` | `var(--cs-component-button-sm-min-height)` | — |
+| `--cs-component-button-sm-minHeight-coarse` | `var(--cs-component-button-sm-min-height-coarse)` | — |
+| `--cs-component-button-md-paddingY` | `var(--cs-component-button-md-padding-y)` | — |
+| `--cs-component-button-md-paddingX` | `var(--cs-component-button-md-padding-x)` | — |
+| `--cs-component-button-md-minHeight` | `var(--cs-component-button-md-min-height)` | — |
+| `--cs-component-button-md-minHeight-coarse` | `var(--cs-component-button-md-min-height-coarse)` | — |
+| `--cs-component-button-lg-paddingY` | `var(--cs-component-button-lg-padding-y)` | — |
+| `--cs-component-button-lg-paddingX` | `var(--cs-component-button-lg-padding-x)` | — |
+| `--cs-component-button-lg-minHeight` | `var(--cs-component-button-lg-min-height)` | — |
 | `--cs-component-textfield-border-default` | `#BFA58F` | `#5a4636` |
-| `--cs-component-textfield-paddingY` | `10px` | — |
-| `--cs-component-textfield-paddingX` | `12px` | — |
-| `--cs-component-textfield-minHeight` | `44px` | — |
+| `--cs-component-textfield-paddingY` | `var(--cs-component-textfield-padding-y)` | — |
+| `--cs-component-textfield-paddingX` | `var(--cs-component-textfield-padding-x)` | — |
+| `--cs-component-textfield-minHeight` | `var(--cs-component-textfield-min-height)` | — |
 | `--cs-focus-ring` | `3px` | — |
-| `--cs-component-button-xs-padding-y` | `var(--cs-component-button-xs-paddingY)` | — |
-| `--cs-component-button-xs-padding-x` | `var(--cs-component-button-xs-paddingX)` | — |
-| `--cs-component-button-xs-min-height` | `var(--cs-component-button-xs-minHeight)` | — |
-| `--cs-component-button-xs-min-width` | `var(--cs-component-button-xs-minWidth)` | — |
-| `--cs-component-button-xs-min-height-coarse` | `var(--cs-component-button-xs-minHeight-coarse)` | — |
-| `--cs-component-button-sm-padding-y` | `var(--cs-component-button-sm-paddingY)` | — |
-| `--cs-component-button-sm-padding-x` | `var(--cs-component-button-sm-paddingX)` | — |
-| `--cs-component-button-sm-min-height` | `var(--cs-component-button-sm-minHeight)` | — |
-| `--cs-component-button-sm-min-height-coarse` | `var(--cs-component-button-sm-minHeight-coarse)` | — |
-| `--cs-component-button-md-padding-y` | `var(--cs-component-button-md-paddingY)` | — |
-| `--cs-component-button-md-padding-x` | `var(--cs-component-button-md-paddingX)` | — |
-| `--cs-component-button-md-min-height` | `var(--cs-component-button-md-minHeight)` | — |
-| `--cs-component-button-md-min-height-coarse` | `var(--cs-component-button-md-minHeight-coarse)` | — |
-| `--cs-component-button-lg-padding-y` | `var(--cs-component-button-lg-paddingY)` | — |
-| `--cs-component-button-lg-padding-x` | `var(--cs-component-button-lg-paddingX)` | — |
-| `--cs-component-button-lg-min-height` | `var(--cs-component-button-lg-minHeight)` | — |
-| `--cs-component-textfield-padding-y` | `var(--cs-component-textfield-paddingY)` | — |
-| `--cs-component-textfield-padding-x` | `var(--cs-component-textfield-paddingX)` | — |
-| `--cs-component-textfield-min-height` | `var(--cs-component-textfield-minHeight)` | — |
+| `--cs-component-button-xs-padding-y` | `4px` | — |
+| `--cs-component-button-xs-padding-x` | `10px` | — |
+| `--cs-component-button-xs-min-height` | `28px` | — |
+| `--cs-component-button-xs-min-width` | `28px` | — |
+| `--cs-component-button-xs-min-height-coarse` | `44px` | — |
+| `--cs-component-button-sm-padding-y` | `8px` | — |
+| `--cs-component-button-sm-padding-x` | `14px` | — |
+| `--cs-component-button-sm-min-height` | `36px` | — |
+| `--cs-component-button-sm-min-height-coarse` | `44px` | — |
+| `--cs-component-button-md-padding-y` | `12px` | — |
+| `--cs-component-button-md-padding-x` | `20px` | — |
+| `--cs-component-button-md-min-height` | `44px` | — |
+| `--cs-component-button-md-min-height-coarse` | `44px` | — |
+| `--cs-component-button-lg-padding-y` | `16px` | — |
+| `--cs-component-button-lg-padding-x` | `28px` | — |
+| `--cs-component-button-lg-min-height` | `52px` | — |
+| `--cs-component-textfield-padding-y` | `10px` | — |
+| `--cs-component-textfield-padding-x` | `12px` | — |
+| `--cs-component-textfield-min-height` | `44px` | — |
 
 ## Danh mục thành phần
 

package/docs/vi/entrypoints/README.md

@@ -6,7 +6,7 @@
 
 ## 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.0.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`). Đường dẫn cũ `/dashboard`, `/dashboard.html` và `/playground/*` chuyển hướng đến `/`. Hệ thống ấm áp, ưu tiên tiếng Việt, đáp ứng môi trường doanh nghiệp; 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).
+Đâ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.2.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`). Đường dẫn cũ `/dashboard`, `/dashboard.html` và `/playground/*` chuyển hướng đến `/`. Hệ thống ấm áp, ưu tiên tiếng Việt, đáp ứng môi trường doanh nghiệp; 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).
 
 **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.
@@ -15,7 +15,7 @@
 
 - **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@1.7.2`** (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.0.0<!-- /cs-source-version -->**; không có CHANGELOG).
+- **Người triển khai** — gói npm ổn định đã công bố **`@cyberskill/design@1.7.2`** (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.2.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`.
 
@@ -174,7 +174,7 @@ Tài sản sao chép nằm trong `assets/`: `logo-mark.svg` / `logo-mark.png` (b
 
 Đ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, nhóm 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ỉ 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.0.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.2.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 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 để phía dùng có bộ công cụ hoàn chỉnh: `Icon` (bộ icon nét nội bộ thực của trang marketing), các primitive Forms / Feedback / Data / Navigation / Overlays chuẩn (tìm kiếm, bước, slider, tải tệp, danh sách, danh sách mô tả, dòng thời gian, accordion, kbd, khối mã, sidebar, steps, command palette, popover, drawer và hơn nữa), phần AI-native thêm vào (`PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`) chính thức hóa luồng điều ước Lumi, và linh vật `LumiAvatar`. Không phần nào tạo ngôn ngữ thị giác mới — tất cả dùng lại màu neo, bề mặt, chữ và chuyển động đã định nghĩa.
 

package/docs/vi/manual-at-matrix.md

@@ -15,3 +15,5 @@ Kiểm tra tính toàn vẹn từ chối hàng thiếu/trùng, bản dịch tr
 Reviewer ghi commit source chính xác, người kiểm tra, ngày, phiên bản OS, browser và công nghệ hỗ trợ, ngôn ngữ/theme/state, chuỗi thao tác, hành vi speech/focus quan sát được và tham chiếu bằng chứng. Chỉ dùng `passed` sau lượt chạy thủ công đó, `failed` khi quan sát lỗi, `blocked` khi thiếu môi trường hoặc scope chưa rõ. Giữ quan sát và bằng chứng lỗi; lượt kiểm lại là attestation mới. Trường trống vẫn pending.
 
 Chạy `node _audit/ci/test-manual-at-matrix.mjs` để kiểm tra hình dạng record và từ chối hàng hoàn tất thiếu bằng chứng. Đây là kiểm tra tính toàn vẹn, không phải test screen reader hay chấp nhận AT. `_audit/a11y-gate.html` và `_audit/at-kit-probe.html` vẫn là proxy lập trình có verdict riêng.
+
+Xuất bản chạy `node scripts/require-manual-at-publication.mjs`. Bản phát hành bị từ chối khi còn hàng AT-01–AT-16 chưa `passed` kèm bằng chứng. Hàng pending, failed và blocked không được xuất bản. Kiểm tra này không tạo ra quan sát thủ công.