@cyberskill/design 1.1.1 → 1.3.8

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 (481) hide show
  1. package/DESIGN.md +28 -5
  2. package/README.md +23 -22
  3. package/SKILL.md +7 -7
  4. package/THIRD-PARTY-NOTICES.md +35 -0
  5. package/VERSION +1 -1
  6. package/_ds_bundle.js +1495 -1733
  7. package/_ds_manifest.json +1 -1
  8. package/_esm/cs.mjs +18 -4
  9. package/_esm/react.d.ts +2 -0
  10. package/_esm/react.mjs +7 -1
  11. package/_vendor/NOTICE.md +16 -0
  12. package/_vendor/babel/README.md +7 -0
  13. package/_vendor/babel/babel.min.js +4 -0
  14. package/_vendor/react/README.md +3 -0
  15. package/_vendor/react/react-dom.production.min.js +1 -0
  16. package/_vendor/react/react.production.min.js +1 -0
  17. package/assets/aurora-hoa.webp +0 -0
  18. package/assets/aurora-kim.webp +0 -0
  19. package/assets/aurora-moc.webp +0 -0
  20. package/assets/aurora-tho.webp +0 -0
  21. package/assets/aurora-thuy.webp +0 -0
  22. package/base/a11y.css +18 -0
  23. package/base/ai.css +9 -4
  24. package/base/collections.css +18 -7
  25. package/base/components.css +16 -4
  26. package/base/controls.css +116 -66
  27. package/base/data.css +4 -4
  28. package/base/feedback.css +14 -2
  29. package/base/forms.css +10 -4
  30. package/base/glass.css +7 -1
  31. package/base/interaction.css +6 -2
  32. package/base/navigation.css +9 -3
  33. package/base/reset.css +7 -1
  34. package/base/responsive.css +38 -12
  35. package/base/shell.css +15 -3
  36. package/components/_i18n/i18n.js +41 -4
  37. package/components/_i18n/strings.js +89 -22
  38. package/components/ai/ChatMessage.d.ts +2 -0
  39. package/components/ai/ChatMessage.jsx +8 -4
  40. package/components/ai/ConfidenceMeter.d.ts +2 -0
  41. package/components/ai/ConfidenceMeter.jsx +8 -6
  42. package/components/ai/HumanReviewGate.d.ts +2 -0
  43. package/components/ai/PromptInput.d.ts +2 -0
  44. package/components/ai/TypingIndicator.d.ts +2 -0
  45. package/components/ai/ai-conversation.card.html +3 -3
  46. package/components/ai/ai-lumi.card.html +3 -3
  47. package/components/ai/ai.card.html +3 -3
  48. package/components/brand/brand.card.html +3 -3
  49. package/components/button/buttons.card.html +3 -3
  50. package/components/data/Image.jsx +18 -2
  51. package/components/data/Sortable.d.ts +5 -1
  52. package/components/data/Sortable.jsx +42 -9
  53. package/components/data/Sortable.prompt.md +4 -2
  54. package/components/data/Terminal.jsx +3 -2
  55. package/components/data/Tooltip.d.ts +2 -0
  56. package/components/data/Tooltip.jsx +6 -3
  57. package/components/data/Tree.d.ts +2 -1
  58. package/components/data/Tree.jsx +137 -16
  59. package/components/data/Tree.prompt.md +1 -1
  60. package/components/data/Watermark.jsx +11 -3
  61. package/components/data/collections.card.html +3 -3
  62. package/components/data/data.card.html +3 -3
  63. package/components/datatable/DataGrid.jsx +10 -1
  64. package/components/datatable/DataTable.d.ts +24 -1
  65. package/components/datatable/DataTable.jsx +78 -5
  66. package/components/datatable/DataTable.prompt.md +2 -1
  67. package/components/datatable/datatable.card.html +20 -16
  68. package/components/dialog/Dialog.jsx +13 -45
  69. package/components/dialog/dialog.card.html +3 -3
  70. package/components/feedback/Alert.d.ts +2 -0
  71. package/components/feedback/Alert.jsx +8 -2
  72. package/components/feedback/EmptyState.d.ts +2 -0
  73. package/components/feedback/EmptyState.jsx +6 -3
  74. package/components/feedback/ProgressBar.d.ts +2 -0
  75. package/components/feedback/ProgressBar.jsx +9 -4
  76. package/components/feedback/Toast.jsx +15 -1
  77. package/components/feedback/Toast.prompt.md +2 -1
  78. package/components/feedback/feedback-2.card.html +3 -3
  79. package/components/feedback/feedback.card.html +3 -3
  80. package/components/forms/Cascader.jsx +76 -8
  81. package/components/forms/Editor.jsx +37 -2
  82. package/components/forms/FileUpload.d.ts +2 -0
  83. package/components/forms/FileUpload.jsx +22 -8
  84. package/components/forms/Form.d.ts +3 -1
  85. package/components/forms/Form.jsx +9 -1
  86. package/components/forms/Form.prompt.md +1 -1
  87. package/components/forms/Mentions.d.ts +1 -1
  88. package/components/forms/Mentions.jsx +59 -7
  89. package/components/forms/Mentions.prompt.md +3 -1
  90. package/components/forms/Rating.d.ts +3 -2
  91. package/components/forms/Rating.jsx +34 -3
  92. package/components/forms/Rating.prompt.md +1 -1
  93. package/components/forms/Select.d.ts +2 -0
  94. package/components/forms/Select.jsx +6 -2
  95. package/components/forms/Slider.d.ts +2 -0
  96. package/components/forms/Slider.jsx +5 -2
  97. package/components/forms/Switch.d.ts +2 -0
  98. package/components/forms/Switch.jsx +15 -3
  99. package/components/forms/TimePicker.jsx +3 -1
  100. package/components/forms/Toggle.d.ts +2 -0
  101. package/components/forms/Toggle.jsx +14 -2
  102. package/components/forms/forms-2.card.html +3 -3
  103. package/components/forms/forms.card.html +3 -3
  104. package/components/icon/Icon.d.ts +1 -1
  105. package/components/icon/Icon.jsx +1 -0
  106. package/components/icon/Icon.prompt.md +1 -1
  107. package/components/icon/icon.card.html +3 -3
  108. package/components/logo/logo.card.html +3 -3
  109. package/components/navigation/CommandPalette.d.ts +2 -0
  110. package/components/navigation/CommandPalette.jsx +22 -7
  111. package/components/navigation/Menu.d.ts +2 -0
  112. package/components/navigation/Menu.jsx +60 -6
  113. package/components/navigation/Steps.d.ts +2 -0
  114. package/components/navigation/Steps.jsx +6 -3
  115. package/components/navigation/Tabs.d.ts +2 -0
  116. package/components/navigation/Tabs.jsx +6 -3
  117. package/components/navigation/Toolbar.d.ts +3 -2
  118. package/components/navigation/Toolbar.jsx +119 -12
  119. package/components/navigation/Toolbar.prompt.md +1 -1
  120. package/components/navigation/navigation.card.html +3 -3
  121. package/components/navigation/shell.card.html +3 -3
  122. package/components/overlays/AlertDialog.jsx +19 -49
  123. package/components/overlays/ContextMenu.d.ts +2 -0
  124. package/components/overlays/ContextMenu.jsx +6 -3
  125. package/components/overlays/Drawer.d.ts +2 -0
  126. package/components/overlays/Drawer.jsx +24 -20
  127. package/components/overlays/OverlayManager.d.ts +40 -0
  128. package/components/overlays/OverlayManager.jsx +214 -0
  129. package/components/overlays/OverlayManager.prompt.md +12 -0
  130. package/components/overlays/Tour.jsx +14 -7
  131. package/components/overlays/alertdialog.card.html +3 -3
  132. package/components/overlays/overlays.card.html +3 -3
  133. package/components/textfield/textfield.card.html +3 -3
  134. package/dist/styles.min.css +2252 -0
  135. package/docs/benchmark-rubric.md +1 -1
  136. package/docs/ci-cd.md +19 -12
  137. package/docs/consumer-grant.md +3 -0
  138. package/docs/consuming.md +13 -13
  139. package/docs/contrast-report.md +79 -1
  140. package/docs/conventions.md +21 -8
  141. package/docs/decisions.md +45 -7
  142. package/docs/deploy.md +17 -6
  143. package/docs/design-styles.md +2 -2
  144. package/docs/quality-gates.md +35 -15
  145. package/docs/release-notes.md +2 -2
  146. package/docs/release-runbook.md +78 -0
  147. package/docs/sync.md +2 -2
  148. package/docs/vi/benchmark-rubric.md +1 -1
  149. package/docs/vi/ci-cd.md +17 -12
  150. package/docs/vi/consumer-grant.md +3 -0
  151. package/docs/vi/consuming.md +13 -13
  152. package/docs/vi/contrast-report.md +79 -1
  153. package/docs/vi/conventions.md +20 -7
  154. package/docs/vi/decisions.md +43 -6
  155. package/docs/vi/deploy.md +17 -6
  156. package/docs/vi/quality-gates.md +34 -15
  157. package/docs/vi/release-notes.md +2 -2
  158. package/docs/vi/release-runbook.md +78 -0
  159. package/docs/vi/sync.md +2 -2
  160. package/docs/viewer.html +2 -2
  161. package/fonts/OFL.txt +98 -0
  162. package/guidelines/atomic-view.html +13 -9
  163. package/guidelines/brand-imagery.html +1 -1
  164. package/guidelines/elements-variants.html +5 -5
  165. package/guidelines/spacing-breakpoints.html +2 -1
  166. package/guidelines/surfaces-glass.html +1 -1
  167. package/llms.txt +5 -5
  168. package/package.json +38 -10
  169. package/templates/_ds-base.canonical.js +55 -0
  170. package/templates/ai-cluster-demo.html +2 -2
  171. package/templates/app-shell/AppShell.dc.html +7 -5
  172. package/templates/app-shell/content-schema.json +7 -0
  173. package/templates/app-shell/ds-base.js +33 -1
  174. package/templates/app-shell/support.js +13 -20
  175. package/templates/article/Article.dc.html +7 -3
  176. package/templates/article/content-schema.json +7 -0
  177. package/templates/article/ds-base.js +33 -1
  178. package/templates/article/support.js +13 -20
  179. package/templates/auth/Auth.dc.html +33 -12
  180. package/templates/auth/content-schema.json +37 -0
  181. package/templates/auth/ds-base.js +33 -1
  182. package/templates/auth/support.js +13 -20
  183. package/templates/bod-deck/BodDeck.dc.html +11 -10
  184. package/templates/bod-deck/ds-base.js +33 -1
  185. package/templates/bod-deck/support.js +13 -20
  186. package/templates/bod-investor-update/BodInvestorUpdate.dc.html +4 -3
  187. package/templates/bod-investor-update/ds-base.js +33 -1
  188. package/templates/bod-investor-update/support.js +13 -20
  189. package/templates/bod-memo/BodMemo.dc.html +6 -5
  190. package/templates/bod-memo/ds-base.js +33 -1
  191. package/templates/bod-memo/support.js +13 -20
  192. package/templates/bod-minutes/BodMinutes.dc.html +2 -1
  193. package/templates/bod-minutes/ds-base.js +33 -1
  194. package/templates/bod-minutes/support.js +13 -20
  195. package/templates/bod-report/BodReport.dc.html +3 -2
  196. package/templates/bod-report/ds-base.js +33 -1
  197. package/templates/bod-report/support.js +13 -20
  198. package/templates/bod-resolution/BodResolution.dc.html +5 -4
  199. package/templates/bod-resolution/ds-base.js +33 -1
  200. package/templates/bod-resolution/support.js +13 -20
  201. package/templates/culture-event-invite/CultureEventInvite.dc.html +3 -2
  202. package/templates/culture-event-invite/ds-base.js +33 -1
  203. package/templates/culture-event-invite/support.js +13 -20
  204. package/templates/dashboard/Dashboard.dc.html +10 -6
  205. package/templates/dashboard/content-schema.json +7 -0
  206. package/templates/dashboard/ds-base.js +33 -1
  207. package/templates/dashboard/support.js +13 -20
  208. package/templates/delivery-change-note/DeliveryChangeNote.dc.html +4 -3
  209. package/templates/delivery-change-note/ds-base.js +33 -1
  210. package/templates/delivery-change-note/support.js +13 -20
  211. package/templates/delivery-kickoff/DeliveryKickoff.dc.html +3 -2
  212. package/templates/delivery-kickoff/ds-base.js +33 -1
  213. package/templates/delivery-kickoff/support.js +13 -20
  214. package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +6 -5
  215. package/templates/delivery-qbr-deck/ds-base.js +33 -1
  216. package/templates/delivery-qbr-deck/support.js +13 -20
  217. package/templates/delivery-runbook/DeliveryRunbook.dc.html +5 -4
  218. package/templates/delivery-runbook/ds-base.js +33 -1
  219. package/templates/delivery-runbook/support.js +13 -20
  220. package/templates/delivery-status-email/DeliveryStatusEmail.dc.html +3 -2
  221. package/templates/delivery-status-email/ds-base.js +33 -1
  222. package/templates/delivery-status-email/support.js +13 -20
  223. package/templates/doc-style-guide/DocStyleGuide.dc.html +67 -64
  224. package/templates/doc-style-guide/ds-base.js +33 -1
  225. package/templates/doc-style-guide/support.js +13 -20
  226. package/templates/doc-suite-index/DocSuiteIndex.dc.html +46 -45
  227. package/templates/doc-suite-index/ds-base.js +33 -1
  228. package/templates/doc-suite-index/support.js +13 -20
  229. package/templates/doc-templates/DocTemplates.dc.html +42 -41
  230. package/templates/doc-templates/ds-base.js +33 -1
  231. package/templates/doc-templates/support.js +13 -20
  232. package/templates/email/Email.dc.html +3 -2
  233. package/templates/email/ds-base.js +33 -1
  234. package/templates/email/support.js +13 -20
  235. package/templates/email-safe/email-announcement.html +2 -2
  236. package/templates/email-safe/email-dunning.html +2 -2
  237. package/templates/email-safe/email-investor.html +2 -2
  238. package/templates/email-safe/email-launch.html +2 -2
  239. package/templates/email-safe/email-newsletter.html +2 -2
  240. package/templates/email-safe/email-status.html +2 -2
  241. package/templates/email-safe/email-transactional.html +2 -2
  242. package/templates/finance-dunning-email/FinanceDunningEmail.dc.html +6 -5
  243. package/templates/finance-dunning-email/ds-base.js +33 -1
  244. package/templates/finance-dunning-email/support.js +13 -20
  245. package/templates/finance-expense-report/FinanceExpenseReport.dc.html +4 -3
  246. package/templates/finance-expense-report/ds-base.js +33 -1
  247. package/templates/finance-expense-report/support.js +13 -20
  248. package/templates/finance-invoice/FinanceInvoice.dc.html +6 -5
  249. package/templates/finance-invoice/ds-base.js +33 -1
  250. package/templates/finance-invoice/support.js +13 -20
  251. package/templates/finance-quote/FinanceQuote.dc.html +6 -5
  252. package/templates/finance-quote/ds-base.js +33 -1
  253. package/templates/finance-quote/support.js +13 -20
  254. package/templates/hr-announcement/HrAnnouncement.dc.html +5 -4
  255. package/templates/hr-announcement/ds-base.js +33 -1
  256. package/templates/hr-announcement/support.js +13 -20
  257. package/templates/hr-interview-kit/HrInterviewKit.dc.html +5 -4
  258. package/templates/hr-interview-kit/ds-base.js +33 -1
  259. package/templates/hr-interview-kit/support.js +13 -20
  260. package/templates/hr-offboarding/HrOffboarding.dc.html +2 -1
  261. package/templates/hr-offboarding/ds-base.js +33 -1
  262. package/templates/hr-offboarding/support.js +13 -20
  263. package/templates/hr-performance-review/HrPerformanceReview.dc.html +2 -1
  264. package/templates/hr-performance-review/ds-base.js +33 -1
  265. package/templates/hr-performance-review/support.js +13 -20
  266. package/templates/hr-pip/HrPip.dc.html +2 -1
  267. package/templates/hr-pip/ds-base.js +33 -1
  268. package/templates/hr-pip/support.js +13 -20
  269. package/templates/kitchen-sink.html +9 -4
  270. package/templates/legal-msa/LegalMsa.dc.html +2 -1
  271. package/templates/legal-msa/ds-base.js +33 -1
  272. package/templates/legal-msa/support.js +13 -20
  273. package/templates/legal-sow/LegalSow.dc.html +2 -1
  274. package/templates/legal-sow/ds-base.js +33 -1
  275. package/templates/legal-sow/support.js +13 -20
  276. package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +3 -2
  277. package/templates/marketing-campaign-brief/ds-base.js +33 -1
  278. package/templates/marketing-campaign-brief/support.js +13 -20
  279. package/templates/marketing-case-study/MarketingCaseStudy.dc.html +6 -5
  280. package/templates/marketing-case-study/ds-base.js +33 -1
  281. package/templates/marketing-case-study/support.js +13 -20
  282. package/templates/marketing-launch/MarketingLaunch.dc.html +6 -5
  283. package/templates/marketing-launch/ds-base.js +33 -1
  284. package/templates/marketing-launch/support.js +13 -20
  285. package/templates/marketing-newsletter/MarketingNewsletter.dc.html +13 -12
  286. package/templates/marketing-newsletter/ds-base.js +33 -1
  287. package/templates/marketing-newsletter/support.js +13 -20
  288. package/templates/marketing-page/MarketingPage.dc.html +19 -14
  289. package/templates/marketing-page/content-schema.json +1 -0
  290. package/templates/marketing-page/ds-base.js +33 -1
  291. package/templates/marketing-page/support.js +13 -20
  292. package/templates/marketing-press-release/MarketingPressRelease.dc.html +2 -1
  293. package/templates/marketing-press-release/ds-base.js +33 -1
  294. package/templates/marketing-press-release/support.js +13 -20
  295. package/templates/marketing-social-kit/MarketingSocialKit.dc.html +5 -4
  296. package/templates/marketing-social-kit/ds-base.js +33 -1
  297. package/templates/marketing-social-kit/support.js +13 -20
  298. package/templates/sales-one-pager/SalesOnePager.dc.html +5 -4
  299. package/templates/sales-one-pager/ds-base.js +33 -1
  300. package/templates/sales-one-pager/support.js +13 -20
  301. package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +7 -6
  302. package/templates/sales-proposal-deck/ds-base.js +33 -1
  303. package/templates/sales-proposal-deck/support.js +13 -20
  304. package/templates/settings/Settings.dc.html +7 -3
  305. package/templates/settings/content-schema.json +7 -0
  306. package/templates/settings/ds-base.js +33 -1
  307. package/templates/settings/support.js +13 -20
  308. package/templates/slide-deck/SlideDeck.dc.html +5 -4
  309. package/templates/slide-deck/ds-base.js +33 -1
  310. package/templates/slide-deck/support.js +13 -20
  311. package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +2 -1
  312. package/templates/team-meeting-agenda/ds-base.js +33 -1
  313. package/templates/team-meeting-agenda/support.js +13 -20
  314. package/templates/tech-incident-report/TechIncidentReport.dc.html +3 -2
  315. package/templates/tech-incident-report/ds-base.js +33 -1
  316. package/templates/tech-incident-report/support.js +13 -20
  317. package/templates/tech-release-notes/TechReleaseNotes.dc.html +6 -5
  318. package/templates/tech-release-notes/ds-base.js +33 -1
  319. package/templates/tech-release-notes/support.js +13 -20
  320. package/templates/tech-retro/TechRetro.dc.html +4 -3
  321. package/templates/tech-retro/ds-base.js +33 -1
  322. package/templates/tech-retro/support.js +13 -20
  323. package/templates/tech-rfc/TechRfc.dc.html +3 -2
  324. package/templates/tech-rfc/ds-base.js +33 -1
  325. package/templates/tech-rfc/support.js +13 -20
  326. package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +36 -35
  327. package/templates/vn-appointment-transfer/ds-base.js +33 -1
  328. package/templates/vn-appointment-transfer/support.js +13 -20
  329. package/templates/vn-certificate-of-employment/VnCertificateOfEmployment.dc.html +27 -26
  330. package/templates/vn-certificate-of-employment/ds-base.js +33 -1
  331. package/templates/vn-certificate-of-employment/support.js +13 -20
  332. package/templates/vn-code-of-conduct/VnCodeOfConduct.dc.html +44 -43
  333. package/templates/vn-code-of-conduct/ds-base.js +33 -1
  334. package/templates/vn-code-of-conduct/support.js +13 -20
  335. package/templates/vn-compensation-regulation/VnCompensationRegulation.dc.html +53 -52
  336. package/templates/vn-compensation-regulation/ds-base.js +33 -1
  337. package/templates/vn-compensation-regulation/support.js +13 -20
  338. package/templates/vn-contract-amendment/VnContractAmendment.dc.html +41 -40
  339. package/templates/vn-contract-amendment/ds-base.js +33 -1
  340. package/templates/vn-contract-amendment/support.js +13 -20
  341. package/templates/vn-contractor-agreement/VnContractorAgreement.dc.html +50 -49
  342. package/templates/vn-contractor-agreement/ds-base.js +33 -1
  343. package/templates/vn-contractor-agreement/support.js +13 -20
  344. package/templates/vn-data-protection-policy/VnDataProtectionPolicy.dc.html +54 -53
  345. package/templates/vn-data-protection-policy/ds-base.js +33 -1
  346. package/templates/vn-data-protection-policy/support.js +13 -20
  347. package/templates/vn-disciplinary-case-file/VnDisciplinaryCaseFile.dc.html +72 -71
  348. package/templates/vn-disciplinary-case-file/ds-base.js +33 -1
  349. package/templates/vn-disciplinary-case-file/support.js +13 -20
  350. package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +21 -20
  351. package/templates/vn-disciplinary-schedule/ds-base.js +33 -1
  352. package/templates/vn-disciplinary-schedule/support.js +13 -20
  353. package/templates/vn-employee-request/VnEmployeeRequest.dc.html +54 -53
  354. package/templates/vn-employee-request/ds-base.js +33 -1
  355. package/templates/vn-employee-request/support.js +13 -20
  356. package/templates/vn-exit-handover/VnExitHandover.dc.html +122 -121
  357. package/templates/vn-exit-handover/ds-base.js +33 -1
  358. package/templates/vn-exit-handover/support.js +13 -20
  359. package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +31 -30
  360. package/templates/vn-foreign-employee-pack/ds-base.js +33 -1
  361. package/templates/vn-foreign-employee-pack/support.js +13 -20
  362. package/templates/vn-grassroots-democracy/VnGrassrootsDemocracy.dc.html +54 -53
  363. package/templates/vn-grassroots-democracy/ds-base.js +33 -1
  364. package/templates/vn-grassroots-democracy/support.js +13 -20
  365. package/templates/vn-infosec-policy/VnInfosecPolicy.dc.html +50 -49
  366. package/templates/vn-infosec-policy/ds-base.js +33 -1
  367. package/templates/vn-infosec-policy/support.js +13 -20
  368. package/templates/vn-internal-labor-regulations/VnInternalLaborRegulations.dc.html +84 -83
  369. package/templates/vn-internal-labor-regulations/ds-base.js +33 -1
  370. package/templates/vn-internal-labor-regulations/support.js +13 -20
  371. package/templates/vn-internship-agreement/VnInternshipAgreement.dc.html +44 -43
  372. package/templates/vn-internship-agreement/ds-base.js +33 -1
  373. package/templates/vn-internship-agreement/support.js +13 -20
  374. package/templates/vn-job-description/VnJobDescription.dc.html +28 -27
  375. package/templates/vn-job-description/ds-base.js +33 -1
  376. package/templates/vn-job-description/support.js +13 -20
  377. package/templates/vn-labor-contract/VnLaborContract.dc.html +109 -108
  378. package/templates/vn-labor-contract/ds-base.js +33 -1
  379. package/templates/vn-labor-contract/support.js +13 -20
  380. package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +32 -31
  381. package/templates/vn-labour-management-book/ds-base.js +33 -1
  382. package/templates/vn-labour-management-book/support.js +13 -20
  383. package/templates/vn-mutual-nda/VnMutualNda.dc.html +45 -44
  384. package/templates/vn-mutual-nda/ds-base.js +33 -1
  385. package/templates/vn-mutual-nda/support.js +13 -20
  386. package/templates/vn-ndnca-ip/VnNdncaIp.dc.html +73 -72
  387. package/templates/vn-ndnca-ip/ds-base.js +33 -1
  388. package/templates/vn-ndnca-ip/support.js +13 -20
  389. package/templates/vn-offer-letter/VnOfferLetter.dc.html +32 -31
  390. package/templates/vn-offer-letter/ds-base.js +33 -1
  391. package/templates/vn-offer-letter/support.js +13 -20
  392. package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +16 -15
  393. package/templates/vn-onboarding-checklist/ds-base.js +33 -1
  394. package/templates/vn-onboarding-checklist/support.js +13 -20
  395. package/templates/vn-pdpl-consent/VnPdplConsent.dc.html +43 -42
  396. package/templates/vn-pdpl-consent/ds-base.js +33 -1
  397. package/templates/vn-pdpl-consent/support.js +13 -20
  398. package/templates/vn-performance-evaluation-regulation/VnPerformanceEvaluationRegulation.dc.html +65 -64
  399. package/templates/vn-performance-evaluation-regulation/ds-base.js +33 -1
  400. package/templates/vn-performance-evaluation-regulation/support.js +13 -20
  401. package/templates/vn-performance-review-form/VnPerformanceReviewForm.dc.html +49 -48
  402. package/templates/vn-performance-review-form/ds-base.js +33 -1
  403. package/templates/vn-performance-review-form/support.js +13 -20
  404. package/templates/vn-phantom-stock/VnPhantomStock.dc.html +41 -40
  405. package/templates/vn-phantom-stock/ds-base.js +33 -1
  406. package/templates/vn-phantom-stock/support.js +13 -20
  407. package/templates/vn-probation-contract/VnProbationContract.dc.html +56 -55
  408. package/templates/vn-probation-contract/ds-base.js +33 -1
  409. package/templates/vn-probation-contract/support.js +13 -20
  410. package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +28 -27
  411. package/templates/vn-receipt-acknowledgement/ds-base.js +33 -1
  412. package/templates/vn-receipt-acknowledgement/support.js +13 -20
  413. package/templates/vn-remote-work-policy/VnRemoteWorkPolicy.dc.html +44 -43
  414. package/templates/vn-remote-work-policy/ds-base.js +33 -1
  415. package/templates/vn-remote-work-policy/support.js +13 -20
  416. package/templates/vn-resignation-letter/VnResignationLetter.dc.html +20 -19
  417. package/templates/vn-resignation-letter/ds-base.js +33 -1
  418. package/templates/vn-resignation-letter/support.js +13 -20
  419. package/templates/vn-salary-scale/VnSalaryScale.dc.html +39 -38
  420. package/templates/vn-salary-scale/ds-base.js +33 -1
  421. package/templates/vn-salary-scale/support.js +13 -20
  422. package/templates/vn-sow-appendix/VnSowAppendix.dc.html +21 -20
  423. package/templates/vn-sow-appendix/ds-base.js +33 -1
  424. package/templates/vn-sow-appendix/support.js +13 -20
  425. package/templates/vn-termination-decision/VnTerminationDecision.dc.html +25 -24
  426. package/templates/vn-termination-decision/ds-base.js +33 -1
  427. package/templates/vn-termination-decision/support.js +13 -20
  428. package/templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html +63 -62
  429. package/templates/vn-total-rewards-appendix/ds-base.js +33 -1
  430. package/templates/vn-total-rewards-appendix/support.js +13 -20
  431. package/templates/vn-training-commitment/VnTrainingCommitment.dc.html +39 -38
  432. package/templates/vn-training-commitment/ds-base.js +33 -1
  433. package/templates/vn-training-commitment/support.js +13 -20
  434. package/templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html +50 -49
  435. package/templates/vn-travel-expense-policy/ds-base.js +33 -1
  436. package/templates/vn-travel-expense-policy/support.js +13 -20
  437. package/tokens/colors.css +19 -1
  438. package/tokens/component-tokens.css +1 -0
  439. package/tokens/element-seeds.json +2 -2
  440. package/tokens/elements.css +228 -21
  441. package/tokens/elevation.css +8 -2
  442. package/tokens/native/CSTokens.kt +37 -2
  443. package/tokens/native/CSTokens.swift +37 -2
  444. package/tokens/native/cs_tokens.dart +37 -2
  445. package/tokens/provenance.json +12 -12
  446. package/tokens/spacing.css +4 -1
  447. package/tokens/tokens.dtcg.json +129 -16
  448. package/tokens/tokens.js +59 -18
  449. package/tokens/tokens.json +58 -17
  450. package/tokens/typography.css +2 -0
  451. package/ui_kits/deck/index.html +4 -0
  452. package/ui_kits/status-hub/StatusHub.jsx +30 -4
  453. package/ui_kits/status-hub/index.html +3 -3
  454. package/ui_kits/status-hub/login.html +55 -9
  455. package/ui_kits/status-hub/project.html +4 -0
  456. package/ui_kits/status-hub/settings.html +35 -13
  457. package/ui_kits/status-hub/status.css +5 -1
  458. package/ui_kits/website/Website.jsx +25 -3
  459. package/ui_kits/website/careers.html +5 -1
  460. package/ui_kits/website/chat.html +5 -3
  461. package/ui_kits/website/index.html +3 -3
  462. package/ui_kits/website/site.css +3 -3
  463. package/ui_kits/website/work.html +5 -1
  464. package/assets/aurora-hoa.png +0 -0
  465. package/assets/aurora-kim.png +0 -0
  466. package/assets/aurora-moc.png +0 -0
  467. package/assets/aurora-thuy.png +0 -0
  468. package/docs/status/assets/favicon.svg +0 -5
  469. package/docs/status/assets/status-legacy.css +0 -399
  470. package/docs/status/assets/status-legacy.js +0 -505
  471. package/docs/status/assets/status.css +0 -644
  472. package/docs/status/assets/status.js +0 -1308
  473. package/docs/status/data/status-feed.json +0 -1
  474. package/docs/status/data/task/TASK-REL-001.js +0 -1
  475. package/docs/status/data/task/TASK-REL-002.js +0 -1
  476. package/docs/status/index.html +0 -42
  477. package/docs/status/roadmap.html +0 -4
  478. package/docs/status/status-legacy.html +0 -117
  479. package/docs/tasks/BACKLOG.md +0 -26
  480. package/docs/tasks/release/TASK-REL-001-launch-1-1-0/spec.md +0 -55
  481. package/docs/tasks/release/TASK-REL-002-republish-1-1-1/spec.md +0 -54
