@helixui/library 3.0.0-next.65 → 3.1.0-next.66

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 (408) 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-color-picker/hx-color-picker.d.ts +29 -0
  39. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  40. package/dist/components/hx-combobox/hx-combobox.d.ts +49 -0
  41. package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
  42. package/dist/components/hx-combobox/index.js +1 -1
  43. package/dist/components/hx-container/hx-container.d.ts +5 -0
  44. package/dist/components/hx-container/hx-container.d.ts.map +1 -1
  45. package/dist/components/hx-copy-button/hx-copy-button.d.ts +24 -0
  46. package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
  47. package/dist/components/hx-counter/hx-counter.d.ts +7 -0
  48. package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
  49. package/dist/components/hx-data-table/hx-data-table.d.ts +29 -0
  50. package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
  51. package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
  52. package/dist/components/hx-data-table/index.js +1 -1
  53. package/dist/components/hx-date-picker/hx-date-picker.d.ts +44 -0
  54. package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
  55. package/dist/components/hx-date-picker/index.js +1 -1
  56. package/dist/components/hx-dialog/hx-dialog.d.ts +31 -0
  57. package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
  58. package/dist/components/hx-dialog/index.js +1 -1
  59. package/dist/components/hx-divider/hx-divider.d.ts +9 -0
  60. package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
  61. package/dist/components/hx-divider/index.js +1 -1
  62. package/dist/components/hx-drawer/hx-drawer.d.ts +30 -0
  63. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  64. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  65. package/dist/components/hx-drawer/index.js +1 -1
  66. package/dist/components/hx-dropdown/hx-dropdown.d.ts +6 -0
  67. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  68. package/dist/components/hx-dropdown/index.js +1 -1
  69. package/dist/components/hx-field/hx-field.d.ts +15 -0
  70. package/dist/components/hx-field/hx-field.d.ts.map +1 -1
  71. package/dist/components/hx-field/index.js +1 -1
  72. package/dist/components/hx-field-label/hx-field-label.d.ts +11 -0
  73. package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
  74. package/dist/components/hx-field-label/index.js +1 -1
  75. package/dist/components/hx-file-upload/hx-file-upload.d.ts +35 -0
  76. package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
  77. package/dist/components/hx-file-upload/index.js +1 -1
  78. package/dist/components/hx-grid/hx-grid.d.ts +5 -0
  79. package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
  80. package/dist/components/hx-help-text/hx-help-text.d.ts +8 -0
  81. package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
  82. package/dist/components/hx-help-text/index.js +1 -1
  83. package/dist/components/hx-icon/hx-icon.d.ts +5 -0
  84. package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
  85. package/dist/components/hx-icon-button/hx-icon-button.d.ts +27 -0
  86. package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
  87. package/dist/components/hx-icon-button/index.js +1 -1
  88. package/dist/components/hx-image/hx-image.d.ts +4 -0
  89. package/dist/components/hx-image/hx-image.d.ts.map +1 -1
  90. package/dist/components/hx-link/hx-link.d.ts +15 -0
  91. package/dist/components/hx-link/hx-link.d.ts.map +1 -1
  92. package/dist/components/hx-link/index.js +1 -1
  93. package/dist/components/hx-list/hx-list.d.ts +3 -0
  94. package/dist/components/hx-list/hx-list.d.ts.map +1 -1
  95. package/dist/components/hx-menu/hx-menu.d.ts +6 -0
  96. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  97. package/dist/components/hx-menu/index.js +1 -1
  98. package/dist/components/hx-meter/hx-meter.d.ts +23 -0
  99. package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
  100. package/dist/components/hx-nav/hx-nav.d.ts +29 -0
  101. package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
  102. package/dist/components/hx-number-input/hx-number-input.d.ts +34 -0
  103. package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
  104. package/dist/components/hx-number-input/index.js +1 -1
  105. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +26 -0
  106. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
  107. package/dist/components/hx-overflow-menu/index.js +1 -1
  108. package/dist/components/hx-pagination/hx-pagination.d.ts +21 -0
  109. package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
  110. package/dist/components/hx-pagination/index.js +1 -1
  111. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts +23 -0
  112. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
  113. package/dist/components/hx-phi-field/hx-phi-field.d.ts +14 -0
  114. package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
  115. package/dist/components/hx-phi-field/index.js +1 -1
  116. package/dist/components/hx-popover/hx-popover.d.ts +15 -0
  117. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  118. package/dist/components/hx-popover/index.js +1 -1
  119. package/dist/components/hx-popup/hx-popup.d.ts +1 -0
  120. package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
  121. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +17 -0
  122. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
  123. package/dist/components/hx-progress-bar/index.js +1 -1
  124. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts +15 -0
  125. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
  126. package/dist/components/hx-prose/hx-prose.d.ts +2 -0
  127. package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
  128. package/dist/components/hx-radio-group/hx-radio-group.d.ts +14 -0
  129. package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
  130. package/dist/components/hx-radio-group/index.js +1 -1
  131. package/dist/components/hx-rating/hx-rating.d.ts +13 -0
  132. package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
  133. package/dist/components/hx-select/hx-select.d.ts +43 -0
  134. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  135. package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
  136. package/dist/components/hx-select/index.js +1 -1
  137. package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
  138. package/dist/components/hx-side-nav/hx-side-nav.d.ts +19 -0
  139. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  140. package/dist/components/hx-side-nav/index.js +1 -1
  141. package/dist/components/hx-skeleton/hx-skeleton.d.ts +5 -0
  142. package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
  143. package/dist/components/hx-slider/hx-slider.d.ts +38 -0
  144. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  145. package/dist/components/hx-slider/index.js +1 -1
  146. package/dist/components/hx-spinner/hx-spinner.d.ts +10 -0
  147. package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
  148. package/dist/components/hx-split-button/hx-split-button.d.ts +39 -0
  149. package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
  150. package/dist/components/hx-split-button/index.js +1 -1
  151. package/dist/components/hx-split-panel/hx-split-panel.d.ts +12 -0
  152. package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
  153. package/dist/components/hx-split-panel/index.js +1 -1
  154. package/dist/components/hx-stack/hx-stack.d.ts +5 -0
  155. package/dist/components/hx-stack/hx-stack.d.ts.map +1 -1
  156. package/dist/components/hx-stat/hx-stat.d.ts +24 -0
  157. package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
  158. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +13 -0
  159. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
  160. package/dist/components/hx-steps/hx-steps.d.ts +15 -0
  161. package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
  162. package/dist/components/hx-structured-list/hx-structured-list.d.ts +7 -0
  163. package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
  164. package/dist/components/hx-switch/hx-switch.d.ts +42 -0
  165. package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
  166. package/dist/components/hx-switch/index.js +1 -1
  167. package/dist/components/hx-table/hx-table.d.ts +14 -0
  168. package/dist/components/hx-table/hx-table.d.ts.map +1 -1
  169. package/dist/components/hx-tabs/hx-tabs.d.ts +4 -0
  170. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  171. package/dist/components/hx-tag/hx-tag.d.ts +36 -0
  172. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  173. package/dist/components/hx-text/hx-text.d.ts +22 -0
  174. package/dist/components/hx-text/hx-text.d.ts.map +1 -1
  175. package/dist/components/hx-text-input/hx-text-input.d.ts +30 -0
  176. package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
  177. package/dist/components/hx-text-input/index.js +1 -1
  178. package/dist/components/hx-textarea/hx-textarea.d.ts +27 -0
  179. package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
  180. package/dist/components/hx-textarea/index.js +1 -1
  181. package/dist/components/hx-theme/hx-theme.d.ts +3 -0
  182. package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
  183. package/dist/components/hx-theme/index.js +1 -1
  184. package/dist/components/hx-time-picker/hx-time-picker.d.ts +32 -0
  185. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  186. package/dist/components/hx-time-picker/index.js +1 -1
  187. package/dist/components/hx-toast/hx-toast.d.ts +24 -0
  188. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  189. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +35 -0
  190. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
  191. package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
  192. package/dist/components/hx-toggle-button/index.js +1 -1
  193. package/dist/components/hx-tooltip/hx-tooltip.d.ts +13 -0
  194. package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
  195. package/dist/components/hx-tooltip/index.js +1 -1
  196. package/dist/components/hx-top-nav/hx-top-nav.d.ts +21 -0
  197. package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
  198. package/dist/components/hx-top-nav/index.js +1 -1
  199. package/dist/components/hx-tree-view/hx-tree-view.d.ts +6 -0
  200. package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
  201. package/dist/css/helix-all.css +263 -253
  202. package/dist/css/helix-core.css +26 -26
  203. package/dist/css/helix-data.css +8 -7
  204. package/dist/css/helix-feedback.css +2 -2
  205. package/dist/css/helix-forms.css +137 -131
  206. package/dist/css/helix-layout.css +3 -3
  207. package/dist/css/helix-navigation.css +35 -35
  208. package/dist/css/helix-overlay.css +32 -29
  209. package/dist/css/helix-tokens.css +12 -0
  210. package/dist/css/helix-utility.css +18 -18
  211. package/dist/css/hx-action-bar.css +3 -3
  212. package/dist/css/hx-button.css +10 -10
  213. package/dist/css/hx-card.css +6 -6
  214. package/dist/css/hx-checkbox-group.css +2 -2
  215. package/dist/css/hx-checkbox.css +5 -5
  216. package/dist/css/hx-combobox.css +13 -13
  217. package/dist/css/hx-data-table.css +8 -7
  218. package/dist/css/hx-date-picker.css +20 -20
  219. package/dist/css/hx-dialog.css +10 -10
  220. package/dist/css/hx-divider.css +2 -2
  221. package/dist/css/hx-drawer.css +12 -9
  222. package/dist/css/hx-dropdown.css +2 -2
  223. package/dist/css/hx-field-label.css +2 -2
  224. package/dist/css/hx-field.css +2 -2
  225. package/dist/css/hx-file-upload.css +11 -11
  226. package/dist/css/hx-help-text.css +2 -2
  227. package/dist/css/hx-icon-button.css +6 -6
  228. package/dist/css/hx-link.css +2 -2
  229. package/dist/css/hx-menu.css +2 -2
  230. package/dist/css/hx-number-input.css +12 -12
  231. package/dist/css/hx-overflow-menu.css +7 -7
  232. package/dist/css/hx-pagination.css +10 -10
  233. package/dist/css/hx-phi-field.css +2 -2
  234. package/dist/css/hx-popover.css +5 -5
  235. package/dist/css/hx-progress-bar.css +2 -2
  236. package/dist/css/hx-radio-group.css +2 -2
  237. package/dist/css/hx-select.css +11 -8
  238. package/dist/css/hx-side-nav.css +9 -9
  239. package/dist/css/hx-slider.css +9 -9
  240. package/dist/css/hx-split-button.css +15 -15
  241. package/dist/css/hx-split-panel.css +3 -3
  242. package/dist/css/hx-switch.css +4 -4
  243. package/dist/css/hx-text-input.css +7 -7
  244. package/dist/css/hx-textarea.css +7 -7
  245. package/dist/css/hx-time-picker.css +11 -11
  246. package/dist/css/hx-toggle-button.css +17 -14
  247. package/dist/css/hx-tooltip.css +3 -3
  248. package/dist/css/hx-top-nav.css +7 -7
  249. package/dist/css/index.css +1 -1
  250. package/dist/css/manifest.json +162 -163
  251. package/dist/index.js +40 -40
  252. package/dist/shared/hx-accordion-Wt52OOZD.js.map +1 -1
  253. package/dist/shared/{hx-action-bar-BKMADbHj.js → hx-action-bar-6UzmViHI.js} +4 -4
  254. package/dist/shared/hx-action-bar-6UzmViHI.js.map +1 -0
  255. package/dist/shared/hx-alert-D7n94HwI.js.map +1 -1
  256. package/dist/shared/hx-avatar-iLYzu8MJ.js.map +1 -1
  257. package/dist/shared/hx-badge-CVCmMPyW.js.map +1 -1
  258. package/dist/shared/hx-banner-C_He7Tr4.js.map +1 -1
  259. package/dist/shared/{hx-breadcrumb-item-CldCwD1d.js → hx-breadcrumb-item-BgG5RcmA.js} +3 -3
  260. package/dist/shared/hx-breadcrumb-item-BgG5RcmA.js.map +1 -0
  261. package/dist/shared/{hx-button-Ddl-T6T-.js → hx-button-CQZswjtQ.js} +15 -15
  262. package/dist/shared/hx-button-CQZswjtQ.js.map +1 -0
  263. package/dist/shared/hx-button-group-BJOGWoMa.js.map +1 -1
  264. package/dist/shared/{hx-card-ycveujjL.js → hx-card-Dy_FuLfS.js} +23 -23
  265. package/dist/shared/hx-card-Dy_FuLfS.js.map +1 -0
  266. package/dist/shared/hx-carousel-item-D_dCv61-.js.map +1 -1
  267. package/dist/shared/{hx-checkbox-DkkoWoye.js → hx-checkbox-ZKjOF7_3.js} +17 -17
  268. package/dist/shared/{hx-checkbox-DkkoWoye.js.map → hx-checkbox-ZKjOF7_3.js.map} +1 -1
  269. package/dist/shared/{hx-checkbox-group-C3poJ-Zw.js → hx-checkbox-group-XjOBHLiP.js} +3 -3
  270. package/dist/shared/hx-checkbox-group-XjOBHLiP.js.map +1 -0
  271. package/dist/shared/hx-clinical-status-BS5lcddT.js.map +1 -1
  272. package/dist/shared/hx-code-snippet-B7wUKzyb.js.map +1 -1
  273. package/dist/shared/hx-color-picker-DBaKTVLr.js.map +1 -1
  274. package/dist/shared/{hx-combobox-BmgYT7Ar.js → hx-combobox-DLwnvHVd.js} +17 -17
  275. package/dist/shared/hx-combobox-DLwnvHVd.js.map +1 -0
  276. package/dist/shared/hx-container-DVI7sxfX.js.map +1 -1
  277. package/dist/shared/hx-copy-button-8deNUdwP.js.map +1 -1
  278. package/dist/shared/hx-counter-CKfl_g8K.js.map +1 -1
  279. package/dist/shared/{hx-data-table-B6h0RPn0.js → hx-data-table-CnLxo9PH.js} +77 -76
  280. package/dist/shared/hx-data-table-CnLxo9PH.js.map +1 -0
  281. package/dist/shared/{hx-date-picker-Dq2Nb68_.js → hx-date-picker-D7H7CsVH.js} +21 -21
  282. package/dist/shared/hx-date-picker-D7H7CsVH.js.map +1 -0
  283. package/dist/shared/{hx-dialog-CvIlY0Tc.js → hx-dialog-BW-jetzN.js} +33 -33
  284. package/dist/shared/hx-dialog-BW-jetzN.js.map +1 -0
  285. package/dist/shared/{hx-divider-DwpOrzMW.js → hx-divider-CvyUVcp-.js} +13 -13
  286. package/dist/shared/hx-divider-CvyUVcp-.js.map +1 -0
  287. package/dist/shared/{hx-drawer-Cx2ZJhBe.js → hx-drawer-BT52I4tk.js} +13 -10
  288. package/dist/shared/hx-drawer-BT52I4tk.js.map +1 -0
  289. package/dist/shared/{hx-dropdown-BjDrPUq5.js → hx-dropdown-BpVpL6Dz.js} +3 -3
  290. package/dist/shared/{hx-dropdown-BjDrPUq5.js.map → hx-dropdown-BpVpL6Dz.js.map} +1 -1
  291. package/dist/shared/{hx-field-Dp3qQMut.js → hx-field-BX4zE3z5.js} +7 -7
  292. package/dist/shared/hx-field-BX4zE3z5.js.map +1 -0
  293. package/dist/shared/{hx-field-label-BC8QViXv.js → hx-field-label-DtJzb1r3.js} +8 -8
  294. package/dist/shared/hx-field-label-DtJzb1r3.js.map +1 -0
  295. package/dist/shared/{hx-file-upload-B6Yl1u0i.js → hx-file-upload-BNuepoGn.js} +34 -34
  296. package/dist/shared/hx-file-upload-BNuepoGn.js.map +1 -0
  297. package/dist/shared/hx-grid-CXZf3jeK.js.map +1 -1
  298. package/dist/shared/{hx-help-text-D7eytSim.js → hx-help-text-Br3igJv5.js} +7 -7
  299. package/dist/shared/hx-help-text-Br3igJv5.js.map +1 -0
  300. package/dist/shared/hx-icon-CcyDPDYY.js.map +1 -1
  301. package/dist/shared/{hx-icon-button-BHneqPCU.js → hx-icon-button-CqXH5Wwb.js} +7 -7
  302. package/dist/shared/hx-icon-button-CqXH5Wwb.js.map +1 -0
  303. package/dist/shared/hx-image-2gt14zZd.js.map +1 -1
  304. package/dist/shared/{hx-link-BESrWK8M.js → hx-link-Bem4Gn68.js} +8 -8
  305. package/dist/shared/hx-link-Bem4Gn68.js.map +1 -0
  306. package/dist/shared/hx-list-_9qVv02L.js.map +1 -1
  307. package/dist/shared/{hx-menu-divider-Ck-9Os1t.js → hx-menu-divider-DsHWyPHy.js} +37 -37
  308. package/dist/shared/hx-menu-divider-DsHWyPHy.js.map +1 -0
  309. package/dist/shared/hx-meter-TbROk-dw.js.map +1 -1
  310. package/dist/shared/hx-nav-BcYDmjf7.js.map +1 -1
  311. package/dist/shared/{hx-nav-item-pqPasRUm.js → hx-nav-item-BTMMQv6c.js} +34 -30
  312. package/dist/shared/hx-nav-item-BTMMQv6c.js.map +1 -0
  313. package/dist/shared/{hx-number-input-mOIZ3-46.js → hx-number-input-l6jeaGWW.js} +71 -71
  314. package/dist/shared/hx-number-input-l6jeaGWW.js.map +1 -0
  315. package/dist/shared/{hx-overflow-menu-Dprb9lnT.js → hx-overflow-menu-DJ4qpgmi.js} +12 -12
  316. package/dist/shared/hx-overflow-menu-DJ4qpgmi.js.map +1 -0
  317. package/dist/shared/{hx-pagination-AguTQjYC.js → hx-pagination-5FeVFIve.js} +64 -64
  318. package/dist/shared/hx-pagination-5FeVFIve.js.map +1 -0
  319. package/dist/shared/hx-patient-banner-uE6gqLpT.js.map +1 -1
  320. package/dist/shared/{hx-phi-field-BC_XowhC.js → hx-phi-field-DxeWcRm9.js} +3 -3
  321. package/dist/shared/hx-phi-field-DxeWcRm9.js.map +1 -0
  322. package/dist/shared/{hx-popover-B2_203ct.js → hx-popover-C05QcD9m.js} +6 -6
  323. package/dist/shared/hx-popover-C05QcD9m.js.map +1 -0
  324. package/dist/shared/hx-popup-DZXpsJ1R.js.map +1 -1
  325. package/dist/shared/{hx-progress-bar-KjEkEJLy.js → hx-progress-bar-CJdwAeDg.js} +11 -11
  326. package/dist/shared/hx-progress-bar-CJdwAeDg.js.map +1 -0
  327. package/dist/shared/hx-progress-ring-3zMwvrwD.js.map +1 -1
  328. package/dist/shared/hx-prose-BCtK7YL6.js.map +1 -1
  329. package/dist/shared/{hx-radio-BBC5qZgE.js → hx-radio-QHrhL908.js} +11 -11
  330. package/dist/shared/hx-radio-QHrhL908.js.map +1 -0
  331. package/dist/shared/hx-rating-C3E3ENJb.js.map +1 -1
  332. package/dist/shared/{hx-select-CixTo7jp.js → hx-select-BuMvRDkY.js} +47 -44
  333. package/dist/shared/hx-select-BuMvRDkY.js.map +1 -0
  334. package/dist/shared/hx-skeleton-LxkI0pxr.js.map +1 -1
  335. package/dist/shared/{hx-slider-DFHuzF3N.js → hx-slider-wcF_oyNJ.js} +41 -41
  336. package/dist/shared/hx-slider-wcF_oyNJ.js.map +1 -0
  337. package/dist/shared/hx-spinner-BKjuCdZB.js.map +1 -1
  338. package/dist/shared/{hx-split-button-CGcJMmCG.js → hx-split-button-CEkQqbF9.js} +32 -32
  339. package/dist/shared/hx-split-button-CEkQqbF9.js.map +1 -0
  340. package/dist/shared/{hx-split-panel-C-1R10Mc.js → hx-split-panel-BymHlV5e.js} +4 -4
  341. package/dist/shared/hx-split-panel-BymHlV5e.js.map +1 -0
  342. package/dist/shared/hx-stack-DGfcOfWJ.js.map +1 -1
  343. package/dist/shared/hx-stat-BTpykQAt.js.map +1 -1
  344. package/dist/shared/hx-status-indicator-X2QEWNFt.js.map +1 -1
  345. package/dist/shared/hx-step-CRNQlmSo.js.map +1 -1
  346. package/dist/shared/hx-structured-list-CqNbaEXg.js.map +1 -1
  347. package/dist/shared/{hx-switch-DqOD9JR7.js → hx-switch-CbunfMHW.js} +5 -5
  348. package/dist/shared/hx-switch-CbunfMHW.js.map +1 -0
  349. package/dist/shared/hx-tab-panel-BIzKfW5i.js.map +1 -1
  350. package/dist/shared/hx-tag-CgnrNnte.js.map +1 -1
  351. package/dist/shared/hx-td-Bra35cH4.js.map +1 -1
  352. package/dist/shared/hx-text-DMC2CPlL.js.map +1 -1
  353. package/dist/shared/{hx-text-input--q0GH78x.js → hx-text-input-eSPVURd5.js} +8 -8
  354. package/dist/shared/hx-text-input-eSPVURd5.js.map +1 -0
  355. package/dist/shared/{hx-textarea-CK621vSL.js → hx-textarea-C4DjRmo4.js} +12 -12
  356. package/dist/shared/hx-textarea-C4DjRmo4.js.map +1 -0
  357. package/dist/shared/{hx-theme-DfEy-SJA.js → hx-theme-DP4oPU1i.js} +44 -35
  358. package/dist/shared/hx-theme-DP4oPU1i.js.map +1 -0
  359. package/dist/shared/{hx-time-picker-tPUfgElQ.js → hx-time-picker-BtbHX7A4.js} +28 -28
  360. package/dist/shared/hx-time-picker-BtbHX7A4.js.map +1 -0
  361. package/dist/shared/{hx-toggle-button-L-uBJr-a.js → hx-toggle-button-FOvw-ebx.js} +26 -23
  362. package/dist/shared/hx-toggle-button-FOvw-ebx.js.map +1 -0
  363. package/dist/shared/{hx-tooltip-B_zfKvwc.js → hx-tooltip-BoZi2crX.js} +4 -4
  364. package/dist/shared/hx-tooltip-BoZi2crX.js.map +1 -0
  365. package/dist/shared/{hx-top-nav-CATbRvIv.js → hx-top-nav-Cd9zvv1B.js} +20 -20
  366. package/dist/shared/hx-top-nav-Cd9zvv1B.js.map +1 -0
  367. package/dist/shared/hx-tree-item-A45WCiBu.js.map +1 -1
  368. package/dist/shared/toast-factory-BPPnG3mM.js.map +1 -1
  369. package/figma-inventory.json +8526 -511
  370. package/package.json +2 -2
  371. package/dist/shared/hx-action-bar-BKMADbHj.js.map +0 -1
  372. package/dist/shared/hx-breadcrumb-item-CldCwD1d.js.map +0 -1
  373. package/dist/shared/hx-button-Ddl-T6T-.js.map +0 -1
  374. package/dist/shared/hx-card-ycveujjL.js.map +0 -1
  375. package/dist/shared/hx-checkbox-group-C3poJ-Zw.js.map +0 -1
  376. package/dist/shared/hx-combobox-BmgYT7Ar.js.map +0 -1
  377. package/dist/shared/hx-data-table-B6h0RPn0.js.map +0 -1
  378. package/dist/shared/hx-date-picker-Dq2Nb68_.js.map +0 -1
  379. package/dist/shared/hx-dialog-CvIlY0Tc.js.map +0 -1
  380. package/dist/shared/hx-divider-DwpOrzMW.js.map +0 -1
  381. package/dist/shared/hx-drawer-Cx2ZJhBe.js.map +0 -1
  382. package/dist/shared/hx-field-Dp3qQMut.js.map +0 -1
  383. package/dist/shared/hx-field-label-BC8QViXv.js.map +0 -1
  384. package/dist/shared/hx-file-upload-B6Yl1u0i.js.map +0 -1
  385. package/dist/shared/hx-help-text-D7eytSim.js.map +0 -1
  386. package/dist/shared/hx-icon-button-BHneqPCU.js.map +0 -1
  387. package/dist/shared/hx-link-BESrWK8M.js.map +0 -1
  388. package/dist/shared/hx-menu-divider-Ck-9Os1t.js.map +0 -1
  389. package/dist/shared/hx-nav-item-pqPasRUm.js.map +0 -1
  390. package/dist/shared/hx-number-input-mOIZ3-46.js.map +0 -1
  391. package/dist/shared/hx-overflow-menu-Dprb9lnT.js.map +0 -1
  392. package/dist/shared/hx-pagination-AguTQjYC.js.map +0 -1
  393. package/dist/shared/hx-phi-field-BC_XowhC.js.map +0 -1
  394. package/dist/shared/hx-popover-B2_203ct.js.map +0 -1
  395. package/dist/shared/hx-progress-bar-KjEkEJLy.js.map +0 -1
  396. package/dist/shared/hx-radio-BBC5qZgE.js.map +0 -1
  397. package/dist/shared/hx-select-CixTo7jp.js.map +0 -1
  398. package/dist/shared/hx-slider-DFHuzF3N.js.map +0 -1
  399. package/dist/shared/hx-split-button-CGcJMmCG.js.map +0 -1
  400. package/dist/shared/hx-split-panel-C-1R10Mc.js.map +0 -1
  401. package/dist/shared/hx-switch-DqOD9JR7.js.map +0 -1
  402. package/dist/shared/hx-text-input--q0GH78x.js.map +0 -1
  403. package/dist/shared/hx-textarea-CK621vSL.js.map +0 -1
  404. package/dist/shared/hx-theme-DfEy-SJA.js.map +0 -1
  405. package/dist/shared/hx-time-picker-tPUfgElQ.js.map +0 -1
  406. package/dist/shared/hx-toggle-button-L-uBJr-a.js.map +0 -1
  407. package/dist/shared/hx-tooltip-B_zfKvwc.js.map +0 -1
  408. package/dist/shared/hx-top-nav-CATbRvIv.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
 
