@helixui/library 3.1.0-next.71 → 3.1.0-next.72

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 (522) hide show
  1. package/custom-elements.json +45 -45
  2. package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
  3. package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
  4. package/dist/components/hx-accordion/index.js +1 -1
  5. package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
  6. package/dist/components/hx-action-bar/index.js +1 -1
  7. package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
  8. package/dist/components/hx-alert/hx-alert.styles.d.ts +12 -0
  9. package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
  10. package/dist/components/hx-alert/index.js +1 -1
  11. package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
  12. package/dist/components/hx-avatar/index.js +1 -1
  13. package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
  14. package/dist/components/hx-badge/index.js +1 -1
  15. package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
  16. package/dist/components/hx-banner/hx-banner.styles.d.ts +12 -0
  17. package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
  18. package/dist/components/hx-banner/index.js +1 -1
  19. package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
  20. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
  21. package/dist/components/hx-breadcrumb/index.js +1 -1
  22. package/dist/components/hx-button/hx-button.d.ts.map +1 -1
  23. package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
  24. package/dist/components/hx-button/index.js +1 -1
  25. package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
  26. package/dist/components/hx-button-group/hx-button-group.styles.d.ts.map +1 -1
  27. package/dist/components/hx-button-group/index.js +1 -1
  28. package/dist/components/hx-card/hx-card.d.ts.map +1 -1
  29. package/dist/components/hx-card/hx-card.styles.d.ts +9 -0
  30. package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
  31. package/dist/components/hx-card/index.js +1 -1
  32. package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
  33. package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
  34. package/dist/components/hx-carousel/index.js +1 -1
  35. package/dist/components/hx-checkbox/hx-checkbox.d.ts +7 -7
  36. package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
  37. package/dist/components/hx-checkbox/index.js +1 -1
  38. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +2 -2
  39. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
  40. package/dist/components/hx-checkbox-group/index.js +1 -1
  41. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
  42. package/dist/components/hx-clinical-status/index.js +1 -1
  43. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
  44. package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
  45. package/dist/components/hx-code-snippet/index.js +1 -1
  46. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  47. package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
  48. package/dist/components/hx-color-picker/index.js +1 -1
  49. package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
  50. package/dist/components/hx-combobox/index.js +1 -1
  51. package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
  52. package/dist/components/hx-copy-button/hx-copy-button.styles.d.ts.map +1 -1
  53. package/dist/components/hx-copy-button/index.js +1 -1
  54. package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
  55. package/dist/components/hx-counter/index.js +1 -1
  56. package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
  57. package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
  58. package/dist/components/hx-data-table/index.js +1 -1
  59. package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
  60. package/dist/components/hx-date-picker/index.js +1 -1
  61. package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
  62. package/dist/components/hx-dialog/hx-dialog.styles.d.ts +10 -0
  63. package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
  64. package/dist/components/hx-dialog/index.js +1 -1
  65. package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
  66. package/dist/components/hx-divider/index.js +1 -1
  67. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  68. package/dist/components/hx-drawer/hx-drawer.styles.d.ts +10 -0
  69. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  70. package/dist/components/hx-drawer/index.js +1 -1
  71. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  72. package/dist/components/hx-dropdown/index.js +1 -1
  73. package/dist/components/hx-field/index.js +1 -1
  74. package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
  75. package/dist/components/hx-field-label/index.js +1 -1
  76. package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
  77. package/dist/components/hx-file-upload/index.js +1 -1
  78. package/dist/components/hx-form/index.js +1 -1
  79. package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
  80. package/dist/components/hx-help-text/index.js +1 -1
  81. package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
  82. package/dist/components/hx-icon/index.js +1 -1
  83. package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
  84. package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
  85. package/dist/components/hx-icon-button/index.js +1 -1
  86. package/dist/components/hx-image/hx-image.d.ts.map +1 -1
  87. package/dist/components/hx-image/index.js +1 -1
  88. package/dist/components/hx-link/hx-link.d.ts.map +1 -1
  89. package/dist/components/hx-link/index.js +1 -1
  90. package/dist/components/hx-list/hx-list-item.d.ts.map +1 -1
  91. package/dist/components/hx-list/hx-list.d.ts.map +1 -1
  92. package/dist/components/hx-list/index.js +1 -1
  93. package/dist/components/hx-menu/hx-menu-divider.d.ts.map +1 -1
  94. package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
  95. package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
  96. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  97. package/dist/components/hx-menu/index.js +1 -1
  98. package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
  99. package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
  100. package/dist/components/hx-meter/index.js +1 -1
  101. package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
  102. package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
  103. package/dist/components/hx-nav/index.js +1 -1
  104. package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
  105. package/dist/components/hx-number-input/index.js +1 -1
  106. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
  107. package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
  108. package/dist/components/hx-overflow-menu/index.js +1 -1
  109. package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
  110. package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
  111. package/dist/components/hx-pagination/index.js +1 -1
  112. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
  113. package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
  114. package/dist/components/hx-patient-banner/index.js +1 -1
  115. package/dist/components/hx-phi-field/hx-phi-field.d.ts +5 -5
  116. package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
  117. package/dist/components/hx-phi-field/index.js +1 -1
  118. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  119. package/dist/components/hx-popover/hx-popover.styles.d.ts +9 -0
  120. package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
  121. package/dist/components/hx-popover/index.js +1 -1
  122. package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
  123. package/dist/components/hx-popup/hx-popup.styles.d.ts +9 -0
  124. package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
  125. package/dist/components/hx-popup/index.js +1 -1
  126. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
  127. package/dist/components/hx-progress-bar/index.js +1 -1
  128. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
  129. package/dist/components/hx-progress-ring/index.js +1 -1
  130. package/dist/components/hx-prose/index.js +1 -1
  131. package/dist/components/hx-radio-group/hx-radio-group.d.ts +3 -3
  132. package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
  133. package/dist/components/hx-radio-group/hx-radio.d.ts +5 -5
  134. package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
  135. package/dist/components/hx-radio-group/index.js +1 -1
  136. package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
  137. package/dist/components/hx-rating/index.js +1 -1
  138. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  139. package/dist/components/hx-select/index.js +1 -1
  140. package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
  141. package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
  142. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  143. package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
  144. package/dist/components/hx-side-nav/index.js +1 -1
  145. package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
  146. package/dist/components/hx-skeleton/index.js +1 -1
  147. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  148. package/dist/components/hx-slider/hx-slider.styles.d.ts.map +1 -1
  149. package/dist/components/hx-slider/index.js +1 -1
  150. package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
  151. package/dist/components/hx-spinner/index.js +1 -1
  152. package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
  153. package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
  154. package/dist/components/hx-split-button/index.js +1 -1
  155. package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
  156. package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
  157. package/dist/components/hx-split-panel/index.js +1 -1
  158. package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
  159. package/dist/components/hx-stat/index.js +1 -1
  160. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
  161. package/dist/components/hx-status-indicator/index.js +1 -1
  162. package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
  163. package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
  164. package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
  165. package/dist/components/hx-steps/index.js +1 -1
  166. package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
  167. package/dist/components/hx-structured-list/index.js +1 -1
  168. package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
  169. package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
  170. package/dist/components/hx-switch/index.js +1 -1
  171. package/dist/components/hx-table/hx-table.d.ts +6 -6
  172. package/dist/components/hx-table/hx-table.d.ts.map +1 -1
  173. package/dist/components/hx-table/hx-td.d.ts +1 -1
  174. package/dist/components/hx-table/index.js +1 -1
  175. package/dist/components/hx-tabs/hx-tab-panel.d.ts +2 -2
  176. package/dist/components/hx-tabs/hx-tab-panel.d.ts.map +1 -1
  177. package/dist/components/hx-tabs/hx-tab.d.ts +6 -6
  178. package/dist/components/hx-tabs/hx-tab.d.ts.map +1 -1
  179. package/dist/components/hx-tabs/hx-tabs.d.ts +8 -8
  180. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  181. package/dist/components/hx-tabs/index.js +1 -1
  182. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  183. package/dist/components/hx-tag/index.js +1 -1
  184. package/dist/components/hx-text/hx-text.d.ts.map +1 -1
  185. package/dist/components/hx-text/hx-text.styles.d.ts.map +1 -1
  186. package/dist/components/hx-text/index.js +1 -1
  187. package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
  188. package/dist/components/hx-text-input/hx-text-input.styles.d.ts +12 -0
  189. package/dist/components/hx-text-input/hx-text-input.styles.d.ts.map +1 -1
  190. package/dist/components/hx-text-input/index.js +1 -1
  191. package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
  192. package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
  193. package/dist/components/hx-textarea/index.js +1 -1
  194. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  195. package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
  196. package/dist/components/hx-time-picker/index.js +1 -1
  197. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  198. package/dist/components/hx-toast/hx-toast.styles.d.ts +10 -0
  199. package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
  200. package/dist/components/hx-toast/index.js +1 -1
  201. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
  202. package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
  203. package/dist/components/hx-toggle-button/index.js +1 -1
  204. package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
  205. package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts +8 -0
  206. package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts.map +1 -1
  207. package/dist/components/hx-tooltip/index.js +1 -1
  208. package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
  209. package/dist/components/hx-top-nav/hx-top-nav.styles.d.ts.map +1 -1
  210. package/dist/components/hx-top-nav/index.js +1 -1
  211. package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
  212. package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
  213. package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
  214. package/dist/components/hx-tree-view/index.js +1 -1
  215. package/dist/css/helix-all.css +1107 -775
  216. package/dist/css/helix-core.css +213 -152
  217. package/dist/css/helix-data.css +51 -42
  218. package/dist/css/helix-feedback.css +121 -94
  219. package/dist/css/helix-forms.css +465 -301
  220. package/dist/css/helix-layout.css +7 -4
  221. package/dist/css/helix-media.css +13 -9
  222. package/dist/css/helix-navigation.css +80 -53
  223. package/dist/css/helix-overlay.css +57 -45
  224. package/dist/css/helix-tokens.css +103 -103
  225. package/dist/css/helix-utility.css +51 -34
  226. package/dist/css/hx-action-bar.css +4 -4
  227. package/dist/css/hx-alert.css +27 -23
  228. package/dist/css/hx-avatar.css +3 -3
  229. package/dist/css/hx-badge.css +22 -22
  230. package/dist/css/hx-banner.css +31 -24
  231. package/dist/css/hx-button-group.css +31 -14
  232. package/dist/css/hx-button.css +38 -21
  233. package/dist/css/hx-card.css +24 -10
  234. package/dist/css/hx-carousel.css +13 -9
  235. package/dist/css/hx-checkbox-group.css +3 -3
  236. package/dist/css/hx-checkbox.css +17 -17
  237. package/dist/css/hx-clinical-status.css +28 -28
  238. package/dist/css/hx-code-snippet.css +18 -15
  239. package/dist/css/hx-color-picker.css +30 -13
  240. package/dist/css/hx-combobox.css +26 -26
  241. package/dist/css/hx-copy-button.css +6 -3
  242. package/dist/css/hx-counter.css +1 -1
  243. package/dist/css/hx-data-table.css +21 -15
  244. package/dist/css/hx-date-picker.css +31 -31
  245. package/dist/css/hx-dialog.css +31 -24
  246. package/dist/css/hx-divider.css +2 -2
  247. package/dist/css/hx-drawer.css +13 -13
  248. package/dist/css/hx-dropdown.css +1 -1
  249. package/dist/css/hx-field-label.css +3 -3
  250. package/dist/css/hx-field.css +6 -6
  251. package/dist/css/hx-file-upload.css +16 -16
  252. package/dist/css/hx-help-text.css +5 -5
  253. package/dist/css/hx-icon-button.css +49 -38
  254. package/dist/css/hx-image.css +3 -3
  255. package/dist/css/hx-link.css +9 -9
  256. package/dist/css/hx-list.css +1 -1
  257. package/dist/css/hx-menu.css +1 -1
  258. package/dist/css/hx-meter.css +11 -10
  259. package/dist/css/hx-nav.css +17 -11
  260. package/dist/css/hx-number-input.css +6 -6
  261. package/dist/css/hx-overflow-menu.css +17 -8
  262. package/dist/css/hx-pagination.css +18 -12
  263. package/dist/css/hx-patient-banner.css +17 -9
  264. package/dist/css/hx-phi-field.css +4 -4
  265. package/dist/css/hx-popover.css +8 -4
  266. package/dist/css/hx-progress-bar.css +7 -7
  267. package/dist/css/hx-progress-ring.css +6 -6
  268. package/dist/css/hx-radio-group.css +5 -5
  269. package/dist/css/hx-rating.css +5 -5
  270. package/dist/css/hx-select.css +12 -12
  271. package/dist/css/hx-side-nav.css +13 -10
  272. package/dist/css/hx-skeleton.css +1 -1
  273. package/dist/css/hx-slider.css +14 -11
  274. package/dist/css/hx-spinner.css +4 -4
  275. package/dist/css/hx-split-button.css +40 -26
  276. package/dist/css/hx-split-panel.css +7 -4
  277. package/dist/css/hx-stat.css +8 -8
  278. package/dist/css/hx-status-indicator.css +7 -7
  279. package/dist/css/hx-structured-list.css +5 -5
  280. package/dist/css/hx-switch.css +15 -7
  281. package/dist/css/hx-table.css +6 -6
  282. package/dist/css/hx-tabs.css +3 -3
  283. package/dist/css/hx-tag.css +18 -18
  284. package/dist/css/hx-text-input.css +139 -61
  285. package/dist/css/hx-text.css +9 -7
  286. package/dist/css/hx-textarea.css +66 -27
  287. package/dist/css/hx-time-picker.css +25 -19
  288. package/dist/css/hx-toast.css +24 -9
  289. package/dist/css/hx-toggle-button.css +41 -28
  290. package/dist/css/hx-tooltip.css +4 -3
  291. package/dist/css/hx-top-nav.css +10 -7
  292. package/dist/css/hx-tree-view.css +1 -1
  293. package/dist/css/index.css +1 -1
  294. package/dist/css/manifest.json +106 -22
  295. package/dist/index.js +74 -74
  296. package/dist/shared/forced-colors-CTEDFRGa.js +117 -0
  297. package/dist/shared/forced-colors-CTEDFRGa.js.map +1 -0
  298. package/dist/shared/{hx-accordion-Wt52OOZD.js → hx-accordion-cnKg4_la.js} +31 -30
  299. package/dist/shared/hx-accordion-cnKg4_la.js.map +1 -0
  300. package/dist/shared/{hx-action-bar-6UzmViHI.js → hx-action-bar-CitgcpGv.js} +37 -36
  301. package/dist/shared/hx-action-bar-CitgcpGv.js.map +1 -0
  302. package/dist/shared/{hx-alert-D7n94HwI.js → hx-alert-BZH8iHQf.js} +36 -31
  303. package/dist/shared/hx-alert-BZH8iHQf.js.map +1 -0
  304. package/dist/shared/{hx-avatar-iLYzu8MJ.js → hx-avatar-C9hOmlAb.js} +19 -18
  305. package/dist/shared/hx-avatar-C9hOmlAb.js.map +1 -0
  306. package/dist/shared/{hx-badge-CVCmMPyW.js → hx-badge-CQXgOXJM.js} +65 -64
  307. package/dist/shared/hx-badge-CQXgOXJM.js.map +1 -0
  308. package/dist/shared/{hx-banner-C_He7Tr4.js → hx-banner-DT7Zn9Bo.js} +43 -35
  309. package/dist/shared/hx-banner-DT7Zn9Bo.js.map +1 -0
  310. package/dist/shared/{hx-breadcrumb-item-BgG5RcmA.js → hx-breadcrumb-item-COeYcB2x.js} +24 -23
  311. package/dist/shared/hx-breadcrumb-item-COeYcB2x.js.map +1 -0
  312. package/dist/shared/{hx-button-group-BJOGWoMa.js → hx-button-group-BI-QBqmO.js} +45 -27
  313. package/dist/shared/hx-button-group-BI-QBqmO.js.map +1 -0
  314. package/dist/shared/{hx-button-CQZswjtQ.js → hx-button-modUSOpY.js} +52 -34
  315. package/dist/shared/hx-button-modUSOpY.js.map +1 -0
  316. package/dist/shared/{hx-card-Dy_FuLfS.js → hx-card-CU1QnjNb.js} +42 -27
  317. package/dist/shared/hx-card-CU1QnjNb.js.map +1 -0
  318. package/dist/shared/{hx-carousel-item-D_dCv61-.js → hx-carousel-item-BaE4hpLl.js} +38 -33
  319. package/dist/shared/hx-carousel-item-BaE4hpLl.js.map +1 -0
  320. package/dist/shared/{hx-checkbox-ZKjOF7_3.js → hx-checkbox-C46TyXhM.js} +29 -28
  321. package/dist/shared/hx-checkbox-C46TyXhM.js.map +1 -0
  322. package/dist/shared/{hx-checkbox-group-XjOBHLiP.js → hx-checkbox-group-C9n315Ju.js} +18 -17
  323. package/dist/shared/hx-checkbox-group-C9n315Ju.js.map +1 -0
  324. package/dist/shared/{hx-clinical-status-BS5lcddT.js → hx-clinical-status-BmSjfSEN.js} +55 -54
  325. package/dist/shared/hx-clinical-status-BmSjfSEN.js.map +1 -0
  326. package/dist/shared/{hx-code-snippet-DssubcYM.js → hx-code-snippet-CJ0FbQYG.js} +34 -30
  327. package/dist/shared/hx-code-snippet-CJ0FbQYG.js.map +1 -0
  328. package/dist/shared/{hx-color-picker-DBaKTVLr.js → hx-color-picker-DiDLZyvK.js} +74 -56
  329. package/dist/shared/hx-color-picker-DiDLZyvK.js.map +1 -0
  330. package/dist/shared/{hx-combobox-DLwnvHVd.js → hx-combobox-DaA5dBC4.js} +38 -37
  331. package/dist/shared/hx-combobox-DaA5dBC4.js.map +1 -0
  332. package/dist/shared/{hx-copy-button-8deNUdwP.js → hx-copy-button-sUVuikyH.js} +23 -19
  333. package/dist/shared/hx-copy-button-sUVuikyH.js.map +1 -0
  334. package/dist/shared/{hx-counter-CKfl_g8K.js → hx-counter-0zYapFhf.js} +10 -9
  335. package/dist/shared/hx-counter-0zYapFhf.js.map +1 -0
  336. package/dist/shared/{hx-data-table-CnLxo9PH.js → hx-data-table-Cq3t86Ic.js} +101 -94
  337. package/dist/shared/hx-data-table-Cq3t86Ic.js.map +1 -0
  338. package/dist/shared/{hx-date-picker-D7H7CsVH.js → hx-date-picker-DMqRQNSB.js} +42 -41
  339. package/dist/shared/hx-date-picker-DMqRQNSB.js.map +1 -0
  340. package/dist/shared/{hx-dialog-BW-jetzN.js → hx-dialog-eIS8tcDm.js} +50 -42
  341. package/dist/shared/hx-dialog-eIS8tcDm.js.map +1 -0
  342. package/dist/shared/{hx-divider-CvyUVcp-.js → hx-divider-CYfcUjcr.js} +11 -10
  343. package/dist/shared/hx-divider-CYfcUjcr.js.map +1 -0
  344. package/dist/shared/{hx-drawer-BT52I4tk.js → hx-drawer-DDhDz7RI.js} +26 -25
  345. package/dist/shared/hx-drawer-DDhDz7RI.js.map +1 -0
  346. package/dist/shared/{hx-dropdown-BpVpL6Dz.js → hx-dropdown-LyaRc8Rf.js} +15 -14
  347. package/dist/shared/hx-dropdown-LyaRc8Rf.js.map +1 -0
  348. package/dist/shared/{hx-field-BX4zE3z5.js → hx-field-B3Qo8OLS.js} +11 -11
  349. package/dist/shared/{hx-field-BX4zE3z5.js.map → hx-field-B3Qo8OLS.js.map} +1 -1
  350. package/dist/shared/{hx-field-label-DtJzb1r3.js → hx-field-label-BVRyyKeh.js} +12 -11
  351. package/dist/shared/hx-field-label-BVRyyKeh.js.map +1 -0
  352. package/dist/shared/{hx-file-upload-BNuepoGn.js → hx-file-upload-zTDbjsRw.js} +37 -36
  353. package/dist/shared/hx-file-upload-zTDbjsRw.js.map +1 -0
  354. package/dist/shared/hx-form-CkChEATa.js +257 -0
  355. package/dist/shared/hx-form-CkChEATa.js.map +1 -0
  356. package/dist/shared/{hx-help-text-Br3igJv5.js → hx-help-text-Xb2Yr8x2.js} +29 -28
  357. package/dist/shared/hx-help-text-Xb2Yr8x2.js.map +1 -0
  358. package/dist/shared/{hx-icon-button-CqXH5Wwb.js → hx-icon-button-BmV97nqz.js} +81 -69
  359. package/dist/shared/hx-icon-button-BmV97nqz.js.map +1 -0
  360. package/dist/shared/{hx-icon-CcyDPDYY.js → hx-icon-fuVm4-bk.js} +15 -14
  361. package/dist/shared/hx-icon-fuVm4-bk.js.map +1 -0
  362. package/dist/shared/{hx-image-2gt14zZd.js → hx-image-Ben_4yM5.js} +18 -17
  363. package/dist/shared/hx-image-Ben_4yM5.js.map +1 -0
  364. package/dist/shared/{hx-link-Bem4Gn68.js → hx-link-DmiV-mPw.js} +19 -18
  365. package/dist/shared/hx-link-DmiV-mPw.js.map +1 -0
  366. package/dist/shared/{hx-list-_9qVv02L.js → hx-list-CkphGi9T.js} +22 -21
  367. package/dist/shared/hx-list-CkphGi9T.js.map +1 -0
  368. package/dist/shared/{hx-menu-divider-DsHWyPHy.js → hx-menu-divider-j__TZjH2.js} +36 -32
  369. package/dist/shared/hx-menu-divider-j__TZjH2.js.map +1 -0
  370. package/dist/shared/{hx-meter-TbROk-dw.js → hx-meter-Cm7k_Ro8.js} +42 -40
  371. package/dist/shared/hx-meter-Cm7k_Ro8.js.map +1 -0
  372. package/dist/shared/{hx-nav-BcYDmjf7.js → hx-nav-LoyEKZQC.js} +30 -23
  373. package/dist/shared/hx-nav-LoyEKZQC.js.map +1 -0
  374. package/dist/shared/{hx-nav-item-BTMMQv6c.js → hx-nav-item-D8xHLVOs.js} +74 -66
  375. package/dist/shared/hx-nav-item-D8xHLVOs.js.map +1 -0
  376. package/dist/shared/{hx-number-input-l6jeaGWW.js → hx-number-input-yUzFOSC1.js} +56 -55
  377. package/dist/shared/hx-number-input-yUzFOSC1.js.map +1 -0
  378. package/dist/shared/{hx-overflow-menu-DJ4qpgmi.js → hx-overflow-menu-BmKyAp5D.js} +34 -24
  379. package/dist/shared/hx-overflow-menu-BmKyAp5D.js.map +1 -0
  380. package/dist/shared/{hx-pagination-5FeVFIve.js → hx-pagination-Dqw5dorC.js} +40 -33
  381. package/dist/shared/hx-pagination-Dqw5dorC.js.map +1 -0
  382. package/dist/shared/{hx-patient-banner-uE6gqLpT.js → hx-patient-banner-CkS-Lmj4.js} +29 -20
  383. package/dist/shared/hx-patient-banner-CkS-Lmj4.js.map +1 -0
  384. package/dist/shared/{hx-phi-field-DxeWcRm9.js → hx-phi-field-Bf9TdtC1.js} +13 -12
  385. package/dist/shared/hx-phi-field-Bf9TdtC1.js.map +1 -0
  386. package/dist/shared/{hx-popover-C05QcD9m.js → hx-popover-B93rTAfr.js} +27 -22
  387. package/dist/shared/hx-popover-B93rTAfr.js.map +1 -0
  388. package/dist/shared/{hx-popup-DZXpsJ1R.js → hx-popup-COUXXZ9X.js} +8 -7
  389. package/dist/shared/hx-popup-COUXXZ9X.js.map +1 -0
  390. package/dist/shared/{hx-progress-bar-CJdwAeDg.js → hx-progress-bar-Bn3JEPUf.js} +25 -24
  391. package/dist/shared/hx-progress-bar-Bn3JEPUf.js.map +1 -0
  392. package/dist/shared/{hx-progress-ring-3zMwvrwD.js → hx-progress-ring-TwHyXeEp.js} +15 -14
  393. package/dist/shared/hx-progress-ring-TwHyXeEp.js.map +1 -0
  394. package/dist/shared/{hx-prose-BCtK7YL6.js → hx-prose-BThYcASV.js} +12 -12
  395. package/dist/shared/{hx-prose-BCtK7YL6.js.map → hx-prose-BThYcASV.js.map} +1 -1
  396. package/dist/shared/{hx-radio-QHrhL908.js → hx-radio-N8xgDd_5.js} +34 -33
  397. package/dist/shared/hx-radio-N8xgDd_5.js.map +1 -0
  398. package/dist/shared/{hx-rating-BO9kl9pb.js → hx-rating-i2FL1WUN.js} +14 -13
  399. package/dist/shared/hx-rating-i2FL1WUN.js.map +1 -0
  400. package/dist/shared/{hx-select-BuMvRDkY.js → hx-select-vgaBo1Ai.js} +26 -25
  401. package/dist/shared/hx-select-vgaBo1Ai.js.map +1 -0
  402. package/dist/shared/{hx-skeleton-LxkI0pxr.js → hx-skeleton-Cnieh5Uc.js} +14 -13
  403. package/dist/shared/hx-skeleton-Cnieh5Uc.js.map +1 -0
  404. package/dist/shared/{hx-slider-wcF_oyNJ.js → hx-slider-ydBamYhd.js} +58 -54
  405. package/dist/shared/hx-slider-ydBamYhd.js.map +1 -0
  406. package/dist/shared/{hx-spinner-BKjuCdZB.js → hx-spinner-DL5AYr16.js} +18 -17
  407. package/dist/shared/hx-spinner-DL5AYr16.js.map +1 -0
  408. package/dist/shared/{hx-split-button-CEkQqbF9.js → hx-split-button-BeMsmS6N.js} +58 -43
  409. package/dist/shared/hx-split-button-BeMsmS6N.js.map +1 -0
  410. package/dist/shared/{hx-split-panel-BymHlV5e.js → hx-split-panel-BVG1VWNT.js} +14 -10
  411. package/dist/shared/hx-split-panel-BVG1VWNT.js.map +1 -0
  412. package/dist/shared/{hx-stat-DTRyLF3a.js → hx-stat-WOcNV1Ry.js} +17 -16
  413. package/dist/shared/hx-stat-WOcNV1Ry.js.map +1 -0
  414. package/dist/shared/{hx-status-indicator-DIGRGM2G.js → hx-status-indicator-BlQyen43.js} +15 -14
  415. package/dist/shared/hx-status-indicator-BlQyen43.js.map +1 -0
  416. package/dist/shared/{hx-step-D15gtcLm.js → hx-step-DL3PbOzm.js} +61 -48
  417. package/dist/shared/hx-step-DL3PbOzm.js.map +1 -0
  418. package/dist/shared/{hx-structured-list-CqNbaEXg.js → hx-structured-list-m_-dMJbC.js} +18 -17
  419. package/dist/shared/hx-structured-list-m_-dMJbC.js.map +1 -0
  420. package/dist/shared/{hx-switch-CbunfMHW.js → hx-switch-Dougzsgp.js} +28 -19
  421. package/dist/shared/hx-switch-Dougzsgp.js.map +1 -0
  422. package/dist/shared/{hx-tab-panel-BIzKfW5i.js → hx-tab-panel-CbkO9VKu.js} +45 -44
  423. package/dist/shared/hx-tab-panel-CbkO9VKu.js.map +1 -0
  424. package/dist/shared/{hx-tag-CgnrNnte.js → hx-tag-CNSmdyaK.js} +63 -62
  425. package/dist/shared/hx-tag-CNSmdyaK.js.map +1 -0
  426. package/dist/shared/{hx-td-B737T0_c.js → hx-td-1zwTFLRw.js} +41 -40
  427. package/dist/shared/hx-td-1zwTFLRw.js.map +1 -0
  428. package/dist/shared/{hx-text-DMC2CPlL.js → hx-text-Bz_9fJ3J.js} +28 -25
  429. package/dist/shared/hx-text-Bz_9fJ3J.js.map +1 -0
  430. package/dist/shared/{hx-text-input-eSPVURd5.js → hx-text-input-B-caO5fI.js} +159 -80
  431. package/dist/shared/hx-text-input-B-caO5fI.js.map +1 -0
  432. package/dist/shared/{hx-textarea-C4DjRmo4.js → hx-textarea-D9O4U8cb.js} +109 -69
  433. package/dist/shared/hx-textarea-D9O4U8cb.js.map +1 -0
  434. package/dist/shared/{hx-time-picker-BtbHX7A4.js → hx-time-picker-m0z4nFB-.js} +41 -34
  435. package/dist/shared/hx-time-picker-m0z4nFB-.js.map +1 -0
  436. package/dist/shared/{hx-toggle-button-FOvw-ebx.js → hx-toggle-button-Dd8clXB4.js} +67 -53
  437. package/dist/shared/hx-toggle-button-Dd8clXB4.js.map +1 -0
  438. package/dist/shared/{hx-tooltip-BoZi2crX.js → hx-tooltip-nYOv9OLu.js} +18 -16
  439. package/dist/shared/hx-tooltip-nYOv9OLu.js.map +1 -0
  440. package/dist/shared/{hx-top-nav-Cd9zvv1B.js → hx-top-nav-CchPYaiV.js} +32 -28
  441. package/dist/shared/hx-top-nav-CchPYaiV.js.map +1 -0
  442. package/dist/shared/{hx-tree-item-A45WCiBu.js → hx-tree-item-DtMC3DTa.js} +35 -28
  443. package/dist/shared/hx-tree-item-DtMC3DTa.js.map +1 -0
  444. package/dist/shared/{toast-factory-M373dTcz.js → toast-factory-DvDRAh0l.js} +87 -71
  445. package/dist/shared/toast-factory-DvDRAh0l.js.map +1 -0
  446. package/dist/styles/forced-colors.d.ts +60 -0
  447. package/dist/styles/forced-colors.d.ts.map +1 -0
  448. package/figma-inventory.json +81 -81
  449. package/package.json +2 -2
  450. package/dist/shared/hx-accordion-Wt52OOZD.js.map +0 -1
  451. package/dist/shared/hx-action-bar-6UzmViHI.js.map +0 -1
  452. package/dist/shared/hx-alert-D7n94HwI.js.map +0 -1
  453. package/dist/shared/hx-avatar-iLYzu8MJ.js.map +0 -1
  454. package/dist/shared/hx-badge-CVCmMPyW.js.map +0 -1
  455. package/dist/shared/hx-banner-C_He7Tr4.js.map +0 -1
  456. package/dist/shared/hx-breadcrumb-item-BgG5RcmA.js.map +0 -1
  457. package/dist/shared/hx-button-CQZswjtQ.js.map +0 -1
  458. package/dist/shared/hx-button-group-BJOGWoMa.js.map +0 -1
  459. package/dist/shared/hx-card-Dy_FuLfS.js.map +0 -1
  460. package/dist/shared/hx-carousel-item-D_dCv61-.js.map +0 -1
  461. package/dist/shared/hx-checkbox-ZKjOF7_3.js.map +0 -1
  462. package/dist/shared/hx-checkbox-group-XjOBHLiP.js.map +0 -1
  463. package/dist/shared/hx-clinical-status-BS5lcddT.js.map +0 -1
  464. package/dist/shared/hx-code-snippet-DssubcYM.js.map +0 -1
  465. package/dist/shared/hx-color-picker-DBaKTVLr.js.map +0 -1
  466. package/dist/shared/hx-combobox-DLwnvHVd.js.map +0 -1
  467. package/dist/shared/hx-copy-button-8deNUdwP.js.map +0 -1
  468. package/dist/shared/hx-counter-CKfl_g8K.js.map +0 -1
  469. package/dist/shared/hx-data-table-CnLxo9PH.js.map +0 -1
  470. package/dist/shared/hx-date-picker-D7H7CsVH.js.map +0 -1
  471. package/dist/shared/hx-dialog-BW-jetzN.js.map +0 -1
  472. package/dist/shared/hx-divider-CvyUVcp-.js.map +0 -1
  473. package/dist/shared/hx-drawer-BT52I4tk.js.map +0 -1
  474. package/dist/shared/hx-dropdown-BpVpL6Dz.js.map +0 -1
  475. package/dist/shared/hx-field-label-DtJzb1r3.js.map +0 -1
  476. package/dist/shared/hx-file-upload-BNuepoGn.js.map +0 -1
  477. package/dist/shared/hx-form-ButQFt9A.js +0 -257
  478. package/dist/shared/hx-form-ButQFt9A.js.map +0 -1
  479. package/dist/shared/hx-help-text-Br3igJv5.js.map +0 -1
  480. package/dist/shared/hx-icon-CcyDPDYY.js.map +0 -1
  481. package/dist/shared/hx-icon-button-CqXH5Wwb.js.map +0 -1
  482. package/dist/shared/hx-image-2gt14zZd.js.map +0 -1
  483. package/dist/shared/hx-link-Bem4Gn68.js.map +0 -1
  484. package/dist/shared/hx-list-_9qVv02L.js.map +0 -1
  485. package/dist/shared/hx-menu-divider-DsHWyPHy.js.map +0 -1
  486. package/dist/shared/hx-meter-TbROk-dw.js.map +0 -1
  487. package/dist/shared/hx-nav-BcYDmjf7.js.map +0 -1
  488. package/dist/shared/hx-nav-item-BTMMQv6c.js.map +0 -1
  489. package/dist/shared/hx-number-input-l6jeaGWW.js.map +0 -1
  490. package/dist/shared/hx-overflow-menu-DJ4qpgmi.js.map +0 -1
  491. package/dist/shared/hx-pagination-5FeVFIve.js.map +0 -1
  492. package/dist/shared/hx-patient-banner-uE6gqLpT.js.map +0 -1
  493. package/dist/shared/hx-phi-field-DxeWcRm9.js.map +0 -1
  494. package/dist/shared/hx-popover-C05QcD9m.js.map +0 -1
  495. package/dist/shared/hx-popup-DZXpsJ1R.js.map +0 -1
  496. package/dist/shared/hx-progress-bar-CJdwAeDg.js.map +0 -1
  497. package/dist/shared/hx-progress-ring-3zMwvrwD.js.map +0 -1
  498. package/dist/shared/hx-radio-QHrhL908.js.map +0 -1
  499. package/dist/shared/hx-rating-BO9kl9pb.js.map +0 -1
  500. package/dist/shared/hx-select-BuMvRDkY.js.map +0 -1
  501. package/dist/shared/hx-skeleton-LxkI0pxr.js.map +0 -1
  502. package/dist/shared/hx-slider-wcF_oyNJ.js.map +0 -1
  503. package/dist/shared/hx-spinner-BKjuCdZB.js.map +0 -1
  504. package/dist/shared/hx-split-button-CEkQqbF9.js.map +0 -1
  505. package/dist/shared/hx-split-panel-BymHlV5e.js.map +0 -1
  506. package/dist/shared/hx-stat-DTRyLF3a.js.map +0 -1
  507. package/dist/shared/hx-status-indicator-DIGRGM2G.js.map +0 -1
  508. package/dist/shared/hx-step-D15gtcLm.js.map +0 -1
  509. package/dist/shared/hx-structured-list-CqNbaEXg.js.map +0 -1
  510. package/dist/shared/hx-switch-CbunfMHW.js.map +0 -1
  511. package/dist/shared/hx-tab-panel-BIzKfW5i.js.map +0 -1
  512. package/dist/shared/hx-tag-CgnrNnte.js.map +0 -1
  513. package/dist/shared/hx-td-B737T0_c.js.map +0 -1
  514. package/dist/shared/hx-text-DMC2CPlL.js.map +0 -1
  515. package/dist/shared/hx-text-input-eSPVURd5.js.map +0 -1
  516. package/dist/shared/hx-textarea-C4DjRmo4.js.map +0 -1
  517. package/dist/shared/hx-time-picker-BtbHX7A4.js.map +0 -1
  518. package/dist/shared/hx-toggle-button-FOvw-ebx.js.map +0 -1
  519. package/dist/shared/hx-tooltip-BoZi2crX.js.map +0 -1
  520. package/dist/shared/hx-top-nav-Cd9zvv1B.js.map +0 -1
  521. package/dist/shared/hx-tree-item-A45WCiBu.js.map +0 -1
  522. package/dist/shared/toast-factory-M373dTcz.js.map +0 -1