package/base/ai.css CHANGED
@@ -4,7 +4,12 @@
4
4
 
5
5
  /* PromptInput */
6
6
  .cs-prompt { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); padding: 10px 12px; display: grid; gap: 8px; }
7
- .cs-prompt:focus-within { border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 32%, transparent); }
7
+ .cs-prompt:focus-within {
8
+ border-color: var(--cs-color-text-primary);
9
+ outline: 2px solid var(--cs-color-text-primary);
10
+ outline-offset: 2px;
11
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
12
+ }
8
13
  .cs-prompt__field { border: 0; background: transparent; resize: none; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); min-height: 44px; outline: 0; inline-size: 100%; line-height: var(--cs-font-lineHeight-body); }
9
14
  .cs-prompt__field::placeholder { color: var(--cs-color-text-muted); }
10
15
  .cs-prompt__bar { display: flex; align-items: center; gap: 10px; }
@@ -17,14 +22,14 @@
17
22
  .cs-chat-msg--user { flex-direction: row-reverse; }
18
23
  .cs-chat-msg__avatar { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
19
24
  .cs-chat-msg--lumi .cs-chat-msg__avatar { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
20
- .cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; font-weight: 700; font-size: 13px; font-family: var(--cs-font-family-ui); }
25
+ .cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
21
26
  .cs-chat-msg__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
22
27
  .cs-chat-msg__col { display: grid; gap: 3px; max-inline-size: 80%; }
23
28
  .cs-chat-msg--user .cs-chat-msg__col { justify-items: end; }
24
29
  .cs-chat-msg__name { font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-color-text-muted); }
