@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/templates/image-slots-demo.html ADDED
@@ -0,0 +1,57 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en"><head><meta charset="utf-8">
3
+ <meta name="viewport" content="width=device-width, initial-scale=1">
4
+ <link rel="stylesheet" href="../styles.css">
5
+ <script src="../image-slot.js"></script>
6
+ <title>CyberSkill — real imagery pattern</title>
7
+ <style>
8
+ body{margin:0;background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);font-family:var(--cs-font-family-ui);padding:36px 28px;max-width:960px;margin:0 auto}
9
+ h1{font-size:26px;letter-spacing:-.02em;margin:0 0 4px}h1 b{color:var(--cs-color-brand-umber)}
10
+ .sub{color:var(--cs-color-text-muted);margin:0 0 26px;font-size:14px;line-height:1.55}
11
+ .lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--cs-color-text-accent);margin:26px 0 10px}
12
+ /* Full-bleed hero: slot behind, aurora tint, warm scrim so the empty drop-tile
13
+ still reads, content on top (click-through so the slot stays droppable). */
14
+ .hero{position:relative;height:300px;border-radius:var(--cs-radius-lg);overflow:hidden;box-shadow:var(--cs-shadow-md)}
15
+ .hero .slot{position:absolute;inset:0;z-index:0}
16
+ .hero .aurora{position:absolute;inset:0;opacity:.5;z-index:1;pointer-events:none}
17
+ .hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(42,26,13,.82),rgba(42,26,13,.35) 62%,transparent)}
18
+ .hero .content{position:absolute;z-index:3;left:0;bottom:0;padding:32px 36px;color:#fff;pointer-events:none;max-width:560px}
19
+ .hero .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--cs-accent-bright)}
20
+ .hero h2{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.06;margin:8px 0 6px;color:#fff}
21
+ .hero p{font-size:15px;line-height:1.5;opacity:.92;margin:0}
22
+ .row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
23
+ .person{display:flex;gap:12px;align-items:center}
24
+ .person .nm{font-weight:700;font-size:14px}.person .rl{font-size:12px;color:var(--cs-color-text-muted)}
25
+ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
26
+ .card{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-color-surface-panel);box-shadow:var(--cs-shadow-sm)}
27
+ .card .cap{padding:14px 16px}.card .cap b{font-size:15px}.card .cap p{margin:4px 0 0;font-size:13px;color:var(--cs-color-text-muted);line-height:1.5}
28
+ .note{margin-top:28px;font-size:12.5px;color:var(--cs-color-text-muted);line-height:1.6;border-top:1px dashed var(--cs-color-border-default);padding-top:14px}
29
+ .note code{font-family:var(--cs-font-family-mono);font-size:11.5px;background:var(--cs-color-surface-raised);border-radius:4px;padding:0 4px}
30
+ </style></head>
31
+ <body>
32
+ <h1><b>CyberSkill</b> · Real imagery pattern</h1>
33
+ <p class="sub">Drop your own images onto any slot below (they persist). This shows the layout-safe ways to add real photography to templates — full-bleed hero, avatar, and card image — without breaking the warm brand treatment.</p>
34
+
35
+ <div class="lbl">Full-bleed hero (slot + aurora tint + warm scrim)</div>
36
+ <div class="hero">
37
+ <image-slot id="demo-hero" class="slot" shape="rect" fit="cover" placeholder="Drop a hero photo — the warm scrim keeps text legible"></image-slot>
38
+ <div class="cs-aurora-wash aurora"></div>
39
+ <div class="scrim"></div>
40
+ <div class="content"><div class="k">A Saigon studio · since 2020</div><h2>Turn Your Will Into Real</h2><p>Real product photography sits under the warm wash; the umber scrim keeps the copy readable over any image.</p></div>
41
+ </div>
42
+
43
+ <div class="lbl">Team avatars (circle slots)</div>
44
+ <div class="row">
45
+ <div class="person"><image-slot id="demo-a1" style="width:56px;height:56px" shape="circle" placeholder="+"></image-slot><div><div class="nm">Nguyễn Hoàng An</div><div class="rl">Senior Product Engineer</div></div></div>
46
+ <div class="person"><image-slot id="demo-a2" style="width:56px;height:56px" shape="circle" placeholder="+"></image-slot><div><div class="nm">Minh Trần</div><div class="rl">Delivery Lead</div></div></div>
47
+ </div>
48
+
49
+ <div class="lbl">Case-study / product cards (rounded slots)</div>
50
+ <div class="cards">
51
+ <div class="card"><image-slot id="demo-c1" style="width:100%;height:150px" shape="rect" placeholder="Drop a screenshot"></image-slot><div class="cap"><b>Faster checkout</b><p>Product screenshot or before/after.</p></div></div>
52
+ <div class="card"><image-slot id="demo-c2" style="width:100%;height:150px" shape="rect" placeholder="Drop a screenshot"></image-slot><div class="cap"><b>Status Hub</b><p>Real UI in context.</p></div></div>
53
+ <div class="card"><image-slot id="demo-c3" style="width:100%;height:150px" shape="rect" placeholder="Drop a photo"></image-slot><div class="cap"><b>The team</b><p>Candid studio photography.</p></div></div>
54
+ </div>
55
+
56
+ <p class="note">Pattern: put <code>&lt;image-slot&gt;</code> in a sized wrapper. For full-bleed over the brand ink, layer <code>.cs-aurora-wash</code> (opacity ~.5, <code>pointer-events:none</code>) and a warm umber scrim above it, content on top and click-through, so the empty drop-tile never dominates and text stays legible on any photo. Circle for avatars, fixed-height rect for cards. Slots persist via a sibling sidecar. In DC templates load the component with <code>&lt;x-import component-from-global-scope="image-slot" from="../../image-slot.js"&gt;</code> in the helmet. Best applied to: marketing-page hero, marketing-case-study, marketing-social-kit, culture-event-invite, article hero, and any team/about section.</p>
57
+ </body></html>
package/templates/kitchen-sink.html ADDED
@@ -0,0 +1,127 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en"><head><meta charset="utf-8">
3
+ <meta name="viewport" content="width=device-width, initial-scale=1">
4
+ <link rel="stylesheet" href="../styles.css">
5
+ <title>CyberSkill — component kitchen sink</title>
6
+ <style>
7
+ body{margin:0;background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);font-family:var(--cs-font-family-ui)}
8
+ .top{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--cs-color-border-default);padding:14px 32px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
9
+ .top h1{font-size:17px;margin:0;letter-spacing:-.01em}.top h1 b{color:var(--cs-color-brand-umber)}
10
+ .top nav{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
11
+ .top nav a{color:var(--cs-color-text-muted);text-decoration:none;font-weight:600}.top nav a:hover{color:var(--cs-color-brand-ochre)}
12
+ main{max-width:960px;margin:0 auto;padding:28px 32px 80px}
13
+ section{margin:0 0 14px;border-bottom:1px dashed var(--cs-color-border-default);padding-bottom:24px}
14
+ h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--cs-color-brand-umber);margin:26px 0 14px}
15
+ .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
16
+ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
17
+ .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-muted);width:100%;margin:2px 0 -4px}
18
+ .cs-kbd{--k:1}
19
+ </style></head>
20
+ <body>
21
+ <div class="top">
22
+ <h1><b>CyberSkill</b> · Kitchen sink</h1>
23
+ <nav><a href="#btn">Buttons</a><a href="#form">Forms</a><a href="#fb">Feedback</a><a href="#data">Data</a><a href="#nav">Navigation</a><a href="#ai">AI</a></nav>
24
+ </div>
25
+ <main>
26
+
27
+ <section id="btn"><h2>Buttons</h2>
28
+ <div class="row"><span class="lbl">Variants</span>
29
+ <button class="cs-button cs-button--primary">Primary</button>
30
+ <button class="cs-button cs-button--secondary">Secondary</button>
31
+ <button class="cs-button cs-button--tertiary">Tertiary</button>
32
+ <button class="cs-button cs-button--ghost">Ghost</button>
33
+ <button class="cs-button cs-button--danger">Danger</button>
34
+ <button class="cs-button cs-button--danger-ghost">Danger ghost</button>
35
+ </div>
36
+ <div class="row"><span class="lbl">Sizes &amp; states</span>
37
+ <button class="cs-button cs-button--primary cs-button--xs">XS</button>
38
+ <button class="cs-button cs-button--primary cs-button--sm">Small</button>
39
+ <button class="cs-button cs-button--primary">Medium</button>
40
+ <button class="cs-button cs-button--primary cs-button--lg">Large</button>
41
+ <button class="cs-button cs-button--primary is-disabled" disabled>Disabled</button>
42
+ <button class="cs-button cs-button--primary is-loading"><span class="cs-button__spinner"></span><span class="cs-button__label">Loading</span></button>
43
+ </div>
44
+ </section>
45
+
46
+ <section id="form"><h2>Forms</h2>
47
+ <div class="grid2">
48
+ <label class="cs-field"><span class="cs-field__label">Text field</span><input class="cs-field__control" placeholder="Nguyễn Hoàng An"></label>
49
+ <label class="cs-field is-invalid"><span class="cs-field__label">With error</span><input class="cs-field__control" value="bad@"><span class="cs-field__error" role="alert">Enter a valid email</span></label>
50
+ <div class="cs-select cs-field"><span class="cs-field__label">Select</span><select class="cs-field__control"><option>Thổ · studio</option><option>Hỏa · ember</option></select><span class="cs-select__chevron">▾</span></div>
51
+ <label class="cs-field"><span class="cs-field__label">Textarea</span><textarea class="cs-field__control" rows="2">A faster checkout.</textarea></label>
52
+ </div>
53
+ <div class="row" style="margin-top:12px"><span class="lbl">Toggles</span>
54
+ <label class="cs-check"><input type="checkbox" checked><span class="cs-check__text"><span>Checkbox</span></span></label>
55
+ <label class="cs-radio"><input type="radio" name="kg" checked><span class="cs-radio__text"><span>Radio</span></span></label>
56
+ <label class="cs-switch"><input type="checkbox" checked><span class="cs-switch__track"></span><span class="cs-switch__label">Switch</span></label>
57
+ <div class="cs-segmented"><button aria-pressed="true">Board</button><button>Table</button></div>
58
+ </div>
59
+ <div class="row"><span class="lbl">Controls</span>
60
+ <div class="cs-search" style="width:220px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg><input placeholder="Search"></div>
61
+ <div class="cs-stepper"><button>−</button><input value="3"><button>+</button></div>
62
+ <input type="range" class="cs-slider" value="60" style="width:160px">
63
+ </div>
64
+ </section>
65
+
66
+ <section id="fb"><h2>Feedback</h2>
67
+ <div class="row"><span class="lbl">Badges &amp; tags</span>
68
+ <span class="cs-badge cs-badge--solid">Solid</span>
69
+ <span class="cs-badge cs-badge--ochre">Ochre</span>
70
+ <span class="cs-badge cs-badge--success"><span class="cs-badge__dot"></span>Success</span>
71
+ <span class="cs-badge cs-badge--danger">Danger</span>
72
+ <span class="cs-badge cs-badge--warning">Warning</span>
73
+ <span class="cs-badge cs-badge--info">Info</span>
74
+ <span class="cs-tag">Design system<button class="cs-tag__close">×</button></span>
75
+ </div>
76
+ <div class="row"><span class="lbl">Status · progress · loaders</span>
77
+ <span class="cs-status cs-status--online"><span class="cs-status__dot"></span>Online</span>
78
+ <span class="cs-status cs-status--busy"><span class="cs-status__dot"></span>Busy</span>
79
+ <span class="cs-status cs-status--offline"><span class="cs-status__dot"></span>Offline</span>
80
+ <span class="cs-spinner"></span>
81
+ <span class="cs-kbd">⌘</span><span class="cs-kbd">K</span>
82
+ </div>
83
+ <div class="cs-progress" style="max-width:280px;margin-bottom:12px"><div class="cs-progress__fill" style="inline-size:64%"></div></div>
84
+ <div class="grid2">
85
+ <div class="cs-alert cs-alert--info"><div class="cs-alert__icon">ⓘ</div><div><p class="cs-alert__title">Heads up</p><p class="cs-alert__body">A calm, warm informational banner.</p></div></div>
86
+ <div class="cs-alert cs-alert--success"><div class="cs-alert__icon">✓</div><div><p class="cs-alert__title">Shipped</p><p class="cs-alert__body">The release went out cleanly.</p></div></div>
87
+ <div class="cs-toast cs-toast--success"><span class="cs-toast__icon">✓</span><div><div class="cs-toast__title">Saved</div><div class="cs-toast__body">Your wish was recorded.</div></div><button class="cs-button cs-button--ghost cs-button--xs">×</button></div>
88
+ <div style="display:grid;gap:6px"><span class="cs-skeleton cs-skeleton--text" style="width:80%"></span><span class="cs-skeleton cs-skeleton--text" style="width:60%"></span><span class="cs-skeleton" style="height:40px"></span></div>
89
+ </div>
90
+ </section>
91
+
92
+ <section id="data"><h2>Data &amp; layout</h2>
93
+ <div class="grid2">
94
+ <div class="cs-card" style="padding:18px"><div class="cs-stat"><div class="cs-stat__label">Shipped</div><div class="cs-stat__value">128</div></div></div>
95
+ <div class="cs-card" style="padding:0;overflow:hidden"><div class="cs-code"><div class="cs-code__bar"><span>tokens.css</span><button class="cs-code__copy">Copy</button></div><pre style="margin:0;padding:12px 14px;font-family:var(--cs-font-family-mono);font-size:12px;color:#f5ead9">--cs-accent: #F4BA17;</pre></div></div>
96
+ </div>
97
+ <div class="row" style="margin-top:12px"><span class="lbl">Avatars · divider · tooltip</span>
98
+ <span class="cs-avatar-group"><span class="cs-avatar cs-avatar--md">AN</span><span class="cs-avatar cs-avatar--md">MT</span><span class="cs-avatar cs-avatar--md">BC</span></span>
99
+ <span class="cs-tooltip"><button class="cs-button cs-button--secondary cs-button--sm">Hover me</button></span>
100
+ </div>
101
+ <div class="cs-divider cs-divider--label">Section</div>
102
+ <div class="grid2">
103
+ <ul class="cs-list" style="list-style:none;margin:0;padding:0"><li class="cs-list__item"><span class="cs-avatar cs-avatar--sm">A</span><span style="flex:1">List item one</span><span class="cs-badge cs-badge--ochre">New</span></li><li class="cs-list__item"><span class="cs-avatar cs-avatar--sm">B</span><span style="flex:1">List item two</span></li></ul>
104
+ <dl class="cs-dl"><div><dt>Owner</dt><dd>An Le</dd></div><div><dt>Status</dt><dd>In progress</dd></div><div><dt>Element</dt><dd>Thổ · studio</dd></div></dl>
105
+ </div>
106
+ <div class="cs-accordion" style="margin-top:12px"><div class="cs-accordion__item"><button class="cs-accordion__trigger">What is a wish?<span>▾</span></button><div class="cs-accordion__panel" style="padding:0 18px 15px;color:var(--cs-color-text-muted);font-size:14px">A wish is a clearly-stated intent that Lumi helps a real team grant.</div></div></div>
107
+ <div style="overflow:auto;margin-top:12px"><table class="cs-table"><thead><tr><th>Project</th><th>Owner</th><th>Progress</th></tr></thead><tbody><tr><td>Checkout</td><td>An</td><td>64%</td></tr><tr><td>Status Hub</td><td>Minh</td><td>90%</td></tr></tbody></table></div>
108
+ </section>
109
+
110
+ <section id="nav"><h2>Navigation</h2>
111
+ <div class="cs-tabs" style="margin-bottom:14px"><button class="cs-tab" aria-selected="true">Overview</button><button class="cs-tab">Projects<span class="cs-tab__count">6</span></button><button class="cs-tab">Team</button></div>
112
+ <nav class="cs-breadcrumb" style="margin-bottom:14px"><ul style="list-style:none;margin:0;padding:0;display:flex;gap:8px"><li><a href="#">Status Hub</a></li><li class="cs-breadcrumb__sep">/</li><li><a href="#">Platform</a></li><li class="cs-breadcrumb__sep">/</li><li class="cs-breadcrumb__current">Design System</li></ul></nav>
113
+ <div class="row"><nav class="cs-pagination"><button>‹</button><button aria-current="page">1</button><button>2</button><button>3</button><span class="cs-pagination__ellipsis">…</span><button>9</button><button>›</button></nav></div>
114
+ <div class="cs-menu__list" style="position:static;max-width:220px;margin-top:12px"><button class="cs-menu__item">Open project</button><button class="cs-menu__item">Duplicate</button><div class="cs-menu__sep"></div><button class="cs-menu__item cs-menu__item--danger">Delete</button></div>
115
+ </section>
116
+
117
+ <section id="ai" style="border-bottom:0"><h2>AI-native &amp; brand</h2>
118
+ <div class="row"><span class="lbl">Chat · status · disclosure</span>
119
+ <span class="cs-typing" role="status" aria-label="Lumi is typing"><span></span><span></span><span></span></span>
120
+ <span class="cs-badge cs-badge--info">AI-generated</span>
121
+ <span class="cs-status cs-status--pulse"><span class="cs-status__dot"></span>Lumi online</span>
122
+ </div>
123
+ <div class="cs-review-gate" style="max-width:420px"><div class="cs-review-gate__risk">Needs human review</div><p class="cs-review-gate__summary">This action affects billing — a person must approve before it runs.</p><div class="cs-review-gate__actions"><button class="cs-button cs-button--secondary cs-button--sm">Dismiss</button><button class="cs-button cs-button--primary cs-button--sm">Approve</button></div></div>
124
+ </section>
125
+
126
+ </main>
127
+ </body></html>
package/templates/legal-msa/.thumbnail ADDED
Binary file
package/templates/legal-msa/LegalMsa.dc.html ADDED
@@ -0,0 +1,85 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="omelette-owns-print" content="1">
7
+ <script src="./support.js"></script>
8
+ </head>
9
+ <body>
10
+ <x-dc>
11
+ <!-- @template name="Legal · Master services agreement" description="CyberSkill MSA — the umbrella terms SOWs hang off. Definitions, IP, fees, liability, term. Letter-sized, print-ready." -->
12
+ <helmet>
13
+ <script src="./ds-base.js"></script>
14
+ <style>@page{size:letter;margin:0.6in}@media print{html,body{background:#fff!important}.cs-desk{background:#fff!important;padding:0!important;min-height:0!important}.cs-sheet{box-shadow:none!important;border:none!important;max-width:none!important;border-radius:0!important;padding:0!important}.cs-avoid{break-inside:avoid}}</style>
15
+ </helmet>
16
+ <div lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" class="cs-desk" style="background:#efe6d8;min-height:100vh;padding:40px 16px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)">
17
+ <div class="cs-sheet" style="max-width:816px;margin:0 auto;background:#fff;border:1px solid var(--cs-color-border-default);border-radius:12px;box-shadow:var(--cs-shadow-md);padding:56px 64px">
18
+ <header style="display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--cs-color-brand-umber);padding-bottom:18px;margin-bottom:26px">
19
+ <x-import component-from-global-scope="CyberSkillDS.Logo" size="34" hint-size="34px,34px"></x-import>
20
+ <div><div style="font-weight:800;font-size:17px;color:var(--cs-color-brand-umber);line-height:1.1">CyberSkill</div><div style="font-size:11px;color:var(--cs-color-text-muted)">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</div></div>
21
+ <span style="margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">{{ hdrLabel }}</span>
22
+ </header>
23
+ <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">
24
+ <div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">Umbrella terms</div>
25
+ <h1 style="font-size:27px;font-weight:800;letter-spacing:-0.02em;margin:6px 0 16px">Master Services Agreement</h1>
26
+ <p style="font-size:13.5px;line-height:1.7;margin:0 0 22px">This Master Services Agreement (the &ldquo;Agreement&rdquo;), effective <b>18 July 2026</b>, is between <b>CyberSkill Co., Ltd</b> (&ldquo;CyberSkill&rdquo;) and <b>[Client Ltd]</b> (&ldquo;Client&rdquo;). It sets the terms under which CyberSkill turns the Client&rsquo;s wishes into working software. Each engagement is defined in a separate Statement of Work that hangs off this Agreement.</p>
27
+ <div style="display:grid;gap:16px">
28
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">1. Definitions</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">&ldquo;Services&rdquo; means the design and engineering work described in a Statement of Work (&ldquo;SOW&rdquo;). &ldquo;Deliverables&rdquo; means what CyberSkill hands over. &ldquo;Confidential Information&rdquo; carries the meaning in any NDA between the parties.</p></div>
29
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">2. Services &amp; Statements of Work</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">CyberSkill provides the Services set out in each SOW. Each SOW names the scope, deliverables, timeline, fees, and any assumptions. If an SOW conflicts with this Agreement, the SOW controls for that engagement. Changes are handled by a written change note both parties sign.</p></div>
30
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">3. Fees &amp; payment</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">Fees are stated in each SOW, in Vietnamese đồng unless noted. CyberSkill invoices per the SOW schedule; invoices are due within <b>15 days</b>. Undisputed late amounts accrue interest at 1% per month. Fees exclude VAT and out-of-pocket expenses agreed in advance.</p></div>
31
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">4. Intellectual property</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">On full payment for an engagement, CyberSkill assigns to the Client the Deliverables created specifically for that engagement. CyberSkill keeps ownership of its pre-existing tools, libraries, and know-how, and grants the Client a perpetual licence to use them as embedded in the Deliverables.</p></div>
32
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">5. Confidentiality &amp; data</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">Each party protects the other&rsquo;s Confidential Information and uses it only to perform under this Agreement. CyberSkill handles personal data per applicable Vietnamese law and only as needed for the Services. We ask before we contact, and we never share Client data.</p></div>
33
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">6. Warranties</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">CyberSkill performs the Services with the care and skill of a senior professional team, and warrants Deliverables will materially conform to the SOW for <b>30 days</b> after acceptance. Our remedy is to re-perform. Otherwise Services are provided without other warranties.</p></div>
34
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">7. Liability</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">Neither party is liable for indirect or consequential loss. Each party&rsquo;s total liability under an engagement is capped at the fees paid for that engagement in the 12 months before the claim. Caps do not limit liability for fraud, IP infringement, or breach of confidentiality.</p></div>
35
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">8. Term &amp; termination</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">This Agreement runs until ended. Either party may end it, or any SOW, on <b>30 days&rsquo;</b> written notice, or immediately for uncured material breach. On termination the Client pays for Services performed to that date; confidentiality and IP terms survive.</p></div>
36
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">9. General</h2><p style="font-size:13px;line-height:1.7;margin:0;color:var(--cs-color-text-muted)">This Agreement is governed by the laws of Vietnam, with the courts of Ho Chi Minh City having jurisdiction. It is the entire agreement on its subject, and is amended only in writing signed by both parties.</p></div>
37
+ </div>
38
+ <sc-if value="{{ showSignatures }}" hint-placeholder-val="{{ true }}">
39
+ <div class="cs-avoid" style="display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:38px;padding-top:26px;border-top:1px solid var(--cs-color-border-default)">
40
+ <div><div style="height:44px;border-bottom:1.5px solid var(--cs-color-brand-umber)"></div><div style="font-size:12px;color:var(--cs-color-text-muted);margin-top:8px">CyberSkill Co., Ltd</div><div style="font-size:12px;color:var(--cs-color-text-muted)">Name / title / date</div></div>
41
+ <div><div style="height:44px;border-bottom:1.5px solid var(--cs-color-brand-umber)"></div><div style="font-size:12px;color:var(--cs-color-text-muted);margin-top:8px">[Client Ltd]</div><div style="font-size:12px;color:var(--cs-color-text-muted)">Name / title / date</div></div>
42
+ </div>
43
+ </sc-if>
44
+ </sc-if>
45
+ <sc-if value="{{ isVN }}"><div lang="vi" style="display:contents">
46
+ <div class="cs-avoid" style="border:1.5px solid var(--cs-color-semantic-warning);background:#FDF6EC;border-radius:var(--cs-radius-md);padding:10px 14px;margin-bottom:20px;font-size:12px;line-height:1.6;color:var(--cs-color-semantic-warning);font-weight:600">Bản dịch nháp — chưa được luật sư rà soát. Trong trường hợp có khác biệt, bản tiếng Anh có giá trị áp dụng. <span style="font-weight:400">· Unreviewed draft translation — the English version governs.</span></div>
47
+ <div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">Điều khoản khung</div>
48
+ <h1 style="font-size:27px;font-weight:800;letter-spacing:-0.02em;margin:6px 0 16px">Hợp Đồng Dịch Vụ Khung</h1>
49
+ <p style="font-size:13.5px;line-height:1.75;margin:0 0 22px">Hợp đồng Dịch vụ Khung này (&ldquo;Hợp đồng&rdquo;), hiệu lực từ <b>18 tháng 7 năm 2026</b>, được ký giữa <b>Công ty TNHH CyberSkill</b> (&ldquo;CyberSkill&rdquo;) và <b>[Công ty khách hàng]</b> (&ldquo;Khách hàng&rdquo;). Hợp đồng đặt ra các điều khoản để CyberSkill biến điều ước của Khách hàng thành phần mềm vận hành được. Mỗi đợt hợp tác được xác định trong một Bản Mô tả Công việc (SOW) riêng, trực thuộc Hợp đồng này.</p>
50
+ <div style="display:grid;gap:16px">
51
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">1. Định nghĩa</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">&ldquo;Dịch vụ&rdquo; là công việc thiết kế và kỹ thuật mô tả trong một Bản Mô tả Công việc (&ldquo;SOW&rdquo;). &ldquo;Sản phẩm Bàn giao&rdquo; là những gì CyberSkill bàn giao. &ldquo;Thông tin Bảo mật&rdquo; mang nghĩa như trong NDA (nếu có) giữa hai bên.</p></div>
52
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">2. Dịch vụ &amp; các SOW</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">CyberSkill cung cấp Dịch vụ nêu trong từng SOW. Mỗi SOW nêu rõ phạm vi, sản phẩm bàn giao, tiến độ, phí, và các giả định. Nếu SOW mâu thuẫn với Hợp đồng này, SOW được ưu tiên áp dụng cho đợt hợp tác đó. Thay đổi được xử lý bằng văn bản điều chỉnh có chữ ký hai bên.</p></div>
53
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">3. Phí &amp; thanh toán</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">Phí được nêu trong từng SOW, bằng đồng Việt Nam trừ khi ghi khác. CyberSkill xuất hóa đơn theo lịch trong SOW; hóa đơn đến hạn trong <b>15 ngày</b>. Khoản chậm trả không tranh chấp chịu lãi 1%/tháng. Phí chưa gồm thuế GTGT và chi phí phát sinh đã thỏa thuận trước.</p></div>
54
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">4. Sở hữu trí tuệ</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">Khi thanh toán đủ cho một đợt hợp tác, CyberSkill chuyển giao cho Khách hàng các Sản phẩm Bàn giao được tạo riêng cho đợt đó. CyberSkill giữ quyền sở hữu công cụ, thư viện và bí quyết có từ trước, và cấp cho Khách hàng quyền sử dụng vĩnh viễn phần được nhúng trong Sản phẩm Bàn giao.</p></div>
55
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">5. Bảo mật &amp; dữ liệu</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">Mỗi bên bảo vệ Thông tin Bảo mật của bên kia và chỉ dùng để thực hiện Hợp đồng. CyberSkill xử lý dữ liệu cá nhân theo pháp luật Việt Nam hiện hành và chỉ trong phạm vi cần cho Dịch vụ. Chúng tôi hỏi trước khi liên hệ, và không bao giờ chia sẻ dữ liệu của Khách hàng.</p></div>
56
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">6. Cam đoan</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">CyberSkill thực hiện Dịch vụ với sự cẩn trọng và tay nghề của một đội ngũ chuyên nghiệp cấp cao, và cam đoan Sản phẩm Bàn giao phù hợp về cơ bản với SOW trong <b>30 ngày</b> sau nghiệm thu. Biện pháp khắc phục là thực hiện lại. Ngoài ra, Dịch vụ được cung cấp không kèm cam đoan nào khác.</p></div>
57
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">7. Trách nhiệm</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">Không bên nào chịu trách nhiệm cho thiệt hại gián tiếp hoặc hệ quả. Tổng trách nhiệm của mỗi bên trong một đợt hợp tác không vượt quá phí đã trả cho đợt đó trong 12 tháng trước khiếu nại. Giới hạn này không áp dụng cho gian lận, xâm phạm SHTT, hoặc vi phạm bảo mật.</p></div>
58
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">8. Thời hạn &amp; chấm dứt</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">Hợp đồng có hiệu lực đến khi chấm dứt. Mỗi bên có thể chấm dứt Hợp đồng hoặc bất kỳ SOW nào bằng thông báo bằng văn bản trước <b>30 ngày</b>, hoặc ngay lập tức khi vi phạm nghiêm trọng không được khắc phục. Khi chấm dứt, Khách hàng thanh toán cho Dịch vụ đã thực hiện; các điều khoản bảo mật và SHTT tiếp tục có hiệu lực.</p></div>
59
+ <div class="cs-avoid"><h2 style="font-size:14.5px;font-weight:800;margin:0 0 5px;color:var(--cs-color-brand-umber)">9. Điều khoản chung</h2><p style="font-size:13px;line-height:1.75;margin:0;color:var(--cs-color-text-muted)">Hợp đồng này chịu sự điều chỉnh của pháp luật Việt Nam; tòa án tại TP. Hồ Chí Minh có thẩm quyền giải quyết. Đây là toàn bộ thỏa thuận về đối tượng của nó và chỉ được sửa đổi bằng văn bản có chữ ký hai bên.</p></div>
60
+ </div>
61
+ <sc-if value="{{ showSignatures }}">
62
+ <div class="cs-avoid" style="display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:38px;padding-top:26px;border-top:1px solid var(--cs-color-border-default)">
63
+ <div><div style="height:44px;border-bottom:1.5px solid var(--cs-color-brand-umber)"></div><div style="font-size:12px;color:var(--cs-color-text-muted);margin-top:8px">Công ty TNHH CyberSkill</div><div style="font-size:12px;color:var(--cs-color-text-muted)">Họ tên / chức danh / ngày</div></div>
64
+ <div><div style="height:44px;border-bottom:1.5px solid var(--cs-color-brand-umber)"></div><div style="font-size:12px;color:var(--cs-color-text-muted);margin-top:8px">[Công ty khách hàng]</div><div style="font-size:12px;color:var(--cs-color-text-muted)">Họ tên / chức danh / ngày</div></div>
65
+ </div>
66
+ </sc-if>
67
+ </div></sc-if>
68
+ </div>
69
+ </div>
70
+ </x-dc>
71
+ <script type="text/x-dc" data-dc-script data-props="{&quot;element&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Thổ · studio&quot;,&quot;Thổ · clay&quot;,&quot;Thổ · sand&quot;,&quot;Hỏa · ember&quot;,&quot;Hỏa · lava&quot;,&quot;Hỏa · plasma&quot;,&quot;Thủy · river&quot;,&quot;Thủy · ocean&quot;,&quot;Thủy · mist&quot;,&quot;Mộc · leaf&quot;,&quot;Mộc · bamboo&quot;,&quot;Mộc · forest&quot;,&quot;Kim · champagne&quot;,&quot;Kim · steel&quot;,&quot;Kim · titanium&quot;],&quot;default&quot;:&quot;Thổ · studio&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Element (Ngũ Hành)&quot;},&quot;language&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;English&quot;,&quot;Tiếng Việt&quot;],&quot;default&quot;:&quot;English&quot;,&quot;tsType&quot;:&quot;\&quot;English\&quot; | \&quot;Tiếng Việt\&quot;&quot;,&quot;section&quot;:&quot;Content&quot;},&quot;showSignatures&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Content&quot;}}">
72
+ class Component extends DCLogic {
73
+ renderVals() {
74
+ const EL = {"Thổ · studio":["tho",""],"Thổ · clay":["tho","clay"],"Thổ · sand":["tho","sand"],"Hỏa · ember":["hoa",""],"Hỏa · lava":["hoa","lava"],"Hỏa · plasma":["hoa","plasma"],"Thủy · river":["thuy",""],"Thủy · ocean":["thuy","ocean"],"Thủy · mist":["thuy","mist"],"Mộc · leaf":["moc",""],"Mộc · bamboo":["moc","bamboo"],"Mộc · forest":["moc","forest"],"Kim · champagne":["kim",""],"Kim · steel":["kim","steel"],"Kim · titanium":["kim","titanium"]};
75
+ const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
76
+ const lang = this.props.language ?? "English";
77
+ return { langAttr: (this.props.language ?? "English") === "Tiếng Việt" ? "vi" : "en", elAttr, vaAttr, hdrLabel: lang === "Tiếng Việt" ? "Hợp đồng khung" : "Master agreement",
78
+ showSignatures: this.props.showSignatures ?? true,
79
+ isEN: lang !== "Tiếng Việt",
80
+ isVN: lang === "Tiếng Việt"};
81
+ }
82
+ }
83
+ </script>
84
+ </body>
85
+ </html>
package/templates/legal-msa/ds-base.js ADDED
@@ -0,0 +1,23 @@
1
+ // Loads this design system into the template. In a consuming project, point
2
+ // base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
3
+ // the project root, '../_ds/<folder>' one level down) — one line to edit.
4
+ (() => {
5
+ const base = '../..';
6
+ for (const p of ['styles.css']) {
7
+ const l = document.createElement('link');
8
+ l.rel = 'stylesheet'; l.href = base + '/' + p;
9
+ document.head.appendChild(l);
10
+ }
11
+ const s = document.createElement('script');
12
+ s.src = base + '/_ds_bundle.js';
13
+ s.onload = () => {
14
+ // Expose a STABLE, project-id-independent alias. The compiler names the bundle
15
+ // global CyberSkillDesignSystem_<6-hex-project-id>, which changes whenever this
16
+ // system is re-imported into another project. Templates/cards read window.CyberSkillDS
17
+ // so no file ever has to be rewritten on re-import.
18
+ const k = Object.keys(window).find((k) => /^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k));
19
+ if (k) window.CyberSkillDS = window[k];
20
+ };
21
+ s.onerror = () => console.error('ds-base.js: failed to load ' + s.src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet');
22
+ document.head.appendChild(s);
23
+ })();