@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/tokens/viewer.html CHANGED
@@ -3,14 +3,15 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="description" content="Interactive W3C DTCG and CSS design token explorer for CyberSkill.">
6
7
  <title>CyberSkill · Tokens</title>
7
8
  <link rel="stylesheet" href="../styles.css">
8
9
  <style>
9
- *{box-sizing:border-box}html,body{height:100%}
10
- body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);display:flex;flex-direction:column}
10
+ *{box-sizing:border-box}html,body{height:100%;overflow-x:clip}
11
+ button,input,select{min-block-size:32px}
12
+ body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);display:flex;flex-direction:column;overflow-x:clip}
11
13
  .bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;background:var(--cs-color-surface-panel);border-block-end:1px solid var(--cs-color-border-default)}
12
- .bar h1{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em}
13
- .bar h1 b{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
14
+ .bar h1{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
14
15
  .modes{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default)}
15
16
  .modes button{appearance:none;border:0;background:transparent;font:600 12.5px var(--cs-font-family-ui);padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--cs-color-text-primary)}
16
17
  .modes button[aria-pressed="true"]{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))}
@@ -19,20 +20,21 @@
19
20
  .filters input{width:min(220px,40vw)}
20
21
  .meta{font:12px/1.4 var(--cs-font-family-mono);font-weight:600;color:var(--cs-color-text-primary)}
21
22
  .chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;background:var(--cs-color-surface-panel);border-block-end:1px solid var(--cs-color-border-default)}
22
- .chips button{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);font:600 11.5px var(--cs-font-family-ui);padding:5px 10px;border-radius:999px;cursor:pointer}
23
+ .chips button{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);font:600 12px var(--cs-font-family-ui);padding:5px 10px;border-radius:999px;cursor:pointer}
23
24
  .chips button[aria-pressed="true"]{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))}
24
- .chips button .n{font-family:var(--cs-font-family-mono);font-size:10px;opacity:.85;margin-inline-start:4px}
25
- .panel{flex:1;min-height:0;overflow:auto}
25
+ .chips :is(.n,.num){font-family:var(--cs-font-family-mono);font-size:12px;opacity:.85;margin-inline-start:4px}
26
+ .panel{flex:1;min-height:0;min-width:0;max-width:100%;overflow:auto}
26
27
  .panel.hide{display:none}
27
28
  table{width:100%;border-collapse:collapse;font-size:13px}
28
29
  th,td{text-align:start;padding:8px 12px;border-block-end:1px solid var(--cs-color-border-default);vertical-align:top}
29
- th{position:sticky;top:0;background:var(--cs-color-surface-panel);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--cs-color-text-primary);z-index:1;font-weight:800}
30
+ thead{position:sticky;top:1px;z-index:1}
31
+ th{background:var(--cs-color-surface-panel);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--cs-color-text-primary);font-weight:800}
30
32
  tr:hover td{background:var(--cs-color-surface-raised)}
31
33
  .swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--cs-color-border-default);vertical-align:middle;margin-inline-end:6px}
32
34
  code{font-family:var(--cs-font-family-mono);font-size:12px}
33
35
  .path{font-family:var(--cs-font-family-mono);font-size:12px;word-break:break-all}
34
36
  .group{color:var(--cs-color-text-primary);font-size:12px;font-weight:600}
35
- .copy{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-text-primary));font:700 10.5px var(--cs-font-family-mono);padding:3px 7px;border-radius:6px;cursor:pointer;margin-inline-start:6px}
37
+ .copy{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-text-primary));font:700 12px var(--cs-font-family-mono);padding:4px 8px;border-radius:6px;cursor:pointer;margin-inline-start:6px}
36
38
  .copy:hover{border-color:var(--cs-color-brand-ochre)}
37
39
  .copy.ok{background:#dcfce7;color:#166534;border-color:#16a34a55}
38
40
  #raw{margin:0;padding:16px 18px;font:12px/1.5 var(--cs-font-family-mono);white-space:pre;overflow:auto;min-height:100%;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
@@ -40,10 +42,12 @@
40
42
  .src{font-size:12px;color:var(--cs-color-text-primary);font-weight:600}
41
43
  .src select{font:inherit;font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary)}
42
44
  .src-help{margin:0;padding:8px 16px;font:12.5px/1.45 var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-panel);border-block-end:1px solid var(--cs-color-border-default)}
43
- .src-help code{font-family:var(--cs-font-family-mono);font-size:11.5px}
44
- .toast{position:fixed;inset-block-end:16px;inset-inline-end:16px;background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse);font:600 12.5px var(--cs-font-family-ui);padding:8px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
45
+ .src-help code{font-family:var(--cs-font-family-mono);font-size:12px}
46
+ @media(max-width:640px) and (pointer:fine){th,td{padding:6px 4px;word-break:break-word}.path,td:nth-child(3){max-width:85px;word-break:break-all}}
47
+ .toast{position:fixed;inset-block-end:16px;inset-inline-end:16px;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));font:600 12.5px var(--cs-font-family-ui);padding:8px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
45
48
  .toast.on{opacity:1}