25
30
  .cs-chat-msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
26
31
  .cs-chat-msg--lumi .cs-chat-msg__bubble { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-end-start-radius: 4px; color: var(--cs-color-text-primary); }
27
- .cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; border-end-end-radius: 4px; }
32
+ .cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-end-end-radius: 4px; }
28
33
 
29
34
  /* ConfidenceMeter */
30
35
  .cs-confidence { display: grid; gap: 6px; font-family: var(--cs-font-family-ui); }
@@ -54,7 +59,7 @@
54
59
  .cs-citations__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
55
60
  .cs-citation { display: flex; align-items: flex-start; gap: 9px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); text-decoration: none; }
56
61
  a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
57
- .cs-citation__num { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; background: color-mix(in oklab, var(--cs-color-semantic-info) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-info); font-family: var(--cs-font-family-mono); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
62
+ .cs-citation__num { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; background: color-mix(in oklab, var(--cs-color-semantic-info) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-info); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-2xs); font-weight: 700; display: grid; place-items: center; }
58
63
  .cs-citation__text { line-height: 1.4; }
59
64
  .cs-citation__src { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
60
65
 
package/base/collections.css CHANGED
@@ -22,7 +22,7 @@
22
22
  .cs-item--interactive { cursor: pointer; font: inherit; inline-size: 100%; }
23
23
  button.cs-item--interactive { border: 1px solid transparent; background: var(--cs-color-surface-panel); }
24
24
  .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
25
- .cs-item--interactive:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
25
+ .cs-item--interactive:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
26
26
  .cs-item.is-selected { border-color: var(--cs-color-brand-ochre); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
27
27
  .cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
28
28
  .cs-item__leading { flex: none; display: grid; place-items: center; color: var(--cs-color-text-accent); }
@@ -40,7 +40,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
40
40
  .cs-timeline { display: grid; }
41
41
  .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: 20px; position: relative; }
42
42
  .cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }
