@cyberskill/design 2.3.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (316) hide show
  1. package/DESIGN.md +7 -7
  2. package/README.md +3 -3
  3. package/VERSION +1 -1
  4. package/_ds_bundle.js +2 -2
  5. package/_ds_bundle.js.map +1 -1
  6. package/_ds_manifest.json +15 -7
  7. package/_esm/cs.mjs +2 -2
  8. package/base/a11y.css +1 -1
  9. package/base/ai.css +3 -2
  10. package/base/collections.css +2 -2
  11. package/base/components.css +3 -3
  12. package/base/controls.css +19 -10
  13. package/base/data.css +2 -1
  14. package/base/feedback.css +5 -5
  15. package/base/glass.css +2 -2
  16. package/base/shell.css +2 -2
  17. package/base/typography.css +1 -0
  18. package/components/prompt-api.json +1 -1
  19. package/components/release-compatibility.json +1 -1
  20. package/components/specifications.json +1 -1
  21. package/components/static-html-reference.json +19 -19
  22. package/dist/esm/build.json +1 -1
  23. package/dist/styles.min.css +1 -1
  24. package/docs/consuming.md +1 -1
  25. package/docs/contrast-report.md +1 -1
  26. package/docs/conventions.md +1 -1
  27. package/docs/reference-catalog.json +19 -19
  28. package/docs/release-notes.md +1 -1
  29. package/docs/static-html-reference.md +18 -18
  30. package/docs/template-inventory.json +4 -4
  31. package/docs/vi/consuming.md +1 -1
  32. package/docs/vi/contrast-report.md +1 -1
  33. package/docs/vi/conventions.md +1 -1
  34. package/docs/vi/entrypoints/DESIGN.md +7 -7
  35. package/docs/vi/entrypoints/README.md +3 -3
  36. package/docs/vi/release-notes.md +1 -1
  37. package/docs/vi/static-html-reference.md +18 -18
  38. package/guidelines/documents.html +1 -1
  39. package/package.json +2 -1
  40. package/styles/components/manifest.json +132 -132
  41. package/styles.layered.css +17 -18
  42. package/styles.layered.provenance.json +11 -11
  43. package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +3 -3
  44. package/templates/vn-termination-decision/VnTerminationDecision.dc.html +3 -3
  45. package/tokens/declarations.json +29 -29
  46. package/tokens/element-seeds.json +1 -1
  47. package/tokens/modes/dark__default__comfortable__high.dtcg.json +1 -1
  48. package/tokens/modes/dark__default__comfortable__standard.dtcg.json +1 -1
  49. package/tokens/modes/dark__default__compact__high.dtcg.json +1 -1
  50. package/tokens/modes/dark__default__compact__standard.dtcg.json +1 -1
  51. package/tokens/modes/dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  52. package/tokens/modes/dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  53. package/tokens/modes/dark__hoa-lava__compact__high.dtcg.json +1 -1
  54. package/tokens/modes/dark__hoa-lava__compact__standard.dtcg.json +1 -1
  55. package/tokens/modes/dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  56. package/tokens/modes/dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  57. package/tokens/modes/dark__hoa-plasma__compact__high.dtcg.json +1 -1
  58. package/tokens/modes/dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  59. package/tokens/modes/dark__hoa__comfortable__high.dtcg.json +1 -1
  60. package/tokens/modes/dark__hoa__comfortable__standard.dtcg.json +1 -1
  61. package/tokens/modes/dark__hoa__compact__high.dtcg.json +1 -1
  62. package/tokens/modes/dark__hoa__compact__standard.dtcg.json +1 -1
  63. package/tokens/modes/dark__kim-steel__comfortable__high.dtcg.json +1 -1
  64. package/tokens/modes/dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  65. package/tokens/modes/dark__kim-steel__compact__high.dtcg.json +1 -1
  66. package/tokens/modes/dark__kim-steel__compact__standard.dtcg.json +1 -1
  67. package/tokens/modes/dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  68. package/tokens/modes/dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  69. package/tokens/modes/dark__kim-titanium__compact__high.dtcg.json +1 -1
  70. package/tokens/modes/dark__kim-titanium__compact__standard.dtcg.json +1 -1
  71. package/tokens/modes/dark__kim__comfortable__high.dtcg.json +1 -1
  72. package/tokens/modes/dark__kim__comfortable__standard.dtcg.json +1 -1
  73. package/tokens/modes/dark__kim__compact__high.dtcg.json +1 -1
  74. package/tokens/modes/dark__kim__compact__standard.dtcg.json +1 -1
  75. package/tokens/modes/dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  76. package/tokens/modes/dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  77. package/tokens/modes/dark__moc-bamboo__compact__high.dtcg.json +1 -1
  78. package/tokens/modes/dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  79. package/tokens/modes/dark__moc-forest__comfortable__high.dtcg.json +1 -1
  80. package/tokens/modes/dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  81. package/tokens/modes/dark__moc-forest__compact__high.dtcg.json +1 -1
  82. package/tokens/modes/dark__moc-forest__compact__standard.dtcg.json +1 -1
  83. package/tokens/modes/dark__moc__comfortable__high.dtcg.json +1 -1
  84. package/tokens/modes/dark__moc__comfortable__standard.dtcg.json +1 -1
  85. package/tokens/modes/dark__moc__compact__high.dtcg.json +1 -1
  86. package/tokens/modes/dark__moc__compact__standard.dtcg.json +1 -1
  87. package/tokens/modes/dark__tho-clay__comfortable__high.dtcg.json +1 -1
  88. package/tokens/modes/dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  89. package/tokens/modes/dark__tho-clay__compact__high.dtcg.json +1 -1
  90. package/tokens/modes/dark__tho-clay__compact__standard.dtcg.json +1 -1
  91. package/tokens/modes/dark__tho-sand__comfortable__high.dtcg.json +1 -1
  92. package/tokens/modes/dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  93. package/tokens/modes/dark__tho-sand__compact__high.dtcg.json +1 -1
  94. package/tokens/modes/dark__tho-sand__compact__standard.dtcg.json +1 -1
  95. package/tokens/modes/dark__tho__comfortable__high.dtcg.json +1 -1
  96. package/tokens/modes/dark__tho__comfortable__standard.dtcg.json +1 -1
  97. package/tokens/modes/dark__tho__compact__high.dtcg.json +1 -1
  98. package/tokens/modes/dark__tho__compact__standard.dtcg.json +1 -1
  99. package/tokens/modes/dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  100. package/tokens/modes/dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  101. package/tokens/modes/dark__thuy-mist__compact__high.dtcg.json +1 -1
  102. package/tokens/modes/dark__thuy-mist__compact__standard.dtcg.json +1 -1
  103. package/tokens/modes/dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  104. package/tokens/modes/dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  105. package/tokens/modes/dark__thuy-ocean__compact__high.dtcg.json +1 -1
  106. package/tokens/modes/dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  107. package/tokens/modes/dark__thuy__comfortable__high.dtcg.json +1 -1
  108. package/tokens/modes/dark__thuy__comfortable__standard.dtcg.json +1 -1
  109. package/tokens/modes/dark__thuy__compact__high.dtcg.json +1 -1
  110. package/tokens/modes/dark__thuy__compact__standard.dtcg.json +1 -1
  111. package/tokens/modes/index.json +268 -268
  112. package/tokens/modes/light__default__comfortable__high.dtcg.json +1 -1
  113. package/tokens/modes/light__default__comfortable__standard.dtcg.json +1 -1
  114. package/tokens/modes/light__default__compact__high.dtcg.json +1 -1
  115. package/tokens/modes/light__default__compact__standard.dtcg.json +1 -1
  116. package/tokens/modes/light__hoa-lava__comfortable__high.dtcg.json +1 -1
  117. package/tokens/modes/light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  118. package/tokens/modes/light__hoa-lava__compact__high.dtcg.json +1 -1
  119. package/tokens/modes/light__hoa-lava__compact__standard.dtcg.json +1 -1
  120. package/tokens/modes/light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  121. package/tokens/modes/light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  122. package/tokens/modes/light__hoa-plasma__compact__high.dtcg.json +1 -1
  123. package/tokens/modes/light__hoa-plasma__compact__standard.dtcg.json +1 -1
  124. package/tokens/modes/light__hoa__comfortable__high.dtcg.json +1 -1
  125. package/tokens/modes/light__hoa__comfortable__standard.dtcg.json +1 -1
  126. package/tokens/modes/light__hoa__compact__high.dtcg.json +1 -1
  127. package/tokens/modes/light__hoa__compact__standard.dtcg.json +1 -1
  128. package/tokens/modes/light__kim-steel__comfortable__high.dtcg.json +1 -1
  129. package/tokens/modes/light__kim-steel__comfortable__standard.dtcg.json +1 -1
  130. package/tokens/modes/light__kim-steel__compact__high.dtcg.json +1 -1
  131. package/tokens/modes/light__kim-steel__compact__standard.dtcg.json +1 -1
  132. package/tokens/modes/light__kim-titanium__comfortable__high.dtcg.json +1 -1
  133. package/tokens/modes/light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  134. package/tokens/modes/light__kim-titanium__compact__high.dtcg.json +1 -1
  135. package/tokens/modes/light__kim-titanium__compact__standard.dtcg.json +1 -1
  136. package/tokens/modes/light__kim__comfortable__high.dtcg.json +1 -1
  137. package/tokens/modes/light__kim__comfortable__standard.dtcg.json +1 -1
  138. package/tokens/modes/light__kim__compact__high.dtcg.json +1 -1
  139. package/tokens/modes/light__kim__compact__standard.dtcg.json +1 -1
  140. package/tokens/modes/light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  141. package/tokens/modes/light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  142. package/tokens/modes/light__moc-bamboo__compact__high.dtcg.json +1 -1
  143. package/tokens/modes/light__moc-bamboo__compact__standard.dtcg.json +1 -1
  144. package/tokens/modes/light__moc-forest__comfortable__high.dtcg.json +1 -1
  145. package/tokens/modes/light__moc-forest__comfortable__standard.dtcg.json +1 -1
  146. package/tokens/modes/light__moc-forest__compact__high.dtcg.json +1 -1
  147. package/tokens/modes/light__moc-forest__compact__standard.dtcg.json +1 -1
  148. package/tokens/modes/light__moc__comfortable__high.dtcg.json +1 -1
  149. package/tokens/modes/light__moc__comfortable__standard.dtcg.json +1 -1
  150. package/tokens/modes/light__moc__compact__high.dtcg.json +1 -1
  151. package/tokens/modes/light__moc__compact__standard.dtcg.json +1 -1
  152. package/tokens/modes/light__tho-clay__comfortable__high.dtcg.json +1 -1
  153. package/tokens/modes/light__tho-clay__comfortable__standard.dtcg.json +1 -1
  154. package/tokens/modes/light__tho-clay__compact__high.dtcg.json +1 -1
  155. package/tokens/modes/light__tho-clay__compact__standard.dtcg.json +1 -1
  156. package/tokens/modes/light__tho-sand__comfortable__high.dtcg.json +1 -1
  157. package/tokens/modes/light__tho-sand__comfortable__standard.dtcg.json +1 -1
  158. package/tokens/modes/light__tho-sand__compact__high.dtcg.json +1 -1
  159. package/tokens/modes/light__tho-sand__compact__standard.dtcg.json +1 -1
  160. package/tokens/modes/light__tho__comfortable__high.dtcg.json +1 -1
  161. package/tokens/modes/light__tho__comfortable__standard.dtcg.json +1 -1
  162. package/tokens/modes/light__tho__compact__high.dtcg.json +1 -1
  163. package/tokens/modes/light__tho__compact__standard.dtcg.json +1 -1
  164. package/tokens/modes/light__thuy-mist__comfortable__high.dtcg.json +1 -1
  165. package/tokens/modes/light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  166. package/tokens/modes/light__thuy-mist__compact__high.dtcg.json +1 -1
  167. package/tokens/modes/light__thuy-mist__compact__standard.dtcg.json +1 -1
  168. package/tokens/modes/light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  169. package/tokens/modes/light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  170. package/tokens/modes/light__thuy-ocean__compact__high.dtcg.json +1 -1
  171. package/tokens/modes/light__thuy-ocean__compact__standard.dtcg.json +1 -1
  172. package/tokens/modes/light__thuy__comfortable__high.dtcg.json +1 -1
  173. package/tokens/modes/light__thuy__comfortable__standard.dtcg.json +1 -1
  174. package/tokens/modes/light__thuy__compact__high.dtcg.json +1 -1
  175. package/tokens/modes/light__thuy__compact__standard.dtcg.json +1 -1
  176. package/tokens/modes/system-dark__default__comfortable__high.dtcg.json +1 -1
  177. package/tokens/modes/system-dark__default__comfortable__standard.dtcg.json +1 -1
  178. package/tokens/modes/system-dark__default__compact__high.dtcg.json +1 -1
  179. package/tokens/modes/system-dark__default__compact__standard.dtcg.json +1 -1
  180. package/tokens/modes/system-dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  181. package/tokens/modes/system-dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  182. package/tokens/modes/system-dark__hoa-lava__compact__high.dtcg.json +1 -1
  183. package/tokens/modes/system-dark__hoa-lava__compact__standard.dtcg.json +1 -1
  184. package/tokens/modes/system-dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  185. package/tokens/modes/system-dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  186. package/tokens/modes/system-dark__hoa-plasma__compact__high.dtcg.json +1 -1
  187. package/tokens/modes/system-dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  188. package/tokens/modes/system-dark__hoa__comfortable__high.dtcg.json +1 -1
  189. package/tokens/modes/system-dark__hoa__comfortable__standard.dtcg.json +1 -1
  190. package/tokens/modes/system-dark__hoa__compact__high.dtcg.json +1 -1
  191. package/tokens/modes/system-dark__hoa__compact__standard.dtcg.json +1 -1
  192. package/tokens/modes/system-dark__kim-steel__comfortable__high.dtcg.json +1 -1
  193. package/tokens/modes/system-dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  194. package/tokens/modes/system-dark__kim-steel__compact__high.dtcg.json +1 -1
  195. package/tokens/modes/system-dark__kim-steel__compact__standard.dtcg.json +1 -1
  196. package/tokens/modes/system-dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  197. package/tokens/modes/system-dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  198. package/tokens/modes/system-dark__kim-titanium__compact__high.dtcg.json +1 -1
  199. package/tokens/modes/system-dark__kim-titanium__compact__standard.dtcg.json +1 -1
  200. package/tokens/modes/system-dark__kim__comfortable__high.dtcg.json +1 -1
  201. package/tokens/modes/system-dark__kim__comfortable__standard.dtcg.json +1 -1
  202. package/tokens/modes/system-dark__kim__compact__high.dtcg.json +1 -1
  203. package/tokens/modes/system-dark__kim__compact__standard.dtcg.json +1 -1
  204. package/tokens/modes/system-dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  205. package/tokens/modes/system-dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  206. package/tokens/modes/system-dark__moc-bamboo__compact__high.dtcg.json +1 -1
  207. package/tokens/modes/system-dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  208. package/tokens/modes/system-dark__moc-forest__comfortable__high.dtcg.json +1 -1
  209. package/tokens/modes/system-dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  210. package/tokens/modes/system-dark__moc-forest__compact__high.dtcg.json +1 -1
  211. package/tokens/modes/system-dark__moc-forest__compact__standard.dtcg.json +1 -1
  212. package/tokens/modes/system-dark__moc__comfortable__high.dtcg.json +1 -1
  213. package/tokens/modes/system-dark__moc__comfortable__standard.dtcg.json +1 -1
  214. package/tokens/modes/system-dark__moc__compact__high.dtcg.json +1 -1
  215. package/tokens/modes/system-dark__moc__compact__standard.dtcg.json +1 -1
  216. package/tokens/modes/system-dark__tho-clay__comfortable__high.dtcg.json +1 -1
  217. package/tokens/modes/system-dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  218. package/tokens/modes/system-dark__tho-clay__compact__high.dtcg.json +1 -1
  219. package/tokens/modes/system-dark__tho-clay__compact__standard.dtcg.json +1 -1
  220. package/tokens/modes/system-dark__tho-sand__comfortable__high.dtcg.json +1 -1
  221. package/tokens/modes/system-dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  222. package/tokens/modes/system-dark__tho-sand__compact__high.dtcg.json +1 -1
  223. package/tokens/modes/system-dark__tho-sand__compact__standard.dtcg.json +1 -1
  224. package/tokens/modes/system-dark__tho__comfortable__high.dtcg.json +1 -1
  225. package/tokens/modes/system-dark__tho__comfortable__standard.dtcg.json +1 -1
  226. package/tokens/modes/system-dark__tho__compact__high.dtcg.json +1 -1
  227. package/tokens/modes/system-dark__tho__compact__standard.dtcg.json +1 -1
  228. package/tokens/modes/system-dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  229. package/tokens/modes/system-dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  230. package/tokens/modes/system-dark__thuy-mist__compact__high.dtcg.json +1 -1
  231. package/tokens/modes/system-dark__thuy-mist__compact__standard.dtcg.json +1 -1
  232. package/tokens/modes/system-dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  233. package/tokens/modes/system-dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  234. package/tokens/modes/system-dark__thuy-ocean__compact__high.dtcg.json +1 -1
  235. package/tokens/modes/system-dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  236. package/tokens/modes/system-dark__thuy__comfortable__high.dtcg.json +1 -1
  237. package/tokens/modes/system-dark__thuy__comfortable__standard.dtcg.json +1 -1
  238. package/tokens/modes/system-dark__thuy__compact__high.dtcg.json +1 -1
  239. package/tokens/modes/system-dark__thuy__compact__standard.dtcg.json +1 -1
  240. package/tokens/modes/system-light__default__comfortable__high.dtcg.json +1 -1
  241. package/tokens/modes/system-light__default__comfortable__standard.dtcg.json +1 -1
  242. package/tokens/modes/system-light__default__compact__high.dtcg.json +1 -1
  243. package/tokens/modes/system-light__default__compact__standard.dtcg.json +1 -1
  244. package/tokens/modes/system-light__hoa-lava__comfortable__high.dtcg.json +1 -1
  245. package/tokens/modes/system-light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  246. package/tokens/modes/system-light__hoa-lava__compact__high.dtcg.json +1 -1
  247. package/tokens/modes/system-light__hoa-lava__compact__standard.dtcg.json +1 -1
  248. package/tokens/modes/system-light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  249. package/tokens/modes/system-light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  250. package/tokens/modes/system-light__hoa-plasma__compact__high.dtcg.json +1 -1
  251. package/tokens/modes/system-light__hoa-plasma__compact__standard.dtcg.json +1 -1
  252. package/tokens/modes/system-light__hoa__comfortable__high.dtcg.json +1 -1
  253. package/tokens/modes/system-light__hoa__comfortable__standard.dtcg.json +1 -1
  254. package/tokens/modes/system-light__hoa__compact__high.dtcg.json +1 -1
  255. package/tokens/modes/system-light__hoa__compact__standard.dtcg.json +1 -1
  256. package/tokens/modes/system-light__kim-steel__comfortable__high.dtcg.json +1 -1
  257. package/tokens/modes/system-light__kim-steel__comfortable__standard.dtcg.json +1 -1
  258. package/tokens/modes/system-light__kim-steel__compact__high.dtcg.json +1 -1
  259. package/tokens/modes/system-light__kim-steel__compact__standard.dtcg.json +1 -1
  260. package/tokens/modes/system-light__kim-titanium__comfortable__high.dtcg.json +1 -1
  261. package/tokens/modes/system-light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  262. package/tokens/modes/system-light__kim-titanium__compact__high.dtcg.json +1 -1
  263. package/tokens/modes/system-light__kim-titanium__compact__standard.dtcg.json +1 -1
  264. package/tokens/modes/system-light__kim__comfortable__high.dtcg.json +1 -1
  265. package/tokens/modes/system-light__kim__comfortable__standard.dtcg.json +1 -1
  266. package/tokens/modes/system-light__kim__compact__high.dtcg.json +1 -1
  267. package/tokens/modes/system-light__kim__compact__standard.dtcg.json +1 -1
  268. package/tokens/modes/system-light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  269. package/tokens/modes/system-light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  270. package/tokens/modes/system-light__moc-bamboo__compact__high.dtcg.json +1 -1
  271. package/tokens/modes/system-light__moc-bamboo__compact__standard.dtcg.json +1 -1
  272. package/tokens/modes/system-light__moc-forest__comfortable__high.dtcg.json +1 -1
  273. package/tokens/modes/system-light__moc-forest__comfortable__standard.dtcg.json +1 -1
  274. package/tokens/modes/system-light__moc-forest__compact__high.dtcg.json +1 -1
  275. package/tokens/modes/system-light__moc-forest__compact__standard.dtcg.json +1 -1
  276. package/tokens/modes/system-light__moc__comfortable__high.dtcg.json +1 -1
  277. package/tokens/modes/system-light__moc__comfortable__standard.dtcg.json +1 -1
  278. package/tokens/modes/system-light__moc__compact__high.dtcg.json +1 -1
  279. package/tokens/modes/system-light__moc__compact__standard.dtcg.json +1 -1
  280. package/tokens/modes/system-light__tho-clay__comfortable__high.dtcg.json +1 -1
  281. package/tokens/modes/system-light__tho-clay__comfortable__standard.dtcg.json +1 -1
  282. package/tokens/modes/system-light__tho-clay__compact__high.dtcg.json +1 -1
  283. package/tokens/modes/system-light__tho-clay__compact__standard.dtcg.json +1 -1
  284. package/tokens/modes/system-light__tho-sand__comfortable__high.dtcg.json +1 -1
  285. package/tokens/modes/system-light__tho-sand__comfortable__standard.dtcg.json +1 -1
  286. package/tokens/modes/system-light__tho-sand__compact__high.dtcg.json +1 -1
  287. package/tokens/modes/system-light__tho-sand__compact__standard.dtcg.json +1 -1
  288. package/tokens/modes/system-light__tho__comfortable__high.dtcg.json +1 -1
  289. package/tokens/modes/system-light__tho__comfortable__standard.dtcg.json +1 -1
  290. package/tokens/modes/system-light__tho__compact__high.dtcg.json +1 -1
  291. package/tokens/modes/system-light__tho__compact__standard.dtcg.json +1 -1
  292. package/tokens/modes/system-light__thuy-mist__comfortable__high.dtcg.json +1 -1
  293. package/tokens/modes/system-light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  294. package/tokens/modes/system-light__thuy-mist__compact__high.dtcg.json +1 -1
  295. package/tokens/modes/system-light__thuy-mist__compact__standard.dtcg.json +1 -1
  296. package/tokens/modes/system-light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  297. package/tokens/modes/system-light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  298. package/tokens/modes/system-light__thuy-ocean__compact__high.dtcg.json +1 -1
  299. package/tokens/modes/system-light__thuy-ocean__compact__standard.dtcg.json +1 -1
  300. package/tokens/modes/system-light__thuy__comfortable__high.dtcg.json +1 -1
  301. package/tokens/modes/system-light__thuy__comfortable__standard.dtcg.json +1 -1
  302. package/tokens/modes/system-light__thuy__compact__high.dtcg.json +1 -1
  303. package/tokens/modes/system-light__thuy__compact__standard.dtcg.json +1 -1
  304. package/tokens/native/CSModes.kt +3 -3
  305. package/tokens/native/CSModes.swift +3 -3
  306. package/tokens/native/CSTokens.kt +1 -1
  307. package/tokens/native/CSTokens.swift +1 -1
  308. package/tokens/native/cs_modes.dart +3 -3
  309. package/tokens/native/cs_tokens.dart +1 -1
  310. package/tokens/native/mode-provenance.json +6 -6
  311. package/tokens/provenance.json +6 -6
  312. package/tokens/tokens.dtcg.json +2 -2
  313. package/tokens/tokens.js +3 -3
  314. package/tokens/tokens.json +2 -2
  315. package/tokens/variables.css +2 -2
  316. package/ui_kits/deck/index.html +1 -1
