@helixui/library 3.0.0 → 3.1.0-next.67

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 (435) hide show
  1. package/custom-elements.json +6549 -318
  2. package/dist/components/hx-accordion/hx-accordion.d.ts +3 -0
  3. package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
  4. package/dist/components/hx-action-bar/hx-action-bar.d.ts +14 -0
  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 +36 -0
  8. package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
  9. package/dist/components/hx-avatar/hx-avatar.d.ts +17 -0
  10. package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
  11. package/dist/components/hx-badge/hx-badge.d.ts +35 -0
  12. package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
  13. package/dist/components/hx-banner/hx-banner.d.ts +34 -0
  14. package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
  15. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +3 -0
  16. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
  17. package/dist/components/hx-breadcrumb/index.js +1 -1
  18. package/dist/components/hx-button/hx-button.d.ts +42 -0
  19. package/dist/components/hx-button/hx-button.d.ts.map +1 -1
  20. package/dist/components/hx-button/index.js +1 -1
  21. package/dist/components/hx-button-group/hx-button-group.d.ts +2 -0
  22. package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
  23. package/dist/components/hx-card/hx-card.d.ts +28 -0
  24. package/dist/components/hx-card/hx-card.d.ts.map +1 -1
  25. package/dist/components/hx-card/index.js +1 -1
  26. package/dist/components/hx-carousel/hx-carousel.d.ts +25 -0
  27. package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
  28. package/dist/components/hx-checkbox/hx-checkbox.d.ts +31 -0
  29. package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
  30. package/dist/components/hx-checkbox/index.js +1 -1
  31. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +14 -0
  32. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
  33. package/dist/components/hx-checkbox-group/index.js +1 -1
  34. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +37 -0
  35. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
  36. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts +35 -0
  37. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
  38. package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
  39. package/dist/components/hx-code-snippet/index.js +1 -1
  40. package/dist/components/hx-color-picker/hx-color-picker.d.ts +29 -0
  41. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  42. package/dist/components/hx-combobox/hx-combobox.d.ts +49 -0
  43. package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
  44. package/dist/components/hx-combobox/index.js +1 -1
  45. package/dist/components/hx-container/hx-container.d.ts +5 -0
  46. package/dist/components/hx-container/hx-container.d.ts.map +1 -1
  47. package/dist/components/hx-copy-button/hx-copy-button.d.ts +24 -0
  48. package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
  49. package/dist/components/hx-counter/hx-counter.d.ts +7 -0
  50. package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
  51. package/dist/components/hx-data-table/hx-data-table.d.ts +29 -0
  52. package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
  53. package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
  54. package/dist/components/hx-data-table/index.js +1 -1
  55. package/dist/components/hx-date-picker/hx-date-picker.d.ts +44 -0
  56. package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
  57. package/dist/components/hx-date-picker/index.js +1 -1
  58. package/dist/components/hx-dialog/hx-dialog.d.ts +31 -0
  59. package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
  60. package/dist/components/hx-dialog/index.js +1 -1
  61. package/dist/components/hx-divider/hx-divider.d.ts +9 -0
  62. package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
  63. package/dist/components/hx-divider/index.js +1 -1
  64. package/dist/components/hx-drawer/hx-drawer.d.ts +30 -0
  65. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  66. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  67. package/dist/components/hx-drawer/index.js +1 -1
  68. package/dist/components/hx-dropdown/hx-dropdown.d.ts +6 -0
  69. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  70. package/dist/components/hx-dropdown/index.js +1 -1
  71. package/dist/components/hx-field/hx-field.d.ts +15 -0
  72. package/dist/components/hx-field/hx-field.d.ts.map +1 -1
  73. package/dist/components/hx-field/index.js +1 -1
  74. package/dist/components/hx-field-label/hx-field-label.d.ts +11 -0
  75. package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
  76. package/dist/components/hx-field-label/index.js +1 -1
  77. package/dist/components/hx-file-upload/hx-file-upload.d.ts +35 -0
  78. package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
  79. package/dist/components/hx-file-upload/index.js +1 -1
  80. package/dist/components/hx-grid/hx-grid.d.ts +5 -0
  81. package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
  82. package/dist/components/hx-help-text/hx-help-text.d.ts +8 -0
  83. package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
  84. package/dist/components/hx-help-text/index.js +1 -1
  85. package/dist/components/hx-icon/hx-icon.d.ts +5 -0
  86. package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
  87. package/dist/components/hx-icon-button/hx-icon-button.d.ts +27 -0
  88. package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
  89. package/dist/components/hx-icon-button/index.js +1 -1
  90. package/dist/components/hx-image/hx-image.d.ts +4 -0
  91. package/dist/components/hx-image/hx-image.d.ts.map +1 -1
  92. package/dist/components/hx-link/hx-link.d.ts +15 -0
  93. package/dist/components/hx-link/hx-link.d.ts.map +1 -1
  94. package/dist/components/hx-link/index.js +1 -1
  95. package/dist/components/hx-list/hx-list.d.ts +3 -0
  96. package/dist/components/hx-list/hx-list.d.ts.map +1 -1
  97. package/dist/components/hx-menu/hx-menu.d.ts +6 -0
  98. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  99. package/dist/components/hx-menu/index.js +1 -1
  100. package/dist/components/hx-meter/hx-meter.d.ts +23 -0
  101. package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
  102. package/dist/components/hx-nav/hx-nav.d.ts +29 -0
  103. package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
  104. package/dist/components/hx-number-input/hx-number-input.d.ts +34 -0
  105. package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
  106. package/dist/components/hx-number-input/index.js +1 -1
  107. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +26 -0
  108. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
  109. package/dist/components/hx-overflow-menu/index.js +1 -1
  110. package/dist/components/hx-pagination/hx-pagination.d.ts +21 -0
  111. package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
  112. package/dist/components/hx-pagination/index.js +1 -1
  113. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts +23 -0
  114. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
  115. package/dist/components/hx-phi-field/hx-phi-field.d.ts +14 -0
  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 +15 -0
  119. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  120. package/dist/components/hx-popover/index.js +1 -1
  121. package/dist/components/hx-popup/hx-popup.d.ts +1 -0
  122. package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
  123. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +17 -0
  124. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
  125. package/dist/components/hx-progress-bar/index.js +1 -1
  126. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts +15 -0
  127. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
  128. package/dist/components/hx-prose/hx-prose.d.ts +2 -0
  129. package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
  130. package/dist/components/hx-radio-group/hx-radio-group.d.ts +14 -0
  131. package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
  132. package/dist/components/hx-radio-group/index.js +1 -1
  133. package/dist/components/hx-rating/hx-rating.d.ts +13 -0
  134. package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
  135. package/dist/components/hx-rating/index.js +1 -1
  136. package/dist/components/hx-select/hx-select.d.ts +43 -0
  137. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  138. package/dist/components/hx-select/hx-select.styles.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.styles.d.ts.map +1 -1
  141. package/dist/components/hx-side-nav/hx-side-nav.d.ts +19 -0
  142. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  143. package/dist/components/hx-side-nav/index.js +1 -1
  144. package/dist/components/hx-skeleton/hx-skeleton.d.ts +5 -0
  145. package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
  146. package/dist/components/hx-slider/hx-slider.d.ts +38 -0
  147. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  148. package/dist/components/hx-slider/index.js +1 -1
  149. package/dist/components/hx-spinner/hx-spinner.d.ts +10 -0
  150. package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
  151. package/dist/components/hx-split-button/hx-split-button.d.ts +39 -0
  152. package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
  153. package/dist/components/hx-split-button/index.js +1 -1
  154. package/dist/components/hx-split-panel/hx-split-panel.d.ts +12 -0
  155. package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
  156. package/dist/components/hx-split-panel/index.js +1 -1
  157. package/dist/components/hx-stack/hx-stack.d.ts +5 -0
  158. package/dist/components/hx-stack/hx-stack.d.ts.map +1 -1
  159. package/dist/components/hx-stat/hx-stat.d.ts +24 -0
  160. package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
  161. package/dist/components/hx-stat/index.js +1 -1
  162. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +13 -0
  163. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
  164. package/dist/components/hx-status-indicator/index.js +1 -1
  165. package/dist/components/hx-steps/hx-steps.d.ts +15 -0
  166. package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
  167. package/dist/components/hx-steps/index.js +1 -1
  168. package/dist/components/hx-structured-list/hx-structured-list.d.ts +7 -0
  169. package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
  170. package/dist/components/hx-switch/hx-switch.d.ts +42 -0
  171. package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
  172. package/dist/components/hx-switch/index.js +1 -1
  173. package/dist/components/hx-table/hx-table.d.ts +14 -0
  174. package/dist/components/hx-table/hx-table.d.ts.map +1 -1
  175. package/dist/components/hx-table/index.js +1 -1
  176. package/dist/components/hx-tabs/hx-tabs.d.ts +4 -0
  177. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  178. package/dist/components/hx-tag/hx-tag.d.ts +36 -0
  179. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  180. package/dist/components/hx-text/hx-text.d.ts +22 -0
  181. package/dist/components/hx-text/hx-text.d.ts.map +1 -1
  182. package/dist/components/hx-text-input/hx-text-input.d.ts +30 -0
  183. package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
  184. package/dist/components/hx-text-input/index.js +1 -1
  185. package/dist/components/hx-textarea/hx-textarea.d.ts +27 -0
  186. package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
  187. package/dist/components/hx-textarea/index.js +1 -1
  188. package/dist/components/hx-theme/hx-theme.d.ts +3 -0
  189. package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
  190. package/dist/components/hx-theme/index.js +1 -1
  191. package/dist/components/hx-time-picker/hx-time-picker.d.ts +32 -0
  192. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  193. package/dist/components/hx-time-picker/index.js +1 -1
  194. package/dist/components/hx-toast/hx-toast.d.ts +24 -0
  195. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  196. package/dist/components/hx-toast/index.js +1 -1
  197. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +35 -0
  198. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
  199. package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
  200. package/dist/components/hx-toggle-button/index.js +1 -1
  201. package/dist/components/hx-tooltip/hx-tooltip.d.ts +13 -0
  202. package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
  203. package/dist/components/hx-tooltip/index.js +1 -1
  204. package/dist/components/hx-top-nav/hx-top-nav.d.ts +21 -0
  205. package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
  206. package/dist/components/hx-top-nav/index.js +1 -1
  207. package/dist/components/hx-tree-view/hx-tree-view.d.ts +6 -0
  208. package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
  209. package/dist/css/helix-all.css +298 -285
  210. package/dist/css/helix-core.css +26 -26
  211. package/dist/css/helix-data.css +31 -27
  212. package/dist/css/helix-feedback.css +12 -12
  213. package/dist/css/helix-forms.css +139 -133
  214. package/dist/css/helix-layout.css +3 -3
  215. package/dist/css/helix-navigation.css +35 -35
  216. package/dist/css/helix-overlay.css +32 -29
  217. package/dist/css/helix-tokens.css +12 -0
  218. package/dist/css/helix-utility.css +18 -18
  219. package/dist/css/hx-action-bar.css +3 -3
  220. package/dist/css/hx-button.css +10 -10
  221. package/dist/css/hx-card.css +6 -6
  222. package/dist/css/hx-checkbox-group.css +2 -2
  223. package/dist/css/hx-checkbox.css +5 -5
  224. package/dist/css/hx-code-snippet.css +18 -15
  225. package/dist/css/hx-combobox.css +13 -13
  226. package/dist/css/hx-data-table.css +8 -7
  227. package/dist/css/hx-date-picker.css +20 -20
  228. package/dist/css/hx-dialog.css +10 -10
  229. package/dist/css/hx-divider.css +2 -2
  230. package/dist/css/hx-drawer.css +12 -9
  231. package/dist/css/hx-dropdown.css +2 -2
  232. package/dist/css/hx-field-label.css +2 -2
  233. package/dist/css/hx-field.css +2 -2
  234. package/dist/css/hx-file-upload.css +11 -11
  235. package/dist/css/hx-help-text.css +2 -2
  236. package/dist/css/hx-icon-button.css +6 -6
  237. package/dist/css/hx-link.css +2 -2
  238. package/dist/css/hx-menu.css +2 -2
  239. package/dist/css/hx-number-input.css +12 -12
  240. package/dist/css/hx-overflow-menu.css +7 -7
  241. package/dist/css/hx-pagination.css +10 -10
  242. package/dist/css/hx-phi-field.css +2 -2
  243. package/dist/css/hx-popover.css +5 -5
  244. package/dist/css/hx-progress-bar.css +2 -2
  245. package/dist/css/hx-radio-group.css +2 -2
  246. package/dist/css/hx-rating.css +2 -2
  247. package/dist/css/hx-select.css +11 -8
  248. package/dist/css/hx-side-nav.css +9 -9
  249. package/dist/css/hx-slider.css +9 -9
  250. package/dist/css/hx-split-button.css +15 -15
  251. package/dist/css/hx-split-panel.css +3 -3
  252. package/dist/css/hx-stat.css +3 -3
  253. package/dist/css/hx-status-indicator.css +1 -1
  254. package/dist/css/hx-switch.css +4 -4
  255. package/dist/css/hx-table.css +5 -5
  256. package/dist/css/hx-text-input.css +7 -7
  257. package/dist/css/hx-textarea.css +7 -7
  258. package/dist/css/hx-time-picker.css +11 -11
  259. package/dist/css/hx-toast.css +6 -6
  260. package/dist/css/hx-toggle-button.css +17 -14
  261. package/dist/css/hx-tooltip.css +3 -3
  262. package/dist/css/hx-top-nav.css +7 -7
  263. package/dist/css/index.css +1 -1
  264. package/dist/css/manifest.json +182 -180
  265. package/dist/index.js +47 -47
  266. package/dist/shared/hx-accordion-Wt52OOZD.js.map +1 -1
  267. package/dist/shared/{hx-action-bar-BKMADbHj.js → hx-action-bar-6UzmViHI.js} +4 -4
  268. package/dist/shared/hx-action-bar-6UzmViHI.js.map +1 -0
  269. package/dist/shared/hx-alert-D7n94HwI.js.map +1 -1
  270. package/dist/shared/hx-avatar-iLYzu8MJ.js.map +1 -1
  271. package/dist/shared/hx-badge-CVCmMPyW.js.map +1 -1
  272. package/dist/shared/hx-banner-C_He7Tr4.js.map +1 -1
  273. package/dist/shared/{hx-breadcrumb-item-CldCwD1d.js → hx-breadcrumb-item-BgG5RcmA.js} +3 -3
  274. package/dist/shared/hx-breadcrumb-item-BgG5RcmA.js.map +1 -0
  275. package/dist/shared/{hx-button-Ddl-T6T-.js → hx-button-CQZswjtQ.js} +15 -15
  276. package/dist/shared/hx-button-CQZswjtQ.js.map +1 -0
  277. package/dist/shared/hx-button-group-BJOGWoMa.js.map +1 -1
  278. package/dist/shared/{hx-card-ycveujjL.js → hx-card-Dy_FuLfS.js} +23 -23
  279. package/dist/shared/hx-card-Dy_FuLfS.js.map +1 -0
  280. package/dist/shared/hx-carousel-item-D_dCv61-.js.map +1 -1
  281. package/dist/shared/{hx-checkbox-DkkoWoye.js → hx-checkbox-ZKjOF7_3.js} +17 -17
  282. package/dist/shared/{hx-checkbox-DkkoWoye.js.map → hx-checkbox-ZKjOF7_3.js.map} +1 -1
  283. package/dist/shared/{hx-checkbox-group-C3poJ-Zw.js → hx-checkbox-group-XjOBHLiP.js} +3 -3
  284. package/dist/shared/hx-checkbox-group-XjOBHLiP.js.map +1 -0
  285. package/dist/shared/hx-clinical-status-BS5lcddT.js.map +1 -1
  286. package/dist/shared/{hx-code-snippet-B7wUKzyb.js → hx-code-snippet-DssubcYM.js} +27 -24
  287. package/dist/shared/hx-code-snippet-DssubcYM.js.map +1 -0
  288. package/dist/shared/hx-color-picker-DBaKTVLr.js.map +1 -1
  289. package/dist/shared/{hx-combobox-BmgYT7Ar.js → hx-combobox-DLwnvHVd.js} +17 -17
  290. package/dist/shared/hx-combobox-DLwnvHVd.js.map +1 -0
  291. package/dist/shared/hx-container-DVI7sxfX.js.map +1 -1
  292. package/dist/shared/hx-copy-button-8deNUdwP.js.map +1 -1
  293. package/dist/shared/hx-counter-CKfl_g8K.js.map +1 -1
  294. package/dist/shared/{hx-data-table-B6h0RPn0.js → hx-data-table-CnLxo9PH.js} +77 -76
  295. package/dist/shared/hx-data-table-CnLxo9PH.js.map +1 -0
  296. package/dist/shared/{hx-date-picker-Dq2Nb68_.js → hx-date-picker-D7H7CsVH.js} +21 -21
  297. package/dist/shared/hx-date-picker-D7H7CsVH.js.map +1 -0
  298. package/dist/shared/{hx-dialog-CvIlY0Tc.js → hx-dialog-BW-jetzN.js} +33 -33
  299. package/dist/shared/hx-dialog-BW-jetzN.js.map +1 -0
  300. package/dist/shared/{hx-divider-DwpOrzMW.js → hx-divider-CvyUVcp-.js} +13 -13
  301. package/dist/shared/hx-divider-CvyUVcp-.js.map +1 -0
  302. package/dist/shared/{hx-drawer-Cx2ZJhBe.js → hx-drawer-BT52I4tk.js} +13 -10
  303. package/dist/shared/hx-drawer-BT52I4tk.js.map +1 -0
  304. package/dist/shared/{hx-dropdown-BjDrPUq5.js → hx-dropdown-BpVpL6Dz.js} +3 -3
  305. package/dist/shared/{hx-dropdown-BjDrPUq5.js.map → hx-dropdown-BpVpL6Dz.js.map} +1 -1
  306. package/dist/shared/{hx-field-Dp3qQMut.js → hx-field-BX4zE3z5.js} +7 -7
  307. package/dist/shared/hx-field-BX4zE3z5.js.map +1 -0
  308. package/dist/shared/{hx-field-label-BC8QViXv.js → hx-field-label-DtJzb1r3.js} +8 -8
  309. package/dist/shared/hx-field-label-DtJzb1r3.js.map +1 -0
  310. package/dist/shared/{hx-file-upload-B6Yl1u0i.js → hx-file-upload-BNuepoGn.js} +34 -34
  311. package/dist/shared/hx-file-upload-BNuepoGn.js.map +1 -0
  312. package/dist/shared/hx-grid-CXZf3jeK.js.map +1 -1
  313. package/dist/shared/{hx-help-text-D7eytSim.js → hx-help-text-Br3igJv5.js} +7 -7
  314. package/dist/shared/hx-help-text-Br3igJv5.js.map +1 -0
  315. package/dist/shared/hx-icon-CcyDPDYY.js.map +1 -1
  316. package/dist/shared/{hx-icon-button-BHneqPCU.js → hx-icon-button-CqXH5Wwb.js} +7 -7
  317. package/dist/shared/hx-icon-button-CqXH5Wwb.js.map +1 -0
  318. package/dist/shared/hx-image-2gt14zZd.js.map +1 -1
  319. package/dist/shared/{hx-link-BESrWK8M.js → hx-link-Bem4Gn68.js} +8 -8
  320. package/dist/shared/hx-link-Bem4Gn68.js.map +1 -0
  321. package/dist/shared/hx-list-_9qVv02L.js.map +1 -1
  322. package/dist/shared/{hx-menu-divider-Ck-9Os1t.js → hx-menu-divider-DsHWyPHy.js} +37 -37
  323. package/dist/shared/hx-menu-divider-DsHWyPHy.js.map +1 -0
  324. package/dist/shared/hx-meter-TbROk-dw.js.map +1 -1
  325. package/dist/shared/hx-nav-BcYDmjf7.js.map +1 -1
  326. package/dist/shared/{hx-nav-item-pqPasRUm.js → hx-nav-item-BTMMQv6c.js} +34 -30
  327. package/dist/shared/hx-nav-item-BTMMQv6c.js.map +1 -0
  328. package/dist/shared/{hx-number-input-mOIZ3-46.js → hx-number-input-l6jeaGWW.js} +71 -71
  329. package/dist/shared/hx-number-input-l6jeaGWW.js.map +1 -0
  330. package/dist/shared/{hx-overflow-menu-Dprb9lnT.js → hx-overflow-menu-DJ4qpgmi.js} +12 -12
  331. package/dist/shared/hx-overflow-menu-DJ4qpgmi.js.map +1 -0
  332. package/dist/shared/{hx-pagination-AguTQjYC.js → hx-pagination-5FeVFIve.js} +64 -64
  333. package/dist/shared/hx-pagination-5FeVFIve.js.map +1 -0
  334. package/dist/shared/hx-patient-banner-uE6gqLpT.js.map +1 -1
  335. package/dist/shared/{hx-phi-field-BC_XowhC.js → hx-phi-field-DxeWcRm9.js} +3 -3
  336. package/dist/shared/hx-phi-field-DxeWcRm9.js.map +1 -0
  337. package/dist/shared/{hx-popover-B2_203ct.js → hx-popover-C05QcD9m.js} +6 -6
  338. package/dist/shared/hx-popover-C05QcD9m.js.map +1 -0
  339. package/dist/shared/hx-popup-DZXpsJ1R.js.map +1 -1
  340. package/dist/shared/{hx-progress-bar-KjEkEJLy.js → hx-progress-bar-CJdwAeDg.js} +11 -11
  341. package/dist/shared/hx-progress-bar-CJdwAeDg.js.map +1 -0
  342. package/dist/shared/hx-progress-ring-3zMwvrwD.js.map +1 -1
  343. package/dist/shared/hx-prose-BCtK7YL6.js.map +1 -1
  344. package/dist/shared/{hx-radio-BBC5qZgE.js → hx-radio-QHrhL908.js} +11 -11
  345. package/dist/shared/hx-radio-QHrhL908.js.map +1 -0
  346. package/dist/shared/{hx-rating-C3E3ENJb.js → hx-rating-BO9kl9pb.js} +33 -33
  347. package/dist/shared/hx-rating-BO9kl9pb.js.map +1 -0
  348. package/dist/shared/{hx-select-CixTo7jp.js → hx-select-BuMvRDkY.js} +47 -44
  349. package/dist/shared/hx-select-BuMvRDkY.js.map +1 -0
  350. package/dist/shared/hx-skeleton-LxkI0pxr.js.map +1 -1
  351. package/dist/shared/{hx-slider-DFHuzF3N.js → hx-slider-wcF_oyNJ.js} +41 -41
  352. package/dist/shared/hx-slider-wcF_oyNJ.js.map +1 -0
  353. package/dist/shared/hx-spinner-BKjuCdZB.js.map +1 -1
  354. package/dist/shared/{hx-split-button-CGcJMmCG.js → hx-split-button-CEkQqbF9.js} +32 -32
  355. package/dist/shared/hx-split-button-CEkQqbF9.js.map +1 -0
  356. package/dist/shared/{hx-split-panel-C-1R10Mc.js → hx-split-panel-BymHlV5e.js} +4 -4
  357. package/dist/shared/hx-split-panel-BymHlV5e.js.map +1 -0
  358. package/dist/shared/hx-stack-DGfcOfWJ.js.map +1 -1
  359. package/dist/shared/{hx-stat-BTpykQAt.js → hx-stat-DTRyLF3a.js} +8 -8
  360. package/dist/shared/hx-stat-DTRyLF3a.js.map +1 -0
  361. package/dist/shared/{hx-status-indicator-X2QEWNFt.js → hx-status-indicator-DIGRGM2G.js} +6 -6
  362. package/dist/shared/{hx-status-indicator-X2QEWNFt.js.map → hx-status-indicator-DIGRGM2G.js.map} +1 -1
  363. package/dist/shared/{hx-step-CRNQlmSo.js → hx-step-D15gtcLm.js} +33 -33
  364. package/dist/shared/hx-step-D15gtcLm.js.map +1 -0
  365. package/dist/shared/hx-structured-list-CqNbaEXg.js.map +1 -1
  366. package/dist/shared/{hx-switch-DqOD9JR7.js → hx-switch-CbunfMHW.js} +5 -5
  367. package/dist/shared/hx-switch-CbunfMHW.js.map +1 -0
  368. package/dist/shared/hx-tab-panel-BIzKfW5i.js.map +1 -1
  369. package/dist/shared/hx-tag-CgnrNnte.js.map +1 -1
  370. package/dist/shared/{hx-td-Bra35cH4.js → hx-td-B737T0_c.js} +45 -45
  371. package/dist/shared/hx-td-B737T0_c.js.map +1 -0
  372. package/dist/shared/hx-text-DMC2CPlL.js.map +1 -1
  373. package/dist/shared/{hx-text-input--q0GH78x.js → hx-text-input-eSPVURd5.js} +8 -8
  374. package/dist/shared/hx-text-input-eSPVURd5.js.map +1 -0
  375. package/dist/shared/{hx-textarea-CK621vSL.js → hx-textarea-C4DjRmo4.js} +12 -12
  376. package/dist/shared/hx-textarea-C4DjRmo4.js.map +1 -0
  377. package/dist/shared/{hx-theme-DfEy-SJA.js → hx-theme-BiyQ7UUK.js} +46 -35
  378. package/dist/shared/hx-theme-BiyQ7UUK.js.map +1 -0
  379. package/dist/shared/{hx-time-picker-tPUfgElQ.js → hx-time-picker-BtbHX7A4.js} +28 -28
  380. package/dist/shared/hx-time-picker-BtbHX7A4.js.map +1 -0
  381. package/dist/shared/{hx-toggle-button-L-uBJr-a.js → hx-toggle-button-FOvw-ebx.js} +26 -23
  382. package/dist/shared/hx-toggle-button-FOvw-ebx.js.map +1 -0
  383. package/dist/shared/{hx-tooltip-B_zfKvwc.js → hx-tooltip-BoZi2crX.js} +4 -4
  384. package/dist/shared/hx-tooltip-BoZi2crX.js.map +1 -0
  385. package/dist/shared/{hx-top-nav-CATbRvIv.js → hx-top-nav-Cd9zvv1B.js} +20 -20
  386. package/dist/shared/hx-top-nav-Cd9zvv1B.js.map +1 -0
  387. package/dist/shared/hx-tree-item-A45WCiBu.js.map +1 -1
  388. package/dist/shared/{toast-factory-BPPnG3mM.js → toast-factory-M373dTcz.js} +28 -28
  389. package/dist/shared/toast-factory-M373dTcz.js.map +1 -0
  390. package/figma-inventory.json +26629 -0
  391. package/package.json +8 -3
  392. package/dist/shared/hx-action-bar-BKMADbHj.js.map +0 -1
  393. package/dist/shared/hx-breadcrumb-item-CldCwD1d.js.map +0 -1
  394. package/dist/shared/hx-button-Ddl-T6T-.js.map +0 -1
  395. package/dist/shared/hx-card-ycveujjL.js.map +0 -1
  396. package/dist/shared/hx-checkbox-group-C3poJ-Zw.js.map +0 -1
  397. package/dist/shared/hx-code-snippet-B7wUKzyb.js.map +0 -1
  398. package/dist/shared/hx-combobox-BmgYT7Ar.js.map +0 -1
  399. package/dist/shared/hx-data-table-B6h0RPn0.js.map +0 -1
  400. package/dist/shared/hx-date-picker-Dq2Nb68_.js.map +0 -1
  401. package/dist/shared/hx-dialog-CvIlY0Tc.js.map +0 -1
  402. package/dist/shared/hx-divider-DwpOrzMW.js.map +0 -1
  403. package/dist/shared/hx-drawer-Cx2ZJhBe.js.map +0 -1
  404. package/dist/shared/hx-field-Dp3qQMut.js.map +0 -1
  405. package/dist/shared/hx-field-label-BC8QViXv.js.map +0 -1
  406. package/dist/shared/hx-file-upload-B6Yl1u0i.js.map +0 -1
  407. package/dist/shared/hx-help-text-D7eytSim.js.map +0 -1
  408. package/dist/shared/hx-icon-button-BHneqPCU.js.map +0 -1
  409. package/dist/shared/hx-link-BESrWK8M.js.map +0 -1
  410. package/dist/shared/hx-menu-divider-Ck-9Os1t.js.map +0 -1
  411. package/dist/shared/hx-nav-item-pqPasRUm.js.map +0 -1
  412. package/dist/shared/hx-number-input-mOIZ3-46.js.map +0 -1
  413. package/dist/shared/hx-overflow-menu-Dprb9lnT.js.map +0 -1
  414. package/dist/shared/hx-pagination-AguTQjYC.js.map +0 -1
  415. package/dist/shared/hx-phi-field-BC_XowhC.js.map +0 -1
  416. package/dist/shared/hx-popover-B2_203ct.js.map +0 -1
  417. package/dist/shared/hx-progress-bar-KjEkEJLy.js.map +0 -1
  418. package/dist/shared/hx-radio-BBC5qZgE.js.map +0 -1
  419. package/dist/shared/hx-rating-C3E3ENJb.js.map +0 -1
  420. package/dist/shared/hx-select-CixTo7jp.js.map +0 -1
  421. package/dist/shared/hx-slider-DFHuzF3N.js.map +0 -1
  422. package/dist/shared/hx-split-button-CGcJMmCG.js.map +0 -1
  423. package/dist/shared/hx-split-panel-C-1R10Mc.js.map +0 -1
  424. package/dist/shared/hx-stat-BTpykQAt.js.map +0 -1
  425. package/dist/shared/hx-step-CRNQlmSo.js.map +0 -1
  426. package/dist/shared/hx-switch-DqOD9JR7.js.map +0 -1
  427. package/dist/shared/hx-td-Bra35cH4.js.map +0 -1
  428. package/dist/shared/hx-text-input--q0GH78x.js.map +0 -1
  429. package/dist/shared/hx-textarea-CK621vSL.js.map +0 -1
  430. package/dist/shared/hx-theme-DfEy-SJA.js.map +0 -1
  431. package/dist/shared/hx-time-picker-tPUfgElQ.js.map +0 -1
  432. package/dist/shared/hx-toggle-button-L-uBJr-a.js.map +0 -1
  433. package/dist/shared/hx-tooltip-B_zfKvwc.js.map +0 -1
  434. package/dist/shared/hx-top-nav-CATbRvIv.js.map +0 -1
  435. package/dist/shared/toast-factory-BPPnG3mM.js.map +0 -1
