@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/brand-iconography.html ADDED
@@ -0,0 +1,51 @@
1
+ <!-- @dsCard group="Brand" viewport="720x360" name="Iconography" subtitle="In-repo line set (27) — currentColor · 1.75 stroke · round caps · 24×24 · sparkle is the wish glyph" -->
2
+ <!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;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
+ svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px;display:block}
8
+ .g{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
9
+ .i{display:grid;justify-items:center;gap:6px;border:1px solid var(--cs-color-border-default);border-radius:9px;background:var(--cs-color-surface-panel);padding:11px 2px 8px}
10
+ .n{font-family:var(--cs-font-family-mono);font-size:8.5px;color:var(--cs-color-text-muted)}
11
+ </style></head>
12
+ <body>
13
+ <div class="g">
14
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"></path></svg><span class="n">close</span></div>
15
+ <div class="i"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"></path></svg><span class="n">sun</span></div>
16
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"></path></svg><span class="n">moon</span></div>
17
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="n">arrow-right</span></div>
18
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M4 12.5l5 5 11-11"></path></svg><span class="n">check</span></div>
19
+ <div class="i" style="color:var(--cs-color-text-accent)"><svg viewBox="0 0 24 24"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">sparkle</span></div>
20
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M4 5h16v11H8l-4 4z"></path></svg><span class="n">chat</span></div>
21
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M5 9v6h3l4 4V5L8 9z"></path><path d="M15 9.5a4 4 0 0 1 0 5M17.6 7a8 8 0 0 1 0 10"></path></svg><span class="n">sound-on</span></div>
22
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M5 9v6h3l4 4V5L8 9z"></path><path d="M16 9.5l4.5 5M20.5 9.5l-4.5 5"></path></svg><span class="n">sound-off</span></div>
23
+ <div class="i"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.2-4.2"></path></svg><span class="n">search</span></div>
24
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path><circle cx="9" cy="6" r="2"></circle><circle cx="15" cy="12" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg><span class="n">sliders</span></div>
25
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M12 15V4M7 8.5L12 4l5 4.5"></path><path d="M4 19h16"></path></svg><span class="n">upload</span></div>
26
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M12 4v11M7 10.5L12 15l5-4.5"></path><path d="M4 19h16"></path></svg><span class="n">download</span></div>
27
+ <div class="i"><svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14" rx="2"></rect><path d="M4 10.5h16M8 3.5v4M16 3.5v4"></path></svg><span class="n">calendar</span></div>
28
+ <div class="i"><svg viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.5"></circle><path d="M5 19.5c1.6-3.4 4-5 7-5s5.4 1.6 7 5"></path></svg><span class="n">user</span></div>
29
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg><span class="n">plus</span></div>
30
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M5 7h14M9.5 7V4.5h5V7"></path><path d="M7 7l.8 12.5h8.4L17 7M10 11v5M14 11v5"></path></svg><span class="n">trash</span></div>
31
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M14 4h6v6M20 4l-8 8"></path><path d="M18 13v6H5V6h6"></path></svg><span class="n">external</span></div>
32
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"></path></svg><span class="n">menu</span></div>
33
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg><span class="n">chevron-down</span></div>
34
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6"></path></svg><span class="n">chevron-up</span></div>
35
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"></path></svg><span class="n">chevron-left</span></div>
36
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg><span class="n">chevron-right</span></div>
37
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M4 20h4L18.5 9.5a2.12 2.12 0 0 0-3-3L5 17z"></path><path d="M13.5 6.5l3 3"></path></svg><span class="n">edit</span></div>
38
+ <div class="i"><svg viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2"></rect><path d="M4 16V6a2 2 0 0 1 2-2h10"></path></svg><span class="n">copy</span></div>
39
+ <div class="i"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v5M12 7.75v.01"></path></svg><span class="n">info</span></div>
40
+ <div class="i"><svg viewBox="0 0 24 24"><path d="M12 3.5l9 16H3z"></path><path d="M12 10v4M12 17.5v.01"></path></svg><span class="n">alert-triangle</span></div>
41
+ <div class="i" style="border-style:dashed;color:var(--cs-color-text-muted)"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg><span class="n">yours</span></div>
42
+ </div>
43
+ <div style="display:flex;gap:22px;align-items:flex-end;margin-top:14px">
44
+ <span style="color:var(--cs-color-text-muted);font-size:12px;max-width:400px;line-height:1.5">Icons are data rendered by one <b>&lt;Icon&gt;</b>; they follow the surrounding text color. Original 9 + a v2.0 extension of 10 + a v2.13 extension of 8 (chevrons, edit, copy, info, alert-triangle) in the same grammar. No external library, no emoji, no filled glyphs (only the Logo and Lumi are filled artwork).</span>
45
+ <span style="margin-left:auto;display:flex;gap:14px;align-items:flex-end;color:var(--cs-color-text-muted)">
46
+ <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:16px;height:16px"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">sm 16</span></span>
47
+ <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:20px;height:20px"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">md 20</span></span>
48
+ <span style="display:grid;justify-items:center;gap:4px"><svg viewBox="0 0 24 24" style="width:24px;height:24px"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"></path></svg><span class="n">lg 24</span></span>
49
+ </span>
50
+ </div>
51
+ </body></html>
package/guidelines/brand-imagery.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Brand" viewport="700x260" name="Imagery & mascot" subtitle="Warm gold particle light · Lumi the golden genie" -->
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 { position: relative; min-height: 260px; background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; overflow: hidden; }
8
+ .lumi { position: absolute; right: 34px; bottom: -6px; height: 250px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
9
+ .copy { position: absolute; left: 26px; top: 24px; max-width: 340px; color: #fff; }
10
+ .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-brand-ochre); }
11
+ .h { font-size: 22px; font-weight: 800; margin: 8px 0 6px; letter-spacing: -.01em; }
12
+ .p { font-size: 13px; line-height: 1.5; opacity: .9; }
13
+ </style></head>
14
+ <body>
15
+ <div class="stage">
16
+ <div class="copy">
17
+ <div class="k">Brand imagery</div>
18
+ <div class="h">Warm gold, deep umber dark, particle light.</div>
19
+ <div class="p">Photography and washes glow from within — never cold, never flat. Lumi, the golden genie, is the guide who turns a wish into working software.</div>
20
+ </div>
21
+ <img class="lumi" src="../assets/lumi-poster.webp" alt="Lumi, the golden genie mascot" />
22
+ </div>
23
+ </body></html>
package/guidelines/brand-interaction.html ADDED
@@ -0,0 +1,24 @@
1
+ <!-- @dsCard group="Brand" viewport="700x200" name="Interaction states" subtitle="Hover brighten · press nudge · Ochre focus ring" -->
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: 20px; align-items: center; flex-wrap: wrap; }
8
+ .item { text-align: center; }
9
+ .l { font-size: 12px; color: var(--cs-color-text-muted); margin-top: 8px; }
10
+ .b { font: 700 15px/1 var(--cs-font-family-ui); background: var(--cs-component-button-primary-bg); color: #fff; border: 1px solid transparent; border-radius: var(--cs-radius-md); padding: 12px 20px; }
11
+ .b.hover { filter: brightness(1.08); }
12
+ .b.press { transform: translateY(1px); filter: brightness(1.05); }
13
+ .b.focus { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
14
+ .b.dis { opacity: .58; }
15
+ </style></head>
16
+ <body>
17
+ <div class="row">
18
+ <div class="item"><span class="b">Default</span><div class="l">rest</div></div>
19
+ <div class="item"><span class="b hover">Hover</span><div class="l">brightness 1.08</div></div>
20
+ <div class="item"><span class="b press">Pressed</span><div class="l">nudge 1px</div></div>
21
+ <div class="item"><span class="b focus">Focus</span><div class="l">3px Ochre ring</div></div>
22
+ <div class="item"><span class="b dis">Disabled</span><div class="l">opacity .58</div></div>
23
+ </div>
24
+ </body></html>
package/guidelines/brand-voice.html ADDED
@@ -0,0 +1,24 @@
1
+ <!-- @dsCard group="Brand" viewport="700x260" name="Slogan & voice" subtitle="Turn Your Will Into Real · warm/direct/honest/respectful" -->
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
+ .hero { background: var(--cs-color-brand-umber); color: #fff; padding: 22px 24px; }
8
+ .slog { font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--cs-color-brand-ochre); }
9
+ .vn { font-size: 17px; margin-top: 2px; opacity: .92; }
10
+ .axes { display: flex; gap: 8px; padding: 16px 24px; background: var(--cs-color-surface-page); flex-wrap: wrap; }
11
+ .axis { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: 14px; color: var(--cs-color-text-primary); }
12
+ .axis b { color: var(--cs-color-text-accent); }
13
+ .note { padding: 0 24px 18px; background: var(--cs-color-surface-page); color: var(--cs-color-text-muted); font-size: 13px; }
14
+ </style></head>
15
+ <body>
16
+ <div class="hero"><div class="slog">Turn Your Will Into Real</div><div class="vn">Hiện Thực Hoá Ý Chí</div></div>
17
+ <div class="axes">
18
+ <span class="axis"><b>Warm</b></span>
19
+ <span class="axis"><b>Direct</b></span>
20
+ <span class="axis"><b>Honest</b></span>
21
+ <span class="axis"><b>Respectful</b></span>
22
+ </div>
23
+ <div class="note">A chord, not a slider — all four at once. Vietnamese-first: every string ships an EN + VN pair.</div>
24
+ </body></html>
package/guidelines/colors-anchors.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Colors" viewport="700x210" name="Brand anchors" subtitle="Umber + Ochre — immutable" -->
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); }
7
+ .row { display: flex; gap: 16px; }
8
+ .sw { flex: 1; border-radius: var(--cs-radius-lg); padding: 16px; min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--cs-color-border-default); }
9
+ .umber { background: #45210E; color: #F4BA17; }
10
+ .ochre { background: #F4BA17; color: #45210E; }
11
+ .nm { font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
12
+ .hex { font-family: var(--cs-font-family-mono); font-size: 13px; margin-top: 4px; opacity: .95; }
13
+ .ok { font-family: var(--cs-font-family-mono); font-size: 11px; opacity: .8; }
14
+ </style></head>
15
+ <body>
16
+ <div class="row">
17
+ <div class="sw umber"><div class="nm">Umber</div><div class="hex">#45210E</div><div class="ok">oklch(0.265 0.073 44.3) · primary brand</div></div>
18
+ <div class="sw ochre"><div class="nm">Ochre</div><div class="hex">#F4BA17</div><div class="ok">oklch(0.811 0.162 83.7) · accent</div></div>
19
+ </div>
20
+ </body></html>
package/guidelines/colors-semantic.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Colors" viewport="700x170" name="Semantic" subtitle="Success, danger, warning, info" -->
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); }
7
+ .row { display: flex; gap: 14px; }
8
+ .sw { flex: 1; border-radius: var(--cs-radius-md); min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; color: #fff; }
9
+ .nm { font-weight: 700; font-size: 13px; }
10
+ .hex { font-family: var(--cs-font-family-mono); font-size: 12px; opacity: .9; margin-top: 2px; }
11
+ </style></head>
12
+ <body>
13
+ <div class="row">
14
+ <div class="sw" style="background:#166534"><div class="nm">success</div><div class="hex">#166534</div></div>
15
+ <div class="sw" style="background:#B42318"><div class="nm">danger</div><div class="hex">#B42318</div></div>
16
+ <div class="sw" style="background:#92400E"><div class="nm">warning</div><div class="hex">#92400E</div></div>
17
+ <div class="sw" style="background:#1D4ED8"><div class="nm">info</div><div class="hex">#1D4ED8</div></div>
18
+ </div>
19
+ </body></html>
package/guidelines/colors-surfaces.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Colors" viewport="700x180" name="Surfaces" subtitle="Warm paper → panel → raised" -->
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); }
7
+ .row { display: flex; gap: 14px; }
8
+ .sw { flex: 1; border-radius: var(--cs-radius-md); min-height: 96px; border: 1px solid var(--cs-color-border-default); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; }
9
+ .nm { font-weight: 700; font-size: 13px; color: var(--cs-color-text-primary); }
10
+ .hex { 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="sw" style="background:#FFFDF8"><div class="nm">surface-page</div><div class="hex">#FFFDF8</div></div>
15
+ <div class="sw" style="background:#FFFFFF"><div class="nm">surface-panel</div><div class="hex">#FFFFFF</div></div>
16
+ <div class="sw" style="background:#FBF4E9"><div class="nm">surface-raised</div><div class="hex">#FBF4E9</div></div>
17
+ <div class="sw" style="background:#E7D9C6"><div class="nm">border-default</div><div class="hex">#E7D9C6</div></div>
18
+ </div>
19
+ </body></html>
package/guidelines/colors-text.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Colors" viewport="700x180" name="Text colours" subtitle="Primary, muted, accent, inverse" -->
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); }
7
+ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
8
+ .item { display: flex; align-items: center; gap: 12px; }
9
+ .chip { width: 40px; height: 40px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); flex: none; }
10
+ .t { font-weight: 700; font-size: 15px; }
11
+ .m { font-family: var(--cs-font-family-mono); font-size: 12px; color: var(--cs-color-text-muted); }
12
+ </style></head>
13
+ <body>
14
+ <div class="grid">
15
+ <div class="item"><span class="chip" style="background:#45210E"></span><div><div class="t" style="color:#45210E">text-primary · Aa</div><div class="m">#45210E</div></div></div>
16
+ <div class="item"><span class="chip" style="background:#6E5A4C"></span><div><div class="t" style="color:#6E5A4C">text-muted · Aa</div><div class="m">#6E5A4C</div></div></div>
17
+ <div class="item"><span class="chip" style="background:#6E3B0E"></span><div><div class="t" style="color:#6E3B0E">text-accent · Aa</div><div class="m">#6E3B0E · links</div></div></div>
18
+ <div class="item"><span class="chip" style="background:#45210E;display:grid;place-items:center;color:#fff;font-weight:700">Aa</span><div><div class="t" style="color:#45210E">text-inverse</div><div class="m">#FFFFFF on umber</div></div></div>
19
+ </div>
20
+ </body></html>
package/guidelines/documents.html ADDED
@@ -0,0 +1,43 @@
1
+ <!-- @dsCard group="Documents" viewport="1280x560" name="Document system" subtitle="3 reference docs govern every template · A4 VN-first · Ink/Slate pairs · umber table bars · yellow fill-ins · blank Party B · non-splitting signing blocks" -->
2
+ <!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 30px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
+ .h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-muted);margin:0 0 12px}
8
+ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
9
+ .doc{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);overflow:hidden;box-shadow:var(--cs-shadow-sm)}
10
+ .doc .bar{background:var(--cs-color-brand-umber);color:#fff;padding:10px 14px}
11
+ .doc .bar b{font-size:14px;font-weight:800}
12
+ .doc .bar .vn{font-size:11px;color:var(--cs-color-brand-ochre);margin-top:1px}
13
+ .doc .body{padding:12px 14px;font-size:12px;line-height:1.5;color:var(--cs-color-text-secondary)}
14
+ .doc .body .no{font-family:var(--cs-font-family-mono);font-size:10.5px;color:var(--cs-color-text-muted)}
15
+ .rules{display:flex;flex-wrap:wrap;gap:8px}
16
+ .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:600}
17
+ .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
18
+ .arch{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
19
+ .arch span{font-family:var(--cs-font-family-mono);font-size:10.5px;color:var(--cs-color-text-muted);border:1px dashed var(--cs-color-border-default);border-radius:6px;padding:3px 8px}
20
+ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
21
+ </style></head>
22
+ <body>
23
+ <div class="h">Reference documents — govern every template</div>
24
+ <div class="grid">
25
+ <div class="doc"><div class="bar"><b>Style Guide</b><div class="vn">Cẩm nang trình bày</div></div><div class="body"><div class="no">doc-style-guide</div>Palette · type ramp · bilingual rule · tables · fill-ins · signing · header/footer (Điều 1–10) + Điều 11 archetype map.</div></div>
26
+ <div class="doc"><div class="bar"><b>Suite Index &amp; Usage Guide</b><div class="vn">Danh mục &amp; hướng dẫn</div></div><div class="body"><div class="no">doc-suite-index</div>Part I — full catalogue (HR · legal · finance · sales · product · comms). Part II — lifecycle · disciplinary force · house rules · add-a-template.</div></div>
27
+ <div class="doc"><div class="bar"><b>Templates</b><div class="vn">Mẫu tài liệu</div></div><div class="body"><div class="no">doc-templates</div>Part A — blank A4 shell (Party A filled / Party B blank). Part B — archetype map with an example per family.</div></div>
28
+ </div>
29
+ <div class="h">The house rules — applied on every document</div>
30
+ <div class="rules">
31
+ <span class="chip"><span class="sw" style="background:#1A1614"></span>Ink VN</span>
32
+ <span class="chip"><span class="sw" style="background:#3F4C55"></span>Slate EN italic</span>
33
+ <span class="chip"><span class="sw" style="background:#45210E"></span>Umber table bars</span>
34
+ <span class="chip"><span class="sw" style="background:#FDE68A"></span>Yellow fill-ins</span>
35
+ <span class="chip">A4 · left-aligned</span>
36
+ <span class="chip">State-motto header</span>
37
+ <span class="chip">Blank Party B (PDPL)</span>
38
+ <span class="chip">Signing block never splits</span>
39
+ </div>
40
+ <div class="arch">
41
+ <span>A4 bilingual</span><span>Letter print</span><span>Email 600px</span><span>Product screen</span><span>Deck 16:9</span><span>Social</span>
42
+ </div>
43
+ </body></html>
package/guidelines/elements-components.html ADDED
@@ -0,0 +1,27 @@
1
+ <!-- @dsCard group="Elements" viewport="1280x420" name="Components under each element" subtitle="Same markup, five identities — CTAs, labels, badges, progress, links all follow --cs-accent-* automatically" -->
2
+ <!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);width:1280px;height:420px;overflow:hidden;box-sizing:border-box;padding:28px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
+ .col{border:1px solid #E7D9C6;border-radius:12px;background:#fff;padding:14px;display:grid;gap:10px;align-content:start}
8
+ .el{font-weight:800;font-size:14px}
9
+ .cta{display:inline-flex;align-items:center;justify-content:center;background:var(--cs-accent-bright);color:var(--cs-accent-on);font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:999px}
10
+ .lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;color:var(--cs-color-text-accent)}
11
+ .badge{display:inline-block;background:var(--cs-accent-tint);color:var(--cs-color-text-accent);font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;width:fit-content}
12
+ .bar{height:8px;border-radius:99px;background:#FBF4E9;overflow:hidden}
13
+ .bar span{display:block;height:100%;width:64%;background:var(--cs-accent);border-radius:99px}
14
+ .dark{background:var(--cs-accent-strong);color:#fff;border-radius:9px;padding:10px 12px;font-size:12px}
15
+ .dark b{color:var(--cs-accent-bright)}
16
+ a{color:var(--cs-color-link);font-size:12.5px;font-weight:600}a:hover{color:var(--cs-color-link-hover)}
17
+ </style></head>
18
+ <body>
19
+ <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px">
20
+ <div class="col" data-cs-element="moc"><span class="el">Mộc</span><span class="lbl">Eyebrow label</span><span class="cta">Make a wish</span><span class="badge">In progress</span><span class="bar"><span></span></span><span class="dark"><b>Dark surface</b> · element ink</span><a href="#">Text link →</a></div>
21
+ <div class="col" data-cs-element="hoa"><span class="el">Hỏa</span><span class="lbl">Eyebrow label</span><span class="cta">Make a wish</span><span class="badge">In progress</span><span class="bar"><span></span></span><span class="dark"><b>Dark surface</b> · element ink</span><a href="#">Text link →</a></div>
22
+ <div class="col" data-cs-element="tho" style="outline:2px solid var(--cs-color-brand-ochre);outline-offset:2px"><span class="el">Thổ · studio</span><span class="lbl">Eyebrow label</span><span class="cta">Make a wish</span><span class="badge">In progress</span><span class="bar"><span></span></span><span class="dark"><b>Dark surface</b> · element ink</span><a href="#">Text link →</a></div>
23
+ <div class="col" data-cs-element="kim"><span class="el">Kim</span><span class="lbl">Eyebrow label</span><span class="cta">Make a wish</span><span class="badge">In progress</span><span class="bar"><span></span></span><span class="dark"><b>Dark surface</b> · element ink</span><a href="#">Text link →</a></div>
24
+ <div class="col" data-cs-element="thuy"><span class="el">Thủy</span><span class="lbl">Eyebrow label</span><span class="cta">Make a wish</span><span class="badge">In progress</span><span class="bar"><span></span></span><span class="dark"><b>Dark surface</b> · element ink</span><a href="#">Text link →</a></div>
25
+ </div>
26
+ <footer style="display:flex;gap:16px;margin-top:16px;font-size:12px;color:var(--cs-color-text-muted)"><b style="color:var(--cs-color-text-primary)">Note</b><span>Identical markup in every column — only data-cs-element differs. Semantic statuses and the Ochre focus ring never change.</span></footer>
27
+ </body></html>
package/guidelines/elements-concept.html ADDED
@@ -0,0 +1,48 @@
1
+ <!-- @dsCard group="Elements" viewport="1280x660" name="Ngũ Hành — elemental identity" subtitle="v1 shipped — tokens/elements.css · --cs-accent-* contract · data-cs-element scopes · mixing per Tương sinh" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><link rel="stylesheet" href="../styles.css">
4
+ <style>
5
+ body{margin:0;background:var(--cs-color-surface-page);font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);width:1280px;height:660px;overflow:hidden;box-sizing:border-box;padding:36px 44px}
6
+ .el{border:1px solid var(--cs-color-border-default);border-radius:14px;overflow:hidden;background:var(--cs-color-surface-panel);display:flex;flex-direction:column}
7
+ .chip{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;padding:8px 14px;border-radius:999px}
8
+ .sw{height:26px}
9
+ .lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700}
10
+ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-brand-umber)}
11
+ </style></head><body>
12
+ <header style="display:flex;align-items:baseline;gap:14px;margin-bottom:22px">
13
+ <h1 style="font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:0">Ngũ Hành · elemental product identity</h1>
14
+ <span style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-accent)">v1 · shipped</span>
15
+ <span style="margin-left:auto;font-size:13px;color:var(--cs-color-text-muted)">One element per product · core stays Umber + Ochre</span>
16
+ </header>
17
+ <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:20px">
18
+ <div class="el"><div style="background:radial-gradient(120% 100% at 50% -20%, rgba(122,155,87,0.55), transparent 62%),#18200F;padding:18px 16px 14px;color:#fff"><div style="font-size:20px;font-weight:800">Mộc</div><div style="font-size:12px;opacity:0.75">Wood · growth</div></div><div class="sw" style="background:#7A9B57"></div><div class="sw" style="background:#4C6B35"></div><div class="sw" style="background:#EEF3E2"></div><div style="padding:12px 14px;display:grid;gap:8px"><span class="chip" style="background:#7A9B57;color:#18200F">Primary action</span><div class="lbl">leaf · bamboo · forest</div></div></div>
19
+ <div class="el"><div style="background:radial-gradient(120% 100% at 50% -20%, rgba(224,99,43,0.55), transparent 62%),#231007;padding:18px 16px 14px;color:#fff"><div style="font-size:20px;font-weight:800">Hỏa</div><div style="font-size:12px;opacity:0.75">Fire · energy</div></div><div class="sw" style="background:#E0632B"></div><div class="sw" style="background:#A93E14"></div><div class="sw" style="background:#FBEADF"></div><div style="padding:12px 14px;display:grid;gap:8px"><span class="chip" style="background:#E0632B;color:#231007">Primary action</span><div class="lbl">ember · lava · plasma</div></div></div>
20
+ <div class="el" style="outline:2px solid var(--cs-color-brand-ochre);outline-offset:2px"><div style="background:radial-gradient(120% 100% at 50% -20%, rgba(244,186,23,0.55), transparent 62%),#45210E;padding:18px 16px 14px;color:#fff"><div style="font-size:20px;font-weight:800">Thổ</div><div style="font-size:12px;opacity:0.75">Earth · the mother brand</div></div><div class="sw" style="background:#F4BA17"></div><div class="sw" style="background:#B98200"></div><div class="sw" style="background:#FBF4E9"></div><div style="padding:12px 14px;display:grid;gap:8px"><span class="chip" style="background:#F4BA17;color:#45210E">Primary action</span><div class="lbl">ochre · clay · sand</div></div></div>
21
+ <div class="el"><div style="background:radial-gradient(120% 100% at 50% -20%, rgba(191,178,155,0.55), transparent 62%),#221C12;padding:18px 16px 14px;color:#fff"><div style="font-size:20px;font-weight:800">Kim</div><div style="font-size:12px;opacity:0.75">Metal · precision</div></div><div class="sw" style="background:#BFB29B"></div><div class="sw" style="background:#7E7160"></div><div class="sw" style="background:#F3EFE6"></div><div style="padding:12px 14px;display:grid;gap:8px"><span class="chip" style="background:#BFB29B;color:#221C12">Primary action</span><div class="lbl">champagne · steel · titanium</div></div></div>
22
+ <div class="el"><div style="background:radial-gradient(120% 100% at 50% -20%, rgba(78,142,155,0.55), transparent 62%),#0E1D20;padding:18px 16px 14px;color:#fff"><div style="font-size:20px;font-weight:800">Thủy</div><div style="font-size:12px;opacity:0.75">Water · flow</div></div><div class="sw" style="background:#4E8E9B"></div><div class="sw" style="background:#2F5E6B"></div><div class="sw" style="background:#E6F1F2"></div><div style="padding:12px 14px;display:grid;gap:8px"><span class="chip" style="background:#4E8E9B;color:#0E1D20">Primary action</span><div class="lbl">river · ocean · mist</div></div></div>
23
+ </div>
24
+ <div style="display:grid;grid-template-columns:1.35fr 1fr;gap:16px">
25
+ <div style="border:1px solid var(--cs-color-border-default);border-radius:14px;background:var(--cs-color-surface-panel);padding:18px 20px">
26
+ <div class="lbl" style="margin-bottom:10px">One element, many variations — Hỏa</div>
27
+ <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
28
+ <div style="border-radius:12px;overflow:hidden;background:radial-gradient(130% 110% at 50% -30%, rgba(224,99,43,0.6), transparent 65%),#231007;color:#fff;padding:16px 14px"><div style="font-weight:800;font-size:15px">ember</div><div style="font-size:11px;opacity:0.7;margin:2px 0 12px">default · warm heat</div><span class="chip" style="background:#E0632B;color:#231007;font-size:11px;padding:6px 12px">Make a wish</span></div>
29
+ <div style="border-radius:12px;overflow:hidden;background:radial-gradient(130% 110% at 50% -30%, rgba(196,61,31,0.65), transparent 65%),#1D0B05;color:#fff;padding:16px 14px"><div style="font-weight:800;font-size:15px">lava</div><div style="font-size:11px;opacity:0.7;margin:2px 0 12px">molten · deep pressure</div><span class="chip" style="background:#C43D1F;color:#FBEADF;font-size:11px;padding:6px 12px">Make a wish</span></div>
30
+ <div style="border-radius:12px;overflow:hidden;background:radial-gradient(130% 110% at 50% -30%, rgba(232,80,110,0.55), transparent 65%),#200812;color:#fff;padding:16px 14px"><div style="font-weight:800;font-size:15px">plasma</div><div style="font-size:11px;opacity:0.7;margin:2px 0 12px">charged · outer edge</div><span class="chip" style="background:#E8506E;color:#200812;font-size:11px;padding:6px 12px">Make a wish</span></div>
31
+ </div>
32
+ <div style="font-size:12px;color:var(--cs-color-text-muted);margin-top:12px;line-height:1.5">A variant is a named point inside the element's oklch envelope — same 8-token contract, so components, contrast pairings, and semantics never break.</div>
33
+ </div>
34
+ <div style="border:1px solid var(--cs-color-border-default);border-radius:14px;background:var(--cs-color-surface-panel);padding:18px 20px">
35
+ <div class="lbl" style="margin-bottom:10px">Mixing follows the cycles</div>
36
+ <div style="display:grid;gap:8px">
37
+ <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#7A9B57,#E0632B)"></span><span style="font-size:12px;font-weight:700;width:96px">Mộc → Hỏa</span></div>
38
+ <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#E0632B,#F4BA17)"></span><span style="font-size:12px;font-weight:700;width:96px">Hỏa → Thổ</span></div>
39
+ <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#F4BA17,#BFB29B)"></span><span style="font-size:12px;font-weight:700;width:96px">Thổ → Kim</span></div>
40
+ <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#BFB29B,#4E8E9B)"></span><span style="font-size:12px;font-weight:700;width:96px">Kim → Thủy</span></div>
41
+ <div style="display:flex;align-items:center;gap:10px"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#4E8E9B,#7A9B57)"></span><span style="font-size:12px;font-weight:700;width:96px">Thủy → Mộc</span></div>
42
+ <div style="display:flex;align-items:center;gap:10px;opacity:0.55"><span style="height:14px;flex:1;border-radius:99px;background:linear-gradient(90deg,#E0632B,#4E8E9B);position:relative"><span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;letter-spacing:0.08em">TƯƠNG KHẮC — KHÔNG DÙNG</span></span><span style="font-size:12px;font-weight:700;width:96px;text-decoration:line-through">Hỏa × Thủy</span></div>
43
+ </div>
44
+ <div style="font-size:12px;color:var(--cs-color-text-muted);margin-top:10px;line-height:1.5">Tương sinh pairs may share a gradient wash. Tương khắc pairs never mix.</div>
45
+ </div>
46
+ </div>
47
+ <footer style="display:flex;gap:18px;margin-top:18px;font-size:12px;color:var(--cs-color-text-muted);align-items:center"><b style="color:var(--cs-color-text-primary)">Rules</b><span>Anchors immutable — Thổ is the studio</span><span>·</span><span>Statuses never elemental</span><span>·</span><span>Focus ring stays Ochre everywhere</span><span>·</span><span>One element per surface; secondary only in washes</span></footer>
48
+ </body></html>
package/guidelines/elements-variants.html ADDED
@@ -0,0 +1,49 @@
1
+ <!-- @dsCard group="Elements" viewport="1280x560" name="Variants & washes" subtitle="12 variants inside 5 oklch envelopes · each element's aurora wash · Lumi stays golden in every element" -->
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);width:1280px;height:560px;overflow:hidden;box-sizing:border-box;padding:30px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
7
+ .col{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);padding:14px 14px 12px}
8
+ .el{font-weight:800;font-size:15px;margin-bottom:10px}
9
+ .v{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--cs-color-border-default)}
10
+ .sw{width:26px;height:26px;border-radius:8px;flex:none}
11
+ .vn{font-weight:700;font-size:12px}
12
+ .vx{font-family:var(--cs-font-family-mono);font-size:10px;color:var(--cs-color-text-muted)}
13
+ .wash{border-radius:10px;overflow:hidden;position:relative;height:86px}
14
+ .wash img{width:100%;height:100%;object-fit:cover;display:block}
15
+ .wl{position:absolute;left:10px;bottom:8px;color:#fff;font-weight:700;font-size:12px;text-shadow:0 1px 4px rgba(0,0,0,0.5)}
16
+ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
17
+ </style></head>
18
+ <body>
19
+ <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px">
20
+ <div class="col"><div class="el">Mộc · Wood</div>
21
+ <div class="v"><span class="sw" style="background:#7A9B57"></span><div><div class="vn">leaf ·default</div><div class="vx">#7A9B57</div></div></div>
22
+ <div class="v"><span class="sw" style="background:#A9C177"></span><div><div class="vn">bamboo</div><div class="vx">#A9C177</div></div></div>
23
+ <div class="v"><span class="sw" style="background:#3E5A2E"></span><div><div class="vn">forest</div><div class="vx">#3E5A2E</div></div></div></div>
24
+ <div class="col"><div class="el">Hỏa · Fire</div>
25
+ <div class="v"><span class="sw" style="background:#E0632B"></span><div><div class="vn">ember ·default</div><div class="vx">#E0632B</div></div></div>
26
+ <div class="v"><span class="sw" style="background:#C43D1F"></span><div><div class="vn">lava</div><div class="vx">#C43D1F</div></div></div>
27
+ <div class="v"><span class="sw" style="background:#E8506E"></span><div><div class="vn">plasma</div><div class="vx">#E8506E</div></div></div></div>
28
+ <div class="col" style="outline:2px solid var(--cs-color-brand-ochre);outline-offset:2px"><div class="el">Thổ · Earth</div>
29
+ <div class="v"><span class="sw" style="background:#F4BA17"></span><div><div class="vn">ochre ·studio</div><div class="vx">#F4BA17</div></div></div>
30
+ <div class="v"><span class="sw" style="background:#C77B4A"></span><div><div class="vn">clay</div><div class="vx">#C77B4A</div></div></div>
31
+ <div class="v"><span class="sw" style="background:#E4C98F"></span><div><div class="vn">sand</div><div class="vx">#E4C98F</div></div></div></div>
32
+ <div class="col"><div class="el">Kim · Metal</div>
33
+ <div class="v"><span class="sw" style="background:#BFB29B"></span><div><div class="vn">champagne ·default</div><div class="vx">#BFB29B</div></div></div>
34
+ <div class="v"><span class="sw" style="background:#9FA3A3"></span><div><div class="vn">steel</div><div class="vx">#9FA3A3</div></div></div>
35
+ <div class="v"><span class="sw" style="background:#8A7F72"></span><div><div class="vn">titanium</div><div class="vx">#8A7F72</div></div></div></div>
36
+ <div class="col"><div class="el">Thủy · Water</div>
37
+ <div class="v"><span class="sw" style="background:#4E8E9B"></span><div><div class="vn">river ·default</div><div class="vx">#4E8E9B</div></div></div>
38
+ <div class="v"><span class="sw" style="background:#2E5E7E"></span><div><div class="vn">ocean</div><div class="vx">#2E5E7E</div></div></div>
39
+ <div class="v"><span class="sw" style="background:#A7C4C9"></span><div><div class="vn">mist</div><div class="vx">#A7C4C9</div></div></div></div>
40
+ </div>
41
+ <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px">
42
+ <div class="wash"><img src="../assets/aurora-moc.png" alt="Mộc aurora wash"><span class="wl">Mộc</span></div>
43
+ <div class="wash"><img src="../assets/aurora-hoa.png" alt="Hỏa aurora wash"><span class="wl">Hỏa</span></div>
44
+ <div class="wash"><img src="../assets/aurora-gold.jpg" alt="Thổ aurora wash (official gold)"><span class="wl">Thổ · official</span></div>
45
+ <div class="wash"><img src="../assets/aurora-kim.png" alt="Kim aurora wash"><span class="wl">Kim</span></div>
46
+ <div class="wash"><img src="../assets/aurora-thuy.png" alt="Thủy aurora wash"><span class="wl">Thủy</span></div>
47
+ </div>
48
+ <footer style="display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--cs-color-text-muted);align-items:center"><b style="color:var(--cs-color-text-primary)">Rules</b><span>A variant is a point inside its element's oklch envelope — same 9-token contract</span><span>·</span><span>Washes apply via .cs-aurora-wash</span><span>·</span><span><b style="color:var(--cs-color-text-primary)">Lumi stays golden</b> — only the environment re-tints</span></footer>
49
+ </body></html>
package/guidelines/motion-interaction.html ADDED
@@ -0,0 +1,29 @@
1
+ <!-- @dsCard group="Motion" viewport="720x250" name="Interaction states" subtitle="Warm hover lift · layered ochre focus glow · staggered entrance — all collapse under reduced motion" -->
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);display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
7
+ .lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700;margin-bottom:10px}
8
+ .box{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);padding:16px}
9
+ .note{font-size:11px;color:var(--cs-color-text-muted);margin-top:10px;line-height:1.5}
10
+ .demo-btn{display:inline-block;background:var(--cs-color-brand-umber);color:#fff;font-weight:700;font-size:13px;padding:11px 18px;border-radius:8px}
11
+ </style></head>
12
+ <body>
13
+ <div class="box"><div class="lbl">Hover — warm lift</div>
14
+ <span class="demo-btn" style="transform:translateY(-1px);box-shadow:0 8px 20px rgba(69,33,14,0.24)">Make a wish</span>
15
+ <div class="note">Filled controls rise 1px on an umber-tinted shadow; press returns them flat. 120–200ms, soft decelerate.</div>
16
+ </div>
17
+ <div class="box"><div class="lbl">Focus — layered glow</div>
18
+ <span class="demo-btn" style="outline:3px solid var(--cs-color-accent-ochre);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in oklab,var(--cs-color-accent-ochre) 26%,transparent)">Make a wish</span>
19
+ <div class="note">A soft 5px ochre glow layers on the immutable 3px ring — never replaces it.</div>
20
+ </div>
21
+ <div class="box"><div class="lbl">Entrance — staggered rise</div>
22
+ <div style="display:grid;gap:6px">
23
+ <span class="cs-rise-in" style="display:block;height:14px;border-radius:99px;background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default)"></span>
24
+ <span class="cs-rise-in cs-rise-in--2" style="display:block;height:14px;border-radius:99px;background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default)"></span>
25
+ <span class="cs-rise-in cs-rise-in--3" style="display:block;height:14px;border-radius:99px;background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default)"></span>
26
+ </div>
27
+ <div class="note"><b>.cs-rise-in</b> + <b>--2/--3/--4</b> (80ms steps); dialogs pop via <b>cs-pop-in</b>. All animation is 0 under prefers-reduced-motion.</div>
28
+ </div>
29
+ </body></html>
package/guidelines/motion.html ADDED
@@ -0,0 +1,53 @@
1
+ <!-- @dsCard group="Motion" viewport="700x300" name="Motion" subtitle="Calm, short, decelerated — live easings, reduced-motion honoured" -->
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
+ .wrap{max-width:600px}
8
+ h3{margin:0 0 2px;font-size:13px;font-weight:800;color:var(--cs-color-brand-umber)}
9
+ .cap{font-size:11px;color:var(--cs-color-text-muted);margin:0 0 14px}
10
+ .track{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:12px;margin-bottom:9px}
11
+ .lbl{font-size:12.5px}.lbl b{font-weight:700}.lbl .v{display:block;font-family:var(--cs-font-family-mono);font-size:10px;color:var(--cs-color-text-muted)}
12
+ .rail{position:relative;height:18px;background:var(--cs-color-surface-raised);border-radius:999px;border:1px solid var(--cs-color-border-default)}
13
+ .dot{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--cs-color-brand-ochre);box-shadow:0 1px 3px rgba(69,33,14,.3)}
14
+ .dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(69,33,14,.25)}
15
+ /* the dot eases end-to-end and back, continuously — the curve is the point */
16
+ @keyframes run{from{left:2px}to{left:calc(100% - 14px)}}
17
+ .d1{animation:run 1.3s var(--cs-ease-standard) infinite alternate}
18
+ .d2{animation:run 1.3s var(--cs-ease-entrance) infinite alternate}
19
+ .d3{animation:run 1.3s var(--cs-ease-exit) infinite alternate}
20
+ .durrow{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
21
+ .chip{font-family:var(--cs-font-family-mono);font-size:11px;color:var(--cs-color-brand-umber);background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default);border-radius:999px;padding:5px 12px;position:relative;overflow:hidden}
22
+ .chip span{position:relative;z-index:1}
23
+ .chip i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--cs-accent-tint);transform-origin:left;z-index:0}
24
+ @keyframes fill{0%,8%{transform:scaleX(0)}50%{transform:scaleX(1)}92%,100%{transform:scaleX(1);opacity:0}}
25
+ .c1 i{animation:fill 2s var(--cs-ease-standard) infinite}
26
+ .c2 i{animation:fill 2s var(--cs-ease-standard) infinite;animation-delay:.15s}
27
+ .c3 i{animation:fill 2s var(--cs-ease-standard) infinite;animation-delay:.3s}
28
+ .c4 i{animation:fill 2s var(--cs-ease-standard) infinite;animation-delay:.45s}
29
+ .note{color:var(--cs-color-text-primary);opacity:.8;font-size:11.5px;margin:16px 0 0;line-height:1.5}
30
+ .cap{color:var(--cs-color-text-primary);opacity:.75}
31
+ h3{color:var(--cs-color-brand-umber)}
32
+ @media (prefers-reduced-motion: reduce){
33
+ .dot,.chip i{animation:none !important}
34
+ .dot{left:calc(50% - 6px)}
35
+ .chip i{transform:scaleX(.35);opacity:.55}
36
+ }
37
+ </style></head>
38
+ <body data-chrome="motion">
39
+ <div class="wrap">
40
+ <h3>Easing — soft decelerate</h3>
41
+ <p class="cap">Same 1.3s trip; watch how each curve accelerates. Motion is fades &amp; small translate/scale only. Live in Storybook Live → Motion.</p>
42
+ <div class="track"><div class="lbl"><b>standard</b><span class="v">cubic-bezier(.2,0,0,1)</span></div><div class="rail"><div class="dot d1"></div></div></div>
43
+ <div class="track"><div class="lbl"><b>entrance</b><span class="v">cubic-bezier(0,0,0,1)</span></div><div class="rail"><div class="dot d2"></div></div></div>
44
+ <div class="track"><div class="lbl"><b>exit</b><span class="v">cubic-bezier(.4,0,1,1)</span></div><div class="rail"><div class="dot d3"></div></div></div>
45
+ <div class="durrow">
46
+ <div class="chip c1"><i></i><span>instant · 80ms</span></div>
47
+ <div class="chip c2"><i></i><span>fast · 120ms</span></div>
48
+ <div class="chip c3"><i></i><span>base · 200ms</span></div>
49
+ <div class="chip c4"><i></i><span>slow · 320ms</span></div>
50
+ </div>
51
+ <p class="note">Durations collapse to 0 and these demos freeze under <b>prefers-reduced-motion</b> (global safety net in <code>base/a11y.css</code>).</p>
52
+ </div>
53
+ </body></html>