@cyberskill/design 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (779) hide show
  1. package/DESIGN.md +87 -87
  2. package/README.md +3 -3
  3. package/SECURITY.md +4 -4
  4. package/VERSION +1 -1
  5. package/_ds_bundle.js +2 -2
  6. package/_ds_bundle.js.map +1 -1
  7. package/_ds_manifest.json +143 -143
  8. package/_esm/cs.mjs +2 -2
  9. package/base/collections.css +5 -4
  10. package/base/components.css +8 -7
  11. package/base/controls.css +16 -16
  12. package/base/data.css +5 -5
  13. package/base/feedback.css +5 -3
  14. package/base/forms.css +3 -2
  15. package/base/glass.css +4 -4
  16. package/base/interaction.css +6 -1
  17. package/base/navigation.css +3 -3
  18. package/base/reset.css +2 -0
  19. package/base/shell.css +8 -8
  20. package/base/typography.css +4 -4
  21. package/components/_i18n/strings.js +3 -3
  22. package/components/_utils/open-change.js +18 -0
  23. package/components/ai/ai-conversation.card.html +2 -0
  24. package/components/ai/ai-lumi.card.html +2 -0
  25. package/components/ai/ai.card.html +2 -0
  26. package/components/api-discovery.json +94 -24
  27. package/components/api-index.json +528 -80
  28. package/components/brand/brand.card.html +2 -0
  29. package/components/button/buttons.card.html +2 -0
  30. package/components/contracts.json +23 -9
  31. package/components/data/collections.card.html +2 -0
  32. package/components/data/data.card.html +2 -0
  33. package/components/datatable/DataGrid.jsx +1 -1
  34. package/components/datatable/datatable.card.html +2 -0
  35. package/components/dialog/Dialog.d.ts +3 -0
  36. package/components/dialog/Dialog.jsx +7 -5
  37. package/components/dialog/Dialog.prompt.md +1 -0
  38. package/components/dialog/dialog.card.html +2 -0
  39. package/components/feedback/Alert.d.ts +5 -1
  40. package/components/feedback/Alert.jsx +4 -3
  41. package/components/feedback/Alert.prompt.md +2 -0
  42. package/components/feedback/Toast.d.ts +3 -0
  43. package/components/feedback/Toast.jsx +4 -3
  44. package/components/feedback/Toast.prompt.md +1 -0
  45. package/components/feedback/feedback-2.card.html +2 -0
  46. package/components/feedback/feedback.card.html +2 -0
  47. package/components/forms/forms-2.card.html +2 -0
  48. package/components/forms/forms.card.html +2 -0
  49. package/components/i18n/i18n.card.html +2 -1
  50. package/components/icon/icon.card.html +2 -0
  51. package/components/lifecycle.json +433 -55
  52. package/components/logo/logo.card.html +2 -0
  53. package/components/navigation/CommandPalette.d.ts +4 -1
  54. package/components/navigation/CommandPalette.jsx +6 -5
  55. package/components/navigation/CommandPalette.prompt.md +1 -0
  56. package/components/navigation/Menubar.jsx +2 -2
  57. package/components/navigation/navigation.card.html +2 -0
  58. package/components/navigation/shell.card.html +2 -0
  59. package/components/overlays/Drawer.d.ts +3 -0
  60. package/components/overlays/Drawer.jsx +6 -5
  61. package/components/overlays/Drawer.prompt.md +1 -0
  62. package/components/overlays/Tour.d.ts +3 -0
  63. package/components/overlays/Tour.jsx +8 -5
  64. package/components/overlays/Tour.prompt.md +1 -0
  65. package/components/overlays/alertdialog.card.html +2 -0
  66. package/components/overlays/overlays.card.html +2 -0
  67. package/components/prompt-api.json +17 -10
  68. package/components/scenarios.json +37 -37
  69. package/components/specifications.json +3403 -1401
  70. package/components/static-html-reference.json +36 -36
  71. package/components/textfield/textfield.card.html +2 -0
  72. package/dist/esm/_esm/react.mjs +69 -68
  73. package/dist/esm/build.json +526 -518
  74. package/dist/esm/chunks/{chunk-FEUTSZBN.mjs → chunk-2CCVFTPL.mjs} +2 -2
  75. package/dist/esm/chunks/{chunk-W5VR7GTL.mjs → chunk-2VVGZEOQ.mjs} +2 -2
  76. package/dist/esm/chunks/{chunk-3RC4CDAE.mjs → chunk-3R5WJQCB.mjs} +2 -2
  77. package/dist/esm/chunks/{chunk-W6N22NMF.mjs → chunk-4FGB6VHN.mjs} +2 -2
  78. package/dist/esm/chunks/{chunk-JN57OITY.mjs → chunk-4RSFD6QC.mjs} +10 -7
  79. package/dist/esm/chunks/chunk-4RSFD6QC.mjs.map +7 -0
  80. package/dist/esm/chunks/{chunk-YZR3C7V2.mjs → chunk-4TO35YGK.mjs} +2 -2
  81. package/dist/esm/chunks/{chunk-JSAPFO73.mjs → chunk-4YWKKULF.mjs} +2 -2
  82. package/dist/esm/chunks/{chunk-W2RF4NWB.mjs → chunk-5FQGNCKS.mjs} +2 -2
  83. package/dist/esm/chunks/chunk-65SIJBJX.mjs +22 -0
  84. package/dist/esm/chunks/chunk-65SIJBJX.mjs.map +7 -0
  85. package/dist/esm/chunks/{chunk-SYCXNMYP.mjs → chunk-6ECKJ6RS.mjs} +2 -2
  86. package/dist/esm/chunks/{chunk-CH4W6RCG.mjs → chunk-6H7JYBPI.mjs} +10 -5
  87. package/dist/esm/chunks/chunk-6H7JYBPI.mjs.map +7 -0
  88. package/dist/esm/chunks/{chunk-72AUOI37.mjs → chunk-6TZDNLHE.mjs} +2 -2
  89. package/dist/esm/chunks/{chunk-QGCPHFSI.mjs → chunk-72STPBL4.mjs} +2 -2
  90. package/dist/esm/chunks/{chunk-37AN57S5.mjs → chunk-7GSR2NGL.mjs} +3 -3
  91. package/dist/esm/chunks/{chunk-A3PGQW3X.mjs → chunk-AA5BSO3T.mjs} +2 -2
  92. package/dist/esm/chunks/{chunk-NH6M42ZI.mjs → chunk-ASGO2FW5.mjs} +2 -2
  93. package/dist/esm/chunks/{chunk-GP5ITSCH.mjs → chunk-C3NAMBA7.mjs} +2 -2
  94. package/dist/esm/chunks/{chunk-YA7Y7PEC.mjs → chunk-CKBL3UEA.mjs} +2 -2
  95. package/dist/esm/chunks/{chunk-H7EJ7TNP.mjs → chunk-CYZ22MB7.mjs} +2 -2
  96. package/dist/esm/chunks/{chunk-JRIWHAWW.mjs → chunk-D7A4ZCMJ.mjs} +2 -2
  97. package/dist/esm/chunks/{chunk-A7RWM4XH.mjs → chunk-DANUZS4S.mjs} +2 -2
  98. package/dist/esm/chunks/{chunk-FAVSLU7E.mjs → chunk-DFBKBVSE.mjs} +2 -2
  99. package/dist/esm/chunks/{chunk-TNHQB6CI.mjs → chunk-DW4AWLA5.mjs} +2 -2
  100. package/dist/esm/chunks/{chunk-5R5KMLUR.mjs → chunk-DWJIX65T.mjs} +2 -2
  101. package/dist/esm/chunks/{chunk-YJNSQ5PJ.mjs → chunk-EITZT2U5.mjs} +2 -2
  102. package/dist/esm/chunks/{chunk-CSJHR2W2.mjs → chunk-EOCMQT4L.mjs} +2 -2
  103. package/dist/esm/chunks/{chunk-4QBKN42N.mjs → chunk-EXOOST5G.mjs} +2 -2
  104. package/dist/esm/chunks/{chunk-7HTAAMIY.mjs → chunk-FF5D53IP.mjs} +2 -2
  105. package/dist/esm/chunks/{chunk-JNK7QN24.mjs → chunk-FOEJO2YQ.mjs} +2 -2
  106. package/dist/esm/chunks/{chunk-F3M5TQ76.mjs → chunk-GB6VWFOE.mjs} +11 -6
  107. package/dist/esm/chunks/chunk-GB6VWFOE.mjs.map +7 -0
  108. package/dist/esm/chunks/{chunk-UFE32JPH.mjs → chunk-GHWOEHEX.mjs} +8 -4
  109. package/dist/esm/chunks/chunk-GHWOEHEX.mjs.map +7 -0
  110. package/dist/esm/chunks/{chunk-HYQG5XND.mjs → chunk-GLPQBE2J.mjs} +2 -2
  111. package/dist/esm/chunks/{chunk-HUW6OY7C.mjs → chunk-GNEVR5Q4.mjs} +2 -2
  112. package/dist/esm/chunks/{chunk-SEYKDGXE.mjs → chunk-H4TKHAB3.mjs} +2 -2
  113. package/dist/esm/chunks/{chunk-ANWF2NX3.mjs → chunk-H6HQZ5RI.mjs} +3 -3
  114. package/dist/esm/chunks/{chunk-ANWF2NX3.mjs.map → chunk-H6HQZ5RI.mjs.map} +2 -2
  115. package/dist/esm/chunks/{chunk-OR5UTKW7.mjs → chunk-I3H7EAH5.mjs} +2 -2
  116. package/dist/esm/chunks/{chunk-P64YS5W2.mjs → chunk-I3PQVFX5.mjs} +2 -2
  117. package/dist/esm/chunks/{chunk-5MR3C2QG.mjs → chunk-IOEWPBAL.mjs} +2 -2
  118. package/dist/esm/chunks/{chunk-TN2MZXGS.mjs → chunk-JIHWIDMP.mjs} +2 -2
  119. package/dist/esm/chunks/{chunk-FXELBWXK.mjs → chunk-JTAYZ36C.mjs} +4 -3
  120. package/dist/esm/chunks/{chunk-FXELBWXK.mjs.map → chunk-JTAYZ36C.mjs.map} +2 -2
  121. package/dist/esm/chunks/{chunk-25AOTZAM.mjs → chunk-JZYRXWPD.mjs} +4 -4
  122. package/dist/esm/chunks/{chunk-25AOTZAM.mjs.map → chunk-JZYRXWPD.mjs.map} +2 -2
  123. package/dist/esm/chunks/{chunk-YX62AV33.mjs → chunk-KAOUK33L.mjs} +2 -2
  124. package/dist/esm/chunks/{chunk-UVJ5BBQG.mjs → chunk-KWPNHP73.mjs} +2 -2
  125. package/dist/esm/chunks/{chunk-BABSYWVB.mjs → chunk-LCC4ZVVO.mjs} +2 -2
  126. package/dist/esm/chunks/{chunk-GWBINWTF.mjs → chunk-LWRFPVX7.mjs} +8 -4
  127. package/dist/esm/chunks/chunk-LWRFPVX7.mjs.map +7 -0
  128. package/dist/esm/chunks/{chunk-HVF4NT6P.mjs → chunk-MRXEJSQQ.mjs} +2 -2
  129. package/dist/esm/chunks/{chunk-DIIXA7WD.mjs → chunk-NZKMM4FK.mjs} +2 -2
  130. package/dist/esm/chunks/{chunk-CLWTVJM3.mjs → chunk-OEWAQZYE.mjs} +2 -2
  131. package/dist/esm/chunks/{chunk-IH4I7JSB.mjs → chunk-OILXJXVX.mjs} +10 -7
  132. package/dist/esm/chunks/chunk-OILXJXVX.mjs.map +7 -0
  133. package/dist/esm/chunks/{chunk-OOZKMXYB.mjs → chunk-PBP2MKZH.mjs} +2 -2
  134. package/dist/esm/chunks/{chunk-JKKJHQVQ.mjs → chunk-PE6KC2U7.mjs} +2 -2
  135. package/dist/esm/chunks/{chunk-N5TM7UIY.mjs → chunk-PFTKXY5Q.mjs} +2 -2
  136. package/dist/esm/chunks/{chunk-R7QVE2JP.mjs → chunk-PLN3ITUB.mjs} +2 -2
  137. package/dist/esm/chunks/{chunk-NEMFYL4X.mjs → chunk-QBPDNM7S.mjs} +2 -2
  138. package/dist/esm/chunks/{chunk-JDI3UMJW.mjs → chunk-SIMVM4RV.mjs} +2 -2
  139. package/dist/esm/chunks/{chunk-WJF2Q2Y3.mjs → chunk-TMXLSCAG.mjs} +2 -2
  140. package/dist/esm/chunks/{chunk-TGYG7JP4.mjs → chunk-TNQXCIBM.mjs} +2 -2
  141. package/dist/esm/chunks/{chunk-DHTD5KM5.mjs → chunk-TWCJMLGG.mjs} +2 -2
  142. package/dist/esm/chunks/{chunk-EPFDMHPK.mjs → chunk-U7RKPGRO.mjs} +2 -2
  143. package/dist/esm/chunks/{chunk-NMIGE2IM.mjs → chunk-UWNMGKAN.mjs} +2 -2
  144. package/dist/esm/chunks/{chunk-KXFGO7N4.mjs → chunk-VAPKJRQI.mjs} +2 -2
  145. package/dist/esm/chunks/{chunk-XTBN55D3.mjs → chunk-VUCJT2QJ.mjs} +2 -2
  146. package/dist/esm/chunks/{chunk-TVTBVHT2.mjs → chunk-WLANQTOU.mjs} +2 -2
  147. package/dist/esm/chunks/{chunk-3MCNCG2L.mjs → chunk-XZ5NWMO7.mjs} +2 -2
  148. package/dist/esm/chunks/{chunk-QPXQZBQC.mjs → chunk-YKU2KVAQ.mjs} +2 -2
  149. package/dist/esm/chunks/{chunk-ZKFOGW4D.mjs → chunk-YLSFKG64.mjs} +2 -2
  150. package/dist/esm/chunks/{chunk-TO2T6EEB.mjs → chunk-YVSAUCWW.mjs} +3 -3
  151. package/dist/esm/chunks/{chunk-XN74VX5H.mjs → chunk-ZKBAIIAQ.mjs} +2 -2
  152. package/dist/esm/chunks/{chunk-7IJTTRPK.mjs → chunk-ZPLENPV2.mjs} +2 -2
  153. package/dist/esm/components/ai/AIDisclosureBadge.mjs +2 -2
  154. package/dist/esm/components/ai/ChatMessage.mjs +2 -2
  155. package/dist/esm/components/ai/CitationList.mjs +2 -2
  156. package/dist/esm/components/ai/ConfidenceMeter.mjs +2 -2
  157. package/dist/esm/components/ai/HumanReviewGate.mjs +2 -2
  158. package/dist/esm/components/ai/PromptInput.mjs +2 -2
  159. package/dist/esm/components/ai/TypingIndicator.mjs +2 -2
  160. package/dist/esm/components/data/Carousel.mjs +2 -2
  161. package/dist/esm/components/data/Chart.mjs +2 -2
  162. package/dist/esm/components/data/CodeBlock.mjs +2 -2
  163. package/dist/esm/components/data/Comment.mjs +2 -2
  164. package/dist/esm/components/data/Image.mjs +2 -2
  165. package/dist/esm/components/data/Sortable.mjs +2 -2
  166. package/dist/esm/components/data/Splitter.mjs +2 -2
  167. package/dist/esm/components/data/Terminal.mjs +2 -2
  168. package/dist/esm/components/data/Tooltip.mjs +2 -2
  169. package/dist/esm/components/datatable/DataGrid.mjs +2 -2
  170. package/dist/esm/components/datatable/DataTable.mjs +3 -3
  171. package/dist/esm/components/datatable/TreeTable.mjs +2 -2
  172. package/dist/esm/components/dialog/Dialog.mjs +3 -2
  173. package/dist/esm/components/feedback/Alert.mjs +3 -2
  174. package/dist/esm/components/feedback/EmptyState.mjs +2 -2
  175. package/dist/esm/components/feedback/ProgressBar.mjs +2 -2
  176. package/dist/esm/components/feedback/Result.mjs +2 -2
  177. package/dist/esm/components/feedback/Spinner.mjs +2 -2
  178. package/dist/esm/components/feedback/Tag.mjs +2 -2
  179. package/dist/esm/components/feedback/Toast.mjs +3 -2
  180. package/dist/esm/components/forms/Calendar.mjs +2 -2
  181. package/dist/esm/components/forms/Cascader.mjs +2 -2
  182. package/dist/esm/components/forms/ColorPicker.mjs +2 -2
  183. package/dist/esm/components/forms/Combobox.mjs +2 -2
  184. package/dist/esm/components/forms/DatePicker.mjs +3 -3
  185. package/dist/esm/components/forms/Editor.mjs +2 -2
  186. package/dist/esm/components/forms/FileUpload.mjs +2 -2
  187. package/dist/esm/components/forms/Form.mjs +2 -2
  188. package/dist/esm/components/forms/InlineEdit.mjs +2 -2
  189. package/dist/esm/components/forms/InputGroup.mjs +2 -2
  190. package/dist/esm/components/forms/InputOTP.mjs +2 -2
  191. package/dist/esm/components/forms/Mentions.mjs +2 -2
  192. package/dist/esm/components/forms/NumberField.mjs +2 -2
  193. package/dist/esm/components/forms/Rating.mjs +2 -2
  194. package/dist/esm/components/forms/SearchField.mjs +2 -2
  195. package/dist/esm/components/forms/Select.mjs +2 -2
  196. package/dist/esm/components/forms/Slider.mjs +2 -2
  197. package/dist/esm/components/forms/Switch.mjs +2 -2
  198. package/dist/esm/components/forms/TagInput.mjs +2 -2
  199. package/dist/esm/components/forms/TimePicker.mjs +2 -2
  200. package/dist/esm/components/forms/Toggle.mjs +2 -2
  201. package/dist/esm/components/forms/Transfer.mjs +2 -2
  202. package/dist/esm/components/forms/TreeSelect.mjs +2 -2
  203. package/dist/esm/components/i18n/LocaleProvider.mjs +2 -2
  204. package/dist/esm/components/navigation/BackTop.mjs +2 -2
  205. package/dist/esm/components/navigation/Breadcrumb.mjs +2 -2
  206. package/dist/esm/components/navigation/CommandPalette.mjs +3 -2
  207. package/dist/esm/components/navigation/HotKeys.mjs +2 -2
  208. package/dist/esm/components/navigation/Menu.mjs +2 -2
  209. package/dist/esm/components/navigation/Menubar.mjs +2 -2
  210. package/dist/esm/components/navigation/Pagination.mjs +2 -2
  211. package/dist/esm/components/navigation/Steps.mjs +2 -2
  212. package/dist/esm/components/navigation/Tabs.mjs +2 -2
  213. package/dist/esm/components/navigation/Toolbar.mjs +2 -2
  214. package/dist/esm/components/overlays/AlertDialog.mjs +2 -2
  215. package/dist/esm/components/overlays/ContextMenu.mjs +2 -2
  216. package/dist/esm/components/overlays/Drawer.mjs +3 -2
  217. package/dist/esm/components/overlays/Popconfirm.mjs +2 -2
  218. package/dist/esm/components/overlays/Popover.mjs +2 -2
  219. package/dist/esm/components/overlays/Tour.mjs +3 -2
  220. package/dist/styles.min.css +1 -1
  221. package/docs/ci-cd.md +1 -1
  222. package/docs/component-api.md +1 -1
  223. package/docs/consuming.md +1 -1
  224. package/docs/contrast-report.md +196 -1
  225. package/docs/conventions.md +1 -1
  226. package/docs/design-styles.md +1 -1
  227. package/docs/manual-at-matrix.md +2 -0
  228. package/docs/quality-gates.md +2 -1
  229. package/docs/reference-catalog.json +81 -81
  230. package/docs/release-notes.md +1 -1
  231. package/docs/static-html-reference.md +27 -27
  232. package/docs/template-inventory.json +162 -162
  233. package/docs/vi/ci-cd.md +1 -1
  234. package/docs/vi/component-api.md +1 -1
  235. package/docs/vi/consuming.md +1 -1
  236. package/docs/vi/contrast-report.md +196 -1
  237. package/docs/vi/conventions.md +1 -1
  238. package/docs/vi/decisions/component-specification-evidence.md +1 -1
  239. package/docs/vi/decisions/token-alias-compatibility.md +1 -1
  240. package/docs/vi/design-styles.md +1 -1
  241. package/docs/vi/entrypoints/DESIGN.md +87 -87
  242. package/docs/vi/entrypoints/README.md +3 -3
  243. package/docs/vi/manual-at-matrix.md +2 -0
  244. package/docs/vi/quality-gates.md +2 -1
  245. package/docs/vi/release-notes.md +1 -1
  246. package/docs/vi/static-html-reference.md +27 -27
  247. package/docs/viewer.html +9 -12
  248. package/guidelines/atomic-view.html +39 -34
  249. package/guidelines/brand-iconography.html +33 -32
  250. package/guidelines/brand-imagery.html +2 -1
  251. package/guidelines/brand-interaction.html +3 -2
  252. package/guidelines/brand-voice.html +2 -1
  253. package/guidelines/colors-anchors.html +2 -1
  254. package/guidelines/colors-semantic.html +2 -1
  255. package/guidelines/colors-surfaces.html +2 -1
  256. package/guidelines/colors-text.html +2 -1
  257. package/guidelines/documents.html +3 -2
  258. package/guidelines/elements-components.html +4 -3
  259. package/guidelines/elements-concept.html +3 -2
  260. package/guidelines/elements-geometry.html +4 -3
  261. package/guidelines/elements-variants.html +18 -17
  262. package/guidelines/guideline-language.js +1 -1
  263. package/guidelines/motion-interaction.html +2 -1
  264. package/guidelines/motion.html +12 -13
  265. package/guidelines/responsive-bilingual.html +7 -6
  266. package/guidelines/rtl-preview.html +2 -2
  267. package/guidelines/spacing-breakpoints.html +2 -1
  268. package/guidelines/spacing-radius.html +4 -3
  269. package/guidelines/spacing-scale.html +2 -1
  270. package/guidelines/surfaces-aurora.html +2 -1
  271. package/guidelines/surfaces-depth.html +3 -2
  272. package/guidelines/surfaces-glass.html +2 -1
  273. package/guidelines/surfaces-shadow.html +2 -1
  274. package/guidelines/type-families.html +2 -1
  275. package/guidelines/type-lineheight.html +2 -1
  276. package/guidelines/type-scale.html +2 -1
  277. package/guidelines/type-weights.html +2 -1
  278. package/package.json +4 -2
  279. package/styles/components/manifest.json +156 -148
  280. package/styles.layered.css +492 -485
  281. package/styles.layered.provenance.json +17 -17
  282. package/templates/_vendor/deck-stage.js +3 -3
  283. package/templates/_vendor/doc-export.js +1 -1
  284. package/templates/_vendor/support.js +1 -1
  285. package/templates/ai-cluster-demo.html +2 -1
  286. package/templates/app-shell/AppShell.dc.html +2 -1
  287. package/templates/app-shell/support.js +1 -1
  288. package/templates/article/Article.dc.html +2 -1
  289. package/templates/article/support.js +1 -1
  290. package/templates/auth/Auth.dc.html +2 -1
  291. package/templates/auth/support.js +1 -1
  292. package/templates/bod-deck/BodDeck.dc.html +1 -0
  293. package/templates/bod-deck/support.js +1 -1
  294. package/templates/bod-investor-update/BodInvestorUpdate.dc.html +1 -0
  295. package/templates/bod-investor-update/support.js +1 -1
  296. package/templates/bod-memo/support.js +1 -1
  297. package/templates/bod-minutes/BodMinutes.dc.html +1 -0
  298. package/templates/bod-minutes/support.js +1 -1
  299. package/templates/bod-report/BodReport.dc.html +1 -0
  300. package/templates/bod-report/support.js +1 -1
  301. package/templates/bod-resolution/BodResolution.dc.html +1 -0
  302. package/templates/bod-resolution/support.js +1 -1
  303. package/templates/culture-event-invite/CultureEventInvite.dc.html +1 -0
  304. package/templates/culture-event-invite/support.js +1 -1
  305. package/templates/dashboard/Dashboard.dc.html +2 -1
  306. package/templates/dashboard/support.js +1 -1
  307. package/templates/delivery-change-note/DeliveryChangeNote.dc.html +1 -0
  308. package/templates/delivery-change-note/support.js +1 -1
  309. package/templates/delivery-kickoff/DeliveryKickoff.dc.html +1 -0
  310. package/templates/delivery-kickoff/support.js +1 -1
  311. package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +3 -2
  312. package/templates/delivery-qbr-deck/support.js +1 -1
  313. package/templates/delivery-runbook/DeliveryRunbook.dc.html +1 -0
  314. package/templates/delivery-runbook/support.js +1 -1
  315. package/templates/delivery-status-email/support.js +1 -1
  316. package/templates/doc-style-guide/DocStyleGuide.dc.html +1 -0
  317. package/templates/doc-style-guide/support.js +1 -1
  318. package/templates/doc-suite-index/DocSuiteIndex.dc.html +1 -0
  319. package/templates/doc-suite-index/support.js +1 -1
  320. package/templates/doc-templates/support.js +1 -1
  321. package/templates/email/Email-VN-standalone.html +2 -1
  322. package/templates/email/support.js +1 -1
  323. package/templates/email-safe/email-announcement.html +2 -1
  324. package/templates/email-safe/email-dunning.html +2 -1
  325. package/templates/email-safe/email-investor.html +2 -1
  326. package/templates/email-safe/email-launch.html +2 -1
  327. package/templates/email-safe/email-newsletter.html +2 -1
  328. package/templates/email-safe/email-status.html +2 -1
  329. package/templates/email-safe/email-transactional.html +2 -1
  330. package/templates/finance-dunning-email/support.js +1 -1
  331. package/templates/finance-expense-report/support.js +1 -1
  332. package/templates/finance-invoice/support.js +1 -1
  333. package/templates/finance-quote/support.js +1 -1
  334. package/templates/hr-announcement/support.js +1 -1
  335. package/templates/hr-interview-kit/HrInterviewKit.dc.html +1 -0
  336. package/templates/hr-interview-kit/support.js +1 -1
  337. package/templates/hr-offboarding/HrOffboarding.dc.html +1 -0
  338. package/templates/hr-offboarding/support.js +1 -1
  339. package/templates/hr-performance-review/HrPerformanceReview.dc.html +1 -0
  340. package/templates/hr-performance-review/support.js +1 -1
  341. package/templates/hr-pip/HrPip.dc.html +1 -0
  342. package/templates/hr-pip/support.js +1 -1
  343. package/templates/image-slots-demo.html +11 -9
  344. package/templates/kitchen-sink.html +8 -4
  345. package/templates/legal-msa/LegalMsa.dc.html +1 -0
  346. package/templates/legal-msa/support.js +1 -1
  347. package/templates/legal-sow/support.js +1 -1
  348. package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +1 -0
  349. package/templates/marketing-campaign-brief/support.js +1 -1
  350. package/templates/marketing-case-study/MarketingCaseStudy.dc.html +1 -0
  351. package/templates/marketing-case-study/support.js +1 -1
  352. package/templates/marketing-launch/support.js +1 -1
  353. package/templates/marketing-newsletter/support.js +1 -1
  354. package/templates/marketing-page/MarketingPage.dc.html +6 -3
  355. package/templates/marketing-page/support.js +1 -1
  356. package/templates/marketing-press-release/MarketingPressRelease.dc.html +2 -1
  357. package/templates/marketing-press-release/support.js +1 -1
  358. package/templates/marketing-social-kit/MarketingSocialKit.dc.html +1 -0
  359. package/templates/marketing-social-kit/support.js +1 -1
  360. package/templates/playground.html +9 -7
  361. package/templates/sales-one-pager/SalesOnePager.dc.html +1 -0
  362. package/templates/sales-one-pager/support.js +1 -1
  363. package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +1 -0
  364. package/templates/sales-proposal-deck/support.js +1 -1
  365. package/templates/settings/Settings.dc.html +2 -1
  366. package/templates/settings/support.js +1 -1
  367. package/templates/slide-deck/SlideDeck.dc.html +1 -0
  368. package/templates/slide-deck/support.js +1 -1
  369. package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +1 -0
  370. package/templates/team-meeting-agenda/support.js +1 -1
  371. package/templates/tech-incident-report/TechIncidentReport.dc.html +1 -0
  372. package/templates/tech-incident-report/support.js +1 -1
  373. package/templates/tech-release-notes/support.js +1 -1
  374. package/templates/tech-retro/TechRetro.dc.html +1 -0
  375. package/templates/tech-retro/support.js +1 -1
  376. package/templates/tech-rfc/TechRfc.dc.html +2 -1
  377. package/templates/tech-rfc/support.js +1 -1
  378. package/templates/vn-appointment-transfer/support.js +1 -1
  379. package/templates/vn-certificate-of-employment/support.js +1 -1
  380. package/templates/vn-code-of-conduct/support.js +1 -1
  381. package/templates/vn-compensation-regulation/support.js +1 -1
  382. package/templates/vn-contract-amendment/support.js +1 -1
  383. package/templates/vn-contractor-agreement/support.js +1 -1
  384. package/templates/vn-data-protection-policy/support.js +1 -1
  385. package/templates/vn-disciplinary-case-file/support.js +1 -1
  386. package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +1 -0
  387. package/templates/vn-disciplinary-schedule/support.js +1 -1
  388. package/templates/vn-employee-request/support.js +1 -1
  389. package/templates/vn-exit-handover/support.js +1 -1
  390. package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +1 -0
  391. package/templates/vn-foreign-employee-pack/support.js +1 -1
  392. package/templates/vn-framework-agreement/support.js +1 -1
  393. package/templates/vn-grassroots-democracy/support.js +1 -1
  394. package/templates/vn-infosec-policy/support.js +1 -1
  395. package/templates/vn-internal-labor-regulations/support.js +1 -1
  396. package/templates/vn-internship-agreement/support.js +1 -1
  397. package/templates/vn-job-description/support.js +1 -1
  398. package/templates/vn-labor-contract/support.js +1 -1
  399. package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +1 -0
  400. package/templates/vn-labour-management-book/support.js +1 -1
  401. package/templates/vn-mutual-nda/support.js +1 -1
  402. package/templates/vn-ndnca-ip/support.js +1 -1
  403. package/templates/vn-offer-letter/support.js +1 -1
  404. package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +1 -0
  405. package/templates/vn-onboarding-checklist/support.js +1 -1
  406. package/templates/vn-pdpl-consent/support.js +1 -1
  407. package/templates/vn-performance-evaluation-regulation/support.js +1 -1
  408. package/templates/vn-performance-review-form/support.js +1 -1
  409. package/templates/vn-phantom-stock/VnPhantomStock.dc.html +1 -0
  410. package/templates/vn-phantom-stock/support.js +1 -1
  411. package/templates/vn-probation-contract/support.js +1 -1
  412. package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +1 -0
  413. package/templates/vn-receipt-acknowledgement/support.js +1 -1
  414. package/templates/vn-remote-work-policy/support.js +1 -1
  415. package/templates/vn-resignation-letter/support.js +1 -1
  416. package/templates/vn-salary-scale/VnSalaryScale.dc.html +1 -0
  417. package/templates/vn-salary-scale/support.js +1 -1
  418. package/templates/vn-sow-appendix/support.js +1 -1
  419. package/templates/vn-termination-decision/support.js +1 -1
  420. package/templates/vn-total-rewards-appendix/support.js +1 -1
  421. package/templates/vn-training-commitment/support.js +1 -1
  422. package/templates/vn-travel-expense-policy/support.js +1 -1
  423. package/tokens/base-inventory.json +22 -22
  424. package/tokens/component-tokens.css +38 -38
  425. package/tokens/declarations.json +490 -490
  426. package/tokens/element-seeds.json +41 -39
  427. package/tokens/elements.css +381 -381
  428. package/tokens/modes/dark__default__comfortable__high.dtcg.json +1 -1
  429. package/tokens/modes/dark__default__comfortable__standard.dtcg.json +1 -1
  430. package/tokens/modes/dark__default__compact__high.dtcg.json +1 -1
  431. package/tokens/modes/dark__default__compact__standard.dtcg.json +1 -1
  432. package/tokens/modes/dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  433. package/tokens/modes/dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  434. package/tokens/modes/dark__hoa-lava__compact__high.dtcg.json +1 -1
  435. package/tokens/modes/dark__hoa-lava__compact__standard.dtcg.json +1 -1
  436. package/tokens/modes/dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  437. package/tokens/modes/dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  438. package/tokens/modes/dark__hoa-plasma__compact__high.dtcg.json +1 -1
  439. package/tokens/modes/dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  440. package/tokens/modes/dark__hoa__comfortable__high.dtcg.json +1 -1
  441. package/tokens/modes/dark__hoa__comfortable__standard.dtcg.json +1 -1
  442. package/tokens/modes/dark__hoa__compact__high.dtcg.json +1 -1
  443. package/tokens/modes/dark__hoa__compact__standard.dtcg.json +1 -1
  444. package/tokens/modes/dark__kim-steel__comfortable__high.dtcg.json +1 -1
  445. package/tokens/modes/dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  446. package/tokens/modes/dark__kim-steel__compact__high.dtcg.json +1 -1
  447. package/tokens/modes/dark__kim-steel__compact__standard.dtcg.json +1 -1
  448. package/tokens/modes/dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  449. package/tokens/modes/dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  450. package/tokens/modes/dark__kim-titanium__compact__high.dtcg.json +1 -1
  451. package/tokens/modes/dark__kim-titanium__compact__standard.dtcg.json +1 -1
  452. package/tokens/modes/dark__kim__comfortable__high.dtcg.json +1 -1
  453. package/tokens/modes/dark__kim__comfortable__standard.dtcg.json +1 -1
  454. package/tokens/modes/dark__kim__compact__high.dtcg.json +1 -1
  455. package/tokens/modes/dark__kim__compact__standard.dtcg.json +1 -1
  456. package/tokens/modes/dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  457. package/tokens/modes/dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  458. package/tokens/modes/dark__moc-bamboo__compact__high.dtcg.json +1 -1
  459. package/tokens/modes/dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  460. package/tokens/modes/dark__moc-forest__comfortable__high.dtcg.json +1 -1
  461. package/tokens/modes/dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  462. package/tokens/modes/dark__moc-forest__compact__high.dtcg.json +1 -1
  463. package/tokens/modes/dark__moc-forest__compact__standard.dtcg.json +1 -1
  464. package/tokens/modes/dark__moc__comfortable__high.dtcg.json +1 -1
  465. package/tokens/modes/dark__moc__comfortable__standard.dtcg.json +1 -1
  466. package/tokens/modes/dark__moc__compact__high.dtcg.json +1 -1
  467. package/tokens/modes/dark__moc__compact__standard.dtcg.json +1 -1
  468. package/tokens/modes/dark__tho-clay__comfortable__high.dtcg.json +1 -1
  469. package/tokens/modes/dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  470. package/tokens/modes/dark__tho-clay__compact__high.dtcg.json +1 -1
  471. package/tokens/modes/dark__tho-clay__compact__standard.dtcg.json +1 -1
  472. package/tokens/modes/dark__tho-sand__comfortable__high.dtcg.json +1 -1
  473. package/tokens/modes/dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  474. package/tokens/modes/dark__tho-sand__compact__high.dtcg.json +1 -1
  475. package/tokens/modes/dark__tho-sand__compact__standard.dtcg.json +1 -1
  476. package/tokens/modes/dark__tho__comfortable__high.dtcg.json +1 -1
  477. package/tokens/modes/dark__tho__comfortable__standard.dtcg.json +1 -1
  478. package/tokens/modes/dark__tho__compact__high.dtcg.json +1 -1
  479. package/tokens/modes/dark__tho__compact__standard.dtcg.json +1 -1
  480. package/tokens/modes/dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  481. package/tokens/modes/dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  482. package/tokens/modes/dark__thuy-mist__compact__high.dtcg.json +1 -1
  483. package/tokens/modes/dark__thuy-mist__compact__standard.dtcg.json +1 -1
  484. package/tokens/modes/dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  485. package/tokens/modes/dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  486. package/tokens/modes/dark__thuy-ocean__compact__high.dtcg.json +1 -1
  487. package/tokens/modes/dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  488. package/tokens/modes/dark__thuy__comfortable__high.dtcg.json +1 -1
  489. package/tokens/modes/dark__thuy__comfortable__standard.dtcg.json +1 -1
  490. package/tokens/modes/dark__thuy__compact__high.dtcg.json +1 -1
  491. package/tokens/modes/dark__thuy__compact__standard.dtcg.json +1 -1
  492. package/tokens/modes/index.json +2068 -2068
  493. package/tokens/modes/light__default__comfortable__high.dtcg.json +1 -1
  494. package/tokens/modes/light__default__comfortable__standard.dtcg.json +1 -1
  495. package/tokens/modes/light__default__compact__high.dtcg.json +1 -1
  496. package/tokens/modes/light__default__compact__standard.dtcg.json +1 -1
  497. package/tokens/modes/light__hoa-lava__comfortable__high.dtcg.json +1 -1
  498. package/tokens/modes/light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  499. package/tokens/modes/light__hoa-lava__compact__high.dtcg.json +1 -1
  500. package/tokens/modes/light__hoa-lava__compact__standard.dtcg.json +1 -1
  501. package/tokens/modes/light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  502. package/tokens/modes/light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  503. package/tokens/modes/light__hoa-plasma__compact__high.dtcg.json +1 -1
  504. package/tokens/modes/light__hoa-plasma__compact__standard.dtcg.json +1 -1
  505. package/tokens/modes/light__hoa__comfortable__high.dtcg.json +1 -1
  506. package/tokens/modes/light__hoa__comfortable__standard.dtcg.json +1 -1
  507. package/tokens/modes/light__hoa__compact__high.dtcg.json +1 -1
  508. package/tokens/modes/light__hoa__compact__standard.dtcg.json +1 -1
  509. package/tokens/modes/light__kim-steel__comfortable__high.dtcg.json +1 -1
  510. package/tokens/modes/light__kim-steel__comfortable__standard.dtcg.json +1 -1
  511. package/tokens/modes/light__kim-steel__compact__high.dtcg.json +1 -1
  512. package/tokens/modes/light__kim-steel__compact__standard.dtcg.json +1 -1
  513. package/tokens/modes/light__kim-titanium__comfortable__high.dtcg.json +1 -1
  514. package/tokens/modes/light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  515. package/tokens/modes/light__kim-titanium__compact__high.dtcg.json +1 -1
  516. package/tokens/modes/light__kim-titanium__compact__standard.dtcg.json +1 -1
  517. package/tokens/modes/light__kim__comfortable__high.dtcg.json +1 -1
  518. package/tokens/modes/light__kim__comfortable__standard.dtcg.json +1 -1
  519. package/tokens/modes/light__kim__compact__high.dtcg.json +1 -1
  520. package/tokens/modes/light__kim__compact__standard.dtcg.json +1 -1
  521. package/tokens/modes/light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  522. package/tokens/modes/light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  523. package/tokens/modes/light__moc-bamboo__compact__high.dtcg.json +1 -1
  524. package/tokens/modes/light__moc-bamboo__compact__standard.dtcg.json +1 -1
  525. package/tokens/modes/light__moc-forest__comfortable__high.dtcg.json +1 -1
  526. package/tokens/modes/light__moc-forest__comfortable__standard.dtcg.json +1 -1
  527. package/tokens/modes/light__moc-forest__compact__high.dtcg.json +1 -1
  528. package/tokens/modes/light__moc-forest__compact__standard.dtcg.json +1 -1
  529. package/tokens/modes/light__moc__comfortable__high.dtcg.json +1 -1
  530. package/tokens/modes/light__moc__comfortable__standard.dtcg.json +1 -1
  531. package/tokens/modes/light__moc__compact__high.dtcg.json +1 -1
  532. package/tokens/modes/light__moc__compact__standard.dtcg.json +1 -1
  533. package/tokens/modes/light__tho-clay__comfortable__high.dtcg.json +1 -1
  534. package/tokens/modes/light__tho-clay__comfortable__standard.dtcg.json +1 -1
  535. package/tokens/modes/light__tho-clay__compact__high.dtcg.json +1 -1
  536. package/tokens/modes/light__tho-clay__compact__standard.dtcg.json +1 -1
  537. package/tokens/modes/light__tho-sand__comfortable__high.dtcg.json +1 -1
  538. package/tokens/modes/light__tho-sand__comfortable__standard.dtcg.json +1 -1
  539. package/tokens/modes/light__tho-sand__compact__high.dtcg.json +1 -1
  540. package/tokens/modes/light__tho-sand__compact__standard.dtcg.json +1 -1
  541. package/tokens/modes/light__tho__comfortable__high.dtcg.json +1 -1
  542. package/tokens/modes/light__tho__comfortable__standard.dtcg.json +1 -1
  543. package/tokens/modes/light__tho__compact__high.dtcg.json +1 -1
  544. package/tokens/modes/light__tho__compact__standard.dtcg.json +1 -1
  545. package/tokens/modes/light__thuy-mist__comfortable__high.dtcg.json +1 -1
  546. package/tokens/modes/light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  547. package/tokens/modes/light__thuy-mist__compact__high.dtcg.json +1 -1
  548. package/tokens/modes/light__thuy-mist__compact__standard.dtcg.json +1 -1
  549. package/tokens/modes/light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  550. package/tokens/modes/light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  551. package/tokens/modes/light__thuy-ocean__compact__high.dtcg.json +1 -1
  552. package/tokens/modes/light__thuy-ocean__compact__standard.dtcg.json +1 -1
  553. package/tokens/modes/light__thuy__comfortable__high.dtcg.json +1 -1
  554. package/tokens/modes/light__thuy__comfortable__standard.dtcg.json +1 -1
  555. package/tokens/modes/light__thuy__compact__high.dtcg.json +1 -1
  556. package/tokens/modes/light__thuy__compact__standard.dtcg.json +1 -1
  557. package/tokens/modes/system-dark__default__comfortable__high.dtcg.json +1 -1
  558. package/tokens/modes/system-dark__default__comfortable__standard.dtcg.json +1 -1
  559. package/tokens/modes/system-dark__default__compact__high.dtcg.json +1 -1
  560. package/tokens/modes/system-dark__default__compact__standard.dtcg.json +1 -1
  561. package/tokens/modes/system-dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  562. package/tokens/modes/system-dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  563. package/tokens/modes/system-dark__hoa-lava__compact__high.dtcg.json +1 -1
  564. package/tokens/modes/system-dark__hoa-lava__compact__standard.dtcg.json +1 -1
  565. package/tokens/modes/system-dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  566. package/tokens/modes/system-dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  567. package/tokens/modes/system-dark__hoa-plasma__compact__high.dtcg.json +1 -1
  568. package/tokens/modes/system-dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  569. package/tokens/modes/system-dark__hoa__comfortable__high.dtcg.json +1 -1
  570. package/tokens/modes/system-dark__hoa__comfortable__standard.dtcg.json +1 -1
  571. package/tokens/modes/system-dark__hoa__compact__high.dtcg.json +1 -1
  572. package/tokens/modes/system-dark__hoa__compact__standard.dtcg.json +1 -1
  573. package/tokens/modes/system-dark__kim-steel__comfortable__high.dtcg.json +1 -1
  574. package/tokens/modes/system-dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  575. package/tokens/modes/system-dark__kim-steel__compact__high.dtcg.json +1 -1
  576. package/tokens/modes/system-dark__kim-steel__compact__standard.dtcg.json +1 -1
  577. package/tokens/modes/system-dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  578. package/tokens/modes/system-dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  579. package/tokens/modes/system-dark__kim-titanium__compact__high.dtcg.json +1 -1
  580. package/tokens/modes/system-dark__kim-titanium__compact__standard.dtcg.json +1 -1
  581. package/tokens/modes/system-dark__kim__comfortable__high.dtcg.json +1 -1
  582. package/tokens/modes/system-dark__kim__comfortable__standard.dtcg.json +1 -1
  583. package/tokens/modes/system-dark__kim__compact__high.dtcg.json +1 -1
  584. package/tokens/modes/system-dark__kim__compact__standard.dtcg.json +1 -1
  585. package/tokens/modes/system-dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  586. package/tokens/modes/system-dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  587. package/tokens/modes/system-dark__moc-bamboo__compact__high.dtcg.json +1 -1
  588. package/tokens/modes/system-dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  589. package/tokens/modes/system-dark__moc-forest__comfortable__high.dtcg.json +1 -1
  590. package/tokens/modes/system-dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  591. package/tokens/modes/system-dark__moc-forest__compact__high.dtcg.json +1 -1
  592. package/tokens/modes/system-dark__moc-forest__compact__standard.dtcg.json +1 -1
  593. package/tokens/modes/system-dark__moc__comfortable__high.dtcg.json +1 -1
  594. package/tokens/modes/system-dark__moc__comfortable__standard.dtcg.json +1 -1
  595. package/tokens/modes/system-dark__moc__compact__high.dtcg.json +1 -1
  596. package/tokens/modes/system-dark__moc__compact__standard.dtcg.json +1 -1
  597. package/tokens/modes/system-dark__tho-clay__comfortable__high.dtcg.json +1 -1
  598. package/tokens/modes/system-dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  599. package/tokens/modes/system-dark__tho-clay__compact__high.dtcg.json +1 -1
  600. package/tokens/modes/system-dark__tho-clay__compact__standard.dtcg.json +1 -1
  601. package/tokens/modes/system-dark__tho-sand__comfortable__high.dtcg.json +1 -1
  602. package/tokens/modes/system-dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  603. package/tokens/modes/system-dark__tho-sand__compact__high.dtcg.json +1 -1
  604. package/tokens/modes/system-dark__tho-sand__compact__standard.dtcg.json +1 -1
  605. package/tokens/modes/system-dark__tho__comfortable__high.dtcg.json +1 -1
  606. package/tokens/modes/system-dark__tho__comfortable__standard.dtcg.json +1 -1
  607. package/tokens/modes/system-dark__tho__compact__high.dtcg.json +1 -1
  608. package/tokens/modes/system-dark__tho__compact__standard.dtcg.json +1 -1
  609. package/tokens/modes/system-dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  610. package/tokens/modes/system-dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  611. package/tokens/modes/system-dark__thuy-mist__compact__high.dtcg.json +1 -1
  612. package/tokens/modes/system-dark__thuy-mist__compact__standard.dtcg.json +1 -1
  613. package/tokens/modes/system-dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  614. package/tokens/modes/system-dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  615. package/tokens/modes/system-dark__thuy-ocean__compact__high.dtcg.json +1 -1
  616. package/tokens/modes/system-dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  617. package/tokens/modes/system-dark__thuy__comfortable__high.dtcg.json +1 -1
  618. package/tokens/modes/system-dark__thuy__comfortable__standard.dtcg.json +1 -1
  619. package/tokens/modes/system-dark__thuy__compact__high.dtcg.json +1 -1
  620. package/tokens/modes/system-dark__thuy__compact__standard.dtcg.json +1 -1
  621. package/tokens/modes/system-light__default__comfortable__high.dtcg.json +1 -1
  622. package/tokens/modes/system-light__default__comfortable__standard.dtcg.json +1 -1
  623. package/tokens/modes/system-light__default__compact__high.dtcg.json +1 -1
  624. package/tokens/modes/system-light__default__compact__standard.dtcg.json +1 -1
  625. package/tokens/modes/system-light__hoa-lava__comfortable__high.dtcg.json +1 -1
  626. package/tokens/modes/system-light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  627. package/tokens/modes/system-light__hoa-lava__compact__high.dtcg.json +1 -1
  628. package/tokens/modes/system-light__hoa-lava__compact__standard.dtcg.json +1 -1
  629. package/tokens/modes/system-light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  630. package/tokens/modes/system-light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  631. package/tokens/modes/system-light__hoa-plasma__compact__high.dtcg.json +1 -1
  632. package/tokens/modes/system-light__hoa-plasma__compact__standard.dtcg.json +1 -1
  633. package/tokens/modes/system-light__hoa__comfortable__high.dtcg.json +1 -1
  634. package/tokens/modes/system-light__hoa__comfortable__standard.dtcg.json +1 -1
  635. package/tokens/modes/system-light__hoa__compact__high.dtcg.json +1 -1
  636. package/tokens/modes/system-light__hoa__compact__standard.dtcg.json +1 -1
  637. package/tokens/modes/system-light__kim-steel__comfortable__high.dtcg.json +1 -1
  638. package/tokens/modes/system-light__kim-steel__comfortable__standard.dtcg.json +1 -1
  639. package/tokens/modes/system-light__kim-steel__compact__high.dtcg.json +1 -1
  640. package/tokens/modes/system-light__kim-steel__compact__standard.dtcg.json +1 -1
  641. package/tokens/modes/system-light__kim-titanium__comfortable__high.dtcg.json +1 -1
  642. package/tokens/modes/system-light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  643. package/tokens/modes/system-light__kim-titanium__compact__high.dtcg.json +1 -1
  644. package/tokens/modes/system-light__kim-titanium__compact__standard.dtcg.json +1 -1
  645. package/tokens/modes/system-light__kim__comfortable__high.dtcg.json +1 -1
  646. package/tokens/modes/system-light__kim__comfortable__standard.dtcg.json +1 -1
  647. package/tokens/modes/system-light__kim__compact__high.dtcg.json +1 -1
  648. package/tokens/modes/system-light__kim__compact__standard.dtcg.json +1 -1
  649. package/tokens/modes/system-light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  650. package/tokens/modes/system-light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  651. package/tokens/modes/system-light__moc-bamboo__compact__high.dtcg.json +1 -1
  652. package/tokens/modes/system-light__moc-bamboo__compact__standard.dtcg.json +1 -1
  653. package/tokens/modes/system-light__moc-forest__comfortable__high.dtcg.json +1 -1
  654. package/tokens/modes/system-light__moc-forest__comfortable__standard.dtcg.json +1 -1
  655. package/tokens/modes/system-light__moc-forest__compact__high.dtcg.json +1 -1
  656. package/tokens/modes/system-light__moc-forest__compact__standard.dtcg.json +1 -1
  657. package/tokens/modes/system-light__moc__comfortable__high.dtcg.json +1 -1
  658. package/tokens/modes/system-light__moc__comfortable__standard.dtcg.json +1 -1
  659. package/tokens/modes/system-light__moc__compact__high.dtcg.json +1 -1
  660. package/tokens/modes/system-light__moc__compact__standard.dtcg.json +1 -1
  661. package/tokens/modes/system-light__tho-clay__comfortable__high.dtcg.json +1 -1
  662. package/tokens/modes/system-light__tho-clay__comfortable__standard.dtcg.json +1 -1
  663. package/tokens/modes/system-light__tho-clay__compact__high.dtcg.json +1 -1
  664. package/tokens/modes/system-light__tho-clay__compact__standard.dtcg.json +1 -1
  665. package/tokens/modes/system-light__tho-sand__comfortable__high.dtcg.json +1 -1
  666. package/tokens/modes/system-light__tho-sand__comfortable__standard.dtcg.json +1 -1
  667. package/tokens/modes/system-light__tho-sand__compact__high.dtcg.json +1 -1
  668. package/tokens/modes/system-light__tho-sand__compact__standard.dtcg.json +1 -1
  669. package/tokens/modes/system-light__tho__comfortable__high.dtcg.json +1 -1
  670. package/tokens/modes/system-light__tho__comfortable__standard.dtcg.json +1 -1
  671. package/tokens/modes/system-light__tho__compact__high.dtcg.json +1 -1
  672. package/tokens/modes/system-light__tho__compact__standard.dtcg.json +1 -1
  673. package/tokens/modes/system-light__thuy-mist__comfortable__high.dtcg.json +1 -1
  674. package/tokens/modes/system-light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  675. package/tokens/modes/system-light__thuy-mist__compact__high.dtcg.json +1 -1
  676. package/tokens/modes/system-light__thuy-mist__compact__standard.dtcg.json +1 -1
  677. package/tokens/modes/system-light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  678. package/tokens/modes/system-light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  679. package/tokens/modes/system-light__thuy-ocean__compact__high.dtcg.json +1 -1
  680. package/tokens/modes/system-light__thuy-ocean__compact__standard.dtcg.json +1 -1
  681. package/tokens/modes/system-light__thuy__comfortable__high.dtcg.json +1 -1
  682. package/tokens/modes/system-light__thuy__comfortable__standard.dtcg.json +1 -1
  683. package/tokens/modes/system-light__thuy__compact__high.dtcg.json +1 -1
  684. package/tokens/modes/system-light__thuy__compact__standard.dtcg.json +1 -1
  685. package/tokens/native/CSModes.kt +658 -615
  686. package/tokens/native/CSModes.swift +658 -615
  687. package/tokens/native/CSTokens.kt +311 -311
  688. package/tokens/native/CSTokens.swift +311 -311
  689. package/tokens/native/cs_modes.dart +658 -615
  690. package/tokens/native/cs_tokens.dart +311 -311
  691. package/tokens/native/mode-provenance.json +12 -12
  692. package/tokens/provenance.json +6 -6
  693. package/tokens/theme-attributes.css +40 -40
  694. package/tokens/tokens.dtcg.json +451 -394
  695. package/tokens/tokens.js +242 -242
  696. package/tokens/tokens.json +241 -241
  697. package/tokens/typography.css +6 -6
  698. package/tokens/variables.css +464 -464
  699. package/tokens/viewer.html +15 -11
  700. package/ui_kits/deck/index.html +4 -2
  701. package/ui_kits/status-hub/StatusHub.jsx +7 -7
  702. package/ui_kits/status-hub/data.js +3 -3
  703. package/ui_kits/status-hub/index.html +1 -0
  704. package/ui_kits/status-hub/login.html +8 -6
  705. package/ui_kits/status-hub/project.html +7 -6
  706. package/ui_kits/status-hub/settings.html +9 -8
  707. package/ui_kits/status-hub/status.css +10 -8
  708. package/ui_kits/website/Website.jsx +3 -3
  709. package/ui_kits/website/careers.html +24 -7
  710. package/ui_kits/website/chat.html +5 -2
  711. package/ui_kits/website/index.html +1 -0
  712. package/ui_kits/website/site.css +30 -6
  713. package/ui_kits/website/work.html +12 -7
  714. package/components/_utils/use-viewport-panel.js +0 -30
  715. package/dist/esm/chunks/chunk-CH4W6RCG.mjs.map +0 -7
  716. package/dist/esm/chunks/chunk-F3M5TQ76.mjs.map +0 -7
  717. package/dist/esm/chunks/chunk-GWBINWTF.mjs.map +0 -7
  718. package/dist/esm/chunks/chunk-IH4I7JSB.mjs.map +0 -7
  719. package/dist/esm/chunks/chunk-JN57OITY.mjs.map +0 -7
  720. package/dist/esm/chunks/chunk-UFE32JPH.mjs.map +0 -7
  721. /package/dist/esm/chunks/{chunk-FEUTSZBN.mjs.map → chunk-2CCVFTPL.mjs.map} +0 -0
  722. /package/dist/esm/chunks/{chunk-W5VR7GTL.mjs.map → chunk-2VVGZEOQ.mjs.map} +0 -0
  723. /package/dist/esm/chunks/{chunk-3RC4CDAE.mjs.map → chunk-3R5WJQCB.mjs.map} +0 -0
  724. /package/dist/esm/chunks/{chunk-W6N22NMF.mjs.map → chunk-4FGB6VHN.mjs.map} +0 -0
  725. /package/dist/esm/chunks/{chunk-YZR3C7V2.mjs.map → chunk-4TO35YGK.mjs.map} +0 -0
  726. /package/dist/esm/chunks/{chunk-JSAPFO73.mjs.map → chunk-4YWKKULF.mjs.map} +0 -0
  727. /package/dist/esm/chunks/{chunk-W2RF4NWB.mjs.map → chunk-5FQGNCKS.mjs.map} +0 -0
  728. /package/dist/esm/chunks/{chunk-SYCXNMYP.mjs.map → chunk-6ECKJ6RS.mjs.map} +0 -0
  729. /package/dist/esm/chunks/{chunk-72AUOI37.mjs.map → chunk-6TZDNLHE.mjs.map} +0 -0
  730. /package/dist/esm/chunks/{chunk-QGCPHFSI.mjs.map → chunk-72STPBL4.mjs.map} +0 -0
  731. /package/dist/esm/chunks/{chunk-37AN57S5.mjs.map → chunk-7GSR2NGL.mjs.map} +0 -0
  732. /package/dist/esm/chunks/{chunk-A3PGQW3X.mjs.map → chunk-AA5BSO3T.mjs.map} +0 -0
  733. /package/dist/esm/chunks/{chunk-NH6M42ZI.mjs.map → chunk-ASGO2FW5.mjs.map} +0 -0
  734. /package/dist/esm/chunks/{chunk-GP5ITSCH.mjs.map → chunk-C3NAMBA7.mjs.map} +0 -0
  735. /package/dist/esm/chunks/{chunk-YA7Y7PEC.mjs.map → chunk-CKBL3UEA.mjs.map} +0 -0
  736. /package/dist/esm/chunks/{chunk-H7EJ7TNP.mjs.map → chunk-CYZ22MB7.mjs.map} +0 -0
  737. /package/dist/esm/chunks/{chunk-JRIWHAWW.mjs.map → chunk-D7A4ZCMJ.mjs.map} +0 -0
  738. /package/dist/esm/chunks/{chunk-A7RWM4XH.mjs.map → chunk-DANUZS4S.mjs.map} +0 -0
  739. /package/dist/esm/chunks/{chunk-FAVSLU7E.mjs.map → chunk-DFBKBVSE.mjs.map} +0 -0
  740. /package/dist/esm/chunks/{chunk-TNHQB6CI.mjs.map → chunk-DW4AWLA5.mjs.map} +0 -0
  741. /package/dist/esm/chunks/{chunk-5R5KMLUR.mjs.map → chunk-DWJIX65T.mjs.map} +0 -0
  742. /package/dist/esm/chunks/{chunk-YJNSQ5PJ.mjs.map → chunk-EITZT2U5.mjs.map} +0 -0
  743. /package/dist/esm/chunks/{chunk-CSJHR2W2.mjs.map → chunk-EOCMQT4L.mjs.map} +0 -0
  744. /package/dist/esm/chunks/{chunk-4QBKN42N.mjs.map → chunk-EXOOST5G.mjs.map} +0 -0
  745. /package/dist/esm/chunks/{chunk-7HTAAMIY.mjs.map → chunk-FF5D53IP.mjs.map} +0 -0
  746. /package/dist/esm/chunks/{chunk-JNK7QN24.mjs.map → chunk-FOEJO2YQ.mjs.map} +0 -0
  747. /package/dist/esm/chunks/{chunk-HYQG5XND.mjs.map → chunk-GLPQBE2J.mjs.map} +0 -0
  748. /package/dist/esm/chunks/{chunk-HUW6OY7C.mjs.map → chunk-GNEVR5Q4.mjs.map} +0 -0
  749. /package/dist/esm/chunks/{chunk-SEYKDGXE.mjs.map → chunk-H4TKHAB3.mjs.map} +0 -0
  750. /package/dist/esm/chunks/{chunk-OR5UTKW7.mjs.map → chunk-I3H7EAH5.mjs.map} +0 -0
  751. /package/dist/esm/chunks/{chunk-P64YS5W2.mjs.map → chunk-I3PQVFX5.mjs.map} +0 -0
  752. /package/dist/esm/chunks/{chunk-5MR3C2QG.mjs.map → chunk-IOEWPBAL.mjs.map} +0 -0
  753. /package/dist/esm/chunks/{chunk-TN2MZXGS.mjs.map → chunk-JIHWIDMP.mjs.map} +0 -0
  754. /package/dist/esm/chunks/{chunk-YX62AV33.mjs.map → chunk-KAOUK33L.mjs.map} +0 -0
  755. /package/dist/esm/chunks/{chunk-UVJ5BBQG.mjs.map → chunk-KWPNHP73.mjs.map} +0 -0
  756. /package/dist/esm/chunks/{chunk-BABSYWVB.mjs.map → chunk-LCC4ZVVO.mjs.map} +0 -0
  757. /package/dist/esm/chunks/{chunk-HVF4NT6P.mjs.map → chunk-MRXEJSQQ.mjs.map} +0 -0
  758. /package/dist/esm/chunks/{chunk-DIIXA7WD.mjs.map → chunk-NZKMM4FK.mjs.map} +0 -0
  759. /package/dist/esm/chunks/{chunk-CLWTVJM3.mjs.map → chunk-OEWAQZYE.mjs.map} +0 -0
  760. /package/dist/esm/chunks/{chunk-OOZKMXYB.mjs.map → chunk-PBP2MKZH.mjs.map} +0 -0
  761. /package/dist/esm/chunks/{chunk-JKKJHQVQ.mjs.map → chunk-PE6KC2U7.mjs.map} +0 -0
  762. /package/dist/esm/chunks/{chunk-N5TM7UIY.mjs.map → chunk-PFTKXY5Q.mjs.map} +0 -0
  763. /package/dist/esm/chunks/{chunk-R7QVE2JP.mjs.map → chunk-PLN3ITUB.mjs.map} +0 -0
  764. /package/dist/esm/chunks/{chunk-NEMFYL4X.mjs.map → chunk-QBPDNM7S.mjs.map} +0 -0
  765. /package/dist/esm/chunks/{chunk-JDI3UMJW.mjs.map → chunk-SIMVM4RV.mjs.map} +0 -0
  766. /package/dist/esm/chunks/{chunk-WJF2Q2Y3.mjs.map → chunk-TMXLSCAG.mjs.map} +0 -0
  767. /package/dist/esm/chunks/{chunk-TGYG7JP4.mjs.map → chunk-TNQXCIBM.mjs.map} +0 -0
  768. /package/dist/esm/chunks/{chunk-DHTD5KM5.mjs.map → chunk-TWCJMLGG.mjs.map} +0 -0
  769. /package/dist/esm/chunks/{chunk-EPFDMHPK.mjs.map → chunk-U7RKPGRO.mjs.map} +0 -0
  770. /package/dist/esm/chunks/{chunk-NMIGE2IM.mjs.map → chunk-UWNMGKAN.mjs.map} +0 -0
  771. /package/dist/esm/chunks/{chunk-KXFGO7N4.mjs.map → chunk-VAPKJRQI.mjs.map} +0 -0
  772. /package/dist/esm/chunks/{chunk-XTBN55D3.mjs.map → chunk-VUCJT2QJ.mjs.map} +0 -0
  773. /package/dist/esm/chunks/{chunk-TVTBVHT2.mjs.map → chunk-WLANQTOU.mjs.map} +0 -0
  774. /package/dist/esm/chunks/{chunk-3MCNCG2L.mjs.map → chunk-XZ5NWMO7.mjs.map} +0 -0
  775. /package/dist/esm/chunks/{chunk-QPXQZBQC.mjs.map → chunk-YKU2KVAQ.mjs.map} +0 -0
  776. /package/dist/esm/chunks/{chunk-ZKFOGW4D.mjs.map → chunk-YLSFKG64.mjs.map} +0 -0
  777. /package/dist/esm/chunks/{chunk-TO2T6EEB.mjs.map → chunk-YVSAUCWW.mjs.map} +0 -0
  778. /package/dist/esm/chunks/{chunk-XN74VX5H.mjs.map → chunk-ZKBAIIAQ.mjs.map} +0 -0
  779. /package/dist/esm/chunks/{chunk-7IJTTRPK.mjs.map → chunk-ZPLENPV2.mjs.map} +0 -0