package/_ds_manifest.json CHANGED
@@ -5750,7 +5750,7 @@
5750
5750
  "scope": ".cs-display-face",
5751
5751
  "important": false,
5752
5752
  "declarationOrder": 1050,
5753
- "sourceLine": 24
5753
+ "sourceLine": 25
5754
5754
  },
5755
5755
  {
5756
5756
  "name": "--cs-term-border",
@@ -5760,7 +5760,7 @@
5760
5760
  "scope": ".cs-terminal",
5761
5761
  "important": false,
5762
5762
  "declarationOrder": 1053,
5763
- "sourceLine": 346
5763
+ "sourceLine": 355
5764
5764
  },
5765
5765
  {
5766
5766
  "name": "--cs-term-bar",
@@ -5770,7 +5770,7 @@
5770
5770
  "scope": ".cs-terminal",
5771
5771
  "important": false,
5772
5772
  "declarationOrder": 1054,
5773
- "sourceLine": 347
5773
+ "sourceLine": 356
5774
5774
  },
5775
5775
  {
5776
5776
  "name": "--cs-term-dot",
@@ -5780,7 +5780,7 @@
5780
5780
  "scope": ".cs-terminal",
5781
5781
  "important": false,
5782
5782
  "declarationOrder": 1055,
5783
- "sourceLine": 348
5783
+ "sourceLine": 357
5784
5784
  },