46
49
  @media(pointer:coarse){
50
+ html,body{overflow-x:visible}
47
51
  button,input,select{min-inline-size:44px;min-block-size:44px}
48
52
  select{block-size:44px}
49
53
  body{height:auto;min-block-size:100vh}
package/ui_kits/deck/index.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="Brand deck — CyberSkill: 16:9 presentation — browser print and host capture hooks" />
7
8
  <title>CyberSkill · Brand deck</title>
8
9
  <!-- Preserve relative assets for literal/clean entry URLs and nested mounts. -->
9
10
  <script>
@@ -21,6 +22,7 @@
21
22
  <link rel="stylesheet" href="../../styles.css" />
22
23
  <style>
23
24
  html, body { margin: 0; background: #2a1a0d; }
25
+ .cs-skip:focus-visible, deck-stage:focus-visible, deck-stage:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
24
26
  deck-stage:not(:defined) { visibility: hidden; }
25
27
  .sl { box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--cs-font-family-ui); }
26
28
  .sl-umber { background: var(--cs-color-brand-umber); color: #fff; }
@@ -47,8 +49,8 @@
47
49
  .quote { font-size: 72px; font-weight: 700; line-height: 1.22; max-width: 1400px; }
48
50
  .quote .hl { color: var(--cs-color-brand-ochre); }
49
51
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 24px; }
50
- .stat .v { font-size: 96px; font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-text-accent); line-height: 1; }
51
- .stat .l { font-size: 26px; opacity: .85; margin-top: 10px; }
52
+ .stat .v { font-size: 96px; font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-text-accent); line-height: 1; font-variant-numeric: tabular-nums; }
53
+ .stat .l { font-size: 26px; opacity: .85; margin-top: 10px; font-variant-numeric: tabular-nums; }
52
54
  .close-wrap { align-items: center; text-align: center; justify-content: center; }
53
55
  .close-wrap img { width: 128px; height: 128px; }
54
56
  </style>
package/ui_kits/status-hub/StatusHub.jsx CHANGED
@@ -13,8 +13,8 @@ function SearchGlyph() {
13
13
  }
14
14
  function ThemeGlyph({ dark }) {
15
15
  return dark
16
- ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><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"/></svg>
17
- : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg>;
16
+ ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><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"/></svg>
17
+ : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" 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"/></svg>;
18
18
  }
19
19
 