package/dist/css/helix-all.css CHANGED
@@ -73,16 +73,16 @@
73
73
  background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
74
74
  border: var(
75
75
  --hx-action-bar-border,
76
- var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0)
76
+ var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)
77
77
  );
78
- border-radius: var(--hx-border-radius-md, 0.375rem);
78
+ border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
79
79
  }
80
80
 
81
81
  /* ─── Variant: filled ─── */
82
82
 
83
83
  .base--filled {
84
- background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f8fafc));
85
- border-radius: var(--hx-border-radius-md, 0.375rem);
84
+ background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));
85
+ border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
86
86
  }
87
87
 
88
88
  /* ─── Size modifiers ─── */
@@ -187,10 +187,10 @@
187
187
  gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));
188
188
  padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));
189
189
  border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid
190
- var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
190
+ var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
191
191
  border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));
192
- background-color: var(--hx-alert-bg, var(--hx-color-info-50, #f0f9ff));
193
- color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
192
+ background-color: var(--hx-alert-bg, var(--hx-color-info-50, #eff6fe));
193
+ color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
194
194
  font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));
195
195
  font-size: var(--hx-font-size-sm, 0.875rem);
196
196
  line-height: var(--hx-line-height-normal, 1.5);
@@ -203,7 +203,7 @@
203
203
  .alert--accent {
204
204
  border-width: 0;
205
205
  border-inline-start: var(--hx-alert-accent-width, 4px) solid
206
- var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
206
+ var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
207
207
  border-radius: 0;
208
208
  }
209
209
 
@@ -230,7 +230,7 @@
230
230
  display: flex;
231
231
  align-items: center;
232
232
  flex-shrink: 0;
233
- color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0284c7));
233
+ color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));
234
234
  }
235
235
 
236
236
  .alert__icon svg {
@@ -290,7 +290,7 @@
290
290
  border: none;
291
291
  border-radius: var(--hx-border-radius-sm, 0.25rem);
292
292
  background: transparent;
293
- color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
293
+ color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
294
294
  cursor: pointer;
295
295
  font-size: var(--hx-font-size-md, 1rem);
296
296
  line-height: 1;
@@ -309,7 +309,10 @@
309
309
 
310
310
  .alert__close-button:focus-visible {
311
311
  outline: var(--hx-focus-ring-width, 2px) solid
312
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
312
+ var(
313
+ --hx-alert-close-btn-focus-ring-color,
314
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
315
+ );
313
316
  outline-offset: var(--hx-focus-ring-offset, 2px);
314
317
  opacity: 1;
315
318
  }
@@ -330,40 +333,41 @@
330
333
 
331
334
  :host([variant='info']) .alert,
332
335
  :host(:not([variant])) .alert {
333
- --hx-alert-bg: var(--hx-color-info-50, #f0f9ff);
334
- --hx-alert-border-color: var(--hx-color-info-200, #bae6fd);
335
- --hx-alert-color: var(--hx-color-info-800, #0c4a6e);
336
- --hx-alert-icon-color: var(--hx-color-info-500, #0284c7);
336
+ --hx-alert-bg: var(--hx-color-info-50, #eff6fe);
337
+ --hx-alert-border-color: var(--hx-color-info-200, #bedcfc);
338
+ --hx-alert-color: var(--hx-color-info-800, #064172);
339
+ --hx-alert-icon-color: var(--hx-color-info-500, #0c8beb);
337
340
  }
338
341
 
339
342
  /* ─── Variant: success ─── */
340
343
 
341
344
  :host([variant='success']) .alert {
342
- --hx-alert-bg: var(--hx-color-success-50, #f0fdf4);
343
- --hx-alert-border-color: var(--hx-color-success-200, #bbf7d0);
344
- --hx-alert-color: var(--hx-color-success-800, #14532d);
345
- --hx-alert-icon-color: var(--hx-color-success-500, #16a34a);
345
+ --hx-alert-bg: var(--hx-color-success-50, #eafaec);
346
+ --hx-alert-border-color: var(--hx-color-success-200, #bae6c2);
347
+ --hx-alert-color: var(--hx-color-success-800, #0b4d23);
348
+ --hx-alert-icon-color: var(--hx-color-success-500, #3b9e58);
346
349
  }
347
350
 
348
351
  /* ─── Variant: warning ─── */
349
352
 
350
353
  :host([variant='warning']) .alert {
351
- --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);
352
- --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);
353
- --hx-alert-color: var(--hx-color-warning-800, #78350f);
354
- --hx-alert-icon-color: var(--hx-color-warning-500, #d97706);
354
+ --hx-alert-bg: var(--hx-color-warning-50, #fff3ea);
355
+ --hx-alert-border-color: var(--hx-color-warning-200, #facfae);
356
+ --hx-alert-color: var(--hx-color-warning-800, #603301);
357
+ --hx-alert-icon-color: var(--hx-color-warning-500, #c2711c);
355
358
  }
356
359
 
357
360
  /* ─── Variant: error ─── */
358
361
 
359
362
  :host([variant='error']) .alert {
360
- --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
361
- --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
362
- --hx-alert-color: var(--hx-color-error-800, #7f1d1d);
363
- --hx-alert-icon-color: var(--hx-color-error-500, #dc2626);
363
+ --hx-alert-bg: var(--hx-color-error-50, #fff2f0);
364
+ --hx-alert-border-color: var(--hx-color-error-200, #fccbc4);
365
+ --hx-alert-color: var(--hx-color-error-800, #7a090a);
366
+ --hx-alert-icon-color: var(--hx-color-error-500, #e5493e);
364
367
  }
365
368
 
366
369
  /* ─── Forced Colors (Windows High Contrast) ─── */
370
+ /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
367
371
 
368
372
  @media (forced-colors: active) {
369
373
  .alert {
@@ -406,8 +410,8 @@
406
410
  overflow: hidden;
407
411
  width: var(--hx-avatar-size);
408
412
  height: var(--hx-avatar-size);
409
- background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));
410
- color: var(--hx-avatar-color, var(--hx-color-primary-700));
413
+ background-color: var(--hx-avatar-bg, var(--hx-color-primary-100, #dbf0f0));
414
+ color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
411
415
  border-radius: var(--hx-avatar-border-radius);
412
416
  flex-shrink: 0;
413
417
  }
@@ -475,7 +479,7 @@
475
479
  .avatar__fallback-icon {
476
480
  width: 60%;
477
481
  height: 60%;
478
- color: var(--hx-avatar-color, var(--hx-color-primary-700));
482
+ color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
479
483
  }
480
484
 
481
485
  /* ─── Badge Slot ─── */
@@ -528,8 +532,8 @@
528
532
  justify-content: center;
529
533
  gap: var(--hx-space-1, 0.25rem);
530
534
  border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
531
- background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));
532
- color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));
535
+ background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));
536
+ color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));
533
537
  font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
534
538
  font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
535
539
  line-height: var(--hx-line-height-tight, 1.25);
@@ -561,65 +565,65 @@
561
565
  /* ─── Style Variants ─── */
562
566
 
563
567
  .badge--primary {
564
- --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
565
- --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
568
+ --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));
569
+ --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));
566
570
  --hx-badge-pulse-color-internal: var(
567
571
  --hx-badge-pulse-color,
568
- var(--hx-color-primary-500, #2563eb)
572
+ var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))
569
573
  );
570
574
  }
571
575
 
572
576
  .badge--secondary {
573
- --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9));
574
- --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #334155));
577
+ --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9));
578
+ --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #313e4b));
575
579
  --hx-badge-pulse-color-internal: var(
576
580
  --hx-badge-pulse-color,
577
- var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9))
581
+ var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9))
578
582
  );
579
583
  }
580
584
 
581
585
  .badge--success {
582
- --hx-badge-bg: var(--hx-color-success-700, #166534);
583
- --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
586
+ --hx-badge-bg: var(--hx-badge-success-bg, var(--hx-color-success-700, #146831));
587
+ --hx-badge-color: var(--hx-badge-success-color, var(--hx-color-neutral-0, #ffffff));
584
588
  --hx-badge-pulse-color-internal: var(
585
589
  --hx-badge-pulse-color,
586
- var(--hx-color-success-700, #166534)
590
+ var(--hx-badge-success-bg, var(--hx-color-success-700, #146831))
587
591
  );
588
592
  }
589
593
 
590
594
  .badge--warning {
591
- --hx-badge-bg: var(--hx-color-warning-500, #d97706);
592
- --hx-badge-color: var(--hx-color-neutral-900, #0f172a);
595
+ --hx-badge-bg: var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c));
596
+ --hx-badge-color: var(--hx-badge-warning-color, var(--hx-color-neutral-900, #0d1825));
593
597
  --hx-badge-pulse-color-internal: var(
594
598
  --hx-badge-pulse-color,
595
- var(--hx-color-warning-500, #d97706)
599
+ var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c))
596
600
  );
597
601
  }
598
602
 
599
603
  .badge--error {
600
- --hx-badge-bg: var(--hx-color-error-500, #dc2626);
601
- --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
604
+ --hx-badge-bg: var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e));
605
+ --hx-badge-color: var(--hx-badge-error-color, var(--hx-color-text-on-error, #0d1825));
602
606
  --hx-badge-pulse-color-internal: var(
603
607
  --hx-badge-pulse-color,
604
- var(--hx-color-error-500, #dc2626)
608
+ var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e))
605
609
  );
606
610
  }
607
611
 
608
612
  .badge--neutral {
609
- --hx-badge-bg: var(--hx-color-neutral-200, #e2e8f0);
610
- --hx-badge-color: var(--hx-color-neutral-700, #334155);
613
+ --hx-badge-bg: var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5));
614
+ --hx-badge-color: var(--hx-badge-neutral-color, var(--hx-color-neutral-700, #313e4b));
611
615
  --hx-badge-pulse-color-internal: var(
612
616
  --hx-badge-pulse-color,
613
- var(--hx-color-neutral-200, #e2e8f0)
617
+ var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5))
614
618
  );
615
619
  }
616
620
 
617
621
  .badge--info {
618
- --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #075985));
622
+ --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997));
619
623
  --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
620
624
  --hx-badge-pulse-color-internal: var(
621
625
  --hx-badge-pulse-color,
622
- var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
626
+ var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997))
623
627
  );
624
628
  }
625
629
 
@@ -772,10 +776,10 @@
772
776
  align-items: center;
773
777
  gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));
774
778
  padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
775
- background-color: var(--hx-banner-bg, var(--hx-color-info-50, #f0f9ff));
776
- color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
779
+ background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));
780
+ color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
777
781
  border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid
778
- var(--hx-banner-border-color, var(--hx-color-info-200, #bae6fd));
782
+ var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));
779
783
  font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));
780
784
  font-size: var(--hx-font-size-sm, 0.875rem);
781
785
  line-height: var(--hx-line-height-normal, 1.5);
@@ -788,7 +792,7 @@
788
792
  display: flex;
789
793
  align-items: center;
790
794
  flex-shrink: 0;
791
- color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0284c7));
795
+ color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));
792
796
  }
793
797
 
794
798
  .banner__icon svg {
@@ -810,7 +814,7 @@
810
814
  display: inline-flex;
811
815
  align-items: center;
812
816
  flex-shrink: 0;
813
- color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e)));
817
+ color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));
814
818
  font-weight: var(--hx-font-weight-semibold, 600);
815
819
  text-decoration: underline;
816
820
  text-underline-offset: 2px;
@@ -828,7 +832,10 @@
828
832
 
829
833
  .banner__action:focus-visible {
830
834
  outline: var(--hx-focus-ring-width, 2px) solid
831
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
835
+ var(
836
+ --hx-banner-action-focus-ring-color,
837
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
838
+ );
832
839
  outline-offset: var(--hx-focus-ring-offset, 2px);
833
840
  border-radius: var(--hx-border-radius-sm, 0.25rem);
834
841
  }
@@ -850,7 +857,7 @@
850
857
  border: none;
851
858
  border-radius: var(--hx-border-radius-sm, 0.25rem);
852
859
  background: transparent;
853
- color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
860
+ color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
854
861
  cursor: pointer;
855
862
  font-size: var(--hx-font-size-md, 1rem);
856
863
  line-height: 1;
@@ -869,7 +876,10 @@
869
876
 
870
877
  .banner__close-button:focus-visible {
871
878
  outline: var(--hx-focus-ring-width, 2px) solid
872
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
879
+ var(
880
+ --hx-banner-close-btn-focus-ring-color,
881
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
882
+ );
873
883
  outline-offset: var(--hx-focus-ring-offset, 2px);
874
884
  opacity: 1;
875
885
  }
@@ -884,37 +894,37 @@
884
894
 
885
895
  :host([variant='info']) .banner,