5785
5785
  {
5786
5786
  "name": "--cs-term-bg",
@@ -5790,7 +5790,7 @@
5790
5790
  "scope": ".cs-terminal",
5791
5791
  "important": false,
5792
5792
  "declarationOrder": 1056,
5793
- "sourceLine": 349
5793
+ "sourceLine": 358
5794
5794
  },
5795
5795
  {
5796
5796
  "name": "--cs-term-fg",
@@ -5800,7 +5800,7 @@
5800
5800
  "scope": ".cs-terminal",
5801
5801
  "important": false,
5802
5802
  "declarationOrder": 1057,
5803
- "sourceLine": 350
5803
+ "sourceLine": 359
5804
5804
  },
5805
5805
  {
5806
5806
  "name": "--cs-term-muted",
@@ -5810,7 +5810,7 @@
5810
5810
  "scope": ".cs-terminal",
5811
5811
  "important": false,
5812
5812
  "declarationOrder": 1058,
5813
- "sourceLine": 351
5813
+ "sourceLine": 360
5814
5814
  },
5815
5815
  {
5816
5816
  "name": "--cs-code-bg",
@@ -5857,6 +5857,7 @@
5857
5857
  "value": "color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent)",
5858
5858
  "kind": "css-expression",
5859
5859
  "definedIn": "base/glass.css",
5860
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5860
5861
  "important": false,
5861
5862
  "declarationOrder": 1066,
5862
5863
  "sourceLine": 15
@@ -5866,6 +5867,7 @@
5866
5867
  "value": "transparent",
5867
5868
  "kind": "css-expression",
5868
5869
  "definedIn": "base/glass.css",
5870
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5869
5871
  "important": false,
5870
5872
  "declarationOrder": 1067,
5871
5873
  "sourceLine": 16
@@ -5875,6 +5877,7 @@
5875
5877
  "value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent)",
5876
5878
  "kind": "css-expression",
5877
5879
  "definedIn": "base/glass.css",
5880
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5878
5881
  "important": false,
5879
5882
  "declarationOrder": 1068,
5880
5883
  "sourceLine": 17
@@ -5884,6 +5887,7 @@
5884
5887
  "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 50%, transparent)",
5885
5888
  "kind": "css-expression",
5886
5889
  "definedIn": "base/glass.css",
5890
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5887
5891
  "important": false,
5888
5892
  "declarationOrder": 1069,
5889
5893
  "sourceLine": 18
@@ -5893,6 +5897,7 @@
5893
5897
  "value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-standard-opacity, 80%), transparent)",
5894
5898
  "kind": "css-expression",
5895
5899
  "definedIn": "base/glass.css",
5900
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5896
5901
  "important": false,
5897
5902
  "declarationOrder": 1070,
5898
5903
  "sourceLine": 19
@@ -5902,6 +5907,7 @@
5902
5907
  "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 60%, transparent)",
5903
5908
  "kind": "css-expression",
5904
5909
  "definedIn": "base/glass.css",
5910
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5905
5911
  "important": false,
5906
5912
  "declarationOrder": 1071,
5907
5913
  "sourceLine": 20
@@ -5911,6 +5917,7 @@
5911
5917
  "value": "color-mix(in oklab, var(--cs-color-surface-raised, #fbf4e9) var(--cs-glass-heavy-opacity, 90%), transparent)",
5912
5918
  "kind": "css-expression",
5913
5919
  "definedIn": "base/glass.css",
5920
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5914
5921
  "important": false,
5915
5922
  "declarationOrder": 1072,
5916
5923
  "sourceLine": 21
@@ -5920,6 +5927,7 @@
5920
5927
  "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 80%, transparent)",
5921
5928
  "kind": "css-expression",
5922
5929
  "definedIn": "base/glass.css",
5930
+ "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
5923
5931
  "important": false,
5924
5932
  "declarationOrder": 1073,
5925
5933
  "sourceLine": 22
package/_esm/cs.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.3.1).
1
+ // CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.5.0).
2
2
  // No build step: import this module directly in a browser. It loads the pinned umd-react@19.2.8