20
20
  /* Bilingual UI copy — kit fully EN⇄VN (owner decision, Jul 2026).
@@ -30,19 +30,19 @@ const T = {
30
30
  status: "Status", all: "All", of: "of",
31
31
  key: "Key", project: "Project", squad: "Squad", owner: "Owner", progress: "Progress",
32
32
  thisWeek: "This week", tasks: "Tasks", risk: "Risk", close: "Close",
33
- langBtn: "VN", theme: "Toggle theme",
33
+ langBtn: "VN", langToggle: "Toggle language", theme: "Toggle theme",
34
34
  },
35
35
  vi: {
36
36
  sub: "CyberSkill · một trang, ba lăng kính · Hiện Thực Hoá Ý Chí",
37
37
  updated: "Cập nhật", portfolio: "Danh mục",
38
38
  projects: "Dự án", inprog: "Đang làm", shipped: "Đã ra mắt", blocked: "Bị chặn", planned: "Dự kiến", avg: "Tiến độ TB",
39
- velocity: "Tốc độ · task giao / tuần", perShipped: " đã giao",
39
+ velocity: "Nhịp độ · công việc hoàn tất / tuần", perShipped: " đã hoàn tất",
40
40
  nowTitle: "Đang ra mắt",
41
41
  search: "Tìm dự án…", view: "Chế độ xem", lenses: { board: "Bảng công việc", table: "Bảng dữ liệu", releases: "Phát hành" },
42
42
  status: "Trạng thái", all: "Tất cả", of: "trên",
43
43
  key: "Mã", project: "Dự án", squad: "Nhóm", owner: "Phụ trách", progress: "Tiến độ",
44
44
  thisWeek: "Tuần này", tasks: "Công việc", risk: "Rủi ro", close: "Đóng",
45
- langBtn: "EN", theme: "Đổi giao diện",
45
+ langBtn: "EN", langToggle: "Đổi ngôn ngữ", theme: "Đổi giao diện",
46
46
  },
47
47
  };
48
48
  const statusLabels = (t) => ({ done: t.shipped, active: t.inprog, hold: t.blocked, todo: t.planned });
@@ -166,7 +166,7 @@ function StatusHub() {
166
166
  </div>
167
167
  <div className="hd-side">
168
168
  <p className="hd-meta">{t.updated}<br />{VI ? VI.updated : D.updated}</p>
169
- <button className="btn ghost" onClick={() => setLang((l) => l === "en" ? "vi" : "en")} aria-label="Toggle language" style={{ fontWeight: 700, fontSize: 13 }}>{t.langBtn}</button>
169
+ <button className="btn ghost" onClick={() => setLang((l) => l === "en" ? "vi" : "en")} aria-label={t.langToggle} style={{ fontWeight: 700, fontSize: 13 }}>{t.langBtn}</button>
170
170
  <button className="btn ghost" onClick={() => setDark((v) => !v)} aria-label={t.theme}><ThemeGlyph dark={dark} /></button>
171
171
  </div>
172
172
  </div>
@@ -255,7 +255,7 @@ function StatusHub() {
255
255
 
256
256
  <div id="lens-panel" role="tabpanel" aria-labelledby={`lens-${lens}`} tabIndex={0}>
257
257
  {lens === "board" && (
258
- <div className="grid">
258
+ <div className="grid" data-slot="board">
259
259
  {shown.map((p0) => { const p = loc(p0); return (
260
260
  <button className={"card" + (p.status === "active" ? " hot" : "")} key={p.key} aria-haspopup="dialog" onClick={() => setSel(p0)}>
261
261
  <div className="card-h"><h3><span className="k mono">{p.key}</span> · {p.name}</h3><span className="pct">{p.pct}%</span></div>
package/ui_kits/status-hub/data.js CHANGED
@@ -46,12 +46,12 @@ window.SH_DATA = {
46
46
  // Vietnamese variants (kit fully EN⇄VN per owner decision, Jul 2026). window.SH_VI
47
47
  window.SH_VI = {
48
48
  updated: "18/07/2026, 13:20 ICT",
49
- blurbs: { CDS: "Liên kết component Liquid Glass + 15 gói Ngũ Hành.", GENIE: "Proxy Claude không cần khóa; luồng tiếp nhận điều ước theo kịch bản.", SITE: "Trang giới thiệu song ngữ kể chuyện; thu lead đang chạy.", OS: "Kho nhớ BRAIN + cổng nghiệm thu có con người.", AUDIT: "Bộ kiểm định trung lập 125 tiêu chí; giữ hạng L3.", TOKENS: "DTCG → CSS/TS/Swift/Kotlin/Flutter/Figma." },
50
- risks: { GENIE: "Tài sản GLB là phụ thuộc ngoài khó — chưa chốt đặt hàng (TASK-CHAR-021).", OS: "Bị chặn bởi hạ tầng: sổ cái nguồn gốc cần dịch vụ ký số (mục tiêu Q1 2027)." },
49
+ blurbs: { CDS: "Liên kết component Liquid Glass + 15 gói Ngũ Hành.", GENIE: "Proxy Claude không lưu khóa; luồng nhận điều ước theo kịch bản.", SITE: "Trang giới thiệu song ngữ dẫn chuyện; biểu mẫu nhận yêu cầu đang mở.", OS: "Bộ nhớ BRAIN + bước nghiệm thu có người duyệt.", AUDIT: "Bộ kiểm định trung lập 125 tiêu chí; giữ hạng L3.", TOKENS: "DTCG → CSS/TS/Swift/Kotlin/Flutter/Figma." },
50
+ risks: { GENIE: "Mô hình 3D GLB phụ thuộc bên ngoài — chưa chốt đơn đặt hàng (TASK-CHAR-021).", OS: "Bị chặn bởi hạ tầng: sổ cái nguồn gốc cần dịch vụ ký số (mục tiêu Q1 2027)." },
51
51
  owners: { "Design Lead": "Trưởng thiết kế", "AI Lead": "Trưởng AI", "Web Lead": "Trưởng web", "Eng Lead": "Trưởng kỹ thuật", "DesignOps": "DesignOps" },
52
52
  squads: { Platform: "Nền tảng", AI: "AI", Growth: "Tăng trưởng" },
53
53
  updatedRel: { "2h ago": "2 giờ trước", "5h ago": "5 giờ trước", "1h ago": "1 giờ trước", "1d ago": "1 ngày trước", "3d ago": "3 ngày trước", "6h ago": "6 giờ trước" },
54
54
  relWhen: { "v1.6.0": "Tuần này", "v1.5.1": "04/07/2026", "v1.4.0": "13/06/2026", "v1.3.0": "14/05/2026" },
55
55
  relTitles: { "v1.6.0": "Liên kết Glass + gói Ngũ Hành v2", "v1.5.1": "15 gói Ngũ Hành ra mắt", "v1.4.0": "Liquid Glass vào mã", "v1.3.0": "Tài sản thương hiệu + Logo" },
56
- relItems: { "v1.6.0": ["Liên kết component .cs-surface-* (tùy chọn)", "Trình kiểm gói Ngũ Hành v2 (0 cảnh báo trên 15 gói)", "Kiểm tra lại APCA cho chế độ tối"], "v1.5.1": ["Cả 15 gói lên trạng thái đã ra mắt", "Regression ảnh chụp từng gói", "Script dựng gallery"], "v1.4.0": ["Scalar --cs-glass-* + --cs-depth-*", "Lớp chất liệu glass.css", "Fallback khi giảm độ trong suốt"], "v1.3.0": ["Master mark chính thức ra mắt", "<Logo> React từ artwork gốc", "Light thành theme mặc định"] },
56
+ relItems: { "v1.6.0": ["Liên kết component .cs-surface-* (tùy chọn)", "Trình kiểm gói Ngũ Hành v2 (0 cảnh báo trên 15 gói)", "Kiểm tra lại APCA cho chế độ tối"], "v1.5.1": ["Cả 15 gói lên trạng thái đã ra mắt", "Kiểm thử đối chiếu ảnh chụp từng gói", "Script dựng trang trưng bày"], "v1.4.0": ["Scalar --cs-glass-* + --cs-depth-*", "Lớp chất liệu glass.css", "Fallback khi giảm độ trong suốt"], "v1.3.0": ["Master mark chính thức ra mắt", "<Logo> React từ bản vẽ gốc", "Giao diện Sáng làm mặc định"] },
57
57
  };
package/ui_kits/status-hub/index.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="Status Hub — portfolio dashboard: KPIs, board / table / releases lenses, detail drawer" />
7
8
  <title>CyberSkill · Status Hub</title>
8
9
  <!-- Preserve relative assets for literal/clean entry URLs and nested mounts. -->
9
10
  <script>
package/ui_kits/status-hub/login.html CHANGED
@@ -4,13 +4,14 @@
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="Status Hub — sign in: Umber split login with brand panel + form controls (default / loading / error / invalid)" />
7
8
  <title data-vi="CyberSkill · Đăng nhập">CyberSkill · Sign in</title>
8
9
  <link rel="icon" href="../../assets/favicon.svg" />
9
10
  <link rel="stylesheet" href="../../styles.css" />
10
11
  <style>
11
12
  html, body { margin: 0; min-height: 100vh; }
12
- .login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
13
- .pane-brand { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; padding: 56px 60px; display: flex; flex-direction: column; }
13
+ .login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
14
+ .pane-brand { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; padding: 56px 60px 96px; display: flex; flex-direction: column; }
14
15
  .pane-brand::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .42; }
15
16
  .pane-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,17,8,.35), rgba(26,17,8,.8)); }
16
17
  .pane-brand > * { position: relative; z-index: 1; }
@@ -18,18 +19,19 @@
18
19
  .brand-lock img { width: 40px; height: 40px; }
19
20
  .pane-brand .brand-headline { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--cs-color-brand-ochre); margin: auto 0 8px; }
20
21
  .pane-brand p { font-size: 17px; opacity: .9; margin: 0; max-width: 420px; }
21
- .pane-form { display: grid; place-items: center; padding: 40px 24px; background: var(--cs-color-surface-page); }
22
+ .pane-form { display: grid; place-items: center; padding: 40px 24px; background: var(--cs-color-surface-page); min-width: 0; }
22
23
  .box { width: min(400px, 100%); }
23
24
  .box h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
24
25
  .box .sub { color: var(--cs-color-text-muted); margin: 0 0 28px; }
25
26
  form { display: grid; gap: 16px; }
26
- .rowbetween { display: flex; align-items: center; justify-content: space-between; }
27
+ .rowbetween { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
28
+ .rowbetween button { white-space: nowrap; }
27
29
  .fine { text-align: center; font-size: 13px; color: var(--cs-color-text-muted); margin-top: 4px; }
28
- .state-bar { max-width: calc(100vw - 96px); position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); border-radius: 12px; box-shadow: var(--cs-shadow-md); font-size: 13px; }
30
+ .state-bar { max-width: calc(100% - 96px); position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: 12px; box-shadow: var(--cs-shadow-xs); font-size: 13px; }
29
31
  .state-bar label { flex-wrap: wrap; display: flex; align-items: center; gap: 6px; color: var(--cs-color-text-muted); }
30
32
  .state-bar select { font: inherit; }
31
33
  [hidden] { display: none !important; }
32
- @media (max-width: 820px) { .state-bar { position: static; margin: 0 76px 20px 20px; } .login { grid-template-columns: 1fr; } .pane-brand { display: none; } }
34
+ @media (max-width: 820px) { .state-bar { position: static; margin: 0 76px 20px 20px; } .login { grid-template-columns: minmax(0, 1fr); } .pane-brand { display: none; } }
33
35
  </style>
34
36
  </head>
35
37
  <body>
package/ui_kits/status-hub/project.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="Status Hub — project detail: Full project view: breadcrumb, steps, tasks, timeline, risk" />
7
8
  <title>CyberSkill · Design System v1.6</title>
8
9
  <link rel="icon" href="../../assets/favicon.svg" />
9
10
  <link rel="stylesheet" href="../../styles.css" />
@@ -13,19 +14,19 @@
13
14
  .pd { max-width: 1000px; margin: 0 auto; padding: 22px 28px 72px;
14
15
  /* G1 / TASK-IMP-025 — local CQ host (page is not under `.wrap`). */