@@ -2991,7 +2991,7 @@
2991
2991
  gap: var(--hx-space-1, 0.25rem);
2992
2992
  font-size: var(--hx-font-size-sm, 0.875rem);
2993
2993
  font-weight: var(--hx-font-weight-medium, 500);
2994
- color: var(--hx-combobox-label-color, var(--hx-color-neutral-700, #334155));
2994
+ color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #334155));
2995
2995
  line-height: var(--hx-line-height-normal, 1.5);
2996
2996
  }
2997
2997
  .field__required-marker {
@@ -3003,9 +3003,9 @@
3003
3003
  display: flex;
3004
3004
  align-items: center;
3005
3005
  border: var(--hx-border-width-thin, 1px) solid
3006
- var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
3006
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
3007
3007
  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));
3008
+ background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
3009
3009
  transition:
3010
3010
  border-color var(--hx-transition-fast, 150ms ease),
3011
3011
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3044,7 +3044,7 @@
3044
3044
  display: flex;
3045
3045
  align-items: center;
3046
3046
  padding: 0 var(--hx-space-2, 0.5rem);
3047
- color: var(--hx-color-neutral-500, #64748b);
3047
+ color: var(--hx-color-text-muted, #64748b);
3048
3048
  flex-shrink: 0;
3049
3049
  }
3050
3050
  .field__input {
@@ -3057,11 +3057,11 @@
3057
3057
  font-family: inherit;
3058
3058
  font-size: var(--hx-font-size-md, 1rem);
3059
3059
  line-height: var(--hx-line-height-normal, 1.5);
3060
- color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
3060
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
3061
3061
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3062
3062
  }
3063
3063
  .field__input::placeholder {
3064
- color: var(--hx-color-neutral-400, #94a3b8);
3064
+ color: var(--hx-color-text-placeholder, #94a3b8);
3065
3065
  }
3066
3066
  .field__input--sm {
3067
3067
  min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -3080,7 +3080,7 @@
3080
3080
  justify-content: center;
3081
3081
  margin-inline-end: var(--hx-space-2, 0.5rem);
3082
3082
  flex-shrink: 0;
3083
- color: var(--hx-color-neutral-400, #94a3b8);
3083
+ color: var(--hx-color-text-placeholder, #94a3b8);
3084
3084
  }
3085
3085
  .field__clear-button {
3086
3086
  width: 1.25rem;
@@ -3093,7 +3093,7 @@
3093
3093
  transition: color var(--hx-transition-fast, 150ms ease);
3094
3094
  }
3095
3095
  .field__clear-button:hover {
3096
- color: var(--hx-color-neutral-700, #334155);
3096
+ color: var(--hx-color-text-strong, #334155);
3097
3097
  }
3098
3098
  .field__clear-button:focus-visible {
3099
3099
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -3128,9 +3128,9 @@
3128
3128
  left: 0;
3129
3129
  right: 0;
3130
3130
  z-index: var(--hx-z-index-dropdown, 1000);
3131
- background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
3131
+ background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
3132
3132
  border: var(--hx-border-width-thin, 1px) solid
3133
- var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
3133
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
3134
3134
  border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
3135
3135
  box-shadow: var(
3136
3136
  --hx-combobox-listbox-shadow,
@@ -3155,7 +3155,7 @@
3155
3155
  gap: var(--hx-space-2, 0.5rem);
3156
3156
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3157
3157
  font-size: var(--hx-font-size-md, 1rem);
3158
- color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
3158
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
3159
3159
  cursor: pointer;
3160
3160
  user-select: none;
3161
3161
  -webkit-user-select: none;
@@ -3191,7 +3191,7 @@
3191
3191
  .field__no-options {
3192
3192
  padding: var(--hx-space-3, 0.75rem);
3193
3193
  text-align: center;
3194
- color: var(--hx-color-neutral-400, #94a3b8);
3194
+ color: var(--hx-color-text-placeholder, #94a3b8);
3195
3195
  font-size: var(--hx-font-size-sm, 0.875rem);
3196
3196
  }
3197
3197
  .field__sr-only {
@@ -3211,7 +3211,7 @@
3211
3211
  line-height: var(--hx-line-height-normal, 1.5);
3212
3212
  }
3213
3213
  .field__help-text {
3214
- color: var(--hx-color-neutral-500, #64748b);
3214
+ color: var(--hx-color-text-muted, #64748b);
3215
3215
  }
3216
3216
  .field__error {
3217
3217
  color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
@@ -3682,14 +3682,14 @@
3682
3682
  /* ─── Head ─── */
3683
3683
 
3684
3684
  thead {
3685
- background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
3685
+ background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
3686
3686
  }
3687
3687
 
3688
3688
  :host([sticky-header]) thead th {
3689
3689
  position: sticky;
3690
3690
  top: 0;
3691
3691
  z-index: 1;
3692
- background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
3692
+ background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
3693
3693
  }
3694
3694
 
3695
3695
  /* ─── Cells ─── */
@@ -3699,18 +3699,18 @@
3699
3699
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
3700
3700
  text-align: start;
3701
3701
  border-bottom: var(--hx-border-width-thin, 1px) solid
3702
- var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
3702
+ var(--hx-data-table-border-color, var(--hx-color-border-default, #e2e8f0));
3703
3703
  vertical-align: middle;
3704
3704
  }
3705
3705
 
3706
3706
  th {
3707
3707
  font-weight: var(--hx-font-weight-semibold, 600);
3708
- color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
3708
+ color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #334155));
3709
3709
  white-space: nowrap;
3710
3710
  }
3711
3711
 
3712
3712
  td {
3713
- color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
3713
+ color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0f172a));
3714
3714
  }
3715
3715
 
3716
3716
  /* ─── Checkbox Column ─── */
@@ -3784,7 +3784,7 @@
3784
3784
  }
3785
3785
 
3786
3786
  tbody tr:hover {
3787
- background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
3787
+ background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
3788
3788
  }
3789
3789
 
3790
3790
  tbody tr[aria-selected='true'] {
@@ -3806,6 +3806,7 @@
3806
3806
  display: block;
3807
3807
  height: 1em;
3808
3808
  border-radius: var(--hx-border-radius-sm, 2px);
3809
+ /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */
3809
3810
  background: linear-gradient(
3810
3811
  90deg,
3811
3812
  var(--hx-color-neutral-200, #e2e8f0) 25%,
@@ -3859,7 +3860,7 @@
3859
3860
 
3860
3861
  .empty-cell {
3861
3862
  text-align: center;
3862
- color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
3863
+ color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #475569));
3863
3864
  padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
3864
3865
  }
3865
3866
 
@@ -3926,7 +3927,7 @@
3926
3927
  gap: var(--hx-space-1, 0.25rem);
3927
3928
  font-size: var(--hx-font-size-sm, 0.875rem);
3928
3929
  font-weight: var(--hx-font-weight-medium, 500);
3929
- color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #334155));
3930
+ color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #334155));
3930
3931
  line-height: var(--hx-line-height-normal, 1.5);
3931
3932
  }
3932
3933
 
@@ -3943,9 +3944,9 @@
3943
3944
  display: flex;
3944
3945
  align-items: stretch;
3945
3946
  border: var(--hx-border-width-thin, 1px) solid
3946
- var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
3947
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
3947
3948
  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));
3949
+ background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
3949
3950
  transition:
3950
3951
  border-color var(--hx-transition-fast, 150ms ease),
3951
3952
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3996,7 +3997,7 @@
3996
3997
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3997
3998
  font-family: inherit;
3998
3999
  font-size: var(--hx-font-size-md, 1rem);
3999
- color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #1e293b));
4000
+ color: var(--hx-date-picker-color, var(--hx-color-text-strong, #1e293b));
4000
4001
  line-height: var(--hx-line-height-normal, 1.5);
4001
4002
  min-height: var(--hx-size-10, 2.5rem);
4002
4003
  width: 100%;
@@ -4004,7 +4005,7 @@
4004
4005
  }
4005
4006
 
4006
4007
  .field__input::placeholder {
4007
- color: var(--hx-color-neutral-400, #94a3b8);
4008
+ color: var(--hx-color-text-placeholder, #94a3b8);
4008
4009
  }
4009
4010
 
4010
4011
  .field__input:disabled {
@@ -4022,9 +4023,9 @@
4022
4023
  padding: 0 var(--hx-space-3, 0.75rem);
4023
4024
  border: none;
4024
4025
  border-left: var(--hx-border-width-thin, 1px) solid
4025
- var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
4026
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
4026
4027
  background: transparent;
4027
- color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
4028
+ color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #64748b));
4028
4029
  cursor: pointer;
4029
4030
  flex-shrink: 0;
4030
4031
  transition: color var(--hx-transition-fast, 150ms ease);
@@ -4048,7 +4049,7 @@
4048
4049
  }
4049
4050
 
4050
4051
  .field__trigger:hover:not(:disabled) {
4051
- color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
4052
+ color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #334155));
4052
4053
  background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
4053
4054
  }
4054
4055
 
@@ -4066,9 +4067,9 @@
4066
4067
  left: 0;
4067
4068
  z-index: var(--hx-z-index-dropdown, 1000);
4068
4069
  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));
4070
+ background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
4070
4071
  border: var(--hx-border-width-thin, 1px) solid
4071
- var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
4072
+ var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #e2e8f0));
4072
4073
  border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
4073
4074
  box-shadow: var(
4074
4075
  --hx-date-picker-calendar-shadow,
@@ -4127,14 +4128,14 @@
4127
4128
  }
4128
4129
 
4129
4130
  .calendar__nav-btn {
4130
- color: var(--hx-color-neutral-600, #475569);
4131
+ color: var(--hx-color-text-secondary, #475569);
4131
4132
  font-size: var(--hx-font-size-lg, 1.125rem);
4132
4133
  line-height: 1;
4133
4134
  }
4134
4135
 
4135
4136
  .calendar__nav-btn:hover {
4136
- background-color: var(--hx-color-neutral-100, #f1f5f9);
4137
- color: var(--hx-color-neutral-900, #0f172a);
4137
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
4138
+ color: var(--hx-color-text-primary, #0f172a);
4138
4139
  }
4139
4140
 
4140
4141
  :is(.calendar__nav-btn, .calendar__day):focus-visible {
@@ -4155,7 +4156,7 @@
4155
4156
  .calendar__month-label {
4156
4157
  font-size: var(--hx-font-size-sm, 0.875rem);
4157
4158
  font-weight: var(--hx-font-weight-semibold, 600);
4158
- color: var(--hx-color-neutral-800, #1e293b);
4159
+ color: var(--hx-color-text-strong, #1e293b);
4159
4160
  flex: 1;
4160
4161
  text-align: center;
4161
4162
  }
@@ -4180,7 +4181,7 @@
4180
4181
  height: var(--hx-size-8, 2rem);
4181
4182
  font-size: var(--hx-font-size-xs, 0.75rem);
4182
4183
  font-weight: var(--hx-font-weight-semibold, 600);
4183
- color: var(--hx-color-neutral-500, #64748b);
4184
+ color: var(--hx-color-text-muted, #64748b);
4184
4185
  text-transform: uppercase;
4185
4186
  letter-spacing: 0.05em;
4186
4187
  }
@@ -4190,20 +4191,20 @@
4190
4191
  ============================================================ */
4191
4192
 
4192
4193
  .calendar__day {
4193
- color: var(--hx-color-neutral-800, #1e293b);
4194
+ color: var(--hx-color-text-strong, #1e293b);
4194
4195
  font-size: var(--hx-font-size-sm, 0.875rem);
4195
4196
  font-family: inherit;
4196
4197
  position: relative;
4197
4198
  }
4198
4199
 
4199
4200
  .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);
4201
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
4202
+ color: var(--hx-color-text-primary, #0f172a);
4202
4203
  }
4203
4204
 
4204
4205
  .calendar__day--selected {
4205
4206
  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));
4207
+ color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
4207
4208
  font-weight: var(--hx-font-weight-semibold, 600);
4208
4209
  }
4209
4210
 
@@ -4261,7 +4262,7 @@
4261
4262
  }
4262
4263
 
4263
4264
  .field__help-text {
4264
- color: var(--hx-color-neutral-500, #64748b);
4265
+ color: var(--hx-color-text-muted, #64748b);
4265
4266
  }
4266
4267
 
4267
4268
  .field__error {
@@ -4349,8 +4350,8 @@
4349
4350
  display: flex;
4350
4351
  flex-direction: column;
4351
4352
  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));
4353
+ background-color: var(--hx-dialog-bg, var(--hx-color-surface-default));
4354
+ color: var(--hx-dialog-color, var(--hx-color-text-primary));
4354
4355
  border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
4355
4356
  box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
4356
4357
  width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
@@ -4385,7 +4386,7 @@
4385
4386
  /* ─── Native backdrop (modal mode) ─── */
4386
4387
 
4387
4388
  dialog::backdrop {
4388
- background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
4389
+ background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
4389
4390
  opacity: 0;
4390
4391
  transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
4391
4392
  }
@@ -4405,7 +4406,7 @@
4405
4406
  .dialog-backdrop {
4406
4407
  position: fixed;
4407
4408
  inset: 0;
4408
- background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
4409
+ background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
4409
4410
  opacity: var(--hx-dialog-backdrop-opacity, 0.5);
4410
4411
  /* D5 — backdrop z-index must be lower than the dialog element's z-index */
4411
4412
  z-index: var(--hx-z-index-modal, 1400);
@@ -4419,7 +4420,7 @@
4419
4420
  justify-content: space-between;
4420
4421
  padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
4421
4422
  border-bottom: var(--hx-border-width-thin) solid
4422
- var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));
4423
+ var(--hx-dialog-header-border-color, var(--hx-color-border-default));
4423
4424
  gap: var(--hx-space-4);
4424
4425
  flex-shrink: 0;
4425
4426
  }
@@ -4430,7 +4431,7 @@
4430
4431
  font-size: var(--hx-font-size-lg);
4431
4432
  font-weight: var(--hx-font-weight-semibold);
4432
4433
  line-height: var(--hx-line-height-tight);
4433
- color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));
4434
+ color: var(--hx-dialog-heading-color, var(--hx-color-text-primary));
4434
4435
  flex: 1 1 auto;
4435
4436
  }
4436
4437
 
@@ -4452,7 +4453,7 @@
4452
4453
  border: none;
4453
4454
  border-radius: var(--hx-border-radius-sm, 0.25rem);
4454
4455
  cursor: pointer;
4455
- color: var(--hx-color-neutral-500, #64748b);
4456
+ color: var(--hx-color-text-muted, #64748b);
4456
4457
  font-size: var(--hx-font-size-xl, 1.25rem);
4457
4458
  line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
4458
4459
  transition:
@@ -4465,8 +4466,8 @@
4465
4466
  }
4466
4467
 
4467
4468
  .dialog__close-btn:hover {
4468
- color: var(--hx-color-neutral-900);
4469
- background-color: var(--hx-color-neutral-100);
4469
+ color: var(--hx-color-text-primary);
4470
+ background-color: var(--hx-color-surface-sunken);
4470
4471
  }
4471
4472
 
4472
4473
  .dialog__close-btn:focus-visible {
@@ -4496,7 +4497,7 @@
4496
4497
  gap: var(--hx-space-3);
4497
4498
  padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
4498
4499
  border-top: var(--hx-border-width-thin) solid
4499
- var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));
4500
+ var(--hx-dialog-footer-border-color, var(--hx-color-border-default));
4500
4501
  flex-shrink: 0;
4501
4502
  }
4502
4503
 
@@ -4537,9 +4538,9 @@
4537
4538
  /* ── hx-divider ── */
4538
4539
  :host {
4539
4540
  display: block;
4540
- --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));
4541
+ --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #e2e8f0));
4541
4542
  --_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));
4543
+ --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #64748b));
4543
4544
  --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
4544
4545
  --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
4545
4546
  }
@@ -4670,7 +4671,10 @@
4670
4671
  .drawer-backdrop {
4671
4672
  position: absolute;
4672
4673
  inset: 0;
4673
- background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));
4674
+ background-color: var(
4675
+ --hx-drawer-backdrop-color,
4676
+ var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
4677
+ );
4674
4678
  opacity: 0;
4675
4679
  transition: opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
4676
4680
  }
@@ -4691,8 +4695,8 @@
4691
4695
  position: absolute;
4692
4696
  display: flex;
4693
4697
  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));
4698
+ background-color: var(--hx-drawer-bg, var(--hx-color-surface-default, #ffffff));
4699
+ color: var(--hx-drawer-color, var(--hx-color-text-primary, #0f172a));
4696
4700
  box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
4697
4701
  overflow: hidden;
4698
4702
  outline: none;
@@ -4790,7 +4794,7 @@
4790
4794
  gap: var(--hx-space-4, 1rem);
4791
4795
  padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
4792
4796
  border-bottom: var(--hx-border-width-thin, 1px) solid
4793
- var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));
4797
+ var(--hx-drawer-header-border-color, var(--hx-color-border-default, #e2e8f0));
4794
4798
  flex-shrink: 0;
4795
4799
  }
4796
4800
 
@@ -4801,7 +4805,7 @@
4801
4805
  font-size: var(--hx-font-size-lg);
4802
4806
  font-weight: var(--hx-font-weight-semibold);
4803
4807
  line-height: var(--hx-line-height-tight);
4804
- color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));
4808
+ color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0f172a));
4805
4809
  }
4806
4810
 
4807
4811
  .drawer-header-actions {
@@ -4824,15 +4828,15 @@
4824
4828
  border: none;
4825
4829
  border-radius: var(--hx-border-radius-md, 0.375rem);
4826
4830
  background: transparent;
4827
- color: var(--hx-color-neutral-500);
4831
+ color: var(--hx-color-text-muted, #64748b);
4828
4832
  cursor: pointer;
4829
4833
  flex-shrink: 0;
4830
4834
  transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
4831
4835
  }
4832
4836
 
4833
4837
  .drawer-close-button:hover {
4834
- background-color: var(--hx-color-neutral-100);
4835
- color: var(--hx-color-neutral-900);
4838
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
4839
+ color: var(--hx-color-text-primary, #0f172a);
4836
4840
  }
4837
4841
 
4838
4842
  .drawer-close-button:focus-visible {
@@ -4888,7 +4892,7 @@
4888
4892
  gap: var(--hx-space-3, 0.75rem);
4889
4893
  padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
4890
4894
  border-top: var(--hx-border-width-thin, 1px) solid
4891
- var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
4895
+ var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #e2e8f0));
4892
4896
  flex-shrink: 0;
4893
4897
  }
4894
4898
 
@@ -4931,8 +4935,8 @@
4931
4935
  position: fixed;
4932
4936
  z-index: var(--hx-dropdown-panel-z-index, 1000);
4933
4937
  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));
4938
+ background: var(--hx-dropdown-panel-bg, var(--hx-color-surface-default, #ffffff));
4939
+ border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #e2e8f0));
4936
4940
  border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
4937
4941
  box-shadow: var(
4938
4942
  --hx-dropdown-panel-shadow,
@@ -5015,7 +5019,7 @@
5015
5019
  gap: var(--hx-space-1, 0.25rem);
5016
5020
  font-size: var(--hx-font-size-sm, 0.875rem);
5017
5021
  font-weight: var(--hx-font-weight-medium, 500);
5018
- color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
5022
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
5019
5023
  line-height: var(--hx-line-height-normal, 1.5);
5020
5024
  cursor: pointer;
5021
5025
  }
@@ -5065,7 +5069,7 @@
5065
5069
 
5066
5070
  .field__help-text {
5067
5071
  font-size: var(--hx-font-size-xs, 0.75rem);
5068
- color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #64748b));
5072
+ color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #64748b));
5069
5073
  line-height: var(--hx-line-height-normal, 1.5);
5070
5074
  }
5071
5075
 
@@ -5133,7 +5137,7 @@
5133
5137
  gap: var(--hx-space-1, 0.25rem);
5134
5138
  font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
5135
5139
  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));
5140
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
5137
5141
  line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
5138
5142
  font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
5139
5143
  }
@@ -5146,7 +5150,7 @@
5146
5150
  .optional-indicator {
5147
5151
  font-size: var(--hx-font-size-xs, 0.75rem);
5148
5152
  font-weight: var(--hx-font-weight-normal, 400);
5149
- color: var(--hx-color-neutral-500, #64748b);
5153
+ color: var(--hx-color-text-muted, #64748b);
5150
5154
  }
5151
5155
 
5152
5156
  /* ─── High Contrast Mode (forced-colors) ─── */
@@ -5205,7 +5209,7 @@
5205
5209
  gap: var(--hx-space-1, 0.25rem);
5206
5210
  font-size: var(--hx-font-size-sm, 0.875rem);
5207
5211
  font-weight: var(--hx-font-weight-medium, 500);
5208
- color: var(--hx-color-neutral-700, #334155);
5212
+ color: var(--hx-color-text-strong, #334155);
5209
5213
  line-height: var(--hx-line-height-normal, 1.5);
5210
5214
  }
5211
5215
 
@@ -5220,9 +5224,9 @@
5220
5224
  min-height: var(--hx-space-32, 8rem);
5221
5225
  padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
5222
5226
  border: var(--hx-border-width-thin, 1px) dashed
5223
- var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #cbd5e1));
5227
+ var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #cbd5e1));
5224
5228
  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));
5229
+ background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f8fafc));
5226
5230
  cursor: pointer;
5227
5231
  text-align: center;
5228
5232
  transition:
@@ -5230,7 +5234,7 @@
5230
5234
  background-color var(--hx-transition-fast, 150ms ease),
5231
5235
  box-shadow var(--hx-transition-fast, 150ms ease);
5232
5236
  user-select: none;
5233
- color: var(--hx-color-neutral-600, #475569);
5237
+ color: var(--hx-color-text-secondary, #475569);
5234
5238
  font-size: var(--hx-font-size-sm, 0.875rem);
5235
5239
  }
5236
5240
 
@@ -5254,7 +5258,7 @@
5254
5258
  color-mix(
5255
5259
  in srgb,
5256
5260
  var(--hx-color-primary-500, #2563eb) 8%,
5257
- var(--hx-color-neutral-0, #ffffff)
5261
+ var(--hx-color-surface-default, #ffffff)
5258
5262
  )
5259
5263
  );
5260
5264
  border-style: solid;
@@ -5306,9 +5310,9 @@
5306
5310
  flex-direction: column;
5307
5311
  gap: var(--hx-space-1, 0.25rem);
5308
5312
  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);
5313
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0);
5310
5314
  border-radius: var(--hx-border-radius-md, 0.375rem);
5311
- background-color: var(--hx-color-neutral-0, #ffffff);
5315
+ background-color: var(--hx-color-surface-default, #ffffff);
5312
5316
  }
5313
5317
 
5314
5318
  .file-item__row {
@@ -5321,7 +5325,7 @@
5321
5325
  flex: 1;
5322
5326
  font-size: var(--hx-font-size-sm, 0.875rem);
5323
5327
  font-weight: var(--hx-font-weight-medium, 500);
5324
- color: var(--hx-color-neutral-800, #1e293b);
5328
+ color: var(--hx-color-text-strong, #1e293b);
5325
5329
  overflow: hidden;
5326
5330
  text-overflow: ellipsis;
5327
5331
  white-space: nowrap;
@@ -5330,7 +5334,7 @@
5330
5334
  .file-item__size {
5331
5335
  flex-shrink: 0;
5332
5336
  font-size: var(--hx-font-size-xs, 0.75rem);
5333
- color: var(--hx-color-neutral-500, #64748b);
5337
+ color: var(--hx-color-text-muted, #64748b);
5334
5338
  }
5335
5339
 
5336
5340
  .file-item__remove {
@@ -5344,7 +5348,7 @@
5344
5348
  border: none;
5345
5349
  border-radius: var(--hx-border-radius-sm, 0.25rem);
5346
5350
  background: transparent;
5347
- color: var(--hx-color-neutral-500, #64748b);
5351
+ color: var(--hx-color-text-muted, #64748b);
5348
5352
  cursor: pointer;
5349
5353
  line-height: 1;
5350
5354
  transition:
@@ -5377,7 +5381,7 @@
5377
5381
  .progress-track {
5378
5382
  width: 100%;
5379
5383
  height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
5380
- background-color: var(--hx-color-neutral-200, #e2e8f0);
5384
+ background-color: var(--hx-color-border-default, #e2e8f0);
5381
5385
  border-radius: var(--hx-border-radius-full, 9999px);
5382
5386
  overflow: hidden;
5383
5387
  }
@@ -5523,7 +5527,7 @@ export const helixGridItemStyles = css`
5523
5527
  font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
5524
5528
  font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
5525
5529
  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));
5530
+ color: var(--hx-help-text-color, var(--hx-color-text-muted, #64748b));
5527
5531
  margin: 0;
5528
5532
  }
5529
5533
 
@@ -5540,7 +5544,7 @@ export const helixGridItemStyles = css`
5540
5544
  /* ─── Variant: default ─── */
5541
5545
 
5542
5546
  .help-text--default {
5543
- --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
5547
+ --hx-help-text-color: var(--hx-color-text-muted, #64748b);
5544
5548
  }
5545
5549
 
5546
5550
  /* ─── Variant: error ─── */
@@ -5738,7 +5742,7 @@ export const helixGridItemStyles = css`
5738
5742
 
5739
5743
  .button--primary {
5740
5744
  --hx-icon-button-bg: var(--hx-color-primary-500);
5741
- --hx-icon-button-color: var(--hx-color-neutral-0);
5745
+ --hx-icon-button-color: var(--hx-color-text-on-primary);
5742
5746
  --hx-icon-button-border-color: transparent;
5743
5747
  }
5744
5748
 
@@ -5758,17 +5762,17 @@ export const helixGridItemStyles = css`
5758
5762
 
5759
5763
  .button--tertiary {
5760
5764
  --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);
5765
+ --hx-icon-button-color: var(--hx-color-text-strong);
5766
+ --hx-icon-button-border-color: var(--hx-color-border-strong);
5763
5767
  }
5764
5768
 
5765
5769
  .button--tertiary:hover {
5766
- --hx-icon-button-bg: var(--hx-color-neutral-100);
5770
+ --hx-icon-button-bg: var(--hx-color-surface-sunken);
5767
5771
  }
5768
5772
 
5769
5773
  .button--danger {
5770
5774
  --hx-icon-button-bg: var(--hx-color-error-500);
5771
- --hx-icon-button-color: var(--hx-color-neutral-0);
5775
+ --hx-icon-button-color: var(--hx-color-text-on-error);
5772
5776
  --hx-icon-button-border-color: transparent;
5773
5777
  }
5774
5778
 
@@ -5783,7 +5787,7 @@ export const helixGridItemStyles = css`
5783
5787
  }
5784
5788
 
5785
5789
  .button--ghost:hover {
5786
- --hx-icon-button-bg: var(--hx-color-neutral-100);
5790
+ --hx-icon-button-bg: var(--hx-color-surface-raised);
5787
5791
  }
5788
5792
 
5789
5793
  /* ─── Icon Container ─── */
@@ -5939,7 +5943,7 @@ export const helixGridItemStyles = css`
5939
5943
  /* --- Variant: subtle --- */
5940
5944
 
5941
5945
  .link--subtle {
5942
- color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
5946
+ color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #475569));
5943
5947
  text-decoration: none;
5944
5948
  }
5945
5949
 
@@ -5961,7 +5965,7 @@ export const helixGridItemStyles = css`
5961
5965
  /* --- Disabled --- */
5962
5966
 
5963
5967
  .link--disabled {
5964
- color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
5968
+ color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #94a3b8));
5965
5969
  text-decoration: none;
5966
5970
  cursor: not-allowed;
5967
5971
  }
@@ -6079,9 +6083,9 @@ export const helixGridItemStyles = css`
6079
6083
  display: flex;
6080
6084
  flex-direction: column;
6081
6085
  padding: var(--hx-space-1, 0.25rem);
6082
- background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));
6086
+ background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
6083
6087
  border: var(--hx-border-width-thin, 1px) solid
6084
- var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
6088
+ var(--hx-menu-border-color, var(--hx-color-border-default, #e2e8f0));
6085
6089
  border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
6086
6090
  box-shadow: var(
6087
6091
  --hx-menu-shadow,
@@ -6518,7 +6522,7 @@ export const helixGridItemStyles = css`
6518
6522
  gap: var(--hx-space-1);
6519
6523
  font-size: var(--hx-font-size-sm);
6520
6524
  font-weight: var(--hx-font-weight-medium);
6521
- color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
6525
+ color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
6522
6526
  line-height: var(--hx-line-height-normal);
6523
6527
  }
6524
6528
 
@@ -6533,9 +6537,9 @@ export const helixGridItemStyles = css`
6533
6537
  display: flex;
6534
6538
  align-items: stretch;
6535
6539
  border: var(--hx-border-width-thin) solid
6536
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
6540
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
6537
6541
  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));
6542
+ background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
6539
6543
  transition:
6540
6544
  border-color var(--hx-transition-fast),
6541
6545
  box-shadow var(--hx-transition-fast);
@@ -6583,7 +6587,7 @@ export const helixGridItemStyles = css`
6583
6587
  display: flex;
6584
6588
  align-items: center;
6585
6589
  padding: 0 var(--hx-space-3);
6586
- color: var(--hx-color-neutral-500);
6590
+ color: var(--hx-color-text-muted);
6587
6591
  flex-shrink: 0;
6588
6592
  }
6589
6593
 
@@ -6595,7 +6599,7 @@ export const helixGridItemStyles = css`
6595
6599
  outline: none;
6596
6600
  background: transparent;
6597
6601
  font-family: inherit;
6598
- color: var(--hx-number-input-color, var(--hx-color-neutral-800));
6602
+ color: var(--hx-number-input-color, var(--hx-color-text-strong));
6599
6603
  line-height: var(--hx-line-height-normal);
6600
6604
  width: 100%;
6601
6605
  /* Size: md (default) */
@@ -6605,7 +6609,7 @@ export const helixGridItemStyles = css`
6605
6609
  }
6606
6610
 
6607
6611
  .field__input::placeholder {
6608
- color: var(--hx-color-neutral-400);
6612
+ color: var(--hx-color-text-placeholder);
6609
6613
  }
6610
6614
 
6611
6615
  .field__input:disabled {
@@ -6644,7 +6648,7 @@ export const helixGridItemStyles = css`
6644
6648
  flex-direction: column;
6645
6649
  flex-shrink: 0;
6646
6650
  border-inline-start: var(--hx-border-width-thin) solid
6647
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
6651
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
6648
6652
  }
6649
6653
 
6650
6654
  .field__stepper-btn {
@@ -6654,7 +6658,7 @@ export const helixGridItemStyles = css`
6654
6658
  background: transparent;
6655
6659
  border: none;
6656
6660
  cursor: pointer;
6657
- color: var(--hx-color-neutral-600);
6661
+ color: var(--hx-color-text-secondary);
6658
6662
  padding: 0;
6659
6663
  flex: 1;
6660
6664
  min-width: var(--hx-size-8);
@@ -6666,12 +6670,12 @@ export const helixGridItemStyles = css`
6666
6670
 
6667
6671
  .field__stepper-btn:not(:last-child) {
6668
6672
  border-bottom: var(--hx-border-width-thin) solid
6669
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
6673
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
6670
6674
  }
6671
6675
 
6672
6676
  .field__stepper-btn:hover:not(:disabled) {
6673
- background-color: var(--hx-color-neutral-50);
6674
- color: var(--hx-color-neutral-800);
6677
+ background-color: var(--hx-color-surface-raised);
6678
+ color: var(--hx-color-text-strong);
6675
6679
  }
6676
6680
 
6677
6681
  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -6710,7 +6714,7 @@ export const helixGridItemStyles = css`
6710
6714
 
6711
6715
  .field__help-text {
6712
6716
  font-size: var(--hx-font-size-xs);
6713
- color: var(--hx-color-neutral-500);
6717
+ color: var(--hx-color-text-muted);
6714
6718
  line-height: var(--hx-line-height-normal);
6715
6719
  }
6716
6720
 
@@ -6829,7 +6833,7 @@ export const helixGridItemStyles = css`
6829
6833
  border: var(--hx-border-width-thin, 1px) solid transparent;
6830
6834
  border-radius: var(--hx-border-radius-md, 0.375rem);
6831
6835
  background-color: transparent;
6832
- color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
6836
+ color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #475569));
6833
6837
  cursor: pointer;
6834
6838
  transition:
6835
6839
  background-color var(--hx-transition-fast, 150ms ease),
@@ -6849,11 +6853,11 @@ export const helixGridItemStyles = css`
6849
6853
  }
6850
6854
 
6851
6855
  .trigger:hover:not([disabled]) {
6852
- background-color: var(--hx-color-neutral-100, #f1f5f9);
6856
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
6853
6857
  }
6854
6858
 
6855
6859
  .trigger--open {
6856
- background-color: var(--hx-color-neutral-100, #f1f5f9);
6860
+ background-color: var(--hx-color-surface-sunken, #f1f5f9);
6857
6861
  }
6858
6862
 
6859
6863
  /* ─── Size Variants ─── */
@@ -6886,8 +6890,8 @@ export const helixGridItemStyles = css`
6886
6890
  position: fixed;
6887
6891
  z-index: var(--hx-overflow-menu-panel-z-index, 1000);
6888
6892
  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));
6893
+ background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));
6894
+ border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #e2e8f0));
6891
6895
  border-radius: var(
6892
6896
  --hx-overflow-menu-panel-border-radius,
6893
6897
  var(--hx-border-radius-md, 0.375rem)
@@ -6912,7 +6916,7 @@ export const helixGridItemStyles = css`
6912
6916
  border: none;
6913
6917
  text-align: start;
6914
6918
  font-size: var(--hx-font-size-sm, 0.875rem);
6915
- color: var(--hx-color-neutral-900, #0f172a);
6919
+ color: var(--hx-color-text-primary, #0f172a);
6916
6920
  cursor: pointer;
6917
6921
  white-space: nowrap;
6918
6922
  box-sizing: border-box;
@@ -6921,7 +6925,7 @@ export const helixGridItemStyles = css`
6921
6925
  ::slotted([role='menuitem']:hover),
6922
6926
  ::slotted([role='menuitemcheckbox']:hover),
6923
6927
  ::slotted([role='menuitemradio']:hover) {
6924
- background-color: var(--hx-color-neutral-50, #f8fafc);
6928
+ background-color: var(--hx-color-surface-raised, #f8fafc);
6925
6929
  }
6926
6930
 
6927
6931
  ::slotted([role='menuitem']:focus-visible),
@@ -7013,10 +7017,10 @@ export const helixGridItemStyles = css`
7013
7017
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7014
7018
  padding: 0 var(--hx-space-2, 0.5rem);
7015
7019
  border: var(--hx-border-width-thin, 1px) solid
7016
- var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
7020
+ var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
7017
7021
  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));
7022
+ background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
7023
+ color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
7020
7024
  font-size: var(--hx-font-size-sm, 0.875rem);
7021
7025
  font-family: inherit;
7022
7026
  cursor: pointer;
@@ -7029,7 +7033,7 @@ export const helixGridItemStyles = css`
7029
7033
  }
7030
7034
 
7031
7035
  .button:hover:not(:disabled) {
7032
- background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
7036
+ background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #f1f5f9));
7033
7037
  border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
7034
7038
  }
7035
7039
 
@@ -7045,7 +7049,7 @@ export const helixGridItemStyles = css`
7045
7049
  --hx-pagination-active-border-color,
7046
7050
  var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
7047
7051
  );
7048
- color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #ffffff));
7052
+ color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
7049
7053
  font-weight: var(--hx-font-weight-semibold, 600);
7050
7054
  cursor: default;
7051
7055
  pointer-events: none;
@@ -7062,7 +7066,7 @@ export const helixGridItemStyles = css`
7062
7066
  justify-content: center;
7063
7067
  min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7064
7068
  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));
7069
+ color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #64748b));
7066
7070
  font-size: var(--hx-font-size-sm, 0.875rem);
7067
7071
  user-select: none;
7068
7072
  }
@@ -7083,7 +7087,7 @@ export const helixGridItemStyles = css`
7083
7087
  align-items: center;
7084
7088
  gap: var(--hx-space-2, 0.5rem);
7085
7089
  font-size: var(--hx-font-size-sm, 0.875rem);
7086
- color: var(--hx-color-neutral-500, #64748b);
7090
+ color: var(--hx-color-text-muted, #64748b);
7087
7091
  white-space: nowrap;
7088
7092
  }
7089
7093
 
@@ -7091,10 +7095,10 @@ export const helixGridItemStyles = css`
7091
7095
  min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
7092
7096
  padding: 0 var(--hx-space-2, 0.5rem);
7093
7097
  border: var(--hx-border-width-thin, 1px) solid
7094
- var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
7098
+ var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
7095
7099
  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));
7100
+ background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
7101
+ color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
7098
7102
  font-size: var(--hx-font-size-sm, 0.875rem);
7099
7103
  font-family: inherit;
7100
7104
  cursor: pointer;
@@ -7344,12 +7348,12 @@ export const helixGridItemStyles = css`
7344
7348
  .phi-field__value--masked {
7345
7349
  user-select: none;
7346
7350
  -webkit-user-select: none;
7347
- color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #64748b));
7351
+ color: var(--hx-phi-field-masked-color, var(--hx-color-text-muted, #64748b));
7348
7352
  letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
7349
7353
  }
7350
7354
 
7351
7355
  .phi-field__value--revealed {
7352
- color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #0f172a));
7356
+ color: var(--hx-phi-field-value-color, var(--hx-color-text-primary, #0f172a));
7353
7357
  }
7354
7358
 
7355
7359
  /* ─── Screen Reader Status ─── */
@@ -7455,12 +7459,12 @@ export const helixGridItemStyles = css`
7455
7459
  z-index: var(--hx-popover-z-index, 9999);
7456
7460
  max-width: var(--hx-popover-max-width, 320px);
7457
7461
  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));
7462
+ background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
7463
+ color: var(--hx-popover-color, var(--hx-color-text-primary, #0f172a));
7460
7464
  font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
7461
7465
  font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
7462
7466
  line-height: var(--hx-line-height-normal, 1.5);
7463
- border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
7467
+ border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
7464
7468
  border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
7465
7469
  box-shadow: var(
7466
7470
  --hx-popover-shadow,
@@ -7489,8 +7493,8 @@ export const helixGridItemStyles = css`
7489
7493
  position: absolute;
7490
7494
  width: var(--hx-popover-arrow-size, 10px);
7491
7495
  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));
7496
+ background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
7497
+ border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
7494
7498
  transform: rotate(45deg);
7495
7499
  pointer-events: none;
7496
7500
  }
@@ -7582,7 +7586,7 @@ export const helixGridItemStyles = css`
7582
7586
  font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
7583
7587
  font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
7584
7588
  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));
7589
+ color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong));
7586
7590
  line-height: var(--hx-line-height-tight, 1.25);
7587
7591
  }
7588
7592
 
@@ -7590,7 +7594,7 @@ export const helixGridItemStyles = css`
7590
7594
  position: relative;
7591
7595
  overflow: hidden;
7592
7596
  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));
7597
+ background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken));
7594
7598
  width: 100%;
7595
7599
  }
7596
7600
 
@@ -7886,7 +7890,7 @@ export const helixGridItemStyles = css`
7886
7890
  gap: var(--hx-space-1, 0.25rem);
7887
7891
  font-size: var(--hx-font-size-sm, 0.875rem);
7888
7892
  font-weight: var(--hx-font-weight-medium, 500);
7889
- color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #334155));
7893
+ color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #334155));
7890
7894
  line-height: var(--hx-line-height-normal, 1.5);
7891
7895
  padding: 0;
7892
7896
  margin-bottom: var(--hx-space-1, 0.25rem);
@@ -7920,7 +7924,7 @@ export const helixGridItemStyles = css`
7920
7924
 
7921
7925
  .fieldset__help-text {
7922
7926
  font-size: var(--hx-font-size-xs, 0.75rem);
7923
- color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #64748b));
7927
+ color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #64748b));
7924
7928
  line-height: var(--hx-line-height-normal, 1.5);
7925
7929
  }
7926
7930
 
@@ -8104,15 +8108,18 @@ export const helixGridItemStyles = css`
8104
8108
  display: block;
8105
8109
 
8106
8110
  /* 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));
8111
+ --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
8112
+ --_color: var(--hx-select-color, var(--hx-color-text-strong, #1e293b));
8113
+ --_placeholder-color: var(
8114
+ --hx-select-placeholder-color,
8115
+ var(--hx-color-text-placeholder, #64748b)
8116
+ );
8110
8117
 
8111
8118
  /* Label */
8112
- --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
8119
+ --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #1e293b));
8113
8120
 
8114
8121
  /* Border */
8115
- --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
8122
+ --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #94a3b8));
8116
8123
  --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
8117
8124
 
8118
8125
  /* Focus ring */
@@ -8125,11 +8132,11 @@ export const helixGridItemStyles = css`
8125
8132
  --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
8126
8133
 
8127
8134
  /* Chevron */
8128
- --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
8135
+ --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #64748b));
8129
8136
  --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
8130
8137
 
8131
8138
  /* Listbox */
8132
- --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
8139
+ --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
8133
8140
  --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
8134
8141
  --_option-selected-bg: var(
8135
8142
  --hx-select-option-selected-bg,
@@ -8377,7 +8384,7 @@ export const helixGridItemStyles = css`
8377
8384
  }
8378
8385
 
8379
8386
  .field__help-text {
8380
- color: var(--hx-color-neutral-500, #64748b);
8387
+ color: var(--hx-color-text-muted, #64748b);
8381
8388
  }
8382
8389
 
8383
8390
  .field__error {
@@ -8482,8 +8489,8 @@ export const helixGridItemStyles = css`
8482
8489
  Without this, axe-core cannot resolve the background for slotted nodes
8483
8490
  and evaluates their text against the page white background, producing
8484
8491
  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));
8492
+ background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
8493
+ color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
8487
8494
  }
8488
8495
 
8489
8496
  * {
@@ -8497,12 +8504,12 @@ export const helixGridItemStyles = css`
8497
8504
  flex-direction: column;
8498
8505
  height: 100%;
8499
8506
  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));
8507
+ background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
8508
+ color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
8502
8509
  transition: width var(--hx-transition-normal, 300ms) ease;
8503
8510
  overflow: hidden;
8504
8511
  border-inline-end: var(--hx-border-width-thin, 1px) solid
8505
- var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
8512
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8506
8513
  }
8507
8514
 
8508
8515
  /* ─── Collapsed State ─── */
@@ -8520,7 +8527,7 @@ export const helixGridItemStyles = css`
8520
8527
  flex-shrink: 0;
8521
8528
  min-height: var(--hx-space-14, 3.5rem);
8522
8529
  border-bottom: var(--hx-border-width-thin, 1px) solid
8523
- var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
8530
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8524
8531
  overflow: hidden;
8525
8532
  }
8526
8533
 
@@ -8547,7 +8554,7 @@ export const helixGridItemStyles = css`
8547
8554
  flex-shrink: 0;
8548
8555
  min-height: var(--hx-space-14, 3.5rem);
8549
8556
  border-top: var(--hx-border-width-thin, 1px) solid
8550
- var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
8557
+ var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
8551
8558
  overflow: hidden;
8552
8559
  }
8553
8560
 
@@ -8570,7 +8577,7 @@ export const helixGridItemStyles = css`
8570
8577
  border: none;
8571
8578
  border-radius: var(--hx-border-radius-sm, 0.25rem);
8572
8579
  background: transparent;
8573
- color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
8580
+ color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #94a3b8));
8574
8581
  cursor: pointer;
8575
8582
  transition:
8576
8583
  background-color var(--hx-transition-fast, 150ms) ease,
@@ -8582,7 +8589,7 @@ export const helixGridItemStyles = css`
8582
8589
  --hx-overlay-white-10,
8583
8590
  rgba(255, 255, 255, 0.1)
8584
8591
  ); /* fallback for browsers without color-mix() */