3
3
  // distribution; its retained React and ReactDOM files report runtime version 19.2.4.
4
4
  // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
@@ -33,7 +33,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
33
33
  export const CS = g[found()];
34
34
  if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
35
35
  export default CS;
36
- export const VERSION = "2.3.1";
36
+ export const VERSION = "2.5.0";
37
37
  export const AIDisclosureBadge = CS.AIDisclosureBadge;
38
38
  export const Accordion = CS.Accordion;
39
39
  export const Alert = CS.Alert;
package/base/a11y.css CHANGED
@@ -111,7 +111,7 @@
111
111
  background: radial-gradient(circle, var(--cs-color-border-default) 4.5px, transparent 5px);
112
112
  }
113
113
  .cs-carousel__dots button[aria-current="true"] {
114
- background: radial-gradient(circle, var(--cs-accent) 4.5px, transparent 5px);
114
+ background: radial-gradient(circle, var(--cs-color-text-accent) 4.5px, transparent 5px);
115
115
  }
116
116
  .cs-carousel__dots button::before { content: none; }
117
117
  /* The container's two 1px borders must not clip a short requested divider. */
package/base/ai.css CHANGED
@@ -4,6 +4,7 @@
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.is-invalid, .is-invalid .cs-prompt, .cs-prompt[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
7
8
  .cs-prompt:focus-within {
8
9
  border-color: var(--cs-color-text-primary);
9
10
  outline: 2px solid var(--cs-color-text-primary);
@@ -22,14 +23,14 @@
22
23
  .cs-chat-msg--user { flex-direction: row-reverse; }
23
24
  .cs-chat-msg__avatar { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
24
25
  .cs-chat-msg--lumi .cs-chat-msg__avatar { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
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); }
26
+ .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); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
26
27
  .cs-chat-msg__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
27
28
  .cs-chat-msg__col { display: grid; gap: 3px; max-inline-size: 80%; }
28
29
  .cs-chat-msg--user .cs-chat-msg__col { justify-items: end; }
29
30
  .cs-chat-msg__name { font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-color-text-muted); }