package/docs/viewer.html CHANGED
@@ -1,28 +1,25 @@
1
1
  <!DOCTYPE html>
2
- <html lang="vi"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>CyberSkill · Docs</title>
2
+ <html lang="vi"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Bilingual documentation viewer for CyberSkill Design System."><title>CyberSkill · Docs</title>
3
3
  <link rel="stylesheet" href="../styles.css">
4
4
  <style>
5
- *{box-sizing:border-box}html,body{height:100%}
5
+ *{box-sizing:border-box}html,body{height:100%;overflow-x:clip}
6
6
  body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);display:grid;grid-template-columns:min(230px,36vw) 1fr}
7
7
  aside{border-inline-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);overflow:auto;padding:14px 10px}
8
- aside h1{font-size:13px;font-weight:800;margin:2px 8px 6px;color:var(--cs-color-brand-umber)}
9
- [data-theme="dark"] aside h1{color:var(--cs-color-brand-ochre)}
8
+ aside h1{font-size:13px;font-weight:800;margin:2px 8px 6px;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
10
9
  .langtog{display:flex;gap:4px;margin:0 8px 10px}
11
10
  .langtog button{flex:1;font:700 11px/1 var(--cs-font-family-ui);letter-spacing:.04em;padding:7px 0;border-radius:8px;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised);color:var(--cs-color-text-muted);cursor:pointer}