886
896
  :host(:not([variant])) .banner {
887
- --hx-banner-bg: var(--hx-color-info-50, #f0f9ff);
888
- --hx-banner-border-color: var(--hx-color-info-200, #bae6fd);
889
- --hx-banner-color: var(--hx-color-info-800, #0c4a6e);
890
- --hx-banner-icon-color: var(--hx-color-info-500, #0284c7);
897
+ --hx-banner-bg: var(--hx-color-info-50, #eff6fe);
898
+ --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);
899
+ --hx-banner-color: var(--hx-color-info-800, #064172);
900
+ --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);
891
901
  }
892
902
 
893
903
  /* ─── Variant: success ─── */
894
904
 
895
905
  :host([variant='success']) .banner {
896
- --hx-banner-bg: var(--hx-color-success-50, #f0fdf4);
897
- --hx-banner-border-color: var(--hx-color-success-200, #bbf7d0);
898
- --hx-banner-color: var(--hx-color-success-800, #14532d);
899
- --hx-banner-icon-color: var(--hx-color-success-500, #16a34a);
906
+ --hx-banner-bg: var(--hx-color-success-50, #eafaec);
907
+ --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);
908
+ --hx-banner-color: var(--hx-color-success-800, #0b4d23);
909
+ --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);
900
910
  }
901
911
 
902
912
  /* ─── Variant: warning ─── */
903
913
 
904
914
  :host([variant='warning']) .banner {
905
- --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);
906
- --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);
907
- --hx-banner-color: var(--hx-color-warning-800, #78350f);
908
- --hx-banner-icon-color: var(--hx-color-warning-500, #d97706);
915
+ --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);
916
+ --hx-banner-border-color: var(--hx-color-warning-200, #facfae);
917
+ --hx-banner-color: var(--hx-color-warning-800, #603301);
918
+ --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);
909
919
  }
910
920
 
911
921
  /* ─── Variant: error ─── */
912
922
 
913
923
  :host([variant='error']) .banner {
914
- --hx-banner-bg: var(--hx-color-error-50, #fef2f2);
915
- --hx-banner-border-color: var(--hx-color-error-200, #fecaca);
916
- --hx-banner-color: var(--hx-color-error-800, #7f1d1d);
917
- --hx-banner-icon-color: var(--hx-color-error-500, #dc2626);
924
+ --hx-banner-bg: var(--hx-color-error-50, #fff2f0);
925
+ --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);
926
+ --hx-banner-color: var(--hx-color-error-800, #7a090a);
927
+ --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);
918
928
  }
919
929
 
920
930
  /* ─── Position: fixed ─── */
@@ -935,6 +945,7 @@
935
945
  }
936
946
 
937
947
  /* ─── Forced Colors (Windows High Contrast) ─── */
948
+ /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
938
949
 
939
950
  @media (forced-colors: active) {
940
951
  .banner {
@@ -1042,7 +1053,7 @@
1042
1053
  gap: var(--hx-space-2, 0.5rem);
1043
1054
  border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);
1044
1055
  border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));
1045
- background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));
1056
+ background-color: var(--hx-button-bg, var(--hx-color-primary-500, #429797));
1046
1057
  color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));
1047
1058
  font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));
1048
1059
  font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -1061,7 +1072,10 @@
1061
1072
 
1062
1073
  .button:focus-visible {
1063
1074
  outline: var(--hx-focus-ring-width, 2px) solid
1064
- var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
1075
+ var(
1076
+ --hx-button-focus-ring-color,
1077
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
1078
+ );
1065
1079
  outline-offset: var(--hx-focus-ring-offset, 2px);
1066
1080
  }
1067
1081
 
@@ -1099,63 +1113,77 @@
1099
1113
  /* ─── Style Variants ─── */
1100
1114
 
1101
1115
  .button--primary {
1102
- --hx-button-bg: var(--hx-color-primary-500);
1103
- --hx-button-color: var(--hx-color-text-on-primary);
1116
+ --hx-button-bg: var(--hx-color-primary-500, #429797);
1117
+ --hx-button-color: var(--hx-color-text-on-primary, #ffffff);
1104
1118
  --hx-button-border-color: transparent;
1105
1119
  }
1106
1120
 
1107
1121
  .button--secondary {
1108
1122
  --hx-button-bg: transparent;
1109
- --hx-button-color: var(--hx-color-primary-500);
1110
- --hx-button-border-color: var(--hx-color-primary-500);
1123
+ /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
1124
+ primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
1125
+ --hx-button-color: var(--hx-color-primary-600, #0f7078);
1126
+ --hx-button-border-color: var(--hx-color-primary-600, #0f7078);
1111
1127
  }
1112
1128
 
1113
1129
  .button--secondary:hover {
1114
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1130
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
1115
1131
  }
1116
1132
 
1117
1133
  .button--tertiary {
1118
- --hx-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
1119
- --hx-button-color: var(--hx-color-text-primary, #0f172a);
1134
+ --hx-button-bg: var(--hx-color-surface-sunken, #ebeee9);
1135
+ --hx-button-color: var(--hx-color-text-primary, #0d1825);
1120
1136
  --hx-button-border-color: transparent;
1121
1137
  }
1122
1138
 
1123
1139
  .button--tertiary:hover {
1124
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1140
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
1125
1141
  }
1126
1142
 
1127
1143
  .button--danger {
1128
- --hx-button-bg: var(--hx-color-error-500);
1129
- --hx-button-color: var(--hx-color-text-on-error);
1144
+ --hx-button-bg: var(--hx-color-error-500, #e5493e);
1145
+ --hx-button-color: var(--hx-color-text-on-error, #ffffff);
1130
1146
  --hx-button-border-color: transparent;
1131
1147
  }
1132
1148
 
1149
+ /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).
1150
+ error-600 (#C92A2A) drops that to 2.25:1 — AA fail. Hold fg at neutral-0
1151
+ directly so darker hover fills stay legible. Mirrors hx-toast precedent
1152
+ (commit 300e21ab0). */
1133
1153
  .button--danger:hover {
1134
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));
1154
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600, #c92a2a));
1155
+ --hx-button-color: var(--hx-color-neutral-0, #ffffff);
1135
1156
  }
1136
1157
 
1137
1158
  .button--ghost {
1138
1159
  --hx-button-bg: transparent;
1139
- --hx-button-color: var(--hx-color-primary-500);
1160
+ /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
1161
+ primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
1162
+ --hx-button-color: var(--hx-color-primary-600, #0f7078);
1140
1163
  --hx-button-border-color: transparent;
1141
1164
  }
1142
1165
 
1143
1166
  .button--ghost:hover {
1144
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1167
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
1145
1168
  }
1146
1169
 
1147
1170
  .button--outline {
1148
1171
  --hx-button-bg: transparent;
1149
- --hx-button-color: var(--hx-color-text-primary, #0f172a);
1150
- --hx-button-border-color: var(--hx-color-border-strong, #94a3b8);
1172
+ --hx-button-color: var(--hx-color-text-primary, #0d1825);
1173
+ --hx-button-border-color: var(--hx-color-border-strong, #8e9c98);
1151
1174
  }
1152
1175
 
1153
1176
  .button--outline:hover {
1154
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1177
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
1155
1178
  }
1156
1179
 
1180
+ /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.
1181
+ primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. Pin fg at
1182
+ neutral-0 for the darker hover fill. Mirrors hx-toast precedent
1183
+ (commit 300e21ab0). */
1157
1184
  .button--primary:hover {
1158
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600));
1185
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600, #0f7078));
1186
+ --hx-button-color: var(--hx-color-neutral-0, #ffffff);
1159
1187
  }
1160
1188
 
1161
1189
  /* ─── Disabled ─── */
@@ -1201,7 +1229,7 @@
1201
1229
 
1202
1230
  /* Override text color and filter-based hover/active for all variants */
1203
1231
  :host([inverted]) .button {
1204
- color: var(--hx-button-inverted-color, var(--hx-color-neutral-0));
1232
+ color: var(--hx-button-inverted-color, var(--hx-color-neutral-0, #ffffff));
1205
1233
  filter: none;
1206
1234
  }
1207
1235
 
@@ -1222,7 +1250,7 @@
1222
1250
 
1223
1251
  /* Primary inverted — slight transparent white overlay on hover */
1224
1252
  :host([inverted]) .button--primary:hover {
1225
- --hx-button-bg: var(--hx-color-primary-400, #60a5fa);
1253
+ --hx-button-bg: var(--hx-color-primary-400, #6ab1b1);
1226
1254
  }
1227
1255
 
1228
1256
  /* Secondary inverted — white border and text */
@@ -1336,33 +1364,43 @@
1336
1364
  /* ─── No Double Borders: Horizontal ─── */
1337
1365
 
1338
1366
  .group--horizontal ::slotted(*:not(:first-child)) {
1339
- margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));
1367
+ margin-inline-start: var(
1368
+ --hx-button-group-divider-offset,
1369
+ calc(-1 * var(--hx-border-width-thin, 1px))
1370
+ );
1340
1371
  }
1341
1372
 
1342
1373
  /* ─── No Double Borders: Vertical ─── */
1343
1374
 
1344
1375
  .group--vertical ::slotted(*:not(:first-child)) {
1345
- margin-top: calc(-1 * var(--hx-border-width-thin, 1px));
1376
+ margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));
1346
1377
  }
1347
1378
 
1348
1379
  /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */
1349
1380
 
1350
1381
  .group--horizontal ::slotted(:only-child) {
1351
- --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
1382
+ --hx-button-border-radius: var(
1383
+ --hx-button-group-border-radius,
1384
+ var(--hx-border-radius-md, 0.375rem)
1385
+ );
1352
1386
  }
1353
1387
 
1354
1388
  /* ─── Border Radius: Horizontal — First child keeps left corners ─── */
1355
1389
 
1356
1390
  .group--horizontal ::slotted(:first-child:not(:only-child)) {
1357
- --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0
1358
- var(--hx-border-radius-md, 0.375rem);
1391
+ --hx-button-border-radius: var(
1392
+ --hx-button-group-border-radius,
1393
+ var(--hx-border-radius-md, 0.375rem)
1394
+ )
1395
+ 0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
1359
1396
  }
1360
1397
 
1361
1398
  /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */
1362
1399
 
1363
1400
  .group--horizontal ::slotted(:last-child:not(:only-child)) {
1364
- --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)
1365
- var(--hx-border-radius-md, 0.375rem) 0;
1401
+ --hx-button-border-radius: 0
1402
+ var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
1403
+ var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
1366
1404
  }
1367
1405
 
1368
1406
  /* ─── Border Radius: Horizontal — Middle children have no radius ─── */
@@ -1374,21 +1412,28 @@
1374
1412
  /* ─── Border Radius: Vertical — Single child keeps all corners ─── */
1375
1413
 
1376
1414
  .group--vertical ::slotted(:only-child) {
1377
- --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
1415
+ --hx-button-border-radius: var(
1416
+ --hx-button-group-border-radius,
1417
+ var(--hx-border-radius-md, 0.375rem)
1418
+ );
1378
1419
  }
1379
1420
 
1380
1421
  /* ─── Border Radius: Vertical — First child keeps top corners ─── */
1381
1422
 
1382
1423
  .group--vertical ::slotted(:first-child:not(:only-child)) {
1383
- --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)
1384
- var(--hx-border-radius-md, 0.375rem) 0 0;
1424
+ --hx-button-border-radius: var(
1425
+ --hx-button-group-border-radius,
1426
+ var(--hx-border-radius-md, 0.375rem)
1427
+ )
1428
+ var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;
1385
1429
  }
1386
1430
 
1387
1431
  /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */
1388
1432
 
1389
1433
  .group--vertical ::slotted(:last-child:not(:only-child)) {
1390
- --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)
1391
- var(--hx-border-radius-md, 0.375rem);
1434
+ --hx-button-border-radius: 0 0
1435
+ var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
1436
+ var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
1392
1437
  }
1393
1438
 
1394
1439
  /* ─── Border Radius: Vertical — Middle children have no radius ─── */
@@ -1400,7 +1445,7 @@
1400
1445
  /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
1401
1446
 
1402
1447
  .group ::slotted(:focus-within) {
1403
- z-index: 1;
1448
+ z-index: var(--hx-button-group-focus-z-index, 1);
1404
1449
  position: relative;
1405
1450
  }
1406
1451
 
@@ -1413,7 +1458,7 @@
1413
1458
  * outline from hx-button's own forced-colors block is fully visible.
1414
1459
  */
1415
1460
  .group ::slotted(:focus-within) {
1416
- z-index: 2;
1461
+ z-index: var(--hx-button-group-focus-z-index-hc, 2);
1417
1462
  }
1418
1463
  }
1419
1464
  /* ── hx-card ── */
@@ -1428,9 +1473,9 @@
1428
1473
  flex-direction: column;
1429
1474
  gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
1430
1475
  background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
1431
- color: var(--hx-card-color, var(--hx-color-text-strong, #1e293b));
1476
+ color: var(--hx-card-color, var(--hx-color-text-strong, #202b39));
1432
1477
  border: var(--hx-border-width-thin, 1px) solid
1433
- var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
1478
+ var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));
1434
1479
  border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
1435
1480
  overflow: hidden;
1436
1481
  font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
@@ -1446,11 +1491,14 @@
1446
1491
  }
1447
1492
 
1448
1493
  .card--raised {
1449
- box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
1494
+ box-shadow: var(--hx-card-shadow, var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)));
1450
1495
  }
1451
1496
 
1452
1497
  .card--floating {
1453
- box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));
1498
+ box-shadow: var(
1499
+ --hx-card-shadow-floating,
1500
+ var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1))
1501
+ );
1454
1502
  }
1455
1503
 
1456
1504
  /* ─── Style Variants ─── */
@@ -1460,8 +1508,8 @@
1460
1508
  }
1461
1509
 
1462
1510
  .card--featured {
1463
- border-color: var(--hx-color-primary-500, #2563eb);
1464
- border-width: var(--hx-border-width-medium, 2px);
1511
+ border-color: var(--hx-card-featured-border-color, var(--hx-color-primary-500, #429797));
1512
+ border-width: var(--hx-card-featured-border-width, var(--hx-border-width-medium, 2px));
1465
1513
  }
1466
1514
 
1467
1515
  .card--compact .card__body {
@@ -1493,13 +1541,16 @@
1493
1541
  }
1494
1542
 
1495
1543
  .card--interactive:hover {
1496
- box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
1544
+ box-shadow: var(--hx-card-shadow-hover, var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)));
1497
1545
  transform: translateY(var(--hx-transform-lift-md, -2px));
1498
1546
  }
1499
1547
 
1500
1548
  .card--interactive:focus-visible {
1501
1549
  outline: var(--hx-focus-ring-width, 2px) solid
1502
- var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
1550
+ var(
1551
+ --hx-card-focus-ring-color,
1552
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
1553
+ );
1503
1554
  outline-offset: var(--hx-focus-ring-offset, 2px);
1504
1555
  }
1505
1556
 
@@ -1556,7 +1607,14 @@
1556
1607
  flex: 1;
1557
1608
  font-size: var(--hx-font-size-md, 1rem);
1558
1609
  line-height: var(--hx-line-height-normal, 1.5);
1559
- color: var(--hx-card-color, var(--hx-color-text-secondary, #475569));
1610
+ /*
1611
+ * Body color cascades: component-tier --hx-card-body-color overrides
1612
+ * the host-tier --hx-card-color, which falls back to text-secondary.
1613
+ * Preserves the propagation contract: setting --hx-card-color on the
1614
+ * host flows into the body slot (and through to slotted light-DOM
1615
+ * descendants via flat-tree inheritance).
1616
+ */
1617
+ color: var(--hx-card-body-color, var(--hx-card-color, var(--hx-color-text-secondary, #313e4b)));
1560
1618
  }
1561
1619
 
1562
1620
  .card__footer {
@@ -1574,11 +1632,12 @@
1574
1632
  padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
1575
1633
  padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
1576
1634
  border-top: var(--hx-border-width-thin, 1px) solid
1577
- var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
1635
+ var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));
1578
1636
  margin-top: auto;
1579
1637
  }
1580
1638
 
1581
1639
  /* ─── Forced Colors (Windows High Contrast) ─── */
1640
+ /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
1582
1641
 
1583
1642
  @media (forced-colors: active) {
1584
1643
  .card {
@@ -1629,10 +1688,11 @@
1629
1688
  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
1630
1689
  min-width: var(--hx-touch-target-min, 2.75rem);
1631
1690
  min-height: var(--hx-touch-target-min, 2.75rem);
1632
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
1691
+ border: var(--hx-border-width-thin, 1px) solid
1692
+ var(--hx-carousel-nav-btn-border-color, var(--hx-color-neutral-200, #d6dbd5));
1633
1693
  border-radius: var(--hx-border-radius-full, 9999px);
1634
- background: var(--hx-color-neutral-0, #ffffff);
1635
- color: var(--hx-color-neutral-700, #334155);
1694
+ background: var(--hx-carousel-nav-btn-bg, var(--hx-color-neutral-0, #ffffff));
1695
+ color: var(--hx-carousel-nav-btn-color, var(--hx-color-neutral-700, #313e4b));
1636
1696
  cursor: pointer;
1637
1697
  padding: 0;
1638
1698
  transition:
@@ -1643,8 +1703,11 @@
1643
1703
  }
1644
1704
 
1645
1705
  .nav-btn:hover:not([disabled]) {
1646
- background: var(--hx-color-neutral-50, #f8fafc);
1647
- border-color: var(--hx-color-neutral-400, #94a3b8);
1706
+ background: var(--hx-carousel-nav-btn-hover-bg, var(--hx-color-neutral-50, #f5f8f3));
1707
+ border-color: var(
1708
+ --hx-carousel-nav-btn-hover-border-color,
1709
+ var(--hx-color-neutral-400, #8e9c98)
1710
+ );
1648
1711
  }
1649
1712
 
1650
1713
  .nav-btn:focus-visible {
@@ -1677,7 +1740,7 @@
1677
1740
  border: var(--hx-border-width-thin, 1px) solid transparent;
1678
1741
  border-radius: var(--hx-border-radius-md, 0.375rem);
1679
1742
  background: transparent;
1680
- color: var(--hx-color-neutral-500, #64748b);
1743
+ color: var(--hx-carousel-play-pause-color, var(--hx-color-neutral-500, #66787b));
1681
1744
  cursor: pointer;
1682
1745
  padding: 0;
1683
1746
  font-size: var(--hx-font-size-sm, 0.875rem);
@@ -1686,7 +1749,7 @@
1686
1749
  }
1687
1750
 
1688
1751
  .play-pause-btn:hover {
1689
- background: var(--hx-color-neutral-100, #f1f5f9);
1752
+ background: var(--hx-carousel-play-pause-hover-bg, var(--hx-color-neutral-100, #ebeee9));
1690
1753
  }
1691
1754
 
1692
1755
  .play-pause-btn:focus-visible {
@@ -1749,7 +1812,7 @@
1749
1812
  width: var(--hx-carousel-pagination-dot-size, 0.5rem);
1750
1813
  height: var(--hx-carousel-pagination-dot-size, 0.5rem);
1751
1814
  border-radius: var(--hx-border-radius-full, 9999px);
1752
- background: var(--hx-color-neutral-300, #cbd5e1);
1815
+ background: var(--hx-carousel-pagination-dot-bg, var(--hx-color-neutral-300, #b6bfb9));
1753
1816
  transition:
1754
1817
  background-color var(--hx-transition-fast, 150ms ease),
1755
1818
  transform var(--hx-transition-fast, 150ms ease);
@@ -1757,7 +1820,7 @@
1757
1820
 
1758
1821
  .pagination-item[aria-current='true'] .pagination-dot,
1759
1822
  .pagination-item.is-active .pagination-dot {
1760
- background: var(--hx-color-primary-600, #1d4ed8);
1823
+ background: var(--hx-carousel-pagination-dot-active-bg, var(--hx-color-primary-600, #0f7078));
1761
1824
  transform: scale(1.25);
1762
1825
  }
1763
1826
 
@@ -1884,7 +1947,7 @@
1884
1947
  width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
1885
1948
  height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
1886
1949
  border: var(--hx-border-width-medium, 2px) solid
1887
- var(--hx-checkbox-border-color, var(--hx-color-border-strong, #cbd5e1));
1950
+ var(--hx-checkbox-border-color, var(--hx-color-border-strong, #8e9c98));
1888
1951
  border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
1889
1952
  background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
1890
1953
  transition:
@@ -1897,38 +1960,38 @@
1897
1960
  /* ─── Focus Ring ─── */
1898
1961
 
1899
1962
  .checkbox__input:focus-visible ~ .checkbox__box {
1900
- outline: var(--hx-focus-ring-width, 2px) solid
1963
+ outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
1901
1964
  var(
1902
1965
  --hx-checkbox-focus-ring-color,
1903
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
1966
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
1904
1967
  );
1905
- outline-offset: var(--hx-focus-ring-offset, 2px);
1968
+ outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
1906
1969
  }
1907
1970
 
1908
1971
  /* ─── Checked State ─── */
1909
1972
 
1910
1973
  .checkbox--checked .checkbox__box {
1911
- background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
1912
- border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
1974
+ background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
1975
+ border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
1913
1976
  }
1914
1977
 
1915
1978
  /* ─── Indeterminate State ─── */
1916
1979
 
1917
1980
  .checkbox--indeterminate .checkbox__box {
1918
- background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
1919
- border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
1981
+ background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
1982
+ border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
1920
1983
  }
1921
1984
 
1922
1985
  /* ─── Error State ─── */
1923
1986
 
1924
1987
  .checkbox--error .checkbox__box {
1925
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
1988
+ border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
1926
1989
  }
1927
1990
 
1928
1991
  .checkbox--error.checkbox--checked .checkbox__box,
1929
1992
  .checkbox--error.checkbox--indeterminate .checkbox__box {
1930
- background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
1931
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
1993
+ background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
1994
+ border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
1932
1995
  }
1933
1996
 
1934
1997
  /* ─── Hover ─── */
@@ -1937,7 +2000,7 @@
1937
2000
  .checkbox__control:hover .checkbox__box {
1938
2001
  border-color: var(
1939
2002
  --hx-checkbox-hover-border-color,
1940
- var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))
2003
+ var(--hx-checkbox-border-color, var(--hx-color-primary-500, #429797))
1941
2004
  );
1942
2005
  }
1943
2006
 
@@ -1946,7 +2009,7 @@
1946
2009
  }
1947
2010
 
1948
2011
  .checkbox--error .checkbox__control:hover .checkbox__box {
1949
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
2012
+ border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
1950
2013
  }
1951
2014
 
1952
2015
  /* ─── Checkmark Icon ─── */
@@ -1975,14 +2038,14 @@
1975
2038
  .checkbox__label {
1976
2039
  font-size: var(--hx-font-size-sm, 0.875rem);
1977
2040
  font-weight: var(--hx-font-weight-medium, 500);
1978
- color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #334155));
2041
+ color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #202b39));
1979
2042
  line-height: var(--hx-line-height-normal, 1.5);
1980
2043
  user-select: none;
1981
2044
  -webkit-user-select: none;
1982
2045
  }
1983
2046
 
1984
2047
  .checkbox__required-marker {
1985
- color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
2048
+ color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
1986
2049
  font-weight: var(--hx-font-weight-bold, 700);
1987
2050
  }
1988
2051
 
@@ -1990,7 +2053,7 @@
1990
2053
 
1991
2054
  .checkbox__help-text {
1992
2055
  font-size: var(--hx-font-size-xs, 0.75rem);
1993
- color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #64748b));
2056
+ color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #4a5362));
1994
2057
  line-height: var(--hx-line-height-normal, 1.5);
1995
2058
  padding-inline-start: calc(
1996
2059
  var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -1999,7 +2062,7 @@
1999
2062
 
2000
2063
  .checkbox__error {
2001
2064
  font-size: var(--hx-font-size-xs, 0.75rem);
2002
- color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
2065
+ color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
2003
2066
  line-height: var(--hx-line-height-normal, 1.5);
2004
2067
  padding-inline-start: calc(
2005
2068
  var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -2150,7 +2213,7 @@
2150
2213
  }
2151
2214
 
2152
2215
  .fieldset__required-marker {
2153
- color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
2216
+ color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
2154
2217
  font-weight: var(--hx-font-weight-bold);
2155
2218
  }
2156
2219
 
@@ -2170,7 +2233,7 @@
2170
2233
  /* ─── Error State ─── */
2171
2234
 
2172
2235
  .fieldset--error .fieldset__legend {
2173
- color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
2236
+ color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
2174
2237
  }
2175
2238
 
2176
2239
  /* ─── Help Text & Error Messages ─── */
@@ -2183,7 +2246,7 @@
2183
2246
 
2184
2247
  .fieldset__error {
2185
2248
  font-size: var(--hx-font-size-xs);
2186
- color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
2249
+ color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
2187
2250
  line-height: var(--hx-line-height-normal);
2188
2251
  }
2189
2252
 
@@ -2254,12 +2317,12 @@
2254
2317
  gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));
2255
2318
  padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));
2256
2319
  border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid
2257
- var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bae6fd));
2320
+ var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bedcfc));
2258
2321
  border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid
2259
- var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0284c7));
2322
+ var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0c8beb));
2260
2323
  border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));
2261
- background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #f0f9ff));
2262
- color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
2324
+ background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #eff6fe));
2325
+ color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));
2263
2326
  font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));
2264
2327
  font-size: var(--hx-font-size-sm, 0.875rem);
2265
2328
  line-height: var(--hx-line-height-normal, 1.5);
@@ -2280,41 +2343,41 @@
2280
2343
 
2281
2344
  :host([severity='info']) .clinical-status,
2282
2345
  :host(:not([severity])) .clinical-status {
2283
- --hx-clinical-status-bg: var(--hx-color-info-50, #f0f9ff);
2284
- --hx-clinical-status-border-color: var(--hx-color-info-200, #bae6fd);
2285
- --hx-clinical-status-accent-color: var(--hx-color-info-500, #0284c7);
2286
- --hx-clinical-status-color: var(--hx-color-info-800, #0c4a6e);
2287
- --hx-clinical-status-icon-color: var(--hx-color-info-500, #0284c7);
2346
+ --hx-clinical-status-bg: var(--hx-color-info-50, #eff6fe);
2347
+ --hx-clinical-status-border-color: var(--hx-color-info-200, #bedcfc);
2348
+ --hx-clinical-status-accent-color: var(--hx-color-info-500, #0c8beb);
2349
+ --hx-clinical-status-color: var(--hx-color-info-800, #064172);
2350
+ --hx-clinical-status-icon-color: var(--hx-color-info-500, #0c8beb);
2288
2351
  }
2289
2352
 
2290
2353
  /* ─── Severity: warning ─── */
2291
2354
 
2292
2355
  :host([severity='warning']) .clinical-status {
2293
- --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);
2294
- --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);
2295
- --hx-clinical-status-accent-color: var(--hx-color-warning-500, #d97706);
2296
- --hx-clinical-status-color: var(--hx-color-warning-800, #78350f);
2297
- --hx-clinical-status-icon-color: var(--hx-color-warning-500, #d97706);
2356
+ --hx-clinical-status-bg: var(--hx-color-warning-50, #fff3ea);
2357
+ --hx-clinical-status-border-color: var(--hx-color-warning-200, #facfae);
2358
+ --hx-clinical-status-accent-color: var(--hx-color-warning-500, #c2711c);
2359
+ --hx-clinical-status-color: var(--hx-color-warning-800, #603301);
2360
+ --hx-clinical-status-icon-color: var(--hx-color-warning-500, #c2711c);
2298
2361
  }
2299
2362
 
2300
2363
  /* ─── Severity: critical ─── */
2301
2364
 
2302
2365
  :host([severity='critical']) .clinical-status {
2303
- --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
2304
- --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);
2305
- --hx-clinical-status-accent-color: var(--hx-color-error-500, #dc2626);
2306
- --hx-clinical-status-color: var(--hx-color-error-800, #7f1d1d);
2307
- --hx-clinical-status-icon-color: var(--hx-color-error-500, #dc2626);
2366
+ --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);
2367
+ --hx-clinical-status-border-color: var(--hx-color-error-200, #fccbc4);
2368
+ --hx-clinical-status-accent-color: var(--hx-color-error-500, #e5493e);
2369
+ --hx-clinical-status-color: var(--hx-color-error-800, #7a090a);
2370
+ --hx-clinical-status-icon-color: var(--hx-color-error-500, #e5493e);
2308
2371
  }
2309
2372
 
2310
2373
  /* ─── Severity: emergent ─── */
2311
2374
 
2312
2375
  :host([severity='emergent']) .clinical-status {
2313
- --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
2314
- --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);
2315
- --hx-clinical-status-accent-color: var(--hx-color-error-700, #991b1b);
2316
- --hx-clinical-status-color: var(--hx-color-error-900, #651a1a);
2317
- --hx-clinical-status-icon-color: var(--hx-color-error-700, #991b1b);
2376
+ --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);
2377
+ --hx-clinical-status-border-color: var(--hx-color-error-300, #fda79c);
2378
+ --hx-clinical-status-accent-color: var(--hx-color-error-700, #a21312);
2379
+ --hx-clinical-status-color: var(--hx-color-error-900, #530d0a);
2380
+ --hx-clinical-status-icon-color: var(--hx-color-error-700, #a21312);
2318
2381
  border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);
2319
2382
  font-weight: var(--hx-font-weight-semibold, 600);
2320
2383
  }
@@ -2325,7 +2388,7 @@
2325
2388
  display: flex;
2326
2389
  align-items: center;
2327
2390
  flex-shrink: 0;
2328
- color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0284c7));
2391
+ color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0c8beb));
2329
2392
  }
2330
2393
 
2331
2394
  .clinical-status__icon svg {
@@ -2388,7 +2451,7 @@
2388
2451
  border: none;
2389
2452
  border-radius: var(--hx-border-radius-sm, 0.25rem);
2390
2453
  background: transparent;
2391
- color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
2454
+ color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));
2392
2455
  cursor: pointer;
2393
2456
  font-size: var(--hx-font-size-md, 1rem);
2394
2457
  line-height: 1;
@@ -2405,7 +2468,7 @@
2405
2468
 
2406
2469
  .clinical-status__dismiss-button:focus-visible {
2407
2470
  outline: var(--hx-focus-ring-width, 2px) solid
2408
- var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
2471
+ var(--hx-focus-ring-color, var(--hx-color-focus, #429797));
2409
2472
  outline-offset: var(--hx-focus-ring-offset, 2px);
2410
2473
  opacity: 1;
2411
2474
  }
@@ -2451,7 +2514,7 @@
2451
2514
 
2452
2515
  .clinical-status__acknowledge-button:focus-visible {
2453
2516
  outline: var(--hx-focus-ring-width, 2px) solid
2454
- var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
2517
+ var(--hx-focus-ring-color, var(--hx-color-focus, #429797));
2455
2518
  outline-offset: var(--hx-focus-ring-offset, 2px);
2456
2519
  }
2457
2520
 
@@ -2504,8 +2567,8 @@
2504
2567
  display: inline;
2505
2568
  font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
2506
2569
  font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
2507
- background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #f1f5f9));
2508
- color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0f172a));
2570
+ background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #ebeee9));
2571
+ color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0d1825));
2509
2572
  padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
2510
2573
  var(--hx-code-snippet-inline-padding-x, 0.375em);
2511
2574
  border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -2515,7 +2578,7 @@
2515
2578
 
2516
2579
  .code-snippet {
2517
2580
  position: relative;
2518
- background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0f172a));
2581
+ background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0d1825));
2519
2582
  border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
2520
2583
  overflow: hidden;
2521
2584
  }
@@ -2569,10 +2632,10 @@
2569
2632
  min-width: var(--hx-touch-target-min, 2.75rem);
2570
2633
  min-height: var(--hx-touch-target-min, 2.75rem);
2571
2634
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
2572
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
2635
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
2573
2636
  border-radius: var(--hx-border-radius-sm, 0.25rem);
2574
2637
  /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
2575
- background-color: var(--hx-color-surface-inverse, #0f172a);
2638
+ background-color: var(--hx-color-surface-inverse, #0d1825);
2576
2639
  color: var(--hx-color-text-inverse, #ffffff);
2577
2640
  font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
2578
2641
  font-size: var(--hx-font-size-xs, 0.75rem);
@@ -2589,13 +2652,13 @@
2589
2652
 
2590
2653
  .code-snippet__copy-button:hover {
2591
2654
  /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */
2592
- background-color: var(--hx-color-surface-inverse, #0f172a);
2593
- border-color: var(--hx-color-border-default, #e2e8f0);
2655
+ background-color: var(--hx-color-surface-inverse, #0d1825);
2656
+ border-color: var(--hx-color-border-default, #d6dbd5);
2594
2657
  }
2595
2658
 
2596
2659
  .code-snippet__copy-button:focus-visible {
2597
2660
  outline: var(--hx-focus-ring-width, 2px) solid
2598
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
2661
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
2599
2662
  outline-offset: var(--hx-focus-ring-offset, 2px);
2600
2663
  }
2601
2664
 
@@ -2614,26 +2677,29 @@
2614
2677
  min-height: var(--hx-touch-target-min, 2.75rem);
2615
2678
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
2616
2679
  border: none;
2617
- border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
2680
+ border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
2618
2681
  /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
2619
- background-color: var(--hx-color-surface-inverse, #0f172a);
2682
+ background-color: var(--hx-color-surface-inverse, #0d1825);
2620
2683
  color: var(--hx-color-text-inverse, #ffffff);
2621
2684
  font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
2622
2685
  font-size: var(--hx-font-size-sm, 0.875rem);
2623
2686
  font-weight: var(--hx-font-weight-medium, 500);
2624
2687
  text-align: center;
2625
2688
  cursor: pointer;
2626
- transition: background-color var(--hx-transition-fast, 150ms ease);
2689
+ transition:
2690
+ border-color var(--hx-transition-fast, 150ms ease),
2691
+ filter var(--hx-transition-fast, 150ms ease);
2627
2692
  }
2628
2693
 
2629
2694
  .code-snippet__expand-button:hover {
2630
- background-color: var(--hx-color-surface-inverse, #0f172a);
2631
- color: var(--hx-color-text-inverse, #ffffff);
2695
+ /* Hover on inverse terminal surface — lift the top border to border-default and brighten the background; matches the copy-button hover affordance pattern. */
2696
+ border-top-color: var(--hx-color-border-default, #e2e8f0);
2697
+ filter: brightness(var(--hx-filter-brightness-hover, 1.15));
2632
2698
  }
2633
2699
 
2634
2700
  .code-snippet__expand-button:focus-visible {
2635
2701
  outline: var(--hx-focus-ring-width, 2px) solid
2636
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
2702
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
2637
2703
  outline-offset: var(--hx-focus-ring-offset, 2px);
2638
2704
  }
2639
2705
 
@@ -2643,7 +2709,7 @@
2643
2709
  display: inline-block;
2644
2710
  min-width: var(--hx-space-8, 2rem);
2645
2711
  padding-inline-end: var(--hx-space-3, 0.75rem);
2646
- color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #64748b));
2712
+ color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #4a5362));
2647
2713
  user-select: none;
2648
2714
  text-align: end;
2649
2715
  }
@@ -2709,18 +2775,24 @@
2709
2775
  align-items: center;
2710
2776
  gap: var(--hx-space-2, 0.5rem);
2711
2777
  padding: var(--hx-space-1, 0.25rem);
2712
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
2778
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
2713
2779
  border-radius: var(--hx-border-radius-md, 0.375rem);
2714
2780
  background: var(--hx-color-neutral-0, #ffffff);
2715
2781
  cursor: pointer;
2716
2782
  transition: border-color var(--hx-transition-fast, 150ms ease);
2717
2783
  }
2718
2784
  .trigger:hover:not([disabled]) {
2719
- border-color: var(--hx-color-primary-500, #2563eb);
2785
+ border-color: var(
2786
+ --hx-color-picker-trigger-hover-border-color,
2787
+ var(--hx-color-primary-500, #429797)
2788
+ );
2720
2789
  }
2721
2790
  :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
2722
2791
  outline: var(--hx-focus-ring-width, 2px) solid
2723
- var(--hx-focus-ring-color, var(--hx-color-primary-500));
2792
+ var(
2793
+ --hx-color-picker-focus-ring-color,
2794
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
2795
+ );
2724
2796
  outline-offset: var(--hx-focus-ring-offset, 2px);
2725
2797
  }
2726
2798
  .trigger-swatch {
@@ -2735,7 +2807,7 @@
2735
2807
  }
2736
2808
  .trigger-label {
2737
2809
  font-size: var(--hx-font-size-sm, 0.875rem);
2738
- color: var(--hx-color-neutral-700, #334155);
2810
+ color: var(--hx-color-neutral-700, #313e4b);
2739
2811
  font-family: var(--hx-font-family-mono, monospace);
2740
2812
  white-space: nowrap;
2741
2813
  }
@@ -2745,7 +2817,7 @@
2745
2817
  top: calc(100% + 4px);
2746
2818
  left: 0;
2747
2819
  background: var(--hx-color-neutral-0, #ffffff);
2748
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
2820
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
2749
2821
  border-radius: var(--hx-border-radius-lg, 0.5rem);
2750
2822
  box-shadow: 0 8px 24px
2751
2823
  var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));
@@ -2759,7 +2831,7 @@
2759
2831
  :host([inline]) .panel {
2760
2832
  position: static;
2761
2833
  box-shadow: none;
2762
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
2834
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
2763
2835
  border-radius: var(--hx-border-radius-lg, 0.5rem);
2764
2836
  }
2765
2837
  .gradient-grid {
@@ -2872,12 +2944,12 @@
2872
2944
  .format-btn {
2873
2945
  flex-shrink: 0;
2874
2946
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
2875
- background: var(--hx-color-neutral-100, #f1f5f9);
2876
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
2947
+ background: var(--hx-color-neutral-100, #ebeee9);
2948
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
2877
2949
  border-radius: var(--hx-border-radius-sm, 0.25rem);
2878
2950
  cursor: pointer;
2879
2951
  font-size: var(--hx-font-size-xs, 0.75rem);
2880
- color: var(--hx-color-neutral-600, #475569);
2952
+ color: var(--hx-color-neutral-600, #4a5362);
2881
2953
  text-transform: uppercase;
2882
2954
  font-weight: var(--hx-font-weight-semibold, 600);
2883
2955
  letter-spacing: 0.05em;
@@ -2886,18 +2958,29 @@
2886
2958
  flex: 1;
2887
2959
  min-width: 0;
2888
2960
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
2889
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
2961
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
2890
2962
  border-radius: var(--hx-border-radius-sm, 0.25rem);
2891
2963
  font-family: var(--hx-font-family-mono, monospace);
2892
2964
  font-size: var(--hx-font-size-sm, 0.875rem);
2893
- color: var(--hx-color-neutral-900, #0f172a);
2965
+ color: var(--hx-color-neutral-900, #0d1825);
2894
2966
  background: var(--hx-color-neutral-0, #ffffff);
2895
2967
  outline: none;
2896
2968
  }
2897
2969
  .color-input:focus-visible {
2898
- border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));
2970
+ border-color: var(
2971
+ --hx-color-picker-focus-ring-color,
2972
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
2973
+ );
2899
2974
  box-shadow: 0 0 0 2px
2900
- color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);
2975
+ color-mix(
2976
+ in srgb,
2977
+ var(
2978
+ --hx-color-picker-focus-ring-color,
2979
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
2980
+ )
2981
+ 20%,
2982
+ transparent
2983
+ );
2901
2984
  }
2902
2985
  .input-preview {
2903
2986
  width: 24px;
@@ -2994,11 +3077,11 @@
2994
3077
  gap: var(--hx-space-1, 0.25rem);
2995
3078
  font-size: var(--hx-font-size-sm, 0.875rem);
2996
3079
  font-weight: var(--hx-font-weight-medium, 500);
2997
- color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #334155));
3080
+ color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #202b39));
2998
3081
  line-height: var(--hx-line-height-normal, 1.5);
2999
3082
  }
3000
3083
  .field__required-marker {
3001
- color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
3084
+ color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
3002
3085
  font-weight: var(--hx-font-weight-bold, 700);
3003
3086
  }
3004
3087
  .field__input-wrapper {
@@ -3006,7 +3089,7 @@
3006
3089
  display: flex;
3007
3090
  align-items: center;
3008
3091
  border: var(--hx-border-width-thin, 1px) solid
3009
- var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
3092
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
3010
3093
  border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
3011
3094
  background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
3012
3095
  transition:
@@ -3016,28 +3099,28 @@
3016
3099
  .field__input-wrapper:focus-within {
3017
3100
  border-color: var(
3018
3101
  --hx-combobox-focus-ring-color,
3019
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3102
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3020
3103
  );
3021
3104
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3022
3105
  color-mix(
3023
3106
  in srgb,
3024
3107
  var(
3025
3108
  --hx-combobox-focus-ring-color,
3026
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3109
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3027
3110
  )
3028
3111
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3029
3112
  transparent
3030
3113
  );
3031
3114
  }
3032
3115
  .field--error .field__input-wrapper {
3033
- border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
3116
+ border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
3034
3117
  }
3035
3118
  .field--error .field__input-wrapper:focus-within {
3036
- border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
3119
+ border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
3037
3120
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3038
3121
  color-mix(
3039
3122
  in srgb,
3040
- var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626))
3123
+ var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e))
3041
3124
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3042
3125
  transparent
3043
3126
  );
@@ -3047,7 +3130,7 @@
3047
3130
  display: flex;
3048
3131
  align-items: center;
3049
3132
  padding: 0 var(--hx-space-2, 0.5rem);
3050
- color: var(--hx-color-text-muted, #64748b);
3133
+ color: var(--hx-color-text-muted, #4a5362);
3051
3134
  flex-shrink: 0;
3052
3135
  }
3053
3136
  .field__input {
@@ -3060,11 +3143,11 @@
3060
3143
  font-family: inherit;
3061
3144
  font-size: var(--hx-font-size-md, 1rem);
3062
3145
  line-height: var(--hx-line-height-normal, 1.5);
3063
- color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
3146
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
3064
3147
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3065
3148
  }
3066
3149
  .field__input::placeholder {
3067
- color: var(--hx-color-text-placeholder, #94a3b8);
3150
+ color: var(--hx-color-text-placeholder, #66787b);
3068
3151
  }
3069
3152
  .field__input--sm {
3070
3153
  min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -3083,7 +3166,7 @@
3083
3166
  justify-content: center;
3084
3167
  margin-inline-end: var(--hx-space-2, 0.5rem);
3085
3168
  flex-shrink: 0;
3086
- color: var(--hx-color-text-placeholder, #94a3b8);
3169
+ color: var(--hx-color-text-placeholder, #66787b);
3087
3170
  }
3088
3171
  .field__clear-button {
3089
3172
  width: 1.25rem;
@@ -3096,7 +3179,7 @@
3096
3179
  transition: color var(--hx-transition-fast, 150ms ease);
3097
3180
  }
3098
3181
  .field__clear-button:hover {
3099
- color: var(--hx-color-text-strong, #334155);
3182
+ color: var(--hx-color-text-strong, #202b39);
3100
3183
  }
3101
3184
  .field__clear-button:focus-visible {
3102
3185
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -3133,11 +3216,11 @@
3133
3216
  z-index: var(--hx-z-index-dropdown, 1000);
3134
3217
  background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
3135
3218
  border: var(--hx-border-width-thin, 1px) solid
3136
- var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
3219
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
3137
3220
  border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
3138
3221
  box-shadow: var(
3139
3222
  --hx-combobox-listbox-shadow,
3140
- 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 12%, transparent)
3223
+ 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 12%, transparent)
3141
3224
  );
3142
3225
  max-height: var(--hx-combobox-listbox-max-height, 16rem);
3143
3226
  overflow: hidden;
@@ -3158,27 +3241,27 @@
3158
3241
  gap: var(--hx-space-2, 0.5rem);
3159
3242
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3160
3243
  font-size: var(--hx-font-size-md, 1rem);
3161
- color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
3244
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
3162
3245
  cursor: pointer;
3163
3246
  user-select: none;
3164
3247
  -webkit-user-select: none;
3165
3248
  transition: background-color var(--hx-transition-fast, 150ms ease);
3166
3249
  }
3167
3250
  .field__option:hover {
3168
- background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
3251
+ background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
3169
3252
  }
3170
3253
  .field__option--selected {
3171
- background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
3254
+ background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
3172
3255
  font-weight: var(--hx-font-weight-medium, 500);
3173
3256
  }
3174
3257
  .field__option--focused {
3175
- background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
3258
+ background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
3176
3259
  outline: var(--hx-focus-ring-width, 2px) solid
3177
3260
  var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
3178
3261
  outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
3179
3262
  }
3180
3263
  .field__option--focused.field__option--selected {
3181
- background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
3264
+ background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
3182
3265
  }
3183
3266
  .field__option--disabled {
3184
3267
  opacity: var(--hx-opacity-disabled, 0.5);
@@ -3194,7 +3277,7 @@
3194
3277
  .field__no-options {
3195
3278
  padding: var(--hx-space-3, 0.75rem);
3196
3279
  text-align: center;
3197
- color: var(--hx-color-text-placeholder, #94a3b8);
3280
+ color: var(--hx-color-text-placeholder, #66787b);
3198
3281
  font-size: var(--hx-font-size-sm, 0.875rem);
3199
3282
  }
3200
3283
  .field__sr-only {
@@ -3214,10 +3297,10 @@
3214
3297
  line-height: var(--hx-line-height-normal, 1.5);
3215
3298
  }
3216
3299
  .field__help-text {
3217
- color: var(--hx-color-text-muted, #64748b);
3300
+ color: var(--hx-color-text-muted, #4a5362);
3218
3301
  }
3219
3302
  .field__error {
3220
- color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
3303
+ color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
3221
3304
  }
3222
3305
  @media (prefers-reduced-motion: reduce) {
3223
3306
  .field__input-wrapper,
@@ -3322,8 +3405,8 @@
3322
3405
  gap: var(--hx-space-1, 0.25rem);
3323
3406
  padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);
3324
3407
  height: 1.5rem;
3325
- background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));
3326
- color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e3a8a));
3408
+ background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbf0f0));
3409
+ color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #07494a));
3327
3410
  border-radius: var(--hx-border-radius-full, 9999px);
3328
3411
  font-size: var(--hx-font-size-sm, 0.875rem);
3329
3412
  white-space: nowrap;
@@ -3354,7 +3437,7 @@
3354
3437
  }
3355
3438
  .field__chip-remove:hover {
3356
3439
  opacity: 1;
3357
- background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));
3440
+ background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bce1e1));
3358
3441
  }
3359
3442
  .field__chip-remove:focus-visible {
3360
3443
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -3466,7 +3549,7 @@
3466
3549
  border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);
3467
3550
  border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));
3468
3551
  background-color: var(--hx-copy-button-bg, transparent);
3469
- color: var(--hx-copy-button-color, var(--hx-color-primary-500));
3552
+ color: var(--hx-copy-button-color, var(--hx-color-primary-500, #429797));
3470
3553
  cursor: pointer;
3471
3554
  transition:
3472
3555
  background-color var(--hx-transition-fast),
@@ -3522,10 +3605,13 @@
3522
3605
  /* ─── Copied / Success State ─── */
3523
3606
 
3524
3607
  .button--copied {
3525
- color: var(--hx-color-success-text, var(--hx-color-primary-500));
3608
+ color: var(
3609
+ --hx-copy-button-copied-color,
3610
+ var(--hx-color-success-text, var(--hx-color-success-700, #146831))
3611
+ );
3526
3612
  /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).
3527
3613
  A border provides visual differentiation for users with color blindness. */
3528
- border-color: var(--hx-color-success-500, var(--hx-color-primary-500));
3614
+ border-color: var(--hx-copy-button-copied-border-color, var(--hx-color-success-500, #3b9e58));
3529
3615
  }
3530
3616
 
3531
3617
  /* ─── Icon Container ─── */
@@ -3607,7 +3693,7 @@
3607
3693
  align-items: baseline;
3608
3694
  font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
3609
3695
  font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
3610
- color: var(--hx-counter-color, var(--hx-color-neutral-900, #0f172a));
3696
+ color: var(--hx-counter-color, var(--hx-color-neutral-900, #0d1825));
3611
3697
  line-height: var(--hx-line-height-tight, 1.25);
3612
3698
  font-variant-numeric: tabular-nums;
3613
3699
  }
@@ -3685,14 +3771,14 @@
3685
3771
  /* ─── Head ─── */
3686
3772
 
3687
3773
  thead {
3688
- background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
3774
+ background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
3689
3775
  }
3690
3776
 
3691
3777
  :host([sticky-header]) thead th {
3692
3778
  position: sticky;
3693
3779
  top: 0;
3694
3780
  z-index: 1;
3695
- background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
3781
+ background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
3696
3782
  }
3697
3783
 
3698
3784
  /* ─── Cells ─── */
@@ -3702,18 +3788,18 @@
3702
3788
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
3703
3789
  text-align: start;
3704
3790
  border-bottom: var(--hx-border-width-thin, 1px) solid
3705
- var(--hx-data-table-border-color, var(--hx-color-border-default, #e2e8f0));
3791
+ var(--hx-data-table-border-color, var(--hx-color-border-default, #d6dbd5));
3706
3792
  vertical-align: middle;
3707
3793
  }
3708
3794
 
3709
3795
  th {
3710
3796
  font-weight: var(--hx-font-weight-semibold, 600);
3711
- color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #334155));
3797
+ color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #202b39));
3712
3798
  white-space: nowrap;
3713
3799
  }
3714
3800
 
3715
3801
  td {
3716
- color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0f172a));
3802
+ color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0d1825));
3717
3803
  }
3718
3804
 
3719
3805
  /* ─── Checkbox Column ─── */
@@ -3752,7 +3838,10 @@
3752
3838
 
3753
3839
  .sort-btn:focus-visible {
3754
3840
  outline: var(--hx-focus-ring-width, 2px) solid
3755
- var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
3841
+ var(
3842
+ --hx-data-table-focus-ring-color,
3843
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
3844
+ );
3756
3845
  outline-offset: var(--hx-focus-ring-offset, 2px);
3757
3846
  border-radius: var(--hx-border-radius-sm, 2px);
3758
3847
  }
@@ -3773,7 +3862,7 @@
3773
3862
 
3774
3863
  .sort-icon--active {
3775
3864
  opacity: var(--hx-opacity-100, 1);
3776
- color: var(--hx-color-primary-500, #2563eb);
3865
+ color: var(--hx-data-table-sort-icon-active-color, var(--hx-color-primary-500, #429797));
3777
3866
  }
3778
3867
 
3779
3868
  .sort-icon--desc {
@@ -3787,11 +3876,11 @@
3787
3876
  }
3788
3877
 
3789
3878
  tbody tr:hover {
3790
- background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
3879
+ background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
3791
3880
  }
3792
3881
 
3793
3882
  tbody tr[aria-selected='true'] {
3794
- background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
3883
+ background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #ebf8f8));
3795
3884
  }
3796
3885
 
3797
3886
  /* ─── Checkbox Input ─── */
@@ -3800,7 +3889,7 @@
3800
3889
  width: var(--hx-size-4, 1rem);
3801
3890
  height: var(--hx-size-4, 1rem);
3802
3891
  cursor: pointer;
3803
- accent-color: var(--hx-color-primary-500, #2563eb);
3892
+ accent-color: var(--hx-data-table-checkbox-accent-color, var(--hx-color-primary-500, #429797));
3804
3893
  }
3805
3894
 
3806
3895
  /* ─── Loading Skeleton ─── */
@@ -3812,9 +3901,9 @@
3812
3901
  /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */
3813
3902
  background: linear-gradient(
3814
3903
  90deg,
3815
- var(--hx-color-neutral-200, #e2e8f0) 25%,
3816
- var(--hx-color-neutral-100, #f1f5f9) 50%,
3817
- var(--hx-color-neutral-200, #e2e8f0) 75%
3904
+ var(--hx-color-neutral-200, #d6dbd5) 25%,
3905
+ var(--hx-color-neutral-100, #ebeee9) 50%,
3906
+ var(--hx-color-neutral-200, #d6dbd5) 75%
3818
3907
  );
3819
3908
  background-size: 200% 100%;
3820
3909
  animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
@@ -3854,7 +3943,10 @@
3854
3943
  [part~='td']:focus-visible,
3855
3944
  [part~='th']:focus-visible {
3856
3945
  outline: var(--hx-focus-ring-width, 2px) solid
3857
- var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
3946
+ var(
3947
+ --hx-data-table-focus-ring-color,
3948
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
3949
+ );
3858
3950
  outline-offset: var(--hx-focus-ring-offset, -2px);
3859
3951
  border-radius: var(--hx-border-radius-sm, 2px);
3860
3952
  }
@@ -3863,7 +3955,7 @@
3863
3955
 
3864
3956
  .empty-cell {
3865
3957
  text-align: center;
3866
- color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #475569));
3958
+ color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #313e4b));
3867
3959
  padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
3868
3960
  }
3869
3961
 
@@ -3930,12 +4022,12 @@
3930
4022
  gap: var(--hx-space-1, 0.25rem);
3931
4023
  font-size: var(--hx-font-size-sm, 0.875rem);
3932
4024
  font-weight: var(--hx-font-weight-medium, 500);
3933
- color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #334155));
4025
+ color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #202b39));
3934
4026
  line-height: var(--hx-line-height-normal, 1.5);
3935
4027
  }
3936
4028
 
3937
4029
  .field__required-marker {
3938
- color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
4030
+ color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
3939
4031
  font-weight: var(--hx-font-weight-bold, 700);
3940
4032
  }
3941
4033
 
@@ -3947,7 +4039,7 @@
3947
4039
  display: flex;
3948
4040
  align-items: stretch;
3949
4041
  border: var(--hx-border-width-thin, 1px) solid
3950
- var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
4042
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
3951
4043
  border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
3952
4044
  background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
3953
4045
  transition:
@@ -3959,14 +4051,14 @@
3959
4051
  .field__input-wrapper:focus-within {
3960
4052
  border-color: var(
3961
4053
  --hx-date-picker-focus-ring-color,
3962
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
4054
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3963
4055
  );
3964
4056
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3965
4057
  color-mix(
3966
4058
  in srgb,
3967
4059
  var(
3968
4060
  --hx-date-picker-focus-ring-color,
3969
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
4061
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3970
4062
  )
3971
4063
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3972
4064
  transparent
@@ -3974,15 +4066,15 @@
3974
4066
  }
3975
4067
 
3976
4068
  .field--error .field__input-wrapper {
3977
- border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
4069
+ border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));
3978
4070
  }
3979
4071
 
3980
4072
  .field--error .field__input-wrapper:focus-within {
3981
- border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
4073
+ border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));
3982
4074
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3983
4075
  color-mix(
3984
4076
  in srgb,
3985
- var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626))
4077
+ var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e))
3986
4078
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3987
4079
  transparent
3988
4080
  );
@@ -4000,7 +4092,7 @@
4000
4092
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
4001
4093
  font-family: inherit;
4002
4094
  font-size: var(--hx-font-size-md, 1rem);
4003
- color: var(--hx-date-picker-color, var(--hx-color-text-strong, #1e293b));
4095
+ color: var(--hx-date-picker-color, var(--hx-color-text-strong, #202b39));
4004
4096
  line-height: var(--hx-line-height-normal, 1.5);
4005
4097
  min-height: var(--hx-size-10, 2.5rem);
4006
4098
  width: 100%;
@@ -4008,7 +4100,7 @@
4008
4100
  }
4009
4101
 
4010
4102
  .field__input::placeholder {
4011
- color: var(--hx-color-text-placeholder, #94a3b8);
4103
+ color: var(--hx-color-text-placeholder, #66787b);
4012
4104
  }
4013
4105
 
4014
4106
  .field__input:disabled {
@@ -4026,9 +4118,9 @@
4026
4118
  padding: 0 var(--hx-space-3, 0.75rem);
4027
4119
  border: none;
4028
4120
  border-left: var(--hx-border-width-thin, 1px) solid
4029
- var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
4121
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
4030
4122
  background: transparent;
4031
- color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #64748b));
4123
+ color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #4a5362));
4032
4124
  cursor: pointer;
4033
4125
  flex-shrink: 0;
4034
4126
  transition: color var(--hx-transition-fast, 150ms ease);
@@ -4038,13 +4130,13 @@
4038
4130
  .field__trigger:focus-visible {
4039
4131
  color: var(
4040
4132
  --hx-date-picker-focus-ring-color,
4041
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
4133
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
4042
4134
  );
4043
4135
  background-color: color-mix(
4044
4136
  in srgb,
4045
4137
  var(
4046
4138
  --hx-date-picker-focus-ring-color,
4047
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
4139
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
4048
4140
  )
4049
4141
  8%,
4050
4142
  transparent
@@ -4052,8 +4144,8 @@
4052
4144
  }
4053
4145
 
4054
4146
  .field__trigger:hover:not(:disabled) {
4055
- color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #334155));
4056
- background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
4147
+ color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #202b39));
4148
+ background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 4%, transparent);
4057
4149
  }
4058
4150
 
4059
4151
  .field__trigger:disabled {
@@ -4072,7 +4164,7 @@
4072
4164
  min-width: var(--hx-date-picker-calendar-min-width, 18rem);
4073
4165
  background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
4074
4166
  border: var(--hx-border-width-thin, 1px) solid
4075
- var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #e2e8f0));
4167
+ var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #d6dbd5));
4076
4168
  border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
4077
4169
  box-shadow: var(
4078
4170
  --hx-date-picker-calendar-shadow,
@@ -4131,21 +4223,21 @@
4131
4223
  }
4132
4224
 
4133
4225
  .calendar__nav-btn {
4134
- color: var(--hx-color-text-secondary, #475569);
4226
+ color: var(--hx-color-text-secondary, #313e4b);
4135
4227
  font-size: var(--hx-font-size-lg, 1.125rem);
4136
4228
  line-height: 1;
4137
4229
  }
4138
4230
 
4139
4231
  .calendar__nav-btn:hover {
4140
- background-color: var(--hx-color-surface-sunken, #f1f5f9);
4141
- color: var(--hx-color-text-primary, #0f172a);
4232
+ background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
4233
+ color: var(--hx-color-text-primary, #0d1825);
4142
4234
  }
4143
4235
 
4144
4236
  :is(.calendar__nav-btn, .calendar__day):focus-visible {
4145
4237
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
4146
4238
  var(
4147
4239
  --hx-date-picker-focus-ring-color,
4148
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
4240
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
4149
4241
  );
4150
4242
  z-index: 1;
4151
4243
  }
@@ -4159,7 +4251,7 @@
4159
4251
  .calendar__month-label {
4160
4252
  font-size: var(--hx-font-size-sm, 0.875rem);
4161
4253
  font-weight: var(--hx-font-weight-semibold, 600);
4162
- color: var(--hx-color-text-strong, #1e293b);
4254
+ color: var(--hx-color-text-strong, #202b39);
4163
4255
  flex: 1;
4164
4256
  text-align: center;
4165
4257
  }
@@ -4184,7 +4276,7 @@
4184
4276
  height: var(--hx-size-8, 2rem);
4185
4277
  font-size: var(--hx-font-size-xs, 0.75rem);
4186
4278
  font-weight: var(--hx-font-weight-semibold, 600);
4187
- color: var(--hx-color-text-muted, #64748b);
4279
+ color: var(--hx-color-text-muted, #4a5362);
4188
4280
  text-transform: uppercase;
4189
4281
  letter-spacing: 0.05em;
4190
4282
  }
@@ -4194,30 +4286,30 @@
4194
4286
  ============================================================ */
4195
4287
 
4196
4288
  .calendar__day {
4197
- color: var(--hx-color-text-strong, #1e293b);
4289
+ color: var(--hx-color-text-strong, #202b39);
4198
4290
  font-size: var(--hx-font-size-sm, 0.875rem);
4199
4291
  font-family: inherit;
4200
4292
  position: relative;
4201
4293
  }
4202
4294
 
4203
4295
  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
4204
- background-color: var(--hx-color-surface-sunken, #f1f5f9);
4205
- color: var(--hx-color-text-primary, #0f172a);
4296
+ background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
4297
+ color: var(--hx-color-text-primary, #0d1825);
4206
4298
  }
4207
4299
 
4208
4300
  .calendar__day--selected {
4209
- background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
4301
+ background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
4210
4302
  color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
4211
4303
  font-weight: var(--hx-font-weight-semibold, 600);
4212
4304
  }
4213
4305
 
4214
4306
  .calendar__day--selected:hover {
4215
- background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));
4307
+ background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));
4216
4308
  }
4217
4309
 
4218
4310
  .calendar__day--today:not(.calendar__day--selected) {
4219
4311
  font-weight: var(--hx-font-weight-bold, 700);
4220
- color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
4312
+ color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #0f7078));
4221
4313
  }
4222
4314
 
4223
4315
  .calendar__day--today:not(.calendar__day--selected)::after {
@@ -4265,11 +4357,11 @@
4265
4357
  }
4266
4358
 
4267
4359
  .field__help-text {
4268
- color: var(--hx-color-text-muted, #64748b);
4360
+ color: var(--hx-color-text-muted, #4a5362);
4269
4361
  }
4270
4362
 
4271
4363
  .field__error {
4272
- color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
4364
+ color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
4273
4365
  }
4274
4366
 
4275
4367
  /* ============================================================
@@ -4353,10 +4445,10 @@
4353
4445
  display: flex;
4354
4446
  flex-direction: column;
4355
4447
  position: relative;
4356
- background-color: var(--hx-dialog-bg, var(--hx-color-surface-default));
4357
- color: var(--hx-dialog-color, var(--hx-color-text-primary));
4358
- border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
4359
- box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
4448
+ background-color: var(--hx-dialog-bg, var(--hx-color-surface-default, #ffffff));
4449
+ color: var(--hx-dialog-color, var(--hx-color-text-primary, #0d1825));
4450
+ border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg, 0.5rem));
4451
+ box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));
4360
4452
  width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
4361
4453
  max-width: calc(100vw - var(--hx-space-8, 2rem));
4362
4454
  max-height: calc(100vh - var(--hx-space-8, 2rem));
@@ -4389,7 +4481,10 @@
4389
4481
  /* ─── Native backdrop (modal mode) ─── */
4390
4482
 
4391
4483
  dialog::backdrop {
4392
- background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
4484
+ background-color: var(
4485
+ --hx-dialog-backdrop-color,
4486
+ var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
4487
+ );
4393
4488
  opacity: 0;
4394
4489
  transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
4395
4490
  }
@@ -4409,7 +4504,10 @@
4409
4504
  .dialog-backdrop {
4410
4505
  position: fixed;
4411
4506
  inset: 0;
4412
- background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
4507
+ background-color: var(
4508
+ --hx-dialog-backdrop-color,
4509
+ var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
4510
+ );
4413
4511
  opacity: var(--hx-dialog-backdrop-opacity, 0.5);
4414
4512
  /* D5 — backdrop z-index must be lower than the dialog element's z-index */
4415
4513
  z-index: var(--hx-z-index-modal, 1400);
@@ -4421,20 +4519,20 @@
4421
4519
  display: flex;
4422
4520
  align-items: center;
4423
4521
  justify-content: space-between;
4424
- padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
4425
- border-bottom: var(--hx-border-width-thin) solid
4426
- var(--hx-dialog-header-border-color, var(--hx-color-border-default));
4427
- gap: var(--hx-space-4);
4522
+ padding: var(--hx-dialog-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
4523
+ border-bottom: var(--hx-border-width-thin, 1px) solid
4524
+ var(--hx-dialog-header-border-color, var(--hx-color-border-default, #d6dbd5));
4525
+ gap: var(--hx-space-4, 1rem);
4428
4526
  flex-shrink: 0;
4429
4527
  }
4430
4528
 
4431
4529
  .dialog__heading {
4432
4530
  margin: 0;
4433
- font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans));
4434
- font-size: var(--hx-font-size-lg);
4435
- font-weight: var(--hx-font-weight-semibold);
4436
- line-height: var(--hx-line-height-tight);
4437
- color: var(--hx-dialog-heading-color, var(--hx-color-text-primary));
4531
+ font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans, sans-serif));
4532
+ font-size: var(--hx-font-size-lg, 1.125rem);
4533
+ font-weight: var(--hx-font-weight-semibold, 600);
4534
+ line-height: var(--hx-line-height-tight, 1.25);
4535
+ color: var(--hx-dialog-heading-color, var(--hx-color-text-primary, #0d1825));
4438
4536
  flex: 1 1 auto;
4439
4537
  }
4440
4538
 
@@ -4456,7 +4554,7 @@
4456
4554
  border: none;
4457
4555
  border-radius: var(--hx-border-radius-sm, 0.25rem);
4458
4556
  cursor: pointer;
4459
- color: var(--hx-color-text-muted, #64748b);
4557
+ color: var(--hx-dialog-close-btn-color, var(--hx-color-text-muted, #4a5362));
4460
4558
  font-size: var(--hx-font-size-xl, 1.25rem);
4461
4559
  line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
4462
4560
  transition:
@@ -4469,15 +4567,15 @@
4469
4567
  }
4470
4568
 
4471
4569
  .dialog__close-btn:hover {
4472
- color: var(--hx-color-text-primary);
4473
- background-color: var(--hx-color-surface-sunken);
4570
+ color: var(--hx-dialog-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));
4571
+ background-color: var(--hx-dialog-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
4474
4572
  }
4475
4573
 
4476
4574
  .dialog__close-btn:focus-visible {
4477
4575
  outline: var(--hx-focus-ring-width, 2px) solid
4478
4576
  var(
4479
4577
  --hx-dialog-close-btn-focus-ring-color,
4480
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
4578
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
4481
4579
  );
4482
4580
  outline-offset: var(--hx-focus-ring-offset, 2px);
4483
4581
  }
@@ -4486,7 +4584,7 @@
4486
4584
 
4487
4585
  .dialog__body {
4488
4586
  flex: 1 1 auto;
4489
- padding: var(--hx-dialog-body-padding, var(--hx-space-6));
4587
+ padding: var(--hx-dialog-body-padding, var(--hx-space-6, 1.5rem));
4490
4588
  overflow-y: auto;
4491
4589
  overscroll-behavior: contain;
4492
4590
  }
@@ -4497,10 +4595,10 @@
4497
4595
  display: flex;
4498
4596
  align-items: center;
4499
4597
  justify-content: flex-end;
4500
- gap: var(--hx-space-3);
4501
- padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
4502
- border-top: var(--hx-border-width-thin) solid
4503
- var(--hx-dialog-footer-border-color, var(--hx-color-border-default));
4598
+ gap: var(--hx-space-3, 0.75rem);
4599
+ padding: var(--hx-dialog-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
4600
+ border-top: var(--hx-border-width-thin, 1px) solid
4601
+ var(--hx-dialog-footer-border-color, var(--hx-color-border-default, #d6dbd5));
4504
4602
  flex-shrink: 0;
4505
4603
  }
4506
4604
 
@@ -4519,6 +4617,7 @@
4519
4617
  }
4520
4618
 
4521
4619
  /* ─── Forced Colors (Windows High Contrast) ─── */
4620
+ /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
4522
4621
 
4523
4622
  @media (forced-colors: active) {
4524
4623
  .dialog {
@@ -4541,9 +4640,9 @@
4541
4640
  /* ── hx-divider ── */
4542
4641
  :host {
4543
4642
  display: block;
4544
- --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #e2e8f0));
4643
+ --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #d6dbd5));
4545
4644
  --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));
4546
- --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #64748b));
4645
+ --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #66787b));
4547
4646
  --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
4548
4647
  --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
4549
4648
  }
@@ -4699,8 +4798,8 @@
4699
4798
  display: flex;
4700
4799
  flex-direction: column;
4701
4800
  background-color: var(--hx-drawer-bg, var(--hx-color-surface-default, #ffffff));
4702
- color: var(--hx-drawer-color, var(--hx-color-text-primary, #0f172a));
4703
- box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
4801
+ color: var(--hx-drawer-color, var(--hx-color-text-primary, #0d1825));
4802
+ box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));
4704
4803
  overflow: hidden;
4705
4804
  outline: none;
4706
4805
  z-index: 1; /* local stacking context: panel above backdrop within overlay container */
@@ -4797,18 +4896,18 @@
4797
4896
  gap: var(--hx-space-4, 1rem);
4798
4897
  padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
4799
4898
  border-bottom: var(--hx-border-width-thin, 1px) solid
4800
- var(--hx-drawer-header-border-color, var(--hx-color-border-default, #e2e8f0));
4899
+ var(--hx-drawer-header-border-color, var(--hx-color-border-default, #d6dbd5));
4801
4900
  flex-shrink: 0;
4802
4901
  }
4803
4902
 
4804
4903
  .drawer-title {
4805
4904
  margin: 0;
4806
4905
  flex: 1 1 auto;
4807
- font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));
4808
- font-size: var(--hx-font-size-lg);
4809
- font-weight: var(--hx-font-weight-semibold);
4810
- line-height: var(--hx-line-height-tight);
4811
- color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0f172a));
4906
+ font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans, sans-serif));
4907
+ font-size: var(--hx-font-size-lg, 1.125rem);
4908
+ font-weight: var(--hx-font-weight-semibold, 600);
4909
+ line-height: var(--hx-line-height-tight, 1.25);
4910
+ color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0d1825));
4812
4911
  }
4813
4912
 
4814
4913
  .drawer-header-actions {
@@ -4831,22 +4930,22 @@
4831
4930
  border: none;
4832
4931
  border-radius: var(--hx-border-radius-md, 0.375rem);
4833
4932
  background: transparent;
4834
- color: var(--hx-color-text-muted, #64748b);
4933
+ color: var(--hx-drawer-close-btn-color, var(--hx-color-text-muted, #4a5362));
4835
4934
  cursor: pointer;
4836
4935
  flex-shrink: 0;
4837
4936
  transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
4838
4937
  }
4839
4938
 
4840
4939
  .drawer-close-button:hover {
4841
- background-color: var(--hx-color-surface-sunken, #f1f5f9);
4842
- color: var(--hx-color-text-primary, #0f172a);
4940
+ background-color: var(--hx-drawer-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
4941
+ color: var(--hx-drawer-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));
4843
4942
  }
4844
4943
 
4845
4944
  .drawer-close-button:focus-visible {
4846
4945
  outline: var(--hx-focus-ring-width, 2px) solid
4847
4946
  var(
4848
4947
  --hx-drawer-close-btn-focus-ring-color,
4849
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
4948
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
4850
4949
  );
4851
4950
  outline-offset: var(--hx-focus-ring-offset, 2px);
4852
4951
  }
@@ -4895,7 +4994,7 @@
4895
4994
  gap: var(--hx-space-3, 0.75rem);
4896
4995
  padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
4897
4996
  border-top: var(--hx-border-width-thin, 1px) solid
4898
- var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #e2e8f0));
4997
+ var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #d6dbd5));
4899
4998
  flex-shrink: 0;
4900
4999
  }
4901
5000
 
@@ -4939,7 +5038,7 @@
4939
5038
  z-index: var(--hx-dropdown-panel-z-index, 1000);
4940
5039
  min-width: var(--hx-dropdown-panel-min-width, 160px);
4941
5040
  background: var(--hx-dropdown-panel-bg, var(--hx-color-surface-default, #ffffff));
4942
- border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #e2e8f0));
5041
+ border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #d6dbd5));
4943
5042
  border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
4944
5043
  box-shadow: var(
4945
5044
  --hx-dropdown-panel-shadow,
@@ -5022,13 +5121,13 @@
5022
5121
  gap: var(--hx-space-1, 0.25rem);
5023
5122
  font-size: var(--hx-font-size-sm, 0.875rem);
5024
5123
  font-weight: var(--hx-font-weight-medium, 500);
5025
- color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
5124
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #202b39));
5026
5125
  line-height: var(--hx-line-height-normal, 1.5);
5027
5126
  cursor: pointer;
5028
5127
  }
5029
5128
 
5030
5129
  .field__required-marker {
5031
- color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
5130
+ color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
5032
5131
  font-weight: var(--hx-font-weight-bold, 700);
5033
5132
  }
5034
5133
 
@@ -5072,24 +5171,24 @@
5072
5171
 
5073
5172
  .field__help-text {
5074
5173
  font-size: var(--hx-font-size-xs, 0.75rem);
5075
- color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #64748b));
5174
+ color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #4a5362));
5076
5175
  line-height: var(--hx-line-height-normal, 1.5);
5077
5176
  }
5078
5177
 
5079
5178
  .field__error {
5080
5179
  font-size: var(--hx-font-size-xs, 0.75rem);
5081
- color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
5180
+ color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
5082
5181
  line-height: var(--hx-line-height-normal, 1.5);
5083
5182
  }
5084
5183
 
5085
5184
  /* ─── Error State ─── */
5086
5185
 
5087
5186
  .field--error .field__label {
5088
- color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
5187
+ color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
5089
5188
  }
5090
5189
 
5091
5190
  .field--error .field__control {
5092
- outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #dc2626));
5191
+ outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #e5493e));
5093
5192
  outline-offset: var(--hx-focus-ring-offset, 2px);
5094
5193
  border-radius: var(--hx-border-radius-sm, 0.25rem);
5095
5194
  }
@@ -5140,20 +5239,20 @@
5140
5239
  gap: var(--hx-space-1, 0.25rem);
5141
5240
  font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
5142
5241
  font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
5143
- color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
5242
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #313e4b));
5144
5243
  line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
5145
5244
  font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
5146
5245
  }
5147
5246
 
5148
5247
  .required-indicator {
5149
- color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
5248
+ color: var(--hx-field-label-required-color, var(--hx-color-error-text, #c92a2a));
5150
5249
  font-weight: var(--hx-font-weight-bold, 700);
5151
5250
  }
5152
5251
 
5153
5252
  .optional-indicator {
5154
5253
  font-size: var(--hx-font-size-xs, 0.75rem);
5155
5254
  font-weight: var(--hx-font-weight-normal, 400);
5156
- color: var(--hx-color-text-muted, #64748b);
5255
+ color: var(--hx-color-text-muted, #66787b);
5157
5256
  }
5158
5257
 
5159
5258
  /* ─── High Contrast Mode (forced-colors) ─── */
@@ -5212,7 +5311,7 @@
5212
5311
  gap: var(--hx-space-1, 0.25rem);
5213
5312
  font-size: var(--hx-font-size-sm, 0.875rem);
5214
5313
  font-weight: var(--hx-font-weight-medium, 500);
5215
- color: var(--hx-color-text-strong, #334155);
5314
+ color: var(--hx-color-text-strong, #202b39);
5216
5315
  line-height: var(--hx-line-height-normal, 1.5);
5217
5316
  }
5218
5317
 
@@ -5227,9 +5326,9 @@
5227
5326
  min-height: var(--hx-space-32, 8rem);
5228
5327
  padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
5229
5328
  border: var(--hx-border-width-thin, 1px) dashed
5230
- var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #cbd5e1));
5329
+ var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #8e9c98));
5231
5330
  border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
5232
- background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f8fafc));
5331
+ background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));
5233
5332
  cursor: pointer;
5234
5333
  text-align: center;
5235
5334
  transition:
@@ -5237,7 +5336,7 @@
5237
5336
  background-color var(--hx-transition-fast, 150ms ease),
5238
5337
  box-shadow var(--hx-transition-fast, 150ms ease);
5239
5338
  user-select: none;
5240
- color: var(--hx-color-text-secondary, #475569);
5339
+ color: var(--hx-color-text-secondary, #313e4b);
5241
5340
  font-size: var(--hx-font-size-sm, 0.875rem);
5242
5341
  }
5243
5342
 
@@ -5255,12 +5354,12 @@
5255
5354
  }
5256
5355
 
5257
5356
  .dropzone--drag-over {
5258
- border-color: var(--hx-color-primary-500, #2563eb);
5357
+ border-color: var(--hx-color-primary-500, #429797);
5259
5358
  background-color: var(
5260
5359
  --hx-file-upload-dropzone-active-bg,
5261
5360
  color-mix(
5262
5361
  in srgb,
5263
- var(--hx-color-primary-500, #2563eb) 8%,
5362
+ var(--hx-color-primary-500, #429797) 8%,
5264
5363
  var(--hx-color-surface-default, #ffffff)
5265
5364
  )
5266
5365
  );
@@ -5268,7 +5367,7 @@
5268
5367
  }
5269
5368
 
5270
5369
  .dropzone--error {
5271
- border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc2626));
5370
+ border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #e5493e));
5272
5371
  }
5273
5372
 
5274
5373
  @media (prefers-reduced-motion: reduce) {
@@ -5313,7 +5412,7 @@
5313
5412
  flex-direction: column;
5314
5413
  gap: var(--hx-space-1, 0.25rem);
5315
5414
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
5316
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0);
5415
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5);
5317
5416
  border-radius: var(--hx-border-radius-md, 0.375rem);
5318
5417
  background-color: var(--hx-color-surface-default, #ffffff);
5319
5418
  }
@@ -5328,7 +5427,7 @@
5328
5427
  flex: 1;
5329
5428
  font-size: var(--hx-font-size-sm, 0.875rem);
5330
5429
  font-weight: var(--hx-font-weight-medium, 500);
5331
- color: var(--hx-color-text-strong, #1e293b);
5430
+ color: var(--hx-color-text-strong, #202b39);
5332
5431
  overflow: hidden;
5333
5432
  text-overflow: ellipsis;
5334
5433
  white-space: nowrap;
@@ -5337,7 +5436,7 @@
5337
5436
  .file-item__size {
5338
5437
  flex-shrink: 0;
5339
5438
  font-size: var(--hx-font-size-xs, 0.75rem);
5340
- color: var(--hx-color-text-muted, #64748b);
5439
+ color: var(--hx-color-text-muted, #4a5362);
5341
5440
  }
5342
5441
 
5343
5442
  .file-item__remove {
@@ -5351,7 +5450,7 @@
5351
5450
  border: none;
5352
5451
  border-radius: var(--hx-border-radius-sm, 0.25rem);
5353
5452
  background: transparent;
5354
- color: var(--hx-color-text-muted, #64748b);
5453
+ color: var(--hx-color-text-muted, #4a5362);
5355
5454
  cursor: pointer;
5356
5455
  line-height: 1;
5357
5456
  transition:
@@ -5360,8 +5459,8 @@
5360
5459
  }
5361
5460
 
5362
5461
  .file-item__remove:hover {
5363
- color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
5364
- background-color: color-mix(in srgb, var(--hx-color-error-500, #dc2626) 8%, transparent);
5462
+ color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));
5463
+ background-color: color-mix(in srgb, var(--hx-color-error-500, #e5493e) 8%, transparent);
5365
5464
  }
5366
5465
 
5367
5466
  .file-item__remove:focus-visible {
@@ -5384,7 +5483,7 @@
5384
5483
  .progress-track {
5385
5484
  width: 100%;
5386
5485
  height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
5387
- background-color: var(--hx-color-border-default, #e2e8f0);
5486
+ background-color: var(--hx-color-border-default, #d6dbd5);
5388
5487
  border-radius: var(--hx-border-radius-full, 9999px);
5389
5488
  overflow: hidden;
5390
5489
  }
@@ -5392,7 +5491,7 @@
5392
5491
  .progress-bar {
5393
5492
  height: 100%;
5394
5493
  width: 100%;
5395
- background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));
5494
+ background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #429797));
5396
5495
  border-radius: inherit;
5397
5496
  transform-origin: left center;
5398
5497
  transform: scaleX(var(--_progress-ratio, 0));
@@ -5423,7 +5522,7 @@
5423
5522
 
5424
5523
  .field__error {
5425
5524
  font-size: var(--hx-font-size-xs, 0.75rem);
5426
- color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
5525
+ color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));
5427
5526
  line-height: var(--hx-line-height-normal, 1.5);
5428
5527
  }
5429
5528
 
@@ -5530,7 +5629,7 @@ export const helixGridItemStyles = css`
5530
5629
  font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
5531
5630
  font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
5532
5631
  line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
5533
- color: var(--hx-help-text-color, var(--hx-color-text-muted, #64748b));
5632
+ color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));
5534
5633
  margin: 0;
5535
5634
  }
5536
5635
 
@@ -5547,25 +5646,25 @@ export const helixGridItemStyles = css`
5547
5646
  /* ─── Variant: default ─── */
5548
5647
 
5549
5648
  .help-text--default {
5550
- --hx-help-text-color: var(--hx-color-text-muted, #64748b);
5649
+ --hx-help-text-color: var(--hx-color-text-muted, #4a5362);
5551
5650
  }
5552
5651
 
5553
5652
  /* ─── Variant: error ─── */
5554
5653
 
5555
5654
  .help-text--error {
5556
- --hx-help-text-color: var(--hx-color-error-600, #b91c1c);
5655
+ --hx-help-text-color: var(--hx-color-error-600, #c92a2a);
5557
5656
  }
5558
5657
 
5559
5658
  /* ─── Variant: warning ─── */
5560
5659
 
5561
5660
  .help-text--warning {
5562
- --hx-help-text-color: var(--hx-color-warning-700, #92400e);
5661
+ --hx-help-text-color: var(--hx-color-warning-700, #804605);
5563
5662
  }
5564
5663
 
5565
5664
  /* ─── Variant: success ─── */
5566
5665
 
5567
5666
  .help-text--success {
5568
- --hx-help-text-color: var(--hx-color-success-700, #166534);
5667
+ --hx-help-text-color: var(--hx-color-success-700, #146831);
5569
5668
  }
5570
5669
 
5571
5670
  /* ─── High Contrast Mode (forced-colors) ─── */
@@ -5675,23 +5774,23 @@ export const helixGridItemStyles = css`
5675
5774
 
5676
5775
  :host([disabled]) {
5677
5776
  pointer-events: none;
5678
- opacity: var(--hx-opacity-disabled);
5777
+ opacity: var(--hx-opacity-disabled, 0.5);
5679
5778
  }
5680
5779
 
5681
5780
  .button {
5682
5781
  display: inline-flex;
5683
5782
  align-items: center;
5684
5783
  justify-content: center;
5685
- border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);
5686
- border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));
5687
- background-color: var(--hx-icon-button-bg);
5688
- color: var(--hx-icon-button-color, var(--hx-color-primary-500));
5784
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-icon-button-border-color, transparent);
5785
+ border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md, 0.375rem));
5786
+ background-color: var(--hx-icon-button-bg, transparent);
5787
+ color: var(--hx-icon-button-color, var(--hx-color-primary-500, #429797));
5689
5788
  cursor: pointer;
5690
5789
  transition:
5691
- background-color var(--hx-transition-fast),
5692
- color var(--hx-transition-fast),
5693
- border-color var(--hx-transition-fast),
5694
- box-shadow var(--hx-transition-fast);
5790
+ background-color var(--hx-transition-fast, 150ms ease),
5791
+ color var(--hx-transition-fast, 150ms ease),
5792
+ border-color var(--hx-transition-fast, 150ms ease),
5793
+ box-shadow var(--hx-transition-fast, 150ms ease);
5695
5794
  text-decoration: none;
5696
5795
  user-select: none;
5697
5796
  -webkit-user-select: none;
@@ -5699,9 +5798,12 @@ export const helixGridItemStyles = css`
5699
5798
  }
5700
5799
 
5701
5800
  .button:focus-visible {
5702
- outline: var(--hx-focus-ring-width) solid
5703
- var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));
5704
- outline-offset: var(--hx-focus-ring-offset);
5801
+ outline: var(--hx-focus-ring-width, 2px) solid
5802
+ var(
5803
+ --hx-icon-button-focus-ring-color,
5804
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
5805
+ );
5806
+ outline-offset: var(--hx-focus-ring-offset, 2px);
5705
5807
  }
5706
5808
 
5707
5809
  .button:active {
@@ -5715,82 +5817,90 @@ export const helixGridItemStyles = css`
5715
5817
  the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
5716
5818
 
5717
5819
  .button--sm {
5718
- padding: var(--hx-space-1);
5719
- width: var(--hx-icon-button-size, var(--hx-size-8));
5720
- height: var(--hx-icon-button-size, var(--hx-size-8));
5820
+ padding: var(--hx-space-1, 0.25rem);
5821
+ width: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
5822
+ height: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
5721
5823
  min-width: var(--hx-touch-target-min, 2.75rem);
5722
5824
  min-height: var(--hx-touch-target-min, 2.75rem);
5723
- font-size: var(--hx-font-size-sm);
5825
+ font-size: var(--hx-font-size-sm, 0.875rem);
5724
5826
  }
5725
5827
 
5726
5828
  .button--md {
5727
- padding: var(--hx-space-2);
5728
- width: var(--hx-icon-button-size, var(--hx-size-10));
5729
- height: var(--hx-icon-button-size, var(--hx-size-10));
5829
+ padding: var(--hx-space-2, 0.5rem);
5830
+ width: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
5831
+ height: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
5730
5832
  min-width: var(--hx-touch-target-min, 2.75rem);
5731
5833
  min-height: var(--hx-touch-target-min, 2.75rem);
5732
- font-size: var(--hx-font-size-md);
5834
+ font-size: var(--hx-font-size-md, 1rem);
5733
5835
  }
5734
5836
 
5735
5837
  .button--lg {
5736
- padding: var(--hx-space-3);
5737
- width: var(--hx-icon-button-size, var(--hx-size-12));
5738
- height: var(--hx-icon-button-size, var(--hx-size-12));
5838
+ padding: var(--hx-space-3, 0.75rem);
5839
+ width: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
5840
+ height: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
5739
5841
  min-width: var(--hx-touch-target-min, 2.75rem);
5740
5842
  min-height: var(--hx-touch-target-min, 2.75rem);
5741
- font-size: var(--hx-font-size-lg);
5843
+ font-size: var(--hx-font-size-lg, 1.125rem);
5742
5844
  }
5743
5845
 
5744
5846
  /* ─── Style Variants ─── */
5745
5847
 
5746
5848
  .button--primary {
5747
- --hx-icon-button-bg: var(--hx-color-primary-500);
5748
- --hx-icon-button-color: var(--hx-color-text-on-primary);
5849
+ --hx-icon-button-bg: var(--hx-color-primary-500, #429797);
5850
+ --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);
5749
5851
  --hx-icon-button-border-color: transparent;
5750
5852
  }
5751
5853
 
5854
+ /* on-primary tokens are tuned for primary-500. primary-600 + on-primary
5855
+ drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful
5856
+ icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */
5752
5857
  .button--primary:hover {
5753
- --hx-icon-button-bg: var(--hx-color-primary-600);
5858
+ --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);
5859
+ --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
5754
5860
  }
5755
5861
 
5756
5862
  .button--secondary {
5757
5863
  --hx-icon-button-bg: transparent;
5758
- --hx-icon-button-color: var(--hx-color-primary-500);
5759
- --hx-icon-button-border-color: var(--hx-color-primary-500);
5864
+ --hx-icon-button-color: var(--hx-color-primary-500, #429797);
5865
+ --hx-icon-button-border-color: var(--hx-color-primary-500, #429797);
5760
5866
  }
5761
5867
 
5762
5868
  .button--secondary:hover {
5763
- --hx-icon-button-bg: var(--hx-color-primary-50);
5869
+ --hx-icon-button-bg: var(--hx-color-primary-50, #ebf8f8);
5764
5870
  }
5765
5871
 
5766
5872
  .button--tertiary {
5767
5873
  --hx-icon-button-bg: transparent;
5768
- --hx-icon-button-color: var(--hx-color-text-strong);
5769
- --hx-icon-button-border-color: var(--hx-color-border-strong);
5874
+ --hx-icon-button-color: var(--hx-color-text-strong, #202b39);
5875
+ --hx-icon-button-border-color: var(--hx-color-border-strong, #8e9c98);
5770
5876
  }
5771
5877
 
5772
5878
  .button--tertiary:hover {
5773
- --hx-icon-button-bg: var(--hx-color-surface-sunken);
5879
+ --hx-icon-button-bg: var(--hx-color-surface-sunken, #ebeee9);
5774
5880
  }
5775
5881
 
5776
5882
  .button--danger {
5777
- --hx-icon-button-bg: var(--hx-color-error-500);
5778
- --hx-icon-button-color: var(--hx-color-text-on-error);
5883
+ --hx-icon-button-bg: var(--hx-color-error-500, #e5493e);
5884
+ --hx-icon-button-color: var(--hx-color-text-on-error, #ffffff);
5779
5885
  --hx-icon-button-border-color: transparent;
5780
5886
  }
5781
5887
 
5888
+ /* on-error tokens are tuned for error-500. error-600 + on-error drops
5889
+ icon contrast to 2.25:1 — fails AA. Pin fg at neutral-0
5890
+ (6.47:1 on error-600). Mirrors hx-button danger:hover. */
5782
5891
  .button--danger:hover {
5783
- --hx-icon-button-bg: var(--hx-color-error-600);
5892
+ --hx-icon-button-bg: var(--hx-color-error-600, #c92a2a);
5893
+ --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
5784
5894
  }
5785
5895
 
5786
5896
  .button--ghost {
5787
5897
  --hx-icon-button-bg: transparent;
5788
- --hx-icon-button-color: var(--hx-color-primary-500);
5898
+ --hx-icon-button-color: var(--hx-color-primary-500, #429797);
5789
5899
  --hx-icon-button-border-color: transparent;
5790
5900
  }
5791
5901
 
5792
5902
  .button--ghost:hover {
5793
- --hx-icon-button-bg: var(--hx-color-surface-raised);
5903
+ --hx-icon-button-bg: var(--hx-color-surface-raised, #f5f8f3);
5794
5904
  }
5795
5905
 
5796
5906
  /* ─── Icon Container ─── */
@@ -5867,8 +5977,8 @@ export const helixGridItemStyles = css`
5867
5977
  align-items: center;
5868
5978
  justify-content: center;
5869
5979
  min-height: var(--hx-image-fallback-min-height, 3rem);
5870
- background-color: var(--hx-color-neutral-100, #f1f5f9);
5871
- color: var(--hx-color-neutral-500, #64748b);
5980
+ background-color: var(--hx-image-fallback-bg, var(--hx-color-neutral-100, #ebeee9));
5981
+ color: var(--hx-image-fallback-color, var(--hx-color-neutral-500, #66787b));
5872
5982
  }
5873
5983
 
5874
5984
  .image__img {
@@ -5881,7 +5991,7 @@ export const helixGridItemStyles = css`
5881
5991
  .image__caption {
5882
5992
  display: none;
5883
5993
  padding: var(--hx-image-caption-padding, 0.5rem 0 0);
5884
- color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));
5994
+ color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4a5362));
5885
5995
  font-size: var(--hx-image-caption-font-size, 0.875rem);
5886
5996
  }
5887
5997
 
@@ -5911,7 +6021,7 @@ export const helixGridItemStyles = css`
5911
6021
  display: inline-flex;
5912
6022
  align-items: center;
5913
6023
  gap: var(--hx-space-1, 0.25rem);
5914
- color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));
6024
+ color: var(--hx-link-color, var(--hx-color-primary-600, #0f7078));
5915
6025
  font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));
5916
6026
  font-size: inherit;
5917
6027
  line-height: inherit;
@@ -5925,19 +6035,19 @@ export const helixGridItemStyles = css`
5925
6035
  }
5926
6036
 
5927
6037
  .link:hover {
5928
- color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
6038
+ color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));
5929
6039
  text-decoration: var(--hx-link-text-decoration-hover, underline);
5930
6040
  }
5931
6041
 
5932
6042
  .link:active {
5933
- color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e3a8a));
6043
+ color: var(--hx-link-color-active, var(--hx-color-primary-800, #07494a));
5934
6044
  }
5935
6045
 
5936
6046
  .link:focus-visible {
5937
6047
  outline: var(--hx-focus-ring-width, 2px) solid
5938
6048
  var(
5939
6049
  --hx-link-focus-ring-color,
5940
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
6050
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
5941
6051
  );
5942
6052
  outline-offset: var(--hx-focus-ring-offset, 2px);
5943
6053
  border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -5946,29 +6056,29 @@ export const helixGridItemStyles = css`
5946
6056
  /* --- Variant: subtle --- */
5947
6057
 
5948
6058
  .link--subtle {
5949
- color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #475569));
6059
+ color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #313e4b));
5950
6060
  text-decoration: none;
5951
6061
  }
5952
6062
 
5953
6063
  .link--subtle:hover {
5954
- color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
6064
+ color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));
5955
6065
  text-decoration: underline;
5956
6066
  }
5957
6067
 
5958
6068
  /* --- Variant: danger --- */
5959
6069
 
5960
6070
  .link--danger {
5961
- color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));
6071
+ color: var(--hx-link-color-danger, var(--hx-color-error-text, #c92a2a));
5962
6072
  }
5963
6073
 
5964
6074
  .link--danger:hover {
5965
- color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #991b1b));
6075
+ color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #a21312));
5966
6076
  }
5967
6077
 
5968
6078
  /* --- Disabled --- */
5969
6079
 
5970
6080
  .link--disabled {
5971
- color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #94a3b8));
6081
+ color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #8e9c98));
5972
6082
  text-decoration: none;
5973
6083
  cursor: not-allowed;
5974
6084
  }
@@ -6065,7 +6175,7 @@ export const helixGridItemStyles = css`
6065
6175
 
6066
6176
  :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
6067
6177
  border-bottom: var(--hx-border-width-thin, 1px) solid
6068
- var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
6178
+ var(--hx-list-divider-color, var(--hx-color-neutral-200, #d6dbd5));
6069
6179
  }
6070
6180
 
6071
6181
  /* ─── High Contrast Mode (forced-colors) ─── */
@@ -6088,7 +6198,7 @@ export const helixGridItemStyles = css`
6088
6198
  padding: var(--hx-space-1, 0.25rem);
6089
6199
  background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
6090
6200
  border: var(--hx-border-width-thin, 1px) solid
6091
- var(--hx-menu-border-color, var(--hx-color-border-default, #e2e8f0));
6201
+ var(--hx-menu-border-color, var(--hx-color-border-default, #d6dbd5));
6092
6202
  border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
6093
6203
  box-shadow: var(
6094
6204
  --hx-menu-shadow,
@@ -6124,14 +6234,15 @@ export const helixGridItemStyles = css`
6124
6234
  }
6125
6235
 
6126
6236
  .meter:focus-visible {
6127
- outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #60a5fa);
6237
+ outline: var(--hx-focus-ring-width, 2px) solid
6238
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
6128
6239
  outline-offset: var(--hx-focus-ring-offset, 2px);
6129
6240
  }
6130
6241
 
6131
6242
  .meter__label {
6132
6243
  font-size: var(--hx-font-size-sm, 0.875rem);
6133
6244
  font-weight: var(--hx-font-weight-medium, 500);
6134
- color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #334155));
6245
+ color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #313e4b));
6135
6246
  line-height: var(--hx-line-height-normal, 1.5);
6136
6247
  }
6137
6248
 
@@ -6139,7 +6250,7 @@ export const helixGridItemStyles = css`
6139
6250
  position: relative;
6140
6251
  width: 100%;
6141
6252
  height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
6142
- background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e2e8f0));
6253
+ background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #d6dbd5));
6143
6254
  border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
6144
6255
  overflow: hidden;
6145
6256
  }
@@ -6168,21 +6279,21 @@ export const helixGridItemStyles = css`
6168
6279
  /* ─── Default (no thresholds configured) ─── */
6169
6280
 
6170
6281
  :host {
6171
- --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #2563eb));
6282
+ --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #429797));
6172
6283
  }
6173
6284
 
6174
6285
  /* ─── Semantic state colors ─── */
6175
6286
 
6176
6287
  :host([data-state='optimum']) {
6177
- --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #16a34a));
6288
+ --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #3b9e58));
6178
6289
  }
6179
6290
 
6180
6291
  :host([data-state='warning']) {
6181
- --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #d97706));
6292
+ --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #c2711c));
6182
6293
  }
6183
6294
 
6184
6295
  :host([data-state='danger']) {
6185
- --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));
6296
+ --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #e5493e));
6186
6297
  }
6187
6298
 
6188
6299
  /* ─── State Label (WCAG 1.4.1) ─── */
@@ -6198,15 +6309,15 @@ export const helixGridItemStyles = css`
6198
6309
  }
6199
6310
 
6200
6311
  .meter__state-label[data-state='optimum'] {
6201
- color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #166534));
6312
+ color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #146831));
6202
6313
  }
6203
6314
 
6204
6315
  .meter__state-label[data-state='warning'] {
6205
- color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #92400e));
6316
+ color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #804605));
6206
6317
  }
6207
6318
 
6208
6319
  .meter__state-label[data-state='danger'] {
6209
- color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
6320
+ color: var(--hx-meter-color-danger, var(--hx-color-error-700, #a21312));
6210
6321
  }
6211
6322
 
6212
6323
  /* ─── Native meter hidden (we use custom rendering) ─── */
@@ -6250,8 +6361,8 @@ export const helixGridItemStyles = css`
6250
6361
 
6251
6362
  [part='nav'] {
6252
6363
  position: relative;
6253
- background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0f172a));
6254
- color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
6364
+ background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0d1825));
6365
+ color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));
6255
6366
  padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
6256
6367
  }
6257
6368
 
@@ -6265,19 +6376,22 @@ export const helixGridItemStyles = css`
6265
6376
  background: transparent;
6266
6377
  border: none;
6267
6378
  border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
6268
- color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
6379
+ color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));
6269
6380
  cursor: pointer;
6270
6381
  transition: background-color var(--hx-transition-fast, 150ms) ease;
6271
6382
  line-height: 0;
6272
6383
  }
6273
6384
 
6274
6385
  [part='toggle']:hover {
6275
- background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
6386
+ background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));
6276
6387
  }
6277
6388
 
6278
6389
  [part='toggle']:focus-visible {
6279
6390
  outline: var(--hx-focus-ring-width, 2px) solid
6280
- var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
6391
+ var(
6392
+ --hx-nav-focus-ring-color,
6393
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
6394
+ );
6281
6395
  outline-offset: var(--hx-focus-ring-offset, 2px);
6282
6396
  }
6283
6397
 
@@ -6307,7 +6421,7 @@ export const helixGridItemStyles = css`
6307
6421
  align-items: center;
6308
6422
  gap: var(--hx-space-1, 0.25rem);
6309
6423
  padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
6310
- color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f1f5f9));
6424
+ color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #ebeee9));
6311
6425
  text-decoration: none;
6312
6426
  border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
6313
6427
  border: none;
@@ -6324,18 +6438,21 @@ export const helixGridItemStyles = css`
6324
6438
  }
6325
6439
 
6326
6440
  .nav__link:hover {
6327
- background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
6441
+ background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));
6328
6442
  color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
6329
6443
  }
6330
6444
 
6331
6445
  .nav__link:focus-visible {
6332
6446
  outline: var(--hx-focus-ring-width, 2px) solid
6333
- var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
6447
+ var(
6448
+ --hx-nav-focus-ring-color,
6449
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
6450
+ );
6334
6451
  outline-offset: var(--hx-focus-ring-offset, 2px);
6335
6452
  }
6336
6453
 
6337
6454
  .nav__link--active {
6338
- background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #1d4ed8));
6455
+ background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #0f7078));
6339
6456
  color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
6340
6457
  }
6341
6458
 
@@ -6360,7 +6477,7 @@ export const helixGridItemStyles = css`
6360
6477
  list-style: none;
6361
6478
  margin: 0;
6362
6479
  padding: var(--hx-space-1, 0.25rem) 0;
6363
- background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1e293b));
6480
+ background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #202b39));
6364
6481
  border-radius: var(--hx-border-radius-md, 0.375rem);
6365
6482
  box-shadow: var(
6366
6483
  --hx-nav-shadow,
@@ -6414,7 +6531,7 @@ export const helixGridItemStyles = css`
6414
6531
  :host([orientation='vertical']) .nav__submenu .nav__link {
6415
6532
  padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
6416
6533
  font-size: var(--hx-font-size-xs, 0.75rem);
6417
- color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #cbd5e1));
6534
+ color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #b6bfb9));
6418
6535
  }
6419
6536
 
6420
6537
  /* ─── Mobile Responsive ─── */
@@ -6530,7 +6647,7 @@ export const helixGridItemStyles = css`
6530
6647
  }
6531
6648
 
6532
6649
  .field__required-marker {
6533
- color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
6650
+ color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
6534
6651
  font-weight: var(--hx-font-weight-bold);
6535
6652
  }
6536
6653
 
@@ -6566,18 +6683,18 @@ export const helixGridItemStyles = css`
6566
6683
  /* ─── Error State ─── */
6567
6684
 
6568
6685
  .field--error .field__input-wrapper {
6569
- border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
6686
+ border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
6570
6687
  }
6571
6688
 
6572
6689
  .field--error .field__input-wrapper:focus-within {
6573
- border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
6690
+ border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
6574
6691
  /* Fallback for Safari < 16.2 (no color-mix support) */
6575
6692
  box-shadow: 0 0 0 var(--hx-focus-ring-width)
6576
- var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
6693
+ var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
6577
6694
  box-shadow: 0 0 0 var(--hx-focus-ring-width)
6578
6695
  color-mix(
6579
6696
  in srgb,
6580
- var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
6697
+ var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))
6581
6698
  calc(var(--hx-focus-ring-opacity) * 100%),
6582
6699
  transparent
6583
6700
  );
@@ -6723,7 +6840,7 @@ export const helixGridItemStyles = css`
6723
6840
 
6724
6841
  .field__error {
6725
6842
  font-size: var(--hx-font-size-xs);
6726
- color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
6843
+ color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
6727
6844
  line-height: var(--hx-line-height-normal);
6728
6845
  }
6729
6846
 
@@ -6836,7 +6953,7 @@ export const helixGridItemStyles = css`
6836
6953
  border: var(--hx-border-width-thin, 1px) solid transparent;
6837
6954
  border-radius: var(--hx-border-radius-md, 0.375rem);
6838
6955
  background-color: transparent;
6839
- color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #475569));
6956
+ color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #313e4b));
6840
6957
  cursor: pointer;
6841
6958
  transition:
6842
6959
  background-color var(--hx-transition-fast, 150ms ease),
@@ -6850,17 +6967,23 @@ export const helixGridItemStyles = css`
6850
6967
  outline: var(--hx-focus-ring-width, 2px) solid
6851
6968
  var(
6852
6969
  --hx-overflow-menu-focus-ring-color,
6853
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
6970
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
6854
6971
  );
6855
6972
  outline-offset: var(--hx-focus-ring-offset, 2px);
6856
6973
  }
6857
6974
 
6858
6975
  .trigger:hover:not([disabled]) {
6859
- background-color: var(--hx-color-surface-sunken, #f1f5f9);
6976
+ background-color: var(
6977
+ --hx-overflow-menu-trigger-hover-bg,
6978
+ var(--hx-color-surface-sunken, #ebeee9)
6979
+ );
6860
6980
  }
6861
6981
 
6862
6982
  .trigger--open {
6863
- background-color: var(--hx-color-surface-sunken, #f1f5f9);
6983
+ background-color: var(
6984
+ --hx-overflow-menu-trigger-open-bg,
6985
+ var(--hx-color-surface-sunken, #ebeee9)
6986
+ );
6864
6987
  }
6865
6988
 
6866
6989
  /* ─── Size Variants ─── */
@@ -6894,7 +7017,7 @@ export const helixGridItemStyles = css`
6894
7017
  z-index: var(--hx-overflow-menu-panel-z-index, 1000);
6895
7018
  min-width: var(--hx-overflow-menu-panel-min-width, 160px);
6896
7019
  background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));
6897
- border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #e2e8f0));
7020
+ border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #d6dbd5));
6898
7021
  border-radius: var(
6899
7022
  --hx-overflow-menu-panel-border-radius,
6900
7023
  var(--hx-border-radius-md, 0.375rem)
@@ -6919,7 +7042,7 @@ export const helixGridItemStyles = css`
6919
7042
  border: none;
6920
7043
  text-align: start;
6921
7044
  font-size: var(--hx-font-size-sm, 0.875rem);
6922
- color: var(--hx-color-text-primary, #0f172a);
7045
+ color: var(--hx-overflow-menu-item-color, var(--hx-color-text-primary, #0d1825));
6923
7046
  cursor: pointer;
6924
7047
  white-space: nowrap;
6925
7048
  box-sizing: border-box;
@@ -6928,7 +7051,10 @@ export const helixGridItemStyles = css`
6928
7051
  ::slotted([role='menuitem']:hover),
6929
7052
  ::slotted([role='menuitemcheckbox']:hover),
6930
7053
  ::slotted([role='menuitemradio']:hover) {
6931
- background-color: var(--hx-color-surface-raised, #f8fafc);
7054
+ background-color: var(
7055
+ --hx-overflow-menu-item-hover-bg,
7056
+ var(--hx-color-surface-raised, #f5f8f3)
7057
+ );
6932
7058
  }
6933
7059
 
6934
7060
  ::slotted([role='menuitem']:focus-visible),
@@ -6937,7 +7063,7 @@ export const helixGridItemStyles = css`
6937
7063
  outline: var(--hx-focus-ring-width, 2px) solid
6938
7064
  var(
6939
7065
  --hx-overflow-menu-focus-ring-color,
6940
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
7066
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
6941
7067
  );
6942
7068
  outline-offset: 0;
6943
7069
  }
@@ -7020,10 +7146,10 @@ export const helixGridItemStyles = css`
7020
7146
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7021
7147
  padding: 0 var(--hx-space-2, 0.5rem);
7022
7148
  border: var(--hx-border-width-thin, 1px) solid
7023
- var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
7149
+ var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));
7024
7150
  border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
7025
7151
  background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
7026
- color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
7152
+ color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));
7027
7153
  font-size: var(--hx-font-size-sm, 0.875rem);
7028
7154
  font-family: inherit;
7029
7155
  cursor: pointer;
@@ -7036,21 +7162,24 @@ export const helixGridItemStyles = css`
7036
7162
  }
7037
7163
 
7038
7164
  .button:hover:not(:disabled) {
7039
- background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #f1f5f9));
7040
- border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
7165
+ background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
7166
+ border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #429797));
7041
7167
  }
7042
7168
 
7043
7169
  .button:focus-visible {
7044
7170
  outline: var(--hx-focus-ring-width, 2px) solid
7045
- var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
7171
+ var(
7172
+ --hx-pagination-focus-ring-color,
7173
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
7174
+ );
7046
7175
  outline-offset: var(--hx-focus-ring-offset, 2px);
7047
7176
  }
7048
7177
 
7049
7178
  .button[aria-current='page'] {
7050
- background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb));
7179
+ background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797));
7051
7180
  border-color: var(
7052
7181
  --hx-pagination-active-border-color,
7053
- var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
7182
+ var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797))
7054
7183
  );
7055
7184
  color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
7056
7185
  font-weight: var(--hx-font-weight-semibold, 600);
@@ -7069,7 +7198,7 @@ export const helixGridItemStyles = css`
7069
7198
  justify-content: center;
7070
7199
  min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7071
7200
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7072
- color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #64748b));
7201
+ color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #4a5362));
7073
7202
  font-size: var(--hx-font-size-sm, 0.875rem);
7074
7203
  user-select: none;
7075
7204
  }
@@ -7090,7 +7219,7 @@ export const helixGridItemStyles = css`
7090
7219
  align-items: center;
7091
7220
  gap: var(--hx-space-2, 0.5rem);
7092
7221
  font-size: var(--hx-font-size-sm, 0.875rem);
7093
- color: var(--hx-color-text-muted, #64748b);
7222
+ color: var(--hx-pagination-page-size-label-color, var(--hx-color-text-muted, #4a5362));
7094
7223
  white-space: nowrap;
7095
7224
  }
7096
7225
 
@@ -7098,10 +7227,10 @@ export const helixGridItemStyles = css`
7098
7227
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7099
7228
  padding: 0 var(--hx-space-2, 0.5rem);
7100
7229
  border: var(--hx-border-width-thin, 1px) solid
7101
- var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
7230
+ var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));
7102
7231
  border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
7103
7232
  background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
7104
- color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
7233
+ color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));
7105
7234
  font-size: var(--hx-font-size-sm, 0.875rem);
7106
7235
  font-family: inherit;
7107
7236
  cursor: pointer;
@@ -7109,7 +7238,10 @@ export const helixGridItemStyles = css`
7109
7238
 
7110
7239
  .page-size-select:focus-visible {
7111
7240
  outline: var(--hx-focus-ring-width, 2px) solid
7112
- var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
7241
+ var(
7242
+ --hx-pagination-focus-ring-color,
7243
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
7244
+ );
7113
7245
  outline-offset: var(--hx-focus-ring-offset, 2px);
7114
7246
  }
7115
7247
 
@@ -7179,20 +7311,22 @@ export const helixGridItemStyles = css`
7179
7311
  width: 100%;
7180
7312
 
7181
7313
  /* ─── Private token vars (3-tier cascade) ─── */
7182
- --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f8fafc));
7183
- --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e2e8f0));
7314
+ --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f5f8f3));
7315
+ --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #d6dbd5));
7184
7316
  --_padding: var(
7185
7317
  --hx-patient-banner-padding,
7186
7318
  var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)
7187
7319
  );
7188
7320
  --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));
7189
7321
  --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));
7190
- --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #64748b));
7322
+ /* neutral-500 (#66787B) on neutral-50 (#F5F8F3) = 4.32:1 — fails AA body text.
7323
+ text-muted resolves to neutral-600 (#4A5362) = 7.36:1 — AA pass everywhere. */
7324
+ --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-text-muted, #4a5362));
7191
7325
  --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));
7192
- --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #0f172a));
7326
+ --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #0d1825));
7193
7327
  --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));
7194
7328
  --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));
7195
- --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e2e8f0));
7329
+ --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #d6dbd5));
7196
7330
  }
7197
7331
 
7198
7332
  * {
@@ -7271,10 +7405,13 @@ export const helixGridItemStyles = css`
7271
7405
  /* Visual indicator when Joint Commission two-identifier rule is not met. */
7272
7406
 
7273
7407
  :host([aria-invalid='true']) .banner {
7274
- border-bottom-color: var(--hx-color-error-400, #f87171);
7275
- background-color: var(--hx-color-error-50, #fef2f2);
7408
+ border-bottom-color: var(
7409
+ --hx-patient-banner-invalid-border-color,
7410
+ var(--hx-color-error-400, #fc7264)
7411
+ );
7412
+ background-color: var(--hx-patient-banner-invalid-bg, var(--hx-color-error-50, #fff2f0));
7276
7413
  /* Darken label color to maintain 4.5:1 contrast on error-50 background. */
7277
- --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #334155));
7414
+ --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #313e4b));
7278
7415
  }
7279
7416
 
7280
7417
  :host([aria-invalid='true']) .banner::before {
@@ -7285,7 +7422,10 @@ export const helixGridItemStyles = css`
7285
7422
  top: 0;
7286
7423
  bottom: 0;
7287
7424
  width: var(--hx-border-width-thick, 4px);
7288
- background-color: var(--hx-color-error-500, #dc2626);
7425
+ background-color: var(
7426
+ --hx-patient-banner-invalid-accent-color,
7427
+ var(--hx-color-error-500, #e5493e)
7428
+ );
7289
7429
  border-radius: 0;
7290
7430
  }
7291
7431
 
@@ -7351,12 +7491,12 @@ export const helixGridItemStyles = css`
7351
7491
  .phi-field__value--masked {
7352
7492
  user-select: none;
7353
7493
  -webkit-user-select: none;
7354
- color: var(--hx-phi-field-masked-color, var(--hx-color-text-muted, #64748b));
7494
+ color: var(--hx-phi-field-masked-color, var(--hx-color-text-muted, #4a5362));
7355
7495
  letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
7356
7496
  }
7357
7497
 
7358
7498
  .phi-field__value--revealed {
7359
- color: var(--hx-phi-field-value-color, var(--hx-color-text-primary, #0f172a));
7499
+ color: var(--hx-phi-field-value-color, var(--hx-color-text-primary, #0d1825));
7360
7500
  }
7361
7501
 
7362
7502
  /* ─── Screen Reader Status ─── */
@@ -7384,7 +7524,7 @@ export const helixGridItemStyles = css`
7384
7524
  padding: var(--hx-space-1, 0.25rem);
7385
7525
  min-width: var(--hx-touch-target-min, 2.75rem);
7386
7526
  min-height: var(--hx-touch-target-min, 2.75rem);
7387
- color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));
7527
+ color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #429797));
7388
7528
  cursor: pointer;
7389
7529
  line-height: 1;
7390
7530
  border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -7394,7 +7534,7 @@ export const helixGridItemStyles = css`
7394
7534
  outline: var(--hx-focus-ring-width, 2px) solid
7395
7535
  var(
7396
7536
  --hx-phi-field-focus-ring-color,
7397
- var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb))
7537
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
7398
7538
  );
7399
7539
  outline-offset: var(--hx-focus-ring-offset, 2px);
7400
7540
  }
@@ -7463,11 +7603,11 @@ export const helixGridItemStyles = css`
7463
7603
  max-width: var(--hx-popover-max-width, 320px);
7464
7604
  padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
7465
7605
  background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
7466
- color: var(--hx-popover-color, var(--hx-color-text-primary, #0f172a));
7606
+ color: var(--hx-popover-color, var(--hx-color-text-primary, #0d1825));
7467
7607
  font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
7468
7608
  font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
7469
7609
  line-height: var(--hx-line-height-normal, 1.5);
7470
- border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
7610
+ border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #d6dbd5));
7471
7611
  border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
7472
7612
  box-shadow: var(
7473
7613
  --hx-popover-shadow,
@@ -7488,7 +7628,10 @@ export const helixGridItemStyles = css`
7488
7628
 
7489
7629
  [part='body']:focus-visible {
7490
7630
  outline: var(--hx-focus-ring-width, 2px) solid
7491
- var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
7631
+ var(
7632
+ --hx-popover-focus-ring-color,
7633
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
7634
+ );
7492
7635
  outline-offset: var(--hx-focus-ring-offset, 2px);
7493
7636
  }
7494
7637
 
@@ -7497,7 +7640,7 @@ export const helixGridItemStyles = css`
7497
7640
  width: var(--hx-popover-arrow-size, 10px);
7498
7641
  height: var(--hx-popover-arrow-size, 10px);
7499
7642
  background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
7500
- border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
7643
+ border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #d6dbd5));
7501
7644
  transform: rotate(45deg);
7502
7645
  pointer-events: none;
7503
7646
  }
@@ -7509,6 +7652,7 @@ export const helixGridItemStyles = css`
7509
7652
  }
7510
7653
 
7511
7654
  /* ─── Forced Colors (Windows High Contrast) ─── */
7655
+ /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
7512
7656
 
7513
7657
  @media (forced-colors: active) {
7514
7658
  [part='body'] {
@@ -7589,7 +7733,7 @@ export const helixGridItemStyles = css`
7589
7733
  font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
7590
7734
  font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
7591
7735
  font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
7592
- color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong));
7736
+ color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong, #202b39));
7593
7737
  line-height: var(--hx-line-height-tight, 1.25);
7594
7738
  }
7595
7739
 
@@ -7597,7 +7741,7 @@ export const helixGridItemStyles = css`
7597
7741
  position: relative;
7598
7742
  overflow: hidden;
7599
7743
  border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
7600
- background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken));
7744
+ background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken, #ebeee9));
7601
7745
  width: 100%;
7602
7746
  }
7603
7747
 
@@ -7619,7 +7763,7 @@ export const helixGridItemStyles = css`
7619
7763
  height: 100%;
7620
7764
  width: 100%;
7621
7765
  border-radius: inherit;
7622
- background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));
7766
+ background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));
7623
7767
  transform-origin: left center;
7624
7768
  transform: scaleX(var(--_value-ratio, 0));
7625
7769
  transition: transform var(--hx-transition-fast, 150ms ease);
@@ -7634,19 +7778,19 @@ export const helixGridItemStyles = css`
7634
7778
  /* ─── Variant Colors ─── */
7635
7779
 
7636
7780
  .progress-bar--default .progress-bar__fill {
7637
- --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);
7781
+ --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);
7638
7782
  }
7639
7783
 
7640
7784
  .progress-bar--success .progress-bar__fill {
7641
- --hx-progress-bar-indicator-bg: var(--hx-color-success-700);
7785
+ --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);
7642
7786
  }
7643
7787
 
7644
7788
  .progress-bar--warning .progress-bar__fill {
7645
- --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);
7789
+ --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);
7646
7790
  }
7647
7791
 
7648
7792
  .progress-bar--danger .progress-bar__fill {
7649
- --hx-progress-bar-indicator-bg: var(--hx-color-error-500);
7793
+ --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);
7650
7794
  }
7651
7795
 
7652
7796
  /* ─── Indeterminate Animation ─── */
@@ -7722,14 +7866,14 @@ export const helixGridItemStyles = css`
7722
7866
 
7723
7867
  .progress-ring__track {
7724
7868
  fill: none;
7725
- stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));
7869
+ stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #d6dbd5));
7726
7870
  }
7727
7871
 
7728
7872
  /* ─── Indicator ─── */
7729
7873
 
7730
7874
  .progress-ring__indicator {
7731
7875
  fill: none;
7732
- stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));
7876
+ stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #429797));
7733
7877
  stroke-linecap: round;
7734
7878
  transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);
7735
7879
  }
@@ -7737,15 +7881,15 @@ export const helixGridItemStyles = css`
7737
7881
  /* ─── Variant Colors ─── */
7738
7882
 
7739
7883
  :host([variant='success']) .progress-ring__indicator {
7740
- stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));
7884
+ stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #3b9e58));
7741
7885
  }
7742
7886
 
7743
7887
  :host([variant='warning']) .progress-ring__indicator {
7744
- stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));
7888
+ stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #c2711c));
7745
7889
  }
7746
7890
 
7747
7891
  :host([variant='danger']) .progress-ring__indicator {
7748
- stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));
7892
+ stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #e5493e));
7749
7893
  }
7750
7894
 
7751
7895
  /* ─── Indeterminate Animation ─── */
@@ -7834,7 +7978,7 @@ export const helixGridItemStyles = css`
7834
7978
  font-size: var(--hx-font-size-xs, 0.75rem);
7835
7979
  font-family: var(--hx-progress-ring-font-family, var(--hx-font-family-sans, sans-serif));
7836
7980
  font-weight: var(--hx-font-weight-semibold, 600);
7837
- color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));
7981
+ color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0d1825));
7838
7982
  pointer-events: none;
7839
7983
  }
7840
7984
 
@@ -7893,14 +8037,14 @@ export const helixGridItemStyles = css`
7893
8037
  gap: var(--hx-space-1, 0.25rem);
7894
8038
  font-size: var(--hx-font-size-sm, 0.875rem);
7895
8039
  font-weight: var(--hx-font-weight-medium, 500);
7896
- color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #334155));
8040
+ color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #202b39));
7897
8041
  line-height: var(--hx-line-height-normal, 1.5);
7898
8042
  padding: 0;
7899
8043
  margin-bottom: var(--hx-space-1, 0.25rem);
7900
8044
  }
7901
8045
 
7902
8046
  .fieldset__required-marker {
7903
- color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
8047
+ color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
7904
8048
  font-weight: var(--hx-font-weight-bold, 700);
7905
8049
  }
7906
8050
 
@@ -7920,20 +8064,20 @@ export const helixGridItemStyles = css`
7920
8064
  /* ─── Error State ─── */
7921
8065
 
7922
8066
  .fieldset--error .fieldset__legend {
7923
- color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
8067
+ color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
7924
8068
  }
7925
8069
 
7926
8070
  /* ─── Help Text & Error Messages ─── */
7927
8071
 
7928
8072
  .fieldset__help-text {
7929
8073
  font-size: var(--hx-font-size-xs, 0.75rem);
7930
- color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #64748b));
8074
+ color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #66787b));
7931
8075
  line-height: var(--hx-line-height-normal, 1.5);
7932
8076
  }
7933
8077
 
7934
8078
  .fieldset__error {
7935
8079
  font-size: var(--hx-font-size-xs, 0.75rem);
7936
- color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
8080
+ color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
7937
8081
  line-height: var(--hx-line-height-normal, 1.5);
7938
8082
  }
7939
8083
 
@@ -8003,7 +8147,7 @@ export const helixGridItemStyles = css`
8003
8147
  justify-content: center;
8004
8148
  position: relative;
8005
8149
  cursor: pointer;
8006
- color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
8150
+ color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #8e9c98));
8007
8151
  line-height: 1;
8008
8152
  min-width: var(--hx-touch-target-min, 2.75rem);
8009
8153
  min-height: var(--hx-touch-target-min, 2.75rem);
@@ -8012,14 +8156,14 @@ export const helixGridItemStyles = css`
8012
8156
 
8013
8157
  .symbol:focus-visible {
8014
8158
  outline: var(--hx-focus-ring-width, 2px) solid
8015
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
8159
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
8016
8160
  outline-offset: var(--hx-focus-ring-offset, 2px);
8017
8161
  border-radius: var(--hx-border-radius-sm, 0.25rem);
8018
8162
  }
8019
8163
 
8020
8164
  .symbol--full,
8021
8165
  .symbol--half {
8022
- color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));
8166
+ color: var(--hx-rating-color, var(--hx-color-warning-400, #da904f));
8023
8167
  }
8024
8168
 
8025
8169
  .symbol--disabled {
@@ -8028,7 +8172,7 @@ export const helixGridItemStyles = css`
8028
8172
 
8029
8173
  .base:not(.base--readonly) .symbol:hover {
8030
8174
  transform: scale(1.15);
8031
- color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));
8175
+ color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #eeb383));
8032
8176
  }
8033
8177
 
8034
8178
  /* ─── Half-Star Layout ─── */
@@ -8054,7 +8198,7 @@ export const helixGridItemStyles = css`
8054
8198
  position: absolute;
8055
8199
  left: 0;
8056
8200
  top: 0;
8057
- color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
8201
+ color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #8e9c98));
8058
8202
  /* Clip to right 50% for the empty half */
8059
8203
  clip-path: inset(0 0 0 50%);
8060
8204
  }
@@ -8112,38 +8256,38 @@ export const helixGridItemStyles = css`
8112
8256
 
8113
8257
  /* Background & foreground */
8114
8258
  --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
8115
- --_color: var(--hx-select-color, var(--hx-color-text-strong, #1e293b));
8259
+ --_color: var(--hx-select-color, var(--hx-color-text-strong, #202b39));
8116
8260
  --_placeholder-color: var(
8117
8261
  --hx-select-placeholder-color,
8118
- var(--hx-color-text-placeholder, #64748b)
8262
+ var(--hx-color-text-placeholder, #66787b)
8119
8263
  );
8120
8264
 
8121
8265
  /* Label */
8122
- --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #1e293b));
8266
+ --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #202b39));
8123
8267
 
8124
8268
  /* Border */
8125
- --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #94a3b8));
8269
+ --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #8e9c98));
8126
8270
  --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
8127
8271
 
8128
8272
  /* Focus ring */
8129
8273
  --_focus-ring-color: var(
8130
8274
  --hx-select-focus-ring-color,
8131
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
8275
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
8132
8276
  );
8133
8277
 
8134
8278
  /* Error */
8135
- --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
8279
+ --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #e5493e));
8136
8280
 
8137
8281
  /* Chevron */
8138
- --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #64748b));
8282
+ --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #4a5362));
8139
8283
  --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
8140
8284
 
8141
8285
  /* Listbox */
8142
8286
  --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
8143
- --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
8287
+ --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
8144
8288
  --_option-selected-bg: var(
8145
8289
  --hx-select-option-selected-bg,
8146
- var(--hx-color-primary-100, #dbeafe)
8290
+ var(--hx-color-primary-100, #dbf0f0)
8147
8291
  );
8148
8292
 
8149
8293
  /* Typography */
@@ -8178,7 +8322,7 @@ export const helixGridItemStyles = css`
8178
8322
  }
8179
8323
 
8180
8324
  .field__required-marker {
8181
- color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
8325
+ color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
8182
8326
  font-weight: var(--hx-font-weight-bold, 700);
8183
8327
  }
8184
8328
 
@@ -8387,11 +8531,11 @@ export const helixGridItemStyles = css`
8387
8531
  }
8388
8532
 
8389
8533
  .field__help-text {
8390
- color: var(--hx-color-text-muted, #64748b);
8534
+ color: var(--hx-color-text-muted, #4a5362);
8391
8535
  }
8392
8536
 
8393
8537
  .field__error {
8394
- color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
8538
+ color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
8395
8539
  }
8396
8540
 
8397
8541
  @media (prefers-reduced-motion: reduce) {
@@ -8492,8 +8636,8 @@ export const helixGridItemStyles = css`
8492
8636
  Without this, axe-core cannot resolve the background for slotted nodes
8493
8637
  and evaluates their text against the page white background, producing
8494
8638
  false-positive color-contrast violations (WCAG 2.1 AA). */
8495
- background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
8496
- color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
8639
+ background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
8640
+ color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ebeee9));
8497
8641
  }
8498
8642
 
8499
8643
  * {
@@ -8507,12 +8651,12 @@ export const helixGridItemStyles = css`
8507
8651
  flex-direction: column;
8508
8652
  height: 100%;
8509
8653
  width: var(--hx-side-nav-width, 16rem);
8510
- background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
8511
- color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
8654
+ background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
8655
+ color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ebeee9));
8512
8656
  transition: width var(--hx-transition-normal, 300ms) ease;
8513
8657
  overflow: hidden;
8514
8658
  border-inline-end: var(--hx-border-width-thin, 1px) solid
8515
- var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8659
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
8516
8660
  }
8517
8661
 
8518
8662
  /* ─── Collapsed State ─── */
@@ -8530,7 +8674,7 @@ export const helixGridItemStyles = css`
8530
8674
  flex-shrink: 0;
8531
8675
  min-height: var(--hx-space-14, 3.5rem);
8532
8676
  border-bottom: var(--hx-border-width-thin, 1px) solid
8533
- var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8677
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
8534
8678
  overflow: hidden;
8535
8679
  }
8536
8680
 
@@ -8557,7 +8701,7 @@ export const helixGridItemStyles = css`
8557
8701
  flex-shrink: 0;
8558
8702
  min-height: var(--hx-space-14, 3.5rem);
8559
8703
  border-top: var(--hx-border-width-thin, 1px) solid
8560
- var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8704
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
8561
8705
  overflow: hidden;
8562
8706
  }
8563
8707
 
@@ -8580,7 +8724,7 @@ export const helixGridItemStyles = css`
8580
8724
  border: none;
8581
8725
  border-radius: var(--hx-border-radius-sm, 0.25rem);
8582
8726
  background: transparent;
8583
- color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #94a3b8));
8727
+ color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #b6bfb9));
8584
8728
  cursor: pointer;
8585
8729
  transition:
8586
8730
  background-color var(--hx-transition-fast, 150ms) ease,
@@ -8592,7 +8736,7 @@ export const helixGridItemStyles = css`
8592
8736
  --hx-overlay-white-10,
8593
8737
  rgba(255, 255, 255, 0.1)
8594
8738
  ); /* fallback for browsers without color-mix() */
8595
- color: var(--hx-color-text-inverse, #f1f5f9);
8739
+ color: var(--hx-color-text-inverse, #ebeee9);
8596
8740
  }
8597
8741
 
8598
8742
  @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -8603,7 +8747,10 @@ export const helixGridItemStyles = css`
8603
8747
 
8604
8748
  .side-nav__toggle:focus-visible {
8605
8749
  outline: var(--hx-focus-ring-width, 2px) solid
8606
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
8750
+ var(
8751
+ --hx-side-nav-focus-ring-color,
8752
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
8753
+ );
8607
8754
  outline-offset: var(--hx-focus-ring-offset, 2px);
8608
8755
  }
8609
8756
 
@@ -8671,7 +8818,7 @@ export const helixGridItemStyles = css`
8671
8818
 
8672
8819
  .skeleton {
8673
8820
  display: block;
8674
- background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #e2e8f0));
8821
+ background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #d6dbd5));
8675
8822
  overflow: hidden;
8676
8823
  position: relative;
8677
8824
  width: var(--_width, 100%);
@@ -8787,14 +8934,14 @@ export const helixGridItemStyles = css`
8787
8934
  .slider__label {
8788
8935
  font-size: var(--hx-font-size-sm, 0.875rem);
8789
8936
  font-weight: var(--hx-font-weight-medium, 500);
8790
- color: var(--hx-slider-label-color, var(--hx-color-text-strong, #334155));
8937
+ color: var(--hx-slider-label-color, var(--hx-color-text-strong, #202b39));
8791
8938
  line-height: var(--hx-line-height-normal, 1.5);
8792
8939
  }
8793
8940
 
8794
8941
  .slider__value-display {
8795
8942
  font-size: var(--hx-font-size-sm, 0.875rem);
8796
8943
  font-weight: var(--hx-font-weight-medium, 500);
8797
- color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #475569));
8944
+ color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #313e4b));
8798
8945
  line-height: var(--hx-line-height-normal, 1.5);
8799
8946
  font-variant-numeric: tabular-nums;
8800
8947
  min-width: var(--hx-size-8, 2rem);
@@ -8812,7 +8959,7 @@ export const helixGridItemStyles = css`
8812
8959
  position: relative;
8813
8960
  width: 100%;
8814
8961
  border-radius: var(--hx-border-radius-full, 9999px);
8815
- background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #e2e8f0));
8962
+ background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #d6dbd5));
8816
8963
  overflow: visible;
8817
8964
  }
8818
8965
 
@@ -8855,7 +9002,7 @@ export const helixGridItemStyles = css`
8855
9002
  height: 100%;
8856
9003
  width: 100%;
8857
9004
  border-radius: var(--hx-border-radius-full, 9999px);
8858
- background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #2563eb));
9005
+ background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #429797));
8859
9006
  pointer-events: none;
8860
9007
  transform-origin: left center;
8861
9008
  transform: scaleX(var(--_fill-ratio, 0));
@@ -8936,7 +9083,7 @@ export const helixGridItemStyles = css`
8936
9083
  border-radius: var(--hx-border-radius-full, 9999px);
8937
9084
  background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
8938
9085
  border: var(--hx-slider-thumb-border-width, 2px) solid
8939
- var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
9086
+ var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #429797));
8940
9087
  box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
8941
9088
  pointer-events: none;
8942
9089
  transition:
@@ -8955,7 +9102,7 @@ export const helixGridItemStyles = css`
8955
9102
  0 0 0 var(--hx-focus-ring-width, 2px)
8956
9103
  var(
8957
9104
  --hx-slider-focus-ring-color,
8958
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
9105
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
8959
9106
  ),
8960
9107
  var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
8961
9108
  }
@@ -9012,7 +9159,7 @@ export const helixGridItemStyles = css`
9012
9159
  top: 0;
9013
9160
  width: var(--hx-border-width-thin, 1px);
9014
9161
  height: 100%;
9015
- background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #94a3b8));
9162
+ background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #8e9c98));
9016
9163
  transform: translateX(-50%);
9017
9164
  }
9018
9165
 
@@ -9022,7 +9169,7 @@ export const helixGridItemStyles = css`
9022
9169
  display: flex;
9023
9170
  justify-content: space-between;
9024
9171
  font-size: var(--hx-font-size-xs, 0.75rem);
9025
- color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #64748b));
9172
+ color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #4a5362));
9026
9173
  line-height: var(--hx-line-height-normal, 1.5);
9027
9174
  margin-top: var(--hx-space-0-5, 0.125rem);
9028
9175
  }
@@ -9031,18 +9178,21 @@ export const helixGridItemStyles = css`
9031
9178
 
9032
9179
  .slider__help-text {
9033
9180
  font-size: var(--hx-font-size-xs, 0.75rem);
9034
- color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #64748b));
9181
+ color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #4a5362));
9035
9182
  line-height: var(--hx-line-height-normal, 1.5);
9036
9183
  }
9037
9184
 
9038
9185
  /* ─── Disabled state ─── */
9039
9186
 
9040
9187
  .slider--disabled .slider__fill {
9041
- background-color: var(--hx-color-border-strong, #94a3b8);
9188
+ background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #8e9c98));
9042
9189
  }
9043
9190
 
9044
9191
  .slider--disabled .slider__thumb-visual {
9045
- border-color: var(--hx-color-border-strong, #94a3b8);
9192
+ border-color: var(
9193
+ --hx-slider-disabled-thumb-border-color,
9194
+ var(--hx-color-border-strong, #8e9c98)
9195
+ );
9046
9196
  }
9047
9197
  /* ── hx-spinner ── */
9048
9198
  :host {
@@ -9133,13 +9283,13 @@ export const helixGridItemStyles = css`
9133
9283
  /* ─── Variant Colors ─── */
9134
9284
 
9135
9285
  :host([variant='default']) {
9136
- --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));
9137
- --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));
9286
+ --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #4a5362));
9287
+ --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #d6dbd5));
9138
9288
  }
9139
9289
 
9140
9290
  :host([variant='primary']) {
9141
- --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));
9142
- --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));
9291
+ --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #429797));
9292
+ --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbf0f0));
9143
9293
  }
9144
9294
 
9145
9295
  :host([variant='inverted']) {
@@ -9202,7 +9352,7 @@ export const helixGridItemStyles = css`
9202
9352
  border-inline-end: none;
9203
9353
  border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
9204
9354
  var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
9205
- background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
9355
+ background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
9206
9356
  color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
9207
9357
  font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
9208
9358
  font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -9224,7 +9374,7 @@ export const helixGridItemStyles = css`
9224
9374
  outline: var(--hx-focus-ring-width, 2px) solid
9225
9375
  var(
9226
9376
  --hx-split-button-focus-ring-color,
9227
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
9377
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
9228
9378
  );
9229
9379
  outline-offset: var(--hx-focus-ring-offset, 2px);
9230
9380
  z-index: 1;
@@ -9252,10 +9402,10 @@ export const helixGridItemStyles = css`
9252
9402
  flex-shrink: 0;
9253
9403
  border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
9254
9404
  border-inline-start: var(--hx-border-width-thin, 1px) solid
9255
- var(--hx-split-button-divider-color, var(--hx-color-primary-400, #60a5fa));
9405
+ var(--hx-split-button-divider-color, var(--hx-color-primary-400, #6ab1b1));
9256
9406
  border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
9257
9407
  var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
9258
- background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
9408
+ background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
9259
9409
  color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
9260
9410
  cursor: pointer;
9261
9411
  transition:
@@ -9269,7 +9419,7 @@ export const helixGridItemStyles = css`
9269
9419
  outline: var(--hx-focus-ring-width, 2px) solid
9270
9420
  var(
9271
9421
  --hx-split-button-focus-ring-color,
9272
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
9422
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
9273
9423
  );
9274
9424
  outline-offset: var(--hx-focus-ring-offset, 2px);
9275
9425
  z-index: 1;
@@ -9343,10 +9493,20 @@ export const helixGridItemStyles = css`
9343
9493
 
9344
9494
  .split-button--primary .split-button__primary,
9345
9495
  .split-button--primary .split-button__trigger {
9346
- --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
9496
+ --hx-split-button-bg: var(--hx-color-primary-500, #429797);
9347
9497
  --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
9348
9498
  --hx-split-button-border-color: transparent;
9349
- --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);
9499
+ --hx-split-button-divider-color: var(--hx-color-primary-400, #6ab1b1);
9500
+ }
9501
+
9502
+ /* primary:hover — replace the universal brightness(0.9) filter (which would
9503
+ drop primary-500 + on-primary contrast to ~4.4:1) with an explicit swap
9504
+ to primary-600 and a neutral-0 foreground. Mirrors hx-button precedent. */
9505
+ .split-button--primary .split-button__primary:hover,
9506
+ .split-button--primary .split-button__trigger:hover {
9507
+ --hx-split-button-bg: var(--hx-color-primary-600, #0f7078);
9508
+ --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
9509
+ filter: none;
9350
9510
  }
9351
9511
 
9352
9512
  /* ─── Variant: secondary ─── */
@@ -9354,14 +9514,14 @@ export const helixGridItemStyles = css`
9354
9514
  .split-button--secondary .split-button__primary,
9355
9515
  .split-button--secondary .split-button__trigger {
9356
9516
  --hx-split-button-bg: transparent;
9357
- --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
9358
- --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);
9359
- --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);
9517
+ --hx-split-button-color: var(--hx-color-primary-500, #429797);
9518
+ --hx-split-button-border-color: var(--hx-color-primary-500, #429797);
9519
+ --hx-split-button-divider-color: var(--hx-color-primary-300, #97cdcc);
9360
9520
  }
9361
9521
 
9362
9522
  .split-button--secondary .split-button__primary:hover,
9363
9523
  .split-button--secondary .split-button__trigger:hover {
9364
- --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);
9524
+ --hx-split-button-bg: var(--hx-color-primary-50, #ebf8f8);
9365
9525
  filter: none;
9366
9526
  }
9367
9527
 
@@ -9369,15 +9529,15 @@ export const helixGridItemStyles = css`
9369
9529
 
9370
9530
  .split-button--tertiary .split-button__primary,
9371
9531
  .split-button--tertiary .split-button__trigger {
9372
- --hx-split-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
9373
- --hx-split-button-color: var(--hx-color-text-primary, #0f172a);
9532
+ --hx-split-button-bg: var(--hx-color-surface-sunken, #ebeee9);
9533
+ --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
9374
9534
  --hx-split-button-border-color: transparent;
9375
- --hx-split-button-divider-color: var(--hx-color-border-default, #e2e8f0);
9535
+ --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
9376
9536
  }
9377
9537
 
9378
9538
  .split-button--tertiary .split-button__primary:hover,
9379
9539
  .split-button--tertiary .split-button__trigger:hover {
9380
- --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9540
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
9381
9541
  filter: none;
9382
9542
  }
9383
9543
 
@@ -9385,15 +9545,19 @@ export const helixGridItemStyles = css`
9385
9545
 
9386
9546
  .split-button--danger .split-button__primary,
9387
9547
  .split-button--danger .split-button__trigger {
9388
- --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
9548
+ --hx-split-button-bg: var(--hx-color-error-500, #e5493e);
9389
9549
  --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);
9390
9550
  --hx-split-button-border-color: transparent;
9391
- --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
9551
+ --hx-split-button-divider-color: var(--hx-color-error-400, #fc7264);
9392
9552
  }
9393
9553
 
9554
+ /* danger:hover — on-error tokens are tuned for error-500. error-600 drops
9555
+ the pair to 2.25:1 (AA fail). Pin fg at neutral-0 to keep the darker
9556
+ hover fill legible. Mirrors hx-toast precedent (commit 300e21ab0). */
9394
9557
  .split-button--danger .split-button__primary:hover,
9395
9558
  .split-button--danger .split-button__trigger:hover {
9396
- --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);
9559
+ --hx-split-button-bg: var(--hx-color-error-600, #c92a2a);
9560
+ --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
9397
9561
  filter: none;
9398
9562
  }
9399
9563
 
@@ -9402,14 +9566,14 @@ export const helixGridItemStyles = css`
9402
9566
  .split-button--ghost .split-button__primary,
9403
9567
  .split-button--ghost .split-button__trigger {
9404
9568
  --hx-split-button-bg: transparent;
9405
- --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
9569
+ --hx-split-button-color: var(--hx-color-primary-500, #429797);
9406
9570
  --hx-split-button-border-color: transparent;
9407
- --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);
9571
+ --hx-split-button-divider-color: var(--hx-color-primary-200, #bce1e1);
9408
9572
  }
9409
9573
 
9410
9574
  .split-button--ghost .split-button__primary:hover,
9411
9575
  .split-button--ghost .split-button__trigger:hover {
9412
- --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9576
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
9413
9577
  filter: none;
9414
9578
  }
9415
9579
 
@@ -9418,14 +9582,14 @@ export const helixGridItemStyles = css`
9418
9582
  .split-button--outline .split-button__primary,
9419
9583
  .split-button--outline .split-button__trigger {
9420
9584
  --hx-split-button-bg: transparent;
9421
- --hx-split-button-color: var(--hx-color-text-primary, #0f172a);
9422
- --hx-split-button-border-color: var(--hx-color-border-strong, #94a3b8);
9423
- --hx-split-button-divider-color: var(--hx-color-border-default, #e2e8f0);
9585
+ --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
9586
+ --hx-split-button-border-color: var(--hx-color-border-strong, #8e9c98);
9587
+ --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
9424
9588
  }
9425
9589
 
9426
9590
  .split-button--outline .split-button__primary:hover,
9427
9591
  .split-button--outline .split-button__trigger:hover {
9428
- --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9592
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
9429
9593
  filter: none;
9430
9594
  }
9431
9595
 
@@ -9452,7 +9616,7 @@ export const helixGridItemStyles = css`
9452
9616
  overflow-y: auto;
9453
9617
  background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));
9454
9618
  border: var(--hx-border-width-thin, 1px) solid
9455
- var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #e2e8f0));
9619
+ var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #d6dbd5));
9456
9620
  border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
9457
9621
  box-shadow: var(
9458
9622
  --hx-split-button-menu-shadow,
@@ -9520,8 +9684,11 @@ export const helixGridItemStyles = css`
9520
9684
  :host {
9521
9685
  display: flex;
9522
9686
  --_divider-size: var(--hx-split-panel-divider-size, 4px);
9523
- --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-border-default, #e2e8f0));
9524
- --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
9687
+ --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-border-default, #d6dbd5));
9688
+ --_divider-hover-color: var(
9689
+ --hx-split-panel-divider-hover-color,
9690
+ var(--hx-color-primary-500, #429797)
9691
+ );
9525
9692
  overflow: hidden;
9526
9693
  }
9527
9694
 
@@ -9609,7 +9776,7 @@ export const helixGridItemStyles = css`
9609
9776
  outline: var(--hx-focus-ring-width, 2px) solid
9610
9777
  var(
9611
9778
  --hx-split-panel-focus-ring-color,
9612
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
9779
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
9613
9780
  );
9614
9781
  outline-offset: var(--hx-focus-ring-offset, 2px);
9615
9782
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);
@@ -9674,7 +9841,7 @@ export const helixGridItemStyles = css`
9674
9841
  outline: var(--hx-focus-ring-width, 2px) solid
9675
9842
  var(
9676
9843
  --hx-split-panel-focus-ring-color,
9677
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
9844
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
9678
9845
  );
9679
9846
  outline-offset: var(--hx-focus-ring-offset, 2px);
9680
9847
  }
@@ -9822,7 +9989,7 @@ export const helixGridItemStyles = css`
9822
9989
  flex-direction: column;
9823
9990
  gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
9824
9991
  font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
9825
- color: var(--hx-stat-color, var(--hx-color-text-strong, #1e293b));
9992
+ color: var(--hx-stat-color, var(--hx-color-text-strong, #202b39));
9826
9993
  }
9827
9994
 
9828
9995
  /* ─── Size Variants ─── */
@@ -9866,13 +10033,13 @@ export const helixGridItemStyles = css`
9866
10033
  }
9867
10034
 
9868
10035
  .stat__value {
9869
- color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0f172a));
10036
+ color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0d1825));
9870
10037
  }
9871
10038
 
9872
10039
  /* ─── Label ─── */
9873
10040
 
9874
10041
  .stat__label {
9875
- color: var(--hx-stat-label-color, var(--hx-color-text-muted, #64748b));
10042
+ color: var(--hx-stat-label-color, var(--hx-color-text-muted, #4a5362));
9876
10043
  font-weight: var(--hx-font-weight-normal, 400);
9877
10044
  }
9878
10045
 
@@ -9881,7 +10048,7 @@ export const helixGridItemStyles = css`
9881
10048
  .stat__icon {
9882
10049
  display: flex;
9883
10050
  align-items: center;
9884
- color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #2563eb));
10051
+ color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #429797));
9885
10052
  flex-shrink: 0;
9886
10053
  }
9887
10054
 
@@ -9898,13 +10065,13 @@ export const helixGridItemStyles = css`
9898
10065
  }
9899
10066
 
9900
10067
  .stat__trend--up {
9901
- color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #166534));
9902
- background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
10068
+ color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #146831));
10069
+ background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #eafaec));
9903
10070
  }
9904
10071
 
9905
10072
  .stat__trend--down {
9906
- color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #991b1b));
9907
- background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
10073
+ color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #a21312));
10074
+ background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fff2f0));
9908
10075
  }
9909
10076
 
9910
10077
  .stat__trend-arrow {
@@ -9973,7 +10140,7 @@ export const helixGridItemStyles = css`
9973
10140
  gap: var(--hx-space-2, 0.5rem);
9974
10141
  position: relative;
9975
10142
  flex-shrink: 0;
9976
- --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #cbd5e1));
10143
+ --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #b6bfb9));
9977
10144
  /* Default size (md) — always defined so .indicator never collapses to 0x0 */
9978
10145
  --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
9979
10146
  }
@@ -10037,7 +10204,7 @@ export const helixGridItemStyles = css`
10037
10204
  --hx-status-indicator-label-font-size,
10038
10205
  var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
10039
10206
  );
10040
- color: var(--hx-status-indicator-label-color, var(--hx-color-text-strong, #334155));
10207
+ color: var(--hx-status-indicator-label-color, var(--hx-color-text-strong, #202b39));
10041
10208
  line-height: 1;
10042
10209
  white-space: nowrap;
10043
10210
  }
@@ -10073,23 +10240,23 @@ export const helixGridItemStyles = css`
10073
10240
  /* ─── Status Colors ─── */
10074
10241
 
10075
10242
  :host([status='online']) {
10076
- --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));
10243
+ --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500, #3b9e58));
10077
10244
  }
10078
10245
 
10079
10246
  :host([status='offline']) {
10080
- --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));
10247
+ --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400, #8e9c98));
10081
10248
  }
10082
10249
 
10083
10250
  :host([status='away']) {
10084
- --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));
10251
+ --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500, #c2711c));
10085
10252
  }
10086
10253
 
10087
10254
  :host([status='busy']) {
10088
- --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));
10255
+ --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500, #e5493e));
10089
10256
  }
10090
10257
 
10091
10258
  :host([status='unknown']) {
10092
- --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
10259
+ --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300, #b6bfb9));
10093
10260
  }
10094
10261
 
10095
10262
  /* ─── Forced Colors (Windows High Contrast) ─── */
@@ -10171,9 +10338,9 @@ export const helixGridItemStyles = css`
10171
10338
  /* ── hx-structured-list ── */
10172
10339
  :host {
10173
10340
  display: block;
10174
- --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));
10341
+ --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #d6dbd5));
10175
10342
  --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));
10176
- --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
10343
+ --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f5f8f3));
10177
10344
  --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));
10178
10345
  --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));
10179
10346
  }
@@ -10228,17 +10395,17 @@ export const helixStructuredListRowStyles = css`
10228
10395
 
10229
10396
  :host(:not(:last-of-type)) .row {
10230
10397
  border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid
10231
- var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));
10398
+ var(--_border-color, var(--hx-color-neutral-200, #d6dbd5));
10232
10399
  }
10233
10400
 
10234
10401
  .row__label {
10235
10402
  font-weight: var(--hx-font-weight-medium, 500);
10236
- color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #334155));
10403
+ color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #313e4b));
10237
10404
  font-size: var(--hx-font-size-sm, 0.875rem);
10238
10405
  }
10239
10406
 
10240
10407
  .row__value {
10241
- color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0f172a));
10408
+ color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0d1825));
10242
10409
  font-size: var(--hx-font-size-sm, 0.875rem);
10243
10410
  }
10244
10411
 
@@ -10317,7 +10484,7 @@ export const helixStructuredListRowStyles = css`
10317
10484
  border: none;
10318
10485
  padding: 0;
10319
10486
  border-radius: var(--hx-border-radius-full, 9999px);
10320
- background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #cbd5e1));
10487
+ background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #8e9c98));
10321
10488
  cursor: pointer;
10322
10489
  transition: background-color var(--hx-transition-fast, 150ms ease);
10323
10490
  outline: none;
@@ -10329,13 +10496,21 @@ export const helixStructuredListRowStyles = css`
10329
10496
  outline: var(--hx-focus-ring-width, 2px) solid
10330
10497
  var(
10331
10498
  --hx-switch-focus-ring-color,
10332
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
10499
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
10333
10500
  );
10334
10501
  outline-offset: var(--hx-focus-ring-offset, 2px);
10335
10502
  }
10336
10503
 
10337
10504
  .switch--checked .switch__track {
10338
- background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
10505
+ background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #429797));
10506
+ }
10507
+
10508
+ .switch:not(.switch--checked) .switch__track:hover {
10509
+ background-color: var(--hx-switch-track-hover-bg, var(--hx-color-border-strong, #8e9c98));
10510
+ }
10511
+
10512
+ .switch--checked .switch__track:hover {
10513
+ background-color: var(--hx-switch-track-checked-hover-bg, var(--hx-color-primary-600, #0f7078));
10339
10514
  }
10340
10515
 
10341
10516
  /* --- Thumb --- */
@@ -10413,7 +10588,7 @@ export const helixStructuredListRowStyles = css`
10413
10588
  .switch__label {
10414
10589
  font-size: var(--hx-font-size-sm, 0.875rem);
10415
10590
  font-weight: var(--hx-font-weight-medium, 500);
10416
- color: var(--hx-switch-label-color, var(--hx-color-text-strong, #334155));
10591
+ color: var(--hx-switch-label-color, var(--hx-color-text-strong, #202b39));
10417
10592
  line-height: var(--hx-line-height-normal, 1.5);
10418
10593
  cursor: pointer;
10419
10594
  user-select: none;
@@ -10421,7 +10596,7 @@ export const helixStructuredListRowStyles = css`
10421
10596
  }
10422
10597
 
10423
10598
  .switch__required-marker {
10424
- color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
10599
+ color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
10425
10600
  font-weight: var(--hx-font-weight-bold, 700);
10426
10601
  }
10427
10602
 
@@ -10429,13 +10604,13 @@ export const helixStructuredListRowStyles = css`
10429
10604
 
10430
10605
  .switch__help-text {
10431
10606
  font-size: var(--hx-font-size-xs, 0.75rem);
10432
- color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #64748b));
10607
+ color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #4a5362));
10433
10608
  line-height: var(--hx-line-height-normal, 1.5);
10434
10609
  }
10435
10610
 
10436
10611
  .switch__error {
10437
10612
  font-size: var(--hx-font-size-xs, 0.75rem);
10438
- color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
10613
+ color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
10439
10614
  line-height: var(--hx-line-height-normal, 1.5);
10440
10615
  }
10441
10616
 
@@ -10538,7 +10713,7 @@ export const helixStructuredListRowStyles = css`
10538
10713
  text-align: start;
10539
10714
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
10540
10715
  font-weight: var(--hx-font-weight-semibold, 600);
10541
- color: var(--hx-table-header-color, var(--hx-color-text-strong, #1e293b));
10716
+ color: var(--hx-table-header-color, var(--hx-color-text-strong, #202b39));
10542
10717
  font-size: var(--hx-font-size-md, 1rem);
10543
10718
  }
10544
10719
 
@@ -10554,12 +10729,12 @@ export const helixStructuredListRowStyles = css`
10554
10729
 
10555
10730
  /* Header background via CSS vars that cascade through display:contents */
10556
10731
  ::slotted(hx-thead) {
10557
- --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
10732
+ --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
10558
10733
  }
10559
10734
 
10560
10735
  /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
10561
10736
  :host([variant='striped']) ::slotted(hx-tbody) {
10562
- --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f8fafc));
10737
+ --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f5f8f3));
10563
10738
  }
10564
10739
 
10565
10740
  /* Hover variant: set hover bg variable on direct slotted section elements */
@@ -10569,7 +10744,7 @@ export const helixStructuredListRowStyles = css`
10569
10744
  :host([variant='striped']) ::slotted(hx-thead),
10570
10745
  :host([variant='default']) ::slotted(hx-tbody),
10571
10746
  :host([variant='default']) ::slotted(hx-thead) {
10572
- --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
10747
+ --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
10573
10748
  }
10574
10749
 
10575
10750
  /* Compact variant: reduced padding signal set on section elements that cascade to cells */
@@ -10585,14 +10760,14 @@ export const helixStructuredListRowStyles = css`
10585
10760
  --_hx-table-th-position: sticky;
10586
10761
  --_hx-table-th-top: 0;
10587
10762
  --_hx-table-th-z-index: 1;
10588
- --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
10763
+ --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
10589
10764
  }
10590
10765
 
10591
10766
  /* ─── Focus ─── */
10592
10767
 
10593
10768
  ::slotted(:focus-visible) {
10594
10769
  outline: var(--hx-focus-ring-width, 2px) solid
10595
- var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
10770
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
10596
10771
  outline-offset: var(--hx-focus-ring-offset, -2px);
10597
10772
  }
10598
10773
 
@@ -10671,7 +10846,7 @@ export const helixTableSectionBaseStyles = css`
10671
10846
  flex-wrap: nowrap;
10672
10847
  gap: 0;
10673
10848
  border-bottom: var(--hx-tabs-border-width, 1px) solid
10674
- var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
10849
+ var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));
10675
10850
  overflow-x: auto;
10676
10851
  scrollbar-width: none;
10677
10852
  }
@@ -10688,7 +10863,7 @@ export const helixTableSectionBaseStyles = css`
10688
10863
  --_tab-indicator-bottom-color: transparent;
10689
10864
  --_tab-indicator-end-color: var(
10690
10865
  --hx-tabs-indicator-color,
10691
- var(--hx-color-primary-500, #2563eb)
10866
+ var(--hx-color-primary-500, #429797)
10692
10867
  );
10693
10868
  }
10694
10869
 
@@ -10696,7 +10871,7 @@ export const helixTableSectionBaseStyles = css`
10696
10871
  flex-direction: column;
10697
10872
  border-bottom: none;
10698
10873
  border-inline-end: var(--hx-tabs-border-width, 1px) solid
10699
- var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
10874
+ var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));
10700
10875
  overflow-x: visible;
10701
10876
  overflow-y: auto;
10702
10877
  min-width: var(--hx-tabs-vertical-width, 12rem);
@@ -10745,15 +10920,15 @@ export const helixTableSectionBaseStyles = css`
10745
10920
  align-items: center;
10746
10921
  gap: var(--hx-space-1, 0.25rem);
10747
10922
  border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
10748
- background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f1f5f9));
10749
- color: var(--hx-tag-color, var(--hx-color-neutral-700, #334155));
10923
+ background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #ebeee9));
10924
+ color: var(--hx-tag-color, var(--hx-color-neutral-700, #313e4b));
10750
10925
  font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
10751
10926
  font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
10752
10927
  line-height: var(--hx-line-height-tight, 1.25);
10753
10928
  white-space: nowrap;
10754
10929
  vertical-align: middle;
10755
10930
  border: var(--hx-border-width-thin, 1px) solid
10756
- var(--hx-tag-border-color, var(--hx-color-neutral-200, #e2e8f0));
10931
+ var(--hx-tag-border-color, var(--hx-color-neutral-200, #d6dbd5));
10757
10932
  }
10758
10933
 
10759
10934
  /* ─── Size Variants ─── */
@@ -10779,33 +10954,33 @@ export const helixTableSectionBaseStyles = css`
10779
10954
  /* ─── Color Variants ─── */
10780
10955
 
10781
10956
  .tag--default {
10782
- --hx-tag-bg: var(--hx-color-neutral-100, #f1f5f9);
10783
- --hx-tag-color: var(--hx-color-neutral-700, #334155);
10784
- --hx-tag-border-color: var(--hx-color-neutral-200, #e2e8f0);
10957
+ --hx-tag-bg: var(--hx-tag-default-bg, var(--hx-color-neutral-100, #ebeee9));
10958
+ --hx-tag-color: var(--hx-tag-default-color, var(--hx-color-neutral-700, #313e4b));
10959
+ --hx-tag-border-color: var(--hx-tag-default-border-color, var(--hx-color-neutral-200, #d6dbd5));
10785
10960
  }
10786
10961
 
10787
10962
  .tag--primary {
10788
- --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
10789
- --hx-tag-color: var(--hx-color-primary-700, #1e40af);
10790
- --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
10963
+ --hx-tag-bg: var(--hx-tag-primary-bg, var(--hx-color-primary-50, #ebf8f8));
10964
+ --hx-tag-color: var(--hx-tag-primary-color, var(--hx-color-primary-700, #0f6363));
10965
+ --hx-tag-border-color: var(--hx-tag-primary-border-color, var(--hx-color-primary-200, #bce1e1));
10791
10966
  }
10792
10967
 
10793
10968
  .tag--success {
10794
- --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
10795
- --hx-tag-color: var(--hx-color-success-700, #166534);
10796
- --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
10969
+ --hx-tag-bg: var(--hx-tag-success-bg, var(--hx-color-success-50, #eafaec));
10970
+ --hx-tag-color: var(--hx-tag-success-color, var(--hx-color-success-700, #146831));
10971
+ --hx-tag-border-color: var(--hx-tag-success-border-color, var(--hx-color-success-200, #bae6c2));
10797
10972
  }
10798
10973
 
10799
10974
  .tag--warning {
10800
- --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
10801
- --hx-tag-color: var(--hx-color-warning-700, #92400e);
10802
- --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
10975
+ --hx-tag-bg: var(--hx-tag-warning-bg, var(--hx-color-warning-50, #fff3ea));
10976
+ --hx-tag-color: var(--hx-tag-warning-color, var(--hx-color-warning-700, #804605));
10977
+ --hx-tag-border-color: var(--hx-tag-warning-border-color, var(--hx-color-warning-200, #facfae));
10803
10978
  }
10804
10979
 
10805
10980
  .tag--danger {
10806
- --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
10807
- --hx-tag-color: var(--hx-color-error-700, #991b1b);
10808
- --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
10981
+ --hx-tag-bg: var(--hx-tag-danger-bg, var(--hx-color-error-50, #fff2f0));
10982
+ --hx-tag-color: var(--hx-tag-danger-color, var(--hx-color-error-700, #a21312));
10983
+ --hx-tag-border-color: var(--hx-tag-danger-border-color, var(--hx-color-error-200, #fccbc4));
10809
10984
  }
10810
10985
 
10811
10986
  /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */
@@ -10969,31 +11144,33 @@ export const helixTableSectionBaseStyles = css`
10969
11144
  /* ─── Colors ─── */
10970
11145
 
10971
11146
  .text--color-default {
10972
- --hx-text-color: var(--hx-color-neutral-900, #0f172a);
11147
+ --hx-text-color: var(--hx-text-default-color, var(--hx-color-neutral-900, #0d1825));
10973
11148
  }
10974
11149
 
10975
11150
  .text--color-subtle {
10976
- --hx-text-color: var(--hx-color-neutral-500, #64748b);
11151
+ --hx-text-color: var(--hx-text-subtle-color, var(--hx-color-neutral-500, #66787b));
10977
11152
  }
10978
11153
 
10979
11154
  .text--color-disabled {
10980
- --hx-text-color: var(--hx-color-neutral-400, #94a3b8);
11155
+ --hx-text-color: var(--hx-text-disabled-color, var(--hx-color-neutral-400, #8e9c98));
10981
11156
  }
10982
11157
 
10983
11158
  .text--color-inverse {
10984
- --hx-text-color: var(--hx-color-neutral-0, #ffffff);
11159
+ --hx-text-color: var(--hx-text-inverse-color, var(--hx-color-neutral-0, #ffffff));
10985
11160
  }
10986
11161
 
10987
11162
  .text--color-danger {
10988
- --hx-text-color: var(--hx-color-error-600, #b91c1c);
11163
+ --hx-text-color: var(--hx-text-danger-color, var(--hx-color-error-600, #c92a2a));
10989
11164
  }
10990
11165
 
10991
11166
  .text--color-success {
10992
- --hx-text-color: var(--hx-color-success-600, #15803d);
11167
+ --hx-text-color: var(--hx-text-success-color, var(--hx-color-success-700, #146831));
10993
11168
  }
10994
11169
 
10995
11170
  .text--color-warning {
10996
- --hx-text-color: var(--hx-color-warning-600, #b45309);
11171
+ /* warning-600 (#B8650E) on white = 4.28:1 — fails AA body text in the
11172
+ precision-cool palette. warning-700 (#804605) on white = 7.06:1 — AA pass. */
11173
+ --hx-text-color: var(--hx-text-warning-color, var(--hx-color-warning-700, #804605));
10997
11174
  }
10998
11175
 
10999
11176
  /* ─── Weight Overrides ─── */
@@ -11072,6 +11249,100 @@ export const helixTableSectionBaseStyles = css`
11072
11249
  /* ── hx-text-input ── */
11073
11250
  :host {
11074
11251
  display: block;
11252
+
11253
+ /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
11254
+
11255
+ /* Surface */
11256
+ --_text-input-bg: var(
11257
+ --hx-text-input-bg,
11258
+ var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
11259
+ );
11260
+ --_text-input-color: var(
11261
+ --hx-text-input-color,
11262
+ var(--hx-input-color, var(--hx-color-text-strong, #202b39))
11263
+ );
11264
+ --_text-input-placeholder-color: var(
11265
+ --hx-text-input-placeholder-color,
11266
+ var(--hx-color-text-placeholder, #66787b)
11267
+ );
11268
+
11269
+ /* Border */
11270
+ --_text-input-border-color: var(
11271
+ --hx-text-input-border-color,
11272
+ var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
11273
+ );
11274
+ --_text-input-border-color-hover: var(
11275
+ --hx-text-input-border-color-hover,
11276
+ var(--hx-color-border-strong, #8e9c98)
11277
+ );
11278
+ --_text-input-border-color-focus: var(
11279
+ --hx-text-input-border-color-focus,
11280
+ var(
11281
+ --hx-input-focus-ring-color,
11282
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
11283
+ )
11284
+ );
11285
+ --_text-input-border-color-invalid: var(
11286
+ --hx-text-input-border-color-invalid,
11287
+ var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
11288
+ );
11289
+ --_text-input-border-width: var(--hx-text-input-border-width, var(--hx-border-width-thin, 1px));
11290
+ --_text-input-border-radius: var(
11291
+ --hx-text-input-border-radius,
11292
+ var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
11293
+ );
11294
+
11295
+ /* Spacing */
11296
+ --_text-input-padding-x: var(--hx-text-input-padding-x, var(--hx-space-3, 0.75rem));
11297
+ --_text-input-padding-y: var(--hx-text-input-padding-y, var(--hx-space-2, 0.5rem));
11298
+
11299
+ /* Typography */
11300
+ --_text-input-font-family: var(
11301
+ --hx-text-input-font-family,
11302
+ var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
11303
+ );
11304
+ --_text-input-font-size: var(--hx-text-input-font-size, var(--hx-font-size-md, 1rem));
11305
+
11306
+ /* Focus ring */
11307
+ --_text-input-focus-ring-color: var(
11308
+ --hx-text-input-focus-ring-color,
11309
+ var(
11310
+ --hx-input-focus-ring-color,
11311
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
11312
+ )
11313
+ );
11314
+ --_text-input-focus-ring-width: var(
11315
+ --hx-text-input-focus-ring-width,
11316
+ var(--hx-focus-ring-width, 2px)
11317
+ );
11318
+ --_text-input-focus-ring-offset: var(
11319
+ --hx-text-input-focus-ring-offset,
11320
+ var(--hx-focus-ring-offset, 0px)
11321
+ );
11322
+
11323
+ /* Disabled */
11324
+ --_text-input-disabled-bg: var(
11325
+ --hx-text-input-disabled-bg,
11326
+ var(--hx-color-surface-sunken, #ebeee9)
11327
+ );
11328
+ --_text-input-disabled-color: var(
11329
+ --hx-text-input-disabled-color,
11330
+ var(--hx-color-text-disabled, #8e9c98)
11331
+ );
11332
+
11333
+ /* Label / help / error */
11334
+ --_text-input-label-color: var(
11335
+ --hx-text-input-label-color,
11336
+ var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
11337
+ );
11338
+ --_text-input-help-text-color: var(
11339
+ --hx-text-input-help-text-color,
11340
+ var(--hx-color-text-muted, #4a5362)
11341
+ );
11342
+ --_text-input-error-color: var(
11343
+ --hx-text-input-error-color,
11344
+ var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
11345
+ );
11075
11346
  }
11076
11347
 
11077
11348
  :host([disabled]) {
@@ -11086,36 +11357,13 @@ export const helixTableSectionBaseStyles = css`
11086
11357
  * These complement the :focus-within rules on .field__input-wrapper and are
11087
11358
  * exposed as theming hooks for consumers who target the host element.
11088
11359
  */
11089
- :host([focused]) .field__input-wrapper {
11090
- border-color: var(
11091
- --hx-input-focus-ring-color,
11092
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11093
- );
11094
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
11095
- color-mix(
11096
- in srgb,
11097
- var(
11098
- --hx-input-focus-ring-color,
11099
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11100
- )
11101
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11102
- transparent
11103
- );
11104
- }
11105
-
11360
+ :host([focused]) .field__input-wrapper,
11106
11361
  :host([focused-visible]) .field__input-wrapper {
11107
- border-color: var(
11108
- --hx-input-focus-ring-color,
11109
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11110
- );
11111
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
11362
+ border-color: var(--_text-input-border-color-focus);
11363
+ box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
11112
11364
  color-mix(
11113
11365
  in srgb,
11114
- var(
11115
- --hx-input-focus-ring-color,
11116
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11117
- )
11118
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11366
+ var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11119
11367
  transparent
11120
11368
  );
11121
11369
  }
@@ -11128,7 +11376,7 @@ export const helixTableSectionBaseStyles = css`
11128
11376
  display: flex;
11129
11377
  flex-direction: column;
11130
11378
  gap: var(--hx-space-1, 0.25rem);
11131
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
11379
+ font-family: var(--_text-input-font-family);
11132
11380
  }
11133
11381
 
11134
11382
  /* ─── Label ─── */
@@ -11143,12 +11391,12 @@ export const helixTableSectionBaseStyles = css`
11143
11391
  gap: var(--hx-space-1, 0.25rem);
11144
11392
  font-size: var(--hx-font-size-sm, 0.875rem);
11145
11393
  font-weight: var(--hx-font-weight-medium, 500);
11146
- color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
11394
+ color: var(--_text-input-label-color);
11147
11395
  line-height: var(--hx-line-height-normal, 1.5);
11148
11396
  }
11149
11397
 
11150
11398
  .field__required-marker {
11151
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
11399
+ color: var(--_text-input-error-color);
11152
11400
  font-weight: var(--hx-font-weight-bold, 700);
11153
11401
  }
11154
11402
 
@@ -11157,29 +11405,25 @@ export const helixTableSectionBaseStyles = css`
11157
11405
  .field__input-wrapper {
11158
11406
  display: flex;
11159
11407
  align-items: center;
11160
- border: var(--hx-border-width-thin, 1px) solid
11161
- var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
11162
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
11163
- background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
11408
+ border: var(--_text-input-border-width) solid var(--_text-input-border-color);
11409
+ border-radius: var(--_text-input-border-radius);
11410
+ background-color: var(--_text-input-bg);
11164
11411
  transition:
11165
11412
  border-color var(--hx-transition-fast, 150ms ease),
11166
11413
  box-shadow var(--hx-transition-fast, 150ms ease);
11167
11414
  overflow: hidden;
11168
11415
  }
11169
11416
 
11417
+ .field__input-wrapper:hover {
11418
+ border-color: var(--_text-input-border-color-hover);
11419
+ }
11420
+
11170
11421
  .field__input-wrapper:focus-within {
11171
- border-color: var(
11172
- --hx-input-focus-ring-color,
11173
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11174
- );
11175
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
11422
+ border-color: var(--_text-input-border-color-focus);
11423
+ box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
11176
11424
  color-mix(
11177
11425
  in srgb,
11178
- var(
11179
- --hx-input-focus-ring-color,
11180
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11181
- )
11182
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11426
+ var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11183
11427
  transparent
11184
11428
  );
11185
11429
  }
@@ -11187,16 +11431,15 @@ export const helixTableSectionBaseStyles = css`
11187
11431
  /* ─── Error State ─── */
11188
11432
 
11189
11433
  .field--error .field__input-wrapper {
11190
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
11434
+ border-color: var(--_text-input-border-color-invalid);
11191
11435
  }
11192
11436
 
11193
11437
  .field--error .field__input-wrapper:focus-within {
11194
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
11195
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
11438
+ border-color: var(--_text-input-border-color-invalid);
11439
+ box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
11196
11440
  color-mix(
11197
11441
  in srgb,
11198
- var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
11199
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11442
+ var(--_text-input-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11200
11443
  transparent
11201
11444
  );
11202
11445
  }
@@ -11207,17 +11450,17 @@ export const helixTableSectionBaseStyles = css`
11207
11450
  .field__suffix {
11208
11451
  display: flex;
11209
11452
  align-items: center;
11210
- color: var(--hx-color-text-muted, #64748b);
11453
+ color: var(--hx-color-text-muted, #4a5362);
11211
11454
  flex-shrink: 0;
11212
11455
  }
11213
11456
 
11214
11457
  /* Only add padding when slot has content — avoids phantom space on empty slots */
11215
11458
  .field__prefix--filled {
11216
- padding: 0 var(--hx-space-3, 0.75rem);
11459
+ padding: 0 var(--_text-input-padding-x);
11217
11460
  }
11218
11461
 
11219
11462
  .field__suffix--filled {
11220
- padding: 0 var(--hx-space-3, 0.75rem);
11463
+ padding: 0 var(--_text-input-padding-x);
11221
11464
  }
11222
11465
 
11223
11466
  /* ─── Native Input ─── */
@@ -11227,17 +11470,17 @@ export const helixTableSectionBaseStyles = css`
11227
11470
  border: none;
11228
11471
  outline: none;
11229
11472
  background: transparent;
11230
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11473
+ padding: var(--_text-input-padding-y) var(--_text-input-padding-x);
11231
11474
  font-family: inherit;
11232
- font-size: var(--hx-font-size-md, 1rem);
11233
- color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
11475
+ font-size: var(--_text-input-font-size);
11476
+ color: var(--_text-input-color);
11234
11477
  line-height: var(--hx-line-height-normal, 1.5);
11235
11478
  min-height: var(--hx-size-10, 2.5rem);
11236
11479
  width: 100%;
11237
11480
  }
11238
11481
 
11239
11482
  .field__input::placeholder {
11240
- color: var(--hx-color-text-placeholder, #94a3b8);
11483
+ color: var(--_text-input-placeholder-color);
11241
11484
  }
11242
11485
 
11243
11486
  .field__input:focus-visible {
@@ -11246,6 +11489,12 @@ export const helixTableSectionBaseStyles = css`
11246
11489
 
11247
11490
  .field__input:disabled {
11248
11491
  cursor: not-allowed;
11492
+ background-color: var(--_text-input-disabled-bg);
11493
+ color: var(--_text-input-disabled-color);
11494
+ }
11495
+
11496
+ :host([disabled]) .field__input-wrapper {
11497
+ background-color: var(--_text-input-disabled-bg);
11249
11498
  }
11250
11499
 
11251
11500
  /* ─── Size Variants ─── */
@@ -11253,7 +11502,7 @@ export const helixTableSectionBaseStyles = css`
11253
11502
  .field--size-sm .field__input {
11254
11503
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
11255
11504
  min-height: var(--hx-size-8, 2rem);
11256
- font-size: var(--hx-input-sm-font-size, 0.875rem);
11505
+ font-size: var(--hx-text-input-sm-font-size, var(--hx-input-sm-font-size, 0.875rem));
11257
11506
  }
11258
11507
 
11259
11508
  .field--size-md .field__input {
@@ -11263,20 +11512,20 @@ export const helixTableSectionBaseStyles = css`
11263
11512
  .field--size-lg .field__input {
11264
11513
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
11265
11514
  min-height: var(--hx-size-12, 3rem);
11266
- font-size: var(--hx-input-lg-font-size, 1.125rem);
11515
+ font-size: var(--hx-text-input-lg-font-size, var(--hx-input-lg-font-size, 1.125rem));
11267
11516
  }
11268
11517
 
11269
11518
  /* ─── Help Text & Error Messages ─── */
11270
11519
 
11271
11520
  .field__help-text {
11272
11521
  font-size: var(--hx-font-size-xs, 0.75rem);
11273
- color: var(--hx-color-text-muted, #64748b);
11522
+ color: var(--_text-input-help-text-color);
11274
11523
  line-height: var(--hx-line-height-normal, 1.5);
11275
11524
  }
11276
11525
 
11277
11526
  .field__error {
11278
11527
  font-size: var(--hx-font-size-xs, 0.75rem);
11279
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
11528
+ color: var(--_text-input-error-color);
11280
11529
  line-height: var(--hx-line-height-normal, 1.5);
11281
11530
  }
11282
11531
 
@@ -11288,7 +11537,13 @@ export const helixTableSectionBaseStyles = css`
11288
11537
  }
11289
11538
  }
11290
11539
 
11291
- /* ─── High Contrast Mode (forced-colors) ─── */
11540
+ /* ─── High Contrast Mode (forced-colors) ───
11541
+ *
11542
+ * Component-specific overrides that complement the shared forcedColorsField
11543
+ * mixin (composed in static styles). The mixin handles the input/wrapper
11544
+ * core; the rules below extend it to the label / error / help-text /
11545
+ * disabled-host surfaces unique to hx-text-input.
11546
+ */
11292
11547
 
11293
11548
  @media (forced-colors: active) {
11294
11549
  .field__input-wrapper {
@@ -11348,6 +11603,42 @@ export const helixTableSectionBaseStyles = css`
11348
11603
  /* ── hx-textarea ── */
11349
11604
  :host {
11350
11605
  display: block;
11606
+
11607
+ /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
11608
+ --_textarea-bg: var(
11609
+ --hx-textarea-bg,
11610
+ var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
11611
+ );
11612
+ --_textarea-color: var(
11613
+ --hx-textarea-color,
11614
+ var(--hx-input-color, var(--hx-color-text-strong, #202b39))
11615
+ );
11616
+ --_textarea-border-color: var(
11617
+ --hx-textarea-border-color,
11618
+ var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
11619
+ );
11620
+ --_textarea-border-color-focus: var(
11621
+ --hx-textarea-border-color-focus,
11622
+ var(
11623
+ --hx-input-focus-ring-color,
11624
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
11625
+ )
11626
+ );
11627
+ --_textarea-border-color-invalid: var(
11628
+ --hx-textarea-border-color-invalid,
11629
+ var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
11630
+ );
11631
+ --_textarea-border-radius: var(
11632
+ --hx-textarea-border-radius,
11633
+ var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
11634
+ );
11635
+ --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));
11636
+ --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));
11637
+ --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));
11638
+ --_textarea-placeholder-color: var(
11639
+ --hx-textarea-placeholder-color,
11640
+ var(--hx-color-text-placeholder, #66787b)
11641
+ );
11351
11642
  }
11352
11643
 
11353
11644
  :host([disabled]) {
@@ -11363,7 +11654,10 @@ export const helixTableSectionBaseStyles = css`
11363
11654
  display: flex;
11364
11655
  flex-direction: column;
11365
11656
  gap: var(--hx-space-1, 0.25rem);
11366
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
11657
+ font-family: var(
11658
+ --hx-textarea-font-family,
11659
+ var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
11660
+ );
11367
11661
  }
11368
11662
 
11369
11663
  /* --- Label --- */
@@ -11378,12 +11672,18 @@ export const helixTableSectionBaseStyles = css`
11378
11672
  gap: var(--hx-space-1, 0.25rem);
11379
11673
  font-size: var(--hx-font-size-sm, 0.875rem);
11380
11674
  font-weight: var(--hx-font-weight-medium, 500);
11381
- color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
11675
+ color: var(
11676
+ --hx-textarea-label-color,
11677
+ var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
11678
+ );
11382
11679
  line-height: var(--hx-line-height-normal, 1.5);
11383
11680
  }
11384
11681
 
11385
11682
  .field__required-marker {
11386
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
11683
+ color: var(
11684
+ --hx-textarea-error-color,
11685
+ var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
11686
+ );
11387
11687
  font-weight: var(--hx-font-weight-bold, 700);
11388
11688
  }
11389
11689
 
@@ -11392,10 +11692,9 @@ export const helixTableSectionBaseStyles = css`
11392
11692
  .field__textarea-wrapper {
11393
11693
  display: flex;
11394
11694
  flex-direction: column;
11395
- border: var(--hx-border-width-thin, 1px) solid
11396
- var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
11397
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
11398
- background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
11695
+ border: var(--hx-border-width-thin, 1px) solid var(--_textarea-border-color);
11696
+ border-radius: var(--_textarea-border-radius);
11697
+ background-color: var(--_textarea-bg);
11399
11698
  transition:
11400
11699
  border-color var(--hx-transition-fast, 150ms ease),
11401
11700
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -11403,18 +11702,11 @@ export const helixTableSectionBaseStyles = css`
11403
11702
  }
11404
11703
 
11405
11704
  .field__textarea-wrapper:focus-within {
11406
- border-color: var(
11407
- --hx-input-focus-ring-color,
11408
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11409
- );
11705
+ border-color: var(--_textarea-border-color-focus);
11410
11706
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
11411
11707
  color-mix(
11412
11708
  in srgb,
11413
- var(
11414
- --hx-input-focus-ring-color,
11415
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
11416
- )
11417
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11709
+ var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11418
11710
  transparent
11419
11711
  );
11420
11712
  }
@@ -11422,16 +11714,15 @@ export const helixTableSectionBaseStyles = css`
11422
11714
  /* --- Error State --- */
11423
11715
 
11424
11716
  .field--error .field__textarea-wrapper {
11425
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
11717
+ border-color: var(--_textarea-border-color-invalid);
11426
11718
  }
11427
11719
 
11428
11720
  .field--error .field__textarea-wrapper:focus-within {
11429
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
11721
+ border-color: var(--_textarea-border-color-invalid);
11430
11722
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
11431
11723
  color-mix(
11432
11724
  in srgb,
11433
- var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
11434
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11725
+ var(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11435
11726
  transparent
11436
11727
  );
11437
11728
  }
@@ -11442,10 +11733,10 @@ export const helixTableSectionBaseStyles = css`
11442
11733
  border: none;
11443
11734
  outline: none;
11444
11735
  background: transparent;
11445
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11736
+ padding: var(--_textarea-padding-y) var(--_textarea-padding-x);
11446
11737
  font-family: inherit;
11447
- font-size: var(--hx-font-size-md, 1rem);
11448
- color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
11738
+ font-size: var(--_textarea-font-size);
11739
+ color: var(--_textarea-color);
11449
11740
  line-height: var(--hx-line-height-normal, 1.5);
11450
11741
  min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
11451
11742
  width: 100%;
@@ -11453,7 +11744,7 @@ export const helixTableSectionBaseStyles = css`
11453
11744
  }
11454
11745
 
11455
11746
  .field__textarea::placeholder {
11456
- color: var(--hx-color-text-placeholder, #94a3b8);
11747
+ color: var(--_textarea-placeholder-color);
11457
11748
  }
11458
11749
 
11459
11750
  .field__textarea:focus-visible {
@@ -11491,7 +11782,7 @@ export const helixTableSectionBaseStyles = css`
11491
11782
 
11492
11783
  .field__counter {
11493
11784
  font-size: var(--hx-font-size-xs, 0.75rem);
11494
- color: var(--hx-color-text-muted, #64748b);
11785
+ color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));
11495
11786
  line-height: var(--hx-line-height-normal, 1.5);
11496
11787
  text-align: end;
11497
11788
  }
@@ -11514,13 +11805,16 @@ export const helixTableSectionBaseStyles = css`
11514
11805
 
11515
11806
  .field__help-text {
11516
11807
  font-size: var(--hx-font-size-xs, 0.75rem);
11517
- color: var(--hx-color-text-muted, #64748b);
11808
+ color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));
11518
11809
  line-height: var(--hx-line-height-normal, 1.5);
11519
11810
  }
11520
11811
 
11521
11812
  .field__error {
11522
11813
  font-size: var(--hx-font-size-xs, 0.75rem);
11523
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
11814
+ color: var(
11815
+ --hx-textarea-error-color,
11816
+ var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
11817
+ );
11524
11818
  line-height: var(--hx-line-height-normal, 1.5);
11525
11819
  }
11526
11820
 
@@ -11639,11 +11933,11 @@ export const helixTableSectionBaseStyles = css`
11639
11933
  gap: var(--hx-space-1, 0.25rem);
11640
11934
  font-size: var(--hx-font-size-sm, 0.875rem);
11641
11935
  font-weight: var(--hx-font-weight-medium, 500);
11642
- color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #1e293b));
11936
+ color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
11643
11937
  line-height: var(--hx-line-height-normal, 1.5);
11644
11938
  }
11645
11939
  .field__required-marker {
11646
- color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
11940
+ color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
11647
11941
  font-weight: var(--hx-font-weight-bold, 700);
11648
11942
  }
11649
11943
  .field__combobox {
@@ -11651,7 +11945,7 @@ export const helixTableSectionBaseStyles = css`
11651
11945
  display: flex;
11652
11946
  align-items: center;
11653
11947
  border: var(--hx-border-width-thin, 1px) solid
11654
- var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
11948
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
11655
11949
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
11656
11950
  background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
11657
11951
  transition:
@@ -11670,14 +11964,14 @@ export const helixTableSectionBaseStyles = css`
11670
11964
  );
11671
11965
  }
11672
11966
  .field--error .field__combobox {
11673
- border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
11967
+ border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
11674
11968
  }
11675
11969
  .field--error .field__combobox:focus-within {
11676
- border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
11970
+ border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
11677
11971
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
11678
11972
  color-mix(
11679
11973
  in srgb,
11680
- var(--hx-time-picker-error-color, var(--hx-color-error-500))
11974
+ var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
11681
11975
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
11682
11976
  transparent
11683
11977
  );
@@ -11690,14 +11984,14 @@ export const helixTableSectionBaseStyles = css`
11690
11984
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11691
11985
  font-family: inherit;
11692
11986
  font-size: var(--hx-font-size-md, 1rem);
11693
- color: var(--hx-time-picker-color, var(--hx-color-text-strong, #1e293b));
11987
+ color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
11694
11988
  line-height: var(--hx-line-height-normal, 1.5);
11695
11989
  min-height: var(--hx-size-10, 2.5rem);
11696
11990
  width: 100%;
11697
11991
  cursor: text;
11698
11992
  }
11699
11993
  .field__input::placeholder {
11700
- color: var(--hx-color-text-placeholder, #64748b);
11994
+ color: var(--hx-color-text-placeholder, #66787b);
11701
11995
  }
11702
11996
  .field__input:disabled {
11703
11997
  cursor: not-allowed;
@@ -11709,13 +12003,13 @@ export const helixTableSectionBaseStyles = css`
11709
12003
  border: none;
11710
12004
  background: transparent;
11711
12005
  padding: 0 var(--hx-space-3, 0.75rem);
11712
- color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #64748b));
12006
+ color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
11713
12007
  cursor: pointer;
11714
12008
  height: 100%;
11715
12009
  min-height: var(--hx-size-10, 2.5rem);
11716
12010
  flex-shrink: 0;
11717
12011
  border-inline-start: var(--hx-border-width-thin, 1px) solid
11718
- var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
12012
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
11719
12013
  }
11720
12014
  .field__toggle:focus-visible {
11721
12015
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -11731,7 +12025,7 @@ export const helixTableSectionBaseStyles = css`
11731
12025
  z-index: var(--hx-z-index-dropdown, 1000);
11732
12026
  background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
11733
12027
  border: var(--hx-border-width-thin, 1px) solid
11734
- var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
12028
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
11735
12029
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
11736
12030
  box-shadow: var(
11737
12031
  --hx-time-picker-listbox-shadow,
@@ -11764,23 +12058,29 @@ export const helixTableSectionBaseStyles = css`
11764
12058
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11765
12059
  font-size: var(--hx-font-size-md, 1rem);
11766
12060
  font-family: inherit;
11767
- color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #1e293b));
12061
+ color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
11768
12062
  cursor: pointer;
11769
12063
  transition: background-color var(--hx-transition-fast, 150ms ease);
11770
12064
  line-height: var(--hx-line-height-normal, 1.5);
11771
12065
  }
11772
12066
  .field__option:hover,
11773
12067
  .field__option--active {
11774
- background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
11775
- color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
12068
+ background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
12069
+ color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));
11776
12070
  }
11777
12071
  .field__option--selected {
11778
- background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
11779
- color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
12072
+ background-color: var(
12073
+ --hx-time-picker-option-selected-bg,
12074
+ var(--hx-color-primary-100, #dbf0f0)
12075
+ );
12076
+ color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));
11780
12077
  font-weight: var(--hx-font-weight-medium, 500);
11781
12078
  }
11782
12079
  .field__option--selected.field__option--active {
11783
- background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
12080
+ background-color: var(
12081
+ --hx-time-picker-option-selected-bg,
12082
+ var(--hx-color-primary-100, #dbf0f0)
12083
+ );
11784
12084
  }
11785
12085
  @media (prefers-reduced-motion: reduce) {
11786
12086
  .field__combobox,
@@ -11794,10 +12094,10 @@ export const helixTableSectionBaseStyles = css`
11794
12094
  line-height: var(--hx-line-height-normal, 1.5);
11795
12095
  }
11796
12096
  .field__help-text {
11797
- color: var(--hx-color-text-muted, #64748b);
12097
+ color: var(--hx-color-text-muted, #4a5362);
11798
12098
  }
11799
12099
  .field__error {
11800
- color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
12100
+ color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
11801
12101
  }
11802
12102
  @media (forced-colors: active) {
11803
12103
  .field__combobox {
@@ -11860,7 +12160,7 @@ export const helixTableSectionBaseStyles = css`
11860
12160
  gap: var(--hx-space-3, 0.75rem);
11861
12161
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
11862
12162
  border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
11863
- background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0f172a));
12163
+ background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0d1825));
11864
12164
  color: var(--hx-toast-color, var(--hx-color-text-inverse, #ffffff));
11865
12165
  font-family: var(--hx-toast-font-family, var(--hx-font-family-sans, sans-serif));
11866
12166
  font-size: var(--hx-font-size-sm, 0.875rem);
@@ -11886,24 +12186,38 @@ export const helixTableSectionBaseStyles = css`
11886
12186
 
11887
12187
  /* ─── Variant overrides ─── */
11888
12188
 
12189
+ /*
12190
+ * Toast variants paint on darker brand fills (primary-600/success-700/
12191
+ * error-600) because the lighter -500 fills can't pass AA against white
12192
+ * text in the precision-cool palette. The neutral-900 on-{role} tokens
12193
+ * are tuned for the lighter -500 surfaces and would fail here (e.g.
12194
+ * neutral-900 on primary-600 = 3.07:1), so we hold fg at neutral-0
12195
+ * directly for primary/success/danger.
12196
+ * - neutral-0 on primary-600 (#0F7078) = 5.39:1 — AA pass
12197
+ * - neutral-0 on success-700 (#146831) = 6.88:1 — AA pass
12198
+ * (success-600 #0E8A4A on white = 4.41:1 — drifts under AA at 14px)
12199
+ * - neutral-0 on error-600 (#C92A2A) = 5.92:1 — AA pass
12200
+ * - neutral-900 on warning-500 (#C2711C) = 4.83:1 — AA pass
12201
+ * (warning stays on the lighter -500 surface so on-warning works)
12202
+ */
11889
12203
  .toast--success {
11890
- --hx-toast-bg: var(--hx-color-success-600, #15803d);
11891
- --hx-toast-color: var(--hx-color-text-on-success, #ffffff);
12204
+ --hx-toast-bg: var(--hx-color-success-700, #146831);
12205
+ --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
11892
12206
  }
11893
12207
 
11894
12208
  .toast--warning {
11895
- --hx-toast-bg: var(--hx-color-warning-500, #d97706);
11896
- --hx-toast-color: var(--hx-color-text-on-warning, #0f172a);
12209
+ --hx-toast-bg: var(--hx-color-warning-500, #c2711c);
12210
+ --hx-toast-color: var(--hx-color-text-on-warning, #0d1825);
11897
12211
  }
11898
12212
 
11899
12213
  .toast--danger {
11900
- --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
11901
- --hx-toast-color: var(--hx-color-text-on-error, #ffffff);
12214
+ --hx-toast-bg: var(--hx-color-error-600, #c92a2a);
12215
+ --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
11902
12216
  }
11903
12217
 
11904
12218
  .toast--info {
11905
- --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
11906
- --hx-toast-color: var(--hx-color-text-on-primary, #ffffff);
12219
+ --hx-toast-bg: var(--hx-color-primary-600, #0f7078);
12220
+ --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
11907
12221
  }
11908
12222
 
11909
12223
  /* ─── Severity Label (WCAG 1.4.1) ─── */
@@ -11996,6 +12310,7 @@ export const helixTableSectionBaseStyles = css`
11996
12310
  }
11997
12311
 
11998
12312
  /* ─── Forced Colors (Windows High Contrast) ─── */
12313
+ /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
11999
12314
 
12000
12315
  @media (forced-colors: active) {
12001
12316
  .toast {
@@ -12101,7 +12416,7 @@ export const helixToastStackStyles = css`
12101
12416
  gap: var(--hx-space-2, 0.5rem);
12102
12417
  border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
12103
12418
  border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
12104
- background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
12419
+ background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
12105
12420
  color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
12106
12421
  font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
12107
12422
  font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -12122,7 +12437,7 @@ export const helixToastStackStyles = css`
12122
12437
  outline: var(--hx-focus-ring-width, 2px) solid
12123
12438
  var(
12124
12439
  --hx-toggle-button-focus-ring-color,
12125
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
12440
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
12126
12441
  );
12127
12442
  outline-offset: var(--hx-focus-ring-offset, 2px);
12128
12443
  }
@@ -12161,49 +12476,55 @@ export const helixToastStackStyles = css`
12161
12476
  /* ─── Style Variants ─── */
12162
12477
 
12163
12478
  .button--primary {
12164
- --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
12479
+ --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
12165
12480
  --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
12166
12481
  --hx-toggle-button-border-color: transparent;
12167
12482
  }
12168
12483
 
12484
+ /*
12485
+ * secondary/ghost paint primary text on the surface (white). primary-500
12486
+ * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to
12487
+ * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500
12488
+ * for the brand affordance (3:1 non-text contrast still met).
12489
+ */
12169
12490
  .button--secondary {
12170
12491
  --hx-toggle-button-bg: transparent;
12171
- --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
12172
- --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
12492
+ --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
12493
+ --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
12173
12494
  }
12174
12495
 
12175
12496
  .button--secondary:hover {
12176
- --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
12497
+ --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);
12177
12498
  }
12178
12499
 
12179
12500
  .button--tertiary {
12180
- --hx-toggle-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
12181
- --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
12501
+ --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);
12502
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
12182
12503
  --hx-toggle-button-border-color: transparent;
12183
12504
  }
12184
12505
 
12185
12506
  .button--tertiary:hover {
12186
- --hx-toggle-button-bg: var(--hx-color-surface-raised, #e2e8f0);
12507
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
12187
12508
  }
12188
12509
 
12189
12510
  .button--ghost {
12190
12511
  --hx-toggle-button-bg: transparent;
12191
- --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
12512
+ --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
12192
12513
  --hx-toggle-button-border-color: transparent;
12193
12514
  }
12194
12515
 
12195
12516
  .button--ghost:hover {
12196
- --hx-toggle-button-bg: var(--hx-color-surface-raised, #f1f5f9);
12517
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
12197
12518
  }
12198
12519
 
12199
12520
  .button--outline {
12200
12521
  --hx-toggle-button-bg: transparent;
12201
- --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
12202
- --hx-toggle-button-border-color: var(--hx-color-border-strong, #cbd5e1);
12522
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
12523
+ --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);
12203
12524
  }
12204
12525
 
12205
12526
  .button--outline:hover {
12206
- --hx-toggle-button-bg: var(--hx-color-surface-raised, #f8fafc);
12527
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
12207
12528
  }
12208
12529
 
12209
12530
  /* ─── Pressed State ─── */
@@ -12211,12 +12532,19 @@ export const helixToastStackStyles = css`
12211
12532
  /*
12212
12533
  * Primary: already uses solid primary bg; pressed deepens to primary-700
12213
12534
  * to give clear visual feedback without introducing a new color.
12535
+ *
12536
+ * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)
12537
+ * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill
12538
+ * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast
12539
+ * precedent (commit 300e21ab0) and hx-button hover treatment.
12540
+ * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —
12541
+ * leave it alone.
12214
12542
  */
12215
12543
  .button--primary.button--pressed {
12216
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
12544
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));
12217
12545
  --hx-toggle-button-color: var(
12218
12546
  --hx-toggle-button-pressed-color,
12219
- var(--hx-color-text-on-primary, #ffffff)
12547
+ var(--hx-color-neutral-0, #ffffff)
12220
12548
  );
12221
12549
  --hx-toggle-button-border-color: transparent;
12222
12550
  }
@@ -12226,31 +12554,31 @@ export const helixToastStackStyles = css`
12226
12554
  * so the state change is immediately legible.
12227
12555
  */
12228
12556
  .button--secondary.button--pressed {
12229
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
12557
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
12230
12558
  --hx-toggle-button-color: var(
12231
12559
  --hx-toggle-button-pressed-color,
12232
12560
  var(--hx-color-text-on-primary, #ffffff)
12233
12561
  );
12234
- --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
12562
+ --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
12235
12563
  }
12236
12564
 
12237
12565
  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
12238
12566
  .button--tertiary.button--pressed {
12239
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
12567
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
12240
12568
  --hx-toggle-button-color: var(
12241
12569
  --hx-toggle-button-pressed-color,
12242
- var(--hx-color-primary-700, #1e40af)
12570
+ var(--hx-color-primary-700, #0f6363)
12243
12571
  );
12244
- --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
12245
- box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
12572
+ --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);
12573
+ box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);
12246
12574
  }
12247
12575
 
12248
12576
  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
12249
12577
  .button--ghost.button--pressed {
12250
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
12578
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
12251
12579
  --hx-toggle-button-color: var(
12252
12580
  --hx-toggle-button-pressed-color,
12253
- var(--hx-color-primary-700, #1e40af)
12581
+ var(--hx-color-primary-700, #0f6363)
12254
12582
  );
12255
12583
  --hx-toggle-button-border-color: transparent;
12256
12584
  }
@@ -12259,14 +12587,14 @@ export const helixToastStackStyles = css`
12259
12587
  .button--outline.button--pressed {
12260
12588
  --hx-toggle-button-bg: var(
12261
12589
  --hx-toggle-button-pressed-bg,
12262
- var(--hx-color-surface-sunken, #f1f5f9)
12590
+ var(--hx-color-surface-sunken, #ebeee9)
12263
12591
  );
12264
12592
  --hx-toggle-button-color: var(
12265
12593
  --hx-toggle-button-pressed-color,
12266
- var(--hx-color-text-primary, #0f172a)
12594
+ var(--hx-color-text-primary, #0d1825)
12267
12595
  );
12268
- --hx-toggle-button-border-color: var(--hx-color-text-muted, #64748b);
12269
- box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
12596
+ --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
12597
+ box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
12270
12598
  }
12271
12599
 
12272
12600
  /* ─── Disabled ─── */
@@ -12343,8 +12671,8 @@ export const helixToastStackStyles = css`
12343
12671
  z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
12344
12672
  max-width: var(--hx-tooltip-max-width, 280px);
12345
12673
  padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
12346
- background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
12347
- color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #f8fafc));
12674
+ background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));
12675
+ color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #ffffff));
12348
12676
  font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
12349
12677
  font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
12350
12678
  line-height: var(--hx-line-height-normal, 1.5);
@@ -12370,7 +12698,7 @@ export const helixToastStackStyles = css`
12370
12698
  position: absolute;
12371
12699
  width: var(--hx-tooltip-arrow-size, 8px);
12372
12700
  height: var(--hx-tooltip-arrow-size, 8px);
12373
- background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
12701
+ background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));
12374
12702
  transform: rotate(45deg);
12375
12703
  pointer-events: none;
12376
12704
  }
@@ -12382,6 +12710,7 @@ export const helixToastStackStyles = css`
12382
12710
  }
12383
12711
 
12384
12712
  /* ─── Forced Colors (Windows High Contrast) ─── */
12713
+ /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
12385
12714
 
12386
12715
  @media (forced-colors: active) {
12387
12716
  [part='tooltip'] {
@@ -12420,9 +12749,9 @@ export const helixToastStackStyles = css`
12420
12749
 
12421
12750
  .nav {
12422
12751
  background-color: var(--hx-top-nav-bg, var(--hx-color-surface-default, #ffffff));
12423
- color: var(--hx-top-nav-color, var(--hx-color-text-strong, #1e293b));
12752
+ color: var(--hx-top-nav-color, var(--hx-color-text-strong, #202b39));
12424
12753
  border-bottom: var(--hx-border-width-thin, 1px) solid
12425
- var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12754
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));
12426
12755
  font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
12427
12756
  }
12428
12757
 
@@ -12456,18 +12785,21 @@ export const helixToastStackStyles = css`
12456
12785
  background: transparent;
12457
12786
  border: none;
12458
12787
  border-radius: var(--hx-border-radius-sm, 0.25rem);
12459
- color: var(--hx-top-nav-toggle-color, var(--hx-color-text-strong, #334155));
12788
+ color: var(--hx-top-nav-toggle-color, var(--hx-color-text-strong, #202b39));
12460
12789
  cursor: pointer;
12461
12790
  line-height: 0;
12462
12791
  }
12463
12792
 
12464
12793
  .mobile-toggle:hover {
12465
- background: var(--hx-color-surface-sunken, #f1f5f9);
12794
+ background: var(--hx-top-nav-toggle-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
12466
12795
  }
12467
12796
 
12468
12797
  .mobile-toggle:focus-visible {
12469
12798
  outline: var(--hx-focus-ring-width, 2px) solid
12470
- var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
12799
+ var(
12800
+ --hx-top-nav-focus-ring-color,
12801
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
12802
+ );
12471
12803
  outline-offset: var(--hx-focus-ring-offset, 2px);
12472
12804
  }
12473
12805
 
@@ -12484,7 +12816,7 @@ export const helixToastStackStyles = css`
12484
12816
  width: 100%;
12485
12817
  padding-block: var(--hx-space-3, 0.75rem);
12486
12818
  border-top: var(--hx-border-width-thin, 1px) solid
12487
- var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12819
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));
12488
12820
  }
12489
12821
 
12490
12822
  .nav__collapsible--open {
@@ -12506,7 +12838,7 @@ export const helixToastStackStyles = css`
12506
12838
  margin-top: var(--hx-space-3, 0.75rem);
12507
12839
  padding-top: var(--hx-space-3, 0.75rem);
12508
12840
  border-top: var(--hx-border-width-thin, 1px) solid
12509
- var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12841
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));
12510
12842
  }
12511
12843
 
12512
12844
  /* ─── Desktop breakpoint ─── */
@@ -12634,7 +12966,7 @@ export const helixToastStackStyles = css`
12634
12966
 
12635
12967
  .tree:focus-visible {
12636
12968
  outline: var(--hx-focus-ring-width, 2px) solid
12637
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
12969
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
12638
12970
  outline-offset: var(--hx-focus-ring-offset, 2px);
12639
12971
  border-radius: var(--hx-border-radius-sm, 0.25rem);
12640
12972
  }