43
- .cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: #fff; font-size: 12px; font-weight: 700; z-index: 1; }
43
+ .cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }
44
44
  .cs-timeline__item--now .cs-timeline__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
45
45
  .cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }
46
46
  .cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
@@ -67,12 +67,18 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
67
67
  .cs-collapsible__panel > :first-child { margin-block-start: 0; }
68
68
  .cs-collapsible__panel > :last-child { margin-block-end: 0; }
69
69
 
70
- /* CodeBlock */
71
- .cs-code { position: relative; background: #2b1e14; color: #f5ead9; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid #4a3a2c; }
72
- .cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid #4a3a2c; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: #c9b7a3; }
73
- .cs-code__copy { border: 0; background: transparent; color: #c9b7a3; cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }
70
+ /* CodeBlock — always-dark chrome (FIND-010: hex only in local custom props) */
71
+ .cs-code {
72
+ --cs-code-bg: #2b1e14;
73
+ --cs-code-fg: #f5ead9;
74
+ --cs-code-border: #4a3a2c;
75
+ --cs-code-muted: #c9b7a3;
76
+ position: relative; background: var(--cs-code-bg); color: var(--cs-code-fg); border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-code-border);
77
+ }
78
+ .cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid var(--cs-code-border); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: var(--cs-code-muted); }
79
+ .cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }
74
80
  .cs-code__copy:hover { color: var(--cs-color-brand-ochre); }
