@cyberskill/design 1.0.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 (970) hide show
  1. package/DESIGN.md +267 -0
  2. package/README.md +316 -0
  3. package/SKILL.md +64 -0
  4. package/VERSION +1 -0
  5. package/_ds_bundle.js +5377 -0
  6. package/_ds_manifest.json +1 -0
  7. package/_esm/cs.mjs +137 -0
  8. package/assets/aurora-gold.jpg +0 -0
  9. package/assets/aurora-hoa.png +0 -0
  10. package/assets/aurora-kim.png +0 -0
  11. package/assets/aurora-moc.png +0 -0
  12. package/assets/aurora-thuy.png +0 -0
  13. package/assets/favicon.svg +1 -0
  14. package/assets/logo-mark.png +0 -0
  15. package/assets/logo-mark.svg +10 -0
  16. package/assets/lumi-poster.webp +0 -0
  17. package/assets/og-dashboard.png +0 -0
  18. package/base/a11y.css +57 -0
  19. package/base/ai.css +67 -0
  20. package/base/collections.css +53 -0
  21. package/base/components.css +212 -0
  22. package/base/controls.css +329 -0
  23. package/base/data.css +48 -0
  24. package/base/feedback.css +60 -0
  25. package/base/forms.css +32 -0
  26. package/base/glass.css +119 -0
  27. package/base/interaction.css +50 -0
  28. package/base/navigation.css +39 -0
  29. package/base/reset.css +17 -0
  30. package/base/responsive.css +128 -0
  31. package/base/shell.css +55 -0
  32. package/base/typography.css +14 -0
  33. package/components/_i18n/i18n.js +56 -0
  34. package/components/_i18n/strings.js +187 -0
  35. package/components/_utils/cx.js +4 -0
  36. package/components/ai/AIDisclosureBadge.d.ts +16 -0
  37. package/components/ai/AIDisclosureBadge.figma.tsx +12 -0
  38. package/components/ai/AIDisclosureBadge.jsx +39 -0
  39. package/components/ai/AIDisclosureBadge.prompt.md +9 -0
  40. package/components/ai/ChatMessage.d.ts +17 -0
  41. package/components/ai/ChatMessage.figma.tsx +12 -0
  42. package/components/ai/ChatMessage.jsx +22 -0
  43. package/components/ai/ChatMessage.prompt.md +8 -0
  44. package/components/ai/CitationList.d.ts +13 -0
  45. package/components/ai/CitationList.figma.tsx +12 -0
  46. package/components/ai/CitationList.jsx +22 -0
  47. package/components/ai/CitationList.prompt.md +5 -0
  48. package/components/ai/ConfidenceMeter.d.ts +17 -0
  49. package/components/ai/ConfidenceMeter.figma.tsx +12 -0
  50. package/components/ai/ConfidenceMeter.jsx +43 -0
  51. package/components/ai/ConfidenceMeter.prompt.md +6 -0
  52. package/components/ai/HumanReviewGate.d.ts +20 -0
  53. package/components/ai/HumanReviewGate.figma.tsx +12 -0
  54. package/components/ai/HumanReviewGate.jsx +37 -0
  55. package/components/ai/HumanReviewGate.prompt.md +13 -0
  56. package/components/ai/PromptInput.d.ts +21 -0
  57. package/components/ai/PromptInput.figma.tsx +12 -0
  58. package/components/ai/PromptInput.jsx +48 -0
  59. package/components/ai/PromptInput.prompt.md +5 -0
  60. package/components/ai/PromptSuggestions.d.ts +12 -0
  61. package/components/ai/PromptSuggestions.figma.tsx +12 -0
  62. package/components/ai/PromptSuggestions.jsx +20 -0
  63. package/components/ai/PromptSuggestions.prompt.md +5 -0
  64. package/components/ai/TypingIndicator.d.ts +9 -0
  65. package/components/ai/TypingIndicator.figma.tsx +12 -0
  66. package/components/ai/TypingIndicator.jsx +14 -0
  67. package/components/ai/TypingIndicator.prompt.md +5 -0
  68. package/components/ai/ai-conversation.card.html +49 -0
  69. package/components/ai/ai-lumi.card.html +39 -0
  70. package/components/ai/ai.card.html +43 -0
  71. package/components/brand/LumiAvatar.d.ts +14 -0
  72. package/components/brand/LumiAvatar.figma.tsx +12 -0
  73. package/components/brand/LumiAvatar.jsx +11 -0
  74. package/components/brand/LumiAvatar.prompt.md +5 -0
  75. package/components/brand/brand.card.html +37 -0
  76. package/components/button/Button.d.ts +24 -0
  77. package/components/button/Button.figma.tsx +31 -0
  78. package/components/button/Button.jsx +42 -0
  79. package/components/button/Button.prompt.md +12 -0
  80. package/components/button/ButtonGroup.d.ts +11 -0
  81. package/components/button/ButtonGroup.figma.tsx +12 -0
  82. package/components/button/ButtonGroup.jsx +7 -0
  83. package/components/button/ButtonGroup.prompt.md +8 -0
  84. package/components/button/FloatingActionButton.d.ts +15 -0
  85. package/components/button/FloatingActionButton.figma.tsx +12 -0
  86. package/components/button/FloatingActionButton.jsx +20 -0
  87. package/components/button/FloatingActionButton.prompt.md +6 -0
  88. package/components/button/buttons.card.html +52 -0
  89. package/components/data/Accordion.d.ts +14 -0
  90. package/components/data/Accordion.figma.tsx +12 -0
  91. package/components/data/Accordion.jsx +25 -0
  92. package/components/data/Accordion.prompt.md +5 -0
  93. package/components/data/Avatar.d.ts +18 -0
  94. package/components/data/Avatar.figma.tsx +12 -0
  95. package/components/data/Avatar.jsx +17 -0
  96. package/components/data/Avatar.prompt.md +6 -0
  97. package/components/data/Card.d.ts +23 -0
  98. package/components/data/Card.figma.tsx +12 -0
  99. package/components/data/Card.jsx +27 -0
  100. package/components/data/Card.prompt.md +9 -0
  101. package/components/data/Carousel.d.ts +13 -0
  102. package/components/data/Carousel.figma.tsx +12 -0
  103. package/components/data/Carousel.jsx +26 -0
  104. package/components/data/Carousel.prompt.md +5 -0
  105. package/components/data/Chart.d.ts +17 -0
  106. package/components/data/Chart.figma.tsx +12 -0
  107. package/components/data/Chart.jsx +52 -0
  108. package/components/data/Chart.prompt.md +5 -0
  109. package/components/data/CodeBlock.d.ts +12 -0
  110. package/components/data/CodeBlock.figma.tsx +12 -0
  111. package/components/data/CodeBlock.jsx +21 -0
  112. package/components/data/CodeBlock.prompt.md +5 -0
  113. package/components/data/Comment.d.ts +18 -0
  114. package/components/data/Comment.figma.tsx +12 -0
  115. package/components/data/Comment.jsx +24 -0
  116. package/components/data/Comment.prompt.md +7 -0
  117. package/components/data/DescriptionList.d.ts +10 -0
  118. package/components/data/DescriptionList.figma.tsx +12 -0
  119. package/components/data/DescriptionList.jsx +16 -0
  120. package/components/data/DescriptionList.prompt.md +5 -0
  121. package/components/data/Divider.d.ts +13 -0
  122. package/components/data/Divider.figma.tsx +12 -0
  123. package/components/data/Divider.jsx +11 -0
  124. package/components/data/Divider.prompt.md +6 -0
  125. package/components/data/Image.d.ts +18 -0
  126. package/components/data/Image.figma.tsx +12 -0
  127. package/components/data/Image.jsx +37 -0
  128. package/components/data/Image.prompt.md +5 -0
  129. package/components/data/Kbd.d.ts +8 -0
  130. package/components/data/Kbd.figma.tsx +12 -0
  131. package/components/data/Kbd.jsx +7 -0
  132. package/components/data/Kbd.prompt.md +5 -0
  133. package/components/data/List.d.ts +16 -0
  134. package/components/data/List.figma.tsx +12 -0
  135. package/components/data/List.jsx +24 -0
  136. package/components/data/List.prompt.md +7 -0
  137. package/components/data/Masonry.d.ts +13 -0
  138. package/components/data/Masonry.figma.tsx +12 -0
  139. package/components/data/Masonry.jsx +11 -0
  140. package/components/data/Masonry.prompt.md +5 -0
  141. package/components/data/QRCode.d.ts +12 -0
  142. package/components/data/QRCode.figma.tsx +12 -0
  143. package/components/data/QRCode.jsx +17 -0
  144. package/components/data/QRCode.prompt.md +5 -0
  145. package/components/data/Sortable.d.ts +10 -0
  146. package/components/data/Sortable.figma.tsx +12 -0
  147. package/components/data/Sortable.jsx +30 -0
  148. package/components/data/Sortable.prompt.md +5 -0
  149. package/components/data/Splitter.d.ts +16 -0
  150. package/components/data/Splitter.figma.tsx +12 -0
  151. package/components/data/Splitter.jsx +31 -0
  152. package/components/data/Splitter.prompt.md +5 -0
  153. package/components/data/Stat.d.ts +15 -0
  154. package/components/data/Stat.figma.tsx +12 -0
  155. package/components/data/Stat.jsx +19 -0
  156. package/components/data/Stat.prompt.md +5 -0
  157. package/components/data/Terminal.d.ts +13 -0
  158. package/components/data/Terminal.figma.tsx +12 -0
  159. package/components/data/Terminal.jsx +32 -0
  160. package/components/data/Terminal.prompt.md +5 -0
  161. package/components/data/Timeline.d.ts +17 -0
  162. package/components/data/Timeline.figma.tsx +12 -0
  163. package/components/data/Timeline.jsx +20 -0
  164. package/components/data/Timeline.prompt.md +8 -0
  165. package/components/data/Tooltip.d.ts +14 -0
  166. package/components/data/Tooltip.figma.tsx +12 -0
  167. package/components/data/Tooltip.jsx +12 -0
  168. package/components/data/Tooltip.prompt.md +5 -0
  169. package/components/data/Tree.d.ts +13 -0
  170. package/components/data/Tree.figma.tsx +12 -0
  171. package/components/data/Tree.jsx +23 -0
  172. package/components/data/Tree.prompt.md +5 -0
  173. package/components/data/Watermark.d.ts +15 -0
  174. package/components/data/Watermark.figma.tsx +12 -0
  175. package/components/data/Watermark.jsx +15 -0
  176. package/components/data/Watermark.prompt.md +5 -0
  177. package/components/data/collections.card.html +52 -0
  178. package/components/data/data.card.html +50 -0
  179. package/components/data/qr-encode.js +80 -0
  180. package/components/datatable/DataGrid.d.ts +42 -0
  181. package/components/datatable/DataGrid.figma.tsx +12 -0
  182. package/components/datatable/DataGrid.jsx +149 -0
  183. package/components/datatable/DataGrid.prompt.md +12 -0
  184. package/components/datatable/DataTable.d.ts +25 -0
  185. package/components/datatable/DataTable.figma.tsx +12 -0
  186. package/components/datatable/DataTable.jsx +42 -0
  187. package/components/datatable/DataTable.prompt.md +15 -0
  188. package/components/datatable/TreeTable.d.ts +14 -0
  189. package/components/datatable/TreeTable.figma.tsx +12 -0
  190. package/components/datatable/TreeTable.jsx +47 -0
  191. package/components/datatable/TreeTable.prompt.md +6 -0
  192. package/components/datatable/datatable.card.html +51 -0
  193. package/components/dialog/Dialog.d.ts +22 -0
  194. package/components/dialog/Dialog.figma.tsx +12 -0
  195. package/components/dialog/Dialog.jsx +99 -0
  196. package/components/dialog/Dialog.prompt.md +17 -0
  197. package/components/dialog/dialog.card.html +46 -0
  198. package/components/feedback/Alert.d.ts +16 -0
  199. package/components/feedback/Alert.figma.tsx +17 -0
  200. package/components/feedback/Alert.jsx +29 -0
  201. package/components/feedback/Alert.prompt.md +6 -0
  202. package/components/feedback/Badge.d.ts +15 -0
  203. package/components/feedback/Badge.figma.tsx +12 -0
  204. package/components/feedback/Badge.jsx +12 -0
  205. package/components/feedback/Badge.prompt.md +6 -0
  206. package/components/feedback/EmptyState.d.ts +13 -0
  207. package/components/feedback/EmptyState.figma.tsx +12 -0
  208. package/components/feedback/EmptyState.jsx +16 -0
  209. package/components/feedback/EmptyState.prompt.md +7 -0
  210. package/components/feedback/ProgressBar.d.ts +15 -0
  211. package/components/feedback/ProgressBar.figma.tsx +12 -0
  212. package/components/feedback/ProgressBar.jsx +13 -0
  213. package/components/feedback/ProgressBar.prompt.md +5 -0
  214. package/components/feedback/Result.d.ts +15 -0
  215. package/components/feedback/Result.figma.tsx +12 -0
  216. package/components/feedback/Result.jsx +24 -0
  217. package/components/feedback/Result.prompt.md +7 -0
  218. package/components/feedback/Skeleton.d.ts +18 -0
  219. package/components/feedback/Skeleton.figma.tsx +12 -0
  220. package/components/feedback/Skeleton.jsx +22 -0
  221. package/components/feedback/Skeleton.prompt.md +6 -0
  222. package/components/feedback/Spinner.d.ts +11 -0
  223. package/components/feedback/Spinner.figma.tsx +12 -0
  224. package/components/feedback/Spinner.jsx +10 -0
  225. package/components/feedback/Spinner.prompt.md +5 -0
  226. package/components/feedback/StatusIndicator.d.ts +11 -0
  227. package/components/feedback/StatusIndicator.figma.tsx +12 -0
  228. package/components/feedback/StatusIndicator.jsx +12 -0
  229. package/components/feedback/StatusIndicator.prompt.md +5 -0
  230. package/components/feedback/Tag.d.ts +14 -0
  231. package/components/feedback/Tag.figma.tsx +12 -0
  232. package/components/feedback/Tag.jsx +19 -0
  233. package/components/feedback/Tag.prompt.md +6 -0
  234. package/components/feedback/Toast.d.ts +19 -0
  235. package/components/feedback/Toast.figma.tsx +12 -0
  236. package/components/feedback/Toast.jsx +30 -0
  237. package/components/feedback/Toast.prompt.md +7 -0
  238. package/components/feedback/feedback-2.card.html +43 -0
  239. package/components/feedback/feedback.card.html +50 -0
  240. package/components/forms/Calendar.d.ts +10 -0
  241. package/components/forms/Calendar.figma.tsx +12 -0
  242. package/components/forms/Calendar.jsx +43 -0
  243. package/components/forms/Calendar.prompt.md +5 -0
  244. package/components/forms/Cascader.d.ts +17 -0
  245. package/components/forms/Cascader.figma.tsx +12 -0
  246. package/components/forms/Cascader.jsx +58 -0
  247. package/components/forms/Cascader.prompt.md +5 -0
  248. package/components/forms/Checkbox.d.ts +13 -0
  249. package/components/forms/Checkbox.figma.tsx +12 -0
  250. package/components/forms/Checkbox.jsx +16 -0
  251. package/components/forms/Checkbox.prompt.md +6 -0
  252. package/components/forms/ColorPicker.d.ts +12 -0
  253. package/components/forms/ColorPicker.figma.tsx +12 -0
  254. package/components/forms/ColorPicker.jsx +44 -0
  255. package/components/forms/ColorPicker.prompt.md +5 -0
  256. package/components/forms/Combobox.d.ts +17 -0
  257. package/components/forms/Combobox.figma.tsx +12 -0
  258. package/components/forms/Combobox.jsx +49 -0
  259. package/components/forms/Combobox.prompt.md +6 -0
  260. package/components/forms/DatePicker.d.ts +15 -0
  261. package/components/forms/DatePicker.figma.tsx +12 -0
  262. package/components/forms/DatePicker.jsx +35 -0
  263. package/components/forms/DatePicker.prompt.md +5 -0
  264. package/components/forms/Editor.d.ts +12 -0
  265. package/components/forms/Editor.figma.tsx +12 -0
  266. package/components/forms/Editor.jsx +26 -0
  267. package/components/forms/Editor.prompt.md +5 -0
  268. package/components/forms/FileUpload.d.ts +14 -0
  269. package/components/forms/FileUpload.figma.tsx +12 -0
  270. package/components/forms/FileUpload.jsx +29 -0
  271. package/components/forms/FileUpload.prompt.md +5 -0
  272. package/components/forms/Form.d.ts +87 -0
  273. package/components/forms/Form.figma.tsx +12 -0
  274. package/components/forms/Form.jsx +316 -0
  275. package/components/forms/Form.prompt.md +46 -0
  276. package/components/forms/InlineEdit.d.ts +13 -0
  277. package/components/forms/InlineEdit.figma.tsx +12 -0
  278. package/components/forms/InlineEdit.jsx +27 -0
  279. package/components/forms/InlineEdit.prompt.md +5 -0
  280. package/components/forms/InputGroup.d.ts +20 -0
  281. package/components/forms/InputGroup.figma.tsx +12 -0
  282. package/components/forms/InputGroup.jsx +25 -0
  283. package/components/forms/InputGroup.prompt.md +6 -0
  284. package/components/forms/InputOTP.d.ts +16 -0
  285. package/components/forms/InputOTP.figma.tsx +12 -0
  286. package/components/forms/InputOTP.jsx +47 -0
  287. package/components/forms/InputOTP.prompt.md +5 -0
  288. package/components/forms/Mentions.d.ts +13 -0
  289. package/components/forms/Mentions.figma.tsx +12 -0
  290. package/components/forms/Mentions.jsx +31 -0
  291. package/components/forms/Mentions.prompt.md +5 -0
  292. package/components/forms/NumberField.d.ts +14 -0
  293. package/components/forms/NumberField.figma.tsx +12 -0
  294. package/components/forms/NumberField.jsx +21 -0
  295. package/components/forms/NumberField.prompt.md +5 -0
  296. package/components/forms/RadioGroup.d.ts +24 -0
  297. package/components/forms/RadioGroup.figma.tsx +12 -0
  298. package/components/forms/RadioGroup.jsx +32 -0
  299. package/components/forms/RadioGroup.prompt.md +6 -0
  300. package/components/forms/Rating.d.ts +16 -0
  301. package/components/forms/Rating.figma.tsx +12 -0
  302. package/components/forms/Rating.jsx +22 -0
  303. package/components/forms/Rating.prompt.md +6 -0
  304. package/components/forms/SearchField.d.ts +11 -0
  305. package/components/forms/SearchField.figma.tsx +12 -0
  306. package/components/forms/SearchField.jsx +25 -0
  307. package/components/forms/SearchField.prompt.md +5 -0
  308. package/components/forms/SegmentedControl.d.ts +13 -0
  309. package/components/forms/SegmentedControl.figma.tsx +12 -0
  310. package/components/forms/SegmentedControl.jsx +31 -0
  311. package/components/forms/SegmentedControl.prompt.md +6 -0
  312. package/components/forms/Select.d.ts +19 -0
  313. package/components/forms/Select.figma.tsx +12 -0
  314. package/components/forms/Select.jsx +27 -0
  315. package/components/forms/Select.prompt.md +6 -0
  316. package/components/forms/Slider.d.ts +6 -0
  317. package/components/forms/Slider.figma.tsx +12 -0
  318. package/components/forms/Slider.jsx +8 -0
  319. package/components/forms/Slider.prompt.md +5 -0
  320. package/components/forms/Switch.d.ts +12 -0
  321. package/components/forms/Switch.figma.tsx +12 -0
  322. package/components/forms/Switch.jsx +14 -0
  323. package/components/forms/Switch.prompt.md +5 -0
  324. package/components/forms/TagInput.d.ts +16 -0
  325. package/components/forms/TagInput.figma.tsx +12 -0
  326. package/components/forms/TagInput.jsx +39 -0
  327. package/components/forms/TagInput.prompt.md +5 -0
  328. package/components/forms/Textarea.d.ts +14 -0
  329. package/components/forms/Textarea.figma.tsx +12 -0
  330. package/components/forms/Textarea.jsx +19 -0
  331. package/components/forms/Textarea.prompt.md +5 -0
  332. package/components/forms/TimePicker.d.ts +16 -0
  333. package/components/forms/TimePicker.figma.tsx +12 -0
  334. package/components/forms/TimePicker.jsx +22 -0
  335. package/components/forms/TimePicker.prompt.md +5 -0
  336. package/components/forms/Toggle.d.ts +16 -0
  337. package/components/forms/Toggle.figma.tsx +12 -0
  338. package/components/forms/Toggle.jsx +15 -0
  339. package/components/forms/Toggle.prompt.md +6 -0
  340. package/components/forms/Transfer.d.ts +14 -0
  341. package/components/forms/Transfer.figma.tsx +12 -0
  342. package/components/forms/Transfer.jsx +41 -0
  343. package/components/forms/Transfer.prompt.md +5 -0
  344. package/components/forms/TreeSelect.d.ts +15 -0
  345. package/components/forms/TreeSelect.figma.tsx +12 -0
  346. package/components/forms/TreeSelect.jsx +35 -0
  347. package/components/forms/TreeSelect.prompt.md +5 -0
  348. package/components/forms/forms-2.card.html +40 -0
  349. package/components/forms/forms.card.html +40 -0
  350. package/components/icon/Icon.d.ts +26 -0
  351. package/components/icon/Icon.figma.tsx +12 -0
  352. package/components/icon/Icon.jsx +74 -0
  353. package/components/icon/Icon.prompt.md +8 -0
  354. package/components/icon/icon.card.html +38 -0
  355. package/components/logo/Logo.d.ts +18 -0
  356. package/components/logo/Logo.figma.tsx +12 -0
  357. package/components/logo/Logo.jsx +25 -0
  358. package/components/logo/Logo.prompt.md +10 -0
  359. package/components/logo/logo-data.js +214 -0
  360. package/components/logo/logo.card.html +44 -0
  361. package/components/navigation/Anchor.d.ts +11 -0
  362. package/components/navigation/Anchor.figma.tsx +12 -0
  363. package/components/navigation/Anchor.jsx +25 -0
  364. package/components/navigation/Anchor.prompt.md +5 -0
  365. package/components/navigation/BackTop.d.ts +9 -0
  366. package/components/navigation/BackTop.figma.tsx +12 -0
  367. package/components/navigation/BackTop.jsx +23 -0
  368. package/components/navigation/BackTop.prompt.md +5 -0
  369. package/components/navigation/Breadcrumb.d.ts +14 -0
  370. package/components/navigation/Breadcrumb.figma.tsx +12 -0
  371. package/components/navigation/Breadcrumb.jsx +24 -0
  372. package/components/navigation/Breadcrumb.prompt.md +5 -0
  373. package/components/navigation/CommandPalette.d.ts +19 -0
  374. package/components/navigation/CommandPalette.figma.tsx +12 -0
  375. package/components/navigation/CommandPalette.jsx +48 -0
  376. package/components/navigation/CommandPalette.prompt.md +7 -0
  377. package/components/navigation/Dock.d.ts +6 -0
  378. package/components/navigation/Dock.figma.tsx +12 -0
  379. package/components/navigation/Dock.jsx +22 -0
  380. package/components/navigation/Dock.prompt.md +5 -0
  381. package/components/navigation/HotKeys.d.ts +13 -0
  382. package/components/navigation/HotKeys.figma.tsx +12 -0
  383. package/components/navigation/HotKeys.jsx +44 -0
  384. package/components/navigation/HotKeys.prompt.md +5 -0
  385. package/components/navigation/Link.d.ts +12 -0
  386. package/components/navigation/Link.figma.tsx +12 -0
  387. package/components/navigation/Link.jsx +13 -0
  388. package/components/navigation/Link.prompt.md +5 -0
  389. package/components/navigation/Menu.d.ts +23 -0
  390. package/components/navigation/Menu.figma.tsx +12 -0
  391. package/components/navigation/Menu.jsx +36 -0
  392. package/components/navigation/Menu.prompt.md +9 -0
  393. package/components/navigation/Menubar.d.ts +7 -0
  394. package/components/navigation/Menubar.figma.tsx +12 -0
  395. package/components/navigation/Menubar.jsx +48 -0
  396. package/components/navigation/Menubar.prompt.md +5 -0
  397. package/components/navigation/NavigationMenu.d.ts +7 -0
  398. package/components/navigation/NavigationMenu.figma.tsx +12 -0
  399. package/components/navigation/NavigationMenu.jsx +38 -0
  400. package/components/navigation/NavigationMenu.prompt.md +5 -0
  401. package/components/navigation/Pagination.d.ts +13 -0
  402. package/components/navigation/Pagination.figma.tsx +12 -0
  403. package/components/navigation/Pagination.jsx +32 -0
  404. package/components/navigation/Pagination.prompt.md +5 -0
  405. package/components/navigation/Sidebar.d.ts +20 -0
  406. package/components/navigation/Sidebar.figma.tsx +12 -0
  407. package/components/navigation/Sidebar.jsx +24 -0
  408. package/components/navigation/Sidebar.prompt.md +8 -0
  409. package/components/navigation/Steps.d.ts +13 -0
  410. package/components/navigation/Steps.figma.tsx +12 -0
  411. package/components/navigation/Steps.jsx +20 -0
  412. package/components/navigation/Steps.prompt.md +5 -0
  413. package/components/navigation/Tabs.d.ts +21 -0
  414. package/components/navigation/Tabs.figma.tsx +12 -0
  415. package/components/navigation/Tabs.jsx +41 -0
  416. package/components/navigation/Tabs.prompt.md +6 -0
  417. package/components/navigation/Toolbar.d.ts +16 -0
  418. package/components/navigation/Toolbar.figma.tsx +12 -0
  419. package/components/navigation/Toolbar.jsx +32 -0
  420. package/components/navigation/Toolbar.prompt.md +5 -0
  421. package/components/navigation/navigation.card.html +51 -0
  422. package/components/navigation/shell.card.html +52 -0
  423. package/components/overlays/ContextMenu.d.ts +10 -0
  424. package/components/overlays/ContextMenu.figma.tsx +12 -0
  425. package/components/overlays/ContextMenu.jsx +28 -0
  426. package/components/overlays/ContextMenu.prompt.md +7 -0
  427. package/components/overlays/Drawer.d.ts +18 -0
  428. package/components/overlays/Drawer.figma.tsx +12 -0
  429. package/components/overlays/Drawer.jsx +44 -0
  430. package/components/overlays/Drawer.prompt.md +8 -0
  431. package/components/overlays/HoverCard.d.ts +13 -0
  432. package/components/overlays/HoverCard.figma.tsx +12 -0
  433. package/components/overlays/HoverCard.jsx +17 -0
  434. package/components/overlays/HoverCard.prompt.md +5 -0
  435. package/components/overlays/Popconfirm.d.ts +18 -0
  436. package/components/overlays/Popconfirm.figma.tsx +12 -0
  437. package/components/overlays/Popconfirm.jsx +33 -0
  438. package/components/overlays/Popconfirm.prompt.md +6 -0
  439. package/components/overlays/Popover.d.ts +17 -0
  440. package/components/overlays/Popover.figma.tsx +12 -0
  441. package/components/overlays/Popover.jsx +24 -0
  442. package/components/overlays/Popover.prompt.md +7 -0
  443. package/components/overlays/Tour.d.ts +13 -0
  444. package/components/overlays/Tour.figma.tsx +12 -0
  445. package/components/overlays/Tour.jsx +46 -0
  446. package/components/overlays/Tour.prompt.md +5 -0
  447. package/components/overlays/overlays.card.html +50 -0
  448. package/components/textfield/TextField.d.ts +18 -0
  449. package/components/textfield/TextField.figma.tsx +14 -0
  450. package/components/textfield/TextField.jsx +44 -0
  451. package/components/textfield/TextField.prompt.md +11 -0
  452. package/components/textfield/textfield.card.html +34 -0
  453. package/docs/ci-cd.md +84 -0
  454. package/docs/consuming.md +109 -0
  455. package/docs/contrast-report.md +125 -0
  456. package/docs/conventions.md +114 -0
  457. package/docs/decisions.md +94 -0
  458. package/docs/deploy.md +110 -0
  459. package/docs/design-styles.md +25 -0
  460. package/docs/figma.md +119 -0
  461. package/docs/live-hub.md +58 -0
  462. package/docs/products.md +26 -0
  463. package/docs/quality-gates.md +94 -0
  464. package/docs/release-notes.md +31 -0
  465. package/docs/storybook.md +56 -0
  466. package/docs/sync.md +48 -0
  467. package/docs/template-schema-v2.md +36 -0
  468. package/docs/vi/ci-cd.md +84 -0
  469. package/docs/vi/consuming.md +109 -0
  470. package/docs/vi/contrast-report.md +125 -0
  471. package/docs/vi/conventions.md +114 -0
  472. package/docs/vi/decisions.md +94 -0
  473. package/docs/vi/deploy.md +110 -0
  474. package/docs/vi/design-styles.md +25 -0
  475. package/docs/vi/figma.md +119 -0
  476. package/docs/vi/live-hub.md +58 -0
  477. package/docs/vi/products.md +26 -0
  478. package/docs/vi/quality-gates.md +94 -0
  479. package/docs/vi/release-notes.md +31 -0
  480. package/docs/vi/storybook.md +56 -0
  481. package/docs/vi/sync.md +48 -0
  482. package/docs/vi/template-schema-v2.md +36 -0
  483. package/docs/viewer.html +230 -0
  484. package/fonts/bevietnampro-300-latin-ext.woff2 +0 -0
  485. package/fonts/bevietnampro-300-latin.woff2 +0 -0
  486. package/fonts/bevietnampro-300-vietnamese.woff2 +0 -0
  487. package/fonts/bevietnampro-400-latin-ext.woff2 +0 -0
  488. package/fonts/bevietnampro-400-latin.woff2 +0 -0
  489. package/fonts/bevietnampro-400-vietnamese.woff2 +0 -0
  490. package/fonts/bevietnampro-400i-latin-ext.woff2 +0 -0
  491. package/fonts/bevietnampro-400i-latin.woff2 +0 -0
  492. package/fonts/bevietnampro-400i-vietnamese.woff2 +0 -0
  493. package/fonts/bevietnampro-500-latin-ext.woff2 +0 -0
  494. package/fonts/bevietnampro-500-latin.woff2 +0 -0
  495. package/fonts/bevietnampro-500-vietnamese.woff2 +0 -0
  496. package/fonts/bevietnampro-600-latin-ext.woff2 +0 -0
  497. package/fonts/bevietnampro-600-latin.woff2 +0 -0
  498. package/fonts/bevietnampro-600-vietnamese.woff2 +0 -0
  499. package/fonts/bevietnampro-600i-latin-ext.woff2 +0 -0
  500. package/fonts/bevietnampro-600i-latin.woff2 +0 -0
  501. package/fonts/bevietnampro-600i-vietnamese.woff2 +0 -0
  502. package/fonts/bevietnampro-700-latin-ext.woff2 +0 -0
  503. package/fonts/bevietnampro-700-latin.woff2 +0 -0
  504. package/fonts/bevietnampro-700-vietnamese.woff2 +0 -0
  505. package/fonts/bevietnampro-800-latin-ext.woff2 +0 -0
  506. package/fonts/bevietnampro-800-latin.woff2 +0 -0
  507. package/fonts/bevietnampro-800-vietnamese.woff2 +0 -0
  508. package/fonts/jetbrainsmono-400-cyrillic-ext.woff2 +0 -0
  509. package/fonts/jetbrainsmono-400-cyrillic.woff2 +0 -0
  510. package/fonts/jetbrainsmono-400-greek.woff2 +0 -0
  511. package/fonts/jetbrainsmono-400-latin-ext.woff2 +0 -0
  512. package/fonts/jetbrainsmono-400-latin.woff2 +0 -0
  513. package/fonts/jetbrainsmono-400-vietnamese.woff2 +0 -0
  514. package/fonts/jetbrainsmono-500-cyrillic-ext.woff2 +0 -0
  515. package/fonts/jetbrainsmono-500-cyrillic.woff2 +0 -0
  516. package/fonts/jetbrainsmono-500-greek.woff2 +0 -0
  517. package/fonts/jetbrainsmono-500-latin-ext.woff2 +0 -0
  518. package/fonts/jetbrainsmono-500-latin.woff2 +0 -0
  519. package/fonts/jetbrainsmono-500-vietnamese.woff2 +0 -0
  520. package/fonts/jetbrainsmono-700-cyrillic-ext.woff2 +0 -0
  521. package/fonts/jetbrainsmono-700-cyrillic.woff2 +0 -0
  522. package/fonts/jetbrainsmono-700-greek.woff2 +0 -0
  523. package/fonts/jetbrainsmono-700-latin-ext.woff2 +0 -0
  524. package/fonts/jetbrainsmono-700-latin.woff2 +0 -0
  525. package/fonts/jetbrainsmono-700-vietnamese.woff2 +0 -0
  526. package/guidelines/atomic-view.html +497 -0
  527. package/guidelines/brand-iconography.html +51 -0
  528. package/guidelines/brand-imagery.html +23 -0
  529. package/guidelines/brand-interaction.html +24 -0
  530. package/guidelines/brand-voice.html +24 -0
  531. package/guidelines/colors-anchors.html +20 -0
  532. package/guidelines/colors-semantic.html +19 -0
  533. package/guidelines/colors-surfaces.html +19 -0
  534. package/guidelines/colors-text.html +20 -0
  535. package/guidelines/documents.html +43 -0
  536. package/guidelines/elements-components.html +27 -0
  537. package/guidelines/elements-concept.html +48 -0
  538. package/guidelines/elements-variants.html +49 -0
  539. package/guidelines/motion-interaction.html +29 -0
  540. package/guidelines/motion.html +53 -0
  541. package/guidelines/nav-model.cjs +113 -0
  542. package/guidelines/responsive-bilingual.html +75 -0
  543. package/guidelines/rtl-preview.html +115 -0
  544. package/guidelines/spacing-breakpoints.html +20 -0
  545. package/guidelines/spacing-radius.html +19 -0
  546. package/guidelines/spacing-scale.html +21 -0
  547. package/guidelines/surfaces-aurora.html +20 -0
  548. package/guidelines/surfaces-depth.html +27 -0
  549. package/guidelines/surfaces-glass.html +21 -0
  550. package/guidelines/surfaces-shadow.html +20 -0
  551. package/guidelines/type-families.html +25 -0
  552. package/guidelines/type-lineheight.html +16 -0
  553. package/guidelines/type-scale.html +21 -0
  554. package/guidelines/type-weights.html +20 -0
  555. package/llms.txt +70 -0
  556. package/package.json +88 -0
  557. package/styles.css +39 -0
  558. package/templates/_vendor/deck-stage.js +2584 -0
  559. package/templates/ai-cluster-demo.html +46 -0
  560. package/templates/app-shell/.thumbnail +0 -0
  561. package/templates/app-shell/AppShell.dc.html +80 -0
  562. package/templates/app-shell/content-schema.json +114 -0
  563. package/templates/app-shell/ds-base.js +23 -0
  564. package/templates/app-shell/support.js +1841 -0
  565. package/templates/article/.thumbnail +0 -0
  566. package/templates/article/Article.dc.html +67 -0
  567. package/templates/article/content-schema.json +80 -0
  568. package/templates/article/ds-base.js +23 -0
  569. package/templates/article/support.js +1841 -0
  570. package/templates/auth/.thumbnail +0 -0
  571. package/templates/auth/Auth.dc.html +72 -0
  572. package/templates/auth/content-schema.json +74 -0
  573. package/templates/auth/ds-base.js +23 -0
  574. package/templates/auth/support.js +1841 -0
  575. package/templates/bod-deck/.thumbnail +0 -0
  576. package/templates/bod-deck/BodDeck.dc.html +106 -0
  577. package/templates/bod-deck/content-schema.json +171 -0
  578. package/templates/bod-deck/ds-base.js +23 -0
  579. package/templates/bod-deck/support.js +1841 -0
  580. package/templates/bod-investor-update/.thumbnail +0 -0
  581. package/templates/bod-investor-update/BodInvestorUpdate.dc.html +81 -0
  582. package/templates/bod-investor-update/content-schema.json +105 -0
  583. package/templates/bod-investor-update/ds-base.js +23 -0
  584. package/templates/bod-investor-update/support.js +1841 -0
  585. package/templates/bod-memo/.thumbnail +0 -0
  586. package/templates/bod-memo/BodMemo.dc.html +87 -0
  587. package/templates/bod-memo/ds-base.js +23 -0
  588. package/templates/bod-memo/support.js +1841 -0
  589. package/templates/bod-minutes/.thumbnail +0 -0
  590. package/templates/bod-minutes/BodMinutes.dc.html +84 -0
  591. package/templates/bod-minutes/ds-base.js +23 -0
  592. package/templates/bod-minutes/support.js +1841 -0
  593. package/templates/bod-report/.thumbnail +0 -0
  594. package/templates/bod-report/BodReport.dc.html +106 -0
  595. package/templates/bod-report/content-schema.json +29 -0
  596. package/templates/bod-report/ds-base.js +23 -0
  597. package/templates/bod-report/support.js +1841 -0
  598. package/templates/bod-resolution/.thumbnail +0 -0
  599. package/templates/bod-resolution/BodResolution.dc.html +87 -0
  600. package/templates/bod-resolution/content-schema.json +123 -0
  601. package/templates/bod-resolution/ds-base.js +23 -0
  602. package/templates/bod-resolution/support.js +1841 -0
  603. package/templates/culture-event-invite/.thumbnail +0 -0
  604. package/templates/culture-event-invite/CultureEventInvite.dc.html +73 -0
  605. package/templates/culture-event-invite/ds-base.js +23 -0
  606. package/templates/culture-event-invite/support.js +1841 -0
  607. package/templates/dashboard/.thumbnail +0 -0
  608. package/templates/dashboard/Dashboard.dc.html +120 -0
  609. package/templates/dashboard/content-schema.json +97 -0
  610. package/templates/dashboard/ds-base.js +23 -0
  611. package/templates/dashboard/support.js +1841 -0
  612. package/templates/delivery-change-note/.thumbnail +0 -0
  613. package/templates/delivery-change-note/DeliveryChangeNote.dc.html +85 -0
  614. package/templates/delivery-change-note/content-schema.json +158 -0
  615. package/templates/delivery-change-note/ds-base.js +23 -0
  616. package/templates/delivery-change-note/support.js +1841 -0
  617. package/templates/delivery-kickoff/.thumbnail +0 -0
  618. package/templates/delivery-kickoff/DeliveryKickoff.dc.html +112 -0
  619. package/templates/delivery-kickoff/content-schema.json +223 -0
  620. package/templates/delivery-kickoff/ds-base.js +23 -0
  621. package/templates/delivery-kickoff/support.js +1841 -0
  622. package/templates/delivery-qbr-deck/.thumbnail +0 -0
  623. package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +118 -0
  624. package/templates/delivery-qbr-deck/content-schema.json +177 -0
  625. package/templates/delivery-qbr-deck/ds-base.js +23 -0
  626. package/templates/delivery-qbr-deck/support.js +1841 -0
  627. package/templates/delivery-runbook/.thumbnail +0 -0
  628. package/templates/delivery-runbook/DeliveryRunbook.dc.html +91 -0
  629. package/templates/delivery-runbook/content-schema.json +211 -0
  630. package/templates/delivery-runbook/ds-base.js +23 -0
  631. package/templates/delivery-runbook/support.js +1841 -0
  632. package/templates/delivery-status-email/.thumbnail +0 -0
  633. package/templates/delivery-status-email/DeliveryStatusEmail.dc.html +78 -0
  634. package/templates/delivery-status-email/ds-base.js +23 -0
  635. package/templates/delivery-status-email/support.js +1841 -0
  636. package/templates/doc-style-guide/.thumbnail +0 -0
  637. package/templates/doc-style-guide/DocStyleGuide.dc.html +148 -0
  638. package/templates/doc-style-guide/ds-base.js +23 -0
  639. package/templates/doc-style-guide/support.js +1841 -0
  640. package/templates/doc-suite-index/.thumbnail +0 -0
  641. package/templates/doc-suite-index/DocSuiteIndex.dc.html +201 -0
  642. package/templates/doc-suite-index/content-schema.json +12 -0
  643. package/templates/doc-suite-index/ds-base.js +23 -0
  644. package/templates/doc-suite-index/support.js +1841 -0
  645. package/templates/doc-templates/.thumbnail +0 -0
  646. package/templates/doc-templates/DocTemplates.dc.html +118 -0
  647. package/templates/doc-templates/ds-base.js +23 -0
  648. package/templates/doc-templates/support.js +1841 -0
  649. package/templates/email/.thumbnail +0 -0
  650. package/templates/email/Email-VN-standalone.html +59 -0
  651. package/templates/email/Email.dc.html +67 -0
  652. package/templates/email/ds-base.js +23 -0
  653. package/templates/email/support.js +1841 -0
  654. package/templates/email-safe/README.md +28 -0
  655. package/templates/email-safe/email-announcement.html +88 -0
  656. package/templates/email-safe/email-dunning.html +59 -0
  657. package/templates/email-safe/email-investor.html +88 -0
  658. package/templates/email-safe/email-launch.html +88 -0
  659. package/templates/email-safe/email-newsletter.html +62 -0
  660. package/templates/email-safe/email-status.html +88 -0
  661. package/templates/email-safe/email-transactional.html +88 -0
  662. package/templates/finance-dunning-email/.thumbnail +0 -0
  663. package/templates/finance-dunning-email/FinanceDunningEmail.dc.html +58 -0
  664. package/templates/finance-dunning-email/ds-base.js +23 -0
  665. package/templates/finance-dunning-email/support.js +1841 -0
  666. package/templates/finance-expense-report/.thumbnail +0 -0
  667. package/templates/finance-expense-report/FinanceExpenseReport.dc.html +82 -0
  668. package/templates/finance-expense-report/ds-base.js +23 -0
  669. package/templates/finance-expense-report/support.js +1841 -0
  670. package/templates/finance-invoice/.thumbnail +0 -0
  671. package/templates/finance-invoice/FinanceInvoice.dc.html +92 -0
  672. package/templates/finance-invoice/ds-base.js +23 -0
  673. package/templates/finance-invoice/support.js +1841 -0
  674. package/templates/finance-quote/.thumbnail +0 -0
  675. package/templates/finance-quote/FinanceQuote.dc.html +86 -0
  676. package/templates/finance-quote/ds-base.js +23 -0
  677. package/templates/finance-quote/support.js +1841 -0
  678. package/templates/hr-announcement/.thumbnail +0 -0
  679. package/templates/hr-announcement/HrAnnouncement.dc.html +64 -0
  680. package/templates/hr-announcement/ds-base.js +23 -0
  681. package/templates/hr-announcement/support.js +1841 -0
  682. package/templates/hr-interview-kit/.thumbnail +0 -0
  683. package/templates/hr-interview-kit/HrInterviewKit.dc.html +102 -0
  684. package/templates/hr-interview-kit/ds-base.js +23 -0
  685. package/templates/hr-interview-kit/support.js +1841 -0
  686. package/templates/hr-offboarding/.thumbnail +0 -0
  687. package/templates/hr-offboarding/HrOffboarding.dc.html +86 -0
  688. package/templates/hr-offboarding/ds-base.js +23 -0
  689. package/templates/hr-offboarding/support.js +1841 -0
  690. package/templates/hr-performance-review/.thumbnail +0 -0
  691. package/templates/hr-performance-review/HrPerformanceReview.dc.html +95 -0
  692. package/templates/hr-performance-review/ds-base.js +23 -0
  693. package/templates/hr-performance-review/support.js +1841 -0
  694. package/templates/hr-pip/.thumbnail +0 -0
  695. package/templates/hr-pip/HrPip.dc.html +73 -0
  696. package/templates/hr-pip/ds-base.js +23 -0
  697. package/templates/hr-pip/support.js +1841 -0
  698. package/templates/image-slots-demo.html +57 -0
  699. package/templates/kitchen-sink.html +127 -0
  700. package/templates/legal-msa/.thumbnail +0 -0
  701. package/templates/legal-msa/LegalMsa.dc.html +85 -0
  702. package/templates/legal-msa/ds-base.js +23 -0
  703. package/templates/legal-msa/support.js +1841 -0
  704. package/templates/legal-sow/.thumbnail +0 -0
  705. package/templates/legal-sow/LegalSow.dc.html +125 -0
  706. package/templates/legal-sow/ds-base.js +23 -0
  707. package/templates/legal-sow/support.js +1841 -0
  708. package/templates/marketing-campaign-brief/.thumbnail +0 -0
  709. package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +86 -0
  710. package/templates/marketing-campaign-brief/content-schema.json +139 -0
  711. package/templates/marketing-campaign-brief/ds-base.js +23 -0
  712. package/templates/marketing-campaign-brief/support.js +1841 -0
  713. package/templates/marketing-case-study/.thumbnail +0 -0
  714. package/templates/marketing-case-study/MarketingCaseStudy.dc.html +82 -0
  715. package/templates/marketing-case-study/content-schema.json +103 -0
  716. package/templates/marketing-case-study/ds-base.js +23 -0
  717. package/templates/marketing-case-study/support.js +1841 -0
  718. package/templates/marketing-launch/.thumbnail +0 -0
  719. package/templates/marketing-launch/MarketingLaunch.dc.html +84 -0
  720. package/templates/marketing-launch/ds-base.js +23 -0
  721. package/templates/marketing-launch/support.js +1841 -0
  722. package/templates/marketing-newsletter/.thumbnail +0 -0
  723. package/templates/marketing-newsletter/MarketingNewsletter.dc.html +109 -0
  724. package/templates/marketing-newsletter/ds-base.js +23 -0
  725. package/templates/marketing-newsletter/support.js +1841 -0
  726. package/templates/marketing-page/.thumbnail +0 -0
  727. package/templates/marketing-page/MarketingPage.dc.html +132 -0
  728. package/templates/marketing-page/content-schema.json +33 -0
  729. package/templates/marketing-page/ds-base.js +23 -0
  730. package/templates/marketing-page/support.js +1841 -0
  731. package/templates/marketing-press-release/.thumbnail +0 -0
  732. package/templates/marketing-press-release/MarketingPressRelease.dc.html +84 -0
  733. package/templates/marketing-press-release/content-schema.json +116 -0
  734. package/templates/marketing-press-release/ds-base.js +23 -0
  735. package/templates/marketing-press-release/support.js +1841 -0
  736. package/templates/marketing-social-kit/.thumbnail +0 -0
  737. package/templates/marketing-social-kit/MarketingSocialKit.dc.html +77 -0
  738. package/templates/marketing-social-kit/content-schema.json +54 -0
  739. package/templates/marketing-social-kit/ds-base.js +23 -0
  740. package/templates/marketing-social-kit/support.js +1841 -0
  741. package/templates/playground.html +79 -0
  742. package/templates/sales-one-pager/.thumbnail +0 -0
  743. package/templates/sales-one-pager/SalesOnePager.dc.html +103 -0
  744. package/templates/sales-one-pager/content-schema.json +73 -0
  745. package/templates/sales-one-pager/ds-base.js +23 -0
  746. package/templates/sales-one-pager/support.js +1841 -0
  747. package/templates/sales-proposal-deck/.thumbnail +0 -0
  748. package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +159 -0
  749. package/templates/sales-proposal-deck/content-schema.json +273 -0
  750. package/templates/sales-proposal-deck/ds-base.js +23 -0
  751. package/templates/sales-proposal-deck/support.js +1841 -0
  752. package/templates/schema/content-schema.schema.json +31 -0
  753. package/templates/settings/.thumbnail +0 -0
  754. package/templates/settings/Settings.dc.html +86 -0
  755. package/templates/settings/content-schema.json +131 -0
  756. package/templates/settings/ds-base.js +23 -0
  757. package/templates/settings/support.js +1841 -0
  758. package/templates/slide-deck/.thumbnail +0 -0
  759. package/templates/slide-deck/SlideDeck.dc.html +86 -0
  760. package/templates/slide-deck/content-schema.json +23 -0
  761. package/templates/slide-deck/ds-base.js +23 -0
  762. package/templates/slide-deck/support.js +1841 -0
  763. package/templates/team-meeting-agenda/.thumbnail +0 -0
  764. package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +93 -0
  765. package/templates/team-meeting-agenda/ds-base.js +23 -0
  766. package/templates/team-meeting-agenda/support.js +1841 -0
  767. package/templates/tech-incident-report/.thumbnail +0 -0
  768. package/templates/tech-incident-report/TechIncidentReport.dc.html +111 -0
  769. package/templates/tech-incident-report/content-schema.json +25 -0
  770. package/templates/tech-incident-report/ds-base.js +23 -0
  771. package/templates/tech-incident-report/support.js +1841 -0
  772. package/templates/tech-release-notes/.thumbnail +0 -0
  773. package/templates/tech-release-notes/TechReleaseNotes.dc.html +79 -0
  774. package/templates/tech-release-notes/ds-base.js +23 -0
  775. package/templates/tech-release-notes/support.js +1841 -0
  776. package/templates/tech-retro/.thumbnail +0 -0
  777. package/templates/tech-retro/TechRetro.dc.html +84 -0
  778. package/templates/tech-retro/ds-base.js +23 -0
  779. package/templates/tech-retro/support.js +1841 -0
  780. package/templates/tech-rfc/.thumbnail +0 -0
  781. package/templates/tech-rfc/TechRfc.dc.html +87 -0
  782. package/templates/tech-rfc/content-schema.json +115 -0
  783. package/templates/tech-rfc/ds-base.js +23 -0
  784. package/templates/tech-rfc/support.js +1841 -0
  785. package/templates/vn-appointment-transfer/.thumbnail +0 -0
  786. package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +101 -0
  787. package/templates/vn-appointment-transfer/ds-base.js +23 -0
  788. package/templates/vn-appointment-transfer/support.js +1841 -0
  789. package/templates/vn-certificate-of-employment/.thumbnail +0 -0
  790. package/templates/vn-certificate-of-employment/VnCertificateOfEmployment.dc.html +84 -0
  791. package/templates/vn-certificate-of-employment/ds-base.js +23 -0
  792. package/templates/vn-certificate-of-employment/support.js +1841 -0
  793. package/templates/vn-code-of-conduct/.thumbnail +0 -0
  794. package/templates/vn-code-of-conduct/VnCodeOfConduct.dc.html +105 -0
  795. package/templates/vn-code-of-conduct/ds-base.js +23 -0
  796. package/templates/vn-code-of-conduct/support.js +1841 -0
  797. package/templates/vn-compensation-regulation/.thumbnail +0 -0
  798. package/templates/vn-compensation-regulation/VnCompensationRegulation.dc.html +122 -0
  799. package/templates/vn-compensation-regulation/ds-base.js +23 -0
  800. package/templates/vn-compensation-regulation/support.js +1841 -0
  801. package/templates/vn-contract-amendment/.thumbnail +0 -0
  802. package/templates/vn-contract-amendment/VnContractAmendment.dc.html +107 -0
  803. package/templates/vn-contract-amendment/ds-base.js +23 -0
  804. package/templates/vn-contract-amendment/support.js +1841 -0
  805. package/templates/vn-contractor-agreement/.thumbnail +0 -0
  806. package/templates/vn-contractor-agreement/VnContractorAgreement.dc.html +120 -0
  807. package/templates/vn-contractor-agreement/ds-base.js +23 -0
  808. package/templates/vn-contractor-agreement/support.js +1841 -0
  809. package/templates/vn-data-protection-policy/.thumbnail +0 -0
  810. package/templates/vn-data-protection-policy/VnDataProtectionPolicy.dc.html +116 -0
  811. package/templates/vn-data-protection-policy/ds-base.js +23 -0
  812. package/templates/vn-data-protection-policy/support.js +1841 -0
  813. package/templates/vn-disciplinary-case-file/.thumbnail +0 -0
  814. package/templates/vn-disciplinary-case-file/VnDisciplinaryCaseFile.dc.html +172 -0
  815. package/templates/vn-disciplinary-case-file/ds-base.js +23 -0
  816. package/templates/vn-disciplinary-case-file/support.js +1841 -0
  817. package/templates/vn-disciplinary-schedule/.thumbnail +0 -0
  818. package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +91 -0
  819. package/templates/vn-disciplinary-schedule/ds-base.js +23 -0
  820. package/templates/vn-disciplinary-schedule/support.js +1841 -0
  821. package/templates/vn-employee-request/.thumbnail +0 -0
  822. package/templates/vn-employee-request/VnEmployeeRequest.dc.html +137 -0
  823. package/templates/vn-employee-request/ds-base.js +23 -0
  824. package/templates/vn-employee-request/support.js +1841 -0
  825. package/templates/vn-exit-handover/.thumbnail +0 -0
  826. package/templates/vn-exit-handover/VnExitHandover.dc.html +228 -0
  827. package/templates/vn-exit-handover/ds-base.js +23 -0
  828. package/templates/vn-exit-handover/support.js +1841 -0
  829. package/templates/vn-foreign-employee-pack/.thumbnail +0 -0
  830. package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +129 -0
  831. package/templates/vn-foreign-employee-pack/content-schema.json +22 -0
  832. package/templates/vn-foreign-employee-pack/ds-base.js +23 -0
  833. package/templates/vn-foreign-employee-pack/support.js +1841 -0
  834. package/templates/vn-grassroots-democracy/.thumbnail +0 -0
  835. package/templates/vn-grassroots-democracy/VnGrassrootsDemocracy.dc.html +117 -0
  836. package/templates/vn-grassroots-democracy/ds-base.js +23 -0
  837. package/templates/vn-grassroots-democracy/support.js +1841 -0
  838. package/templates/vn-infosec-policy/.thumbnail +0 -0
  839. package/templates/vn-infosec-policy/VnInfosecPolicy.dc.html +116 -0
  840. package/templates/vn-infosec-policy/ds-base.js +23 -0
  841. package/templates/vn-infosec-policy/support.js +1841 -0
  842. package/templates/vn-internal-labor-regulations/.thumbnail +0 -0
  843. package/templates/vn-internal-labor-regulations/VnInternalLaborRegulations.dc.html +155 -0
  844. package/templates/vn-internal-labor-regulations/ds-base.js +23 -0
  845. package/templates/vn-internal-labor-regulations/support.js +1841 -0
  846. package/templates/vn-internship-agreement/.thumbnail +0 -0
  847. package/templates/vn-internship-agreement/VnInternshipAgreement.dc.html +112 -0
  848. package/templates/vn-internship-agreement/ds-base.js +23 -0
  849. package/templates/vn-internship-agreement/support.js +1841 -0
  850. package/templates/vn-job-description/.thumbnail +0 -0
  851. package/templates/vn-job-description/VnJobDescription.dc.html +85 -0
  852. package/templates/vn-job-description/ds-base.js +23 -0
  853. package/templates/vn-job-description/support.js +1841 -0
  854. package/templates/vn-labor-contract/.thumbnail +0 -0
  855. package/templates/vn-labor-contract/VnLaborContract.dc.html +180 -0
  856. package/templates/vn-labor-contract/ds-base.js +23 -0
  857. package/templates/vn-labor-contract/support.js +1841 -0
  858. package/templates/vn-labour-management-book/.thumbnail +0 -0
  859. package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +115 -0
  860. package/templates/vn-labour-management-book/ds-base.js +23 -0
  861. package/templates/vn-labour-management-book/support.js +1841 -0
  862. package/templates/vn-mutual-nda/.thumbnail +0 -0
  863. package/templates/vn-mutual-nda/VnMutualNda.dc.html +114 -0
  864. package/templates/vn-mutual-nda/ds-base.js +23 -0
  865. package/templates/vn-mutual-nda/support.js +1841 -0
  866. package/templates/vn-ndnca-ip/.thumbnail +0 -0
  867. package/templates/vn-ndnca-ip/VnNdncaIp.dc.html +157 -0
  868. package/templates/vn-ndnca-ip/ds-base.js +23 -0
  869. package/templates/vn-ndnca-ip/support.js +1841 -0
  870. package/templates/vn-offer-letter/.thumbnail +0 -0
  871. package/templates/vn-offer-letter/VnOfferLetter.dc.html +84 -0
  872. package/templates/vn-offer-letter/ds-base.js +23 -0
  873. package/templates/vn-offer-letter/support.js +1841 -0
  874. package/templates/vn-onboarding-checklist/.thumbnail +0 -0
  875. package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +98 -0
  876. package/templates/vn-onboarding-checklist/content-schema.json +12 -0
  877. package/templates/vn-onboarding-checklist/ds-base.js +23 -0
  878. package/templates/vn-onboarding-checklist/support.js +1841 -0
  879. package/templates/vn-pdpl-consent/.thumbnail +0 -0
  880. package/templates/vn-pdpl-consent/VnPdplConsent.dc.html +111 -0
  881. package/templates/vn-pdpl-consent/ds-base.js +23 -0
  882. package/templates/vn-pdpl-consent/support.js +1841 -0
  883. package/templates/vn-performance-evaluation-regulation/.thumbnail +0 -0
  884. package/templates/vn-performance-evaluation-regulation/VnPerformanceEvaluationRegulation.dc.html +135 -0
  885. package/templates/vn-performance-evaluation-regulation/ds-base.js +23 -0
  886. package/templates/vn-performance-evaluation-regulation/support.js +1841 -0
  887. package/templates/vn-performance-review-form/.thumbnail +0 -0
  888. package/templates/vn-performance-review-form/VnPerformanceReviewForm.dc.html +129 -0
  889. package/templates/vn-performance-review-form/ds-base.js +23 -0
  890. package/templates/vn-performance-review-form/support.js +1841 -0
  891. package/templates/vn-phantom-stock/.thumbnail +0 -0
  892. package/templates/vn-phantom-stock/VnPhantomStock.dc.html +184 -0
  893. package/templates/vn-phantom-stock/content-schema.json +17 -0
  894. package/templates/vn-phantom-stock/ds-base.js +23 -0
  895. package/templates/vn-phantom-stock/support.js +1841 -0
  896. package/templates/vn-probation-contract/.thumbnail +0 -0
  897. package/templates/vn-probation-contract/VnProbationContract.dc.html +126 -0
  898. package/templates/vn-probation-contract/ds-base.js +23 -0
  899. package/templates/vn-probation-contract/support.js +1841 -0
  900. package/templates/vn-receipt-acknowledgement/.thumbnail +0 -0
  901. package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +106 -0
  902. package/templates/vn-receipt-acknowledgement/ds-base.js +23 -0
  903. package/templates/vn-receipt-acknowledgement/support.js +1841 -0
  904. package/templates/vn-remote-work-policy/.thumbnail +0 -0
  905. package/templates/vn-remote-work-policy/VnRemoteWorkPolicy.dc.html +103 -0
  906. package/templates/vn-remote-work-policy/ds-base.js +23 -0
  907. package/templates/vn-remote-work-policy/support.js +1841 -0
  908. package/templates/vn-resignation-letter/.thumbnail +0 -0
  909. package/templates/vn-resignation-letter/VnResignationLetter.dc.html +71 -0
  910. package/templates/vn-resignation-letter/ds-base.js +23 -0
  911. package/templates/vn-resignation-letter/support.js +1841 -0
  912. package/templates/vn-salary-scale/.thumbnail +0 -0
  913. package/templates/vn-salary-scale/VnSalaryScale.dc.html +110 -0
  914. package/templates/vn-salary-scale/ds-base.js +23 -0
  915. package/templates/vn-salary-scale/support.js +1841 -0
  916. package/templates/vn-sow-appendix/.thumbnail +0 -0
  917. package/templates/vn-sow-appendix/VnSowAppendix.dc.html +70 -0
  918. package/templates/vn-sow-appendix/ds-base.js +23 -0
  919. package/templates/vn-sow-appendix/support.js +1841 -0
  920. package/templates/vn-termination-decision/.thumbnail +0 -0
  921. package/templates/vn-termination-decision/VnTerminationDecision.dc.html +80 -0
  922. package/templates/vn-termination-decision/ds-base.js +23 -0
  923. package/templates/vn-termination-decision/support.js +1841 -0
  924. package/templates/vn-total-rewards-appendix/.thumbnail +0 -0
  925. package/templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html +138 -0
  926. package/templates/vn-total-rewards-appendix/ds-base.js +23 -0
  927. package/templates/vn-total-rewards-appendix/support.js +1841 -0
  928. package/templates/vn-training-commitment/.thumbnail +0 -0
  929. package/templates/vn-training-commitment/VnTrainingCommitment.dc.html +105 -0
  930. package/templates/vn-training-commitment/ds-base.js +23 -0
  931. package/templates/vn-training-commitment/support.js +1841 -0
  932. package/templates/vn-travel-expense-policy/.thumbnail +0 -0
  933. package/templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html +113 -0
  934. package/templates/vn-travel-expense-policy/ds-base.js +23 -0
  935. package/templates/vn-travel-expense-policy/support.js +1841 -0
  936. package/tokens/colors.css +77 -0
  937. package/tokens/component-tokens.css +46 -0
  938. package/tokens/elements.css +300 -0
  939. package/tokens/elevation.css +46 -0
  940. package/tokens/fonts.css +51 -0
  941. package/tokens/motion.css +25 -0
  942. package/tokens/native/CSTokens.kt +255 -0
  943. package/tokens/native/CSTokens.swift +257 -0
  944. package/tokens/native/cs_tokens.dart +253 -0
  945. package/tokens/provenance.json +52 -0
  946. package/tokens/spacing.css +34 -0
  947. package/tokens/tokens.dtcg.json +1222 -0
  948. package/tokens/tokens.js +436 -0
  949. package/tokens/tokens.json +434 -0
  950. package/tokens/typography.css +67 -0
  951. package/tokens/viewer.html +261 -0
  952. package/ui_kits/deck/README.md +21 -0
  953. package/ui_kits/deck/index.html +120 -0
  954. package/ui_kits/status-hub/README.md +40 -0
  955. package/ui_kits/status-hub/StatusHub.jsx +270 -0
  956. package/ui_kits/status-hub/data.js +57 -0
  957. package/ui_kits/status-hub/identity-lab.html +134 -0
  958. package/ui_kits/status-hub/index.html +24 -0
  959. package/ui_kits/status-hub/login.html +65 -0
  960. package/ui_kits/status-hub/project.html +137 -0
  961. package/ui_kits/status-hub/settings.html +88 -0
  962. package/ui_kits/status-hub/status.css +199 -0
  963. package/ui_kits/website/README.md +36 -0
  964. package/ui_kits/website/Website.jsx +167 -0
  965. package/ui_kits/website/careers.html +109 -0
  966. package/ui_kits/website/chat.html +133 -0
  967. package/ui_kits/website/copy.js +76 -0
  968. package/ui_kits/website/index.html +24 -0
  969. package/ui_kits/website/site.css +121 -0
  970. package/ui_kits/website/work.html +119 -0