package/dist/css/helix-all.css CHANGED
@@ -70,10 +70,10 @@
70
70
  /* ─── Variant: outlined ─── */
71
71
 
72
72
  .base--outlined {
73
- background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
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-neutral-200, #e2e8f0)
76
+ var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0)
77
77
  );
78
78
  border-radius: var(--hx-border-radius-md, 0.375rem);
79
79
  }
@@ -81,7 +81,7 @@
81
81
  /* ─── Variant: filled ─── */
82
82
 
83
83
  .base--filled {
84
- background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
84
+ background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f8fafc));
85
85
  border-radius: var(--hx-border-radius-md, 0.375rem);
86
86
  }
87
87
 
@@ -1100,7 +1100,7 @@
1100
1100
 
1101
1101
  .button--primary {
1102
1102
  --hx-button-bg: var(--hx-color-primary-500);
1103
- --hx-button-color: var(--hx-color-neutral-0);
1103
+ --hx-button-color: var(--hx-color-text-on-primary);
1104
1104
  --hx-button-border-color: transparent;
1105
1105
  }
1106
1106
 
@@ -1111,22 +1111,22 @@
1111
1111
  }
1112
1112
 
1113
1113
  .button--secondary:hover {
1114
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));
1114
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1115
1115
  }
1116
1116
 