30
31
  .cs-chat-msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
31
32
  .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); }
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; }
33
+ .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; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
33
34
 
34
35
  /* ConfidenceMeter */
35
36
  .cs-confidence { display: grid; gap: 6px; font-family: var(--cs-font-family-ui); }
@@ -27,7 +27,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
27
27
  .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
28
28
  }
29
29
  .cs-item--interactive:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
30
- .cs-item.is-selected { border-color: var(--cs-accent); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
30
+ .cs-item.is-selected { border-color: var(--cs-color-text-accent); background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
31
31
  .cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
32
32
  /* Static Item text remains information, rather than an inactive control. */
33
33
  div.cs-item.is-disabled { opacity: 1; }
@@ -47,7 +47,7 @@ div.cs-item.is-disabled { opacity: 1; }
47
47
  .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }
48
48
  .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); }
49
49
  .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; }
50
- .cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); }
50
+ .cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
51
51
  .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); }
52
52
  .cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
53
53
  .cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }
@@ -91,8 +91,8 @@
91
91
  .cs-button--full { inline-size: 100%; }
92
92
 
93
93
  .cs-button.is-disabled,
94
- .cs-button.is-loading,
95
94
  .cs-field.is-disabled { opacity: 0.58; cursor: not-allowed; }
95
+ .cs-button.is-loading { opacity: 0.88; cursor: progress; }
96
96
 