package/guidelines/nav-model.cjs ADDED
@@ -0,0 +1,113 @@
1
+ /**
2
+ * Pure nav model for Atomic View sidebars.
3
+ * Shared so grouping + sort stay unit-testable and not hand-edited in JSX.
4
+ */
5
+ (function (root, factory) {
6
+ const api = factory();
7
+ if (typeof module === "object" && module.exports) module.exports = api;
8
+ root.__csNavModel = api;
9
+ })(typeof globalThis !== "undefined" ? globalThis : this, function () {
10
+ const TEMPLATE_ORDER = [
11
+ "Product",
12
+ "Board",
13
+ "Marketing",
14
+ "Sales",
15
+ "Delivery",
16
+ "Tech",
17
+ "Team",
18
+ "Culture",
19
+ "Finance",
20
+ "Legal",
21
+ "HR",
22
+ "Documents",
23
+ "Other",
24
+ ];
25
+
26
+ const PRODUCT_BARE = new Set([
27
+ "App shell",
28
+ "Article",
29
+ "Dashboard",
30
+ "Email",
31
+ "Marketing page",
32
+ "Settings",
33
+ "Sign in",
34
+ "Slide deck",
35
+ ]);
36
+
37
+ function classifyTemplate(name) {
38
+ const n = String(name || "");
39
+ if (/^HR Suite\b/i.test(n) || /^HR\s*·/i.test(n) || /^HR\s/i.test(n)) return "HR";
40
+ if (n.includes(" · ")) return n.split(" · ")[0].trim() || "Other";
41
+ if (PRODUCT_BARE.has(n)) return "Product";
42
+ return "Other";
43
+ }
44
+
45
+ function templateShortName(name) {
46
+ const n = String(name || "");
47
+ if (/^HR Suite\s*·\s*/i.test(n)) return n.replace(/^HR Suite\s*·\s*/i, "");
48
+ if (/^HR\s*·\s*/i.test(n)) return n.replace(/^HR\s*·\s*/i, "");
49
+ if (n.includes(" · ")) return n.split(" · ").slice(1).join(" · ").trim() || n;
50
+ return n;
51
+ }
52
+
53
+ /** stories: [{tier, name, grp, ...}] → Map tier → Map grp → sorted stories */
54
+ function groupStories(stories) {
55
+ const byTier = new Map();
56
+ for (const s of stories || []) {
57
+ if (!byTier.has(s.tier)) byTier.set(s.tier, new Map());
58
+ const byGrp = byTier.get(s.tier);
59
+ const g = s.grp || "Other";
60
+ if (!byGrp.has(g)) byGrp.set(g, []);
61
+ byGrp.get(g).push(s);
62
+ }
63
+ for (const byGrp of byTier.values()) {
64
+ for (const [g, arr] of byGrp) {
65
+ arr.sort((a, b) => String(a.name).localeCompare(String(b.name)));
66
+ byGrp.set(g, arr);
67
+ }
68
+ }
69
+ return byTier;
70
+ }
71
+
72
+ /** Sorted group names for a tier map */
73
+ function sortedGroupNames(byGrp) {
74
+ return [...byGrp.keys()].sort((a, b) => a.localeCompare(b));
75
+ }
76
+
77
+ /**
78
+ * items: [{name, src}]
79
+ * returns [{ category, items: [{name, src, shortName}] }] in TEMPLATE_ORDER
80
+ */
81
+ function groupTemplates(items) {
82
+ const buckets = new Map();
83
+ for (const it of items || []) {
84
+ const cat = classifyTemplate(it.name);
85
+ if (!buckets.has(cat)) buckets.set(cat, []);
86
+ buckets.get(cat).push({
87
+ ...it,
88
+ shortName: templateShortName(it.name),
89
+ category: cat,
90
+ });
91
+ }
92
+ for (const arr of buckets.values()) {
93
+ arr.sort((a, b) => String(a.shortName).localeCompare(String(b.shortName)));
94
+ }
95
+ const orderIdx = (c) => {
96
+ const i = TEMPLATE_ORDER.indexOf(c);
97
+ return i < 0 ? 999 : i;
98
+ };
99
+ return [...buckets.keys()]
100
+ .sort((a, b) => orderIdx(a) - orderIdx(b) || a.localeCompare(b))
101
+ .map((category) => ({ category, items: buckets.get(category) }));
102
+ }
103
+
104
+ return {
105
+ TEMPLATE_ORDER,
106
+ PRODUCT_BARE,
107
+ classifyTemplate,
108
+ templateShortName,
109
+ groupStories,
110
+ sortedGroupNames,
111
+ groupTemplates,
112
+ };
113
+ });
package/guidelines/responsive-bilingual.html ADDED
@@ -0,0 +1,75 @@
1
+ <!-- @dsCard group="Responsive & Bilingual" viewport="860x600" name="Adaptation rules" subtitle="Reflow across device widths · complete language separation" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body{margin:0;background:var(--cs-color-surface-page);padding:26px 28px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
+ h2{margin:0 0 3px;font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--cs-color-brand-umber)}
8
+ .eyebrow{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--cs-color-text-accent);margin-bottom:3px}
9
+ .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
10
+ .panel{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);background:var(--cs-color-surface-panel);padding:16px 18px}
11
+ .lead{font-size:11.5px;line-height:1.5;color:var(--cs-color-text-muted);margin:2px 0 13px}
12
+ /* device row */
13
+ .devs{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px}
14
+ .dev{display:flex;flex-direction:column;align-items:center;gap:5px}
15
+ .scr{border:2px solid var(--cs-color-brand-umber);border-radius:8px;background:var(--cs-color-surface-raised);padding:6px;display:grid;gap:3px}
16
+ .cell{background:var(--cs-accent);border-radius:2px;height:11px}
17
+ .cell.b{background:var(--cs-color-brand-ochre)}
18
+ .phone .scr{width:52px;grid-template-columns:1fr}
19
+ .tablet .scr{width:96px;grid-template-columns:1fr 1fr}
20
+ .desktop .scr{width:150px;grid-template-columns:1fr 1fr 1fr 1fr}
21
+ .dlab{font-size:9.5px;font-family:var(--cs-font-family-mono);color:var(--cs-color-text-muted)}
22
+ .dw{font-size:10.5px;font-weight:700}
23
+ ul{margin:0;padding-left:15px}
24
+ li{font-size:11px;line-height:1.62;color:var(--cs-color-text-primary);margin-bottom:3px}
25
+ li b{color:var(--cs-color-brand-umber)}
26
+ code{font-family:var(--cs-font-family-mono);font-size:10px;background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default);border-radius:3px;padding:0 3px}
27
+ /* bilingual */
28
+ .toggle{display:inline-flex;border:1px solid var(--cs-color-border-default);border-radius:999px;overflow:hidden;margin-bottom:12px}
29
+ .toggle span{font-size:10.5px;font-weight:700;padding:4px 11px}
30
+ .toggle .on{background:var(--cs-color-brand-umber);color:#fff}
31
+ .toggle .off{color:var(--cs-color-text-muted)}
32
+ .mini{border:1px solid var(--cs-color-border-default);border-radius:8px;padding:9px 12px;margin-bottom:7px;background:var(--cs-color-surface-raised)}
33
+ .mini .k{font-size:8.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--cs-color-text-accent);font-weight:800}
34
+ .mini .t{font-size:12px;font-weight:700;margin-top:1px}
35
+ .mini .s{font-size:10.5px;color:var(--cs-color-text-muted);margin-top:1px}
36
+ .bad{border-left:3px solid var(--cs-color-semantic-danger)}
37
+ .good{border-left:3px solid var(--cs-color-semantic-success)}
38
+ .note{font-size:10.5px;line-height:1.55;color:var(--cs-color-text-muted);margin-top:11px;border-top:1px dashed var(--cs-color-border-default);padding-top:9px}
39
+ .note b{color:var(--cs-color-brand-umber)}
40
+ .keep{display:inline-block;background:var(--cs-accent-tint);border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;color:var(--cs-color-text-accent);margin:2px 4px 0 0}
41
+ </style></head>
42
+ <body>
43
+ <div class="grid">
44
+ <div class="panel">
45
+ <div class="eyebrow">Responsive</div>
46
+ <h2>One layout, every width</h2>
47
+ <p class="lead">Desktop-first surfaces reflow to tablet and phone through the global layer (<code>base/responsive.css</code>, loaded last).</p>
48
+ <div class="devs">
49
+ <div class="dev phone"><div class="scr"><div class="cell b"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div><div class="dw">Phone</div><div class="dlab">390</div></div>
50
+ <div class="dev tablet"><div class="scr"><div class="cell b"></div><div class="cell b"></div><div class="cell"></div><div class="cell"></div></div><div class="dw">Tablet</div><div class="dlab">768</div></div>
51
+ <div class="dev desktop"><div class="scr"><div class="cell b"></div><div class="cell b"></div><div class="cell b"></div><div class="cell b"></div></div><div class="dw">Desktop</div><div class="dlab">1280</div></div>
52
+ </div>
53
+ <ul>
54
+ <li><b>Grids collapse</b> — fixed columns go 3+&rarr;2 (tablet), &rarr;1 (phone).</li>
55
+ <li><b>Print docs</b> relax sheet padding; wide tables scroll.</li>
56
+ <li><b>Sidebar</b> becomes a top strip (<code>.cs-sidebar</code>).</li>
57
+ <li><b>Decks &amp; social</b> (<code>.cs-canvas-desk</code>) scroll — export geometry stays exact.</li>
58
+ </ul>
59
+ <p class="note"><b>Gotcha:</b> the DC runtime serializes inline styles <i>spaced</i> — any <code>[style*=…]</code> rule must match <code>grid-template-columns: repeat(4, 1fr)</code>, not the no-space source.</p>
60
+ </div>
61
+
62
+ <div class="panel">
63
+ <div class="eyebrow">Bilingual</div>
64
+ <h2>Complete language separation</h2>
65
+ <p class="lead">The Language tweak swaps the <i>whole</i> artifact. A selected language never leaves stray text in the other.</p>
66
+ <div class="toggle"><span class="on">English</span><span class="off">Tiếng Việt</span></div>
67
+ <div class="mini bad"><div class="k">✗ Mixed</div><div class="t">Quarterly report</div><div class="s">Số tháng còn vốn · 19 mo</div></div>
68
+ <div class="mini good"><div class="k">✓ Separated · EN</div><div class="t">Quarterly report</div><div class="s">Runway · 19 mo</div></div>
69
+ <div class="mini good"><div class="k">✓ Separated · VN</div><div class="t">Báo cáo Hội đồng</div><div class="s">Số tháng còn vốn · 19 tháng</div></div>
70
+ <p class="note"><b>Bilingual by design</b> — only two elements stay dual, in every language:
71
+ <span class="keep">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</span>
72
+ <span class="keep">A4 legal identity block</span></p>
73
+ </div>
74
+ </div>
75
+ </body></html>
package/guidelines/rtl-preview.html ADDED
@@ -0,0 +1,115 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <title>CyberSkill · RTL preview</title>
6
+ <link rel="stylesheet" href="../styles.css" />
7
+ <style>
8
+ body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);padding:28px}
9
+ .wrap{max-width:720px;margin:0 auto;display:grid;gap:18px}
10
+ h1{font:var(--cs-text-h1);margin:0}
11
+ .lede{color:var(--cs-color-text-primary);opacity:.8;line-height:1.55;margin:0}
12
+ .card{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);background:var(--cs-color-surface-panel);padding:16px 18px}
13
+ .card h2{margin:0 0 8px;font-size:14px;font-weight:800}
14
+ .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
15
+ .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
16
+ .switchers 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:6px 10px;border-radius:8px;cursor:pointer}
17
+ .switchers button[aria-pressed="true"]{background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse);border-color:var(--cs-color-brand-umber)}
18
+ .crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
19
+ .crumbs a{color:var(--cs-color-link);text-decoration:none}
20
+ .crumbs span{color:var(--cs-color-text-primary);opacity:.55}
21
+ .list{display:grid;gap:0;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-md);overflow:hidden}
22
+ .list div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-block-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel)}
23
+ .list div:last-child{border-block-end:0}
24
+ .list b{font-size:13.5px}
25
+ .list small{color:var(--cs-color-text-primary);opacity:.7;font-size:12px}
26
+ label.field{display:grid;gap:4px;font-size:12.5px;font-weight:600}
27
+ label.field input{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary)}
28
+ .note{font-size:12px;line-height:1.5;color:var(--cs-color-text-primary);opacity:.75}
29
+ </style>
30
+ </head>
31
+ <body data-cs-element="tho" data-chrome="rtl-preview">
32
+ <div class="wrap">
33
+ <div class="toolbar">
34
+ <div>
35
+ <h1 id="title">معاينة RTL</h1>
36
+ <p class="lede" id="lede">Logical properties in <code>base/*</code> flip under <code>dir="rtl"</code>. This page is a multi-surface foundation check for future RTL tenants (Arabic sample + Hebrew sample).</p>
37
+ </div>
38
+ <div class="switchers" role="group" aria-label="Locale sample">
39
+ <button type="button" id="ar" aria-pressed="true">العربية</button>
40
+ <button type="button" id="he" aria-pressed="false">עברית</button>
41
+ <button type="button" id="en" aria-pressed="false">English (LTR)</button>
42
+ </div>
43
+ </div>
44
+
45
+ <div class="card">
46
+ <h2 id="h-nav">التنقل</h2>
47
+ <div class="crumbs" id="crumbs">
48
+ <a href="#">المركز</a><span>/</span><a href="#">المنصة</a><span>/</span><b>نظام التصميم</b>
49
+ </div>
50
+ <p class="row" style="margin-top:14px">
51
+ <button class="cs-button" id="btn-primary">إرسال</button>
52
+ <button class="cs-button cs-button--secondary" id="btn-secondary">ثانوي</button>
53
+ <span class="cs-badge cs-badge--ochre" id="badge">جديد</span>
54
+ </p>
55
+ </div>
56
+
57
+ <div class="card">
58
+ <h2 id="h-form">نموذج</h2>
59
+ <div class="row" style="align-items:stretch">
60
+ <label class="field" style="flex:1;min-width:180px"><span id="lab-name">الاسم</span><input id="in-name" type="text" value="نور العتيبي" /></label>
61
+ <label class="field" style="flex:1;min-width:180px"><span id="lab-email">البريد</span><input id="in-email" type="email" value="nour@example.com" dir="ltr" style="text-align:start" /></label>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="card">
66
+ <h2 id="h-list">القائمة</h2>
67
+ <div class="list" id="list">
68
+ <div><b>تصميم النظام</b><small>72%</small></div>
69
+ <div><b>خط الأنابيب</b><small>58%</small></div>
70
+ <div><b>لومي</b><small>84%</small></div>
71
+ </div>
72
+ </div>
73
+
74
+ <div class="cs-alert cs-alert--info"><div class="cs-alert__icon">ⓘ</div><div><p class="cs-alert__title" id="al-title">Logical CSS</p><p class="cs-alert__body" id="al-body">inline-start / inline-end · no physical left/right in chrome. Switch locales above to re-flow dir + sample copy.</p></div></div>
75
+ <p class="note">Vietnamese product copy remains LTR. This page only proves chrome + component shells under RTL tenants.</p>
76
+ </div>
77
+ <script>
78
+ const copy={
79
+ ar:{lang:'ar',dir:'rtl',title:'معاينة RTL',lede:'خصائص منطقية في base/* تنعكس مع dir="rtl". هذه صفحة تحقق متعددة الأسطح للمستأجرين المستقبليين.',hNav:'التنقل',hForm:'نموذج',hList:'القائمة',btnP:'إرسال',btnS:'ثانوي',badge:'جديد',labN:'الاسم',labE:'البريد',name:'نور العتيبي',crumbs:[['المركز','#'],['المنصة','#'],['نظام التصميم',null]],list:[['تصميم النظام','72%'],['خط الأنابيب','58%'],['لومي','84%']],alT:'Logical CSS',alB:'inline-start / inline-end · لا left/right في الواجهة.'},
80
+ he:{lang:'he',dir:'rtl',title:'תצוגת RTL',lede:'מאפיינים לוגיים ב-base/* מתהפכים תחת dir="rtl". דף זה בודק כמה משטחים עבור דיירים עתידיים.',hNav:'ניווט',hForm:'טופס',hList:'רשימה',btnP:'שליחה',btnS:'משני',badge:'חדש',labN:'שם',labE:'דוא״ל',name:'נועה לוי',crumbs:[['המרכז','#'],['פלטפורמה','#'],['מערכת עיצוב',null]],list:[['מערכת עיצוב','72%'],['צינור טוקנים','58%'],['לומי','84%']],alT:'Logical CSS',alB:'inline-start / inline-end · בלי left/right פיזיים בכרום.'},
81
+ en:{lang:'en',dir:'ltr',title:'RTL foundation preview',lede:'Logical properties in base/* flip under dir="rtl". This page is a multi-surface foundation check; English mode shows LTR control.',hNav:'Navigation',hForm:'Form',hList:'List',btnP:'Submit',btnS:'Secondary',badge:'New',labN:'Name',labE:'Email',name:'Nour Alotaibi',crumbs:[['Hub','#'],['Platform','#'],['Design system',null]],list:[['Design system','72%'],['Token pipeline','58%'],['Lumi','84%']],alT:'Logical CSS',alB:'inline-start / inline-end · no physical left/right in chrome.'},
82
+ };
83
+ function apply(key){
84
+ const c=copy[key];
85
+ document.documentElement.lang=c.lang;
86
+ document.documentElement.dir=c.dir;
87
+ document.body.dir=c.dir;
88
+ title.textContent=c.title; lede.innerHTML=c.lede;
89
+ document.getElementById('h-nav').textContent=c.hNav;
90
+ document.getElementById('h-form').textContent=c.hForm;
91
+ document.getElementById('h-list').textContent=c.hList;
92
+ document.getElementById('btn-primary').textContent=c.btnP;
93
+ document.getElementById('btn-secondary').textContent=c.btnS;
94
+ document.getElementById('badge').textContent=c.badge;
95
+ document.getElementById('lab-name').textContent=c.labN;
96
+ document.getElementById('lab-email').textContent=c.labE;
97
+ document.getElementById('in-name').value=c.name;
98
+ document.getElementById('al-title').textContent=c.alT;
99
+ document.getElementById('al-body').textContent=c.alB;
100
+ const crumbs=document.getElementById('crumbs'); crumbs.innerHTML='';
101
+ c.crumbs.forEach((part,i)=>{
102
+ if(i){ const s=document.createElement('span'); s.textContent='/'; crumbs.appendChild(s); }
103
+ if(part[1]){ const a=document.createElement('a'); a.href=part[1]; a.textContent=part[0]; crumbs.appendChild(a); }
104
+ else { const b=document.createElement('b'); b.textContent=part[0]; crumbs.appendChild(b); }
105
+ });
106
+ const list=document.getElementById('list'); list.innerHTML='';
107
+ c.list.forEach(([t,m])=>{ const d=document.createElement('div'); d.innerHTML='<b></b><small></small>'; d.querySelector('b').textContent=t; d.querySelector('small').textContent=m; list.appendChild(d); });
108
+ ['ar','he','en'].forEach(k=>document.getElementById(k).setAttribute('aria-pressed', k===key?'true':'false'));
109
+ window.__csRtlPreview={locale:key,dir:c.dir,lang:c.lang};
110
+ }
111
+ ['ar','he','en'].forEach(k=>document.getElementById(k).onclick=()=>apply(k));
112
+ apply('ar');
113
+ </script>
114
+ </body>
115
+ </html>
package/guidelines/spacing-breakpoints.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Spacing" viewport="700x150" name="Breakpoints" subtitle="Mobile-first · sm → 2xl" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
7
+ .row { display: flex; gap: 8px; }
8
+ .bp { flex: 1; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 12px 10px; background: var(--cs-color-surface-panel); }
9
+ .n { font-weight: 700; font-size: 14px; }
10
+ .v { font-family: var(--cs-font-family-mono); font-size: 12px; color: var(--cs-color-text-muted); margin-top: 2px; }
11
+ </style></head>
12
+ <body>
13
+ <div class="row">
14
+ <div class="bp"><div class="n">sm</div><div class="v">640</div></div>
15
+ <div class="bp"><div class="n">md</div><div class="v">768</div></div>
16
+ <div class="bp"><div class="n">lg</div><div class="v">1024</div></div>
17
+ <div class="bp"><div class="n">xl</div><div class="v">1280</div></div>
18
+ <div class="bp"><div class="n">2xl</div><div class="v">1536</div></div>
19
+ </div>
20
+ </body></html>
package/guidelines/spacing-radius.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Spacing" viewport="700x170" name="Radius" subtitle="sm 4 · md 8 · lg 14 · full" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
7
+ .row { display: flex; gap: 18px; align-items: flex-end; }
8
+ .item { text-align: center; }
9
+ .box { width: 92px; height: 74px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-sm); }
10
+ .l { font-family: var(--cs-font-family-mono); font-size: 11px; color: var(--cs-color-text-muted); margin-top: 8px; }
11
+ </style></head>
12
+ <body>
13
+ <div class="row">
14
+ <div class="item"><div class="box" style="border-radius:4px"></div><div class="l">sm · 4</div></div>
15
+ <div class="item"><div class="box" style="border-radius:8px"></div><div class="l">md · 8</div></div>
16
+ <div class="item"><div class="box" style="border-radius:14px"></div><div class="l">lg · 14</div></div>
17
+ <div class="item"><div class="box" style="width:120px;border-radius:999px"></div><div class="l">full · 999</div></div>
18
+ </div>
19
+ </body></html>
package/guidelines/spacing-scale.html ADDED
@@ -0,0 +1,21 @@
1
+ <!-- @dsCard group="Spacing" viewport="700x210" name="Spacing scale" subtitle="4px base grid · 0–96" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
7
+ .r { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
8
+ .bar { height: 16px; background: var(--cs-color-brand-ochre); border-radius: 3px; }
9
+ .tok { font-family: var(--cs-font-family-mono); font-size: 11px; color: var(--cs-color-text-muted); width: 132px; flex: none; }
10
+ </style></head>
11
+ <body>
12
+ <div class="r"><span class="tok">space-1 · 4</span><span class="bar" style="width:4px"></span></div>
13
+ <div class="r"><span class="tok">space-2 · 8</span><span class="bar" style="width:8px"></span></div>
14
+ <div class="r"><span class="tok">space-3 · 12</span><span class="bar" style="width:12px"></span></div>
15
+ <div class="r"><span class="tok">space-4 · 16</span><span class="bar" style="width:16px"></span></div>
16
+ <div class="r"><span class="tok">space-6 · 24</span><span class="bar" style="width:24px"></span></div>
17
+ <div class="r"><span class="tok">space-8 · 32</span><span class="bar" style="width:32px"></span></div>
18
+ <div class="r"><span class="tok">space-12 · 48</span><span class="bar" style="width:48px"></span></div>
19
+ <div class="r"><span class="tok">space-16 · 64</span><span class="bar" style="width:64px"></span></div>
20
+ <div class="r" style="margin-bottom:0"><span class="tok">space-24 · 96</span><span class="bar" style="width:96px"></span></div>
21
+ </body></html>
package/guidelines/surfaces-aurora.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Surfaces" viewport="700x200" name="Aurora wash" subtitle="Signature warm-gold hero background (.cs-aurora)" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; font-family: var(--cs-font-family-ui); }
7
+ .stage { min-height: 200px; padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; }
8
+ .k { font: 700 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--cs-color-brand-ochre); }
9
+ .h { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 8px 0 4px; }
10
+ .p { font-size: 14px; opacity: .9; margin: 0; max-width: 460px; }
11
+ .tok { font-family: var(--cs-font-family-mono); font-size: 12px; opacity: .8; margin-top: 12px; }
12
+ </style></head>
13
+ <body>
14
+ <div class="stage cs-aurora">
15
+ <div class="k">Signature hero wash</div>
16
+ <div class="h">Turn Your Will Into Real</div>
17
+ <p class="p">Warm gold particle light over deep umber — the brand's hero background, CSS-only (no image needed).</p>
18
+ <div class="tok">class="cs-aurora"</div>
19
+ </div>
20
+ </body></html>
package/guidelines/surfaces-depth.html ADDED
@@ -0,0 +1,27 @@
1
+ <!-- @dsCard group="Surfaces" viewport="700x210" name="Depth / z-index" subtitle="bg → toast · glass tier per layer" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
7
+ .stack { position: relative; height: 150px; }
8
+ .card { position: absolute; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); box-shadow: var(--cs-shadow-sm); padding: 8px 12px; font-size: 12px; }
9
+ .card b { font-family: var(--cs-font-family-mono); }
10
+ .c0 { left: 0; top: 96px; width: 300px; background: var(--cs-color-surface-raised); }
11
+ .c1 { left: 26px; top: 74px; width: 300px; }
12
+ .c2 { left: 52px; top: 52px; width: 300px; }
13
+ .c3 { left: 78px; top: 30px; width: 300px; }
14
+ .c4 { left: 104px; top: 8px; width: 300px; box-shadow: var(--cs-shadow-lg); }
15
+ .leg { position:absolute; right: 0; top: 0; font-size: 12px; color: var(--cs-color-text-muted); line-height: 1.9; }
16
+ .leg b { font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); }
17
+ </style></head>
18
+ <body>
19
+ <div class="stack">
20
+ <div class="card c0"><b>bg 0</b> — page · hero</div>
21
+ <div class="card c1"><b>section 5</b> — matte sections</div>
22
+ <div class="card c2"><b>card 10</b> — Standard Glass</div>
23
+ <div class="card c3"><b>nav 50</b> — Light Glass</div>
24
+ <div class="card c4"><b>modal 100</b> · <b>toast 200</b> — Heavy Glass</div>
25
+ <div class="leg"><b>0</b> bg<br/><b>5</b> section<br/><b>10</b> card<br/><b>50</b> nav<br/><b>100</b> modal<br/><b>200</b> toast</div>
26
+ </div>
27
+ </body></html>
package/guidelines/surfaces-glass.html ADDED
@@ -0,0 +1,21 @@
1
+ <!-- @dsCard group="Surfaces" viewport="700x230" name="Liquid Glass materials" subtitle="Whisper · Light · Standard · Heavy · Solid" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; padding: 0; font-family: var(--cs-font-family-ui); }
7
+ .stage { position: relative; min-height: 230px; background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; padding: 22px 24px; display: flex; gap: 14px; align-items: center; }
8
+ .m { flex: 1; border-radius: var(--cs-radius-lg); padding: 16px 14px; min-height: 128px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cs-color-text-primary); }
9
+ .nm { font-weight: 700; font-size: 14px; }
10
+ .d { font-size: 12px; color: var(--cs-color-text-muted); margin-top: 3px; }
11
+ .solid-note { color: var(--cs-color-text-muted); }
12
+ </style></head>
13
+ <body>
14
+ <div class="stage">
15
+ <div class="m cs-surface-whisper"><div class="nm">Whisper</div><div class="d">hero washes</div></div>
16
+ <div class="m cs-surface-light"><div class="nm">Light</div><div class="d">nav · sidebar</div></div>
17
+ <div class="m cs-surface-standard"><div class="nm">Standard</div><div class="d">cards</div></div>
18
+ <div class="m cs-surface-heavy"><div class="nm">Heavy</div><div class="d">modals · popovers</div></div>
19
+ <div class="m cs-surface-solid"><div class="nm">Solid</div><div class="d solid-note">dense · tables</div></div>
20
+ </div>
21
+ </body></html>
package/guidelines/surfaces-shadow.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Surfaces" viewport="700x180" name="Shadows" subtitle="Warm, umber-tinted elevation" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 26px 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
7
+ .row { display: flex; gap: 22px; align-items: center; }
8
+ .item { text-align: center; }
9
+ .box { width: 108px; height: 74px; background: var(--cs-color-surface-panel); border-radius: var(--cs-radius-md); }
10
+ .l { font-family: var(--cs-font-family-mono); font-size: 11px; color: var(--cs-color-text-muted); margin-top: 12px; }
11
+ </style></head>
12
+ <body>
13
+ <div class="row">
14
+ <div class="item"><div class="box" style="box-shadow:var(--cs-shadow-xs)"></div><div class="l">xs</div></div>
15
+ <div class="item"><div class="box" style="box-shadow:var(--cs-shadow-sm)"></div><div class="l">sm · card</div></div>
16
+ <div class="item"><div class="box" style="box-shadow:var(--cs-shadow-md)"></div><div class="l">md · popover</div></div>
17
+ <div class="item"><div class="box" style="box-shadow:var(--cs-shadow-lg)"></div><div class="l">lg · heavy</div></div>
18
+ <div class="item"><div class="box" style="box-shadow:var(--cs-shadow-xl)"></div><div class="l">xl · dialog</div></div>
19
+ </div>
20
+ </body></html>
package/guidelines/type-families.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Type" viewport="700x230" name="Typefaces" subtitle="Be Vietnam Pro (UI) · JetBrains Mono (code)" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; color: var(--cs-color-text-primary); }
7
+ .fam { margin-bottom: 18px; }
8
+ .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 6px; }
9
+ .ui { font-family: var(--cs-font-family-ui); }
10
+ .mono { font-family: var(--cs-font-family-mono); }
11
+ .big { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
12
+ .set { font-size: 15px; color: var(--cs-color-text-muted); margin-top: 2px; }
13
+ </style></head>
14
+ <body>
15
+ <div class="fam">
16
+ <div class="k">Be Vietnam Pro — UI / display</div>
17
+ <div class="ui big">Turn Your Will Into Real</div>
18
+ <div class="ui set">Hiện Thực Hoá Ý Chí · 300 400 500 600 700 800 · full Vietnamese diacritics</div>
19
+ </div>
20
+ <div class="fam" style="margin-bottom:0">
21
+ <div class="k">JetBrains Mono — code / data</div>
22
+ <div class="mono big" style="font-size:24px">--cs-color-brand-ochre</div>
23
+ <div class="mono set">0123456789 · v1.5.1 · {} =&gt; () · 400 500 700</div>
24
+ </div>
25
+ </body></html>
package/guidelines/type-lineheight.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- @dsCard group="Type" viewport="700x210" name="Line-height — Vietnamese-safe" subtitle="body 1.5 · heading 1.35 (room for diacritics)" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); }
7
+ .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 4px; }
8
+ .heading { font-size: 21px; font-weight: 700; line-height: 1.35; max-width: 560px; margin-bottom: 16px; }
9
+ .body { font-size: 15px; line-height: 1.5; max-width: 560px; color: var(--cs-color-text-primary); }
10
+ </style></head>
11
+ <body>
12
+ <div class="k">heading · 1.35</div>
13
+ <div class="heading">Hiện thực hoá ý chí — biến điều ước rõ thành phần mềm chạy thật.</div>
14
+ <div class="k">body · 1.5</div>
15
+ <div class="body">Diacritics stack above and below the baseline (ầ ế ộ ữ ỹ), so line-heights stay generous. Stacked marks never collide between lines.</div>
16
+ </body></html>
package/guidelines/type-scale.html ADDED
@@ -0,0 +1,21 @@
1
+ <!-- @dsCard group="Type" viewport="700x330" name="Type scale" subtitle="xs → 5xl, 16px base" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 20px 24px; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); }
7
+ .r { display: flex; align-items: baseline; gap: 16px; padding: 3px 0; }
8
+ .tok { font-family: var(--cs-font-family-mono); font-size: 11px; color: var(--cs-color-text-muted); width: 148px; flex: none; }
9
+ .s { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
10
+ </style></head>
11
+ <body>
12
+ <div class="r"><span class="tok">5xl · 60 / display</span><span class="s" style="font-size:38px">Will</span></div>
13
+ <div class="r"><span class="tok">4xl · 48 / display</span><span class="s" style="font-size:33px">Wishes</span></div>
14
+ <div class="r"><span class="tok">3xl · 36 / H1</span><span class="s" style="font-size:30px">Turn will into real</span></div>
15
+ <div class="r"><span class="tok">2xl · 30 / H2</span><span class="s" style="font-size:25px">What we build</span></div>
16
+ <div class="r"><span class="tok">xl · 24 / H3</span><span class="s" style="font-size:22px">Selected work</span></div>
17
+ <div class="r"><span class="tok">lg · 20 / H4·title</span><span class="s" style="font-size:19px">A clear wish</span></div>
18
+ <div class="r"><span class="tok">base · 16 / body</span><span class="s" style="font-size:16px;font-weight:400">Built to ship, built to last.</span></div>
19
+ <div class="r"><span class="tok">sm · 14 / secondary</span><span class="s" style="font-size:14px;font-weight:400;color:var(--cs-color-text-muted)">We reply within one business day.</span></div>
20
+ <div class="r"><span class="tok">xs · 12 / caption</span><span class="s" style="font-size:12px;font-weight:400;color:var(--cs-color-text-muted)">Since 2020 · Saigon</span></div>
21
+ </body></html>
package/guidelines/type-weights.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Type" viewport="700x180" name="Weights" subtitle="Regular → Extrabold" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en"><head><meta charset="utf-8" />
4
+ <link rel="stylesheet" href="../styles.css" />
5
+ <style>
6
+ body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); }
7
+ .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
8
+ .c { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 12px; background: var(--cs-color-surface-panel); }
9
+ .g { font-size: 30px; letter-spacing: -.01em; }
10
+ .l { font-family: var(--cs-font-family-mono); font-size: 11px; color: var(--cs-color-text-muted); margin-top: 6px; }
11
+ </style></head>
12
+ <body>
13
+ <div class="grid">
14
+ <div class="c"><div class="g" style="font-weight:400">Aa</div><div class="l">400 regular</div></div>
15
+ <div class="c"><div class="g" style="font-weight:500">Aa</div><div class="l">500 medium</div></div>
16
+ <div class="c"><div class="g" style="font-weight:600">Aa</div><div class="l">600 semibold</div></div>
17
+ <div class="c"><div class="g" style="font-weight:700">Aa</div><div class="l">700 bold</div></div>
18
+ <div class="c"><div class="g" style="font-weight:800">Aa</div><div class="l">800 extrabold</div></div>
19
+ </div>
20
+ </body></html>