1117
1117
  .button--tertiary {
1118
- --hx-button-bg: var(--hx-color-neutral-100);
1119
- --hx-button-color: var(--hx-color-neutral-900);
1118
+ --hx-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
1119
+ --hx-button-color: var(--hx-color-text-primary, #0f172a);
1120
1120
  --hx-button-border-color: transparent;
1121
1121
  }
1122
1122
 
1123
1123
  .button--tertiary:hover {
1124
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));
1124
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1125
1125
  }
1126
1126
 
1127
1127
  .button--danger {
1128
1128
  --hx-button-bg: var(--hx-color-error-500);
1129
- --hx-button-color: var(--hx-color-neutral-0);
1129
+ --hx-button-color: var(--hx-color-text-on-error);
1130
1130
  --hx-button-border-color: transparent;
1131
1131
  }
1132
1132
 
@@ -1141,17 +1141,17 @@
1141
1141
  }
1142
1142
 
1143
1143
  .button--ghost:hover {
1144
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));
1144
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1145
1145
  }
1146
1146
 
1147
1147
  .button--outline {
1148
1148
  --hx-button-bg: transparent;
1149
- --hx-button-color: var(--hx-color-neutral-900);
1150
- --hx-button-border-color: var(--hx-color-neutral-300);
1149
+ --hx-button-color: var(--hx-color-text-primary, #0f172a);
1150
+ --hx-button-border-color: var(--hx-color-border-strong, #94a3b8);
1151
1151
  }
1152
1152
 
1153
1153
  .button--outline:hover {
1154
- --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));
1154
+ --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
1155
1155
  }
1156
1156
 