15
16
  container-type: inline-size; container-name: cs; }
16
- .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cs-color-text-muted); margin: 18px 0 16px; }
17
- .crumb a { color: var(--cs-color-text-muted); text-decoration: none; }
17
+ .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cs-color-text-muted); margin: 18px 0 16px; flex-wrap: wrap; }
18
+ .crumb a { color: var(--cs-color-text-muted); text-decoration: none; white-space: nowrap; }
18
19
  .crumb a:hover { color: var(--cs-color-text-accent); }
19
20
  .crumb .sep { color: var(--cs-color-border-default); }
20
21
  .crumb .cur { color: var(--cs-color-text-primary); font-weight: 600; }
21
22
  .pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
22
23
  .pd-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
23
- .pd-head h1 .k { font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); }
24
+ .pd-head h1 .k { font-family: var(--cs-font-family-mono); }
24
25
  .pd-head p { margin: 0; color: var(--cs-color-text-muted); max-width: 560px; }
25
26
  .pd-actions { display: flex; gap: 10px; }
26
27
  .pd-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 20px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: 14px; padding: 20px 22px; margin: 20px 0; }
27
- .stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-color-text-muted); }
28
- .stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
28
+ .stat .l { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-color-text-muted); }
29
+ .stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
29
30
  .pd-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
30
31
  .panel h2.sec { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cs-color-text-muted); margin: 0 0 14px; }
31
32
  .steps-wrap { margin: 6px 0 4px; }
@@ -33,7 +34,7 @@
33
34
  .task:first-of-type { border-top: 0; }
34
35
  .task .mono { font-family: var(--cs-font-family-mono); font-size: 12.5px; color: var(--cs-color-text-primary); }
35
36
  .task .nm { flex: 1; font-size: 14px; }
36
- .toggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; box-shadow: var(--cs-shadow-md); display: grid; place-items: center; }
37
+ .toggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; box-shadow: var(--cs-shadow-xs); display: grid; place-items: center; }
37
38
  @media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; } }
38
39
  @container cs (max-width: 768px) { .pd-grid { grid-template-columns: 1fr; } }
39
40
  </style>
package/ui_kits/status-hub/settings.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="Status Hub — settings: Tabs, form controls, switches, danger zone" />
7
8
  <title data-vi="CyberSkill · Cài đặt">CyberSkill · Settings</title>
8
9
  <link rel="icon" href="../../assets/favicon.svg" />
9
10
  <link rel="stylesheet" href="../../styles.css" />
@@ -11,7 +12,7 @@
11
12
  <style>
12
13
  html, body { margin: 0; background: var(--cs-color-surface-page); }
13
14
  .set-grid { display: grid; gap: 18px; margin: 22px 0 64px; }
14
- .panel h3.sec { margin: 0 0 4px; font-size: 18px; }
15
+ .panel h2.sec, .panel h3.sec { margin: 0 0 4px; font-size: 18px; text-transform: none; letter-spacing: normal; color: var(--cs-color-text-primary); }
15
16
  .panel .hint { margin: 0 0 18px; color: var(--cs-color-text-muted); font-size: 14px; }
16
17
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
17
18
  .toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--cs-color-border-default); }
@@ -36,7 +37,7 @@
36
37
  <span class="hd-mark"><img src="../../assets/logo-mark.svg" alt="" /></span>
37
38
  <div><h1 data-vi="Cài đặt">Settings</h1><p class="hd-sub" data-vi="CyberSkill · không gian làm việc và tùy chọn">CyberSkill · workspace &amp; preferences</p></div>