12
- .langtog button.on{background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse);border-color:var(--cs-color-brand-umber)}
13
- [data-theme="dark"] .langtog button.on{background:var(--cs-color-brand-ochre);color:var(--cs-color-brand-umber);border-color:var(--cs-color-brand-ochre)}
14
- .langhint{font-size:10.5px;color:var(--cs-color-text-muted);margin:0 10px 8px;line-height:1.4}
11
+ .langtog button.on{background:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));color:var(--_cs-light,var(--cs-color-text-inverse)) var(--_cs-dark,var(--cs-color-brand-umber));border-color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
12
+ .langhint{font-size:12px;color:var(--cs-color-text-muted);margin:0 10px 8px;line-height:1.4}
15
13
  aside a{display:block;font-size:13px;font-weight:600;color:var(--cs-color-text-muted);text-decoration:none;padding:7px 10px;border-radius:8px}
16
14
  aside a:hover{color:var(--cs-color-text-primary);background:var(--cs-color-surface-raised)}
17
- aside a.on{color:var(--cs-color-brand-umber);background:var(--cs-color-surface-raised)}
18
- [data-theme="dark"] aside a.on{color:var(--cs-color-brand-ochre)}
19
- aside .grp{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--cs-color-text-muted);margin:14px 10px 5px}
15
+ aside a.on{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));background:var(--cs-color-surface-raised)}
16
+ aside .grp{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--cs-color-text-muted);margin:14px 10px 5px}
20
17
  #docsearch{box-sizing:border-box;border:1px solid var(--cs-color-border-default);border-radius:8px;background:var(--cs-color-surface-raised);padding:8px 10px;font:inherit;font-size:12.5px;margin:0 8px 10px;width:calc(100% - 16px)}