8585
- color: var(--hx-color-neutral-100, #f1f5f9);
8592
+ color: var(--hx-color-text-inverse, #f1f5f9);
8586
8593
  }
8587
8594
 
8588
8595
  @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -8777,14 +8784,14 @@ export const helixGridItemStyles = css`
8777
8784
  .slider__label {
8778
8785
  font-size: var(--hx-font-size-sm, 0.875rem);
8779
8786
  font-weight: var(--hx-font-weight-medium, 500);
8780
- color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
8787
+ color: var(--hx-slider-label-color, var(--hx-color-text-strong, #334155));
8781
8788
  line-height: var(--hx-line-height-normal, 1.5);
8782
8789
  }
8783
8790
 
8784
8791
  .slider__value-display {
8785
8792
  font-size: var(--hx-font-size-sm, 0.875rem);
8786
8793
  font-weight: var(--hx-font-weight-medium, 500);
8787
- color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
8794
+ color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #475569));
8788
8795
  line-height: var(--hx-line-height-normal, 1.5);
8789
8796
  font-variant-numeric: tabular-nums;
8790
8797
  min-width: var(--hx-size-8, 2rem);
@@ -8802,7 +8809,7 @@ export const helixGridItemStyles = css`
8802
8809
  position: relative;
8803
8810
  width: 100%;
8804
8811
  border-radius: var(--hx-border-radius-full, 9999px);
8805
- background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
8812
+ background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #e2e8f0));
8806
8813
  overflow: visible;
8807
8814
  }