75
- .cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: 13px; line-height: 1.6; }
81
+ .cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }
76
82
  .cs-code code { font-family: inherit; }
77
83
 
78
84
  /* EmptyState */
@@ -82,3 +88,8 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
82
88
  .cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }
83
89
  .cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }
84
90
  .cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }
91
+
92
+ /* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
93
+ @media (prefers-color-scheme: dark) {
94
+ [data-theme="system"] .cs-empty__icon { color: var(--cs-color-brand-ochre); }
95
+ }
package/base/components.css CHANGED
@@ -31,7 +31,7 @@
31
31
  .cs-button:focus-visible,
32
32
  .cs-field__control:focus-visible,
33
33
  .cs-ai-disclosure__badge:focus-visible {
34
- outline: 3px solid var(--cs-color-accent-ochre, #f4ba17);
34
+ outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre, #f4ba17);
35
35
  outline-offset: 2px;
36
36
  }
37
37
 
@@ -130,7 +130,7 @@
130
130
  .cs-field__error { color: var(--cs-color-semantic-danger, #b42318); font-size: 0.875rem; }
131
131
 
132
132
  /* ---- Dialog ---- */
133
- .cs-dialog-layer { inset: 0; position: fixed; z-index: 1000; }
133
+ .cs-dialog-layer { inset: 0; position: fixed; z-index: var(--cs-depth-modal); }
134
134
  .cs-dialog__overlay { background: rgba(31, 19, 11, 0.42); inset: 0; position: absolute; }
135
135
  .cs-dialog {
136
136
  background: var(--cs-color-surface-panel, #ffffff);
@@ -139,6 +139,8 @@
139
139
  color: var(--cs-color-text-primary, #45210e);
140
140
  left: 50%;
141
141
  max-inline-size: min(42rem, calc(100vw - 2rem));
142
+ max-block-size: min(80vh, calc(100vh - 4rem));
143
+ overflow: auto;
142
144
  padding: var(--cs-space-6, 24px);
143
145
  position: absolute;
144
146
  top: 12vh;
@@ -163,6 +165,7 @@
163
165
 
164
166
  /* ---- DataTable ---- */
165
167
  .cs-table-wrap { overflow: auto; }
168
+ .cs-table-wrap--status { padding: var(--cs-space-4, 16px) 0; }
166
169
  .cs-table { border-collapse: collapse; color: var(--cs-color-text-primary, #45210e); inline-size: 100%; }
167
170
  .cs-table th, .cs-table td {
168
171
  border-block-end: 1px solid rgba(69, 33, 14, 0.18);
@@ -179,7 +182,7 @@
179
182
  .cs-ai-disclosure { display: inline-block; position: relative; }
180
183
  .cs-ai-disclosure__badge {
181
184
  background: var(--cs-color-semantic-info, #1d4ed8); border: 0; border-radius: 999px;
182
- color: #ffffff; font: inherit; font-size: 0.875rem; font-weight: 700;
185
+ color: var(--cs-color-semantic-info-fg, #ffffff); font: inherit; font-size: 0.875rem; font-weight: 700;
183
186
  padding: 0.25rem 0.625rem; cursor: pointer;
184
187
  }
185
188
  .cs-ai-disclosure__panel {
@@ -187,7 +190,7 @@
187
190
  border: 1px solid rgba(69, 33, 14, 0.18); border-radius: var(--cs-radius-md, 8px);
188
191
  box-shadow: var(--cs-shadow-md, 0 12px 30px rgba(31, 19, 11, 0.18));
189
192
  display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
190
- min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: 20;
193
+ min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);
191
194
  }
192
195
  .cs-ai-disclosure__sources { color: var(--cs-color-text-muted, #6e5a4c); font-size: 0.8125rem; }
193
196
 
@@ -213,3 +216,12 @@
213
216
  .cs-ai-disclosure, .cs-review-gate, .cs-logo {
214
217
  font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
215
218
  }
219
+
220
+ /* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
221
+ @media (prefers-color-scheme: dark) {
222
+ /* Dark theme: umber text/border on the low-emphasis buttons is invisible on dark surfaces —
223
+ remap so secondary reads as an ochre outline and tertiary/ghost use the light body colour. */
224
+ [data-theme="system"] .cs-button--secondary { color: var(--cs-color-brand-ochre); border-color: var(--cs-color-brand-ochre); }
225
+ [data-theme="system"] .cs-button--tertiary { color: var(--cs-color-text-primary); }
226
+ [data-theme="system"] .cs-button--ghost { color: var(--cs-color-text-primary); }
227
+ }
package/base/controls.css CHANGED
@@ -2,7 +2,12 @@
2
2
 
3
3
  /* SearchField */
4
4
  .cs-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-full); padding: 0 14px; min-height: 44px; background: var(--cs-color-surface-panel); }
5
- .cs-search:focus-within { border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 30%, transparent); }
5
+ .cs-search:focus-within {
6
+ border-color: var(--cs-color-text-primary);
7
+ outline: 2px solid var(--cs-color-text-primary);
8
+ outline-offset: 2px;
9
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
10
+ }
6
11
  .cs-search svg { color: var(--cs-color-text-muted); flex: none; }
7
12
  .cs-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: 0; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
8
13
  .cs-search input::placeholder { color: var(--cs-color-text-muted); }
@@ -11,8 +16,13 @@
11
16
 
12
17
  /* NumberField / stepper */
13
18
  .cs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
14
- .cs-stepper:focus-within { border-color: var(--cs-color-brand-ochre); }
15
- .cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: 18px; font-weight: 700; display: grid; place-items: center; }
19
+ .cs-stepper:focus-within {
20
+ border-color: var(--cs-color-text-primary);
21
+ outline: 2px solid var(--cs-color-text-primary);
22
+ outline-offset: 2px;
23
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
24
+ }
25
+ .cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }
16
26
  .cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }
17
27
  .cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
18
28
  .cs-stepper input { inline-size: 56px; text-align: center; border: 0; border-inline: 1px solid var(--cs-color-border-default); background: transparent; font: inherit; font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); outline: 0; min-height: 42px; -moz-appearance: textfield; }
@@ -21,7 +31,7 @@
21
31
  /* Slider (native range) */
22
32
  .cs-slider { inline-size: 100%; accent-color: var(--cs-color-brand-umber); block-size: 22px; cursor: pointer; }
23
33
  [data-theme="dark"] .cs-slider { accent-color: var(--cs-color-brand-ochre); }
24
- .cs-slider:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 4px; border-radius: var(--cs-radius-full); }
34
+ .cs-slider:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 4px; border-radius: var(--cs-radius-full); }
25
35
 