21
18
  .searchres{font-size:12px;color:var(--cs-color-text-muted);padding:0 10px 6px}
22
19
  .searchhit{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--cs-color-text-primary)}
23
20
  .searchhit:hover{background:var(--cs-color-surface-raised)}
24
- .searchhit b{color:var(--cs-color-brand-umber)}[data-theme="dark"] .searchhit b{color:var(--cs-color-brand-ochre)}
25
- .searchhit .snip{display:block;font-size:11px;color:var(--cs-color-text-muted);font-weight:400;margin-top:2px}
21
+ .searchhit b{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
22
+ .searchhit .snip{display:block;font-size:12px;color:var(--cs-color-text-muted);font-weight:400;margin-top:2px}
26
23
  mark{background:var(--cs-color-brand-ochre);color:var(--cs-color-brand-umber);border-radius:2px;padding:0 1px}
27
24
  main{overflow:auto;padding:30px 38px}
28
25
  article{max-width:820px;line-height:1.62;font-size:14.5px}
package/guidelines/atomic-view.html CHANGED
@@ -4,6 +4,7 @@
4
4
  <head>
5
5
  <meta charset="utf-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <meta name="description" content="Atomic View: Storybook-style browser — every component + variants, live across Theme × Element × Language × Style" />
7
8
  <title>CyberSkill — Atomic View</title>
8
9
  <link rel="stylesheet" href="../styles.css" />
9
10
  <style>
@@ -11,71 +12,74 @@
11
12
  body{margin:0;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-raised)}