1157
1157
  .button--primary:hover {
@@ -1420,17 +1420,17 @@
1420
1420
  :host {
1421
1421
  display: block;
1422
1422
  color: var(--hx-card-color, inherit);
1423
- background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
1423
+ background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
1424
1424
  }
1425
1425
 
1426
1426
  .card {
1427
1427
  display: flex;
1428
1428
  flex-direction: column;
1429
1429
  gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
1430
- background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
1431
- color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
1430
+ background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
1431
+ color: var(--hx-card-color, var(--hx-color-text-strong, #1e293b));
1432
1432
  border: var(--hx-border-width-thin, 1px) solid
1433
- var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
1433
+ var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
1434
1434
  border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
1435
1435
  overflow: hidden;
1436
1436
  font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
@@ -1556,7 +1556,7 @@
1556
1556
  flex: 1;
1557
1557
  font-size: var(--hx-font-size-md, 1rem);
1558
1558
  line-height: var(--hx-line-height-normal, 1.5);
1559
- color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
1559
+ color: var(--hx-card-color, var(--hx-color-text-secondary, #475569));
1560
1560
  }
1561
1561
 
1562
1562
  .card__footer {
@@ -1574,7 +1574,7 @@
1574
1574
  padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
1575
1575
  padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
1576
1576
  border-top: var(--hx-border-width-thin, 1px) solid
1577
- var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
1577
+ var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
1578
1578
  margin-top: auto;
1579
1579
  }
1580
1580
 
@@ -1884,9 +1884,9 @@
1884
1884
  width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
1885
1885
  height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
1886
1886
  border: var(--hx-border-width-medium, 2px) solid
1887
- var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #cbd5e1));
1887
+ var(--hx-checkbox-border-color, var(--hx-color-border-strong, #cbd5e1));
1888
1888
  border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
1889
- background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
1889
+ background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
1890
1890
  transition:
1891
1891
  background-color var(--hx-transition-fast, 150ms ease),
1892
1892
  border-color var(--hx-transition-fast, 150ms ease),
@@ -1956,7 +1956,7 @@
1956
1956
  width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
1957
1957
  height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
1958
1958
  fill: none;
1959
- stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
1959
+ stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
1960
1960
  stroke-width: 2.5;
1961
1961
  stroke-linecap: round;
1962
1962
  stroke-linejoin: round;
@@ -1975,7 +1975,7 @@
1975
1975
  .checkbox__label {
1976
1976
  font-size: var(--hx-font-size-sm, 0.875rem);
1977
1977
  font-weight: var(--hx-font-weight-medium, 500);
1978
- color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #334155));
1978
+ color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #334155));
1979
1979
  line-height: var(--hx-line-height-normal, 1.5);
1980
1980
  user-select: none;
1981
1981
  -webkit-user-select: none;
@@ -1990,7 +1990,7 @@
1990
1990
 
1991
1991
  .checkbox__help-text {
1992
1992
  font-size: var(--hx-font-size-xs, 0.75rem);
1993
- color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #64748b));
1993
+ color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #64748b));
1994
1994
  line-height: var(--hx-line-height-normal, 1.5);
1995
1995
  padding-inline-start: calc(
1996
1996
  var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -2143,7 +2143,7 @@
2143
2143
  gap: var(--hx-space-1);
2144
2144
  font-size: var(--hx-font-size-sm);
2145
2145
  font-weight: var(--hx-font-weight-medium);
2146
- color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));
2146
+ color: var(--hx-checkbox-group-label-color, var(--hx-color-text-strong));
2147
2147
  line-height: var(--hx-line-height-normal);
2148
2148
  padding: 0;
2149
2149
  margin-bottom: var(--hx-space-1);
@@ -2177,7 +2177,7 @@
2177
2177
 
2178
2178
  .fieldset__help-text {
2179
2179
  font-size: var(--hx-font-size-xs);
2180
- color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
2180
+ color: var(--hx-checkbox-group-help-text-color, var(--hx-color-text-muted));
2181
2181
  line-height: var(--hx-line-height-normal);
2182
2182
  }
2183
2183
 
@@ -2504,8 +2504,8 @@
2504
2504
  display: inline;
2505
2505
  font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
2506
2506
  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-neutral-100, #f1f5f9));
2508
- color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
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));
2509
2509
  padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
2510
2510
  var(--hx-code-snippet-inline-padding-x, 0.375em);
2511
2511
  border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -2515,7 +2515,7 @@
2515
2515
 
2516
2516
  .code-snippet {
2517
2517
  position: relative;
2518
- background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
2518
+ background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0f172a));
2519
2519
  border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
2520
2520
  overflow: hidden;
2521
2521
  }
@@ -2555,7 +2555,7 @@
2555
2555
  font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
2556
2556
  font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
2557
2557
  line-height: var(--hx-line-height-relaxed, 1.75);
2558
- color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
2558
+ color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));
2559
2559
  tab-size: var(--hx-code-snippet-tab-size, 2);
2560
2560
  }
2561
2561
 
@@ -2569,10 +2569,11 @@
2569
2569
  min-width: var(--hx-touch-target-min, 2.75rem);
2570
2570
  min-height: var(--hx-touch-target-min, 2.75rem);
2571
2571
  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-neutral-600, #475569);
2572
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
2573
2573
  border-radius: var(--hx-border-radius-sm, 0.25rem);
2574
- background-color: var(--hx-color-neutral-800, #1e293b);
2575
- color: var(--hx-color-neutral-200, #e2e8f0);
2574
+ /* 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);
2576
+ color: var(--hx-color-text-inverse, #ffffff);
2576
2577
  font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
2577
2578
  font-size: var(--hx-font-size-xs, 0.75rem);
2578
2579
  font-weight: var(--hx-font-weight-medium, 500);
@@ -2587,8 +2588,9 @@
2587
2588
  }
2588
2589
 
2589
2590
  .code-snippet__copy-button:hover {
2590
- background-color: var(--hx-color-neutral-700, #334155);
2591
- border-color: var(--hx-color-neutral-500, #64748b);
2591
+ /* 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);
2592
2594
  }
2593
2595
 
2594
2596
  .code-snippet__copy-button:focus-visible {
@@ -2612,9 +2614,10 @@
2612
2614
  min-height: var(--hx-touch-target-min, 2.75rem);
2613
2615
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
2614
2616
  border: none;
2615
- border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
2616
- background-color: var(--hx-color-neutral-800, #1e293b);
2617
- color: var(--hx-color-neutral-300, #cbd5e1);
2617
+ border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #94a3b8);
2618
+ /* 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);
2620
+ color: var(--hx-color-text-inverse, #ffffff);
2618
2621
  font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
2619
2622
  font-size: var(--hx-font-size-sm, 0.875rem);
2620
2623
  font-weight: var(--hx-font-weight-medium, 500);
@@ -2624,8 +2627,8 @@
2624
2627
  }
2625
2628
 
2626
2629
  .code-snippet__expand-button:hover {
2627
- background-color: var(--hx-color-neutral-700, #334155);
2628
- color: var(--hx-color-neutral-100, #f1f5f9);
2630
+ background-color: var(--hx-color-surface-inverse, #0f172a);
2631
+ color: var(--hx-color-text-inverse, #ffffff);
2629
2632
  }
2630
2633
 
2631
2634
  .code-snippet__expand-button:focus-visible {
@@ -2640,7 +2643,7 @@
2640
2643
  display: inline-block;
2641
2644
  min-width: var(--hx-space-8, 2rem);
2642
2645
  padding-inline-end: var(--hx-space-3, 0.75rem);
2643
- color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
2646
+ color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #64748b));
2644
2647
  user-select: none;
2645
2648
  text-align: end;
2646
2649
  }
@@ -2991,7 +2994,7 @@
2991
2994
  gap: var(--hx-space-1, 0.25rem);
2992
2995
  font-size: var(--hx-font-size-sm, 0.875rem);
2993
2996
  font-weight: var(--hx-font-weight-medium, 500);
2994
- color: var(--hx-combobox-label-color, var(--hx-color-neutral-700, #334155));
2997
+ color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #334155));
2995
2998
  line-height: var(--hx-line-height-normal, 1.5);
2996
2999
  }
2997
3000
  .field__required-marker {
@@ -3003,9 +3006,9 @@
3003
3006
  display: flex;
3004
3007
  align-items: center;
3005
3008
  border: var(--hx-border-width-thin, 1px) solid
3006
- var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
3009
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
3007
3010
  border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
3008
- background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));
3011
+ background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
3009
3012
  transition:
3010
3013
  border-color var(--hx-transition-fast, 150ms ease),
3011
3014
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3044,7 +3047,7 @@
3044
3047
  display: flex;
3045
3048
  align-items: center;
3046
3049
  padding: 0 var(--hx-space-2, 0.5rem);
3047
- color: var(--hx-color-neutral-500, #64748b);
3050
+ color: var(--hx-color-text-muted, #64748b);
3048
3051
  flex-shrink: 0;
3049
3052
  }
3050
3053
  .field__input {
@@ -3057,11 +3060,11 @@
3057
3060
  font-family: inherit;
3058
3061
  font-size: var(--hx-font-size-md, 1rem);
3059
3062
  line-height: var(--hx-line-height-normal, 1.5);
3060
- color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
3063
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
3061
3064
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3062
3065
  }
3063
3066
  .field__input::placeholder {
3064
- color: var(--hx-color-neutral-400, #94a3b8);
3067
+ color: var(--hx-color-text-placeholder, #94a3b8);
3065
3068
  }
3066
3069
  .field__input--sm {
3067
3070
  min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -3080,7 +3083,7 @@
3080
3083
  justify-content: center;
3081
3084
  margin-inline-end: var(--hx-space-2, 0.5rem);
3082
3085
  flex-shrink: 0;
3083
- color: var(--hx-color-neutral-400, #94a3b8);
3086
+ color: var(--hx-color-text-placeholder, #94a3b8);
3084
3087
  }
3085
3088
  .field__clear-button {
3086
3089
  width: 1.25rem;
@@ -3093,7 +3096,7 @@
3093
3096
  transition: color var(--hx-transition-fast, 150ms ease);
3094
3097
  }
3095
3098
  .field__clear-button:hover {
3096
- color: var(--hx-color-neutral-700, #334155);
3099
+ color: var(--hx-color-text-strong, #334155);
3097
3100
  }
3098
3101
  .field__clear-button:focus-visible {
3099
3102
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -3128,9 +3131,9 @@
3128
3131
  left: 0;
3129
3132
  right: 0;
3130
3133
  z-index: var(--hx-z-index-dropdown, 1000);
3131
- background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
3134
+ background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
3132
3135
  border: var(--hx-border-width-thin, 1px) solid
3133
- var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
3136
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
3134
3137
  border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
3135
3138
  box-shadow: var(
3136
3139
  --hx-combobox-listbox-shadow,
@@ -3155,7 +3158,7 @@
3155
3158
  gap: var(--hx-space-2, 0.5rem);
3156
3159
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3157
3160
  font-size: var(--hx-font-size-md, 1rem);
3158
- color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
3161
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
3159
3162
  cursor: pointer;
3160
3163
  user-select: none;
3161
3164
  -webkit-user-select: none;
@@ -3191,7 +3194,7 @@
3191
3194
  .field__no-options {
3192
3195
  padding: var(--hx-space-3, 0.75rem);
3193
3196
  text-align: center;
3194
- color: var(--hx-color-neutral-400, #94a3b8);
3197
+ color: var(--hx-color-text-placeholder, #94a3b8);
3195
3198
  font-size: var(--hx-font-size-sm, 0.875rem);
3196
3199
  }
3197
3200
  .field__sr-only {
@@ -3211,7 +3214,7 @@
3211
3214
  line-height: var(--hx-line-height-normal, 1.5);
3212
3215
  }
3213
3216
  .field__help-text {
3214
- color: var(--hx-color-neutral-500, #64748b);
3217
+ color: var(--hx-color-text-muted, #64748b);
3215
3218
  }
3216
3219
  .field__error {
3217
3220
  color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
@@ -3682,14 +3685,14 @@
3682
3685
  /* ─── Head ─── */
3683
3686
 
3684
3687
  thead {
3685
- background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
3688
+ background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
3686
3689
  }
3687
3690
 
3688
3691
  :host([sticky-header]) thead th {
3689
3692
  position: sticky;
3690
3693
  top: 0;
3691
3694
  z-index: 1;
3692
- background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
3695
+ background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
3693
3696
  }
3694
3697
 
3695
3698
  /* ─── Cells ─── */
@@ -3699,18 +3702,18 @@
3699
3702
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
3700
3703
  text-align: start;
3701
3704
  border-bottom: var(--hx-border-width-thin, 1px) solid
3702
- var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
3705
+ var(--hx-data-table-border-color, var(--hx-color-border-default, #e2e8f0));
3703
3706
  vertical-align: middle;
3704
3707
  }
3705
3708
 
3706
3709
  th {
3707
3710
  font-weight: var(--hx-font-weight-semibold, 600);
3708
- color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
3711
+ color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #334155));
3709
3712
  white-space: nowrap;
3710
3713
  }
3711
3714
 
3712
3715
  td {
3713
- color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
3716
+ color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0f172a));
3714
3717
  }
3715
3718
 
3716
3719
  /* ─── Checkbox Column ─── */
@@ -3784,7 +3787,7 @@
3784
3787
  }
3785
3788
 
3786
3789
  tbody tr:hover {
3787
- background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
3790
+ background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
3788
3791
  }
3789
3792
 
3790
3793
  tbody tr[aria-selected='true'] {
@@ -3806,6 +3809,7 @@
3806
3809
  display: block;
3807
3810
  height: 1em;
3808
3811
  border-radius: var(--hx-border-radius-sm, 2px);
3812
+ /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */
3809
3813
  background: linear-gradient(
3810
3814
  90deg,
3811
3815
  var(--hx-color-neutral-200, #e2e8f0) 25%,
@@ -3859,7 +3863,7 @@
3859
3863
 
3860
3864
  .empty-cell {
3861
3865
  text-align: center;
3862
- color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
3866
+ color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #475569));
3863
3867
  padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
3864
3868
  }
3865
3869
 
@@ -3926,7 +3930,7 @@
3926
3930
  gap: var(--hx-space-1, 0.25rem);
3927
3931
  font-size: var(--hx-font-size-sm, 0.875rem);
3928
3932
  font-weight: var(--hx-font-weight-medium, 500);
3929
- color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #334155));
3933
+ color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #334155));
3930
3934
  line-height: var(--hx-line-height-normal, 1.5);
3931
3935
  }
3932
3936
 
@@ -3943,9 +3947,9 @@
3943
3947
  display: flex;
3944
3948
  align-items: stretch;
3945
3949
  border: var(--hx-border-width-thin, 1px) solid
3946
- var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
3950
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
3947
3951
  border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
3948
- background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
3952
+ background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
3949
3953
  transition:
3950
3954
  border-color var(--hx-transition-fast, 150ms ease),
3951
3955
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3996,7 +4000,7 @@
3996
4000
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3997
4001
  font-family: inherit;
3998
4002
  font-size: var(--hx-font-size-md, 1rem);
3999
- color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #1e293b));
4003
+ color: var(--hx-date-picker-color, var(--hx-color-text-strong, #1e293b));
4000
4004
  line-height: var(--hx-line-height-normal, 1.5);
4001
4005
  min-height: var(--hx-size-10, 2.5rem);
4002
4006
  width: 100%;
@@ -4004,7 +4008,7 @@
4004
4008
  }
4005
4009
 
4006
4010
  .field__input::placeholder {
4007
- color: var(--hx-color-neutral-400, #94a3b8);
4011
+ color: var(--hx-color-text-placeholder, #94a3b8);
4008
4012
  }
4009
4013
 
4010
4014
  .field__input:disabled {
@@ -4022,9 +4026,9 @@
4022
4026
  padding: 0 var(--hx-space-3, 0.75rem);
4023
4027
  border: none;
4024
4028
  border-left: var(--hx-border-width-thin, 1px) solid
4025
- var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
4029
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
4026
4030
  background: transparent;
4027
- color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
4031
+ color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #64748b));
4028
4032
  cursor: pointer;
4029
4033
  flex-shrink: 0;
4030
4034
  transition: color var(--hx-transition-fast, 150ms ease);
@@ -4048,7 +4052,7 @@
4048
4052
  }
4049
4053
 
4050
4054
  .field__trigger:hover:not(:disabled) {
4051
- color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
4055
+ color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #334155));
4052
4056
  background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
4053
4057
  }
4054
4058
 
@@ -4066,9 +4070,9 @@
4066
4070
  left: 0;
4067
4071
  z-index: var(--hx-z-index-dropdown, 1000);
4068
4072
  min-width: var(--hx-date-picker-calendar-min-width, 18rem);
4069
- background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
4073
+ background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
4070
4074
  border: var(--hx-border-width-thin, 1px) solid
4071
- var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
4075
+ var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #e2e8f0));
4072
4076
  border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
4073
4077
  box-shadow: var(
4074
4078
  --hx-date-picker-calendar-shadow,
@@ -4127,14 +4131,14 @@
4127
4131
  }
4128
4132
 
4129
4133
  .calendar__nav-btn {
4130
- color: var(--hx-color-neutral-600, #475569);
4134
+ color: var(--hx-color-text-secondary, #475569);
4131
4135
  font-size: var(--hx-font-size-lg, 1.125rem);
4132
4136
  line-height: 1;
4133
4137
  }
4134
4138
 
4135
4139
  .calendar__nav-btn:hover {
4136
- background-color: var(--hx-color-neutral-100, #f1f5f9);
4137
- color: var(--hx-color-neutral-900, #0f172a);
4140
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
4141
+ color: var(--hx-color-text-primary, #0f172a);
4138
4142
  }
4139
4143
 
4140
4144
  :is(.calendar__nav-btn, .calendar__day):focus-visible {
@@ -4155,7 +4159,7 @@
4155
4159
  .calendar__month-label {
4156
4160
  font-size: var(--hx-font-size-sm, 0.875rem);
4157
4161
  font-weight: var(--hx-font-weight-semibold, 600);
4158
- color: var(--hx-color-neutral-800, #1e293b);
4162
+ color: var(--hx-color-text-strong, #1e293b);
4159
4163
  flex: 1;
4160
4164
  text-align: center;
4161
4165
  }
@@ -4180,7 +4184,7 @@
4180
4184
  height: var(--hx-size-8, 2rem);
4181
4185
  font-size: var(--hx-font-size-xs, 0.75rem);
4182
4186
  font-weight: var(--hx-font-weight-semibold, 600);
4183
- color: var(--hx-color-neutral-500, #64748b);
4187
+ color: var(--hx-color-text-muted, #64748b);
4184
4188
  text-transform: uppercase;
4185
4189
  letter-spacing: 0.05em;
4186
4190
  }
@@ -4190,20 +4194,20 @@
4190
4194
  ============================================================ */
4191
4195
 
4192
4196
  .calendar__day {
4193
- color: var(--hx-color-neutral-800, #1e293b);
4197
+ color: var(--hx-color-text-strong, #1e293b);
4194
4198
  font-size: var(--hx-font-size-sm, 0.875rem);
4195
4199
  font-family: inherit;
4196
4200
  position: relative;
4197
4201
  }
4198
4202
 
4199
4203
  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
4200
- background-color: var(--hx-color-neutral-100, #f1f5f9);
4201
- color: var(--hx-color-neutral-900, #0f172a);
4204
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
4205
+ color: var(--hx-color-text-primary, #0f172a);
4202
4206
  }
4203
4207
 
4204
4208
  .calendar__day--selected {
4205
4209
  background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
4206
- color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
4210
+ color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
4207
4211
  font-weight: var(--hx-font-weight-semibold, 600);
4208
4212
  }
4209
4213
 
@@ -4261,7 +4265,7 @@
4261
4265
  }
4262
4266
 
4263
4267
  .field__help-text {
4264
- color: var(--hx-color-neutral-500, #64748b);
4268
+ color: var(--hx-color-text-muted, #64748b);
4265
4269
  }
4266
4270
 
4267
4271
  .field__error {
@@ -4349,8 +4353,8 @@
4349
4353
  display: flex;
4350
4354
  flex-direction: column;
4351
4355
  position: relative;
4352
- background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));
4353
- color: var(--hx-dialog-color, var(--hx-color-neutral-900));
4356
+ background-color: var(--hx-dialog-bg, var(--hx-color-surface-default));
4357
+ color: var(--hx-dialog-color, var(--hx-color-text-primary));
4354
4358
  border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
4355
4359
  box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
4356
4360
  width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
@@ -4385,7 +4389,7 @@
4385
4389
  /* ─── Native backdrop (modal mode) ─── */
4386
4390
 
4387
4391
  dialog::backdrop {
4388
- background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
4392
+ background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
4389
4393
  opacity: 0;
4390
4394
  transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
4391
4395
  }
@@ -4405,7 +4409,7 @@
4405
4409
  .dialog-backdrop {
4406
4410
  position: fixed;
4407
4411
  inset: 0;
4408
- background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
4412
+ background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
4409
4413
  opacity: var(--hx-dialog-backdrop-opacity, 0.5);
4410
4414
  /* D5 — backdrop z-index must be lower than the dialog element's z-index */
4411
4415
  z-index: var(--hx-z-index-modal, 1400);
@@ -4419,7 +4423,7 @@
4419
4423
  justify-content: space-between;
4420
4424
  padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
4421
4425
  border-bottom: var(--hx-border-width-thin) solid
4422
- var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));
4426
+ var(--hx-dialog-header-border-color, var(--hx-color-border-default));
4423
4427
  gap: var(--hx-space-4);
4424
4428
  flex-shrink: 0;
4425
4429
  }
@@ -4430,7 +4434,7 @@
4430
4434
  font-size: var(--hx-font-size-lg);
4431
4435
  font-weight: var(--hx-font-weight-semibold);
4432
4436
  line-height: var(--hx-line-height-tight);
4433
- color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));
4437
+ color: var(--hx-dialog-heading-color, var(--hx-color-text-primary));
4434
4438
  flex: 1 1 auto;
4435
4439
  }
4436
4440
 
@@ -4452,7 +4456,7 @@
4452
4456
  border: none;
4453
4457
  border-radius: var(--hx-border-radius-sm, 0.25rem);
4454
4458
  cursor: pointer;
4455
- color: var(--hx-color-neutral-500, #64748b);
4459
+ color: var(--hx-color-text-muted, #64748b);
4456
4460
  font-size: var(--hx-font-size-xl, 1.25rem);
4457
4461
  line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
4458
4462
  transition:
@@ -4465,8 +4469,8 @@
4465
4469
  }
4466
4470
 
4467
4471
  .dialog__close-btn:hover {
4468
- color: var(--hx-color-neutral-900);
4469
- background-color: var(--hx-color-neutral-100);
4472
+ color: var(--hx-color-text-primary);
4473
+ background-color: var(--hx-color-surface-sunken);
4470
4474
  }
4471
4475
 
4472
4476
  .dialog__close-btn:focus-visible {
@@ -4496,7 +4500,7 @@
4496
4500
  gap: var(--hx-space-3);
4497
4501
  padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
4498
4502
  border-top: var(--hx-border-width-thin) solid
4499
- var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));
4503
+ var(--hx-dialog-footer-border-color, var(--hx-color-border-default));
4500
4504
  flex-shrink: 0;
4501
4505
  }
4502
4506
 
@@ -4537,9 +4541,9 @@
4537
4541
  /* ── hx-divider ── */
4538
4542
  :host {
4539
4543
  display: block;
4540
- --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));
4544
+ --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #e2e8f0));
4541
4545
  --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));
4542
- --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));
4546
+ --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #64748b));
4543
4547
  --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
4544
4548
  --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
4545
4549
  }
@@ -4670,7 +4674,10 @@
4670
4674
  .drawer-backdrop {
4671
4675
  position: absolute;
4672
4676
  inset: 0;
4673
- background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));
4677
+ background-color: var(
4678
+ --hx-drawer-backdrop-color,
4679
+ var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
4680
+ );
4674
4681
  opacity: 0;
4675
4682
  transition: opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
4676
4683
  }
@@ -4691,8 +4698,8 @@
4691
4698
  position: absolute;
4692
4699
  display: flex;
4693
4700
  flex-direction: column;
4694
- background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));
4695
- color: var(--hx-drawer-color, var(--hx-color-neutral-900));
4701
+ background-color: var(--hx-drawer-bg, var(--hx-color-surface-default, #ffffff));
4702
+ color: var(--hx-drawer-color, var(--hx-color-text-primary, #0f172a));
4696
4703
  box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
4697
4704
  overflow: hidden;
4698
4705
  outline: none;
@@ -4790,7 +4797,7 @@
4790
4797
  gap: var(--hx-space-4, 1rem);
4791
4798
  padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
4792
4799
  border-bottom: var(--hx-border-width-thin, 1px) solid
4793
- var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));
4800
+ var(--hx-drawer-header-border-color, var(--hx-color-border-default, #e2e8f0));
4794
4801
  flex-shrink: 0;
4795
4802
  }
4796
4803
 
@@ -4801,7 +4808,7 @@
4801
4808
  font-size: var(--hx-font-size-lg);
4802
4809
  font-weight: var(--hx-font-weight-semibold);
4803
4810
  line-height: var(--hx-line-height-tight);
4804
- color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));
4811
+ color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0f172a));
4805
4812
  }
4806
4813
 
4807
4814
  .drawer-header-actions {
@@ -4824,15 +4831,15 @@
4824
4831
  border: none;
4825
4832
  border-radius: var(--hx-border-radius-md, 0.375rem);
4826
4833
  background: transparent;
4827
- color: var(--hx-color-neutral-500);
4834
+ color: var(--hx-color-text-muted, #64748b);
4828
4835
  cursor: pointer;
4829
4836
  flex-shrink: 0;
4830
4837
  transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
4831
4838
  }
4832
4839
 
4833
4840
  .drawer-close-button:hover {
4834
- background-color: var(--hx-color-neutral-100);
4835
- color: var(--hx-color-neutral-900);
4841
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
4842
+ color: var(--hx-color-text-primary, #0f172a);
4836
4843
  }
4837
4844
 
4838
4845
  .drawer-close-button:focus-visible {
@@ -4888,7 +4895,7 @@
4888
4895
  gap: var(--hx-space-3, 0.75rem);
4889
4896
  padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
4890
4897
  border-top: var(--hx-border-width-thin, 1px) solid
4891
- var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
4898
+ var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #e2e8f0));
4892
4899
  flex-shrink: 0;
4893
4900
  }
4894
4901
 
@@ -4931,8 +4938,8 @@
4931
4938
  position: fixed;
4932
4939
  z-index: var(--hx-dropdown-panel-z-index, 1000);
4933
4940
  min-width: var(--hx-dropdown-panel-min-width, 160px);
4934
- background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
4935
- border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
4941
+ 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));
4936
4943
  border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
4937
4944
  box-shadow: var(
4938
4945
  --hx-dropdown-panel-shadow,
@@ -5015,7 +5022,7 @@
5015
5022
  gap: var(--hx-space-1, 0.25rem);
5016
5023
  font-size: var(--hx-font-size-sm, 0.875rem);
5017
5024
  font-weight: var(--hx-font-weight-medium, 500);
5018
- color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
5025
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
5019
5026
  line-height: var(--hx-line-height-normal, 1.5);
5020
5027
  cursor: pointer;
5021
5028
  }
@@ -5065,7 +5072,7 @@
5065
5072
 
5066
5073
  .field__help-text {
5067
5074
  font-size: var(--hx-font-size-xs, 0.75rem);
5068
- color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #64748b));
5075
+ color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #64748b));
5069
5076
  line-height: var(--hx-line-height-normal, 1.5);
5070
5077
  }
5071
5078
 
@@ -5133,7 +5140,7 @@
5133
5140
  gap: var(--hx-space-1, 0.25rem);
5134
5141
  font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
5135
5142
  font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
5136
- color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
5143
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
5137
5144
  line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
5138
5145
  font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
5139
5146
  }