26
36
  /* FileUpload / dropzone */
27
37
  .cs-dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; border: 2px dashed var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 24px; background: var(--cs-color-surface-raised); cursor: pointer; color: var(--cs-color-text-primary); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), background var(--cs-duration-fast) var(--cs-ease-standard); }
@@ -60,10 +70,10 @@
60
70
  .cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }
61
71
  .cs-rating button.on { color: var(--cs-color-brand-ochre); }
62
72
  .cs-rating[data-readonly="true"] button { cursor: default; }
63
- .cs-rating button:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-radius: 4px; }
73
+ .cs-rating button:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-radius: 4px; }
64
74
  .cs-otp { display: inline-flex; gap: 8px; }
65
75
  .cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); }
66
- .cs-otp input:focus { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; border-color: var(--cs-accent); }
76
+ .cs-otp input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; border-color: var(--cs-accent); }
67
77
  .cs-otp input:disabled { opacity: .5; }
68
78
  .cs-btngroup { display: inline-flex; }
69
79
  .cs-btngroup .cs-button { border-radius: 0; }
@@ -74,30 +84,30 @@
74
84
  /* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */
75
85
  .cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
76
86
  .cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px 12px; min-block-size: 44px; }
77
- .cs-combobox input:focus { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
87
+ .cs-combobox input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
78
88
  .cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }
79
- .cs-combobox__list { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; list-style: none; }
80
- .cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: 14px; }
89
+ .cs-combobox__list { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; list-style: none; }
90
+ .cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: var(--cs-font-size-sm); }
81
91
  .cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
82
92
  [data-theme="dark"] .cs-combobox__opt[aria-selected="true"], [data-theme="dark"] .cs-combobox__opt.hl { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
83
- .cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: 13.5px; }
93
+ .cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
84
94
  .cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }
85
- .cs-igroup:focus-within { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
95
+ .cs-igroup:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
86
96
  .cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }
87
97
  .cs-igroup > input:focus { outline: none; }
88
- .cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: 13.5px; }
98
+ .cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: var(--cs-font-size-sm); }
89
99
  .cs-igroup__fix--suffix { border-inline-end: 0; border-inline-start: 1px solid var(--cs-color-border-default); }
90
100
  .cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }
91
101
  .cs-igroup__btn:hover { color: var(--cs-color-text-primary); }
92
102
  .cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px 8px; min-block-size: 44px; box-sizing: border-box; }
93
- .cs-taginput:focus-within { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
103
+ .cs-taginput:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
94
104
  .cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px 4px; }
95
105
  .cs-taginput > input:focus { outline: none; }
96
106
 
97
107
  /* ---- v3 Batch 3 (Jul 2026): Calendar · DatePicker · TimePicker ---- */
98
108
  .cs-cal { display: inline-block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 12px; min-inline-size: 272px; box-shadow: var(--cs-shadow-sm); }
99
109
  .cs-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 700 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
100
- .cs-cal__head button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: 16px; }
110
+ .cs-cal__head button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: var(--cs-font-size-base); }
101
111
  .cs-cal__head button:hover { background: var(--cs-color-surface-raised); }
102
112
  .cs-cal__wd, .cs-cal__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
103
113
  .cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }
@@ -105,30 +115,30 @@
105
115
  .cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
106
116
  .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }
107
117
  .cs-cal__grid button.sel { background: var(--cs-accent); color: var(--cs-accent-on); font-weight: 700; }
108
- .cs-cal__grid button:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
118
+ .cs-cal__grid button:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
109
119
  .cs-datepicker { position: relative; display: inline-block; }
110
120
  .cs-datepicker__field { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
111
- .cs-datepicker__field:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
121
+ .cs-datepicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
112
122
  .cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
113
- .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
123
+ .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
114
124
  .cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
115
- .cs-timepicker:focus-within { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
125
+ .cs-timepicker:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
116
126
  .cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }
117
127
  .cs-timepicker select:focus { outline: none; }
118
128
 
119
129
  /* ---- v3 Batch 4 (Jul 2026): HoverCard · Popconfirm · ContextMenu · FAB · Result · InlineEdit ---- */
120
130
  .cs-hovercard { position: relative; display: inline-block; }
121
- .cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: 13.5px; line-height: 1.5; color: var(--cs-color-text-primary); }
131
+ .cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }
122
132
  .cs-popconfirm { position: relative; display: inline-block; }
123
- .cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
133
+ .cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
124
134
  .cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }
125
135
  .cs-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end; }
126
136
  .cs-ctxmenu-zone { position: relative; }
127
- .cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 60); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
137
+ .cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
128
138
  .cs-fab--static { position: static; align-items: flex-start; }
129
139
  .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
130
140
  .cs-fab__main:hover { filter: brightness(1.05); }
131
- .cs-fab__main:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
141
+ .cs-fab__main:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
132
142
  .cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }
133
143
  .cs-fab--static .cs-fab__dial { flex-direction: row; }
134
144
  .cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }
@@ -138,14 +148,14 @@
138
148
  .cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger); }
139
149
  .cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning); }
140
150
  .cs-result__title { margin: 0; font: 800 22px/1.3 var(--cs-heading-family, var(--cs-font-family-ui)); letter-spacing: var(--cs-heading-tracking, -0.01em); color: var(--cs-color-text-primary); }
141
- .cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: 14.5px; line-height: 1.55; }
151
+ .cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: 1.55; }
142
152
  .cs-result__actions { display: flex; gap: 10px; margin-top: 6px; }
143
153
  .cs-inline-edit__view { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed transparent; background: none; font: inherit; color: var(--cs-color-text-primary); padding: 4px 8px; border-radius: var(--cs-radius-sm); cursor: pointer; }
144
154
  .cs-inline-edit__view:hover { border-color: var(--cs-color-border-default); background: var(--cs-color-surface-raised); }
145
155
  .cs-inline-edit__view svg { color: var(--cs-color-text-muted); }
146
156
  .cs-inline-edit__view .ph { color: var(--cs-color-text-muted); }
147
157
  .cs-inline-edit input { font: inherit; color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-accent); border-radius: var(--cs-radius-sm); padding: 4px 8px; }
148
- .cs-inline-edit input:focus { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
158
+ .cs-inline-edit input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
149
159
 
150
160
  /* ---- v3 Batch 5 part 1 (Jul 2026): Link · Anchor · Image · Toolbar ---- */
151
161
  .cs-link { color: var(--cs-color-link); text-underline-offset: .15em; }
@@ -155,7 +165,7 @@
155
165
  .cs-link--standalone:hover { text-decoration: underline; }
156
166
  .cs-anchor { display: grid; gap: 2px; min-inline-size: 180px; border-inline-start: 2px solid var(--cs-color-border-default); }
157
167
  .cs-anchor__title { font: 700 10.5px/1.4 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-text-muted); padding: 2px 12px 6px; }