12
13
  .app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
13
14
  /* --- chrome (always base brand, never reskinned) --- */
14
- .nav{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;border-inline-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);padding:16px 12px}
15
+ .nav{position:sticky;top:1px;align-self:start;height:100vh;overflow:auto;border-inline-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);padding:16px 12px}
15
16
  .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--cs-color-text-primary);padding:4px 8px 12px}
16
- .brand small{font-weight:600;font-size:10.5px;color:var(--cs-color-text-primary);opacity:.72;letter-spacing:.04em;text-transform:uppercase}
17
+ .brand small{font-weight:600;font-size:12px;color:var(--cs-color-text-primary);opacity:.72;letter-spacing:.04em;text-transform:uppercase}
17
18
  .navsearch{width:100%;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-page);padding:8px 10px;font:inherit;font-size:13px;margin-bottom:10px;color:var(--cs-color-text-primary)}
18
19
  .navsearch::placeholder{color:var(--cs-color-text-primary);opacity:.55}
19
20
  .navgroup{border-top:1px solid var(--cs-color-border-default);margin-top:6px;padding-top:2px}
20
21
  .navgroup:first-of-type{border-top:0;margin-top:0}
21
- .navtier{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font:800 11px/1.4 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-primary);padding:10px 8px 6px;background:none;border:0;cursor:pointer;text-align:start}
22
- .navtier:hover{color:var(--cs-color-brand-umber)}
23
- [data-theme="dark"] .navtier:hover{color:var(--cs-color-brand-ochre)}
24
- .navtier em,.navcount{font-style:normal;font-family:var(--cs-font-family-mono);font-size:10px;font-weight:700;color:var(--cs-color-text-inverse);background:var(--cs-color-brand-umber);padding:2px 6px;border-radius:999px;min-inline-size:1.4em;text-align:center}
25
- .navsub{font:800 10px/1.3 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.09em;color:var(--cs-color-brand-umber);padding:8px 8px 3px;margin-top:2px}
26
- [data-theme="dark"] .navsub{color:var(--cs-color-brand-ochre)}
27
- .navlink{display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-decoration:none;color:var(--cs-color-text-primary);font-size:13px;padding:5px 8px 5px 12px;border-radius:var(--cs-radius-sm)}
22
+ .navtier{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font:800 12px/1.4 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-primary);padding:10px 8px 6px;background:none;border:0;cursor:pointer;text-align:start}
23
+ .navtier:hover{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
24
+ .navtier em,.navcount{font-style:normal;font-family:var(--cs-font-family-mono);font-size:12px;font-weight:700;color:var(--_cs-light,var(--cs-color-text-inverse)) var(--_cs-dark,var(--cs-color-brand-umber));background:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));padding:2px 6px;border-radius:999px;min-inline-size:1.4em;text-align:center}
25
+ .navsub{font:800 12px/1.3 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.09em;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));padding:8px 8px 3px;margin-top:2px}
26
+ .navlink{display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-decoration:none;color:var(--cs-color-text-primary);font-size:13px;padding:5px 8px 5px 12px;border-radius:var(--cs-radius-sm);white-space:nowrap}
28
27
  .navlink:hover{background:var(--cs-color-surface-raised);color:var(--cs-color-text-primary)}