97
97
  .cs-button__spinner {
98
98
  inline-size: 1em; block-size: 1em; border-radius: 999px;
@@ -124,7 +124,7 @@
124
124
  padding-inline: var(--cs-component-textfield-paddingX, 12px);
125
125
  }
126
126
  .cs-field__control::placeholder { color: var(--cs-color-text-muted, #3f2d21); opacity: 0.7; }
127
- .cs-field.is-invalid .cs-field__control { border-color: var(--cs-color-semantic-danger, #b42318); }
127
+ .cs-field.is-invalid .cs-field__control, .cs-field__control.is-invalid, .cs-field__control[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
128
128
  .cs-field__error { color: var(--cs-color-semantic-danger-text, #4b0502); font-size: 0.875rem; }
129
129
 
130
130
  /* ---- Dialog ---- */
@@ -132,7 +132,7 @@
132
132
  .cs-dialog__overlay { background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); inset: 0; position: absolute; }
133
133
  .cs-dialog {
134
134
  background: var(--cs-color-surface-panel, #ffffff);
135
- border-radius: var(--cs-radius-md, 8px);
135
+ border-radius: var(--cs-radius-lg, 14px);
136
136
  box-shadow: var(--cs-shadow-xl, 0 24px 80px rgba(31, 19, 11, 0.26));
137
137
  color: var(--cs-color-text-primary, #45210e);
138
138
  left: 0;
package/base/controls.css CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  /* SearchField */
4
4
  .cs-search { display: flex; align-items: center; gap: var(--cs-space-2); 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.is-invalid, .is-invalid .cs-search, .cs-search[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
5
6
  .cs-search:focus-within {
6
7
  border-color: var(--cs-color-text-primary);
7
8
  outline: 2px solid var(--cs-color-text-primary);
@@ -16,6 +17,7 @@
16
17
 
17
18
  /* NumberField / stepper */
18
19
  .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); }
20
+ .cs-stepper.is-invalid, .is-invalid .cs-stepper, .cs-stepper[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
19
21
  .cs-stepper:focus-within {
20
22
  border-color: var(--cs-color-text-primary);
21
23
  outline: 2px solid var(--cs-color-text-primary);
@@ -65,11 +67,12 @@
65
67
  .cs-toggle:disabled { opacity: .5; cursor: not-allowed; }
66
68
  .cs-rating { display: inline-flex; gap: 4px; }
67
69
  .cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }
68
- .cs-rating button.on { color: var(--cs-accent); }
70
+ .cs-rating button.on { color: var(--cs-color-text-accent); }
69
71
  .cs-rating[data-readonly="true"] button { cursor: default; }
70
72
  .cs-rating button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
71
73
  .cs-otp { display: inline-flex; gap: 8px; }
72
74
  .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); }
75
+ .cs-otp.is-invalid input, .is-invalid .cs-otp input, .cs-otp input.is-invalid, .cs-otp input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
73
76
  .cs-otp input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; border-color: var(--cs-accent); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
74
77
  .cs-otp input:disabled { opacity: .5; cursor: not-allowed; background: var(--cs-color-surface-raised); }
75
78
  .cs-btngroup { display: inline-flex; }
@@ -81,6 +84,7 @@
81
84
  /* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */
82
85
  .cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
83
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 var(--cs-space-3); min-block-size: 44px; }
87
+ .is-invalid .cs-combobox input, .cs-combobox.is-invalid input, .cs-combobox input.is-invalid, .cs-combobox[aria-invalid="true"] input, .cs-combobox input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
84
88
  .cs-combobox input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
85
89
  .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); }
86
90
  .cs-combobox__popup { color: var(--cs-color-text-primary); 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; }
@@ -89,6 +93,7 @@
89
93
  .cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-primary))var(--_cs-dark, var(--cs-accent-bright)); }
90
94
  .cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
91
95
  .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; }
96
+ .cs-igroup.is-invalid, .is-invalid .cs-igroup, .cs-igroup[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
92
97
  .cs-igroup:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
93
98
  .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; }
94
99
  .cs-igroup > input:focus { outline: none; }
@@ -97,6 +102,7 @@
97
102
  .cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }
98
103
  .cs-igroup__btn:hover { color: var(--cs-color-text-primary); }
99
104
  .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 var(--cs-space-2); min-block-size: 44px; box-sizing: border-box; }