158
- .cs-anchor__item { display: block; padding: 5px 12px; font-size: 13.5px; color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
168
+ .cs-anchor__item { display: block; padding: 5px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
159
169
  .cs-anchor__item:hover { color: var(--cs-color-text-primary); }
160
170
  .cs-anchor__item.is-active { color: var(--cs-accent-strong); border-inline-start-color: var(--cs-accent); font-weight: 600; }
161
171
  [data-theme="dark"] .cs-anchor__item.is-active { color: var(--cs-accent-bright); }
@@ -165,13 +175,13 @@
165
175
  @keyframes cs-img-shimmer { from { opacity: .55; } to { opacity: .9; } }
166
176
  .cs-image.is-zoomable { cursor: zoom-in; }
167
177
  .cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }
168
- .cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 90); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }
178
+ .cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }
169
179
  .cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }
170
- .cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; cursor: pointer; }
180
+ .cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; /* on-dark-chrome ink */ font-size: var(--cs-font-size-base); cursor: pointer; }
171
181
  .cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }
172
182
  .cs-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--cs-color-text-primary); font: 600 13px var(--cs-font-family-ui); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; min-block-size: 32px; }
173
183
  .cs-toolbar__btn:hover { background: var(--cs-color-surface-raised); }
174
- .cs-toolbar__btn:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
184
+ .cs-toolbar__btn:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
175
185
  .cs-toolbar__sep { inline-size: 1px; block-size: 20px; background: var(--cs-color-border-default); margin: 0 4px; }
176
186
  .cs-toolbar__more { position: relative; }
177
187
  .cs-toolbar__more .cs-menu__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); }
@@ -186,43 +196,50 @@
186
196
  .cs-navmenu__wrap { position: relative; }
187
197
  .cs-navmenu__top { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; text-decoration: none; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 9px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }
188
198
  .cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }
189
- .cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline-start: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); gap: 6px; 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-md); padding: 10px; }
199
+ .cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); gap: 6px; 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-md); padding: 10px; }
190
200
  .cs-navmenu__card { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
191
201
  .cs-navmenu__card:hover { background: var(--cs-accent-tint); }
192
- .cs-navmenu__card b { font-size: 14px; }
193
- .cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: 12.5px; line-height: 1.45; }
202
+ .cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
203
+ .cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }
194
204
  .cs-carousel { display: grid; gap: 10px; }
195
205
  .cs-carousel__view { position: relative; overflow: hidden; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
196
206
  .cs-carousel__track { display: flex; transition: transform var(--cs-duration-base, 240ms) cubic-bezier(0.2, 0, 0, 1); }
197
207
  .cs-carousel__slide { flex: 0 0 100%; min-inline-size: 100%; }
198
- .cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: 18px; box-shadow: var(--cs-shadow-sm); }
208
+ .cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: var(--cs-font-size-md); box-shadow: var(--cs-shadow-sm); }
199
209
  .cs-carousel__nav.prev { inset-inline-start: 10px; }
200
210
  .cs-carousel__nav.next { inset-inline-end: 10px; }
201
211
  .cs-carousel__dots { display: flex; gap: 6px; justify-content: center; }
202
- .cs-carousel__dots button { inline-size: 9px; block-size: 9px; border-radius: 999px; border: 0; background: var(--cs-color-border-default); cursor: pointer; padding: 0; }
212
+ .cs-carousel__dots button { inline-size: 9px; block-size: 9px; border-radius: 999px; border: 0; background: var(--cs-color-border-default); cursor: pointer; padding: 0; position: relative; }
213
+ .cs-carousel__dots button::before { content: ""; position: absolute; inset: -7.5px; /* expand hit area to ≥24×24 (WCAG 2.5.8) */ }
203
214
  .cs-carousel__dots button[aria-current="true"] { background: var(--cs-accent); }
204
215
  @media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }
205
216
  .cs-comment { display: flex; gap: 10px; }
206
217
  .cs-comment__main { flex: 1; min-inline-size: 0; }
207
- .cs-comment__head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--cs-color-text-primary); }
208
- .cs-comment__meta { color: var(--cs-color-text-muted); font-size: 12px; }
209
- .cs-comment__body { font-size: 14px; line-height: 1.55; color: var(--cs-color-text-primary); margin: 3px 0 6px; }
218
+ .cs-comment__head { display: flex; align-items: baseline; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
219
+ .cs-comment__meta { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
220
+ .cs-comment__body { font-size: var(--cs-font-size-sm); line-height: 1.55; color: var(--cs-color-text-primary); margin: 3px 0 6px; }
210
221
  .cs-comment__actions { display: flex; gap: 12px; }
211
222
  .cs-comment__actions button { border: 0; background: none; padding: 0; font: 600 12.5px var(--cs-font-family-ui); color: var(--cs-color-text-accent); cursor: pointer; }
212
223
  .cs-comment__replies { margin-top: 12px; padding-inline-start: 14px; border-inline-start: 2px solid var(--cs-color-border-default); display: grid; gap: 12px; }
213
224
 
214
225
  /* ---- v3 Batch 6a (Jul 2026): Form · Tree · BackTop · Watermark ---- */
215
226
  .cs-form { display: grid; gap: 16px; }
216
- .cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: 12px 14px; font-size: 13.5px; }
227
+ /* FIND-015 — visible pending + interaction lock while asyncRules / submit run. */
228
+ .cs-form.is-pending { opacity: 0.72; }
229
+ .cs-form.is-pending :is(button, input, select, textarea, [role="button"]) {
230
+ pointer-events: none;
231
+ cursor: wait;
232
+ }
233
+ .cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: 12px 14px; font-size: var(--cs-font-size-sm); }
217
234
  .cs-form__summary b { color: var(--cs-color-semantic-danger); }
218
235
  .cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }
219
236
  .cs-formfield { display: grid; gap: 6px; }
220
237
  .cs-formfield__label { font: 600 13px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
221
238
  .cs-formfield__label em { color: var(--cs-color-semantic-danger); font-style: normal; }
222
- .cs-formfield__hint { font-size: 12.5px; color: var(--cs-color-text-muted); }
223
- .cs-formfield__error { font-size: 12.5px; color: var(--cs-color-semantic-danger); font-weight: 600; }
239
+ .cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
240
+ .cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger); font-weight: 600; }
224
241
  .cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }
225
- .cs-tree { list-style: none; margin: 0; padding: 0; font-size: 14px; }
242
+ .cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }
226
243
  .cs-tree ul { list-style: none; margin: 0; padding: 0; }
227
244
  .cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }
228
245
  .cs-tree__row:hover { background: var(--cs-color-surface-raised); }
@@ -231,15 +248,15 @@
231
248
  [data-theme="dark"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
232
249
  .cs-tree__twist { inline-size: 20px; block-size: 28px; border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
233
250
  .cs-tree__label { border: 0; background: none; color: var(--cs-color-text-primary); font: inherit; padding: 4px 6px; cursor: pointer; border-radius: var(--cs-radius-sm); }
234
- .cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 60); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }
251
+ .cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 80); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }
235
252
  .cs-backtop:hover { border-color: var(--cs-accent); }
236
253
 
237
254
  /* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
238
255
  .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
239
256
  .cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
240
- .cs-treeselect__field:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
257
+ .cs-treeselect__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
241
258
  .cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
242
- .cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
259
+ .cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
243
260
  .cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }
244
261
  .cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }
245
262
  .cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }
@@ -251,32 +268,33 @@
251
268
  .cs-transfer__list { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); min-inline-size: 180px; }
252
269
  .cs-transfer__title { font: 700 12px var(--cs-font-family-ui); padding: 9px 12px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
253
270
  .cs-transfer__list ul { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; max-block-size: 200px; overflow: auto; }
254
- .cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cs-color-text-primary); cursor: pointer; }
271
+ .cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }
255
272
  .cs-transfer__ops { display: grid; gap: 6px; align-content: center; }
256
273
  .cs-mentions { position: relative; display: block; max-inline-size: 420px; }
257
- .cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }
274
+ .cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }
258
275
  .cs-mentions__pop button { border: 0; background: none; text-align: start; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
259
- .cs-mentions__pop button:hover { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
276
+ .cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
277
+ [data-theme="dark"] .cs-mentions__pop button:hover, [data-theme="dark"] .cs-mentions__pop button.hl, [data-theme="dark"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
260
278
 
261
279
  /* ---- v3 Batch 6c (Jul 2026): ColorPicker · Tour · QRCode ---- */
