@cyberskill/design 2.0.0 → 2.2.0

package/docs/ci-cd.md

@@ -18,7 +18,7 @@
 5. **`docs-consistency-blocker`** — `docs-consistency` + `bilingual-parity` merge blockers.
 6. **`whole-set-audits`** — owner decision B: every push/PR, plus nightly `0 3 * * *` and `workflow_dispatch` (responsive + language + theme overflow, ~15–20 min).
 7. **`figma-variables-push`** — on `main` push + manual. **Empty `FIGMA_TOKEN` / `FIGMA_FILE_KEY` soft-skip** (exit 0 + report). Owner decision A keeps this integration optional. With credentials, only the Variables access and API-unavailability responses documented in `docs/figma.md` may soft-skip. File-preflight scope errors, ordinary write-permission failures and invalid local token data remain hard failures. Soft-skip does not establish live Variables sync.
-8. **`pixel-diff`** — Playwright Chromium screenshot comparison (`_audit/ci/pixel-diff.mjs`) against the 15 curated baselines in `_audit/baselines/*.png`; uploads `pixel-baselines-linux` and `_audit/ci/pixel-diff-report.json`.
+8. **`pixel-diff`** — Playwright Chromium screenshot comparison (`_audit/ci/pixel-diff.mjs`) against the 16 curated baselines in `_audit/baselines/*.png`; uploads `pixel-baselines-linux` and `_audit/ci/pixel-diff-report.json`.
 9. **`regenerate-tokens`** (pull requests) + **`regenerate-tokens-push`** (push to `main` / schedule / manual) — path filter covers element seeds/packs (`element-seeds.json`, `elements.css`, JSON/JS/DTCG mirrors, `generate-element-packs.mjs`) plus natives / `VERSION`. Regeneration runs `npm run tokens:generate`, including the complete token exports, native copies and dependent outputs/catalog. On a **pull request** the job runs with `contents: read`, never pushes, and **exits 1** on drift: run this pipeline locally and prepare the reviewed diff (PR-required freshness). Only the push/schedule/manual twin holds `contents: write` and may auto-commit with `PUSH_TOKEN` (or `github.token`). Auto-commits **do not** use `[skip ci]` — the pushed tip re-enters the gate board (FIND-021 / TASK-IMP-008); a deterministic second pass is a no-op.
 10. **`npm-hello-smoke`** — registry consumer proof for `@cyberskill/design@$VERSION` (**fail-closed**, FIND-087): `examples/npm-hello` → registry `npm install` + `npm run smoke`. If the exact VERSION is **not** on the registry, the job **fails** (no soft-skip pack proof on `cyberskill-official/design`). Forks may opt into local-pack proof only by setting repo variable **`NPM_HELLO_ALLOW_LOCAL_PACK=true`**. Path-filtered on push/PR when `examples/npm-hello/**`, package publish surface, or this workflow changes; always on schedule / `workflow_dispatch`.
 11. **`notify-schedule-failure`** — emits an error annotation and exits 1 when a scheduled nightly run fails; it does not create or update an issue.

package/docs/component-api.md