105
+ .cs-taginput.is-invalid, .is-invalid .cs-taginput, .cs-taginput[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
100
106
  .cs-taginput:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
101
107
  .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 var(--cs-space-1); }
102
108
  .cs-taginput > input:focus { outline: none; }
@@ -113,16 +119,18 @@
113
119
  .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); }
114
120
  .cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }
115
121
  .cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
116
- .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }
117
- .cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; }
122
+ .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); }
123
+ .cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
118
124
  .cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
119
125
  .cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }
120
126
  .cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); 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: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }
127
+ .cs-datepicker.is-invalid .cs-datepicker__field, .is-invalid .cs-datepicker__field, .cs-datepicker__field.is-invalid, .cs-datepicker__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
121
128
  .cs-datepicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
122
129
  .cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
123
130
  .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: max-content; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); }
124
131
  .cs-datepicker__pop .cs-cal { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; overflow-x: auto; }
125
132
  .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); }
133
+ .cs-timepicker.is-invalid, .is-invalid .cs-timepicker, .cs-timepicker[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
126
134
  .cs-timepicker:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
127
135
  .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; }
128
136
  .cs-timepicker select:focus { outline: none; }
@@ -137,14 +145,14 @@
137
145
  .cs-ctxmenu-zone { position: relative; }
138
146
  .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; }
139
147
  .cs-fab--static { position: static; align-items: flex-start; }
140
- .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
148
+ .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), var(--cs-shadow-lg); }
141
149
  .cs-fab__main:hover { filter: brightness(1.05); }
142
150
  .cs-fab__main:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md); }
143
151
  .cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }
144
152
  .cs-fab--static .cs-fab__dial, .cs-fab__dial--static { flex-direction: row; }
145
153
  .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); }
146
154
  .cs-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; }
147
- .cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--cs-accent-tint); color: var(--cs-color-text-accent); }
155
+ .cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); color: var(--cs-color-text-accent); }
148
156
  .cs-result--success .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-success) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-success-text); }
149
157
  .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-text); }
150
158
  .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-text); }
@@ -198,7 +206,7 @@
198
206
  .cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }
199
207
  .cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: 468px; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); box-sizing: border-box; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }
200
208
  .cs-navmenu__card { min-inline-size: 0; overflow-wrap: anywhere; display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
201
- .cs-navmenu__card:hover { background: var(--cs-accent-tint); }
209
+ .cs-navmenu__card:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
202
210
  .cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
203
211
  .cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }
204
212
  .cs-carousel { display: grid; gap: 10px; }
@@ -214,7 +222,7 @@
214
222
  .cs-carousel__dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
215
223
  .cs-carousel__dots button { inline-size: 24px; block-size: 24px; flex: 0 0 24px; border-radius: 999px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }
216
224
  .cs-carousel__dots button::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 9px; block-size: 9px; border-radius: inherit; background: var(--cs-color-border-default); pointer-events: none; }
217
- .cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-accent); }
225
+ .cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-color-text-accent); }
218
226
  @media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }
219
227
  .cs-comment { display: flex; gap: 10px; }
220
228
  .cs-comment__main { flex: 1; min-inline-size: 0; }
@@ -241,7 +249,7 @@
241
249
  .cs-formfield__label em { color: var(--cs-color-semantic-danger-text); font-style: normal; }
242
250
  .cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
243
251
  .cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger-text); font-weight: 600; }
244
- .cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }
252
+ .cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select, .cs-formfield.is-invalid input, .cs-formfield.is-invalid textarea, .cs-formfield.is-invalid select, .cs-formfield input[aria-invalid="true"], .cs-formfield textarea[aria-invalid="true"], .cs-formfield select[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
245
253
  .cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }
246
254
  .cs-tree ul { list-style: none; margin: 0; padding: 0; }
247
255
  .cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }
@@ -256,6 +264,7 @@
256
264
  /* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
257
265
  .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
258
266
  .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; }
267
+ .cs-treeselect.is-invalid .cs-treeselect__field, .cs-cascader.is-invalid .cs-treeselect__field, .is-invalid .cs-treeselect__field, .cs-treeselect__field.is-invalid, .cs-treeselect__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
259
268
  .cs-treeselect__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
260
269
  .cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
261
270
  .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%; }
@@ -302,7 +311,7 @@
302
311
  .cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
303
312
  .cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }
304
313
  .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; }
305
- .cs-splitter__bar:hover { background: var(--cs-accent-tint); }
314
+ .cs-splitter__bar:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
306
315
  .cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
307
316
  .cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); display: grid; place-items: center; }
308
317
  .cs-hotkeys__card { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); 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; }
@@ -311,7 +320,7 @@
311
320
  .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); }
312
321
  .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); }
313
322
  .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; }
314
- .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); }
323
+ .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-color-text-accent); }
315
324
  @media (prefers-reduced-motion: reduce) { .cs-dock__item { transition: none; } }
316
325
 
317
326
  /* ---- v3 Batch 7b (Jul 2026): DataGrid · TreeTable · Sortable ---- */
package/base/data.css CHANGED
@@ -23,6 +23,7 @@
23
23
  .cs-stat { display: grid; gap: 3px; }
24
24
  .cs-stat__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
25
25
  .cs-stat__value { font-size: var(--cs-font-size-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--cs-letter-spacing-tight); font-variant-numeric: tabular-nums; }
26
+ .cs-stat__value:lang(vi) { line-height: 1.22; }
26
27
  .cs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cs-font-size-sm); font-weight: 700; }