8808
8815
 
@@ -8924,7 +8931,7 @@ export const helixGridItemStyles = css`
8924
8931
  left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
8925
8932
  transform: translate(-50%, -50%);
8926
8933
  border-radius: var(--hx-border-radius-full, 9999px);
8927
- background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
8934
+ background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
8928
8935
  border: var(--hx-slider-thumb-border-width, 2px) solid
8929
8936
  var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
8930
8937
  box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
@@ -9002,7 +9009,7 @@ export const helixGridItemStyles = css`
9002
9009
  top: 0;
9003
9010
  width: var(--hx-border-width-thin, 1px);
9004
9011
  height: 100%;
9005
- background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
9012
+ background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #94a3b8));
9006
9013
  transform: translateX(-50%);
9007
9014
  }
9008
9015
 
@@ -9012,7 +9019,7 @@ export const helixGridItemStyles = css`
9012
9019
  display: flex;
9013
9020
  justify-content: space-between;
9014
9021
  font-size: var(--hx-font-size-xs, 0.75rem);
9015
- color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
9022
+ color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #64748b));
9016
9023
  line-height: var(--hx-line-height-normal, 1.5);
9017
9024
  margin-top: var(--hx-space-0-5, 0.125rem);
9018
9025
  }
@@ -9021,18 +9028,18 @@ export const helixGridItemStyles = css`
9021
9028
 