29
- .navlink .cat{flex:none;font:700 9.5px/1 var(--cs-font-family-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--cs-color-brand-umber);background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default);padding:3px 6px;border-radius:999px}
30
- [data-theme="dark"] .navlink .cat{color:var(--cs-color-brand-ochre);border-color:var(--cs-color-border-default)}
31
- .grphead{font:800 11px/1.3 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-brand-umber);margin:22px 0 6px}
32
- [data-theme="dark"] .grphead{color:var(--cs-color-brand-ochre)}
33
- .story .grp{font-size:11px;font-weight:700;color:var(--cs-color-brand-umber);background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default);padding:2px 7px;border-radius:999px}
34
- [data-theme="dark"] .story .grp{color:var(--cs-color-brand-ochre)}
28
+ .navlink .cat{flex:none;font:700 12px/1 var(--cs-font-family-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default);padding:3px 6px;border-radius:999px}
29
+ .grphead{font:800 12px/1.3 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));margin:22px 0 6px}
30
+ .story .grp{font-size:12px;font-weight:700;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default);padding:2px 7px;border-radius:999px}
35
31
  .motion-embed{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-color-surface-panel);margin:16px 0}
36
- .motion-embed iframe{width:100%;height:320px;border:0;display:block;background:var(--cs-color-surface-page)}
32
+ .motion-embed iframe{width:100%;height:352px;border:0;display:block;background:var(--cs-color-surface-page)}
37
33
  main{min-width:0}
38
- .toolbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:12px 22px;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);backdrop-filter:blur(8px);border-block-end:1px solid var(--cs-color-border-default)}
34
+ .toolbar{position:sticky;top:1px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:12px 22px;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);backdrop-filter:blur(8px);border-block-end:1px solid var(--cs-color-border-default)}
35
+ @media (prefers-reduced-transparency: reduce){.toolbar{backdrop-filter:none;background:var(--cs-color-surface-panel)}}
39
36
  .toolbar h1{font-size:15px;margin:0;letter-spacing:-.01em}
40
37
  .ctl{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--cs-color-text-muted)}
41
38
  .ctl select{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-sm);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
42
39
  .count{margin-inline-start:auto;font-size:12px;color:var(--cs-color-text-muted);font-family:var(--cs-font-family-mono)}
43
40
  /* --- canvas (reskinned by the axis attrs) --- */
44
- #canvas{background:var(--cs-color-surface-page);padding:8px 22px 60px;min-height:calc(100vh - 52px)}
45
- .tierhead{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:30px 0 4px;padding-top:10px;scroll-margin-top:64px}
46
- .tierhead .sub{display:block;font-size:12.5px;font-weight:500;color:var(--cs-color-text-muted);letter-spacing:0}
41
+ #canvas{background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);padding:8px 22px 60px;min-height:calc(100vh - 52px);max-width:1440px}
42
+ .tierhead{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:30px 0 4px;padding-top:10px;scroll-margin-top:64px}
43
+ .tierhead .sub{display:block;font-size:12.5px;font-weight:600;color:var(--cs-color-text-muted);letter-spacing:0}
47
44
  .story{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);background:var(--cs-color-surface-panel);margin:16px 0;overflow:hidden;scroll-margin-top:64px}
48
45
  .story>header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 16px;border-block-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)}
49
46
  .story h3{margin:0;font-size:14.5px;font-weight:700}
50
- .story .exp{margin-inline-start:auto;font-family:var(--cs-font-family-mono);font-size:10.5px;font-weight:600;color:var(--cs-color-text-primary);opacity:.72}
51
- .story .perma{text-decoration:none;color:var(--cs-color-text-muted);font-family:var(--cs-font-family-mono);font-size:12px;padding:0 4px;border-radius:4px}
52
- .story .perma:hover{color:var(--cs-color-brand-umber);background:var(--cs-color-surface-raised)}
47
+ .story .exp{margin-inline-start:auto;font-family:var(--cs-font-family-mono);font-size:12px;font-weight:600;color:var(--cs-color-text-primary);opacity:.72}
48
+ .story .perma{text-decoration:none;color:var(--cs-color-text-muted);font-family:var(--cs-font-family-mono);font-size:12px;padding:0 4px;border-radius:4px;white-space:nowrap}
49
+ .story .perma:hover{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));background:var(--cs-color-surface-raised)}
53
50
  .canvasbox{padding:20px 18px}
54
- .framed{position:relative;z-index:0;min-height:250px;overflow:hidden;background:var(--cs-color-surface-raised);border-radius:var(--cs-radius-md)}
51
+ .framed{position:relative;z-index:0;min-height:250px;overflow:hidden;padding-inline:12px;background:var(--cs-color-surface-raised);border-radius:var(--cs-radius-md)}
55
52
  .framed .cs-dialog-layer,.framed .cs-drawer-scrim,.framed .cs-drawer,.framed .cs-toast-stack,.framed .cs-popover-layer{position:absolute}
56
53
  .framed .cs-cmdk-scrim{position:static;inset:auto;background:transparent;padding:0;display:block;min-block-size:0}
57
54
  .framed .cs-cmdk{inline-size:100%;box-shadow:none;position:static;margin:0}
58
55
  .framed .cs-drawer-scrim,.framed .cs-drawer{animation:none}
59
56
  .framed .cs-dialog{top:22px}
60
- .srow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
57
+ .srow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
58
+ #canvas button:not(.cs-switch){min-block-size:32px;max-block-size:52px}
59
+ @media (max-width:768px),(min-width:1024px){:root,body,#canvas{--cs-font-weight-medium:600;--cs-font-weight-semibold:600;--cs-font-weight-extrabold:700}.brand,.navtier,.navsub,.grphead,.tierhead,.cs-stat__value{font-weight:700}.cs-combobox input,.cs-igroup>input,.cs-taginput>input,.cs-cal__grid button,.cs-datepicker__field,.cs-treeselect__field,.cs-cascader__opt,.cs-terminal__body,[style*="font-weight: 500"],[style*="font-weight:500"]{font-weight:600!important}[style*="font-weight: 800"],[style*="font-weight:800"]{font-weight:700!important}}
60
+ .srow .cs-slider{inline-size:160px;flex:none!important}
61
+ .srow button,.srow a,.cs-datagrid__sort,.cs-navmenu__top{white-space:nowrap}
62
+ .cs-datagrid thead th{inset-block-start:1px}
63
+ .cs-carousel{overflow:hidden}
64
+ .cs-carousel__slide+.cs-carousel__slide{display:none}
61
65
  .scol{display:grid;gap:14px}
62
66
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-items:start}
63
67
  .icells{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px}
64
68
  .icell{display:grid;place-items:center;gap:7px;padding:12px 4px;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-panel)}
65
- .icell span{font-family:var(--cs-font-family-mono);font-size:10.5px;color:var(--cs-color-text-muted)}
69
+ .icell span{font-family:var(--cs-font-family-mono);font-size:12px;color:var(--cs-color-text-muted)}
66
70
  .miss{color:var(--cs-color-semantic-danger-text);font-size:13px;font-family:var(--cs-font-family-mono)}
67
- .pglabel{font:700 10px/1 var(--cs-font-family-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-muted);margin-bottom:8px}
71
+ .pglabel{font:700 12px/1 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-muted);margin-bottom:8px}
68
72
  .controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:10px 12px;margin-bottom:14px;border:1px dashed var(--cs-color-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-raised)}
69
- .controls label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--cs-color-text-muted)}
73
+ .controls label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--cs-color-text-muted)}
70
74
  .controls select,.controls input[type=text]{font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--cs-color-border-default);border-radius:4px;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
71
75
  .cstage{padding:4px 0 16px;border-bottom:1px dashed var(--cs-color-border-default);margin-bottom:16px}
72
76
  .tpltier{display:grid;gap:16px}
73
77
  .tpl{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-color-surface-panel);scroll-margin-top:64px}
74
78
  .tpl>header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-block-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised);font-size:13px;font-weight:700}