@@ -5146,7 +5153,7 @@
5146
5153
  .optional-indicator {
5147
5154
  font-size: var(--hx-font-size-xs, 0.75rem);
5148
5155
  font-weight: var(--hx-font-weight-normal, 400);
5149
- color: var(--hx-color-neutral-500, #64748b);
5156
+ color: var(--hx-color-text-muted, #64748b);
5150
5157
  }
5151
5158
 
5152
5159
  /* ─── High Contrast Mode (forced-colors) ─── */
@@ -5205,7 +5212,7 @@
5205
5212
  gap: var(--hx-space-1, 0.25rem);
5206
5213
  font-size: var(--hx-font-size-sm, 0.875rem);
5207
5214
  font-weight: var(--hx-font-weight-medium, 500);
5208
- color: var(--hx-color-neutral-700, #334155);
5215
+ color: var(--hx-color-text-strong, #334155);
5209
5216
  line-height: var(--hx-line-height-normal, 1.5);
5210
5217
  }
5211
5218
 
@@ -5220,9 +5227,9 @@
5220
5227
  min-height: var(--hx-space-32, 8rem);
5221
5228
  padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
5222
5229
  border: var(--hx-border-width-thin, 1px) dashed
5223
- var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #cbd5e1));
5230
+ var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #cbd5e1));
5224
5231
  border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
5225
- background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8fafc));
5232
+ background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f8fafc));
5226
5233
  cursor: pointer;
5227
5234
  text-align: center;
5228
5235
  transition:
@@ -5230,7 +5237,7 @@
5230
5237
  background-color var(--hx-transition-fast, 150ms ease),
5231
5238
  box-shadow var(--hx-transition-fast, 150ms ease);
5232
5239
  user-select: none;