27
28
  .cs-stat__delta--up { color: var(--cs-color-semantic-success-text); }
28
29
  .cs-stat__delta--down { color: var(--cs-color-semantic-danger-text); }
@@ -41,7 +42,7 @@
41
42
 
42
43
  /* Tooltip */
43
44
  .cs-tooltip { position: relative; display: inline-flex; }
44
- .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); }
45
+ .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: normal; inline-size: max-content; max-inline-size: 240px; overflow-wrap: break-word; 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: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent), var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
45
46
  .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); }
46
47
  .cs-tooltip:not([data-managed]):hover .cs-tooltip__bubble, .cs-tooltip:not([data-managed]):focus-within .cs-tooltip__bubble, .cs-tooltip[data-open="true"] .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
47
48
 
package/base/feedback.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. */
2
2
 
3
3
  /* Badge — compact status label */
4
- .cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
5
- .cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); }
4
+ .cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; padding: 3px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
5
+ .cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
6
6
  .cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
7
7
  [data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--solid { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); }
8
8
  [data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--ochre { background: var(--cs-accent-tint); color: var(--cs-color-text-accent); border-color: color-mix(in oklab, var(--cs-accent) 55%, transparent); }
@@ -56,9 +56,9 @@
56
56
 
57
57
  /* Progress bar */
58
58
  .cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }
59
- .cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
60
- .cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); }
61
- .cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); }
59
+ .cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
60
+ .cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
61
+ .cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); box-shadow: none; }
62
62
 
63
63
  /* Skeleton */
64
64
  .cs-skeleton { display: block; border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-color-surface-raised) 25%, color-mix(in oklab, var(--cs-color-surface-raised) 55%, var(--cs-color-surface-panel)) 37%, var(--cs-color-surface-raised) 63%); background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite; }
package/base/glass.css CHANGED
@@ -8,10 +8,10 @@
8
8
  */
9
9
 
10
10
  /* ---- 1. Composition from token scalars ---- */
11
- :root {
11
+ :root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast] {
12
12
  --_cs-border-subtle: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 76%, transparent);
13
13
  --_cs-border-strong: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e));
14
- --_cs-surface-scrim: color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 52%, transparent);
14
+ --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) 25%, #050403) 68%, transparent); /* light: umber-led veil · dark: near-black veil so modals dim dark surfaces (v2.4.0 audit D2) */
15
15
  --cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
16
16
  --cs-glass-whisper-border: transparent;
17
17
  --cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);
package/base/shell.css CHANGED
@@ -16,8 +16,8 @@
16
16
  .cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
17
17
  .cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
18
18
  .cs-step--done .cs-step__marker { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); border-color: transparent; }
19
- .cs-step--done:not(:last-child)::after { background: var(--cs-accent-strong); }
20
- .cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
19
+ .cs-step--done:not(:last-child)::after { background: var(--cs-color-text-accent); }
20
+ .cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
21
21
  .cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
22
22
  .cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
23
23
 
@@ -3,6 +3,7 @@
3
3
  * Built on the semantic aliases in tokens/typography.css. */
4
4
  .cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
5
5
  .cs-display--fluid { font-family: var(--cs-heading-family); font-size: clamp(2.25rem, 1.5rem + 3.5vw, var(--cs-text-display)); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
6
+ :is(.cs-display, .cs-display--fluid):lang(vi) { line-height: 1.22; } /* element's own language: EN display inside a VI page keeps 1.15 */
6
7
  .cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
7
8
  .cs-h1--fluid { font-family: var(--cs-heading-family); font-size: clamp(1.75rem, 1.25rem + 2vw, var(--cs-text-h1)); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
8
9
  .cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
@@ -4,7 +4,7 @@
4
4
  "sourceHashes": {
5
5
  "components/api-index.json": "468afbb6e09f78a1be6fe2b2b06bbd6ea30f4fa06abb835c191eb6490082854a",
6
6
  "components/contracts.json": "e4ebe085e32dc639dea36cb032155c6aa557e61411bec7fa800691dd61a2ce03",
7
- "_ds_manifest.json": "2ff3ac9bd9fd509669b188c7c249aa73e90a4a35b90acc9024f05d33f4629da5",
7
+ "_ds_manifest.json": "8f7b007bfb71572e3846ba9540fce7f104ea146a476100723c62c4b7a42e8a0e",
8
8
  "scripts/generate-component-contracts.mjs": "a94d0d58b3d0b6f629bf2cdc2a53bdfc8b43b8fa1479434b770f0cd8dc53187c",
9
9
  "scripts/lib/component-export.mjs": "9f6fd3df4a9e0366fef8c384a0926e050bd8fbcb3887bf5e6ffaed5c0622cd15",
10
10
  "scripts/generate-prompt-api.mjs": "e67709ad813a46330d2825912334244050422c16f05021890cc6b41b73acd602"
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "baselineVersion": "2.3.0",
3
+ "baselineVersion": "2.4.0",
4
4
  "policy": {
5
5
  "versioning": "semver",
6
6
  "breakingChangesRequireMajor": true,
@@ -5,7 +5,7 @@
5
5
  "sourceHashes": {
6
6
  "_audit/a11y-gate.html": "68c798ba1261c5bca4da7eefd67a045ba3048711a5f8a9fe9d35eacb4e8b06da",
7
7
  "_audit/component-behavior-test.html": "5d1a1dafba237dcec4144e2dd0059f7fdce54306d9b42bc7af09030d11fbcb5b",
8
- "_ds_manifest.json": "2ff3ac9bd9fd509669b188c7c249aa73e90a4a35b90acc9024f05d33f4629da5",
8
+ "_ds_manifest.json": "8f7b007bfb71572e3846ba9540fce7f104ea146a476100723c62c4b7a42e8a0e",
9
9
  "components/_i18n/i18n.js": "ea69f4f438162cf0e9770d529ec3b9f1107183885c71aa83f2ceff3763a34d2f",
10
10
  "components/_i18n/strings.js": "ffedd19ed9eacd22223e1387ab7eedca5cb385182d9a4ada469ef2711a0bae73",
11
11
  "components/_utils/cx.js": "ad6a747ea116bb2521a5cfa094580d2259d841ac9965d10310e83e8e839bab42",