9022
9029
  .slider__help-text {
9023
9030
  font-size: var(--hx-font-size-xs, 0.75rem);
9024
- color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #64748b));
9031
+ color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #64748b));
9025
9032
  line-height: var(--hx-line-height-normal, 1.5);
9026
9033
  }
9027
9034
 
9028
9035
  /* ─── Disabled state ─── */
9029
9036
 
9030
9037
  .slider--disabled .slider__fill {
9031
- background-color: var(--hx-color-neutral-400, #94a3b8);
9038
+ background-color: var(--hx-color-border-strong, #94a3b8);
9032
9039
  }
9033
9040
 
9034
9041
  .slider--disabled .slider__thumb-visual {
9035
- border-color: var(--hx-color-neutral-400, #94a3b8);
9042
+ border-color: var(--hx-color-border-strong, #94a3b8);
9036
9043
  }
9037
9044
  /* ── hx-spinner ── */
9038
9045
  :host {
@@ -9193,7 +9200,7 @@ export const helixGridItemStyles = css`
9193
9200
  border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
9194
9201
  var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
9195
9202
  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));
9203
+ color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
9197
9204
  font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
9198
9205
  font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
9199
9206
  line-height: var(--hx-line-height-tight, 1.25);
@@ -9246,7 +9253,7 @@ export const helixGridItemStyles = css`
9246
9253
  border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
9247
9254
  var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
9248
9255
  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));
9256
+ color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
9250
9257
  cursor: pointer;
9251
9258
  transition:
9252
9259
  background-color var(--hx-transition-fast, 150ms ease),
@@ -9334,7 +9341,7 @@ export const helixGridItemStyles = css`
9334
9341
  .split-button--primary .split-button__primary,
9335
9342
  .split-button--primary .split-button__trigger {
9336
9343
  --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
9337
- --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
9344
+ --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
9338
9345
  --hx-split-button-border-color: transparent;
9339
9346
  --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);
9340
9347
  }
@@ -9359,15 +9366,15 @@ export const helixGridItemStyles = css`
9359
9366
 
9360
9367
  .split-button--tertiary .split-button__primary,
9361
9368
  .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);
9369
+ --hx-split-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
9370
+ --hx-split-button-color: var(--hx-color-text-primary, #0f172a);
9364
9371
  --hx-split-button-border-color: transparent;
9365
- --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
9372
+ --hx-split-button-divider-color: var(--hx-color-border-default, #e2e8f0);
9366
9373
  }
9367
9374
 
9368
9375
  .split-button--tertiary .split-button__primary:hover,
9369
9376
  .split-button--tertiary .split-button__trigger:hover {
9370
- --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);
9377
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9371
9378
  filter: none;
9372
9379
  }
9373
9380
 
@@ -9376,7 +9383,7 @@ export const helixGridItemStyles = css`
9376
9383
  .split-button--danger .split-button__primary,
9377
9384
  .split-button--danger .split-button__trigger {
9378
9385
  --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
9379
- --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
9386
+ --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);
9380
9387
  --hx-split-button-border-color: transparent;
9381
9388
  --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
9382
9389
  }
@@ -9399,7 +9406,7 @@ export const helixGridItemStyles = css`
9399
9406
 
9400
9407
  .split-button--ghost .split-button__primary:hover,
9401
9408
  .split-button--ghost .split-button__trigger:hover {
9402
- --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
9409
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9403
9410
  filter: none;
9404
9411
  }
9405
9412
 
@@ -9408,14 +9415,14 @@ export const helixGridItemStyles = css`
9408
9415
  .split-button--outline .split-button__primary,
9409
9416
  .split-button--outline .split-button__trigger {
9410
9417
  --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);
9418
+ --hx-split-button-color: var(--hx-color-text-primary, #0f172a);
9419
+ --hx-split-button-border-color: var(--hx-color-border-strong, #94a3b8);
9420
+ --hx-split-button-divider-color: var(--hx-color-border-default, #e2e8f0);
9414
9421
  }
9415
9422
 
9416
9423
  .split-button--outline .split-button__primary:hover,
9417
9424
  .split-button--outline .split-button__trigger:hover {
9418
- --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);
9425
+ --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
9419
9426
  filter: none;
9420
9427
  }
9421
9428
 
@@ -9440,9 +9447,9 @@ export const helixGridItemStyles = css`
9440
9447
  min-width: 100%;
9441
9448
  max-height: var(--hx-split-button-menu-max-height, 18rem);
9442
9449
  overflow-y: auto;
9443
- background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));
9450
+ background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));
9444
9451
  border: var(--hx-border-width-thin, 1px) solid