38
39
  </div>
39
- <div class="hd-side"><p class="hd-meta"><span data-vi="Hồ sơ minh họa">Sample profile</span><br />an@cyberskill.world</p></div>
40
+ <div class="hd-side"><div class="hd-meta"><span data-vi="Hồ sơ minh họa">Sample profile</span><br />an@cyberskill.world</div></div>
40
41
  </div>
41
42
  </header>
42
43
 
@@ -50,18 +51,18 @@
50
51
 
51
52
  <form class="set-grid" id="settingsPreview">
52
53
  <section class="panel" id="panel-profile" role="tabpanel" aria-labelledby="tab-profile" tabindex="0">
53
- <h3 class="sec" data-vi="Hồ sơ">Profile</h3>
54
+ <h2 class="sec" data-vi="Hồ sơ">Profile</h2>
54
55
  <p class="hint" data-vi="Bản xem trước cục bộ. Thay đổi chưa được lưu vào tài khoản.">Local preview. Changes are not saved to an account.</p>
55
56
  <div class="field-row">
56
57
  <label class="cs-field"><span class="cs-field__label" data-vi="Họ và tên">Full name</span><input class="cs-field__control" value="Nguyễn Hoàng An" /></label>
57
58
  <label class="cs-field"><span class="cs-field__label" data-vi="Email công việc">Work email</span><input class="cs-field__control" type="email" value="an@cyberskill.world" /></label>
58
- <label class="cs-field"><span class="cs-field__label" data-vi="Nhóm">Squad</span><span class="cs-select"><select class="cs-field__control"><option value="Platform" data-vi="Nền tảng">Platform</option><option value="AI">AI</option><option value="Growth" data-vi="Tăng trưởng">Growth</option></select><span class="cs-select__chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span></span></label>
59
- <label class="cs-field"><span class="cs-field__label" data-vi="Ngôn ngữ giao diện">Interface language</span><span class="cs-select"><select class="cs-field__control" data-preview-language-select><option value="en">English</option><option value="vi">Tiếng Việt</option></select><span class="cs-select__chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span></span></label>
59
+ <label class="cs-field"><span class="cs-field__label" data-vi="Nhóm">Squad</span><span class="cs-select"><select class="cs-field__control"><option value="Platform" data-vi="Nền tảng">Platform</option><option value="AI">AI</option><option value="Growth" data-vi="Tăng trưởng">Growth</option></select><span class="cs-select__chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></span></span></label>
60
+ <label class="cs-field"><span class="cs-field__label" data-vi="Ngôn ngữ giao diện">Interface language</span><span class="cs-select"><select class="cs-field__control" data-preview-language-select><option value="en">English</option><option value="vi">Tiếng Việt</option></select><span class="cs-select__chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></span></span></label>
60
61
  </div>
61
62
  </section>
62
63
 
63
64
  <section class="panel" id="panel-notifications" role="tabpanel" aria-labelledby="tab-notifications" tabindex="0" hidden>
64
- <h3 class="sec" data-vi="Thông báo">Notifications</h3>
65
+ <h2 class="sec" data-vi="Thông báo">Notifications</h2>
65
66
  <p class="hint" data-vi="Giữ yên lặng — chỉ những gì bạn yêu cầu.">We keep it quiet — only what you ask for.</p>
66
67
  <div class="cs-scroll-area" style="max-block-size:220px;padding-inline-end:6px" tabindex="0" aria-label="Notification preferences" data-vi-aria-label="Tùy chọn thông báo">
67
68
  <div class="toggle-row"><div><div class="t" id="lbl-release" data-vi="Ghi chú phát hành">Release notes</div><div class="d" data-vi="Bản tóm tắt mỗi lần phát hành dự án. Song ngữ (EN + VI).">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked aria-labelledby="lbl-release" /><span class="cs-switch__track"></span></label></div>
@@ -72,12 +73,12 @@
72
73
  </section>
73
74
 
74
75
  <section class="panel" id="panel-appearance" role="tabpanel" aria-labelledby="tab-appearance" tabindex="0" hidden>
75
- <h3 class="sec" data-vi="Giao diện">Appearance</h3>
76
+ <h2 class="sec" data-vi="Giao diện">Appearance</h2>
76
77
  <p class="hint" data-vi="Chọn giao diện màu cho bản xem trước này.">Choose the color theme for this preview.</p>
77
78
  <button type="button" class="cs-button" id="appearance-theme" data-vi="Đổi sáng / tối">Toggle light / dark</button>
78
79
  </section>
79
80
  <section class="panel" id="panel-team" role="tabpanel" aria-labelledby="tab-team" tabindex="0" hidden>
80
- <h3 class="sec" data-vi="Đội ngũ">Team</h3>
81
+ <h2 class="sec" data-vi="Đội ngũ">Team</h2>
81
82
  <p class="hint" data-vi="Bản xem trước tĩnh này không kết nối danh bạ đội ngũ.">This static preview does not connect to a team directory.</p>
82
83
  </section>
83
84
  <section class="danger">
package/ui_kits/status-hub/status.css CHANGED
@@ -23,6 +23,7 @@
23
23
  }
24
24
 
25
25
  /* Tall sticky .bar / .hd — WCAG 2.2 focus-not-obscured (UX-033). */
