@cyberskill/design 1.0.0 → 1.1.1

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 (266) hide show
  1. package/DESIGN.md +10 -9
  2. package/README.md +31 -28
  3. package/SKILL.md +13 -9
  4. package/VERSION +1 -1
  5. package/_ds_bundle.js +660 -202
  6. package/_ds_manifest.json +1 -1
  7. package/_esm/cs.mjs +14 -8
  8. package/_esm/react.d.ts +216 -0
  9. package/_esm/react.mjs +114 -0
  10. package/base/collections.css +31 -0
  11. package/base/components.css +3 -0
  12. package/base/data.css +33 -0
  13. package/base/forms.css +8 -0
  14. package/base/interaction.css +1 -0
  15. package/base/typography.css +6 -0
  16. package/components/_i18n/strings.js +8 -4
  17. package/components/ai/ai-conversation.card.html +2 -2
  18. package/components/ai/ai-lumi.card.html +2 -2
  19. package/components/ai/ai.card.html +2 -2
  20. package/components/brand/brand.card.html +2 -2
  21. package/components/button/buttons.card.html +2 -2
  22. package/components/data/AspectRatio.d.ts +16 -0
  23. package/components/data/AspectRatio.figma.tsx +12 -0
  24. package/components/data/AspectRatio.jsx +16 -0
  25. package/components/data/AspectRatio.prompt.md +7 -0
  26. package/components/data/Collapsible.d.ts +21 -0
  27. package/components/data/Collapsible.figma.tsx +12 -0
  28. package/components/data/Collapsible.jsx +49 -0
  29. package/components/data/Collapsible.prompt.md +7 -0
  30. package/components/data/Image.d.ts +4 -0
  31. package/components/data/Image.prompt.md +2 -2
  32. package/components/data/Item.d.ts +26 -0
  33. package/components/data/Item.figma.tsx +12 -0
  34. package/components/data/Item.jsx +63 -0
  35. package/components/data/Item.prompt.md +10 -0
  36. package/components/data/ScrollArea.d.ts +16 -0
  37. package/components/data/ScrollArea.figma.tsx +12 -0
  38. package/components/data/ScrollArea.jsx +25 -0
  39. package/components/data/ScrollArea.prompt.md +7 -0
  40. package/components/data/collections.card.html +15 -4
  41. package/components/data/data.card.html +15 -4
  42. package/components/datatable/datatable.card.html +2 -2
  43. package/components/dialog/dialog.card.html +2 -2
  44. package/components/feedback/feedback-2.card.html +2 -2
  45. package/components/feedback/feedback.card.html +2 -2
  46. package/components/forms/Cascader.jsx +5 -3
  47. package/components/forms/Editor.prompt.md +1 -1
  48. package/components/forms/InputGroup.d.ts +4 -0
  49. package/components/forms/InputGroup.jsx +38 -8
  50. package/components/forms/InputGroup.prompt.md +3 -3
  51. package/components/forms/NativeSelect.d.ts +22 -0
  52. package/components/forms/NativeSelect.figma.tsx +12 -0
  53. package/components/forms/NativeSelect.jsx +56 -0
  54. package/components/forms/NativeSelect.prompt.md +10 -0
  55. package/components/forms/NumberField.d.ts +5 -0
  56. package/components/forms/NumberField.jsx +51 -7
  57. package/components/forms/NumberField.prompt.md +2 -2
  58. package/components/forms/SegmentedControl.jsx +1 -1
  59. package/components/forms/TagInput.d.ts +3 -0
  60. package/components/forms/TagInput.jsx +62 -20
  61. package/components/forms/TagInput.prompt.md +2 -2
  62. package/components/forms/forms-2.card.html +2 -2
  63. package/components/forms/forms.card.html +5 -4
  64. package/components/icon/Icon.prompt.md +1 -1
  65. package/components/icon/icon.card.html +2 -2
  66. package/components/logo/Logo.jsx +2 -1
  67. package/components/logo/logo.card.html +2 -2
  68. package/components/navigation/Menu.jsx +14 -1
  69. package/components/navigation/navigation.card.html +2 -2
  70. package/components/navigation/shell.card.html +2 -2
  71. package/components/overlays/AlertDialog.d.ts +29 -0
  72. package/components/overlays/AlertDialog.figma.tsx +12 -0
  73. package/components/overlays/AlertDialog.jsx +142 -0
  74. package/components/overlays/AlertDialog.prompt.md +12 -0
  75. package/components/overlays/Drawer.jsx +1 -1
  76. package/components/overlays/Popconfirm.jsx +14 -1
  77. package/components/overlays/Popover.jsx +14 -1
  78. package/components/overlays/alertdialog.card.html +42 -0
  79. package/components/overlays/overlays.card.html +2 -2
  80. package/components/textfield/textfield.card.html +2 -2
  81. package/docs/benchmark-rubric.md +46 -0
  82. package/docs/ci-cd.md +17 -11
  83. package/docs/consumer-grant.md +37 -0
  84. package/docs/consuming.md +45 -16
  85. package/docs/contrast-report.md +91 -103
  86. package/docs/conventions.md +12 -9
  87. package/docs/decisions.md +33 -10
  88. package/docs/deploy.md +1 -1
  89. package/docs/design-styles.md +26 -8
  90. package/docs/figma.md +3 -3
  91. package/docs/live-hub.md +5 -3
  92. package/docs/products.md +13 -11
  93. package/docs/quality-gates.md +35 -21
  94. package/docs/release-notes.md +21 -3
  95. package/docs/status/assets/favicon.svg +5 -0
  96. package/docs/status/assets/status-legacy.css +399 -0
  97. package/docs/status/assets/status-legacy.js +505 -0
  98. package/docs/status/assets/status.css +644 -0
  99. package/docs/status/assets/status.js +1308 -0
  100. package/docs/status/data/status-feed.json +1 -0
  101. package/docs/status/data/task/TASK-REL-001.js +1 -0
  102. package/docs/status/data/task/TASK-REL-002.js +1 -0
  103. package/docs/status/index.html +42 -0
  104. package/docs/status/roadmap.html +4 -0
  105. package/docs/status/status-legacy.html +117 -0
  106. package/docs/storybook.md +5 -4
  107. package/docs/sync.md +3 -2
  108. package/docs/tasks/BACKLOG.md +26 -0
  109. package/docs/tasks/release/TASK-REL-001-launch-1-1-0/spec.md +55 -0
  110. package/docs/tasks/release/TASK-REL-002-republish-1-1-1/spec.md +54 -0
  111. package/docs/template-schema-v2.md +15 -3
  112. package/docs/vi/benchmark-rubric.md +46 -0
  113. package/docs/vi/ci-cd.md +17 -11
  114. package/docs/vi/consumer-grant.md +37 -0
  115. package/docs/vi/consuming.md +45 -16
  116. package/docs/vi/contrast-report.md +94 -106
  117. package/docs/vi/conventions.md +12 -9
  118. package/docs/vi/decisions.md +33 -10
  119. package/docs/vi/deploy.md +1 -1
  120. package/docs/vi/design-styles.md +26 -8
  121. package/docs/vi/figma.md +3 -3
  122. package/docs/vi/live-hub.md +5 -3
  123. package/docs/vi/products.md +13 -11
  124. package/docs/vi/quality-gates.md +35 -21
  125. package/docs/vi/release-notes.md +26 -8
  126. package/docs/vi/storybook.md +5 -4
  127. package/docs/vi/sync.md +3 -2
  128. package/docs/vi/template-schema-v2.md +15 -3
  129. package/docs/viewer.html +2 -2
  130. package/fonts/spacegrotesk-var-latin-ext.woff2 +0 -0
  131. package/fonts/spacegrotesk-var-latin.woff2 +0 -0
  132. package/fonts/spacegrotesk-var-vietnamese.woff2 +0 -0
  133. package/guidelines/atomic-view.html +40 -27
  134. package/guidelines/elements-geometry.html +69 -0
  135. package/guidelines/elements-variants.html +17 -17
  136. package/guidelines/type-families.html +16 -10
  137. package/llms.txt +17 -11
  138. package/package.json +38 -16
  139. package/styles.css +1 -0
  140. package/templates/ai-cluster-demo.html +29 -14
  141. package/templates/app-shell/support.js +4 -4
  142. package/templates/article/content-schema.json +6 -0
  143. package/templates/article/support.js +4 -4
  144. package/templates/auth/support.js +4 -4
  145. package/templates/bod-deck/support.js +4 -4
  146. package/templates/bod-investor-update/support.js +4 -4
  147. package/templates/bod-memo/support.js +4 -4
  148. package/templates/bod-minutes/content-schema.json +12 -0
  149. package/templates/bod-minutes/support.js +4 -4
  150. package/templates/bod-report/support.js +4 -4
  151. package/templates/bod-resolution/support.js +4 -4
  152. package/templates/culture-event-invite/support.js +4 -4
  153. package/templates/dashboard/support.js +4 -4
  154. package/templates/delivery-change-note/support.js +4 -4
  155. package/templates/delivery-kickoff/support.js +4 -4
  156. package/templates/delivery-qbr-deck/support.js +4 -4
  157. package/templates/delivery-runbook/content-schema.json +6 -0
  158. package/templates/delivery-runbook/support.js +4 -4
  159. package/templates/delivery-status-email/support.js +4 -4
  160. package/templates/doc-style-guide/DocStyleGuide.dc.html +2 -2
  161. package/templates/doc-style-guide/support.js +4 -4
  162. package/templates/doc-suite-index/support.js +4 -4
  163. package/templates/doc-templates/DocTemplates.dc.html +1 -1
  164. package/templates/doc-templates/support.js +4 -4
  165. package/templates/email/support.js +4 -4
  166. package/templates/email-safe/README.md +17 -4
  167. package/templates/email-safe/email-launch.html +3 -3
  168. package/templates/email-safe/email-newsletter.html +1 -1
  169. package/templates/finance-dunning-email/support.js +4 -4
  170. package/templates/finance-expense-report/support.js +4 -4
  171. package/templates/finance-invoice/support.js +4 -4
  172. package/templates/finance-quote/support.js +4 -4
  173. package/templates/hr-announcement/support.js +4 -4
  174. package/templates/hr-interview-kit/content-schema.json +12 -0
  175. package/templates/hr-interview-kit/support.js +4 -4
  176. package/templates/hr-offboarding/content-schema.json +12 -0
  177. package/templates/hr-offboarding/support.js +4 -4
  178. package/templates/hr-performance-review/content-schema.json +12 -0
  179. package/templates/hr-performance-review/support.js +4 -4
  180. package/templates/hr-pip/content-schema.json +12 -0
  181. package/templates/hr-pip/support.js +4 -4
  182. package/templates/legal-msa/content-schema.json +16 -0
  183. package/templates/legal-msa/support.js +4 -4
  184. package/templates/legal-sow/support.js +4 -4
  185. package/templates/marketing-campaign-brief/support.js +4 -4
  186. package/templates/marketing-case-study/support.js +4 -4
  187. package/templates/marketing-launch/support.js +4 -4
  188. package/templates/marketing-newsletter/support.js +4 -4
  189. package/templates/marketing-page/content-schema.json +0 -1
  190. package/templates/marketing-page/support.js +4 -4
  191. package/templates/marketing-press-release/support.js +4 -4
  192. package/templates/marketing-social-kit/support.js +4 -4
  193. package/templates/playground.html +8 -4
  194. package/templates/sales-one-pager/support.js +4 -4
  195. package/templates/sales-proposal-deck/support.js +4 -4
  196. package/templates/settings/Settings.dc.html +26 -14
  197. package/templates/settings/content-schema.json +36 -0
  198. package/templates/settings/support.js +4 -4
  199. package/templates/slide-deck/support.js +4 -4
  200. package/templates/team-meeting-agenda/content-schema.json +16 -0
  201. package/templates/team-meeting-agenda/support.js +4 -4
  202. package/templates/tech-incident-report/support.js +4 -4
  203. package/templates/tech-release-notes/support.js +4 -4
  204. package/templates/tech-retro/content-schema.json +12 -0
  205. package/templates/tech-retro/support.js +4 -4
  206. package/templates/tech-rfc/content-schema.json +6 -0
  207. package/templates/tech-rfc/support.js +4 -4
  208. package/templates/vn-appointment-transfer/support.js +4 -4
  209. package/templates/vn-certificate-of-employment/support.js +4 -4
  210. package/templates/vn-code-of-conduct/support.js +4 -4
  211. package/templates/vn-compensation-regulation/support.js +4 -4
  212. package/templates/vn-contract-amendment/support.js +4 -4
  213. package/templates/vn-contractor-agreement/support.js +4 -4
  214. package/templates/vn-data-protection-policy/support.js +4 -4
  215. package/templates/vn-disciplinary-case-file/support.js +4 -4
  216. package/templates/vn-disciplinary-schedule/content-schema.json +15 -0
  217. package/templates/vn-disciplinary-schedule/support.js +4 -4
  218. package/templates/vn-employee-request/support.js +4 -4
  219. package/templates/vn-exit-handover/support.js +4 -4
  220. package/templates/vn-foreign-employee-pack/support.js +4 -4
  221. package/templates/vn-grassroots-democracy/support.js +4 -4
  222. package/templates/vn-infosec-policy/support.js +4 -4
  223. package/templates/vn-internal-labor-regulations/support.js +4 -4
  224. package/templates/vn-internship-agreement/support.js +4 -4
  225. package/templates/vn-job-description/support.js +4 -4
  226. package/templates/vn-labor-contract/support.js +4 -4
  227. package/templates/vn-labour-management-book/content-schema.json +15 -0
  228. package/templates/vn-labour-management-book/support.js +4 -4
  229. package/templates/vn-mutual-nda/support.js +4 -4
  230. package/templates/vn-ndnca-ip/support.js +4 -4
  231. package/templates/vn-offer-letter/support.js +4 -4
  232. package/templates/vn-onboarding-checklist/support.js +4 -4
  233. package/templates/vn-pdpl-consent/support.js +4 -4
  234. package/templates/vn-performance-evaluation-regulation/support.js +4 -4
  235. package/templates/vn-performance-review-form/support.js +4 -4
  236. package/templates/vn-phantom-stock/support.js +4 -4
  237. package/templates/vn-probation-contract/support.js +4 -4
  238. package/templates/vn-receipt-acknowledgement/content-schema.json +15 -0
  239. package/templates/vn-receipt-acknowledgement/support.js +4 -4
  240. package/templates/vn-remote-work-policy/support.js +4 -4
  241. package/templates/vn-resignation-letter/support.js +4 -4
  242. package/templates/vn-salary-scale/content-schema.json +15 -0
  243. package/templates/vn-salary-scale/support.js +4 -4
  244. package/templates/vn-sow-appendix/support.js +4 -4
  245. package/templates/vn-termination-decision/support.js +4 -4
  246. package/templates/vn-total-rewards-appendix/support.js +4 -4
  247. package/templates/vn-training-commitment/support.js +4 -4
  248. package/templates/vn-travel-expense-policy/support.js +4 -4
  249. package/tokens/element-seeds.json +112 -0
  250. package/tokens/elements.css +274 -187
  251. package/tokens/fonts.css +12 -3
  252. package/tokens/native/CSTokens.kt +84 -68
  253. package/tokens/native/CSTokens.swift +84 -68
  254. package/tokens/native/cs_tokens.dart +84 -68
  255. package/tokens/provenance.json +9 -9
  256. package/tokens/styles.css +15 -0
  257. package/tokens/tokens.dtcg.json +258 -233
  258. package/tokens/tokens.js +168 -167
  259. package/tokens/tokens.json +167 -166
  260. package/tokens/typography.css +9 -1
  261. package/ui_kits/status-hub/README.md +1 -2
  262. package/ui_kits/status-hub/index.html +2 -2
  263. package/ui_kits/status-hub/settings.html +6 -3
  264. package/ui_kits/website/chat.html +2 -2
  265. package/ui_kits/website/index.html +2 -2
  266. package/ui_kits/status-hub/identity-lab.html +0 -134