5233
- color: var(--hx-color-neutral-600, #475569);
5240
+ color: var(--hx-color-text-secondary, #475569);
5234
5241
  font-size: var(--hx-font-size-sm, 0.875rem);
5235
5242
  }
5236
5243
 
@@ -5254,7 +5261,7 @@
5254
5261
  color-mix(
5255
5262
  in srgb,
5256
5263
  var(--hx-color-primary-500, #2563eb) 8%,
5257
- var(--hx-color-neutral-0, #ffffff)
5264
+ var(--hx-color-surface-default, #ffffff)
5258
5265
  )
5259
5266
  );
5260
5267
  border-style: solid;
@@ -5306,9 +5313,9 @@
5306
5313
  flex-direction: column;
5307
5314
  gap: var(--hx-space-1, 0.25rem);
5308
5315
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
5309
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
5316
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0);
5310
5317
  border-radius: var(--hx-border-radius-md, 0.375rem);
5311
- background-color: var(--hx-color-neutral-0, #ffffff);
5318
+ background-color: var(--hx-color-surface-default, #ffffff);
5312
5319
  }
5313
5320
 
5314
5321
  .file-item__row {
@@ -5321,7 +5328,7 @@
5321
5328
  flex: 1;
5322
5329
  font-size: var(--hx-font-size-sm, 0.875rem);
5323
5330
  font-weight: var(--hx-font-weight-medium, 500);
5324
- color: var(--hx-color-neutral-800, #1e293b);
5331
+ color: var(--hx-color-text-strong, #1e293b);
5325
5332
  overflow: hidden;
5326
5333
  text-overflow: ellipsis;
5327
5334
  white-space: nowrap;
@@ -5330,7 +5337,7 @@
5330
5337
  .file-item__size {
5331
5338
  flex-shrink: 0;
5332
5339
  font-size: var(--hx-font-size-xs, 0.75rem);
5333
- color: var(--hx-color-neutral-500, #64748b);
5340
+ color: var(--hx-color-text-muted, #64748b);
5334
5341
  }
5335
5342
 
5336
5343
  .file-item__remove {
@@ -5344,7 +5351,7 @@
5344
5351
  border: none;
5345
5352
  border-radius: var(--hx-border-radius-sm, 0.25rem);
5346
5353
  background: transparent;
5347
- color: var(--hx-color-neutral-500, #64748b);
5354
+ color: var(--hx-color-text-muted, #64748b);
5348
5355
  cursor: pointer;
5349
5356
  line-height: 1;
5350
5357
  transition:
@@ -5377,7 +5384,7 @@
5377
5384
  .progress-track {
5378
5385
  width: 100%;
5379
5386
  height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
5380
- background-color: var(--hx-color-neutral-200, #e2e8f0);
5387
+ background-color: var(--hx-color-border-default, #e2e8f0);
5381
5388
  border-radius: var(--hx-border-radius-full, 9999px);
5382
5389
  overflow: hidden;
5383
5390
  }
@@ -5523,7 +5530,7 @@ export const helixGridItemStyles = css`
5523
5530
  font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
5524
5531
  font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
5525
5532
  line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
5526
- color: var(--hx-help-text-color, var(--hx-color-neutral-500, #64748b));
5533
+ color: var(--hx-help-text-color, var(--hx-color-text-muted, #64748b));
5527
5534
  margin: 0;
5528
5535
  }
5529
5536
 
@@ -5540,7 +5547,7 @@ export const helixGridItemStyles = css`
5540
5547
  /* ─── Variant: default ─── */
5541
5548
 
5542
5549
  .help-text--default {
5543
- --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
5550
+ --hx-help-text-color: var(--hx-color-text-muted, #64748b);
5544
5551
  }
5545
5552
 
5546
5553
  /* ─── Variant: error ─── */
@@ -5738,7 +5745,7 @@ export const helixGridItemStyles = css`
5738
5745
 
5739
5746
  .button--primary {
5740
5747
  --hx-icon-button-bg: var(--hx-color-primary-500);
5741
- --hx-icon-button-color: var(--hx-color-neutral-0);
5748
+ --hx-icon-button-color: var(--hx-color-text-on-primary);
5742
5749
  --hx-icon-button-border-color: transparent;
5743
5750
  }
5744
5751
 
@@ -5758,17 +5765,17 @@ export const helixGridItemStyles = css`
5758
5765
 
5759
5766
  .button--tertiary {
5760
5767
  --hx-icon-button-bg: transparent;
5761
- --hx-icon-button-color: var(--hx-color-neutral-700);
5762
- --hx-icon-button-border-color: var(--hx-color-neutral-300);
5768
+ --hx-icon-button-color: var(--hx-color-text-strong);
5769
+ --hx-icon-button-border-color: var(--hx-color-border-strong);
5763
5770
  }
5764
5771
 
5765
5772
  .button--tertiary:hover {
5766
- --hx-icon-button-bg: var(--hx-color-neutral-100);
5773
+ --hx-icon-button-bg: var(--hx-color-surface-sunken);
5767
5774
  }
5768
5775
 
5769
5776
  .button--danger {
5770
5777
  --hx-icon-button-bg: var(--hx-color-error-500);
5771
- --hx-icon-button-color: var(--hx-color-neutral-0);
5778
+ --hx-icon-button-color: var(--hx-color-text-on-error);
5772
5779
  --hx-icon-button-border-color: transparent;
5773
5780
  }
5774
5781
 
@@ -5783,7 +5790,7 @@ export const helixGridItemStyles = css`
5783
5790
  }
5784
5791
 
5785
5792
  .button--ghost:hover {
5786
- --hx-icon-button-bg: var(--hx-color-neutral-100);
5793
+ --hx-icon-button-bg: var(--hx-color-surface-raised);
5787
5794
  }
5788
5795
 
5789
5796
  /* ─── Icon Container ─── */
@@ -5939,7 +5946,7 @@ export const helixGridItemStyles = css`
5939
5946
  /* --- Variant: subtle --- */
5940
5947
 
5941
5948
  .link--subtle {
5942
- color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
5949
+ color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #475569));
5943
5950
  text-decoration: none;
5944
5951
  }
5945
5952
 
@@ -5961,7 +5968,7 @@ export const helixGridItemStyles = css`
5961
5968
  /* --- Disabled --- */
5962
5969
 
5963
5970
  .link--disabled {
5964
- color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
5971
+ color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #94a3b8));
5965
5972
  text-decoration: none;
5966
5973
  cursor: not-allowed;
5967
5974
  }
@@ -6079,9 +6086,9 @@ export const helixGridItemStyles = css`
6079
6086
  display: flex;
6080
6087
  flex-direction: column;
6081
6088
  padding: var(--hx-space-1, 0.25rem);
6082
- background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));
6089
+ background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
6083
6090
  border: var(--hx-border-width-thin, 1px) solid
6084
- var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
6091
+ var(--hx-menu-border-color, var(--hx-color-border-default, #e2e8f0));
6085
6092
  border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
6086
6093
  box-shadow: var(
6087
6094
  --hx-menu-shadow,
@@ -6518,7 +6525,7 @@ export const helixGridItemStyles = css`
6518
6525
  gap: var(--hx-space-1);
6519
6526
  font-size: var(--hx-font-size-sm);
6520
6527
  font-weight: var(--hx-font-weight-medium);
6521
- color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
6528
+ color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
6522
6529
  line-height: var(--hx-line-height-normal);
6523
6530
  }
6524
6531
 
@@ -6533,9 +6540,9 @@ export const helixGridItemStyles = css`
6533
6540
  display: flex;
6534
6541
  align-items: stretch;
6535
6542
  border: var(--hx-border-width-thin) solid
6536
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
6543
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
6537
6544
  border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
6538
- background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
6545
+ background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
6539
6546
  transition:
6540
6547
  border-color var(--hx-transition-fast),
6541
6548
  box-shadow var(--hx-transition-fast);
@@ -6583,7 +6590,7 @@ export const helixGridItemStyles = css`
6583
6590
  display: flex;
6584
6591
  align-items: center;
6585
6592
  padding: 0 var(--hx-space-3);
6586
- color: var(--hx-color-neutral-500);
6593
+ color: var(--hx-color-text-muted);
6587
6594
  flex-shrink: 0;
6588
6595
  }
6589
6596
 
@@ -6595,7 +6602,7 @@ export const helixGridItemStyles = css`
6595
6602
  outline: none;
6596
6603
  background: transparent;
6597
6604
  font-family: inherit;
6598
- color: var(--hx-number-input-color, var(--hx-color-neutral-800));
6605
+ color: var(--hx-number-input-color, var(--hx-color-text-strong));
6599
6606
  line-height: var(--hx-line-height-normal);
6600
6607
  width: 100%;
6601
6608
  /* Size: md (default) */
@@ -6605,7 +6612,7 @@ export const helixGridItemStyles = css`
6605
6612
  }
6606
6613
 
6607
6614
  .field__input::placeholder {
6608
- color: var(--hx-color-neutral-400);
6615
+ color: var(--hx-color-text-placeholder);
6609
6616
  }
6610
6617
 
6611
6618
  .field__input:disabled {
@@ -6644,7 +6651,7 @@ export const helixGridItemStyles = css`
6644
6651
  flex-direction: column;
6645
6652
  flex-shrink: 0;
6646
6653
  border-inline-start: var(--hx-border-width-thin) solid
6647
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
6654
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
6648
6655
  }
6649
6656
 
6650
6657
  .field__stepper-btn {
@@ -6654,7 +6661,7 @@ export const helixGridItemStyles = css`
6654
6661
  background: transparent;
6655
6662
  border: none;
6656
6663
  cursor: pointer;
6657
- color: var(--hx-color-neutral-600);
6664
+ color: var(--hx-color-text-secondary);
6658
6665
  padding: 0;
6659
6666
  flex: 1;
6660
6667
  min-width: var(--hx-size-8);
@@ -6666,12 +6673,12 @@ export const helixGridItemStyles = css`
6666
6673
 
6667
6674
  .field__stepper-btn:not(:last-child) {
6668
6675
  border-bottom: var(--hx-border-width-thin) solid
6669
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
6676
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
6670
6677
  }
6671
6678
 
6672
6679
  .field__stepper-btn:hover:not(:disabled) {
6673
- background-color: var(--hx-color-neutral-50);
6674
- color: var(--hx-color-neutral-800);
6680
+ background-color: var(--hx-color-surface-raised);
6681
+ color: var(--hx-color-text-strong);
6675
6682
  }
6676
6683
 
6677
6684
  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -6710,7 +6717,7 @@ export const helixGridItemStyles = css`
6710
6717
 
6711
6718
  .field__help-text {
6712
6719
  font-size: var(--hx-font-size-xs);
6713
- color: var(--hx-color-neutral-500);
6720
+ color: var(--hx-color-text-muted);
6714
6721
  line-height: var(--hx-line-height-normal);
6715
6722
  }
6716
6723
 
@@ -6829,7 +6836,7 @@ export const helixGridItemStyles = css`
6829
6836
  border: var(--hx-border-width-thin, 1px) solid transparent;
6830
6837
  border-radius: var(--hx-border-radius-md, 0.375rem);
6831
6838
  background-color: transparent;
6832
- color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
6839
+ color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #475569));
6833
6840
  cursor: pointer;
6834
6841
  transition:
6835
6842
  background-color var(--hx-transition-fast, 150ms ease),
@@ -6849,11 +6856,11 @@ export const helixGridItemStyles = css`
6849
6856
  }
6850
6857
 
6851
6858
  .trigger:hover:not([disabled]) {
6852
- background-color: var(--hx-color-neutral-100, #f1f5f9);
6859
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
6853
6860
  }
6854
6861
 
6855
6862
  .trigger--open {
6856
- background-color: var(--hx-color-neutral-100, #f1f5f9);
6863
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
6857
6864
  }
6858
6865
 
6859
6866
  /* ─── Size Variants ─── */
@@ -6886,8 +6893,8 @@ export const helixGridItemStyles = css`
6886
6893
  position: fixed;
6887
6894
  z-index: var(--hx-overflow-menu-panel-z-index, 1000);
6888
6895
  min-width: var(--hx-overflow-menu-panel-min-width, 160px);
6889
- background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #ffffff));
6890
- border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));
6896
+ 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));
6891
6898
  border-radius: var(
6892
6899
  --hx-overflow-menu-panel-border-radius,
6893
6900
  var(--hx-border-radius-md, 0.375rem)
@@ -6912,7 +6919,7 @@ export const helixGridItemStyles = css`
6912
6919
  border: none;
6913
6920
  text-align: start;
6914
6921
  font-size: var(--hx-font-size-sm, 0.875rem);
6915
- color: var(--hx-color-neutral-900, #0f172a);
6922
+ color: var(--hx-color-text-primary, #0f172a);
6916
6923
  cursor: pointer;
6917
6924
  white-space: nowrap;
6918
6925
  box-sizing: border-box;
@@ -6921,7 +6928,7 @@ export const helixGridItemStyles = css`
6921
6928
  ::slotted([role='menuitem']:hover),
6922
6929
  ::slotted([role='menuitemcheckbox']:hover),
6923
6930
  ::slotted([role='menuitemradio']:hover) {
6924
- background-color: var(--hx-color-neutral-50, #f8fafc);
6931
+ background-color: var(--hx-color-surface-raised, #f8fafc);
6925
6932
  }
6926
6933
 
6927
6934
  ::slotted([role='menuitem']:focus-visible),
@@ -7013,10 +7020,10 @@ export const helixGridItemStyles = css`
7013
7020
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7014
7021
  padding: 0 var(--hx-space-2, 0.5rem);
7015
7022
  border: var(--hx-border-width-thin, 1px) solid
7016
- var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
7023
+ var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
7017
7024
  border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
7018
- background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
7019
- color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
7025
+ background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
7026
+ color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
7020
7027
  font-size: var(--hx-font-size-sm, 0.875rem);
7021
7028
  font-family: inherit;
7022
7029
  cursor: pointer;
@@ -7029,7 +7036,7 @@ export const helixGridItemStyles = css`
7029
7036
  }
7030
7037
 
7031
7038
  .button:hover:not(:disabled) {
7032
- background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
7039
+ background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #f1f5f9));
7033
7040
  border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
7034
7041
  }
7035
7042
 
@@ -7045,7 +7052,7 @@ export const helixGridItemStyles = css`
7045
7052
  --hx-pagination-active-border-color,
7046
7053
  var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
7047
7054
  );
7048
- color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #ffffff));
7055
+ color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
7049
7056
  font-weight: var(--hx-font-weight-semibold, 600);
7050
7057
  cursor: default;
7051
7058
  pointer-events: none;
@@ -7062,7 +7069,7 @@ export const helixGridItemStyles = css`
7062
7069
  justify-content: center;
7063
7070
  min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7064
7071
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7065
- color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #64748b));
7072
+ color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #64748b));
7066
7073
  font-size: var(--hx-font-size-sm, 0.875rem);
7067
7074
  user-select: none;
7068
7075
  }
@@ -7083,7 +7090,7 @@ export const helixGridItemStyles = css`
7083
7090
  align-items: center;
7084
7091
  gap: var(--hx-space-2, 0.5rem);
7085
7092
  font-size: var(--hx-font-size-sm, 0.875rem);
7086
- color: var(--hx-color-neutral-500, #64748b);
7093
+ color: var(--hx-color-text-muted, #64748b);
7087
7094
  white-space: nowrap;
7088
7095
  }
7089
7096
 
@@ -7091,10 +7098,10 @@ export const helixGridItemStyles = css`
7091
7098
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7092
7099
  padding: 0 var(--hx-space-2, 0.5rem);
7093
7100
  border: var(--hx-border-width-thin, 1px) solid
7094
- var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
7101
+ var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
7095
7102
  border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
7096
- background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
7097
- color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
7103
+ background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
7104
+ color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
7098
7105
  font-size: var(--hx-font-size-sm, 0.875rem);
7099
7106
  font-family: inherit;
7100
7107
  cursor: pointer;
@@ -7344,12 +7351,12 @@ export const helixGridItemStyles = css`
7344
7351
  .phi-field__value--masked {
7345
7352
  user-select: none;
7346
7353
  -webkit-user-select: none;
7347
- color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #64748b));
7354
+ color: var(--hx-phi-field-masked-color, var(--hx-color-text-muted, #64748b));
7348
7355
  letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
7349
7356
  }
7350
7357
 
7351
7358
  .phi-field__value--revealed {
7352
- color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #0f172a));
7359
+ color: var(--hx-phi-field-value-color, var(--hx-color-text-primary, #0f172a));
7353
7360
  }
7354
7361
 
7355
7362
  /* ─── Screen Reader Status ─── */
@@ -7455,12 +7462,12 @@ export const helixGridItemStyles = css`
7455
7462
  z-index: var(--hx-popover-z-index, 9999);
7456
7463
  max-width: var(--hx-popover-max-width, 320px);
7457
7464
  padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
7458
- background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
7459
- color: var(--hx-popover-color, var(--hx-color-neutral-900, #0f172a));
7465
+ background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
7466
+ color: var(--hx-popover-color, var(--hx-color-text-primary, #0f172a));
7460
7467
  font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
7461
7468
  font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
7462
7469
  line-height: var(--hx-line-height-normal, 1.5);
7463
- border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
7470
+ border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
7464
7471
  border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
7465
7472
  box-shadow: var(
7466
7473
  --hx-popover-shadow,
@@ -7489,8 +7496,8 @@ export const helixGridItemStyles = css`
7489
7496
  position: absolute;
7490
7497
  width: var(--hx-popover-arrow-size, 10px);
7491
7498
  height: var(--hx-popover-arrow-size, 10px);
7492
- background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
7493
- border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
7499
+ 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));
7494
7501
  transform: rotate(45deg);
7495
7502
  pointer-events: none;
7496
7503
  }
@@ -7582,7 +7589,7 @@ export const helixGridItemStyles = css`
7582
7589
  font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
7583
7590
  font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
7584
7591
  font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
7585
- color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
7592
+ color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong));
7586
7593
  line-height: var(--hx-line-height-tight, 1.25);
7587
7594
  }
7588
7595
 
@@ -7590,7 +7597,7 @@ export const helixGridItemStyles = css`
7590
7597
  position: relative;
7591
7598
  overflow: hidden;
7592
7599
  border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
7593
- background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
7600
+ background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken));
7594
7601
  width: 100%;
7595
7602
  }
7596
7603
 
@@ -7886,7 +7893,7 @@ export const helixGridItemStyles = css`
7886
7893
  gap: var(--hx-space-1, 0.25rem);
7887
7894
  font-size: var(--hx-font-size-sm, 0.875rem);
7888
7895
  font-weight: var(--hx-font-weight-medium, 500);
7889
- color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #334155));
7896
+ color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #334155));
7890
7897
  line-height: var(--hx-line-height-normal, 1.5);
7891
7898
  padding: 0;
7892
7899
  margin-bottom: var(--hx-space-1, 0.25rem);
@@ -7920,7 +7927,7 @@ export const helixGridItemStyles = css`
7920
7927
 
7921
7928
  .fieldset__help-text {
7922
7929
  font-size: var(--hx-font-size-xs, 0.75rem);
7923
- color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #64748b));
7930
+ color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #64748b));
7924
7931
  line-height: var(--hx-line-height-normal, 1.5);
7925
7932
  }
7926
7933
 
@@ -7996,7 +8003,7 @@ export const helixGridItemStyles = css`
7996
8003
  justify-content: center;
7997
8004
  position: relative;
7998
8005
  cursor: pointer;
7999
- color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
8006
+ color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
8000
8007
  line-height: 1;
8001
8008
  min-width: var(--hx-touch-target-min, 2.75rem);
8002
8009
  min-height: var(--hx-touch-target-min, 2.75rem);
@@ -8047,7 +8054,7 @@ export const helixGridItemStyles = css`
8047
8054
  position: absolute;
8048
8055
  left: 0;
8049
8056
  top: 0;
8050
- color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
8057
+ color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
8051
8058
  /* Clip to right 50% for the empty half */
8052
8059
  clip-path: inset(0 0 0 50%);
8053
8060
  }
@@ -8104,15 +8111,18 @@ export const helixGridItemStyles = css`
8104
8111
  display: block;
8105
8112
 
8106
8113
  /* Background & foreground */
8107
- --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
8108
- --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
8109
- --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
8114
+ --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
8115
+ --_color: var(--hx-select-color, var(--hx-color-text-strong, #1e293b));
8116
+ --_placeholder-color: var(
8117
+ --hx-select-placeholder-color,
8118
+ var(--hx-color-text-placeholder, #64748b)
8119
+ );
8110
8120
 
8111
8121
  /* Label */
8112
- --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
8122
+ --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #1e293b));
8113
8123
 
8114
8124
  /* Border */
8115
- --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
8125
+ --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #94a3b8));
8116
8126
  --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
8117
8127
 
8118
8128
  /* Focus ring */
@@ -8125,11 +8135,11 @@ export const helixGridItemStyles = css`
8125
8135
  --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
8126
8136
 
8127
8137
  /* Chevron */
8128
- --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
8138
+ --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #64748b));
8129
8139
  --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
8130
8140
 
8131
8141
  /* Listbox */
8132
- --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
8142
+ --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
8133
8143
  --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
8134
8144
  --_option-selected-bg: var(
8135
8145
  --hx-select-option-selected-bg,
@@ -8377,7 +8387,7 @@ export const helixGridItemStyles = css`
8377
8387
  }
8378
8388
 
8379
8389
  .field__help-text {
8380
- color: var(--hx-color-neutral-500, #64748b);
8390
+ color: var(--hx-color-text-muted, #64748b);
8381
8391
  }
8382
8392
 
8383
8393
  .field__error {
@@ -8482,8 +8492,8 @@ export const helixGridItemStyles = css`
8482
8492
  Without this, axe-core cannot resolve the background for slotted nodes
8483
8493
  and evaluates their text against the page white background, producing
8484
8494
  false-positive color-contrast violations (WCAG 2.1 AA). */
8485
- background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
8486
- color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
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));
8487
8497
  }
8488
8498
 
8489
8499
  * {
@@ -8497,12 +8507,12 @@ export const helixGridItemStyles = css`
8497
8507
  flex-direction: column;
8498
8508
  height: 100%;
8499
8509
  width: var(--hx-side-nav-width, 16rem);
8500
- background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
8501
- color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
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));
8502
8512
  transition: width var(--hx-transition-normal, 300ms) ease;
8503
8513
  overflow: hidden;
8504
8514
  border-inline-end: var(--hx-border-width-thin, 1px) solid
8505
- var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
8515
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8506
8516
  }
8507
8517
 
8508
8518
  /* ─── Collapsed State ─── */
@@ -8520,7 +8530,7 @@ export const helixGridItemStyles = css`
8520
8530
  flex-shrink: 0;
8521
8531
  min-height: var(--hx-space-14, 3.5rem);
8522
8532
  border-bottom: var(--hx-border-width-thin, 1px) solid
8523
- var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
8533
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8524
8534
  overflow: hidden;
8525
8535
  }
8526
8536
 
@@ -8547,7 +8557,7 @@ export const helixGridItemStyles = css`
8547
8557
  flex-shrink: 0;
8548
8558
  min-height: var(--hx-space-14, 3.5rem);
8549
8559
  border-top: var(--hx-border-width-thin, 1px) solid
8550
- var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
8560
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8551
8561
  overflow: hidden;
8552
8562
  }
8553
8563
 
@@ -8570,7 +8580,7 @@ export const helixGridItemStyles = css`
8570
8580
  border: none;
8571
8581
  border-radius: var(--hx-border-radius-sm, 0.25rem);
8572
8582
  background: transparent;
8573
- color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
8583
+ color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #94a3b8));
8574
8584
  cursor: pointer;
8575
8585
  transition:
8576
8586
  background-color var(--hx-transition-fast, 150ms) ease,
@@ -8582,7 +8592,7 @@ export const helixGridItemStyles = css`
8582
8592
  --hx-overlay-white-10,
8583
8593
  rgba(255, 255, 255, 0.1)
8584
8594
  ); /* fallback for browsers without color-mix() */
8585
- color: var(--hx-color-neutral-100, #f1f5f9);
8595
+ color: var(--hx-color-text-inverse, #f1f5f9);
8586
8596
  }
8587
8597
 
8588
8598
  @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -8777,14 +8787,14 @@ export const helixGridItemStyles = css`
8777
8787
  .slider__label {
8778
8788
  font-size: var(--hx-font-size-sm, 0.875rem);
8779
8789
  font-weight: var(--hx-font-weight-medium, 500);
8780
- color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
8790
+ color: var(--hx-slider-label-color, var(--hx-color-text-strong, #334155));
8781
8791
  line-height: var(--hx-line-height-normal, 1.5);
8782
8792
  }
8783
8793
 
8784
8794
  .slider__value-display {
8785
8795
  font-size: var(--hx-font-size-sm, 0.875rem);
8786
8796
  font-weight: var(--hx-font-weight-medium, 500);
8787
- color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
8797
+ color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #475569));
8788
8798
  line-height: var(--hx-line-height-normal, 1.5);
8789
8799
  font-variant-numeric: tabular-nums;
8790
8800
  min-width: var(--hx-size-8, 2rem);
@@ -8802,7 +8812,7 @@ export const helixGridItemStyles = css`
8802
8812
  position: relative;
8803
8813
  width: 100%;
8804
8814
  border-radius: var(--hx-border-radius-full, 9999px);
8805
- background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
8815
+ background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #e2e8f0));
8806
8816
  overflow: visible;
8807
8817
  }
8808
8818
 
@@ -8924,7 +8934,7 @@ export const helixGridItemStyles = css`
8924
8934
  left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
8925
8935
  transform: translate(-50%, -50%);
8926
8936
  border-radius: var(--hx-border-radius-full, 9999px);
8927
- background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
8937
+ background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
8928
8938
  border: var(--hx-slider-thumb-border-width, 2px) solid
8929
8939
  var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
8930
8940
  box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
@@ -9002,7 +9012,7 @@ export const helixGridItemStyles = css`
9002
9012
  top: 0;
9003
9013
  width: var(--hx-border-width-thin, 1px);
9004
9014
  height: 100%;
9005
- background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
9015
+ background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #94a3b8));
9006
9016
  transform: translateX(-50%);
9007
9017
  }
9008
9018
 
@@ -9012,7 +9022,7 @@ export const helixGridItemStyles = css`
9012
9022
  display: flex;
9013
9023
  justify-content: space-between;
9014
9024
  font-size: var(--hx-font-size-xs, 0.75rem);
9015
- color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
9025
+ color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #64748b));
9016
9026
  line-height: var(--hx-line-height-normal, 1.5);
9017
9027
  margin-top: var(--hx-space-0-5, 0.125rem);
9018
9028
  }
@@ -9021,18 +9031,18 @@ export const helixGridItemStyles = css`
9021
9031
 
9022
9032
  .slider__help-text {
9023
9033
  font-size: var(--hx-font-size-xs, 0.75rem);
9024
- color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #64748b));
9034
+ color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #64748b));
9025
9035
  line-height: var(--hx-line-height-normal, 1.5);
9026
9036
  }
9027
9037
 
9028
9038
  /* ─── Disabled state ─── */
9029
9039
 
9030
9040
  .slider--disabled .slider__fill {
9031
- background-color: var(--hx-color-neutral-400, #94a3b8);
9041
+ background-color: var(--hx-color-border-strong, #94a3b8);
9032
9042
  }
9033
9043
 
9034
9044
  .slider--disabled .slider__thumb-visual {
9035
- border-color: var(--hx-color-neutral-400, #94a3b8);
9045
+ border-color: var(--hx-color-border-strong, #94a3b8);
9036
9046
  }
9037
9047
  /* ── hx-spinner ── */
9038
9048
  :host {
@@ -9193,7 +9203,7 @@ export const helixGridItemStyles = css`
9193
9203
  border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
9194
9204
  var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
9195
9205
  background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
9196
- color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
9206
+ color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
9197
9207
  font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
9198
9208
  font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
9199
9209
  line-height: var(--hx-line-height-tight, 1.25);
@@ -9246,7 +9256,7 @@ export const helixGridItemStyles = css`
9246
9256
  border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
9247
9257
  var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
9248
9258
  background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
9249
- color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
9259
+ color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
9250
9260
  cursor: pointer;
9251
9261
  transition:
9252
9262
  background-color var(--hx-transition-fast, 150ms ease),
@@ -9334,7 +9344,7 @@ export const helixGridItemStyles = css`
9334
9344
  .split-button--primary .split-button__primary,
9335
9345
  .split-button--primary .split-button__trigger {
9336
9346
  --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
9337
- --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
9347
+ --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
9338
9348
  --hx-split-button-border-color: transparent;
9339
9349
  --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);
9340
9350
  }
@@ -9359,15 +9369,15 @@ export const helixGridItemStyles = css`
9359
9369
 
9360
9370
  .split-button--tertiary .split-button__primary,
9361
9371
  .split-button--tertiary .split-button__trigger {
9362
- --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
9363
- --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
9372
+ --hx-split-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
9373
+ --hx-split-button-color: var(--hx-color-text-primary, #0f172a);
9364
9374
  --hx-split-button-border-color: transparent;
9365
- --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
9375
+ --hx-split-button-divider-color: var(--hx-color-border-default, #e2e8f0);
9366
9376
  }
9367
9377
 
9368
9378
  .split-button--tertiary .split-button__primary:hover,
9369
9379
  .split-button--tertiary .split-button__trigger:hover {
9370
- --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);
9380
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9371
9381
  filter: none;
9372
9382
  }
9373
9383
 
@@ -9376,7 +9386,7 @@ export const helixGridItemStyles = css`
9376
9386
  .split-button--danger .split-button__primary,
9377
9387
  .split-button--danger .split-button__trigger {
9378
9388
  --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
9379
- --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
9389
+ --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);
9380
9390
  --hx-split-button-border-color: transparent;
9381
9391
  --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
9382
9392
  }
@@ -9399,7 +9409,7 @@ export const helixGridItemStyles = css`
9399
9409
 
9400
9410
  .split-button--ghost .split-button__primary:hover,
9401
9411
  .split-button--ghost .split-button__trigger:hover {
9402
- --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
9412
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9403
9413
  filter: none;
9404
9414
  }
9405
9415
 
@@ -9408,14 +9418,14 @@ export const helixGridItemStyles = css`
9408
9418
  .split-button--outline .split-button__primary,
9409
9419
  .split-button--outline .split-button__trigger {
9410
9420
  --hx-split-button-bg: transparent;
9411
- --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
9412
- --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
9413
- --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
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);
9414
9424
  }
9415
9425
 
9416
9426
  .split-button--outline .split-button__primary:hover,
9417
9427
  .split-button--outline .split-button__trigger:hover {
9418
- --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);
9428
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9419
9429
  filter: none;
9420
9430
  }
9421
9431
 
@@ -9440,9 +9450,9 @@ export const helixGridItemStyles = css`
9440
9450
  min-width: 100%;
9441
9451
  max-height: var(--hx-split-button-menu-max-height, 18rem);
9442
9452
  overflow-y: auto;
9443
- background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));
9453
+ background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));
9444
9454
  border: var(--hx-border-width-thin, 1px) solid
9445
- var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
9455
+ var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #e2e8f0));
9446
9456
  border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
9447
9457
  box-shadow: var(
9448
9458
  --hx-split-button-menu-shadow,
@@ -9510,7 +9520,7 @@ export const helixGridItemStyles = css`
9510
9520
  :host {
9511
9521
  display: flex;
9512
9522
  --_divider-size: var(--hx-split-panel-divider-size, 4px);
9513
- --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));
9523
+ --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-border-default, #e2e8f0));
9514
9524
  --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
9515
9525
  overflow: hidden;
9516
9526
  }
@@ -9638,8 +9648,8 @@ export const helixGridItemStyles = css`
9638
9648
 
9639
9649
  .collapse-btn {
9640
9650
  background: var(--_divider-hover-color);
9641
- border: 2px solid var(--hx-color-neutral-0);
9642
- color: var(--hx-color-neutral-0);
9651
+ border: 2px solid var(--hx-color-surface-default);
9652
+ color: var(--hx-color-surface-default);
9643
9653
  width: var(--hx-size-5, 1.25rem);
9644
9654
  height: var(--hx-size-5, 1.25rem);
9645
9655
  border-radius: 50%;
@@ -9812,7 +9822,7 @@ export const helixGridItemStyles = css`
9812
9822
  flex-direction: column;
9813
9823
  gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
9814
9824
  font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
9815
- color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
9825
+ color: var(--hx-stat-color, var(--hx-color-text-strong, #1e293b));
9816
9826
  }
9817
9827
 
9818
9828
  /* ─── Size Variants ─── */
@@ -9856,13 +9866,13 @@ export const helixGridItemStyles = css`
9856
9866
  }
9857
9867
 
9858
9868
  .stat__value {
9859
- color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
9869
+ color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0f172a));
9860
9870
  }
9861
9871
 
9862
9872
  /* ─── Label ─── */
9863
9873
 
9864
9874
  .stat__label {
9865
- color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
9875
+ color: var(--hx-stat-label-color, var(--hx-color-text-muted, #64748b));
9866
9876
  font-weight: var(--hx-font-weight-normal, 400);
9867
9877
  }
9868
9878
 
@@ -10027,7 +10037,7 @@ export const helixGridItemStyles = css`
10027
10037
  --hx-status-indicator-label-font-size,
10028
10038
  var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
10029
10039
  );
10030
- color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));
10040
+ color: var(--hx-status-indicator-label-color, var(--hx-color-text-strong, #334155));
10031
10041
  line-height: 1;
10032
10042
  white-space: nowrap;
10033
10043
  }
@@ -10307,7 +10317,7 @@ export const helixStructuredListRowStyles = css`
10307
10317
  border: none;
10308
10318
  padding: 0;
10309
10319
  border-radius: var(--hx-border-radius-full, 9999px);
10310
- background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
10320
+ background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #cbd5e1));
10311
10321
  cursor: pointer;
10312
10322
  transition: background-color var(--hx-transition-fast, 150ms ease);
10313
10323
  outline: none;
@@ -10333,7 +10343,7 @@ export const helixStructuredListRowStyles = css`
10333
10343
  .switch__thumb {
10334
10344
  position: absolute;
10335
10345
  border-radius: var(--hx-border-radius-full, 9999px);
10336
- background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
10346
+ background-color: var(--hx-switch-thumb-bg, var(--hx-color-surface-default, #ffffff));
10337
10347
  box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
10338
10348
  transition: transform var(--hx-transition-fast, 150ms ease);
10339
10349
  }
@@ -10403,7 +10413,7 @@ export const helixStructuredListRowStyles = css`
10403
10413
  .switch__label {
10404
10414
  font-size: var(--hx-font-size-sm, 0.875rem);
10405
10415
  font-weight: var(--hx-font-weight-medium, 500);
10406
- color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
10416
+ color: var(--hx-switch-label-color, var(--hx-color-text-strong, #334155));
10407
10417
  line-height: var(--hx-line-height-normal, 1.5);
10408
10418
  cursor: pointer;
10409
10419
  user-select: none;
@@ -10419,7 +10429,7 @@ export const helixStructuredListRowStyles = css`
10419
10429
 
10420
10430
  .switch__help-text {
10421
10431
  font-size: var(--hx-font-size-xs, 0.75rem);
10422
- color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
10432
+ color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #64748b));
10423
10433
  line-height: var(--hx-line-height-normal, 1.5);
10424
10434
  }
10425
10435
 
@@ -10528,7 +10538,7 @@ export const helixStructuredListRowStyles = css`
10528
10538
  text-align: start;
10529
10539
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
10530
10540
  font-weight: var(--hx-font-weight-semibold, 600);
10531
- color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
10541
+ color: var(--hx-table-header-color, var(--hx-color-text-strong, #1e293b));
10532
10542
  font-size: var(--hx-font-size-md, 1rem);
10533
10543
  }
10534
10544
 
@@ -10544,12 +10554,12 @@ export const helixStructuredListRowStyles = css`
10544
10554
 
10545
10555
  /* Header background via CSS vars that cascade through display:contents */
10546
10556
  ::slotted(hx-thead) {
10547
- --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
10557
+ --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
10548
10558
  }
10549
10559
 
10550
10560
  /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
10551
10561
  :host([variant='striped']) ::slotted(hx-tbody) {
10552
- --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
10562
+ --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f8fafc));
10553
10563
  }
10554
10564
 
10555
10565
  /* Hover variant: set hover bg variable on direct slotted section elements */
@@ -10559,7 +10569,7 @@ export const helixStructuredListRowStyles = css`
10559
10569
  :host([variant='striped']) ::slotted(hx-thead),
10560
10570
  :host([variant='default']) ::slotted(hx-tbody),
10561
10571
  :host([variant='default']) ::slotted(hx-thead) {
10562
- --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
10572
+ --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
10563
10573
  }
10564
10574
 
10565
10575
  /* Compact variant: reduced padding signal set on section elements that cascade to cells */
@@ -10575,7 +10585,7 @@ export const helixStructuredListRowStyles = css`
10575
10585
  --_hx-table-th-position: sticky;
10576
10586
  --_hx-table-th-top: 0;
10577
10587
  --_hx-table-th-z-index: 1;
10578
- --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
10588
+ --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
10579
10589
  }
10580
10590
 
10581
10591
  /* ─── Focus ─── */
@@ -11133,7 +11143,7 @@ export const helixTableSectionBaseStyles = css`
11133
11143
  gap: var(--hx-space-1, 0.25rem);
11134
11144
  font-size: var(--hx-font-size-sm, 0.875rem);
11135
11145
  font-weight: var(--hx-font-weight-medium, 500);
11136
- color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
11146
+ color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
11137
11147
  line-height: var(--hx-line-height-normal, 1.5);
11138
11148
  }
11139
11149
 
@@ -11148,9 +11158,9 @@ export const helixTableSectionBaseStyles = css`
11148
11158
  display: flex;
11149
11159
  align-items: center;
11150
11160
  border: var(--hx-border-width-thin, 1px) solid
11151
- var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
11161
+ var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
11152
11162
  border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
11153
- background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
11163
+ background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
11154
11164
  transition:
11155
11165
  border-color var(--hx-transition-fast, 150ms ease),
11156
11166
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -11197,7 +11207,7 @@ export const helixTableSectionBaseStyles = css`
11197
11207
  .field__suffix {
11198
11208
  display: flex;
11199
11209
  align-items: center;
11200
- color: var(--hx-color-neutral-500, #64748b);
11210
+ color: var(--hx-color-text-muted, #64748b);
11201
11211
  flex-shrink: 0;
11202
11212
  }
11203
11213
 
@@ -11220,14 +11230,14 @@ export const helixTableSectionBaseStyles = css`
11220
11230
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11221
11231
  font-family: inherit;
11222
11232
  font-size: var(--hx-font-size-md, 1rem);
11223
- color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
11233
+ color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
11224
11234
  line-height: var(--hx-line-height-normal, 1.5);
11225
11235
  min-height: var(--hx-size-10, 2.5rem);
11226
11236
  width: 100%;
11227
11237
  }
11228
11238
 
11229
11239
  .field__input::placeholder {
11230
- color: var(--hx-color-neutral-400, #94a3b8);
11240
+ color: var(--hx-color-text-placeholder, #94a3b8);
11231
11241
  }
11232
11242
 
11233
11243
  .field__input:focus-visible {
@@ -11260,7 +11270,7 @@ export const helixTableSectionBaseStyles = css`
11260
11270
 
11261
11271
  .field__help-text {
11262
11272
  font-size: var(--hx-font-size-xs, 0.75rem);
11263
- color: var(--hx-color-neutral-500, #64748b);
11273
+ color: var(--hx-color-text-muted, #64748b);
11264
11274
  line-height: var(--hx-line-height-normal, 1.5);
11265
11275
  }
11266
11276
 
@@ -11368,7 +11378,7 @@ export const helixTableSectionBaseStyles = css`
11368
11378
  gap: var(--hx-space-1, 0.25rem);
11369
11379
  font-size: var(--hx-font-size-sm, 0.875rem);
11370
11380
  font-weight: var(--hx-font-weight-medium, 500);
11371
- color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
11381
+ color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
11372
11382
  line-height: var(--hx-line-height-normal, 1.5);
11373
11383
  }
11374
11384
 
@@ -11383,9 +11393,9 @@ export const helixTableSectionBaseStyles = css`
11383
11393
  display: flex;
11384
11394
  flex-direction: column;
11385
11395
  border: var(--hx-border-width-thin, 1px) solid
11386
- var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
11396
+ var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
11387
11397
  border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
11388
- background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
11398
+ background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
11389
11399
  transition:
11390
11400
  border-color var(--hx-transition-fast, 150ms ease),
11391
11401
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -11435,7 +11445,7 @@ export const helixTableSectionBaseStyles = css`
11435
11445
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11436
11446
  font-family: inherit;
11437
11447
  font-size: var(--hx-font-size-md, 1rem);
11438
- color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
11448
+ color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
11439
11449
  line-height: var(--hx-line-height-normal, 1.5);
11440
11450
  min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
11441
11451
  width: 100%;
@@ -11443,7 +11453,7 @@ export const helixTableSectionBaseStyles = css`
11443
11453
  }
11444
11454
 
11445
11455
  .field__textarea::placeholder {
11446
- color: var(--hx-color-neutral-400, #94a3b8);
11456
+ color: var(--hx-color-text-placeholder, #94a3b8);
11447
11457
  }
11448
11458
 
11449
11459
  .field__textarea:focus-visible {
@@ -11481,7 +11491,7 @@ export const helixTableSectionBaseStyles = css`
11481
11491
 
11482
11492
  .field__counter {
11483
11493
  font-size: var(--hx-font-size-xs, 0.75rem);
11484
- color: var(--hx-color-neutral-500, #64748b);
11494
+ color: var(--hx-color-text-muted, #64748b);
11485
11495
  line-height: var(--hx-line-height-normal, 1.5);
11486
11496
  text-align: end;
11487
11497
  }
@@ -11504,7 +11514,7 @@ export const helixTableSectionBaseStyles = css`
11504
11514
 
11505
11515
  .field__help-text {
11506
11516
  font-size: var(--hx-font-size-xs, 0.75rem);
11507
- color: var(--hx-color-neutral-500, #64748b);
11517
+ color: var(--hx-color-text-muted, #64748b);
11508
11518
  line-height: var(--hx-line-height-normal, 1.5);
11509
11519
  }
11510
11520
 
@@ -11629,7 +11639,7 @@ export const helixTableSectionBaseStyles = css`
11629
11639
  gap: var(--hx-space-1, 0.25rem);
11630
11640
  font-size: var(--hx-font-size-sm, 0.875rem);
11631
11641
  font-weight: var(--hx-font-weight-medium, 500);
11632
- color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
11642
+ color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #1e293b));
11633
11643
  line-height: var(--hx-line-height-normal, 1.5);
11634
11644
  }
11635
11645
  .field__required-marker {
@@ -11641,9 +11651,9 @@ export const helixTableSectionBaseStyles = css`
11641
11651
  display: flex;
11642
11652
  align-items: center;
11643
11653
  border: var(--hx-border-width-thin, 1px) solid
11644
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
11654
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
11645
11655
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
11646
- background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
11656
+ background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
11647
11657
  transition:
11648
11658
  border-color var(--hx-transition-fast, 150ms ease),
11649
11659
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -11680,14 +11690,14 @@ export const helixTableSectionBaseStyles = css`
11680
11690
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11681
11691
  font-family: inherit;
11682
11692
  font-size: var(--hx-font-size-md, 1rem);
11683
- color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
11693
+ color: var(--hx-time-picker-color, var(--hx-color-text-strong, #1e293b));
11684
11694
  line-height: var(--hx-line-height-normal, 1.5);
11685
11695
  min-height: var(--hx-size-10, 2.5rem);
11686
11696
  width: 100%;
11687
11697
  cursor: text;
11688
11698
  }
11689
11699
  .field__input::placeholder {
11690
- color: var(--hx-color-neutral-400);
11700
+ color: var(--hx-color-text-placeholder, #64748b);
11691
11701
  }
11692
11702
  .field__input:disabled {
11693
11703
  cursor: not-allowed;
@@ -11699,13 +11709,13 @@ export const helixTableSectionBaseStyles = css`
11699
11709
  border: none;
11700
11710
  background: transparent;
11701
11711
  padding: 0 var(--hx-space-3, 0.75rem);
11702
- color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
11712
+ color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #64748b));
11703
11713
  cursor: pointer;
11704
11714
  height: 100%;
11705
11715
  min-height: var(--hx-size-10, 2.5rem);
11706
11716
  flex-shrink: 0;
11707
11717
  border-inline-start: var(--hx-border-width-thin, 1px) solid
11708
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
11718
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
11709
11719
  }
11710
11720
  .field__toggle:focus-visible {
11711
11721
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -11719,9 +11729,9 @@ export const helixTableSectionBaseStyles = css`
11719
11729
  inset-inline-start: 0;
11720
11730
  inset-inline-end: 0;
11721
11731
  z-index: var(--hx-z-index-dropdown, 1000);
11722
- background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
11732
+ background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
11723
11733
  border: var(--hx-border-width-thin, 1px) solid
11724
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
11734
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
11725
11735
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
11726
11736
  box-shadow: var(
11727
11737
  --hx-time-picker-listbox-shadow,
@@ -11754,7 +11764,7 @@ export const helixTableSectionBaseStyles = css`
11754
11764
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11755
11765
  font-size: var(--hx-font-size-md, 1rem);
11756
11766
  font-family: inherit;
11757
- color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
11767
+ color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #1e293b));
11758
11768
  cursor: pointer;
11759
11769
  transition: background-color var(--hx-transition-fast, 150ms ease);
11760
11770
  line-height: var(--hx-line-height-normal, 1.5);
@@ -11784,7 +11794,7 @@ export const helixTableSectionBaseStyles = css`
11784
11794
  line-height: var(--hx-line-height-normal, 1.5);
11785
11795
  }
11786
11796
  .field__help-text {
11787
- color: var(--hx-color-neutral-500);
11797
+ color: var(--hx-color-text-muted, #64748b);
11788
11798
  }
11789
11799
  .field__error {
11790
11800
  color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
@@ -11850,8 +11860,8 @@ export const helixTableSectionBaseStyles = css`
11850
11860
  gap: var(--hx-space-3, 0.75rem);
11851
11861
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
11852
11862
  border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
11853
- background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
11854
- color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
11863
+ background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0f172a));
11864
+ color: var(--hx-toast-color, var(--hx-color-text-inverse, #ffffff));
11855
11865
  font-family: var(--hx-toast-font-family, var(--hx-font-family-sans, sans-serif));
11856
11866
  font-size: var(--hx-font-size-sm, 0.875rem);
11857
11867
  line-height: var(--hx-line-height-normal, 1.5);
@@ -11878,22 +11888,22 @@ export const helixTableSectionBaseStyles = css`
11878
11888
 
11879
11889
  .toast--success {
11880
11890
  --hx-toast-bg: var(--hx-color-success-600, #15803d);
11881
- --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
11891
+ --hx-toast-color: var(--hx-color-text-on-success, #ffffff);
11882
11892
  }
11883
11893
 
11884
11894
  .toast--warning {
11885
11895
  --hx-toast-bg: var(--hx-color-warning-500, #d97706);
11886
- --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
11896
+ --hx-toast-color: var(--hx-color-text-on-warning, #0f172a);
11887
11897
  }
11888
11898
 
11889
11899
  .toast--danger {
11890
11900
  --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
11891
- --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
11901
+ --hx-toast-color: var(--hx-color-text-on-error, #ffffff);
11892
11902
  }
11893
11903
 
11894
11904
  .toast--info {
11895
11905
  --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
11896
- --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
11906
+ --hx-toast-color: var(--hx-color-text-on-primary, #ffffff);
11897
11907
  }
11898
11908
 
11899
11909
  /* ─── Severity Label (WCAG 1.4.1) ─── */
@@ -12092,7 +12102,7 @@ export const helixToastStackStyles = css`
12092
12102
  border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
12093
12103
  border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
12094
12104
  background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
12095
- color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));
12105
+ color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
12096
12106
  font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
12097
12107
  font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
12098
12108
  line-height: var(--hx-line-height-tight, 1.25);
@@ -12152,7 +12162,7 @@ export const helixToastStackStyles = css`
12152
12162
 
12153
12163
  .button--primary {
12154
12164
  --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
12155
- --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
12165
+ --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
12156
12166
  --hx-toggle-button-border-color: transparent;
12157
12167
  }
12158
12168
 
@@ -12167,13 +12177,13 @@ export const helixToastStackStyles = css`
12167
12177
  }
12168
12178
 
12169
12179
  .button--tertiary {
12170
- --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
12171
- --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
12180
+ --hx-toggle-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
12181
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
12172
12182
  --hx-toggle-button-border-color: transparent;
12173
12183
  }
12174
12184
 
12175
12185
  .button--tertiary:hover {
12176
- --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
12186
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #e2e8f0);
12177
12187
  }
12178
12188
 
12179
12189
  .button--ghost {
@@ -12183,17 +12193,17 @@ export const helixToastStackStyles = css`
12183
12193
  }
12184
12194
 
12185
12195
  .button--ghost:hover {
12186
- --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
12196
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f1f5f9);
12187
12197
  }
12188
12198
 
12189
12199
  .button--outline {
12190
12200
  --hx-toggle-button-bg: transparent;
12191
- --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
12192
- --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
12201
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
12202
+ --hx-toggle-button-border-color: var(--hx-color-border-strong, #cbd5e1);
12193
12203
  }
12194
12204
 
12195
12205
  .button--outline:hover {
12196
- --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
12206
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f8fafc);
12197
12207
  }
12198
12208
 
12199
12209
  /* ─── Pressed State ─── */
@@ -12206,7 +12216,7 @@ export const helixToastStackStyles = css`
12206
12216
  --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
12207
12217
  --hx-toggle-button-color: var(
12208
12218
  --hx-toggle-button-pressed-color,
12209
- var(--hx-color-neutral-0, #ffffff)
12219
+ var(--hx-color-text-on-primary, #ffffff)
12210
12220
  );
12211
12221
  --hx-toggle-button-border-color: transparent;
12212
12222
  }
@@ -12219,7 +12229,7 @@ export const helixToastStackStyles = css`
12219
12229
  --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
12220
12230
  --hx-toggle-button-color: var(
12221
12231
  --hx-toggle-button-pressed-color,
12222
- var(--hx-color-neutral-0, #ffffff)
12232
+ var(--hx-color-text-on-primary, #ffffff)
12223
12233
  );
12224
12234
  --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
12225
12235
  }
@@ -12247,12 +12257,15 @@ export const helixToastStackStyles = css`
12247
12257
 
12248
12258
  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
12249
12259
  .button--outline.button--pressed {
12250
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
12260
+ --hx-toggle-button-bg: var(
12261
+ --hx-toggle-button-pressed-bg,
12262
+ var(--hx-color-surface-sunken, #f1f5f9)
12263
+ );
12251
12264
  --hx-toggle-button-color: var(
12252
12265
  --hx-toggle-button-pressed-color,
12253
- var(--hx-color-neutral-900, #0f172a)
12266
+ var(--hx-color-text-primary, #0f172a)
12254
12267
  );
12255
- --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
12268
+ --hx-toggle-button-border-color: var(--hx-color-text-muted, #64748b);
12256
12269
  box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
12257
12270
  }
12258
12271
 
@@ -12330,8 +12343,8 @@ export const helixToastStackStyles = css`
12330
12343
  z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
12331
12344
  max-width: var(--hx-tooltip-max-width, 280px);
12332
12345
  padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
12333
- background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
12334
- color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
12346
+ background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
12347
+ color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #f8fafc));
12335
12348
  font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
12336
12349
  font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
12337
12350
  line-height: var(--hx-line-height-normal, 1.5);
@@ -12357,7 +12370,7 @@ export const helixToastStackStyles = css`
12357
12370
  position: absolute;
12358
12371
  width: var(--hx-tooltip-arrow-size, 8px);
12359
12372
  height: var(--hx-tooltip-arrow-size, 8px);
12360
- background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
12373
+ background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
12361
12374
  transform: rotate(45deg);
12362
12375
  pointer-events: none;
12363
12376
  }
@@ -12406,10 +12419,10 @@ export const helixToastStackStyles = css`
12406
12419
  /* ─── Nav container ─── */
12407
12420
 
12408
12421
  .nav {
12409
- background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
12410
- color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #1e293b));
12422
+ 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));
12411
12424
  border-bottom: var(--hx-border-width-thin, 1px) solid
12412
- var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
12425
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12413
12426
  font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
12414
12427
  }
12415
12428
 
@@ -12443,13 +12456,13 @@ export const helixToastStackStyles = css`
12443
12456
  background: transparent;
12444
12457
  border: none;
12445
12458
  border-radius: var(--hx-border-radius-sm, 0.25rem);
12446
- color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
12459
+ color: var(--hx-top-nav-toggle-color, var(--hx-color-text-strong, #334155));
12447
12460
  cursor: pointer;
12448
12461
  line-height: 0;
12449
12462
  }
12450
12463
 
12451
12464
  .mobile-toggle:hover {
12452
- background: var(--hx-color-neutral-100, #f1f5f9);
12465
+ background: var(--hx-color-surface-sunken, #f1f5f9);
12453
12466
  }
12454
12467
 
12455
12468
  .mobile-toggle:focus-visible {
@@ -12471,7 +12484,7 @@ export const helixToastStackStyles = css`
12471
12484
  width: 100%;
12472
12485
  padding-block: var(--hx-space-3, 0.75rem);
12473
12486
  border-top: var(--hx-border-width-thin, 1px) solid
12474
- var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
12487
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12475
12488
  }
12476
12489
 
12477
12490
  .nav__collapsible--open {
@@ -12493,7 +12506,7 @@ export const helixToastStackStyles = css`
12493
12506
  margin-top: var(--hx-space-3, 0.75rem);
12494
12507
  padding-top: var(--hx-space-3, 0.75rem);
12495
12508
  border-top: var(--hx-border-width-thin, 1px) solid
12496
- var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
12509
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12497
12510
  }
12498
12511
 
12499
12512
  /* ─── Desktop breakpoint ─── */