9445
- var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
9452
+ var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #e2e8f0));
9446
9453
  border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
9447
9454
  box-shadow: var(
9448
9455
  --hx-split-button-menu-shadow,
@@ -9510,7 +9517,7 @@ export const helixGridItemStyles = css`
9510
9517
  :host {
9511
9518
  display: flex;
9512
9519
  --_divider-size: var(--hx-split-panel-divider-size, 4px);
9513
- --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));
9520
+ --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-border-default, #e2e8f0));
9514
9521
  --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
9515
9522
  overflow: hidden;
9516
9523
  }
@@ -9638,8 +9645,8 @@ export const helixGridItemStyles = css`
9638
9645
 
9639
9646
  .collapse-btn {
9640
9647
  background: var(--_divider-hover-color);
9641
- border: 2px solid var(--hx-color-neutral-0);
9642
- color: var(--hx-color-neutral-0);
9648
+ border: 2px solid var(--hx-color-surface-default);
9649
+ color: var(--hx-color-surface-default);
9643
9650
  width: var(--hx-size-5, 1.25rem);
9644
9651
  height: var(--hx-size-5, 1.25rem);
9645
9652
  border-radius: 50%;
@@ -10307,7 +10314,7 @@ export const helixStructuredListRowStyles = css`
10307
10314
  border: none;
10308
10315
  padding: 0;
10309
10316
  border-radius: var(--hx-border-radius-full, 9999px);
10310
- background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
10317
+ background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #cbd5e1));
10311
10318
  cursor: pointer;
10312
10319
  transition: background-color var(--hx-transition-fast, 150ms ease);
10313
10320
  outline: none;
@@ -10333,7 +10340,7 @@ export const helixStructuredListRowStyles = css`
10333
10340
  .switch__thumb {
10334
10341
  position: absolute;
10335
10342
  border-radius: var(--hx-border-radius-full, 9999px);
10336
- background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
10343
+ background-color: var(--hx-switch-thumb-bg, var(--hx-color-surface-default, #ffffff));
10337
10344
  box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
10338
10345
  transition: transform var(--hx-transition-fast, 150ms ease);
10339
10346
  }
@@ -10403,7 +10410,7 @@ export const helixStructuredListRowStyles = css`
10403
10410
  .switch__label {
10404
10411
  font-size: var(--hx-font-size-sm, 0.875rem);
10405
10412
  font-weight: var(--hx-font-weight-medium, 500);
10406
- color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
10413
+ color: var(--hx-switch-label-color, var(--hx-color-text-strong, #334155));
10407
10414
  line-height: var(--hx-line-height-normal, 1.5);
10408
10415
  cursor: pointer;
10409
10416
  user-select: none;
@@ -10419,7 +10426,7 @@ export const helixStructuredListRowStyles = css`
10419
10426
 
10420
10427
  .switch__help-text {
10421
10428
  font-size: var(--hx-font-size-xs, 0.75rem);
10422
- color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
10429
+ color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #64748b));
10423
10430
  line-height: var(--hx-line-height-normal, 1.5);
10424
10431
  }
10425
10432
 
@@ -11133,7 +11140,7 @@ export const helixTableSectionBaseStyles = css`
11133
11140
  gap: var(--hx-space-1, 0.25rem);
11134
11141
  font-size: var(--hx-font-size-sm, 0.875rem);
11135
11142
  font-weight: var(--hx-font-weight-medium, 500);
11136
- color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
11143
+ color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
11137
11144
  line-height: var(--hx-line-height-normal, 1.5);
11138
11145
  }
11139
11146
 
@@ -11148,9 +11155,9 @@ export const helixTableSectionBaseStyles = css`
11148
11155
  display: flex;
11149
11156
  align-items: center;
11150
11157
  border: var(--hx-border-width-thin, 1px) solid
11151
- var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
11158
+ var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
11152
11159
  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));
11160
+ background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
11154
11161
  transition:
11155
11162
  border-color var(--hx-transition-fast, 150ms ease),
11156
11163
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -11197,7 +11204,7 @@ export const helixTableSectionBaseStyles = css`
11197
11204
  .field__suffix {
11198
11205
  display: flex;
11199
11206
  align-items: center;
11200
- color: var(--hx-color-neutral-500, #64748b);
11207
+ color: var(--hx-color-text-muted, #64748b);
11201
11208
  flex-shrink: 0;
11202
11209
  }
11203
11210
 
@@ -11220,14 +11227,14 @@ export const helixTableSectionBaseStyles = css`
11220
11227
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11221
11228
  font-family: inherit;
11222
11229
  font-size: var(--hx-font-size-md, 1rem);
11223
- color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
11230
+ color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
11224
11231
  line-height: var(--hx-line-height-normal, 1.5);
11225
11232
  min-height: var(--hx-size-10, 2.5rem);
11226
11233
  width: 100%;
11227
11234
  }
11228
11235
 
11229
11236
  .field__input::placeholder {
11230
- color: var(--hx-color-neutral-400, #94a3b8);
11237
+ color: var(--hx-color-text-placeholder, #94a3b8);
11231
11238
  }
11232
11239
 
11233
11240
  .field__input:focus-visible {
@@ -11260,7 +11267,7 @@ export const helixTableSectionBaseStyles = css`
11260
11267
 
11261
11268
  .field__help-text {
11262
11269
  font-size: var(--hx-font-size-xs, 0.75rem);
11263
- color: var(--hx-color-neutral-500, #64748b);
11270
+ color: var(--hx-color-text-muted, #64748b);
11264
11271
  line-height: var(--hx-line-height-normal, 1.5);
11265
11272
  }
11266
11273
 
@@ -11368,7 +11375,7 @@ export const helixTableSectionBaseStyles = css`
11368
11375
  gap: var(--hx-space-1, 0.25rem);
11369
11376
  font-size: var(--hx-font-size-sm, 0.875rem);
11370
11377
  font-weight: var(--hx-font-weight-medium, 500);
11371
- color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
11378
+ color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
11372
11379
  line-height: var(--hx-line-height-normal, 1.5);
11373
11380
  }
11374
11381
 
@@ -11383,9 +11390,9 @@ export const helixTableSectionBaseStyles = css`
11383
11390
  display: flex;
11384
11391
  flex-direction: column;
11385
11392
  border: var(--hx-border-width-thin, 1px) solid
11386
- var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
11393
+ var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
11387
11394
  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));
11395
+ background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
11389
11396
  transition:
11390
11397
  border-color var(--hx-transition-fast, 150ms ease),
11391
11398
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -11435,7 +11442,7 @@ export const helixTableSectionBaseStyles = css`
11435
11442
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11436
11443
  font-family: inherit;
11437
11444
  font-size: var(--hx-font-size-md, 1rem);
11438
- color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
11445
+ color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
11439
11446
  line-height: var(--hx-line-height-normal, 1.5);
11440
11447
  min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
11441
11448
  width: 100%;
@@ -11443,7 +11450,7 @@ export const helixTableSectionBaseStyles = css`
11443
11450
  }
11444
11451
 
11445
11452
  .field__textarea::placeholder {
11446
- color: var(--hx-color-neutral-400, #94a3b8);
11453
+ color: var(--hx-color-text-placeholder, #94a3b8);
11447
11454
  }
11448
11455
 
11449
11456
  .field__textarea:focus-visible {
@@ -11481,7 +11488,7 @@ export const helixTableSectionBaseStyles = css`
11481
11488
 
11482
11489
  .field__counter {
11483
11490
  font-size: var(--hx-font-size-xs, 0.75rem);
11484
- color: var(--hx-color-neutral-500, #64748b);
11491
+ color: var(--hx-color-text-muted, #64748b);
11485
11492
  line-height: var(--hx-line-height-normal, 1.5);
11486
11493
  text-align: end;
11487
11494
  }
@@ -11504,7 +11511,7 @@ export const helixTableSectionBaseStyles = css`
11504
11511
 
11505
11512
  .field__help-text {
11506
11513
  font-size: var(--hx-font-size-xs, 0.75rem);
11507
- color: var(--hx-color-neutral-500, #64748b);
11514
+ color: var(--hx-color-text-muted, #64748b);
11508
11515
  line-height: var(--hx-line-height-normal, 1.5);
11509
11516
  }
11510
11517
 
@@ -11629,7 +11636,7 @@ export const helixTableSectionBaseStyles = css`
11629
11636
  gap: var(--hx-space-1, 0.25rem);
11630
11637
  font-size: var(--hx-font-size-sm, 0.875rem);
11631
11638
  font-weight: var(--hx-font-weight-medium, 500);
11632
- color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
11639
+ color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #1e293b));
11633
11640
  line-height: var(--hx-line-height-normal, 1.5);
11634
11641
  }
11635
11642
  .field__required-marker {
@@ -11641,9 +11648,9 @@ export const helixTableSectionBaseStyles = css`
11641
11648
  display: flex;
11642
11649
  align-items: center;
11643
11650
  border: var(--hx-border-width-thin, 1px) solid
11644
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
11651
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
11645
11652
  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));
11653
+ background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
11647
11654
  transition:
11648
11655
  border-color var(--hx-transition-fast, 150ms ease),
11649
11656
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -11680,14 +11687,14 @@ export const helixTableSectionBaseStyles = css`
11680
11687
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11681
11688
  font-family: inherit;
11682
11689
  font-size: var(--hx-font-size-md, 1rem);
11683
- color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
11690
+ color: var(--hx-time-picker-color, var(--hx-color-text-strong, #1e293b));
11684
11691
  line-height: var(--hx-line-height-normal, 1.5);
11685
11692
  min-height: var(--hx-size-10, 2.5rem);
11686
11693
  width: 100%;
11687
11694
  cursor: text;
11688
11695
  }
11689
11696
  .field__input::placeholder {
11690
- color: var(--hx-color-neutral-400);
11697
+ color: var(--hx-color-text-placeholder, #64748b);
11691
11698
  }
11692
11699
  .field__input:disabled {
11693
11700
  cursor: not-allowed;
@@ -11699,13 +11706,13 @@ export const helixTableSectionBaseStyles = css`
11699
11706
  border: none;
11700
11707
  background: transparent;
11701
11708
  padding: 0 var(--hx-space-3, 0.75rem);
11702
- color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
11709
+ color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #64748b));
11703
11710
  cursor: pointer;
11704
11711
  height: 100%;
11705
11712
  min-height: var(--hx-size-10, 2.5rem);
11706
11713
  flex-shrink: 0;
11707
11714
  border-inline-start: var(--hx-border-width-thin, 1px) solid
11708
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
11715
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
11709
11716
  }
11710
11717
  .field__toggle:focus-visible {
11711
11718
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -11719,9 +11726,9 @@ export const helixTableSectionBaseStyles = css`
11719
11726
  inset-inline-start: 0;
11720
11727
  inset-inline-end: 0;
11721
11728
  z-index: var(--hx-z-index-dropdown, 1000);
11722
- background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
11729
+ background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
11723
11730
  border: var(--hx-border-width-thin, 1px) solid
11724
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
11731
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
11725
11732
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
11726
11733
  box-shadow: var(
11727
11734
  --hx-time-picker-listbox-shadow,
@@ -11754,7 +11761,7 @@ export const helixTableSectionBaseStyles = css`
11754
11761
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
11755
11762
  font-size: var(--hx-font-size-md, 1rem);
11756
11763
  font-family: inherit;
11757
- color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
11764
+ color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #1e293b));
11758
11765
  cursor: pointer;
11759
11766
  transition: background-color var(--hx-transition-fast, 150ms ease);
11760
11767
  line-height: var(--hx-line-height-normal, 1.5);
@@ -11784,7 +11791,7 @@ export const helixTableSectionBaseStyles = css`
11784
11791
  line-height: var(--hx-line-height-normal, 1.5);
11785
11792
  }
11786
11793
  .field__help-text {
11787
- color: var(--hx-color-neutral-500);
11794
+ color: var(--hx-color-text-muted, #64748b);
11788
11795
  }
11789
11796
  .field__error {
11790
11797
  color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
@@ -12092,7 +12099,7 @@ export const helixToastStackStyles = css`
12092
12099
  border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
12093
12100
  border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
12094
12101
  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));
12102
+ color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
12096
12103
  font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
12097
12104
  font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
12098
12105
  line-height: var(--hx-line-height-tight, 1.25);
@@ -12152,7 +12159,7 @@ export const helixToastStackStyles = css`
12152
12159
 
12153
12160
  .button--primary {
12154
12161
  --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
12155
- --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
12162
+ --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
12156
12163
  --hx-toggle-button-border-color: transparent;
12157
12164
  }
12158
12165
 
@@ -12167,13 +12174,13 @@ export const helixToastStackStyles = css`
12167
12174
  }
12168
12175
 
12169
12176
  .button--tertiary {
12170
- --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
12171
- --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
12177
+ --hx-toggle-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
12178
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
12172
12179
  --hx-toggle-button-border-color: transparent;
12173
12180
  }
12174
12181
 
12175
12182
  .button--tertiary:hover {
12176
- --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
12183
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #e2e8f0);
12177
12184
  }
12178
12185
 
12179
12186
  .button--ghost {
@@ -12183,17 +12190,17 @@ export const helixToastStackStyles = css`
12183
12190
  }
12184
12191
 
12185
12192
  .button--ghost:hover {
12186
- --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
12193
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f1f5f9);
12187
12194
  }
12188
12195
 
12189
12196
  .button--outline {
12190
12197
  --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);
12198
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
12199
+ --hx-toggle-button-border-color: var(--hx-color-border-strong, #cbd5e1);
12193
12200
  }
12194
12201
 
12195
12202
  .button--outline:hover {
12196
- --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
12203
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f8fafc);
12197
12204
  }
12198
12205
 
12199
12206
  /* ─── Pressed State ─── */
@@ -12206,7 +12213,7 @@ export const helixToastStackStyles = css`
12206
12213
  --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
12207
12214
  --hx-toggle-button-color: var(
12208
12215
  --hx-toggle-button-pressed-color,
12209
- var(--hx-color-neutral-0, #ffffff)
12216
+ var(--hx-color-text-on-primary, #ffffff)
12210
12217
  );
12211
12218
  --hx-toggle-button-border-color: transparent;
12212
12219
  }
@@ -12219,7 +12226,7 @@ export const helixToastStackStyles = css`
12219
12226
  --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
12220
12227
  --hx-toggle-button-color: var(
12221
12228
  --hx-toggle-button-pressed-color,
12222
- var(--hx-color-neutral-0, #ffffff)
12229
+ var(--hx-color-text-on-primary, #ffffff)
12223
12230
  );
12224
12231
  --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
12225
12232
  }
@@ -12247,12 +12254,15 @@ export const helixToastStackStyles = css`
12247
12254
 
12248
12255
  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
12249
12256
  .button--outline.button--pressed {
12250
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
12257
+ --hx-toggle-button-bg: var(
12258
+ --hx-toggle-button-pressed-bg,
12259
+ var(--hx-color-surface-sunken, #f1f5f9)
12260
+ );
12251
12261
  --hx-toggle-button-color: var(
12252
12262
  --hx-toggle-button-pressed-color,
12253
- var(--hx-color-neutral-900, #0f172a)
12263
+ var(--hx-color-text-primary, #0f172a)
12254
12264
  );
12255
- --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
12265
+ --hx-toggle-button-border-color: var(--hx-color-text-muted, #64748b);
12256
12266
  box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
12257
12267
  }
12258
12268
 
@@ -12330,8 +12340,8 @@ export const helixToastStackStyles = css`
12330
12340
  z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
12331
12341
  max-width: var(--hx-tooltip-max-width, 280px);
12332
12342
  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));
12343
+ background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
12344
+ color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #f8fafc));
12335
12345
  font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
12336
12346
  font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
12337
12347
  line-height: var(--hx-line-height-normal, 1.5);
@@ -12357,7 +12367,7 @@ export const helixToastStackStyles = css`
12357
12367
  position: absolute;
12358
12368
  width: var(--hx-tooltip-arrow-size, 8px);
12359
12369
  height: var(--hx-tooltip-arrow-size, 8px);
12360
- background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
12370
+ background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
12361
12371
  transform: rotate(45deg);
12362
12372
  pointer-events: none;
12363
12373
  }
@@ -12406,10 +12416,10 @@ export const helixToastStackStyles = css`
12406
12416
  /* ─── Nav container ─── */
12407
12417
 
12408
12418
  .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));
12419
+ background-color: var(--hx-top-nav-bg, var(--hx-color-surface-default, #ffffff));
12420
+ color: var(--hx-top-nav-color, var(--hx-color-text-strong, #1e293b));
12411
12421
  border-bottom: var(--hx-border-width-thin, 1px) solid
12412
- var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
12422
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12413
12423
  font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
12414
12424
  }
12415
12425
 
@@ -12443,13 +12453,13 @@ export const helixToastStackStyles = css`
12443
12453
  background: transparent;
12444
12454
  border: none;
12445
12455
  border-radius: var(--hx-border-radius-sm, 0.25rem);
12446
- color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
12456
+ color: var(--hx-top-nav-toggle-color, var(--hx-color-text-strong, #334155));
12447
12457
  cursor: pointer;
12448
12458
  line-height: 0;
12449
12459
  }
12450
12460
 
12451
12461
  .mobile-toggle:hover {
12452
- background: var(--hx-color-neutral-100, #f1f5f9);
12462
+ background: var(--hx-color-surface-sunken, #f1f5f9);
12453
12463
  }
12454
12464
 
12455
12465
  .mobile-toggle:focus-visible {
@@ -12471,7 +12481,7 @@ export const helixToastStackStyles = css`
12471
12481
  width: 100%;
12472
12482
  padding-block: var(--hx-space-3, 0.75rem);
12473
12483
  border-top: var(--hx-border-width-thin, 1px) solid
12474
- var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
12484
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12475
12485
  }
12476
12486
 
12477
12487
  .nav__collapsible--open {
@@ -12493,7 +12503,7 @@ export const helixToastStackStyles = css`
12493
12503
  margin-top: var(--hx-space-3, 0.75rem);
12494
12504
  padding-top: var(--hx-space-3, 0.75rem);
12495
12505
  border-top: var(--hx-border-width-thin, 1px) solid
12496
- var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
12506
+ var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
12497
12507
  }
12498
12508
 
12499
12509
  /* ─── Desktop breakpoint ─── */