75
- .tpl>header a{font:inherit;font-weight:600;font-size:11px;color:var(--cs-color-link);text-decoration:none}
79
+ .tpl>header a{font:inherit;font-weight:600;font-size:12px;color:var(--cs-color-link);text-decoration:none;white-space:nowrap}
76
80
  .tpl iframe{width:100%;height:470px;border:0;display:block;background:#fff}
77
81
  @media (pointer:coarse){.toolbar select{height:44px;min-height:44px;min-width:44px}}
78
- @media (max-width:820px){.app{grid-template-columns:1fr}.nav{display:none}.grid2{grid-template-columns:1fr}}
82
+ @media (max-width:960px){.app{grid-template-columns:1fr}.nav{display:none;position:static}.grid2{grid-template-columns:1fr}}
79
83
  </style>
80
84
  <script src="nav-model.cjs"></script>
81
85
  <script src="../_vendor/react/react.production.min.js"></script>
@@ -452,11 +456,12 @@ function applyAxis(ifr, ax){
452
456
  h.setAttribute("data-cs-density",ax.density||"comfortable");
453
457
  h.setAttribute("data-cs-contrast",ax.contrast||"standard");
454
458
  const w=ifr.contentWindow;
455
- if(ax.lang && w && w.__dcSetProps && w.__dcRootName){
459
+ if(w && w.__dcSetProps && w.__dcRootName){
456
460
  const r=w.__dcRootName&&w.__dcRootName();
457
461
  if(r){
458
- const language = ax.lang==="vi"?"Tiếng Việt":ax.lang==="ja"?"日本語":"English";
459
- w.__dcSetProps(r,{language});
462
+ const nextProps={theme:ax.theme||"light",element:ax.elm||"tho"};
463
+ if(ax.lang) nextProps.language=ax.lang==="vi"?"Tiếng Việt":ax.lang==="ja"?"日本語":"English";
464
+ w.__dcSetProps(r,nextProps);
460
465
  }
461
466
  }
462
467
  }catch(e){}
@@ -618,7 +623,7 @@ function App(){
618
623
  <div id="canvas" {...axis}>
619
624
  <div id="foundation-motion">
620
625
  <h2 className="tierhead">Foundations · Motion<span className="sub">Live easing tracks and duration chips — freezes under prefers-reduced-motion.</span></h2>
621
- <div className="motion-embed"><iframe src="motion.html" title="Motion specimen" loading="lazy"></iframe></div>
626
+ <div className="motion-embed"><iframe src="motion.html" title="Motion specimen" loading="lazy" onLoad={(e)=>{try{const d=e.currentTarget.contentDocument?.documentElement;if(d){if(axis["data-theme"])d.setAttribute("data-theme",axis["data-theme"]);else d.removeAttribute("data-theme");}}catch{}}} ref={(el)=>{try{const d=el?.contentDocument?.documentElement;if(d){if(axis["data-theme"])d.setAttribute("data-theme",axis["data-theme"]);else d.removeAttribute("data-theme");}}catch{}}}></iframe></div>
622
627
  </div>
623
628
  <div key={"lang-"+(lang||"def")+"-d-"+density+"-c-"+contrast}>
624
629
  {TIERS.map(t=>{
package/guidelines/brand-iconography.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!-- @dsCard group="Brand" viewport="720x360" name="Iconography" subtitle="In-repo line set (27) — currentColor · 1.75 stroke · round caps · 24×24 · sparkle is the wish glyph" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8">
3
+ <html lang="en"><head><meta name="description" content="Iconography: In-repo line set (27) — currentColor · 1.75 stroke · round caps · 24×24 · sparkle is the wish glyph" />
4
+ <meta charset="utf-8">
4
5
  <link rel="stylesheet" href="../styles.css">
5
6
  <style>
6
7
  body{margin:0;background:var(--cs-color-surface-page);padding:20px 24px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
@@ -15,41 +16,41 @@ svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-
15
16
  </head>
16
17
  <body>
17
18
  <div class="g">
18
- <div class="i"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"></path></svg><span class="n">close</span></div>
19
- <div class="i"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"></path></svg><span class="n">sun</span></div>
20
- <div class="i"><svg viewBox="0 0 24 24"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"></path></svg><span class="n">moon</span></div>
21
- <div class="i"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="n">arrow-right</span></div>
22
- <div class="i"><svg viewBox="0 0 24 24"><path d="M4 12.5l5 5 11-11"></path></svg><span class="n">check</span></div>
23
- <div class="i" style="color:var(--cs-color-text-accent)"><svg viewBox="0 0 24 24"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">sparkle</span></div>
24
- <div class="i"><svg viewBox="0 0 24 24"><path d="M4 5h16v11H8l-4 4z"></path></svg><span class="n">chat</span></div>
25
- <div class="i"><svg viewBox="0 0 24 24"><path d="M5 9v6h3l4 4V5L8 9z"></path><path d="M15 9.5a4 4 0 0 1 0 5M17.6 7a8 8 0 0 1 0 10"></path></svg><span class="n">sound-on</span></div>
26
- <div class="i"><svg viewBox="0 0 24 24"><path d="M5 9v6h3l4 4V5L8 9z"></path><path d="M16 9.5l4.5 5M20.5 9.5l-4.5 5"></path></svg><span class="n">sound-off</span></div>
27
- <div class="i"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.2-4.2"></path></svg><span class="n">search</span></div>
28
- <div class="i"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path><circle cx="9" cy="6" r="2"></circle><circle cx="15" cy="12" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg><span class="n">sliders</span></div>
29
- <div class="i"><svg viewBox="0 0 24 24"><path d="M12 15V4M7 8.5L12 4l5 4.5"></path><path d="M4 19h16"></path></svg><span class="n">upload</span></div>
30
- <div class="i"><svg viewBox="0 0 24 24"><path d="M12 4v11M7 10.5L12 15l5-4.5"></path><path d="M4 19h16"></path></svg><span class="n">download</span></div>
31
- <div class="i"><svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14" rx="2"></rect><path d="M4 10.5h16M8 3.5v4M16 3.5v4"></path></svg><span class="n">calendar</span></div>
32
- <div class="i"><svg viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.5"></circle><path d="M5 19.5c1.6-3.4 4-5 7-5s5.4 1.6 7 5"></path></svg><span class="n">user</span></div>
33
- <div class="i"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg><span class="n">plus</span></div>
34
- <div class="i"><svg viewBox="0 0 24 24"><path d="M5 7h14M9.5 7V4.5h5V7"></path><path d="M7 7l.8 12.5h8.4L17 7M10 11v5M14 11v5"></path></svg><span class="n">trash</span></div>
35
- <div class="i"><svg viewBox="0 0 24 24"><path d="M14 4h6v6M20 4l-8 8"></path><path d="M18 13v6H5V6h6"></path></svg><span class="n">external</span></div>
36
- <div class="i"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"></path></svg><span class="n">menu</span></div>
37
- <div class="i"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg><span class="n">chevron-down</span></div>
38
- <div class="i"><svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6"></path></svg><span class="n">chevron-up</span></div>
39
- <div class="i"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"></path></svg><span class="n">chevron-left</span></div>
40
- <div class="i"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg><span class="n">chevron-right</span></div>
41
- <div class="i"><svg viewBox="0 0 24 24"><path d="M4 20h4L18.5 9.5a2.12 2.12 0 0 0-3-3L5 17z"></path><path d="M13.5 6.5l3 3"></path></svg><span class="n">edit</span></div>
42
- <div class="i"><svg viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2"></rect><path d="M4 16V6a2 2 0 0 1 2-2h10"></path></svg><span class="n">copy</span></div>
43
- <div class="i"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v5M12 7.75v.01"></path></svg><span class="n">info</span></div>
44
- <div class="i"><svg viewBox="0 0 24 24"><path d="M12 3.5l9 16H3z"></path><path d="M12 10v4M12 17.5v.01"></path></svg><span class="n">alert-triangle</span></div>
45
- <div class="i" style="border-style:dashed;color:var(--cs-color-text-muted)"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg><span class="n">yours</span></div>
19
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg><span class="n">close</span></div>
20
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"></path></svg><span class="n">sun</span></div>
21
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"></path></svg><span class="n">moon</span></div>
22
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="n">arrow-right</span></div>
23
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12.5l5 5 11-11"></path></svg><span class="n">check</span></div>
24
+ <div class="i" style="color:var(--cs-color-text-accent)"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">sparkle</span></div>
25
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v11H8l-4 4z"></path></svg><span class="n">chat</span></div>
26
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 9v6h3l4 4V5L8 9z"></path><path d="M15 9.5a4 4 0 0 1 0 5M17.6 7a8 8 0 0 1 0 10"></path></svg><span class="n">sound-on</span></div>
27
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 9v6h3l4 4V5L8 9z"></path><path d="M16 9.5l4.5 5M20.5 9.5l-4.5 5"></path></svg><span class="n">sound-off</span></div>
28
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.2-4.2"></path></svg><span class="n">search</span></div>
29
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"></path><circle cx="9" cy="6" r="2"></circle><circle cx="15" cy="12" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg><span class="n">sliders</span></div>
30
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15V4M7 8.5L12 4l5 4.5"></path><path d="M4 19h16"></path></svg><span class="n">upload</span></div>
31
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10.5L12 15l5-4.5"></path><path d="M4 19h16"></path></svg><span class="n">download</span></div>
32
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="6" width="16" height="14" rx="2"></rect><path d="M4 10.5h16M8 3.5v4M16 3.5v4"></path></svg><span class="n">calendar</span></div>
33
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.5" r="3.5"></circle><path d="M5 19.5c1.6-3.4 4-5 7-5s5.4 1.6 7 5"></path></svg><span class="n">user</span></div>
34
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg><span class="n">plus</span></div>
35
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h14M9.5 7V4.5h5V7"></path><path d="M7 7l.8 12.5h8.4L17 7M10 11v5M14 11v5"></path></svg><span class="n">trash</span></div>
36
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h6v6M20 4l-8 8"></path><path d="M18 13v6H5V6h6"></path></svg><span class="n">external</span></div>
37
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"></path></svg><span class="n">menu</span></div>
38
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg><span class="n">chevron-down</span></div>
39
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 15l6-6 6 6"></path></svg><span class="n">chevron-up</span></div>
40
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"></path></svg><span class="n">chevron-left</span></div>
41
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"></path></svg><span class="n">chevron-right</span></div>
42
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L18.5 9.5a2.12 2.12 0 0 0-3-3L5 17z"></path><path d="M13.5 6.5l3 3"></path></svg><span class="n">edit</span></div>
43
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"></rect><path d="M4 16V6a2 2 0 0 1 2-2h10"></path></svg><span class="n">copy</span></div>
44
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v5M12 7.75v.01"></path></svg><span class="n">info</span></div>
45
+ <div class="i"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.5l9 16H3z"></path><path d="M12 10v4M12 17.5v.01"></path></svg><span class="n">alert-triangle</span></div>
46
+ <div class="i" style="border-style:dashed;color:var(--cs-color-text-muted)"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg><span class="n">yours</span></div>
46
47
  </div>
47
48
  <div style="display:flex;gap:22px;align-items:flex-end;margin-top:14px">
48
49
  <span style="color:var(--cs-color-text-muted);font-size:12px;max-width:400px;line-height:1.5">Icons are data rendered by one <b>&lt;Icon&gt;</b>; they follow the surrounding text color. Original 9 + a v2.0 extension of 10 + a v2.13 extension of 8 (chevrons, edit, copy, info, alert-triangle) in the same grammar. No external library, no emoji, no filled glyphs (only the Logo and Lumi are filled artwork).</span>
49
50
  <span style="margin-left:auto;display:flex;gap:14px;align-items:flex-end;color:var(--cs-color-text-muted)">
50
- <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:16px;height:16px"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">sm 16</span></span>
51
- <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:20px;height:20px"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">md 20</span></span>
52
- <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">lg 24</span></span>
51
+ <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:16px;height:16px" aria-hidden="true"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">sm 16</span></span>
52
+ <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:20px;height:20px" aria-hidden="true"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">md 20</span></span>
53
+ <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:24px;height:24px" aria-hidden="true"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">lg 24</span></span>
53
54
  </span>
54
55
  </div>
55
56
  </body></html>
package/guidelines/brand-imagery.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!-- @dsCard group="Brand" viewport="700x260" name="Imagery & mascot" subtitle="Warm gold particle light · Lumi the golden genie" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8" />
3
+ <html lang="en"><head><meta name="description" content="Imagery & mascot: Warm gold particle light · Lumi the golden genie" />
4
+ <meta charset="utf-8" />
4
5
  <link rel="stylesheet" href="../styles.css" />
5
6
  <style>
6
7
  body { margin: 0; font-family: var(--cs-font-family-ui); }
package/guidelines/brand-interaction.html CHANGED
@@ -1,13 +1,14 @@
1
1
  <!-- @dsCard group="Brand" viewport="700x200" name="Interaction states" subtitle="Hover brighten · press nudge · composite focus indicator" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8" />
3
+ <html lang="en"><head><meta name="description" content="Interaction states: Hover brighten · press nudge · composite focus indicator" />
4
+ <meta charset="utf-8" />
4
5
  <link rel="stylesheet" href="../styles.css" />
5
6
  <style>
6
7
  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
7
8
  .row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
8
9
  .item { text-align: center; }
9
10
  .l { font-size: 12px; color: var(--cs-color-text-muted); margin-top: 8px; }
10
- .b { font: 700 15px/1 var(--cs-font-family-ui); background: var(--cs-component-button-primary-bg); color: #fff; border: 1px solid transparent; border-radius: var(--cs-radius-md); padding: 12px 20px; }
11
+ .b { font: 700 15px/1 var(--cs-font-family-ui); background: var(--cs-color-brand-umber); color: #fff; border: 1px solid transparent; border-radius: var(--cs-radius-md); padding: 12px 20px; }
11
12
  .b.hover { filter: brightness(1.08); }
12
13
  .b.press { transform: translateY(1px); filter: brightness(1.05); }
13
14
  .b.focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
package/guidelines/brand-voice.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!-- @dsCard group="Brand" viewport="700x260" name="Slogan & voice" subtitle="Turn Your Will Into Real · warm/direct/honest/respectful" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8" />
3
+ <html lang="en"><head><meta name="description" content="Slogan & voice: Turn Your Will Into Real · warm/direct/honest/respectful" />
4
+ <meta charset="utf-8" />
4
5
  <link rel="stylesheet" href="../styles.css" />
5
6
  <style>
6
7
  body { margin: 0; font-family: var(--cs-font-family-ui); }
package/guidelines/colors-anchors.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!-- @dsCard group="Colors" viewport="700x210" name="Brand anchors" subtitle="Umber + Ochre — immutable" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8" />
3
+ <html lang="en"><head><meta name="description" content="Brand anchors: Umber + Ochre — immutable" />
4
+ <meta charset="utf-8" />
4
5
  <link rel="stylesheet" href="../styles.css" />
5
6
  <style>
6
7
  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
package/guidelines/colors-semantic.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!-- @dsCard group="Colors" viewport="700x170" name="Semantic" subtitle="Separate status fills, paired foregrounds and text" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8" />
3
+ <html lang="en"><head><meta name="description" content="Semantic: Separate status fills, paired foregrounds and text" />
4
+ <meta charset="utf-8" />
4
5
  <link rel="stylesheet" href="../styles.css" />
5
6
  <style>
6
7
  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
package/guidelines/colors-surfaces.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!-- @dsCard group="Colors" viewport="700x180" name="Surfaces" subtitle="Warm paper → panel → raised" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8" />
3
+ <html lang="en"><head><meta name="description" content="Surfaces: Warm paper → panel → raised" />
4
+ <meta charset="utf-8" />
4
5
  <link rel="stylesheet" href="../styles.css" />
5
6
  <style>
6
7
  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
package/guidelines/colors-text.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!-- @dsCard group="Colors" viewport="700x180" name="Text colours" subtitle="Primary, muted, accent, inverse" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8" />
3
+ <html lang="en"><head><meta name="description" content="Text colours: Primary, muted, accent, inverse" />
4
+ <meta charset="utf-8" />
4
5
  <link rel="stylesheet" href="../styles.css" />
5
6
  <style>
6
7
  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
package/guidelines/documents.html CHANGED
@@ -1,12 +1,13 @@
1
1
  <!-- @dsCard group="Documents" viewport="1280x560" name="Document system" subtitle="3 reference docs govern every template · A4 VN-first · Ink/Slate pairs · umber table bars · yellow fill-ins · blank Party B · non-splitting signing blocks" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8">
3
+ <html lang="en"><head><meta name="description" content="Document system: 3 reference docs govern every template · A4 VN-first · Ink/Slate pairs · umber table bars · yellow fill-ins · blank Party B · non-splitting signing blocks" />
4
+ <meta charset="utf-8">
4
5
  <link rel="stylesheet" href="../styles.css">
5
6
  <style>
6
7
  body{margin:0;background:var(--cs-color-surface-page);padding:26px 30px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
8
  .h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-muted);margin:0 0 12px}
8
9
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
9
- .doc{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);overflow:hidden;box-shadow:var(--cs-shadow-sm)}
10
+ .doc{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);overflow:hidden;box-shadow:var(--cs-shadow-xs)}
10
11
  .doc .bar{background:var(--cs-color-brand-umber);color:#fff;padding:10px 14px}
11
12
  .doc .bar b{font-size:14px;font-weight:800}
12
13
  .doc .bar .vn{font-size:11px;color:var(--cs-color-brand-ochre);margin-top:1px}
package/guidelines/elements-components.html CHANGED
@@ -1,14 +1,15 @@
1
1
  <!-- @dsCard group="Elements" viewport="1280x420" name="Components under each element" subtitle="Same markup, five identities — CTAs, labels, badges, progress, links all follow --cs-accent-* automatically" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8">
3
+ <html lang="en"><head><meta name="description" content="Components under each element: Same markup, five identities — CTAs, labels, badges, progress, links all follow --cs-accent-* automatically" />
4
+ <meta charset="utf-8">
4
5
  <link rel="stylesheet" href="../styles.css">
5
6
  <style>
6
- body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:420px;overflow:hidden;box-sizing:border-box;padding:28px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
+ body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:420px;overflow:clip;box-sizing:border-box;padding:28px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
8
  .col{border:1px solid #E7D9C6;border-radius:12px;background:#fff;padding:14px;display:grid;gap:10px;align-content:start}
8
9
  .el{font-weight:800;font-size:14px}
9
10
  .cta{display:inline-flex;align-items:center;justify-content:center;background:var(--cs-accent-bright);color:var(--cs-accent-ink);font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:999px}
10
11
  .lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;color:var(--cs-color-text-accent)}
11
- .badge{display:inline-block;background:var(--cs-accent-tint);color:var(--cs-color-text-accent);font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;width:fit-content}
12
+ .badge{display:inline-block;background:var(--_cs-light,var(--cs-accent-tint)) var(--_cs-dark,color-mix(in oklab,var(--cs-accent) 22%,var(--cs-color-surface-panel)));color:var(--_cs-light,var(--cs-color-text-accent)) var(--_cs-dark,var(--cs-accent-bright));font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;width:fit-content}
12
13
  .bar{height:8px;border-radius:99px;background:#FBF4E9;overflow:hidden}
13
14
  .bar span{display:block;height:100%;width:64%;background:var(--cs-accent);border-radius:99px}
14
15
  .dark{background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);border-radius:9px;padding:10px 12px;font-size:12px}
package/guidelines/elements-concept.html CHANGED
@@ -1,8 +1,9 @@
1
1
  <!-- @dsCard group="Elements" viewport="1280x660" name="Ngũ Hành — elemental identity" subtitle="v1 shipped — tokens/elements.css · --cs-accent-* contract · data-cs-element scopes · mixing per Tương sinh" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="../styles.css">
3
+ <html lang="en"><head><meta name="description" content="Ngũ Hành — elemental identity: v1 shipped — tokens/elements.css · --cs-accent-* contract · data-cs-element scopes · mixing per Tương sinh" />
4
+ <meta charset="utf-8"><link rel="stylesheet" href="../styles.css">
4
5
  <style>
5
- body{margin:0;background:var(--cs-color-surface-page);font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);width:1280px;height:660px;overflow:hidden;box-sizing:border-box;padding:36px 44px}
6
+ body{margin:0;background:var(--cs-color-surface-page);font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);width:1280px;height:660px;overflow:clip;box-sizing:border-box;padding:36px 44px}
6
7
  .el{border:1px solid var(--cs-color-border-default);border-radius:14px;overflow:hidden;background:var(--cs-color-surface-panel);display:flex;flex-direction:column}
7
8
  .chip{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;padding:8px 14px;border-radius:999px}
8
9
  .sw{height:26px}
package/guidelines/elements-geometry.html CHANGED
@@ -1,14 +1,15 @@
1
1
  <!-- @dsCard group="Elements" viewport="1280x720" name="Geometry · 30 sets" subtitle="Soft / middle / deep × light/dark — shared intensity · hue-locked themes" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8">
3
+ <html lang="en"><head><meta name="description" content="Geometry · 30 sets: Soft / middle / deep × light/dark — shared intensity · hue-locked themes" />
4
+ <meta charset="utf-8">
4
5
  <link rel="stylesheet" href="../styles.css">
5
6
  <style>
6
- body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:720px;overflow:hidden;box-sizing:border-box;padding:22px 28px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
+ body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:720px;overflow:clip;box-sizing:border-box;padding:22px 28px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
8
  h1{font-size:18px;margin:0 0 4px;font-weight:800;letter-spacing:-0.01em}
8
9
  .sub{font-size:12px;color:var(--cs-color-text-muted);margin:0 0 14px}
9
10
  .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
10
11
  .el{font-weight:800;font-size:12px;margin-bottom:6px}
11
- .card{border:1px solid var(--cs-color-border-default);border-radius:10px;overflow:hidden;background:var(--cs-color-surface-panel)}
12
+ .card{border:1px solid var(--cs-color-border-default);border-radius:10px;overflow:hidden;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
12
13
  .row{display:grid;grid-template-columns:1fr 1fr;min-height:88px}
13
14
  .cell{padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
14
15
  .cell.dark{background:#221710;color:#f5ead9}
package/guidelines/elements-variants.html CHANGED
@@ -1,10 +1,11 @@
1
1
  <!-- @dsCard group="Elements" viewport="1280x560" name="Variants & washes" subtitle="Soft / middle / deep names · aurora washes · live packs from element-seeds (see Geometry · 30 sets)" -->
2
2
  <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8">
3
+ <html lang="en"><head><meta name="description" content="Variants & washes: Soft / middle / deep names · aurora washes · live packs from element-seeds (see Geometry · 30 sets)" />
4
+ <meta charset="utf-8">
4
5
  <link rel="stylesheet" href="../styles.css">
5
6
  <style>
6
- body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:560px;overflow:hidden;box-sizing:border-box;padding:30px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
- .col{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);padding:14px 14px 12px}
7
+ body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:560px;overflow:clip;box-sizing:border-box;padding:30px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
8
+ .col{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);padding:14px 14px 12px}
8
9
  .el{font-weight:800;font-size:15px;margin-bottom:10px}
9
10
  .v{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--cs-color-border-default)}
10
11
  .sw{width:26px;height:26px;border-radius:8px;flex:none}
@@ -22,25 +23,25 @@ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
22
23
  <body>
23
24
  <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px">
24
25
  <div class="col"><div class="el">Mộc · Wood</div>
25
- <div class="v"><span class="sw" style="background:#ADD386"></span><div><div class="vn">leaf ·middle</div><div class="vx">#ADD386</div></div></div>
26
- <div class="v"><span class="sw" style="background:#C7E2AC"></span><div><div class="vn">bamboo</div><div class="vx">#C7E2AC</div></div></div>
27
- <div class="v"><span class="sw" style="background:#668643"></span><div><div class="vn">forest</div><div class="vx">#668643</div></div></div></div>
26
+ <div class="v"><span class="sw" style="background:#82CF66"></span><div><div class="vn">leaf ·middle</div><div class="vx">#82CF66</div></div></div>
27
+ <div class="v"><span class="sw" style="background:#DAEFAA"></span><div><div class="vn">bamboo</div><div class="vx">#DAEFAA</div></div></div>
28
+ <div class="v"><span class="sw" style="background:#105C36"></span><div><div class="vn">forest</div><div class="vx">#105C36</div></div></div></div>
28
29
  <div class="col"><div class="el">Hỏa · Fire</div>
29
- <div class="v"><span class="sw" style="background:#FFAD8E"></span><div><div class="vn">ember ·middle</div><div class="vx">#FFAD8E</div></div></div>
30
- <div class="v"><span class="sw" style="background:#BB5A32"></span><div><div class="vn">lava</div><div class="vx">#BB5A32</div></div></div>
31
- <div class="v"><span class="sw" style="background:#FFC7CC"></span><div><div class="vn">plasma</div><div class="vx">#FFC7CC</div></div></div></div>
30
+ <div class="v"><span class="sw" style="background:#FC9C69"></span><div><div class="vn">ember ·middle</div><div class="vx">#FC9C69</div></div></div>
31
+ <div class="v"><span class="sw" style="background:#93050F"></span><div><div class="vn">lava</div><div class="vx">#93050F</div></div></div>
32
+ <div class="v"><span class="sw" style="background:#FEDBDC"></span><div><div class="vn">plasma</div><div class="vx">#FEDBDC</div></div></div></div>
32
33
  <div class="col" style="outline:2px solid var(--cs-color-brand-ochre);outline-offset:2px"><div class="el">Thổ · Earth</div>
33
34
  <div class="v"><span class="sw" style="background:#F4BA17"></span><div><div class="vn">ochre ·middle</div><div class="vx">#F4BA17</div></div></div>
34
- <div class="v"><span class="sw" style="background:#98741A"></span><div><div class="vn">clay</div><div class="vx">#98741A</div></div></div>
35
- <div class="v"><span class="sw" style="background:#F6D389"></span><div><div class="vn">sand</div><div class="vx">#F6D389</div></div></div></div>
35
+ <div class="v"><span class="sw" style="background:#723E06"></span><div><div class="vn">clay</div><div class="vx">#723E06</div></div></div>
36
+ <div class="v"><span class="sw" style="background:#F9E3A7"></span><div><div class="vn">sand</div><div class="vx">#F9E3A7</div></div></div></div>
36
37
  <div class="col"><div class="el">Kim · Metal</div>
37
- <div class="v"><span class="sw" style="background:#D1C2A8"></span><div><div class="vn">champagne ·middle</div><div class="vx">#D1C2A8</div></div></div>
38
- <div class="v"><span class="sw" style="background:#707D7E"></span><div><div class="vn">steel</div><div class="vx">#707D7E</div></div></div>
39
- <div class="v"><span class="sw" style="background:#E1D6C3"></span><div><div class="vn">titanium</div><div class="vx">#E1D6C3</div></div></div></div>
38
+ <div class="v"><span class="sw" style="background:#C4B78F"></span><div><div class="vn">champagne ·middle</div><div class="vx">#C4B78F</div></div></div>
39
+ <div class="v"><span class="sw" style="background:#384D72"></span><div><div class="vn">steel</div><div class="vx">#384D72</div></div></div>
40
+ <div class="v"><span class="sw" style="background:#D3E7FC"></span><div><div class="vn">titanium</div><div class="vx">#D3E7FC</div></div></div></div>
40
41
  <div class="col"><div class="el">Thủy · Water</div>
41
- <div class="v"><span class="sw" style="background:#87D2E1"></span><div><div class="vn">river ·middle</div><div class="vx">#87D2E1</div></div></div>
42
- <div class="v"><span class="sw" style="background:#428693"></span><div><div class="vn">ocean</div><div class="vx">#428693</div></div></div>
43
- <div class="v"><span class="sw" style="background:#AEE2ED"></span><div><div class="vn">mist</div><div class="vx">#AEE2ED</div></div></div></div>
42
+ <div class="v"><span class="sw" style="background:#00CEE4"></span><div><div class="vn">river ·middle</div><div class="vx">#00CEE4</div></div></div>
43
+ <div class="v"><span class="sw" style="background:#06556F"></span><div><div class="vn">ocean</div><div class="vx">#06556F</div></div></div>
44
+ <div class="v"><span class="sw" style="background:#9DF7F5"></span><div><div class="vn">mist</div><div class="vx">#9DF7F5</div></div></div></div>
44
45
  </div>
45
46
  <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px">
46
47
  <div class="wash"><img src="../assets/aurora-moc.webp" alt="Mộc aurora wash"><span class="wl">Mộc</span></div>