package/ui_kits/status-hub/identity-lab.html DELETED
@@ -1,134 +0,0 @@
1
- <!-- @dsCard group="Status Hub" viewport="1280x800" name="Identity Lab" subtitle="Live Theme × Element × Language on a product surface — click any pill" -->
2
- <!DOCTYPE html>
3
- <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
4
- <title>CyberSkill · Identity Lab</title>
5
- <link rel="stylesheet" href="../../styles.css">
6
- <style>
7
- body{margin:0;background:var(--cs-color-surface-raised);font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);min-height:100vh}
8
- .bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:14px 28px;background:var(--cs-color-surface-panel);border-bottom:1px solid var(--cs-color-border-default);position:sticky;top:0;z-index:10}
9
- .lb{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;font-weight:800;color:var(--cs-color-text-muted);margin-right:2px}
10
- .pills{display:flex;gap:6px;flex-wrap:wrap}
11
- .pill{border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--cs-color-text-primary);cursor:pointer;min-height:30px}
12
- .pill:hover{background:var(--cs-color-surface-raised)}
13
- .pill.on{background:var(--cs-color-brand-umber);border-color:var(--cs-color-brand-umber);color:#fff}
14
- .pill:focus-visible{outline:3px solid var(--cs-color-accent-ochre);outline-offset:2px}
15
- a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
16
- [data-theme="dark"] .pill.on{background:var(--cs-color-brand-ochre);border-color:var(--cs-color-brand-ochre);color:#1a1108}
17
- </style></head>
18
- <body>
19
- <div class="bar" id="axis-bar">
20
- <span class="lb">Element</span>
21
- <span class="pills" id="els">
22
- <button class="pill on" data-el="" data-va="">Thổ · studio</button>
23
- <button class="pill" data-el="tho" data-va="clay">Thổ · clay</button>
24
- <button class="pill" data-el="tho" data-va="sand">Thổ · sand</button>
25
- <button class="pill" data-el="hoa" data-va="">Hỏa</button>
26
- <button class="pill" data-el="hoa" data-va="lava">Hỏa · lava</button>
27
- <button class="pill" data-el="hoa" data-va="plasma">Hỏa · plasma</button>
28
- <button class="pill" data-el="thuy" data-va="">Thủy</button>
29
- <button class="pill" data-el="thuy" data-va="ocean">Thủy · ocean</button>
30
- <button class="pill" data-el="thuy" data-va="mist">Thủy · mist</button>
31
- <button class="pill" data-el="moc" data-va="">Mộc</button>
32
- <button class="pill" data-el="moc" data-va="bamboo">Mộc · bamboo</button>
33
- <button class="pill" data-el="moc" data-va="forest">Mộc · forest</button>
34
- <button class="pill" data-el="kim" data-va="">Kim</button>
35
- <button class="pill" data-el="kim" data-va="steel">Kim · steel</button>
36
- <button class="pill" data-el="kim" data-va="titanium">Kim · titanium</button>
37
- </span>
38
- <span class="lb">Theme</span>
39
- <span class="pills" id="themes">
40
- <button class="pill on" data-theme="">light</button>
41
- <button class="pill" data-theme="dark">dark</button>
42
- </span>
43
- <span class="lb">Language</span>
44
- <span class="pills" id="langs">
45
- <button class="pill on" data-lang="en">English</button>
46
- <button class="pill" data-lang="vi">Tiếng Việt</button>
47
- </span>
48
- </div>
49
- <div id="stage" style="max-width:1180px;margin:26px auto;padding:0 24px" lang="en">
50
- <div style="position:relative;overflow:hidden;background:var(--cs-accent-strong);color:#fff;border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-md)">
51
- <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.5;pointer-events:none"></div>
52
- <div style="position:relative;display:flex;align-items:center;gap:14px;padding:20px 26px">
53
- <span style="width:40px;height:40px;border-radius:var(--cs-radius-md);background:var(--cs-accent-bright);display:grid;place-items:center;color:var(--cs-accent-on);font-weight:800">✦</span>
54
- <div>
55
- <div style="font-weight:800;font-size:19px;letter-spacing:-0.01em" data-i18n="title">Status Hub</div>
56
- <div style="font-size:12px;opacity:0.8" data-i18n="subtitle">Identity Lab · Theme × Element × Language</div>
57
- </div>
58
- <span style="margin-left:auto;display:inline-flex;align-items:center;background:var(--cs-accent-bright);color:var(--cs-accent-on);font-weight:700;font-size:13.5px;padding:0 18px;border-radius:var(--cs-component-button-radius);min-height:var(--cs-component-button-md-minHeight)" data-i18n="cta">New project</span>
59
- </div>
60
- </div>
61
- <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0;padding:18px 20px;background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-sm)">
62
- <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k1">Projects</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px">6</div></div>
63
- <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k2">In progress</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px">4</div></div>
64
- <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k3">Shipped</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px">1</div></div>
65
- <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k4">Avg progress</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px;color:var(--cs-color-text-accent)">70%</div></div>
66
- </div>
67
- <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
68
- <div style="background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-sm);padding:18px 20px">
69
- <div style="display:flex;justify-content:space-between;align-items:baseline;gap:10px"><b style="font-size:15px" data-i18n="cardTitle">Checkout rebuild</b><span style="font-size:12px;color:var(--cs-color-text-muted)">72%</span></div>
70
- <p style="margin:6px 0 14px;font-size:13px;color:var(--cs-color-text-muted)" data-i18n="cardBody">Staging cutover on track for the milestone.</p>
71
- <div style="height:8px;border-radius:999px;background:var(--cs-color-surface-raised);overflow:hidden"><span style="display:block;height:100%;width:72%;background:var(--cs-accent);border-radius:999px"></span></div>
72
- <span style="display:inline-block;margin-top:14px;background:var(--cs-accent-tint);color:var(--cs-color-text-accent);font-weight:700;font-size:11.5px;padding:4px 10px;border-radius:999px" data-i18n="badge">In progress</span>
73
- </div>
74
- <div style="background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-sm);padding:18px 20px;display:flex;flex-direction:column;gap:10px">
75
- <b style="font-size:15px" data-i18n="wishTitle">Make a wish</b>
76
- <span style="border:1px solid var(--cs-component-textfield-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-panel);padding:var(--cs-component-textfield-paddingY) var(--cs-component-textfield-paddingX);font-size:13.5px;color:var(--cs-color-text-muted);min-height:var(--cs-component-textfield-minHeight);box-sizing:border-box;display:flex;align-items:center" data-i18n="wishPh">A faster checkout, an app, a tool…</span>
77
- <div style="display:flex;gap:10px;align-items:center">
78
- <span style="display:inline-flex;align-items:center;background:var(--cs-component-button-primary-bg);color:var(--cs-component-button-primary-fg);font-weight:700;font-size:13.5px;padding:0 var(--cs-component-button-md-paddingX);border-radius:var(--cs-component-button-radius);min-height:var(--cs-component-button-md-minHeight);box-shadow:var(--cs-shadow-xs)" data-i18n="wishCta">Make a wish</span>
79
- <a href="#" style="font-size:13.5px;font-weight:600" data-i18n="how">How it works</a>
80
- </div>
81
- <p style="margin:2px 0 0;font-size:12px;color:var(--cs-color-text-muted)" data-i18n="focus">Focus rings stay Ochre in every identity — try tabbing the pills above.</p>
82
- </div>
83
- </div>
84
- </div>
85
- <script>
86
- (function(){
87
- var stage=document.getElementById('stage');
88
- var I18N={
89
- en:{title:'Status Hub',subtitle:'Identity Lab · Theme × Element × Language',cta:'New project',k1:'Projects',k2:'In progress',k3:'Shipped',k4:'Avg progress',cardTitle:'Checkout rebuild',cardBody:'Staging cutover on track for the milestone.',badge:'In progress',wishTitle:'Make a wish',wishPh:'A faster checkout, an app, a tool…',wishCta:'Make a wish',how:'How it works',focus:'Focus rings stay Ochre in every identity — try tabbing the pills above.'},
90
- vi:{title:'Status Hub',subtitle:'Phòng lab nhận diện · Theme × Element × Language',cta:'Dự án mới',k1:'Dự án',k2:'Đang làm',k3:'Đã giao',k4:'Tiến độ TB',cardTitle:'Tái dựng checkout',cardBody:'Chuyển staging đúng milestone.',badge:'Đang làm',wishTitle:'Ước một điều',wishPh:'Checkout nhanh hơn, một app, một công cụ…',wishCta:'Ước ngay',how:'Cách hoạt động',focus:'Vòng focus luôn Ochre ở mọi nhận diện — thử Tab trên các pill phía trên.'}
91
- };
92
- function applyLang(lang){
93
- var pack=I18N[lang]||I18N.en;
94
- stage.setAttribute('lang', lang);
95
- document.documentElement.setAttribute('lang', lang);
96
- stage.querySelectorAll('[data-i18n]').forEach(function(el){
97
- var k=el.getAttribute('data-i18n'); if(pack[k]!=null) el.textContent=pack[k];
98
- });
99
- }
100
- function wire(rowId, apply){
101
- var row=document.getElementById(rowId);
102
- row.addEventListener('click',function(e){
103
- var b=e.target.closest('.pill'); if(!b) return;
104
- row.querySelectorAll('.pill').forEach(function(p){p.classList.remove('on')});
105
- b.classList.add('on'); apply(b);
106
- });
107
- }
108
- wire('els',function(b){
109
- if(b.dataset.el){stage.setAttribute('data-cs-element',b.dataset.el);}else{stage.removeAttribute('data-cs-element');}
110
- if(b.dataset.va){stage.setAttribute('data-cs-variant',b.dataset.va);}else{stage.removeAttribute('data-cs-variant');}
111
- });
112
- wire('themes',function(b){
113
- if(b.dataset.theme){stage.setAttribute('data-theme',b.dataset.theme);document.documentElement.setAttribute('data-theme',b.dataset.theme);}
114
- else{stage.removeAttribute('data-theme');document.documentElement.removeAttribute('data-theme');}
115
- });
116
- wire('langs',function(b){ applyLang(b.dataset.lang||'en'); });
117
- // Parent frame (e.g. Storybook Live iframe host) can postMessage axes
118
- window.addEventListener('message',function(ev){
119
- var d=ev.data||{}; if(d.type!=='__cs_axes') return;
120
- if(d.theme!==undefined){
121
- if(d.theme){stage.setAttribute('data-theme',d.theme);document.documentElement.setAttribute('data-theme',d.theme);}
122
- else{stage.removeAttribute('data-theme');document.documentElement.removeAttribute('data-theme');}
123
- document.querySelectorAll('#themes .pill').forEach(function(p){p.classList.toggle('on',(p.dataset.theme||'')===(d.theme||''));});
124
- }
125
- if(d.element!==undefined){
126
- if(d.element) stage.setAttribute('data-cs-element',d.element); else stage.removeAttribute('data-cs-element');
127
- if(d.variant) stage.setAttribute('data-cs-variant',d.variant); else stage.removeAttribute('data-cs-variant');
128
- }
129
- if(d.lang) applyLang(d.lang);
130
- });
131
- window.__csApplyAxes=function(ax){ window.postMessage(Object.assign({type:'__cs_axes'},ax||{}), '*'); };
132
- })();
133
- </script>
134
- </body></html>