262
280
  .cs-colorpicker { position: relative; display: inline-block; }
263
281
  .cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
264
282
  .cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }
265
- .cs-colorpicker__field:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
266
- .cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }
283
+ .cs-colorpicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
284
+ .cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }
267
285
  .cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }
268
286
  .cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }
269
- .cs-colorpicker__grid button.on { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
287
+ .cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
270
288
  .cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }
271
- .cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 90); background: rgba(26, 17, 8, .45); }
272
- .cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: 3px solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
273
- .cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 2); inline-size: 280px; 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-xl); padding: 14px 16px; }
274
- .cs-tour__pop b { font-size: 14.5px; color: var(--cs-color-text-primary); }
275
- .cs-tour__pop p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--cs-color-text-muted); }
289
+ .cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }
290
+ .cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
291
+ .cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; 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-xl); padding: 14px 16px; }
292
+ .cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
293
+ .cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }
276
294
  .cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
277
295
  .cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }
278
296
  .cs-tour__btns { display: flex; gap: 6px; }
279
- .cs-qrcode { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
297
+ .cs-qrcode { display: inline-block; padding: 10px; background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
280
298
 
281
299
  /* ---- v3 Batch 7a (Jul 2026): Masonry · Splitter · HotKeys · Dock ---- */
282
300
  .cs-masonry__item { break-inside: avoid; }
@@ -284,12 +302,12 @@
284
302
  .cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }
285
303
  .cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }
286
304
  .cs-splitter__bar:hover { background: var(--cs-accent-tint); }
287
- .cs-splitter__bar:focus-visible { background: var(--cs-accent-tint); outline: 2px solid var(--cs-color-accent-ochre); outline-offset: -2px; }
288
- .cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 90); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }
305
+ .cs-splitter__bar:focus-visible { background: var(--cs-accent-tint); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -2px; }
306
+ .cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }
289
307
  .cs-hotkeys__card { 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-xl); padding: 18px 20px; min-inline-size: 300px; }
290
- .cs-hotkeys__card b { font-size: 15px; color: var(--cs-color-text-primary); }
308
+ .cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
291
309
  .cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
292
- .cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: 13.5px; color: var(--cs-color-text-primary); }
310
+ .cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
293
311
  .cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }
294
312
  .cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }
295
313
  .cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-accent); }
@@ -305,25 +323,57 @@
305
323
  [data-theme="dark"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
306
324
  .cs-treetable .cs-treetable__cell { display: inline-flex; align-items: center; gap: 2px; }
307
325
  .cs-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-inline-size: 380px; }
308
- .cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: 14px; color: var(--cs-color-text-primary); cursor: grab; }
326
+ .cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: grab; }
309
327
  .cs-sortable__item.is-dragging { opacity: .5; }
310
328
  .cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }
311
329
  .cs-sortable__grip { color: var(--cs-color-text-muted); }
330
+ .cs-sortable__label { flex: 1; min-inline-size: 0; }
331
+ .cs-sortable__ops { display: inline-flex; gap: 4px; margin-inline-start: auto; }
332
+ .cs-sortable__ops .cs-button { cursor: pointer; }
333
+ .cs-sortable__ops .cs-button:disabled { opacity: .4; cursor: not-allowed; }
312
334
 
313
335
  /* ---- v3 Batch 7c (Jul 2026): Chart · Editor · Terminal ---- */
314
336
  .cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }
315
- .cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--cs-color-text-muted); }
337
+ .cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
316
338
  .cs-chart__legend b { color: var(--cs-color-text-primary); }
317
339
  .cs-editor { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); max-inline-size: 460px; }
318
340
  .cs-editor__bar { display: flex; gap: 2px; padding: 6px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
319
341
  .cs-editor__area { padding: 12px 14px; font: 400 14px/1.6 var(--cs-font-family-ui); color: var(--cs-color-text-primary); outline: none; }
320
342
  .cs-editor__area:focus-visible { box-shadow: inset 0 0 0 2px var(--cs-color-accent-ochre); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); }
321
- .cs-terminal { max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid #3a2a1c; box-shadow: var(--cs-shadow-md); }
322
- .cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: #2a1a0d; color: #c9b7a3; font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
323
- .cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: #5b4331; }
343
+ /* Terminal — always-dark chrome (FIND-010: hex only in local custom props) */
344
+ .cs-terminal {
345
+ --cs-term-border: #3a2a1c;
346
+ --cs-term-bar: #2a1a0d;
347
+ --cs-term-dot: #5b4331;
348
+ --cs-term-bg: #1a1108;
349
+ --cs-term-fg: #f5ead9;
350
+ --cs-term-muted: #c9b7a3;
351
+ max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-term-border); box-shadow: var(--cs-shadow-md);
352
+ }
353
+ .cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: var(--cs-term-bar); color: var(--cs-term-muted); font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
354
+ .cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: var(--cs-term-dot); }
324
355
  .cs-terminal__bar span { margin-inline-start: 8px; }
325
- .cs-terminal__body { background: #1a1108; color: #f5ead9; font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
356
+ .cs-terminal__body { background: var(--cs-term-bg); color: var(--cs-term-fg); font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
326
357
  .cs-terminal__line { display: flex; gap: 8px; align-items: center; }
327
358
  .cs-terminal__line .p { color: var(--cs-color-brand-ochre); }
328
359
  .cs-terminal__line input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
329
- .cs-terminal__out { color: #c9b7a3; white-space: pre-wrap; }
360
+ /* Wrapper ring — input clears outline for chrome; focus-within restores ≥3:1 indicator (FIND-038). */
361
+ .cs-terminal:focus-within {
362
+ outline: 2px solid var(--cs-color-accent-ochre);
363
+ outline-offset: 2px;
364
+ box-shadow: 0 0 0 5px var(--cs-color-brand-umber);
365
+ }
366
+ .cs-terminal__out { color: var(--cs-term-muted); white-space: pre-wrap; }
367
+
368
+ /* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
369
+ @media (prefers-color-scheme: dark) {
370
+ [data-theme="system"] .cs-segmented button[aria-pressed="true"], [data-theme="system"] .cs-segmented button[aria-selected="true"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
371
+ [data-theme="system"] .cs-combobox__opt[aria-selected="true"], [data-theme="system"] .cs-combobox__opt.hl { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
372
+ [data-theme="system"] .cs-slider { accent-color: var(--cs-color-brand-ochre); }
373
+ [data-theme="system"] .cs-toggle[aria-pressed="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
374
+ [data-theme="system"] .cs-anchor__item.is-active { color: var(--cs-accent-bright); }
375
+ [data-theme="system"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
376
+ [data-theme="system"] .cs-cascader__opt.on { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
377
+ [data-theme="system"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
378
+ [data-theme="system"] .cs-mentions__pop button:hover, [data-theme="system"] .cs-mentions__pop button.hl, [data-theme="system"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
379
+ }
package/base/data.css CHANGED
@@ -27,9 +27,9 @@
27
27
  /* Avatar */
28
28
  .cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-color-brand-umber); color: var(--cs-color-brand-ochre); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }
29
29
  .cs-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
30
- .cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: 12px; }
31
- .cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: 15px; }
32
- .cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: 20px; }
30
+ .cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--cs-font-size-xs); }
31
+ .cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--cs-font-size-sm); }
32
+ .cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--cs-font-size-lg); }
33
33
  .cs-avatar--square { border-radius: var(--cs-radius-md); }
34
34
  .cs-avatar-group { display: inline-flex; }
35
35
  .cs-avatar-group > .cs-avatar { box-shadow: 0 0 0 2px var(--cs-color-surface-panel); }
@@ -37,7 +37,7 @@
37
37
 
38
38
  /* Tooltip */
39
39
  .cs-tooltip { position: relative; display: inline-flex; }
40
- .cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-toast); }
40
+ .cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
41
41
  .cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }
42
42
  .cs-tooltip:hover .cs-tooltip__bubble, .cs-tooltip:focus-within .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
43
43