26
+ html, body { overflow-x: clip; }
26
27
  .sh {
27
28
  --cs-scroll-padding-block-start: calc(var(--cs-space-20) + var(--cs-space-4));
28
29
  background: var(--cs-color-surface-page);
@@ -46,6 +47,7 @@
46
47
  /* header */
47
48
  .hd { background: var(--cs-status-header-bg); color: var(--cs-status-header-fg);
48
49
  border-bottom: 3px solid var(--cs-color-brand-ochre); }
50
+ .hd :focus-visible { outline-color: var(--cs-status-header-fg); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
49
51
  .hd-in { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-6);
50
52
  padding: var(--cs-space-5) var(--cs-space-6); flex-wrap: wrap; max-width: 1320px; margin: 0 auto; }
51
53
  .hd-id { display: flex; align-items: center; gap: var(--cs-space-4); }
@@ -68,14 +70,14 @@
68
70
  /* deck */
69
71
  .deck { margin: var(--cs-space-6) 0 var(--cs-space-4); display: grid; gap: var(--cs-space-4);
70
72
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
71
- .panel { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
73
+ .panel { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default);
72
74
  border-radius: 14px; padding: var(--cs-space-4) var(--cs-space-5); }
73
75
  .panel > h2 { margin: 0 0 var(--cs-space-3); font-size: 12px; text-transform: uppercase;
74
76
  letter-spacing: .09em; color: var(--cs-color-text-muted); }
75
77
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--cs-space-3);
76
78
  margin-bottom: var(--cs-space-4); }
77
79
  .kpi { text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
78
- .kpi b { display: block; font-size: 24px; line-height: 1.15; }
80
+ .kpi b { display: block; font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
79
81
  .kpi span { font-size: 12px; color: var(--cs-color-text-muted); }
80
82
  .kpi[data-on="1"] b, .kpi:hover b { color: var(--cs-color-text-accent); }
81
83
  .bar-seg { height: 12px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised);
@@ -109,20 +111,20 @@
109
111
  -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%);
110
112
  border: 1px solid var(--cs-color-border-default); border-radius: 14px;
111
113
  padding: var(--cs-space-3) var(--cs-space-4); margin-bottom: var(--cs-space-4); }
114
+ @media (prefers-reduced-transparency: reduce) { .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cs-color-surface-page); } }
112
115
  .bar-top { display: flex; gap: var(--cs-space-3); align-items: center; flex-wrap: wrap; }
113
116
  .srch { flex: 1 1 340px; display: flex; align-items: center; gap: var(--cs-space-2);
114
117
  background: var(--cs-color-surface-panel); border: 1px solid var(--cs-component-textfield-border-default);
115
118
  border-radius: var(--cs-radius-full); padding: 0 var(--cs-space-4); min-height: 42px; }
116
119
  .srch:focus-within { border-color: var(--cs-color-brand-ochre); }
117
120
  .srch svg { color: var(--cs-color-text-muted); }
118
- .srch input { flex: 1; border: 0; background: transparent; outline: 0; min-width: 0;
121
+ .srch input { flex: 1; border: 0; background: transparent; outline: 0; min-width: 0; min-height: 40px;
119
122
  color: var(--cs-color-text-primary); font: inherit; font-size: 14px; }
120
123
  .lenses { display: flex; gap: 4px; background: var(--cs-color-surface-raised);
121
124
  border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
122
125
  .ln { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px;
123
126
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--cs-color-text-accent); }
124
- .ln[aria-selected="true"] { background: var(--cs-color-brand-umber); color: var(--cs-color-text-inverse); }
125
- [data-theme="dark"] .ln[aria-selected="true"] { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
127
+ .ln[aria-selected="true"] { 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-status-on-ochre)); }
126
128
  .facet { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cs-color-text-muted); }
127
129
  .facet select { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary);
128
130
  border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px;
@@ -137,7 +139,7 @@
137
139
  .pill.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill); }
138
140
  .pill.todo { background: var(--cs-color-border-default); color: var(--cs-color-text-accent); }
139
141
  .task-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--cs-space-2); }
140
- .chip { font-family: var(--cs-font-family-mono); font-size: 11px; font-weight: 600; padding: 3px 7px;
142
+ .chip { font-size: 11px; font-weight: 600; padding: 3px 7px;
141
143
  border-radius: 6px; cursor: pointer; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent);
142
144
  border: 1px solid var(--cs-color-border-default); }
143
145
  .chip:hover { border-color: var(--cs-color-brand-ochre); }
@@ -153,7 +155,6 @@
153
155
  .card.hot { border-color: var(--cs-color-brand-ochre); }
154
156
  .card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-space-2); }
155
157
  .card-h h3 { margin: 0; font-size: 15px; line-height: var(--cs-font-lineHeight-heading); }
156
- .card-h h3 .k { color: var(--cs-color-text-primary); font-weight: 700; }
157
158
  .card-h .pct { font-size: 12.5px; color: var(--cs-color-text-muted); white-space: nowrap; }
158
159
  .card p { margin: var(--cs-space-2) 0 0; font-size: 13px; color: var(--cs-color-text-muted); }
159
160
  .minibar { height: 6px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised);
@@ -192,7 +193,7 @@ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
192
193
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: calc(var(--cs-depth-modal) + 1);
193
194
  left: auto; margin: 0; padding: 0; height: 100dvh; max-height: none; max-width: none; border: 0; color: inherit;
194
195
  background: var(--cs-color-surface-page); border-left: 1px solid var(--cs-color-border-default);
195
- box-shadow: -18px 0 48px var(--cs-status-shadow); display: flex; flex-direction: column; }
196
+ box-shadow: -12px 0 20px var(--cs-status-shadow); display: flex; flex-direction: column; }
196
197
  .drawer:not([open]) { display: none; }
