@cyberskill/design 2.1.0 → 2.2.0

package/docs/consuming.md

@@ -1,6 +1,6 @@
 # Consuming & upgrading the CyberSkill Design System
 
-**Source checkout:** VERSION **<!-- cs-source-version:checkout -->2.1.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.1.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.1.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/reference-catalog.json

@@ -4,7 +4,7 @@
     "path": "scripts/generate-reference-catalog.mjs",
     "sha256": "be85a593b4b29f0d26e5733502f8d9e4f536e10ab015173a34f4101af11723ef"
   },
-  "version": "2.1.0",
+  "version": "2.2.0",
   "interpretation": "The document inventory covers Git-listed Markdown and llms.txt; HTML count surfaces are tracked separately. Audience follows the website publication policy, not npm membership. Source paths locate repository evidence and need not all be packaged. Roles describe source routing and audience, not approval, factual freshness of every sentence, translation quality or capability certification.",
   "countScope": "Counts describe declared inventory only. Declared language/theme/boolean controls are inventory facts, not proof of complete content, working behavior or every supported state; token declarations and typed base values are distinct counts.",
   "counts": {
@@ -29,7 +29,7 @@
   },
   "sourceHashes": {
     "_audit/visual-diff.html": "fd344cf31f0aa4130dddec2a99dca5ef60d9d08025b5dc2b4b729a1d388c5bb8",
-    "_ds_manifest.json": "aa7c859299ef367e7df3aee45706ab58836d7fe0274c32c117b7c0534159ff37",
+    "_ds_manifest.json": "1afe81a2bfb18fc8455860acef45cac88927bf852a9b3142921ede4096fd8ab8",
     "scripts/public-site-policy.json": "ffc461f55367201365ed6c8b97e0c06eed50e139e312644da3727d76c7feea47",
     "templates/app-shell/AppShell.dc.html": "f71017a26f12b71d9e653dff79635ed14d5eb4a3dac9c5ce095188c537b858e3",
     "templates/article/Article.dc.html": "9b2ed3af604ac9e552f33bc922ec7dd2659b786dcb624cb491f7a437658adb2f",
@@ -116,7 +116,7 @@
     "templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html": "ee941a6d26aa525bba779015ca01f4bdb7246571db2c3558499d7bc2fee3c2aa",
     "templates/vn-training-commitment/VnTrainingCommitment.dc.html": "49b2b4459bf2a900ddfafe679b6f3b088c78a31f611ae76dc3ac276e05a14c46",
     "templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html": "1e585bd53ec6fb41322082bddfb7eed4ac811bfabb1ad2d639b9babba6c0e212",
-    "tokens/tokens.dtcg.json": "598f440dbf754285b8c147fce8b6df1962a2fa7ee9c9ba6745ea25986377fb27"
+    "tokens/tokens.dtcg.json": "26765a44322a7a60b54f20f7bd03483edcaa4a27e77ea74405035147c99c23ae"
   },
   "documents": [
     {
@@ -129,7 +129,7 @@
       "path": "DESIGN.md",
       "audience": "documentation",
       "role": "generated_reference",
-      "sha256": "57fa0c69afce6a2db927ed835bfbc3dc477d1d7aacf26b6eefd031e02a966db9"
+      "sha256": "8c1cb582566ef9b0904f0b23d51abe5158ed2f3815a16ced33fbc04cbf93f709"
     },
     {
       "path": "MAINTAINERS.md",
@@ -141,7 +141,7 @@
       "path": "README.md",
       "audience": "documentation",
       "role": "human_orientation",
-      "sha256": "632c6c2398d1c27a2aa5b9878d7ac7eac3200395b1dafe42829af5da030fae87"
+      "sha256": "605dfb41f10409ff3fa00bd5d8e4e2892447a33b56b671cf5b564a60535646df"
     },
     {
       "path": "SECURITY.md",
@@ -909,19 +909,19 @@
       "path": "docs/consuming.md",
       "audience": "documentation",
       "role": "operator_guide",
-      "sha256": "2ce69f681b052ee8650d59f38b3d7c5328ba4a728997d278432b238946b6e731"
+      "sha256": "a0a6141dae31bc99d8d450238a9a589d39148d38adab5ba62b24a67f7489aa2a"
     },
     {
       "path": "docs/contrast-report.md",
       "audience": "documentation",
       "role": "generated_measurement",
-      "sha256": "7c3022379a530b982621c6fc669afe5c1778de13a752a8505f02c9111d89eb65"
+      "sha256": "6e62e3de3357f65498f685950221e983028bc58db41c12dd0975916ca8d1f320"
     },
     {
       "path": "docs/conventions.md",
       "audience": "documentation",
       "role": "normative_repository_contract",
-      "sha256": "b8b0e47adc75dc9096c4ce44e1abcb18da99f0beae30d842839b99f5c013a00e"
+      "sha256": "1f34c09521e39bdba8d95d4a849435008ecf0735b39d379357aa3fbd4067c45f"
     },
     {
       "path": "docs/decisions.md",
@@ -1059,7 +1059,7 @@
       "path": "docs/release-notes.md",
       "audience": "documentation",
       "role": "release_history",
-      "sha256": "b8f575990e31cf5f95054520711ffc70ed9f38de2c432e2fd16ef24bc69b5201"
+      "sha256": "342f38485ce82fefdf2e5e35872ab444e61ac4b79dd3a32b35fa99e73869b9d9"
     },
     {
       "path": "docs/releasing.md",
@@ -1077,7 +1077,7 @@
       "path": "docs/static-html-reference.md",
       "audience": "documentation",
       "role": "operator_guide",
-      "sha256": "0c5d44fae32bfbea1e54de79d28145668d2295dd937b0931ddd25f1fddb5fb30"
+      "sha256": "3a2a307a5ca78c69dc70dc69e211166b934436b77189dea64405ebbfd4818f24"
     },
     {
       "path": "docs/storybook.md",
@@ -1185,19 +1185,19 @@
       "path": "docs/vi/consuming.md",
       "audience": "documentation",
       "role": "operator_guide",
-      "sha256": "96b2c802f868dfc963090b1c1ec49572ae9227bb85477a6a33fb5b77fd921be2"
+      "sha256": "5925c3eef5980ca9fd15e7abcfc9f887c132d0dd218ebc23f55d4986616b6cc3"
     },
     {
       "path": "docs/vi/contrast-report.md",
       "audience": "documentation",
       "role": "generated_measurement",
-      "sha256": "a03bc903f2b868ff0eb66c72e047ea51cc0b4521cff36bcd9d8e49afaa53c7c4"
+      "sha256": "84d39d96474fd5ec6d1d8b41d0e551907de0f4e38b21c59fa79a83b85e67ad15"
     },
     {
       "path": "docs/vi/conventions.md",
       "audience": "documentation",
       "role": "normative_repository_contract",
-      "sha256": "4811537bc8e6747b44ccfd41ef316b645f3e666b291313a8cbdf8dee1e4ca458"
+      "sha256": "cb18a54c426e3e8ce6752f832c5a81e7a8fb059a760dc22b56e26826f9205aad"
     },
     {
       "path": "docs/vi/decisions.md",
@@ -1233,13 +1233,13 @@
       "path": "docs/vi/entrypoints/DESIGN.md",
       "audience": "documentation",
       "role": "generated_reference",
-      "sha256": "15dde0d7ac53ea0a4317f2f3c268a404ff8d776186936baece3d19e22caf930d"
+      "sha256": "07394d9cf26c9a31444903b1c77dac13372dd7aa772405ea948d7913c235c400"
     },
     {
       "path": "docs/vi/entrypoints/README.md",
       "audience": "documentation",
       "role": "human_orientation",
-      "sha256": "86c32b78d8a7f81ecaeb578b11fc7260c73b025684c9ab505918aeb920961ca2"
+      "sha256": "9aa85ec404c0cd2bfb3333b3ac06ab941ce9025c2e8afa258b835e6127e29d95"
     },
     {
       "path": "docs/vi/entrypoints/SKILL.md",
@@ -1335,7 +1335,7 @@
       "path": "docs/vi/release-notes.md",
       "audience": "documentation",
       "role": "release_history",
-      "sha256": "9f8ed3d4619bbfe96d9891a9e47ab9f938c288b29730115bdda3800ab0d038e4"
+      "sha256": "5d65a1b8dfd98c63effb5d596df824a9d3db4b026e1144049c0d6dc753814280"
     },
     {
       "path": "docs/vi/releasing.md",
@@ -1353,7 +1353,7 @@
       "path": "docs/vi/static-html-reference.md",
       "audience": "documentation",
       "role": "operator_guide",
-      "sha256": "fed084f86cf19c58a36b9db586d68bdca9bb2c8810180ab92d5fee180dc950ad"
+      "sha256": "07c512e9ab5b14c7be733dd7dd23506501a85888519e95b365fe8c8850bdf703"
     },
     {
       "path": "docs/vi/storybook.md",

package/docs/release-notes.md

@@ -1,6 +1,6 @@
 # Release Notes
 
-Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. source checkout VERSION **<!-- cs-source-version:checkout -->2.1.0<!-- /cs-source-version -->** identifies the repository version. This page supplies Storybook **Release Notes**; local edits do not establish what is deployed at `design.cyberskill.world`.
+Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. source checkout VERSION **<!-- cs-source-version:checkout -->2.2.0<!-- /cs-source-version -->** identifies the repository version. This page supplies Storybook **Release Notes**; local edits do not establish what is deployed at `design.cyberskill.world`.
 
 ## Unreleased revision — local implementation, acceptance pending