@@ -18,7 +18,7 @@ The public contract for a selected export is its adjacent `.d.ts`, `.jsx` and `.
 
 For components that declare `value`, `defaultValue` and `onChange`, `value` is controlled state, `defaultValue` seeds local state and `onChange` reports changes. The callback argument comes from that component's declaration: it can be a scalar, collection or event. Never substitute a native DOM event for a declared value callback. Do not switch controlled/local ownership during a mount. [Consuming](consuming.md) describes current ownership exceptions and form integration.
 
-Open-state APIs vary: some overlays require `open` and use `onClose`; others declare `open`, `defaultOpen` and `onOpenChange`. `onDismiss`, `onClose` and `onOpenChange` are distinct contracts. Awaited form callbacks accept the declared asynchronous return type. Use the declaration for the selected export rather than assuming every component supports an ownership triplet.
+Open-state callbacks share `onOpenChange(open)`. Dialog, Drawer, Tour, CommandPalette, Toast and Alert accept it. `onClose` remains a supported zero-argument alias and still runs after `onOpenChange(false)`. Alert's `onDismiss` remains a supported click handler and still runs after those two. Awaited form callbacks accept the declared asynchronous return type. Use the declaration for the selected export rather than assuming every component supports an ownership triplet.
 
 ## Composition, refs and native attributes
 

package/docs/consuming.md

@@ -1,6 +1,6 @@
 # Consuming & upgrading the CyberSkill Design System
 
-**Source checkout:** VERSION **<!-- cs-source-version:checkout -->2.0.0<!-- /cs-source-version -->** is local source identity, not a registry-availability claim. For an unpublished candidate, validate the reviewed local package tarball or source checkout. Registry commands and sibling inventories below refer to published stable 1.7.2 and are not automatically updated by preparation. Preparation does not authorize publication.
+**Source checkout:** VERSION **<!-- cs-source-version:checkout -->2.2.0<!-- /cs-source-version -->** is local source identity, not a registry-availability claim. For an unpublished candidate, validate the reviewed local package tarball or source checkout. Registry commands and sibling inventories below refer to published stable 1.7.2 and are not automatically updated by preparation. Preparation does not authorize publication.
 
 How any project — human-driven or agent-driven — adopts this HTML-first design system, and how to take updates safely. Published on Storybook **Docs** at `design.cyberskill.world`.
 

package/docs/contrast-report.md

@@ -1,6 +1,6 @@
 # Contrast report — elemental pairings (APCA)
 
-Generated · sweep at VERSION 2.0.0.
+Generated · sweep at VERSION 2.2.0.
 
 Published on Storybook **Docs** at `design.cyberskill.world`.
 
@@ -14,6 +14,81 @@ Packs are generated from `tokens/element-seeds.json` (soft / middle / deep ladde
 | root (Thổ default) | accent-bright on ink (headings) | #F4BA17 / #45210E | 66.3 | ✓ |
 | root (Thổ default) | accent-on on accent-bright (CTA text) | #45210E / #F4BA17 | 66.3 | ✓ |
 | root (Thổ default) | accent-bright on dark panel (dark labels) | #F4BA17 / #221710 | 69.2 | ✓ |
+| tho · sand | text-accent on white (bold labels) | #695300 / #FFFFFF | 85.5 | ✓ |
+| tho · sand | text-accent on tint (bold labels) | #695300 / #FEF8E7 | 81.4 | ✓ |
+| tho · sand | accent-bright on ink (headings) | #FDEAB7 / #292108 | 92.5 | ✓ |
+| tho · sand | accent-on on accent-bright (CTA text) | #271E06 / #FDEAB7 | 91.6 | ✓ |
+| tho · sand | accent-bright on dark panel (dark labels) | #F9E5AE / #221710 | 90.5 | ✓ |
+| tho | text-accent on white (bold labels) | #6E3B0E / #FFFFFF | 90.7 | ✓ |
+| tho | text-accent on tint (bold labels) | #6E3B0E / #FBF4E9 | 84.6 | ✓ |
+| tho | accent-bright on ink (headings) | #F4BA17 / #45210E | 66.3 | ✓ |
+| tho | accent-on on accent-bright (CTA text) | #45210E / #F4BA17 | 66.3 | ✓ |
+| tho | accent-bright on dark panel (dark labels) | #FDD378 / #221710 | 81.9 | ✓ |
+| tho · clay | text-accent on white (bold labels) | #462402 / #FFFFFF | 100.2 | ✓ |
+| tho · clay | text-accent on tint (bold labels) | #462402 / #FCEEE3 | 91.5 | ✓ |
+| tho · clay | accent-bright on ink (headings) | #F2C5A3 / #321B07 | 74.4 | ✓ |
+| tho · clay | accent-on on accent-bright (CTA text) | #080200 / #F2C5A3 | 77.4 | ✓ |
+| tho · clay | accent-bright on dark panel (dark labels) | #F8C7A1 / #221710 | 77.1 | ✓ |
+| hoa · plasma | text-accent on white (bold labels) | #714B4D / #FFFFFF | 85.8 | ✓ |
+| hoa · plasma | text-accent on tint (bold labels) | #714B4D / #FFF5F5 | 81.1 | ✓ |
+| hoa · plasma | accent-bright on ink (headings) | #FFE3E4 / #2B1E1E | 91.5 | ✓ |
+| hoa · plasma | accent-on on accent-bright (CTA text) | #281B1C / #FFE3E4 | 90.8 | ✓ |
+| hoa · plasma | accent-bright on dark panel (dark labels) | #FDDDDE / #221710 | 89.4 | ✓ |
+| hoa | text-accent on white (bold labels) | #793609 / #FFFFFF | 90 | ✓ |
+| hoa | text-accent on tint (bold labels) | #793609 / #FFF1EA | 83.2 | ✓ |
+| hoa | accent-bright on ink (headings) | #FFD3BD / #3A1501 | 83 | ✓ |
+| hoa | accent-on on accent-bright (CTA text) | #361402 / #FFD3BD | 82.8 | ✓ |
+| hoa | accent-bright on dark panel (dark labels) | #FECDB4 / #221710 | 81.2 | ✓ |
+| hoa · lava | text-accent on white (bold labels) | #550306 / #FFFFFF | 100.5 | ✓ |
+| hoa · lava | text-accent on tint (bold labels) | #550306 / #FFEBE9 | 91.1 | ✓ |
+| hoa · lava | accent-bright on ink (headings) | #FFBCB4 / #400C0B | 73.4 | ✓ |
+| hoa · lava | accent-on on accent-bright (CTA text) | #0D0000 / #FFBCB4 | 76.6 | ✓ |
+| hoa · lava | accent-bright on dark panel (dark labels) | #FFC1B9 / #221710 | 76.7 | ✓ |
+| thuy · mist | text-accent on white (bold labels) | #116060 / #FFFFFF | 85.1 | ✓ |
+| thuy · mist | text-accent on tint (bold labels) | #116060 / #E6FDFC | 81.1 | ✓ |
+| thuy · mist | accent-bright on ink (headings) | #B1FBF9 / #032727 | 94 | ✓ |
+| thuy · mist | accent-on on accent-bright (CTA text) | #012525 / #B1FBF9 | 92.7 | ✓ |
+| thuy · mist | accent-bright on dark panel (dark labels) | #A6F8F6 / #221710 | 92.7 | ✓ |
+| thuy | text-accent on white (bold labels) | #0D535C / #FFFFFF | 89.5 | ✓ |
+| thuy | text-accent on tint (bold labels) | #0D535C / #DFFBFF | 84 | ✓ |
+| thuy | accent-bright on ink (headings) | #94EFFD / #03272C | 85.8 | ✓ |
+| thuy | accent-on on accent-bright (CTA text) | #012429 / #94EFFD | 85.4 | ✓ |
+| thuy | accent-bright on dark panel (dark labels) | #79EDFF / #221710 | 84.6 | ✓ |
+| thuy · ocean | text-accent on white (bold labels) | #003142 / #FFFFFF | 100.1 | ✓ |
+| thuy · ocean | text-accent on tint (bold labels) | #003142 / #E5F3FA | 91.5 | ✓ |
+| thuy · ocean | accent-bright on ink (headings) | #A9D8ED / #092531 | 76.1 | ✓ |
+| thuy · ocean | accent-on on accent-bright (CTA text) | #001721 / #A9D8ED | 78.1 | ✓ |
+| thuy · ocean | accent-bright on dark panel (dark labels) | #A5D8F0 / #221710 | 77.1 | ✓ |
+| moc · bamboo | text-accent on white (bold labels) | #4A5B02 / #FFFFFF | 86 | ✓ |
+| moc · bamboo | text-accent on tint (bold labels) | #4A5B02 / #F5FBE8 | 82.1 | ✓ |
+| moc · bamboo | accent-bright on ink (headings) | #E2F4BA / #1E250A | 93.4 | ✓ |
+| moc · bamboo | accent-on on accent-bright (CTA text) | #1C2307 / #E2F4BA | 92.3 | ✓ |
+| moc · bamboo | accent-bright on dark panel (dark labels) | #DCF0B1 / #221710 | 91.7 | ✓ |
+| moc | text-accent on white (bold labels) | #24570B / #FFFFFF | 89.2 | ✓ |
+| moc | text-accent on tint (bold labels) | #24570B / #EAFAE5 | 83.4 | ✓ |
+| moc | accent-bright on ink (headings) | #B9F0A6 / #0D2902 | 85.9 | ✓ |
+| moc | accent-on on accent-bright (CTA text) | #0A2700 / #B9F0A6 | 85.4 | ✓ |
+| moc | accent-bright on dark panel (dark labels) | #B2EC9E / #221710 | 84.5 | ✓ |
+| moc · forest | text-accent on white (bold labels) | #04361D / #FFFFFF | 99.7 | ✓ |
+| moc · forest | text-accent on tint (bold labels) | #04361D / #E6F5EB | 91.5 | ✓ |
+| moc · forest | accent-bright on ink (headings) | #ACDDBD / #0B2818 | 76.4 | ✓ |
+| moc · forest | accent-on on accent-bright (CTA text) | #011C0D / #ACDDBD | 78.1 | ✓ |
+| moc · forest | accent-bright on dark panel (dark labels) | #A8DFBB / #221710 | 78.3 | ✓ |
+| kim · titanium | text-accent on white (bold labels) | #3D5670 / #FFFFFF | 86.4 | ✓ |
+| kim · titanium | text-accent on tint (bold labels) | #3D5670 / #F3F8FE | 81.8 | ✓ |
+| kim · titanium | accent-bright on ink (headings) | #DDEDFF / #1A232B | 92.5 | ✓ |
+| kim · titanium | accent-on on accent-bright (CTA text) | #182029 / #DDEDFF | 91.6 | ✓ |
+| kim · titanium | accent-bright on dark panel (dark labels) | #D6E9FD / #221710 | 90.8 | ✓ |
+| kim | text-accent on white (bold labels) | #564B27 / #FFFFFF | 89.6 | ✓ |
+| kim | text-accent on tint (bold labels) | #564B27 / #F8F4EA | 83.2 | ✓ |
+| kim | accent-bright on ink (headings) | #E8DEBD / #262112 | 84.3 | ✓ |
+| kim | accent-on on accent-bright (CTA text) | #241F0F / #E8DEBD | 84 | ✓ |
+| kim | accent-bright on dark panel (dark labels) | #E3D9B8 / #221710 | 82.3 | ✓ |
+| kim · steel | text-accent on white (bold labels) | #1B2E4C / #FFFFFF | 100 | ✓ |
+| kim · steel | text-accent on tint (bold labels) | #1B2E4C / #EBF1FB | 91.4 | ✓ |
+| kim · steel | accent-bright on ink (headings) | #BED0F0 / #182232 | 75 | ✓ |
+| kim · steel | accent-on on accent-bright (CTA text) | #020818 / #BED0F0 | 78 | ✓ |
+| kim · steel | accent-bright on dark panel (dark labels) | #BBD0F4 / #221710 | 76 | ✓ |
 
 **Failures: 0.** All text pairings pass Lc ≥ 60.
 
@@ -24,6 +99,81 @@ Packs are generated from `tokens/element-seeds.json` (soft / middle / deep ladde
 Rows use the declared light or dark `--cs-color-link` colour. White, reference-page, reference-raised and reference-dark-panel backgrounds are fixed literals; element surface roles use `color-mix()` and are not measured by these rows. Rendered surface, preference and interaction checks have separate scopes.
 | Scope | Pairing | fg / bg | Ratio | Verdict |
 |---|---|---|---|---|
+| tho · sand | link on white (body) | #695300 / #FFFFFF | 7.40:1 | ✓ |
+| tho · sand | link on reference page (body) | #695300 / #FFFDF8 | 7.28:1 | ✓ |
+| tho · sand | link on tint (body) | #695300 / #FEF8E7 | 6.98:1 | ✓ |
+| tho · sand | link on reference raised cream (body) | #695300 / #FBF4E9 | 6.77:1 | ✓ |
+| tho · sand | link on reference dark panel (body) | #F9E5AE / #221710 | 14.06:1 | ✓ |
+| tho | link on white (body) | #644A05 / #FFFFFF | 8.32:1 | ✓ |
+| tho | link on reference page (body) | #644A05 / #FFFDF8 | 8.19:1 | ✓ |
+| tho | link on tint (body) | #644A05 / #FBF4E9 | 7.62:1 | ✓ |
+| tho | link on reference raised cream (body) | #644A05 / #FBF4E9 | 7.62:1 | ✓ |
+| tho | link on reference dark panel (body) | #FFD57A / #221710 | 12.56:1 | ✓ |
+| tho · clay | link on white (body) | #462402 / #FFFFFF | 13.87:1 | ✓ |
+| tho · clay | link on reference page (body) | #462402 / #FFFDF8 | 13.65:1 | ✓ |
+| tho · clay | link on tint (body) | #462402 / #FCEEE3 | 12.21:1 | ✓ |
+| tho · clay | link on reference raised cream (body) | #462402 / #FBF4E9 | 12.70:1 | ✓ |
+| tho · clay | link on reference dark panel (body) | #FFD2AF / #221710 | 12.60:1 | ✓ |
+| hoa · plasma | link on white (body) | #714B4D / #FFFFFF | 7.46:1 | ✓ |
+| hoa · plasma | link on reference page (body) | #714B4D / #FFFDF8 | 7.34:1 | ✓ |
+| hoa · plasma | link on tint (body) | #714B4D / #FFF5F5 | 6.97:1 | ✓ |
+| hoa · plasma | link on reference raised cream (body) | #714B4D / #FBF4E9 | 6.83:1 | ✓ |
+| hoa · plasma | link on reference dark panel (body) | #FDDDDE / #221710 | 13.83:1 | ✓ |
+| hoa | link on white (body) | #793609 / #FFFFFF | 8.96:1 | ✓ |
+| hoa | link on reference page (body) | #793609 / #FFFDF8 | 8.81:1 | ✓ |
+| hoa | link on tint (body) | #793609 / #FFF1EA | 8.11:1 | ✓ |
+| hoa | link on reference raised cream (body) | #793609 / #FBF4E9 | 8.20:1 | ✓ |
+| hoa | link on reference dark panel (body) | #FFD1BA / #221710 | 12.59:1 | ✓ |
+| hoa · lava | link on white (body) | #550306 / #FFFFFF | 14.98:1 | ✓ |
+| hoa · lava | link on reference page (body) | #550306 / #FFFDF8 | 14.74:1 | ✓ |
+| hoa · lava | link on tint (body) | #550306 / #FFEBE9 | 13.06:1 | ✓ |
+| hoa · lava | link on reference raised cream (body) | #550306 / #FBF4E9 | 13.71:1 | ✓ |
+| hoa · lava | link on reference dark panel (body) | #FDD0CA / #221710 | 12.56:1 | ✓ |
+| thuy · mist | link on white (body) | #116060 / #FFFFFF | 7.33:1 | ✓ |
+| thuy · mist | link on reference page (body) | #116060 / #FFFDF8 | 7.21:1 | ✓ |
+| thuy · mist | link on tint (body) | #116060 / #E6FDFC | 6.92:1 | ✓ |
+| thuy · mist | link on reference raised cream (body) | #116060 / #FBF4E9 | 6.71:1 | ✓ |
+| thuy · mist | link on reference dark panel (body) | #A6F8F6 / #221710 | 14.51:1 | ✓ |
+| thuy | link on white (body) | #0D535C / #FFFFFF | 8.72:1 | ✓ |
+| thuy | link on reference page (body) | #0D535C / #FFFDF8 | 8.58:1 | ✓ |
+| thuy | link on tint (body) | #0D535C / #DFFBFF | 8.05:1 | ✓ |
+| thuy | link on reference raised cream (body) | #0D535C / #FBF4E9 | 7.98:1 | ✓ |
+| thuy | link on reference dark panel (body) | #79EDFF / #221710 | 12.83:1 | ✓ |
+| thuy · ocean | link on white (body) | #003142 / #FFFFFF | 13.83:1 | ✓ |
+| thuy · ocean | link on reference page (body) | #003142 / #FFFDF8 | 13.61:1 | ✓ |
+| thuy · ocean | link on tint (body) | #003142 / #E5F3FA | 12.21:1 | ✓ |
+| thuy · ocean | link on reference raised cream (body) | #003142 / #FBF4E9 | 12.66:1 | ✓ |
+| thuy · ocean | link on reference dark panel (body) | #AFE2FA / #221710 | 12.59:1 | ✓ |
+| moc · bamboo | link on white (body) | #4A5B02 / #FFFFFF | 7.53:1 | ✓ |
+| moc · bamboo | link on reference page (body) | #4A5B02 / #FFFDF8 | 7.41:1 | ✓ |
+| moc · bamboo | link on tint (body) | #4A5B02 / #F5FBE8 | 7.12:1 | ✓ |
+| moc · bamboo | link on reference raised cream (body) | #4A5B02 / #FBF4E9 | 6.89:1 | ✓ |
+| moc · bamboo | link on reference dark panel (body) | #DCF0B1 / #221710 | 14.31:1 | ✓ |
+| moc | link on white (body) | #24570B / #FFFFFF | 8.60:1 | ✓ |
+| moc | link on reference page (body) | #24570B / #FFFDF8 | 8.46:1 | ✓ |
+| moc | link on tint (body) | #24570B / #EAFAE5 | 7.90:1 | ✓ |
+| moc | link on reference raised cream (body) | #24570B / #FBF4E9 | 7.87:1 | ✓ |
+| moc | link on reference dark panel (body) | #B2EC9E / #221710 | 12.84:1 | ✓ |
+| moc · forest | link on white (body) | #04361D / #FFFFFF | 13.54:1 | ✓ |
+| moc · forest | link on reference page (body) | #04361D / #FFFDF8 | 13.32:1 | ✓ |
+| moc · forest | link on tint (body) | #04361D / #E6F5EB | 12.01:1 | ✓ |
+| moc · forest | link on reference raised cream (body) | #04361D / #FBF4E9 | 12.39:1 | ✓ |
+| moc · forest | link on reference dark panel (body) | #B0E7C3 / #221710 | 12.57:1 | ✓ |
+| kim · titanium | link on white (body) | #3D5670 / #FFFFFF | 7.60:1 | ✓ |
+| kim · titanium | link on reference page (body) | #3D5670 / #FFFDF8 | 7.48:1 | ✓ |
+| kim · titanium | link on tint (body) | #3D5670 / #F3F8FE | 7.12:1 | ✓ |
+| kim · titanium | link on reference raised cream (body) | #3D5670 / #FBF4E9 | 6.95:1 | ✓ |
+| kim · titanium | link on reference dark panel (body) | #D6E9FD / #221710 | 14.13:1 | ✓ |
+| kim | link on white (body) | #564B27 / #FFFFFF | 8.64:1 | ✓ |
+| kim | link on reference page (body) | #564B27 / #FFFDF8 | 8.50:1 | ✓ |
+| kim | link on tint (body) | #564B27 / #F8F4EA | 7.86:1 | ✓ |
+| kim | link on reference raised cream (body) | #564B27 / #FBF4E9 | 7.90:1 | ✓ |
+| kim | link on reference dark panel (body) | #E5DBBA / #221710 | 12.66:1 | ✓ |
+| kim · steel | link on white (body) | #1B2E4C / #FFFFFF | 13.62:1 | ✓ |
+| kim · steel | link on reference page (body) | #1B2E4C / #FFFDF8 | 13.40:1 | ✓ |
+| kim · steel | link on tint (body) | #1B2E4C / #EBF1FB | 12.00:1 | ✓ |
+| kim · steel | link on reference raised cream (body) | #1B2E4C / #FBF4E9 | 12.47:1 | ✓ |
+| kim · steel | link on reference dark panel (body) | #C8DBFD / #221710 | 12.53:1 | ✓ |
 
 **Link failures: 0.**
 
@@ -32,6 +182,36 @@ Rows use the declared light or dark `--cs-color-link` colour. White, reference-p
 Pair `--cs-accent-strong` with `--cs-accent-on-strong`: both light and dark packs must meet body Lc ≥ 75 (generator target 78) and WCAG ≥ 4.5:1. Dark primary buttons consume this paired foreground. Brand anchors and the other eight accent roles retain their values.
 | Scope | Mode | fg / bg | Lc | Verdict |
 |---|---|---|---|---|
+| tho · sand | light | #FFFFFF / #856A03 | 80.8 | ✓ |
+| tho · sand | dark | #FFFFFF / #80671A | 82.2 | ✓ |
+| tho | light | #FFFFFF / #916D11 | 78.4 | ✓ |
+| tho | dark | #FFFFFF / #6E5205 | 90.1 | ✓ |
+| tho · clay | light | #FFFFFF / #5A3004 | 99.5 | ✓ |
+| tho · clay | dark | #FFFFFF / #5C3001 | 99.3 | ✓ |
+| hoa · plasma | light | #FFFFFF / #896163 | 81.7 | ✓ |
+| hoa · plasma | dark | #FFFFFF / #836061 | 82.8 | ✓ |
+| hoa | light | #FFFFFF / #96440B | 87.5 | ✓ |
+| hoa | dark | #FFFFFF / #883E0D | 90.9 | ✓ |
+| hoa · lava | light | #FFFFFF / #760008 | 98.8 | ✓ |
+| hoa · lava | dark | #FFFFFF / #6D1D19 | 99.2 | ✓ |
+| thuy · mist | light | #FFFFFF / #037D7D | 79.2 | ✓ |
+| thuy · mist | dark | #FFFFFF / #077A79 | 80.4 | ✓ |
+| thuy | light | #FFFFFF / #166B76 | 85.6 | ✓ |
+| thuy | dark | #FFFFFF / #04626D | 89.0 | ✓ |
+| thuy · ocean | light | #FFFFFF / #034257 | 98.8 | ✓ |
+| thuy · ocean | dark | #FFFFFF / #00445A | 98.2 | ✓ |
+| moc · bamboo | light | #FFFFFF / #62780E | 79.7 | ✓ |
+| moc · bamboo | dark | #FFFFFF / #607420 | 81.2 | ✓ |
+| moc | light | #FFFFFF / #2B7100 | 85.1 | ✓ |
+| moc | dark | #FFFFFF / #286704 | 88.6 | ✓ |
+| moc · forest | light | #FFFFFF / #0A4829 | 98.3 | ✓ |
+| moc · forest | dark | #FFFFFF / #074A29 | 97.8 | ✓ |
+| kim · titanium | light | #FFFFFF / #56708B | 80.8 | ✓ |
+| kim · titanium | dark | #FFFFFF / #576D83 | 82.0 | ✓ |
+| kim | light | #FFFFFF / #6A5E3A | 86.9 | ✓ |
+| kim | dark | #FFFFFF / #615633 | 90.1 | ✓ |
+| kim · steel | light | #FFFFFF / #293C5C | 99.4 | ✓ |
+| kim · steel | dark | #FFFFFF / #2B3D5D | 99.0 | ✓ |
 
 **Strong body failures: 0.** Static declared-pair calculation; the browser regressions and actual template/raster checks establish their separate scopes. Opacity, gradients, transitions and arbitrary overlaps are not implied by this table.
 
@@ -40,4 +220,19 @@ Pair `--cs-accent-strong` with `--cs-accent-on-strong`: both light and dark pack
 Proposal targets in `_audit/apca-dark-preview.html`: bright ≥ 75 · accent ≥ 60 · on-strong/strong ≥ 75 · ink-on-tint ≥ 75. Accent and bright are not unrestricted regular-body roles.
 | 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/conventions.md

@@ -78,7 +78,7 @@ only for HTML element content, never URL, attribute, CSS or script contexts.
 
 **New element variant** — stay inside the element's oklch envelope; set the 10 `--cs-accent-*` contract tokens (incl. `--cs-accent-on-strong` ≥4.5:1 and body APCA75 on `-strong`) plus `--cs-color-text-accent`/`--cs-color-link` (APCA-check both); the aurora wash inherits from the element via `.cs-aurora-wash` (override the class rule only if the variant truly needs its own image); gradient partner (`grad-b`) must follow Tương sinh.
 
-**Ship check** — follow the portable verification gate in `docs/doctrine.md`, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). source checkout VERSION **<!-- cs-source-version:checkout -->2.0.0<!-- /cs-source-version -->**.
+**Ship check** — follow the portable verification gate in `docs/doctrine.md`, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). source checkout VERSION **<!-- cs-source-version:checkout -->2.2.0<!-- /cs-source-version -->**.
 
 ## Decision log (owner-approved)
 

package/docs/design-styles.md

@@ -44,7 +44,7 @@ Do not invent a fifth product axis, and do not add a second Style pack without t
 
 ## Internal theme switches
 
-Canonical theme resolution is generated by `scripts/generate-element-packs.mjs` into `tokens/elements.css`. The private `--_cs-light` and `--_cs-dark` custom properties select one branch of declarations such as `color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre));`. A switch set to `initial` uses the `var()` fallback; an empty switch contributes no value. Light sets the light switch to `initial` and the dark switch empty; dark reverses them. An explicit `data-theme="system"` follows `prefers-color-scheme`.
+Canonical theme resolution is generated by `scripts/generate-element-packs.mjs` into `tokens/elements.css`. The private `--_cs-light` and `--_cs-dark` custom properties select one branch of declarations such as `color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre));`. The two substitutions are concatenated with no stylesheet space: a space remains when the inactive channel is empty and makes `background` and `border-color` keep the previous used color. A switch set to `initial` uses the `var()` fallback; an empty switch contributes no value. Light sets the light switch to `initial` and the dark switch empty; dark reverses them. An explicit `data-theme="system"` follows `prefers-color-scheme`.
 
 Consumers select `data-theme="light|dark|system"` and use public `--cs-*` tokens. Do not set the private switches directly, copy generated resolver blocks, or register these switches with `@property`: their empty/invalid-value behavior is part of the internal resolver. Resolver bindings are repeated at scope boundaries so nested element and theme changes recompute instead of inheriting an already selected parent value. Unmarked descendants inherit their surrounding scope.
 

package/docs/manual-at-matrix.md

@@ -15,3 +15,5 @@ The integrity test rejects missing/duplicate rows, empty translations, missing t
 A reviewer records the exact source commit, reviewer, date, OS, browser and assistive-technology versions, language/theme/state, task sequence, observed speech/focus behavior and evidence references. Use `passed` only after that manual run, `failed` for an observed failure and `blocked` for a missing environment or unresolved scope. Keep observations and failing evidence; a later recheck is a new attestation. Empty fields remain pending.
 
 Run `node _audit/ci/test-manual-at-matrix.mjs` to verify record shape and reject completed rows without evidence. This integrity check is not a screen-reader test and does not certify AT acceptance. `_audit/a11y-gate.html` and `_audit/at-kit-probe.html` remain programmatic proxies with separate verdicts.
+
+Publication runs `node scripts/require-manual-at-publication.mjs`. The release is refused while any AT-01–AT-16 row is not `passed` with evidence. Pending, failed, and blocked rows stay unpublished. The check does not create the manual observations.

package/docs/quality-gates.md

@@ -52,12 +52,13 @@ Benchmark principles (WCAG · APCA · OKLCH · DTCG · CDS doctrine + style expa
 | Style contract | `_audit/style-contract.html` | Style axis allowlist: sole pack `liquid-glass` (absent ≡ default); `styles.css` imports `tokens/styles.css`; `--cs-style-pack` resolves; no unknown `data-cs-style` in scanned sources | `__stylecontract.pass` | Hard | Fast board CI |
 | Visual baselines | `_audit/visual-diff.html` | Template baselines exist and are loadable for side-by-side / overlay comparison | Baselines present; drift judged by eye (`__visualdiff`) | Advisory | Fast board CI |
 | Component baselines | `_audit/component-visual-diff.html` | 12 curated component crops anchor the atomic tiers for visual comparison | Crops render + baselines present (`__componentVisualDiff`) | Advisory | Fast board CI |
+| Component state paint | `_audit/component-state-paint.html` | Primary, secondary, ghost and danger buttons, an open dialog, an open menu, a field error and a selected data row paint the authored light and dark colors. Channel delta uses `PIXEL_CHANNEL_TOLERANCE` from the pixel contract. The 15 Linux page PNGs stay the pixel-diff set. | `__statepaint.pass` | Hard | Fast board CI + three-engine unit test |
 | Axe smoke | `_audit/axe-smoke.html` + `_audit/lib/axe-fixtures.js` | axe-core 4.10.0 (vendored at `_audit/vendor/axe.min.js`) serious/critical WCAG 2 A/AA rules on every public primary (inventory-locked fixtures; bilingual EN·VI) — Dialog, AlertDialog, Drawer, Tour, CommandPalette, and Menu mount open, and Cascader / TreeSelect / Menubar / Combobox surfaces are expanded before the scan; gate-equivalent Storybook a11y enforcement (no separate test-runner) | 0 serious/critical findings (`__axesmoke`) | Hard | Fast board CI |
 | Print smoke | `_audit/print-smoke.html` | Every explicit contracted print path exists in the manifest and loads; inert source inspection requires one enabled ownership marker and parsed A4/Letter page rules matching the contract. Unlisted print owners and malformed/missing contracts fail. This does not certify pagination or exported-file fidelity. | Exact contracted membership/formats; no source or inspection failures (`__printsmoke`) | Hard | Fast board CI |
 | Support no-eval (Node) | `_audit/ci/test-support-no-eval.mjs` | Canonical `templates/_vendor/support.js` + all template copies are identical and contain no Function-constructor / `eval(` call sites (CSP-safe inline-script runtime) | Exit 0 | Hard | Unit test |
 | Doc export (Node+PW) | `_audit/ci/test-doc-export.mjs` | Every print template under site CSP: no EvalError, one Download menu (PDF\|DOCX), Playwright PDF `%PDF` + A4/Letter MediaBox, downloaded `buildPdfBlob` is one unstretched FlateDecode page of the live sheet (framework), DOCX ZIP + `word/document.xml` + VN diacritics + full rendered sheet-text equality after XML entity decoding and formatting-run joins + yellow fills/colspan + header lockup text (HĐNT) on framework | Exit 0 | Hard | Unit test; native PDF size smoke, with popup pagination, OS print and visual acceptance separate |
 | DOCX source parity (Node) | `_audit/ci/test-docx-source-parity.mjs` | DC text vs committed fixtures under `_audit/fixtures/hr-suite-docx-text/` for every mapped HR instrument | ≥85% phrase overlap; exit 0 | Hard | Unit test |
-| Pixel CI | `_audit/pixel-ci.html` + `_audit/ci/pixel-diff.mjs` | 15 curated baselines exist; Playwright capture script performs real % pixel compare; last report must be clean (`drifted[]` empty) | Contract + clean compare (`__pixelci.pass`); drift or missing report fails | Hard | Fast board CI (compare step feeds the row) + `pixel-diff` job |
+| Pixel CI | `_audit/pixel-ci.html` + `_audit/ci/pixel-diff.mjs` | 16 curated baselines exist, including the component-state swatches; Playwright capture script performs real % pixel compare; last report must be clean (`drifted[]` empty) | Contract + clean compare (`__pixelci.pass`); drift or missing report fails | Hard | Fast board CI (compare step feeds the row) + `pixel-diff` job |
 
 ## Whole-set audits — manifest-driven passes