197
198
  .project-open { font: inherit; color: inherit; text-align: start; background: transparent; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
198
199
  .dw-h { padding: var(--cs-space-4) var(--cs-space-5); border-bottom: 1px solid var(--cs-color-border-default);
@@ -217,6 +218,7 @@ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
217
218
  .ft { margin: var(--cs-space-12) 0 var(--cs-space-16); text-align: center; font-size: 12px; color: var(--cs-color-text-muted); }
218
219
 
219
220
  /* Viewport fallback. */
221
+ @media (max-width: 768px), (min-width: 1024px) { .pill, .chip, .tbl thead th, .rel-sec h4, .meta dt, .spark a, .spark b { font-size: 12px; } }
220
222
  @media (max-width: 900px) { .deck { grid-template-columns: 1fr; } .hd-meta { text-align: left; } }
221
223
  /* G1 / TASK-IMP-025 — deck + board card grid from `.wrap` container width. */
222
224
  @container cs (max-width: 768px) {
package/ui_kits/website/Website.jsx CHANGED
@@ -84,7 +84,7 @@ function Website() {
84
84
  <section className="hero" id="top">
85
85
  <div className="container hero-in">
86
86
  <div>
87
- <div className="eyebrow">{t.eyebrow}</div>
87
+ <div className="eyebrow" role="group">{t.eyebrow}</div>
88
88
  <h1>{t.slogan}</h1>
89
89
  <div className="vn">{t.sub}</div>
90
90
  <p className="lead">{t.lead}</p>
@@ -103,7 +103,7 @@ function Website() {
103
103
  <div className="eyebrow">{t.nav[0]}</div>
104
104
  <h2>{t.servicesTitle}</h2>
105
105
  <p className="sec-lead">{t.servicesLead}</p>
106
- <div className="svc-grid">
106
+ <div className="svc-grid" data-slot="services">
107
107
  {t.services.map((s, i) => (
108
108
  <article className="svc cs-surface-standard" key={i}>
109
109
  <div className="svc-ic"><I name={s.icon} /></div>
@@ -120,7 +120,7 @@ function Website() {
120
120
  <div className="eyebrow">{t.nav[2]}</div>
121
121
  <h2>{t.processTitle}</h2>
122
122
  <p className="sec-lead">{t.processLead}</p>
123
- <div className="steps">
123
+ <div className="steps" data-slot="process">
124
124
  {t.steps.map((s) => (
125
125
  <div className="step" key={s.n}><span className="n">{s.n}</span><h3>{s.t}</h3><p>{s.s}</p></div>
126
126
  ))}
package/ui_kits/website/careers.html CHANGED
@@ -4,20 +4,28 @@
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="cyberskill.world — careers: Sample values and roles with contact-preview links" />
7
8
  <title>CyberSkill · Careers</title>
8
9
  <link rel="icon" href="../../assets/favicon.svg" />
9
10
  <link rel="stylesheet" href="../../styles.css" />
10
11
  <link rel="stylesheet" href="site.css" />
11
12
  <style>
13
+ /* hero: banner */
12
14
  html, body { margin: 0; }
13
- .car-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 76px 0 64px; position: relative; overflow: hidden; }
15
+ @media screen and (min-width: 1024px) {
16
+ .car-hero + .sec { padding-top: 84px; }
17
+ .roles { gap: 28px; }
18
+ .role { padding: 36px 28px; }
19
+ }
20
+ .car-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 88px 0 64px; position: relative; overflow: hidden; }
14
21
  .car-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .32; }
15
22
  .car-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.28), rgba(26,17,8,.78)); }
16
23
  .car-hero .container { position: relative; z-index: 1; }
17
24
  .car-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 12px 0 6px; }
18
25
  .car-hero p { font-size: 18px; opacity: .92; max-width: 600px; margin: 0; }
19
26
  .vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
20
- .val { border-top: 3px solid var(--cs-color-brand-ochre); padding-top: 16px; }
27
+ .val { border-top: 3px solid var(--cs-color-brand-ochre); padding-top: 12px; }
28
+ .sec .eyebrow { margin-bottom: 20px; }
21
29
  .val h3 { margin: 0 0 6px; font-size: 18px; }
22
30
  .val p { margin: 0; color: var(--cs-color-text-muted); font-size: 14px; line-height: 1.5; }
23
31
  .roles { display: grid; gap: 12px; }
@@ -37,14 +45,14 @@
37
45
  <div class="container hdr-in">
38
46
  <a class="brand" href="index.html"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
39
47
  <nav class="nav"><a href="index.html#services" data-vi="Dịch vụ">Services</a><a href="work.html" data-vi="Dự án">Work</a><a href="careers.html" data-vi="Tuyển dụng">Careers</a><a href="index.html#contact" data-vi="Liên hệ">Contact</a></nav>
40
- <div class="hdr-side"><a class="mini" href="#" id="langToggle">Tiếng Việt</a><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html#top" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
48
+ <div class="hdr-side"><a class="mini" href="#" id="langToggle" aria-label="Switch to Tiếng Việt" data-vi-aria-label="Chuyển sang English">Tiếng Việt</a><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html#top" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
41
49
  </div>
42
50
  </header>
43
51
 
44
52
  <main id="main" tabindex="-1">
45
53
  <section class="car-hero">
46
54
  <div class="container">
47
- <div class="eyebrow" style="color:var(--cs-color-brand-ochre)" data-vi="Tuyển dụng">Careers</div>
55
+ <div class="eyebrow" role="group" style="color:var(--cs-color-brand-ochre)" data-vi="Tuyển dụng">Careers</div>
48
56
  <h1 data-vi="Cùng xây với chúng tôi">Build with us</h1>
49
57
  <p data-vi="Nội dung tuyển dụng minh họa. Bản mẫu này chưa xác minh vị trí đang tuyển hay nhận hồ sơ ứng tuyển.">Illustrative careers content. This sample does not verify open vacancies or accept applications.</p>
50
58
  </div>
@@ -53,7 +61,7 @@
53
61
  <section class="sec">
54
62
  <div class="container">
55
63
  <div class="eyebrow" data-vi="Cách chúng tôi làm việc">How we work</div>
56
- <h2 style="margin:8px 0 32px" data-vi="Điều chúng tôi trân trọng">What we value</h2>
64
+ <h2 style="margin:0 0 10px" data-vi="Điều chúng tôi trân trọng">What we value</h2>
57
65
  <div class="vals">
58
66
  <div class="val"><h3 data-vi="Ấm áp">Warm</h3><p data-vi="Chúng tôi đối xử với khách hàng và với nhau bằng sự quan tâm chân thành.">We treat clients and each other with genuine care.</p></div>
59
67
  <div class="val"><h3 data-vi="Thẳng thắn">Direct</h3><p data-vi="Lời nói giản dị, kết quả cụ thể, không vòng vo.">Plain words, concrete outcomes, no hedging.</p></div>
@@ -66,12 +74,21 @@
66
74
  <section class="sec sec-alt">
67
75
  <div class="container">
68
76
  <div class="eyebrow" data-vi="Vị trí minh họa">Sample roles</div>
69
- <h2 style="margin:8px 0 28px" data-vi="Nơi dành cho bạn">Where you fit</h2>
77
+ <h2 style="margin:0 0 10px" data-vi="Nơi dành cho bạn">Where you fit</h2>
70
78
  <div class="roles">
71
79
  <div class="role"><div><h3 data-vi="Kỹ sư sản phẩm cấp cao">Senior Product Engineer</h3><div class="meta"><span data-vi="Nền tảng">Platform</span><span data-vi="Sài Gòn · Kết hợp">Saigon · Hybrid</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html#contact" data-vi="Xem bản mẫu liên hệ →">View contact demo →</a></div>
72
80
  <div class="role"><div><h3 data-vi="Kỹ sư hệ thống thiết kế">Design Systems Engineer</h3><div class="meta"><span data-vi="Nền tảng">Platform</span><span data-vi="Từ xa · VN">Remote · VN</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html#contact" data-vi="Xem bản mẫu liên hệ →">View contact demo →</a></div>
73
81
  <div class="role"><div><h3 data-vi="Nhà thiết kế sản phẩm AI">AI Product Designer</h3><div class="meta"><span>AI</span><span data-vi="Sài Gòn · Kết hợp">Saigon · Hybrid</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html#contact" data-vi="Xem bản mẫu liên hệ →">View contact demo →</a></div>
74
- <div class="role"><div><h3 data-vi="Trưởng nhóm tăng trưởng sáng lập">Founding Growth Lead</h3><div class="meta"><span data-vi="Tăng trưởng">Growth</span><span data-vi="Sài Gòn">Saigon</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html#contact" data-vi="Xem bản mẫu liên hệ →">View contact demo →</a></div>
82
+ <div class="role"><div><h3 data-vi="Trưởng nhóm Tăng trưởng đầu tiên">Founding Growth Lead</h3><div class="meta"><span data-vi="Tăng trưởng">Growth</span><span data-vi="Sài Gòn">Saigon</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html#contact" data-vi="Xem bản mẫu liên hệ →">View contact demo →</a></div>
83
+ </div>
84
+ </div>
85
+ </section>
86
+
87
+ <section class="sec">
88
+ <div class="container">
89
+ <div class="band">
90
+ <div><h2 data-vi="Bạn cũng có một điều ước?">Have a wish of your own?</h2><p data-vi="Thử bản xem trước liên hệ. Bản mẫu này chưa gửi lời nhắn.">Try the contact preview. This sample does not send a message.</p></div>
91
+ <a class="btn-gold" href="index.html#contact" data-vi="Ước một điều →">Make a wish →</a>
75
92
  </div>
76
93
  </div>
77
94
  </section>
package/ui_kits/website/chat.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="cyberskill.world — Lumi chat: Scripted EN/VI chat preview: prompt, sample messages and disclosures" />
7
8
  <title>CyberSkill · Lumi</title>
8
9
  <link rel="icon" href="../../assets/favicon.svg" />
9
10
  <link rel="stylesheet" href="../../styles.css" />
@@ -17,7 +18,7 @@
17
18
  .lumi-new { margin: 0 4px 12px; }
18
19
  .lumi-new .cs-button { min-height: 44px; }
19
20
  .lumi-mobile-new { display: none; min-height: 44px; }
20
- .lumi-conv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); padding: 10px 12px 4px; }
21
+ .lumi-conv-label { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); padding: 10px 12px 4px; }
21
22
  .lumi-side-foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--cs-color-border-default); }
22
23
  .lumi-main { display: flex; flex-direction: column; min-width: 0; }
23
24
  .lumi-top { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-bottom: 1px solid var(--cs-color-border-default); background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@@ -28,8 +29,10 @@
28
29
  .lumi-thread-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
29
30
  .lumi-compose { border-top: 1px solid var(--cs-color-border-default); padding: 16px 28px 22px; background: var(--cs-color-surface-page); }
30
31
  .lumi-compose-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
31
- .lumi-answer-card { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: 14px; padding: 16px 18px; display: grid; gap: 14px; }
32
+ .lumi-answer-card { background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: 14px; padding: 16px 18px; display: grid; gap: 14px; }
32
33
  .lumi-page .cs-suggest button { color: var(--cs-color-text-primary); }
34
+ .lumi-page .cs-suggest button, .lumi-page .cs-button--sm, .lumi-page .cs-nav-item { min-height: 44px; }
35
+ @media (prefers-reduced-transparency: reduce) { .lumi-top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cs-color-surface-panel); } }
33
36
  .lumi-answer-card p { margin: 0; font-size: 15px; line-height: 1.6; }
34
37
  .lumi-answer-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
35
38
  @media (max-width: 820px) { .lumi-page { grid-template-columns: 1fr; } .lumi-side { display: none; } .lumi-mobile-new { display: inline-flex; } }
package/ui_kits/website/index.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="cyberskill.world — marketing home: Bilingual hero, services, process, Lumi chat" />
7
8
  <title>CyberSkill · Turn Your Will Into Real</title>
8
9
  <!-- Preserve relative assets for literal/clean entry URLs and nested mounts. -->
9
10
  <script>