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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (522) hide show
  1. package/custom-elements.json +45 -45
  2. package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
  3. package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
  4. package/dist/components/hx-accordion/index.js +1 -1
  5. package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
  6. package/dist/components/hx-action-bar/index.js +1 -1
  7. package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
  8. package/dist/components/hx-alert/hx-alert.styles.d.ts +12 -0
  9. package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
  10. package/dist/components/hx-alert/index.js +1 -1
  11. package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
  12. package/dist/components/hx-avatar/index.js +1 -1
  13. package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
  14. package/dist/components/hx-badge/index.js +1 -1
  15. package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
  16. package/dist/components/hx-banner/hx-banner.styles.d.ts +12 -0
  17. package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
  18. package/dist/components/hx-banner/index.js +1 -1
  19. package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
  20. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
  21. package/dist/components/hx-breadcrumb/index.js +1 -1
  22. package/dist/components/hx-button/hx-button.d.ts.map +1 -1
  23. package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
  24. package/dist/components/hx-button/index.js +1 -1
  25. package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
  26. package/dist/components/hx-button-group/hx-button-group.styles.d.ts.map +1 -1
  27. package/dist/components/hx-button-group/index.js +1 -1
  28. package/dist/components/hx-card/hx-card.d.ts.map +1 -1
  29. package/dist/components/hx-card/hx-card.styles.d.ts +9 -0
  30. package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
  31. package/dist/components/hx-card/index.js +1 -1
  32. package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
  33. package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
  34. package/dist/components/hx-carousel/index.js +1 -1
  35. package/dist/components/hx-checkbox/hx-checkbox.d.ts +7 -7
  36. package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
  37. package/dist/components/hx-checkbox/index.js +1 -1
  38. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +2 -2
  39. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
  40. package/dist/components/hx-checkbox-group/index.js +1 -1
  41. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
  42. package/dist/components/hx-clinical-status/index.js +1 -1
  43. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
  44. package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
  45. package/dist/components/hx-code-snippet/index.js +1 -1
  46. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  47. package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
  48. package/dist/components/hx-color-picker/index.js +1 -1
  49. package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
  50. package/dist/components/hx-combobox/index.js +1 -1
  51. package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
  52. package/dist/components/hx-copy-button/hx-copy-button.styles.d.ts.map +1 -1
  53. package/dist/components/hx-copy-button/index.js +1 -1
  54. package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
  55. package/dist/components/hx-counter/index.js +1 -1
  56. package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
  57. package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
  58. package/dist/components/hx-data-table/index.js +1 -1
  59. package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
  60. package/dist/components/hx-date-picker/index.js +1 -1
  61. package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
  62. package/dist/components/hx-dialog/hx-dialog.styles.d.ts +10 -0
  63. package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
  64. package/dist/components/hx-dialog/index.js +1 -1
  65. package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
  66. package/dist/components/hx-divider/index.js +1 -1
  67. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  68. package/dist/components/hx-drawer/hx-drawer.styles.d.ts +10 -0
  69. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  70. package/dist/components/hx-drawer/index.js +1 -1
  71. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  72. package/dist/components/hx-dropdown/index.js +1 -1
  73. package/dist/components/hx-field/index.js +1 -1
  74. package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
  75. package/dist/components/hx-field-label/index.js +1 -1
  76. package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
  77. package/dist/components/hx-file-upload/index.js +1 -1
  78. package/dist/components/hx-form/index.js +1 -1
  79. package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
  80. package/dist/components/hx-help-text/index.js +1 -1
  81. package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
  82. package/dist/components/hx-icon/index.js +1 -1
  83. package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
  84. package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
  85. package/dist/components/hx-icon-button/index.js +1 -1
  86. package/dist/components/hx-image/hx-image.d.ts.map +1 -1
  87. package/dist/components/hx-image/index.js +1 -1
  88. package/dist/components/hx-link/hx-link.d.ts.map +1 -1
  89. package/dist/components/hx-link/index.js +1 -1
  90. package/dist/components/hx-list/hx-list-item.d.ts.map +1 -1
  91. package/dist/components/hx-list/hx-list.d.ts.map +1 -1
  92. package/dist/components/hx-list/index.js +1 -1
  93. package/dist/components/hx-menu/hx-menu-divider.d.ts.map +1 -1
  94. package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
  95. package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
  96. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  97. package/dist/components/hx-menu/index.js +1 -1
  98. package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
  99. package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
  100. package/dist/components/hx-meter/index.js +1 -1
  101. package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
  102. package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
  103. package/dist/components/hx-nav/index.js +1 -1
  104. package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
  105. package/dist/components/hx-number-input/index.js +1 -1
  106. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
  107. package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
  108. package/dist/components/hx-overflow-menu/index.js +1 -1
  109. package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
  110. package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
  111. package/dist/components/hx-pagination/index.js +1 -1
  112. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
  113. package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
  114. package/dist/components/hx-patient-banner/index.js +1 -1
  115. package/dist/components/hx-phi-field/hx-phi-field.d.ts +5 -5
  116. package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
  117. package/dist/components/hx-phi-field/index.js +1 -1
  118. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  119. package/dist/components/hx-popover/hx-popover.styles.d.ts +9 -0
  120. package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
  121. package/dist/components/hx-popover/index.js +1 -1
  122. package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
  123. package/dist/components/hx-popup/hx-popup.styles.d.ts +9 -0
  124. package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
  125. package/dist/components/hx-popup/index.js +1 -1
  126. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
  127. package/dist/components/hx-progress-bar/index.js +1 -1
  128. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
  129. package/dist/components/hx-progress-ring/index.js +1 -1
  130. package/dist/components/hx-prose/index.js +1 -1
  131. package/dist/components/hx-radio-group/hx-radio-group.d.ts +3 -3
  132. package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
  133. package/dist/components/hx-radio-group/hx-radio.d.ts +5 -5
  134. package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
  135. package/dist/components/hx-radio-group/index.js +1 -1
  136. package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
  137. package/dist/components/hx-rating/index.js +1 -1
  138. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  139. package/dist/components/hx-select/index.js +1 -1
  140. package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
  141. package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
  142. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  143. package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
  144. package/dist/components/hx-side-nav/index.js +1 -1
  145. package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
  146. package/dist/components/hx-skeleton/index.js +1 -1
  147. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  148. package/dist/components/hx-slider/hx-slider.styles.d.ts.map +1 -1
  149. package/dist/components/hx-slider/index.js +1 -1
  150. package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
  151. package/dist/components/hx-spinner/index.js +1 -1
  152. package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
  153. package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
  154. package/dist/components/hx-split-button/index.js +1 -1
  155. package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
  156. package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
  157. package/dist/components/hx-split-panel/index.js +1 -1
  158. package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
  159. package/dist/components/hx-stat/index.js +1 -1
  160. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
  161. package/dist/components/hx-status-indicator/index.js +1 -1
  162. package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
  163. package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
  164. package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
  165. package/dist/components/hx-steps/index.js +1 -1
  166. package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
  167. package/dist/components/hx-structured-list/index.js +1 -1
  168. package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
  169. package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
  170. package/dist/components/hx-switch/index.js +1 -1
  171. package/dist/components/hx-table/hx-table.d.ts +6 -6
  172. package/dist/components/hx-table/hx-table.d.ts.map +1 -1
  173. package/dist/components/hx-table/hx-td.d.ts +1 -1
  174. package/dist/components/hx-table/index.js +1 -1
  175. package/dist/components/hx-tabs/hx-tab-panel.d.ts +2 -2
  176. package/dist/components/hx-tabs/hx-tab-panel.d.ts.map +1 -1
  177. package/dist/components/hx-tabs/hx-tab.d.ts +6 -6
  178. package/dist/components/hx-tabs/hx-tab.d.ts.map +1 -1
  179. package/dist/components/hx-tabs/hx-tabs.d.ts +8 -8
  180. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  181. package/dist/components/hx-tabs/index.js +1 -1
  182. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  183. package/dist/components/hx-tag/index.js +1 -1
  184. package/dist/components/hx-text/hx-text.d.ts.map +1 -1
  185. package/dist/components/hx-text/hx-text.styles.d.ts.map +1 -1
  186. package/dist/components/hx-text/index.js +1 -1
  187. package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
  188. package/dist/components/hx-text-input/hx-text-input.styles.d.ts +12 -0
  189. package/dist/components/hx-text-input/hx-text-input.styles.d.ts.map +1 -1
  190. package/dist/components/hx-text-input/index.js +1 -1
  191. package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
  192. package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
  193. package/dist/components/hx-textarea/index.js +1 -1
  194. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  195. package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
  196. package/dist/components/hx-time-picker/index.js +1 -1
  197. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  198. package/dist/components/hx-toast/hx-toast.styles.d.ts +10 -0
  199. package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
  200. package/dist/components/hx-toast/index.js +1 -1
  201. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
  202. package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
  203. package/dist/components/hx-toggle-button/index.js +1 -1
  204. package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
  205. package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts +8 -0
  206. package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts.map +1 -1
  207. package/dist/components/hx-tooltip/index.js +1 -1
  208. package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
  209. package/dist/components/hx-top-nav/hx-top-nav.styles.d.ts.map +1 -1
  210. package/dist/components/hx-top-nav/index.js +1 -1
  211. package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
  212. package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
  213. package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
  214. package/dist/components/hx-tree-view/index.js +1 -1
  215. package/dist/css/helix-all.css +1107 -775
  216. package/dist/css/helix-core.css +213 -152
  217. package/dist/css/helix-data.css +51 -42
  218. package/dist/css/helix-feedback.css +121 -94
  219. package/dist/css/helix-forms.css +465 -301
  220. package/dist/css/helix-layout.css +7 -4
  221. package/dist/css/helix-media.css +13 -9
  222. package/dist/css/helix-navigation.css +80 -53
  223. package/dist/css/helix-overlay.css +57 -45
  224. package/dist/css/helix-tokens.css +103 -103
  225. package/dist/css/helix-utility.css +51 -34
  226. package/dist/css/hx-action-bar.css +4 -4
  227. package/dist/css/hx-alert.css +27 -23
  228. package/dist/css/hx-avatar.css +3 -3
  229. package/dist/css/hx-badge.css +22 -22
  230. package/dist/css/hx-banner.css +31 -24
  231. package/dist/css/hx-button-group.css +31 -14
  232. package/dist/css/hx-button.css +38 -21
  233. package/dist/css/hx-card.css +24 -10
  234. package/dist/css/hx-carousel.css +13 -9
  235. package/dist/css/hx-checkbox-group.css +3 -3
  236. package/dist/css/hx-checkbox.css +17 -17
  237. package/dist/css/hx-clinical-status.css +28 -28
  238. package/dist/css/hx-code-snippet.css +18 -15
  239. package/dist/css/hx-color-picker.css +30 -13
  240. package/dist/css/hx-combobox.css +26 -26
  241. package/dist/css/hx-copy-button.css +6 -3
  242. package/dist/css/hx-counter.css +1 -1
  243. package/dist/css/hx-data-table.css +21 -15
  244. package/dist/css/hx-date-picker.css +31 -31
  245. package/dist/css/hx-dialog.css +31 -24
  246. package/dist/css/hx-divider.css +2 -2
  247. package/dist/css/hx-drawer.css +13 -13
  248. package/dist/css/hx-dropdown.css +1 -1
  249. package/dist/css/hx-field-label.css +3 -3
  250. package/dist/css/hx-field.css +6 -6
  251. package/dist/css/hx-file-upload.css +16 -16
  252. package/dist/css/hx-help-text.css +5 -5
  253. package/dist/css/hx-icon-button.css +49 -38
  254. package/dist/css/hx-image.css +3 -3
  255. package/dist/css/hx-link.css +9 -9
  256. package/dist/css/hx-list.css +1 -1
  257. package/dist/css/hx-menu.css +1 -1
  258. package/dist/css/hx-meter.css +11 -10
  259. package/dist/css/hx-nav.css +17 -11
  260. package/dist/css/hx-number-input.css +6 -6
  261. package/dist/css/hx-overflow-menu.css +17 -8
  262. package/dist/css/hx-pagination.css +18 -12
  263. package/dist/css/hx-patient-banner.css +17 -9
  264. package/dist/css/hx-phi-field.css +4 -4
  265. package/dist/css/hx-popover.css +8 -4
  266. package/dist/css/hx-progress-bar.css +7 -7
  267. package/dist/css/hx-progress-ring.css +6 -6
  268. package/dist/css/hx-radio-group.css +5 -5
  269. package/dist/css/hx-rating.css +5 -5
  270. package/dist/css/hx-select.css +12 -12
  271. package/dist/css/hx-side-nav.css +13 -10
  272. package/dist/css/hx-skeleton.css +1 -1
  273. package/dist/css/hx-slider.css +14 -11
  274. package/dist/css/hx-spinner.css +4 -4
  275. package/dist/css/hx-split-button.css +40 -26
  276. package/dist/css/hx-split-panel.css +7 -4
  277. package/dist/css/hx-stat.css +8 -8
  278. package/dist/css/hx-status-indicator.css +7 -7
  279. package/dist/css/hx-structured-list.css +5 -5
  280. package/dist/css/hx-switch.css +15 -7
  281. package/dist/css/hx-table.css +6 -6
  282. package/dist/css/hx-tabs.css +3 -3
  283. package/dist/css/hx-tag.css +18 -18
  284. package/dist/css/hx-text-input.css +139 -61
  285. package/dist/css/hx-text.css +9 -7
  286. package/dist/css/hx-textarea.css +66 -27
  287. package/dist/css/hx-time-picker.css +25 -19
  288. package/dist/css/hx-toast.css +24 -9
  289. package/dist/css/hx-toggle-button.css +41 -28
  290. package/dist/css/hx-tooltip.css +4 -3
  291. package/dist/css/hx-top-nav.css +10 -7
  292. package/dist/css/hx-tree-view.css +1 -1
  293. package/dist/css/index.css +1 -1
  294. package/dist/css/manifest.json +106 -22
  295. package/dist/index.js +74 -74
  296. package/dist/shared/forced-colors-CTEDFRGa.js +117 -0
  297. package/dist/shared/forced-colors-CTEDFRGa.js.map +1 -0
  298. package/dist/shared/{hx-accordion-Wt52OOZD.js → hx-accordion-cnKg4_la.js} +31 -30
  299. package/dist/shared/hx-accordion-cnKg4_la.js.map +1 -0
  300. package/dist/shared/{hx-action-bar-6UzmViHI.js → hx-action-bar-CitgcpGv.js} +37 -36
  301. package/dist/shared/hx-action-bar-CitgcpGv.js.map +1 -0
  302. package/dist/shared/{hx-alert-D7n94HwI.js → hx-alert-BZH8iHQf.js} +36 -31
  303. package/dist/shared/hx-alert-BZH8iHQf.js.map +1 -0
  304. package/dist/shared/{hx-avatar-iLYzu8MJ.js → hx-avatar-C9hOmlAb.js} +19 -18
  305. package/dist/shared/hx-avatar-C9hOmlAb.js.map +1 -0
  306. package/dist/shared/{hx-badge-CVCmMPyW.js → hx-badge-CQXgOXJM.js} +65 -64
  307. package/dist/shared/hx-badge-CQXgOXJM.js.map +1 -0
  308. package/dist/shared/{hx-banner-C_He7Tr4.js → hx-banner-DT7Zn9Bo.js} +43 -35
  309. package/dist/shared/hx-banner-DT7Zn9Bo.js.map +1 -0
  310. package/dist/shared/{hx-breadcrumb-item-BgG5RcmA.js → hx-breadcrumb-item-COeYcB2x.js} +24 -23
  311. package/dist/shared/hx-breadcrumb-item-COeYcB2x.js.map +1 -0
  312. package/dist/shared/{hx-button-group-BJOGWoMa.js → hx-button-group-BI-QBqmO.js} +45 -27
  313. package/dist/shared/hx-button-group-BI-QBqmO.js.map +1 -0
  314. package/dist/shared/{hx-button-CQZswjtQ.js → hx-button-modUSOpY.js} +52 -34
  315. package/dist/shared/hx-button-modUSOpY.js.map +1 -0
  316. package/dist/shared/{hx-card-Dy_FuLfS.js → hx-card-CU1QnjNb.js} +42 -27
  317. package/dist/shared/hx-card-CU1QnjNb.js.map +1 -0
  318. package/dist/shared/{hx-carousel-item-D_dCv61-.js → hx-carousel-item-BaE4hpLl.js} +38 -33
  319. package/dist/shared/hx-carousel-item-BaE4hpLl.js.map +1 -0
  320. package/dist/shared/{hx-checkbox-ZKjOF7_3.js → hx-checkbox-C46TyXhM.js} +29 -28
  321. package/dist/shared/hx-checkbox-C46TyXhM.js.map +1 -0
  322. package/dist/shared/{hx-checkbox-group-XjOBHLiP.js → hx-checkbox-group-C9n315Ju.js} +18 -17
  323. package/dist/shared/hx-checkbox-group-C9n315Ju.js.map +1 -0
  324. package/dist/shared/{hx-clinical-status-BS5lcddT.js → hx-clinical-status-BmSjfSEN.js} +55 -54
  325. package/dist/shared/hx-clinical-status-BmSjfSEN.js.map +1 -0
  326. package/dist/shared/{hx-code-snippet-DssubcYM.js → hx-code-snippet-CJ0FbQYG.js} +34 -30
  327. package/dist/shared/hx-code-snippet-CJ0FbQYG.js.map +1 -0
  328. package/dist/shared/{hx-color-picker-DBaKTVLr.js → hx-color-picker-DiDLZyvK.js} +74 -56
  329. package/dist/shared/hx-color-picker-DiDLZyvK.js.map +1 -0
  330. package/dist/shared/{hx-combobox-DLwnvHVd.js → hx-combobox-DaA5dBC4.js} +38 -37
  331. package/dist/shared/hx-combobox-DaA5dBC4.js.map +1 -0
  332. package/dist/shared/{hx-copy-button-8deNUdwP.js → hx-copy-button-sUVuikyH.js} +23 -19
  333. package/dist/shared/hx-copy-button-sUVuikyH.js.map +1 -0
  334. package/dist/shared/{hx-counter-CKfl_g8K.js → hx-counter-0zYapFhf.js} +10 -9
  335. package/dist/shared/hx-counter-0zYapFhf.js.map +1 -0
  336. package/dist/shared/{hx-data-table-CnLxo9PH.js → hx-data-table-Cq3t86Ic.js} +101 -94
  337. package/dist/shared/hx-data-table-Cq3t86Ic.js.map +1 -0
  338. package/dist/shared/{hx-date-picker-D7H7CsVH.js → hx-date-picker-DMqRQNSB.js} +42 -41
  339. package/dist/shared/hx-date-picker-DMqRQNSB.js.map +1 -0
  340. package/dist/shared/{hx-dialog-BW-jetzN.js → hx-dialog-eIS8tcDm.js} +50 -42
  341. package/dist/shared/hx-dialog-eIS8tcDm.js.map +1 -0
  342. package/dist/shared/{hx-divider-CvyUVcp-.js → hx-divider-CYfcUjcr.js} +11 -10
  343. package/dist/shared/hx-divider-CYfcUjcr.js.map +1 -0
  344. package/dist/shared/{hx-drawer-BT52I4tk.js → hx-drawer-DDhDz7RI.js} +26 -25
  345. package/dist/shared/hx-drawer-DDhDz7RI.js.map +1 -0
  346. package/dist/shared/{hx-dropdown-BpVpL6Dz.js → hx-dropdown-LyaRc8Rf.js} +15 -14
  347. package/dist/shared/hx-dropdown-LyaRc8Rf.js.map +1 -0
  348. package/dist/shared/{hx-field-BX4zE3z5.js → hx-field-B3Qo8OLS.js} +11 -11
  349. package/dist/shared/{hx-field-BX4zE3z5.js.map → hx-field-B3Qo8OLS.js.map} +1 -1
  350. package/dist/shared/{hx-field-label-DtJzb1r3.js → hx-field-label-BVRyyKeh.js} +12 -11
  351. package/dist/shared/hx-field-label-BVRyyKeh.js.map +1 -0
  352. package/dist/shared/{hx-file-upload-BNuepoGn.js → hx-file-upload-zTDbjsRw.js} +37 -36
  353. package/dist/shared/hx-file-upload-zTDbjsRw.js.map +1 -0
  354. package/dist/shared/hx-form-CkChEATa.js +257 -0
  355. package/dist/shared/hx-form-CkChEATa.js.map +1 -0
  356. package/dist/shared/{hx-help-text-Br3igJv5.js → hx-help-text-Xb2Yr8x2.js} +29 -28
  357. package/dist/shared/hx-help-text-Xb2Yr8x2.js.map +1 -0
  358. package/dist/shared/{hx-icon-button-CqXH5Wwb.js → hx-icon-button-BmV97nqz.js} +81 -69
  359. package/dist/shared/hx-icon-button-BmV97nqz.js.map +1 -0
  360. package/dist/shared/{hx-icon-CcyDPDYY.js → hx-icon-fuVm4-bk.js} +15 -14
  361. package/dist/shared/hx-icon-fuVm4-bk.js.map +1 -0
  362. package/dist/shared/{hx-image-2gt14zZd.js → hx-image-Ben_4yM5.js} +18 -17
  363. package/dist/shared/hx-image-Ben_4yM5.js.map +1 -0
  364. package/dist/shared/{hx-link-Bem4Gn68.js → hx-link-DmiV-mPw.js} +19 -18
  365. package/dist/shared/hx-link-DmiV-mPw.js.map +1 -0
  366. package/dist/shared/{hx-list-_9qVv02L.js → hx-list-CkphGi9T.js} +22 -21
  367. package/dist/shared/hx-list-CkphGi9T.js.map +1 -0
  368. package/dist/shared/{hx-menu-divider-DsHWyPHy.js → hx-menu-divider-j__TZjH2.js} +36 -32
  369. package/dist/shared/hx-menu-divider-j__TZjH2.js.map +1 -0
  370. package/dist/shared/{hx-meter-TbROk-dw.js → hx-meter-Cm7k_Ro8.js} +42 -40
  371. package/dist/shared/hx-meter-Cm7k_Ro8.js.map +1 -0
  372. package/dist/shared/{hx-nav-BcYDmjf7.js → hx-nav-LoyEKZQC.js} +30 -23
  373. package/dist/shared/hx-nav-LoyEKZQC.js.map +1 -0
  374. package/dist/shared/{hx-nav-item-BTMMQv6c.js → hx-nav-item-D8xHLVOs.js} +74 -66
  375. package/dist/shared/hx-nav-item-D8xHLVOs.js.map +1 -0
  376. package/dist/shared/{hx-number-input-l6jeaGWW.js → hx-number-input-yUzFOSC1.js} +56 -55
  377. package/dist/shared/hx-number-input-yUzFOSC1.js.map +1 -0
  378. package/dist/shared/{hx-overflow-menu-DJ4qpgmi.js → hx-overflow-menu-BmKyAp5D.js} +34 -24
  379. package/dist/shared/hx-overflow-menu-BmKyAp5D.js.map +1 -0
  380. package/dist/shared/{hx-pagination-5FeVFIve.js → hx-pagination-Dqw5dorC.js} +40 -33
  381. package/dist/shared/hx-pagination-Dqw5dorC.js.map +1 -0
  382. package/dist/shared/{hx-patient-banner-uE6gqLpT.js → hx-patient-banner-CkS-Lmj4.js} +29 -20
  383. package/dist/shared/hx-patient-banner-CkS-Lmj4.js.map +1 -0
  384. package/dist/shared/{hx-phi-field-DxeWcRm9.js → hx-phi-field-Bf9TdtC1.js} +13 -12
  385. package/dist/shared/hx-phi-field-Bf9TdtC1.js.map +1 -0
  386. package/dist/shared/{hx-popover-C05QcD9m.js → hx-popover-B93rTAfr.js} +27 -22
  387. package/dist/shared/hx-popover-B93rTAfr.js.map +1 -0
  388. package/dist/shared/{hx-popup-DZXpsJ1R.js → hx-popup-COUXXZ9X.js} +8 -7
  389. package/dist/shared/hx-popup-COUXXZ9X.js.map +1 -0
  390. package/dist/shared/{hx-progress-bar-CJdwAeDg.js → hx-progress-bar-Bn3JEPUf.js} +25 -24
  391. package/dist/shared/hx-progress-bar-Bn3JEPUf.js.map +1 -0
  392. package/dist/shared/{hx-progress-ring-3zMwvrwD.js → hx-progress-ring-TwHyXeEp.js} +15 -14
  393. package/dist/shared/hx-progress-ring-TwHyXeEp.js.map +1 -0
  394. package/dist/shared/{hx-prose-BCtK7YL6.js → hx-prose-BThYcASV.js} +12 -12
  395. package/dist/shared/{hx-prose-BCtK7YL6.js.map → hx-prose-BThYcASV.js.map} +1 -1
  396. package/dist/shared/{hx-radio-QHrhL908.js → hx-radio-N8xgDd_5.js} +34 -33
  397. package/dist/shared/hx-radio-N8xgDd_5.js.map +1 -0
  398. package/dist/shared/{hx-rating-BO9kl9pb.js → hx-rating-i2FL1WUN.js} +14 -13
  399. package/dist/shared/hx-rating-i2FL1WUN.js.map +1 -0
  400. package/dist/shared/{hx-select-BuMvRDkY.js → hx-select-vgaBo1Ai.js} +26 -25
  401. package/dist/shared/hx-select-vgaBo1Ai.js.map +1 -0
  402. package/dist/shared/{hx-skeleton-LxkI0pxr.js → hx-skeleton-Cnieh5Uc.js} +14 -13
  403. package/dist/shared/hx-skeleton-Cnieh5Uc.js.map +1 -0
  404. package/dist/shared/{hx-slider-wcF_oyNJ.js → hx-slider-ydBamYhd.js} +58 -54
  405. package/dist/shared/hx-slider-ydBamYhd.js.map +1 -0
  406. package/dist/shared/{hx-spinner-BKjuCdZB.js → hx-spinner-DL5AYr16.js} +18 -17
  407. package/dist/shared/hx-spinner-DL5AYr16.js.map +1 -0
  408. package/dist/shared/{hx-split-button-CEkQqbF9.js → hx-split-button-BeMsmS6N.js} +58 -43
  409. package/dist/shared/hx-split-button-BeMsmS6N.js.map +1 -0
  410. package/dist/shared/{hx-split-panel-BymHlV5e.js → hx-split-panel-BVG1VWNT.js} +14 -10
  411. package/dist/shared/hx-split-panel-BVG1VWNT.js.map +1 -0
  412. package/dist/shared/{hx-stat-DTRyLF3a.js → hx-stat-WOcNV1Ry.js} +17 -16
  413. package/dist/shared/hx-stat-WOcNV1Ry.js.map +1 -0
  414. package/dist/shared/{hx-status-indicator-DIGRGM2G.js → hx-status-indicator-BlQyen43.js} +15 -14
  415. package/dist/shared/hx-status-indicator-BlQyen43.js.map +1 -0
  416. package/dist/shared/{hx-step-D15gtcLm.js → hx-step-DL3PbOzm.js} +61 -48
  417. package/dist/shared/hx-step-DL3PbOzm.js.map +1 -0
  418. package/dist/shared/{hx-structured-list-CqNbaEXg.js → hx-structured-list-m_-dMJbC.js} +18 -17
  419. package/dist/shared/hx-structured-list-m_-dMJbC.js.map +1 -0
  420. package/dist/shared/{hx-switch-CbunfMHW.js → hx-switch-Dougzsgp.js} +28 -19
  421. package/dist/shared/hx-switch-Dougzsgp.js.map +1 -0
  422. package/dist/shared/{hx-tab-panel-BIzKfW5i.js → hx-tab-panel-CbkO9VKu.js} +45 -44
  423. package/dist/shared/hx-tab-panel-CbkO9VKu.js.map +1 -0
  424. package/dist/shared/{hx-tag-CgnrNnte.js → hx-tag-CNSmdyaK.js} +63 -62
  425. package/dist/shared/hx-tag-CNSmdyaK.js.map +1 -0
  426. package/dist/shared/{hx-td-B737T0_c.js → hx-td-1zwTFLRw.js} +41 -40
  427. package/dist/shared/hx-td-1zwTFLRw.js.map +1 -0
  428. package/dist/shared/{hx-text-DMC2CPlL.js → hx-text-Bz_9fJ3J.js} +28 -25
  429. package/dist/shared/hx-text-Bz_9fJ3J.js.map +1 -0
  430. package/dist/shared/{hx-text-input-eSPVURd5.js → hx-text-input-B-caO5fI.js} +159 -80
  431. package/dist/shared/hx-text-input-B-caO5fI.js.map +1 -0
  432. package/dist/shared/{hx-textarea-C4DjRmo4.js → hx-textarea-D9O4U8cb.js} +109 -69
  433. package/dist/shared/hx-textarea-D9O4U8cb.js.map +1 -0
  434. package/dist/shared/{hx-time-picker-BtbHX7A4.js → hx-time-picker-m0z4nFB-.js} +41 -34
  435. package/dist/shared/hx-time-picker-m0z4nFB-.js.map +1 -0
  436. package/dist/shared/{hx-toggle-button-FOvw-ebx.js → hx-toggle-button-Dd8clXB4.js} +67 -53
  437. package/dist/shared/hx-toggle-button-Dd8clXB4.js.map +1 -0
  438. package/dist/shared/{hx-tooltip-BoZi2crX.js → hx-tooltip-nYOv9OLu.js} +18 -16
  439. package/dist/shared/hx-tooltip-nYOv9OLu.js.map +1 -0
  440. package/dist/shared/{hx-top-nav-Cd9zvv1B.js → hx-top-nav-CchPYaiV.js} +32 -28
  441. package/dist/shared/hx-top-nav-CchPYaiV.js.map +1 -0
  442. package/dist/shared/{hx-tree-item-A45WCiBu.js → hx-tree-item-DtMC3DTa.js} +35 -28
  443. package/dist/shared/hx-tree-item-DtMC3DTa.js.map +1 -0
  444. package/dist/shared/{toast-factory-M373dTcz.js → toast-factory-DvDRAh0l.js} +87 -71
  445. package/dist/shared/toast-factory-DvDRAh0l.js.map +1 -0
  446. package/dist/styles/forced-colors.d.ts +60 -0
  447. package/dist/styles/forced-colors.d.ts.map +1 -0
  448. package/figma-inventory.json +81 -81
  449. package/package.json +2 -2
  450. package/dist/shared/hx-accordion-Wt52OOZD.js.map +0 -1
  451. package/dist/shared/hx-action-bar-6UzmViHI.js.map +0 -1
  452. package/dist/shared/hx-alert-D7n94HwI.js.map +0 -1
  453. package/dist/shared/hx-avatar-iLYzu8MJ.js.map +0 -1
  454. package/dist/shared/hx-badge-CVCmMPyW.js.map +0 -1
  455. package/dist/shared/hx-banner-C_He7Tr4.js.map +0 -1
  456. package/dist/shared/hx-breadcrumb-item-BgG5RcmA.js.map +0 -1
  457. package/dist/shared/hx-button-CQZswjtQ.js.map +0 -1
  458. package/dist/shared/hx-button-group-BJOGWoMa.js.map +0 -1
  459. package/dist/shared/hx-card-Dy_FuLfS.js.map +0 -1
  460. package/dist/shared/hx-carousel-item-D_dCv61-.js.map +0 -1
  461. package/dist/shared/hx-checkbox-ZKjOF7_3.js.map +0 -1
  462. package/dist/shared/hx-checkbox-group-XjOBHLiP.js.map +0 -1
  463. package/dist/shared/hx-clinical-status-BS5lcddT.js.map +0 -1
  464. package/dist/shared/hx-code-snippet-DssubcYM.js.map +0 -1
  465. package/dist/shared/hx-color-picker-DBaKTVLr.js.map +0 -1
  466. package/dist/shared/hx-combobox-DLwnvHVd.js.map +0 -1
  467. package/dist/shared/hx-copy-button-8deNUdwP.js.map +0 -1
  468. package/dist/shared/hx-counter-CKfl_g8K.js.map +0 -1
  469. package/dist/shared/hx-data-table-CnLxo9PH.js.map +0 -1
  470. package/dist/shared/hx-date-picker-D7H7CsVH.js.map +0 -1
  471. package/dist/shared/hx-dialog-BW-jetzN.js.map +0 -1
  472. package/dist/shared/hx-divider-CvyUVcp-.js.map +0 -1
  473. package/dist/shared/hx-drawer-BT52I4tk.js.map +0 -1
  474. package/dist/shared/hx-dropdown-BpVpL6Dz.js.map +0 -1
  475. package/dist/shared/hx-field-label-DtJzb1r3.js.map +0 -1
  476. package/dist/shared/hx-file-upload-BNuepoGn.js.map +0 -1
  477. package/dist/shared/hx-form-ButQFt9A.js +0 -257
  478. package/dist/shared/hx-form-ButQFt9A.js.map +0 -1
  479. package/dist/shared/hx-help-text-Br3igJv5.js.map +0 -1
  480. package/dist/shared/hx-icon-CcyDPDYY.js.map +0 -1
  481. package/dist/shared/hx-icon-button-CqXH5Wwb.js.map +0 -1
  482. package/dist/shared/hx-image-2gt14zZd.js.map +0 -1
  483. package/dist/shared/hx-link-Bem4Gn68.js.map +0 -1
  484. package/dist/shared/hx-list-_9qVv02L.js.map +0 -1
  485. package/dist/shared/hx-menu-divider-DsHWyPHy.js.map +0 -1
  486. package/dist/shared/hx-meter-TbROk-dw.js.map +0 -1
  487. package/dist/shared/hx-nav-BcYDmjf7.js.map +0 -1
  488. package/dist/shared/hx-nav-item-BTMMQv6c.js.map +0 -1
  489. package/dist/shared/hx-number-input-l6jeaGWW.js.map +0 -1
  490. package/dist/shared/hx-overflow-menu-DJ4qpgmi.js.map +0 -1
  491. package/dist/shared/hx-pagination-5FeVFIve.js.map +0 -1
  492. package/dist/shared/hx-patient-banner-uE6gqLpT.js.map +0 -1
  493. package/dist/shared/hx-phi-field-DxeWcRm9.js.map +0 -1
  494. package/dist/shared/hx-popover-C05QcD9m.js.map +0 -1
  495. package/dist/shared/hx-popup-DZXpsJ1R.js.map +0 -1
  496. package/dist/shared/hx-progress-bar-CJdwAeDg.js.map +0 -1
  497. package/dist/shared/hx-progress-ring-3zMwvrwD.js.map +0 -1
  498. package/dist/shared/hx-radio-QHrhL908.js.map +0 -1
  499. package/dist/shared/hx-rating-BO9kl9pb.js.map +0 -1
  500. package/dist/shared/hx-select-BuMvRDkY.js.map +0 -1
  501. package/dist/shared/hx-skeleton-LxkI0pxr.js.map +0 -1
  502. package/dist/shared/hx-slider-wcF_oyNJ.js.map +0 -1
  503. package/dist/shared/hx-spinner-BKjuCdZB.js.map +0 -1
  504. package/dist/shared/hx-split-button-CEkQqbF9.js.map +0 -1
  505. package/dist/shared/hx-split-panel-BymHlV5e.js.map +0 -1
  506. package/dist/shared/hx-stat-DTRyLF3a.js.map +0 -1
  507. package/dist/shared/hx-status-indicator-DIGRGM2G.js.map +0 -1
  508. package/dist/shared/hx-step-D15gtcLm.js.map +0 -1
  509. package/dist/shared/hx-structured-list-CqNbaEXg.js.map +0 -1
  510. package/dist/shared/hx-switch-CbunfMHW.js.map +0 -1
  511. package/dist/shared/hx-tab-panel-BIzKfW5i.js.map +0 -1
  512. package/dist/shared/hx-tag-CgnrNnte.js.map +0 -1
  513. package/dist/shared/hx-td-B737T0_c.js.map +0 -1
  514. package/dist/shared/hx-text-DMC2CPlL.js.map +0 -1
  515. package/dist/shared/hx-text-input-eSPVURd5.js.map +0 -1
  516. package/dist/shared/hx-textarea-C4DjRmo4.js.map +0 -1
  517. package/dist/shared/hx-time-picker-BtbHX7A4.js.map +0 -1
  518. package/dist/shared/hx-toggle-button-FOvw-ebx.js.map +0 -1
  519. package/dist/shared/hx-tooltip-BoZi2crX.js.map +0 -1
  520. package/dist/shared/hx-top-nav-Cd9zvv1B.js.map +0 -1
  521. package/dist/shared/hx-tree-item-A45WCiBu.js.map +0 -1
  522. package/dist/shared/toast-factory-M373dTcz.js.map +0 -1
package/dist/css/helix-forms.css CHANGED
@@ -60,7 +60,7 @@
60
60
  width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
61
61
  height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
62
62
  border: var(--hx-border-width-medium, 2px) solid
63
- var(--hx-checkbox-border-color, var(--hx-color-border-strong, #cbd5e1));
63
+ var(--hx-checkbox-border-color, var(--hx-color-border-strong, #8e9c98));
64
64
  border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
65
65
  background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
66
66
  transition:
@@ -73,38 +73,38 @@
73
73
  /* ─── Focus Ring ─── */
74
74
 
75
75
  .checkbox__input:focus-visible ~ .checkbox__box {
76
- outline: var(--hx-focus-ring-width, 2px) solid
76
+ outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
77
77
  var(
78
78
  --hx-checkbox-focus-ring-color,
79
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
79
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
80
80
  );
81
- outline-offset: var(--hx-focus-ring-offset, 2px);
81
+ outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
82
82
  }
83
83
 
84
84
  /* ─── Checked State ─── */
85
85
 
86
86
  .checkbox--checked .checkbox__box {
87
- background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
88
- border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
87
+ background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
88
+ border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
89
89
  }
90
90
 
91
91
  /* ─── Indeterminate State ─── */
92
92
 
93
93
  .checkbox--indeterminate .checkbox__box {
94
- background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
95
- border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
94
+ background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
95
+ border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
96
96
  }
97
97
 
98
98
  /* ─── Error State ─── */
99
99
 
100
100
  .checkbox--error .checkbox__box {
101
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
101
+ border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
102
102
  }
103
103
 
104
104
  .checkbox--error.checkbox--checked .checkbox__box,
105
105
  .checkbox--error.checkbox--indeterminate .checkbox__box {
106
- background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
107
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
106
+ background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
107
+ border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
108
108
  }
109
109
 
110
110
  /* ─── Hover ─── */
@@ -113,7 +113,7 @@
113
113
  .checkbox__control:hover .checkbox__box {
114
114
  border-color: var(
115
115
  --hx-checkbox-hover-border-color,
116
- var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))
116
+ var(--hx-checkbox-border-color, var(--hx-color-primary-500, #429797))
117
117
  );
118
118
  }
119
119
 
@@ -122,7 +122,7 @@
122
122
  }
123
123
 
124
124
  .checkbox--error .checkbox__control:hover .checkbox__box {
125
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
125
+ border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
126
126
  }
127
127
 
128
128
  /* ─── Checkmark Icon ─── */
@@ -151,14 +151,14 @@
151
151
  .checkbox__label {
152
152
  font-size: var(--hx-font-size-sm, 0.875rem);
153
153
  font-weight: var(--hx-font-weight-medium, 500);
154
- color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #334155));
154
+ color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #202b39));
155
155
  line-height: var(--hx-line-height-normal, 1.5);
156
156
  user-select: none;
157
157
  -webkit-user-select: none;
158
158
  }
159
159
 
160
160
  .checkbox__required-marker {
161
- color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
161
+ color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
162
162
  font-weight: var(--hx-font-weight-bold, 700);
163
163
  }
164
164
 
@@ -166,7 +166,7 @@
166
166
 
167
167
  .checkbox__help-text {
168
168
  font-size: var(--hx-font-size-xs, 0.75rem);
169
- color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #64748b));
169
+ color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #4a5362));
170
170
  line-height: var(--hx-line-height-normal, 1.5);
171
171
  padding-inline-start: calc(
172
172
  var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -175,7 +175,7 @@
175
175
 
176
176
  .checkbox__error {
177
177
  font-size: var(--hx-font-size-xs, 0.75rem);
178
- color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
178
+ color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
179
179
  line-height: var(--hx-line-height-normal, 1.5);
180
180
  padding-inline-start: calc(
181
181
  var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -326,7 +326,7 @@
326
326
  }
327
327
 
328
328
  .fieldset__required-marker {
329
- color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
329
+ color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
330
330
  font-weight: var(--hx-font-weight-bold);
331
331
  }
332
332
 
@@ -346,7 +346,7 @@
346
346
  /* ─── Error State ─── */
347
347
 
348
348
  .fieldset--error .fieldset__legend {
349
- color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
349
+ color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
350
350
  }
351
351
 
352
352
  /* ─── Help Text & Error Messages ─── */
@@ -359,7 +359,7 @@
359
359
 
360
360
  .fieldset__error {
361
361
  font-size: var(--hx-font-size-xs);
362
- color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
362
+ color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
363
363
  line-height: var(--hx-line-height-normal);
364
364
  }
365
365
 
@@ -410,18 +410,24 @@
410
410
  align-items: center;
411
411
  gap: var(--hx-space-2, 0.5rem);
412
412
  padding: var(--hx-space-1, 0.25rem);
413
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
413
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
414
414
  border-radius: var(--hx-border-radius-md, 0.375rem);
415
415
  background: var(--hx-color-neutral-0, #ffffff);
416
416
  cursor: pointer;
417
417
  transition: border-color var(--hx-transition-fast, 150ms ease);
418
418
  }
419
419
  .trigger:hover:not([disabled]) {
420
- border-color: var(--hx-color-primary-500, #2563eb);
420
+ border-color: var(
421
+ --hx-color-picker-trigger-hover-border-color,
422
+ var(--hx-color-primary-500, #429797)
423
+ );
421
424
  }
422
425
  :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
423
426
  outline: var(--hx-focus-ring-width, 2px) solid
424
- var(--hx-focus-ring-color, var(--hx-color-primary-500));
427
+ var(
428
+ --hx-color-picker-focus-ring-color,
429
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
430
+ );
425
431
  outline-offset: var(--hx-focus-ring-offset, 2px);
426
432
  }
427
433
  .trigger-swatch {
@@ -436,7 +442,7 @@
436
442
  }
437
443
  .trigger-label {
438
444
  font-size: var(--hx-font-size-sm, 0.875rem);
439
- color: var(--hx-color-neutral-700, #334155);
445
+ color: var(--hx-color-neutral-700, #313e4b);
440
446
  font-family: var(--hx-font-family-mono, monospace);
441
447
  white-space: nowrap;
442
448
  }
@@ -446,7 +452,7 @@
446
452
  top: calc(100% + 4px);
447
453
  left: 0;
448
454
  background: var(--hx-color-neutral-0, #ffffff);
449
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
455
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
450
456
  border-radius: var(--hx-border-radius-lg, 0.5rem);
451
457
  box-shadow: 0 8px 24px
452
458
  var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));
@@ -460,7 +466,7 @@
460
466
  :host([inline]) .panel {
461
467
  position: static;
462
468
  box-shadow: none;
463
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
469
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
464
470
  border-radius: var(--hx-border-radius-lg, 0.5rem);
465
471
  }
466
472
  .gradient-grid {
@@ -573,12 +579,12 @@
573
579
  .format-btn {
574
580
  flex-shrink: 0;
575
581
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
576
- background: var(--hx-color-neutral-100, #f1f5f9);
577
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
582
+ background: var(--hx-color-neutral-100, #ebeee9);
583
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
578
584
  border-radius: var(--hx-border-radius-sm, 0.25rem);
579
585
  cursor: pointer;
580
586
  font-size: var(--hx-font-size-xs, 0.75rem);
581
- color: var(--hx-color-neutral-600, #475569);
587
+ color: var(--hx-color-neutral-600, #4a5362);
582
588
  text-transform: uppercase;
583
589
  font-weight: var(--hx-font-weight-semibold, 600);
584
590
  letter-spacing: 0.05em;
@@ -587,18 +593,29 @@
587
593
  flex: 1;
588
594
  min-width: 0;
589
595
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
590
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
596
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
591
597
  border-radius: var(--hx-border-radius-sm, 0.25rem);
592
598
  font-family: var(--hx-font-family-mono, monospace);
593
599
  font-size: var(--hx-font-size-sm, 0.875rem);
594
- color: var(--hx-color-neutral-900, #0f172a);
600
+ color: var(--hx-color-neutral-900, #0d1825);
595
601
  background: var(--hx-color-neutral-0, #ffffff);
596
602
  outline: none;
597
603
  }
598
604
  .color-input:focus-visible {
599
- border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));
605
+ border-color: var(
606
+ --hx-color-picker-focus-ring-color,
607
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
608
+ );
600
609
  box-shadow: 0 0 0 2px
601
- color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);
610
+ color-mix(
611
+ in srgb,
612
+ var(
613
+ --hx-color-picker-focus-ring-color,
614
+ var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
615
+ )
616
+ 20%,
617
+ transparent
618
+ );
602
619
  }
603
620
  .input-preview {
604
621
  width: 24px;
@@ -695,11 +712,11 @@
695
712
  gap: var(--hx-space-1, 0.25rem);
696
713
  font-size: var(--hx-font-size-sm, 0.875rem);
697
714
  font-weight: var(--hx-font-weight-medium, 500);
698
- color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #334155));
715
+ color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #202b39));
699
716
  line-height: var(--hx-line-height-normal, 1.5);
700
717
  }
701
718
  .field__required-marker {
702
- color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
719
+ color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
703
720
  font-weight: var(--hx-font-weight-bold, 700);
704
721
  }
705
722
  .field__input-wrapper {
@@ -707,7 +724,7 @@
707
724
  display: flex;
708
725
  align-items: center;
709
726
  border: var(--hx-border-width-thin, 1px) solid
710
- var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
727
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
711
728
  border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
712
729
  background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
713
730
  transition:
@@ -717,28 +734,28 @@
717
734
  .field__input-wrapper:focus-within {
718
735
  border-color: var(
719
736
  --hx-combobox-focus-ring-color,
720
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
737
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
721
738
  );
722
739
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
723
740
  color-mix(
724
741
  in srgb,
725
742
  var(
726
743
  --hx-combobox-focus-ring-color,
727
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
744
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
728
745
  )
729
746
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
730
747
  transparent
731
748
  );
732
749
  }
733
750
  .field--error .field__input-wrapper {
734
- border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
751
+ border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
735
752
  }
736
753
  .field--error .field__input-wrapper:focus-within {
737
- border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
754
+ border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
738
755
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
739
756
  color-mix(
740
757
  in srgb,
741
- var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626))
758
+ var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e))
742
759
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
743
760
  transparent
744
761
  );
@@ -748,7 +765,7 @@
748
765
  display: flex;
749
766
  align-items: center;
750
767
  padding: 0 var(--hx-space-2, 0.5rem);
751
- color: var(--hx-color-text-muted, #64748b);
768
+ color: var(--hx-color-text-muted, #4a5362);
752
769
  flex-shrink: 0;
753
770
  }
754
771
  .field__input {
@@ -761,11 +778,11 @@
761
778
  font-family: inherit;
762
779
  font-size: var(--hx-font-size-md, 1rem);
763
780
  line-height: var(--hx-line-height-normal, 1.5);
764
- color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
781
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
765
782
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
766
783
  }
767
784
  .field__input::placeholder {
768
- color: var(--hx-color-text-placeholder, #94a3b8);
785
+ color: var(--hx-color-text-placeholder, #66787b);
769
786
  }
770
787
  .field__input--sm {
771
788
  min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -784,7 +801,7 @@
784
801
  justify-content: center;
785
802
  margin-inline-end: var(--hx-space-2, 0.5rem);
786
803
  flex-shrink: 0;
787
- color: var(--hx-color-text-placeholder, #94a3b8);
804
+ color: var(--hx-color-text-placeholder, #66787b);
788
805
  }
789
806
  .field__clear-button {
790
807
  width: 1.25rem;
@@ -797,7 +814,7 @@
797
814
  transition: color var(--hx-transition-fast, 150ms ease);
798
815
  }
799
816
  .field__clear-button:hover {
800
- color: var(--hx-color-text-strong, #334155);
817
+ color: var(--hx-color-text-strong, #202b39);
801
818
  }
802
819
  .field__clear-button:focus-visible {
803
820
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -834,11 +851,11 @@
834
851
  z-index: var(--hx-z-index-dropdown, 1000);
835
852
  background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
836
853
  border: var(--hx-border-width-thin, 1px) solid
837
- var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
854
+ var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
838
855
  border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
839
856
  box-shadow: var(
840
857
  --hx-combobox-listbox-shadow,
841
- 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 12%, transparent)
858
+ 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 12%, transparent)
842
859
  );
843
860
  max-height: var(--hx-combobox-listbox-max-height, 16rem);
844
861
  overflow: hidden;
@@ -859,27 +876,27 @@
859
876
  gap: var(--hx-space-2, 0.5rem);
860
877
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
861
878
  font-size: var(--hx-font-size-md, 1rem);
862
- color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
879
+ color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
863
880
  cursor: pointer;
864
881
  user-select: none;
865
882
  -webkit-user-select: none;
866
883
  transition: background-color var(--hx-transition-fast, 150ms ease);
867
884
  }
868
885
  .field__option:hover {
869
- background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
886
+ background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
870
887
  }
871
888
  .field__option--selected {
872
- background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
889
+ background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
873
890
  font-weight: var(--hx-font-weight-medium, 500);
874
891
  }
875
892
  .field__option--focused {
876
- background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
893
+ background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
877
894
  outline: var(--hx-focus-ring-width, 2px) solid
878
895
  var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
879
896
  outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
880
897
  }
881
898
  .field__option--focused.field__option--selected {
882
- background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
899
+ background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
883
900
  }
884
901
  .field__option--disabled {
885
902
  opacity: var(--hx-opacity-disabled, 0.5);
@@ -895,7 +912,7 @@
895
912
  .field__no-options {
896
913
  padding: var(--hx-space-3, 0.75rem);
897
914
  text-align: center;
898
- color: var(--hx-color-text-placeholder, #94a3b8);
915
+ color: var(--hx-color-text-placeholder, #66787b);
899
916
  font-size: var(--hx-font-size-sm, 0.875rem);
900
917
  }
901
918
  .field__sr-only {
@@ -915,10 +932,10 @@
915
932
  line-height: var(--hx-line-height-normal, 1.5);
916
933
  }
917
934
  .field__help-text {
918
- color: var(--hx-color-text-muted, #64748b);
935
+ color: var(--hx-color-text-muted, #4a5362);
919
936
  }
920
937
  .field__error {
921
- color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
938
+ color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
922
939
  }
923
940
  @media (prefers-reduced-motion: reduce) {
924
941
  .field__input-wrapper,
@@ -1023,8 +1040,8 @@
1023
1040
  gap: var(--hx-space-1, 0.25rem);
1024
1041
  padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);
1025
1042
  height: 1.5rem;
1026
- background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));
1027
- color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e3a8a));
1043
+ background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbf0f0));
1044
+ color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #07494a));
1028
1045
  border-radius: var(--hx-border-radius-full, 9999px);
1029
1046
  font-size: var(--hx-font-size-sm, 0.875rem);
1030
1047
  white-space: nowrap;
@@ -1055,7 +1072,7 @@
1055
1072
  }
1056
1073
  .field__chip-remove:hover {
1057
1074
  opacity: 1;
1058
- background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));
1075
+ background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bce1e1));
1059
1076
  }
1060
1077
  .field__chip-remove:focus-visible {
1061
1078
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -1104,12 +1121,12 @@
1104
1121
  gap: var(--hx-space-1, 0.25rem);
1105
1122
  font-size: var(--hx-font-size-sm, 0.875rem);
1106
1123
  font-weight: var(--hx-font-weight-medium, 500);
1107
- color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #334155));
1124
+ color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #202b39));
1108
1125
  line-height: var(--hx-line-height-normal, 1.5);
1109
1126
  }
1110
1127
 
1111
1128
  .field__required-marker {
1112
- color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
1129
+ color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
1113
1130
  font-weight: var(--hx-font-weight-bold, 700);
1114
1131
  }
1115
1132
 
@@ -1121,7 +1138,7 @@
1121
1138
  display: flex;
1122
1139
  align-items: stretch;
1123
1140
  border: var(--hx-border-width-thin, 1px) solid
1124
- var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
1141
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
1125
1142
  border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
1126
1143
  background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
1127
1144
  transition:
@@ -1133,14 +1150,14 @@
1133
1150
  .field__input-wrapper:focus-within {
1134
1151
  border-color: var(
1135
1152
  --hx-date-picker-focus-ring-color,
1136
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
1153
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
1137
1154
  );
1138
1155
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
1139
1156
  color-mix(
1140
1157
  in srgb,
1141
1158
  var(
1142
1159
  --hx-date-picker-focus-ring-color,
1143
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
1160
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
1144
1161
  )
1145
1162
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
1146
1163
  transparent
@@ -1148,15 +1165,15 @@
1148
1165
  }
1149
1166
 
1150
1167
  .field--error .field__input-wrapper {
1151
- border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
1168
+ border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));
1152
1169
  }
1153
1170
 
1154
1171
  .field--error .field__input-wrapper:focus-within {
1155
- border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
1172
+ border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));
1156
1173
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
1157
1174
  color-mix(
1158
1175
  in srgb,
1159
- var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626))
1176
+ var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e))
1160
1177
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
1161
1178
  transparent
1162
1179
  );
@@ -1174,7 +1191,7 @@
1174
1191
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
1175
1192
  font-family: inherit;
1176
1193
  font-size: var(--hx-font-size-md, 1rem);
1177
- color: var(--hx-date-picker-color, var(--hx-color-text-strong, #1e293b));
1194
+ color: var(--hx-date-picker-color, var(--hx-color-text-strong, #202b39));
1178
1195
  line-height: var(--hx-line-height-normal, 1.5);
1179
1196
  min-height: var(--hx-size-10, 2.5rem);
1180
1197
  width: 100%;
@@ -1182,7 +1199,7 @@
1182
1199
  }
1183
1200
 
1184
1201
  .field__input::placeholder {
1185
- color: var(--hx-color-text-placeholder, #94a3b8);
1202
+ color: var(--hx-color-text-placeholder, #66787b);
1186
1203
  }
1187
1204
 
1188
1205
  .field__input:disabled {
@@ -1200,9 +1217,9 @@
1200
1217
  padding: 0 var(--hx-space-3, 0.75rem);
1201
1218
  border: none;
1202
1219
  border-left: var(--hx-border-width-thin, 1px) solid
1203
- var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
1220
+ var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
1204
1221
  background: transparent;
1205
- color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #64748b));
1222
+ color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #4a5362));
1206
1223
  cursor: pointer;
1207
1224
  flex-shrink: 0;
1208
1225
  transition: color var(--hx-transition-fast, 150ms ease);
@@ -1212,13 +1229,13 @@
1212
1229
  .field__trigger:focus-visible {
1213
1230
  color: var(
1214
1231
  --hx-date-picker-focus-ring-color,
1215
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
1232
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
1216
1233
  );
1217
1234
  background-color: color-mix(
1218
1235
  in srgb,
1219
1236
  var(
1220
1237
  --hx-date-picker-focus-ring-color,
1221
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
1238
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
1222
1239
  )
1223
1240
  8%,
1224
1241
  transparent
@@ -1226,8 +1243,8 @@
1226
1243
  }
1227
1244
 
1228
1245
  .field__trigger:hover:not(:disabled) {
1229
- color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #334155));
1230
- background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
1246
+ color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #202b39));
1247
+ background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 4%, transparent);
1231
1248
  }
1232
1249
 
1233
1250
  .field__trigger:disabled {
@@ -1246,7 +1263,7 @@
1246
1263
  min-width: var(--hx-date-picker-calendar-min-width, 18rem);
1247
1264
  background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
1248
1265
  border: var(--hx-border-width-thin, 1px) solid
1249
- var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #e2e8f0));
1266
+ var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #d6dbd5));
1250
1267
  border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
1251
1268
  box-shadow: var(
1252
1269
  --hx-date-picker-calendar-shadow,
@@ -1305,21 +1322,21 @@
1305
1322
  }
1306
1323
 
1307
1324
  .calendar__nav-btn {
1308
- color: var(--hx-color-text-secondary, #475569);
1325
+ color: var(--hx-color-text-secondary, #313e4b);
1309
1326
  font-size: var(--hx-font-size-lg, 1.125rem);
1310
1327
  line-height: 1;
1311
1328
  }
1312
1329
 
1313
1330
  .calendar__nav-btn:hover {
1314
- background-color: var(--hx-color-surface-sunken, #f1f5f9);
1315
- color: var(--hx-color-text-primary, #0f172a);
1331
+ background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
1332
+ color: var(--hx-color-text-primary, #0d1825);
1316
1333
  }
1317
1334
 
1318
1335
  :is(.calendar__nav-btn, .calendar__day):focus-visible {
1319
1336
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
1320
1337
  var(
1321
1338
  --hx-date-picker-focus-ring-color,
1322
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
1339
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
1323
1340
  );
1324
1341
  z-index: 1;
1325
1342
  }
@@ -1333,7 +1350,7 @@
1333
1350
  .calendar__month-label {
1334
1351
  font-size: var(--hx-font-size-sm, 0.875rem);
1335
1352
  font-weight: var(--hx-font-weight-semibold, 600);
1336
- color: var(--hx-color-text-strong, #1e293b);
1353
+ color: var(--hx-color-text-strong, #202b39);
1337
1354
  flex: 1;
1338
1355
  text-align: center;
1339
1356
  }
@@ -1358,7 +1375,7 @@
1358
1375
  height: var(--hx-size-8, 2rem);
1359
1376
  font-size: var(--hx-font-size-xs, 0.75rem);
1360
1377
  font-weight: var(--hx-font-weight-semibold, 600);
1361
- color: var(--hx-color-text-muted, #64748b);
1378
+ color: var(--hx-color-text-muted, #4a5362);
1362
1379
  text-transform: uppercase;
1363
1380
  letter-spacing: 0.05em;
1364
1381
  }
@@ -1368,30 +1385,30 @@
1368
1385
  ============================================================ */
1369
1386
 
1370
1387
  .calendar__day {
1371
- color: var(--hx-color-text-strong, #1e293b);
1388
+ color: var(--hx-color-text-strong, #202b39);
1372
1389
  font-size: var(--hx-font-size-sm, 0.875rem);
1373
1390
  font-family: inherit;
1374
1391
  position: relative;
1375
1392
  }
1376
1393
 
1377
1394
  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
1378
- background-color: var(--hx-color-surface-sunken, #f1f5f9);
1379
- color: var(--hx-color-text-primary, #0f172a);
1395
+ background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
1396
+ color: var(--hx-color-text-primary, #0d1825);
1380
1397
  }
1381
1398
 
1382
1399
  .calendar__day--selected {
1383
- background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
1400
+ background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
1384
1401
  color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
1385
1402
  font-weight: var(--hx-font-weight-semibold, 600);
1386
1403
  }
1387
1404
 
1388
1405
  .calendar__day--selected:hover {
1389
- background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));
1406
+ background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));
1390
1407
  }
1391
1408
 
1392
1409
  .calendar__day--today:not(.calendar__day--selected) {
1393
1410
  font-weight: var(--hx-font-weight-bold, 700);
1394
- color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
1411
+ color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #0f7078));
1395
1412
  }
1396
1413
 
1397
1414
  .calendar__day--today:not(.calendar__day--selected)::after {
@@ -1439,11 +1456,11 @@
1439
1456
  }
1440
1457
 
1441
1458
  .field__help-text {
1442
- color: var(--hx-color-text-muted, #64748b);
1459
+ color: var(--hx-color-text-muted, #4a5362);
1443
1460
  }
1444
1461
 
1445
1462
  .field__error {
1446
- color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
1463
+ color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
1447
1464
  }
1448
1465
 
1449
1466
  /* ============================================================
@@ -1549,13 +1566,13 @@
1549
1566
  gap: var(--hx-space-1, 0.25rem);
1550
1567
  font-size: var(--hx-font-size-sm, 0.875rem);
1551
1568
  font-weight: var(--hx-font-weight-medium, 500);
1552
- color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
1569
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #202b39));
1553
1570
  line-height: var(--hx-line-height-normal, 1.5);
1554
1571
  cursor: pointer;
1555
1572
  }
1556
1573
 
1557
1574
  .field__required-marker {
1558
- color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
1575
+ color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
1559
1576
  font-weight: var(--hx-font-weight-bold, 700);
1560
1577
  }
1561
1578
 
@@ -1599,24 +1616,24 @@
1599
1616
 
1600
1617
  .field__help-text {
1601
1618
  font-size: var(--hx-font-size-xs, 0.75rem);
1602
- color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #64748b));
1619
+ color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #4a5362));
1603
1620
  line-height: var(--hx-line-height-normal, 1.5);
1604
1621
  }
1605
1622
 
1606
1623
  .field__error {
1607
1624
  font-size: var(--hx-font-size-xs, 0.75rem);
1608
- color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
1625
+ color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
1609
1626
  line-height: var(--hx-line-height-normal, 1.5);
1610
1627
  }
1611
1628
 
1612
1629
  /* ─── Error State ─── */
1613
1630
 
1614
1631
  .field--error .field__label {
1615
- color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
1632
+ color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
1616
1633
  }
1617
1634
 
1618
1635
  .field--error .field__control {
1619
- outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #dc2626));
1636
+ outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #e5493e));
1620
1637
  outline-offset: var(--hx-focus-ring-offset, 2px);
1621
1638
  border-radius: var(--hx-border-radius-sm, 0.25rem);
1622
1639
  }
@@ -1667,20 +1684,20 @@
1667
1684
  gap: var(--hx-space-1, 0.25rem);
1668
1685
  font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
1669
1686
  font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
1670
- color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
1687
+ color: var(--hx-field-label-color, var(--hx-color-text-strong, #313e4b));
1671
1688
  line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
1672
1689
  font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
1673
1690
  }
1674
1691
 
1675
1692
  .required-indicator {
1676
- color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
1693
+ color: var(--hx-field-label-required-color, var(--hx-color-error-text, #c92a2a));
1677
1694
  font-weight: var(--hx-font-weight-bold, 700);
1678
1695
  }
1679
1696
 
1680
1697
  .optional-indicator {
1681
1698
  font-size: var(--hx-font-size-xs, 0.75rem);
1682
1699
  font-weight: var(--hx-font-weight-normal, 400);
1683
- color: var(--hx-color-text-muted, #64748b);
1700
+ color: var(--hx-color-text-muted, #66787b);
1684
1701
  }
1685
1702
 
1686
1703
  /* ─── High Contrast Mode (forced-colors) ─── */
@@ -1739,7 +1756,7 @@
1739
1756
  gap: var(--hx-space-1, 0.25rem);
1740
1757
  font-size: var(--hx-font-size-sm, 0.875rem);
1741
1758
  font-weight: var(--hx-font-weight-medium, 500);
1742
- color: var(--hx-color-text-strong, #334155);
1759
+ color: var(--hx-color-text-strong, #202b39);
1743
1760
  line-height: var(--hx-line-height-normal, 1.5);
1744
1761
  }
1745
1762
 
@@ -1754,9 +1771,9 @@
1754
1771
  min-height: var(--hx-space-32, 8rem);
1755
1772
  padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
1756
1773
  border: var(--hx-border-width-thin, 1px) dashed
1757
- var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #cbd5e1));
1774
+ var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #8e9c98));
1758
1775
  border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
1759
- background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f8fafc));
1776
+ background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));
1760
1777
  cursor: pointer;
1761
1778
  text-align: center;
1762
1779
  transition:
@@ -1764,7 +1781,7 @@
1764
1781
  background-color var(--hx-transition-fast, 150ms ease),
1765
1782
  box-shadow var(--hx-transition-fast, 150ms ease);
1766
1783
  user-select: none;
1767
- color: var(--hx-color-text-secondary, #475569);
1784
+ color: var(--hx-color-text-secondary, #313e4b);
1768
1785
  font-size: var(--hx-font-size-sm, 0.875rem);
1769
1786
  }
1770
1787
 
@@ -1782,12 +1799,12 @@
1782
1799
  }
1783
1800
 
1784
1801
  .dropzone--drag-over {
1785
- border-color: var(--hx-color-primary-500, #2563eb);
1802
+ border-color: var(--hx-color-primary-500, #429797);
1786
1803
  background-color: var(
1787
1804
  --hx-file-upload-dropzone-active-bg,
1788
1805
  color-mix(
1789
1806
  in srgb,
1790
- var(--hx-color-primary-500, #2563eb) 8%,
1807
+ var(--hx-color-primary-500, #429797) 8%,
1791
1808
  var(--hx-color-surface-default, #ffffff)
1792
1809
  )
1793
1810
  );
@@ -1795,7 +1812,7 @@
1795
1812
  }
1796
1813
 
1797
1814
  .dropzone--error {
1798
- border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc2626));
1815
+ border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #e5493e));
1799
1816
  }
1800
1817
 
1801
1818
  @media (prefers-reduced-motion: reduce) {
@@ -1840,7 +1857,7 @@
1840
1857
  flex-direction: column;
1841
1858
  gap: var(--hx-space-1, 0.25rem);
1842
1859
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
1843
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0);
1860
+ border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5);
1844
1861
  border-radius: var(--hx-border-radius-md, 0.375rem);
1845
1862
  background-color: var(--hx-color-surface-default, #ffffff);
1846
1863
  }
@@ -1855,7 +1872,7 @@
1855
1872
  flex: 1;
1856
1873
  font-size: var(--hx-font-size-sm, 0.875rem);
1857
1874
  font-weight: var(--hx-font-weight-medium, 500);
1858
- color: var(--hx-color-text-strong, #1e293b);
1875
+ color: var(--hx-color-text-strong, #202b39);
1859
1876
  overflow: hidden;
1860
1877
  text-overflow: ellipsis;
1861
1878
  white-space: nowrap;
@@ -1864,7 +1881,7 @@
1864
1881
  .file-item__size {
1865
1882
  flex-shrink: 0;
1866
1883
  font-size: var(--hx-font-size-xs, 0.75rem);
1867
- color: var(--hx-color-text-muted, #64748b);
1884
+ color: var(--hx-color-text-muted, #4a5362);
1868
1885
  }
1869
1886
 
1870
1887
  .file-item__remove {
@@ -1878,7 +1895,7 @@
1878
1895
  border: none;
1879
1896
  border-radius: var(--hx-border-radius-sm, 0.25rem);
1880
1897
  background: transparent;
1881
- color: var(--hx-color-text-muted, #64748b);
1898
+ color: var(--hx-color-text-muted, #4a5362);
1882
1899
  cursor: pointer;
1883
1900
  line-height: 1;
1884
1901
  transition:
@@ -1887,8 +1904,8 @@
1887
1904
  }
1888
1905
 
1889
1906
  .file-item__remove:hover {
1890
- color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
1891
- background-color: color-mix(in srgb, var(--hx-color-error-500, #dc2626) 8%, transparent);
1907
+ color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));
1908
+ background-color: color-mix(in srgb, var(--hx-color-error-500, #e5493e) 8%, transparent);
1892
1909
  }
1893
1910
 
1894
1911
  .file-item__remove:focus-visible {
@@ -1911,7 +1928,7 @@
1911
1928
  .progress-track {
1912
1929
  width: 100%;
1913
1930
  height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
1914
- background-color: var(--hx-color-border-default, #e2e8f0);
1931
+ background-color: var(--hx-color-border-default, #d6dbd5);
1915
1932
  border-radius: var(--hx-border-radius-full, 9999px);
1916
1933
  overflow: hidden;
1917
1934
  }
@@ -1919,7 +1936,7 @@
1919
1936
  .progress-bar {
1920
1937
  height: 100%;
1921
1938
  width: 100%;
1922
- background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));
1939
+ background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #429797));
1923
1940
  border-radius: inherit;
1924
1941
  transform-origin: left center;
1925
1942
  transform: scaleX(var(--_progress-ratio, 0));
@@ -1950,7 +1967,7 @@
1950
1967
 
1951
1968
  .field__error {
1952
1969
  font-size: var(--hx-font-size-xs, 0.75rem);
1953
- color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
1970
+ color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));
1954
1971
  line-height: var(--hx-line-height-normal, 1.5);
1955
1972
  }
1956
1973
 
@@ -2012,7 +2029,7 @@
2012
2029
  font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
2013
2030
  font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
2014
2031
  line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
2015
- color: var(--hx-help-text-color, var(--hx-color-text-muted, #64748b));
2032
+ color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));
2016
2033
  margin: 0;
2017
2034
  }
2018
2035
 
@@ -2029,25 +2046,25 @@
2029
2046
  /* ─── Variant: default ─── */
2030
2047
 
2031
2048
  .help-text--default {
2032
- --hx-help-text-color: var(--hx-color-text-muted, #64748b);
2049
+ --hx-help-text-color: var(--hx-color-text-muted, #4a5362);
2033
2050
  }
2034
2051
 
2035
2052
  /* ─── Variant: error ─── */
2036
2053
 
2037
2054
  .help-text--error {
2038
- --hx-help-text-color: var(--hx-color-error-600, #b91c1c);
2055
+ --hx-help-text-color: var(--hx-color-error-600, #c92a2a);
2039
2056
  }
2040
2057
 
2041
2058
  /* ─── Variant: warning ─── */
2042
2059
 
2043
2060
  .help-text--warning {
2044
- --hx-help-text-color: var(--hx-color-warning-700, #92400e);
2061
+ --hx-help-text-color: var(--hx-color-warning-700, #804605);
2045
2062
  }
2046
2063
 
2047
2064
  /* ─── Variant: success ─── */
2048
2065
 
2049
2066
  .help-text--success {
2050
- --hx-help-text-color: var(--hx-color-success-700, #166534);
2067
+ --hx-help-text-color: var(--hx-color-success-700, #146831);
2051
2068
  }
2052
2069
 
2053
2070
  /* ─── High Contrast Mode (forced-colors) ─── */
@@ -2107,7 +2124,7 @@
2107
2124
  }
2108
2125
 
2109
2126
  .field__required-marker {
2110
- color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
2127
+ color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
2111
2128
  font-weight: var(--hx-font-weight-bold);
2112
2129
  }
2113
2130
 
@@ -2143,18 +2160,18 @@
2143
2160
  /* ─── Error State ─── */
2144
2161
 
2145
2162
  .field--error .field__input-wrapper {
2146
- border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
2163
+ border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
2147
2164
  }
2148
2165
 
2149
2166
  .field--error .field__input-wrapper:focus-within {
2150
- border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
2167
+ border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
2151
2168
  /* Fallback for Safari < 16.2 (no color-mix support) */
2152
2169
  box-shadow: 0 0 0 var(--hx-focus-ring-width)
2153
- var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
2170
+ var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
2154
2171
  box-shadow: 0 0 0 var(--hx-focus-ring-width)
2155
2172
  color-mix(
2156
2173
  in srgb,
2157
- var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
2174
+ var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))
2158
2175
  calc(var(--hx-focus-ring-opacity) * 100%),
2159
2176
  transparent
2160
2177
  );
@@ -2300,7 +2317,7 @@
2300
2317
 
2301
2318
  .field__error {
2302
2319
  font-size: var(--hx-font-size-xs);
2303
- color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
2320
+ color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
2304
2321
  line-height: var(--hx-line-height-normal);
2305
2322
  }
2306
2323
 
@@ -2427,14 +2444,14 @@
2427
2444
  gap: var(--hx-space-1, 0.25rem);
2428
2445
  font-size: var(--hx-font-size-sm, 0.875rem);
2429
2446
  font-weight: var(--hx-font-weight-medium, 500);
2430
- color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #334155));
2447
+ color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #202b39));
2431
2448
  line-height: var(--hx-line-height-normal, 1.5);
2432
2449
  padding: 0;
2433
2450
  margin-bottom: var(--hx-space-1, 0.25rem);
2434
2451
  }
2435
2452
 
2436
2453
  .fieldset__required-marker {
2437
- color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
2454
+ color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
2438
2455
  font-weight: var(--hx-font-weight-bold, 700);
2439
2456
  }
2440
2457
 
@@ -2454,20 +2471,20 @@
2454
2471
  /* ─── Error State ─── */
2455
2472
 
2456
2473
  .fieldset--error .fieldset__legend {
2457
- color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
2474
+ color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
2458
2475
  }
2459
2476
 
2460
2477
  /* ─── Help Text & Error Messages ─── */
2461
2478
 
2462
2479
  .fieldset__help-text {
2463
2480
  font-size: var(--hx-font-size-xs, 0.75rem);
2464
- color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #64748b));
2481
+ color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #66787b));
2465
2482
  line-height: var(--hx-line-height-normal, 1.5);
2466
2483
  }
2467
2484
 
2468
2485
  .fieldset__error {
2469
2486
  font-size: var(--hx-font-size-xs, 0.75rem);
2470
- color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
2487
+ color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
2471
2488
  line-height: var(--hx-line-height-normal, 1.5);
2472
2489
  }
2473
2490
 
@@ -2537,7 +2554,7 @@
2537
2554
  justify-content: center;
2538
2555
  position: relative;
2539
2556
  cursor: pointer;
2540
- color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
2557
+ color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #8e9c98));
2541
2558
  line-height: 1;
2542
2559
  min-width: var(--hx-touch-target-min, 2.75rem);
2543
2560
  min-height: var(--hx-touch-target-min, 2.75rem);
@@ -2546,14 +2563,14 @@
2546
2563
 
2547
2564
  .symbol:focus-visible {
2548
2565
  outline: var(--hx-focus-ring-width, 2px) solid
2549
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
2566
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
2550
2567
  outline-offset: var(--hx-focus-ring-offset, 2px);
2551
2568
  border-radius: var(--hx-border-radius-sm, 0.25rem);
2552
2569
  }
2553
2570
 
2554
2571
  .symbol--full,
2555
2572
  .symbol--half {
2556
- color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));
2573
+ color: var(--hx-rating-color, var(--hx-color-warning-400, #da904f));
2557
2574
  }
2558
2575
 
2559
2576
  .symbol--disabled {
@@ -2562,7 +2579,7 @@
2562
2579
 
2563
2580
  .base:not(.base--readonly) .symbol:hover {
2564
2581
  transform: scale(1.15);
2565
- color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));
2582
+ color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #eeb383));
2566
2583
  }
2567
2584
 
2568
2585
  /* ─── Half-Star Layout ─── */
@@ -2588,7 +2605,7 @@
2588
2605
  position: absolute;
2589
2606
  left: 0;
2590
2607
  top: 0;
2591
- color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #cbd5e1));
2608
+ color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #8e9c98));
2592
2609
  /* Clip to right 50% for the empty half */
2593
2610
  clip-path: inset(0 0 0 50%);
2594
2611
  }
@@ -2646,38 +2663,38 @@
2646
2663
 
2647
2664
  /* Background & foreground */
2648
2665
  --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
2649
- --_color: var(--hx-select-color, var(--hx-color-text-strong, #1e293b));
2666
+ --_color: var(--hx-select-color, var(--hx-color-text-strong, #202b39));
2650
2667
  --_placeholder-color: var(
2651
2668
  --hx-select-placeholder-color,
2652
- var(--hx-color-text-placeholder, #64748b)
2669
+ var(--hx-color-text-placeholder, #66787b)
2653
2670
  );
2654
2671
 
2655
2672
  /* Label */
2656
- --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #1e293b));
2673
+ --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #202b39));
2657
2674
 
2658
2675
  /* Border */
2659
- --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #94a3b8));
2676
+ --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #8e9c98));
2660
2677
  --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
2661
2678
 
2662
2679
  /* Focus ring */
2663
2680
  --_focus-ring-color: var(
2664
2681
  --hx-select-focus-ring-color,
2665
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
2682
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
2666
2683
  );
2667
2684
 
2668
2685
  /* Error */
2669
- --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
2686
+ --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #e5493e));
2670
2687
 
2671
2688
  /* Chevron */
2672
- --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #64748b));
2689
+ --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #4a5362));
2673
2690
  --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
2674
2691
 
2675
2692
  /* Listbox */
2676
2693
  --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
2677
- --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
2694
+ --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
2678
2695
  --_option-selected-bg: var(
2679
2696
  --hx-select-option-selected-bg,
2680
- var(--hx-color-primary-100, #dbeafe)
2697
+ var(--hx-color-primary-100, #dbf0f0)
2681
2698
  );
2682
2699
 
2683
2700
  /* Typography */
@@ -2712,7 +2729,7 @@
2712
2729
  }
2713
2730
 
2714
2731
  .field__required-marker {
2715
- color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
2732
+ color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
2716
2733
  font-weight: var(--hx-font-weight-bold, 700);
2717
2734
  }
2718
2735
 
@@ -2921,11 +2938,11 @@
2921
2938
  }
2922
2939
 
2923
2940
  .field__help-text {
2924
- color: var(--hx-color-text-muted, #64748b);
2941
+ color: var(--hx-color-text-muted, #4a5362);
2925
2942
  }
2926
2943
 
2927
2944
  .field__error {
2928
- color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
2945
+ color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
2929
2946
  }
2930
2947
 
2931
2948
  @media (prefers-reduced-motion: reduce) {
@@ -3052,14 +3069,14 @@
3052
3069
  .slider__label {
3053
3070
  font-size: var(--hx-font-size-sm, 0.875rem);
3054
3071
  font-weight: var(--hx-font-weight-medium, 500);
3055
- color: var(--hx-slider-label-color, var(--hx-color-text-strong, #334155));
3072
+ color: var(--hx-slider-label-color, var(--hx-color-text-strong, #202b39));
3056
3073
  line-height: var(--hx-line-height-normal, 1.5);
3057
3074
  }
3058
3075
 
3059
3076
  .slider__value-display {
3060
3077
  font-size: var(--hx-font-size-sm, 0.875rem);
3061
3078
  font-weight: var(--hx-font-weight-medium, 500);
3062
- color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #475569));
3079
+ color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #313e4b));
3063
3080
  line-height: var(--hx-line-height-normal, 1.5);
3064
3081
  font-variant-numeric: tabular-nums;
3065
3082
  min-width: var(--hx-size-8, 2rem);
@@ -3077,7 +3094,7 @@
3077
3094
  position: relative;
3078
3095
  width: 100%;
3079
3096
  border-radius: var(--hx-border-radius-full, 9999px);
3080
- background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #e2e8f0));
3097
+ background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #d6dbd5));
3081
3098
  overflow: visible;
3082
3099
  }
3083
3100
 
@@ -3120,7 +3137,7 @@
3120
3137
  height: 100%;
3121
3138
  width: 100%;
3122
3139
  border-radius: var(--hx-border-radius-full, 9999px);
3123
- background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #2563eb));
3140
+ background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #429797));
3124
3141
  pointer-events: none;
3125
3142
  transform-origin: left center;
3126
3143
  transform: scaleX(var(--_fill-ratio, 0));
@@ -3201,7 +3218,7 @@
3201
3218
  border-radius: var(--hx-border-radius-full, 9999px);
3202
3219
  background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
3203
3220
  border: var(--hx-slider-thumb-border-width, 2px) solid
3204
- var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
3221
+ var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #429797));
3205
3222
  box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
3206
3223
  pointer-events: none;
3207
3224
  transition:
@@ -3220,7 +3237,7 @@
3220
3237
  0 0 0 var(--hx-focus-ring-width, 2px)
3221
3238
  var(
3222
3239
  --hx-slider-focus-ring-color,
3223
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3240
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3224
3241
  ),
3225
3242
  var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
3226
3243
  }
@@ -3277,7 +3294,7 @@
3277
3294
  top: 0;
3278
3295
  width: var(--hx-border-width-thin, 1px);
3279
3296
  height: 100%;
3280
- background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #94a3b8));
3297
+ background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #8e9c98));
3281
3298
  transform: translateX(-50%);
3282
3299
  }
3283
3300
 
@@ -3287,7 +3304,7 @@
3287
3304
  display: flex;
3288
3305
  justify-content: space-between;
3289
3306
  font-size: var(--hx-font-size-xs, 0.75rem);
3290
- color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #64748b));
3307
+ color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #4a5362));
3291
3308
  line-height: var(--hx-line-height-normal, 1.5);
3292
3309
  margin-top: var(--hx-space-0-5, 0.125rem);
3293
3310
  }
@@ -3296,18 +3313,21 @@
3296
3313
 
3297
3314
  .slider__help-text {
3298
3315
  font-size: var(--hx-font-size-xs, 0.75rem);
3299
- color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #64748b));
3316
+ color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #4a5362));
3300
3317
  line-height: var(--hx-line-height-normal, 1.5);
3301
3318
  }
3302
3319
 
3303
3320
  /* ─── Disabled state ─── */
3304
3321
 
3305
3322
  .slider--disabled .slider__fill {
3306
- background-color: var(--hx-color-border-strong, #94a3b8);
3323
+ background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #8e9c98));
3307
3324
  }
3308
3325
 
3309
3326
  .slider--disabled .slider__thumb-visual {
3310
- border-color: var(--hx-color-border-strong, #94a3b8);
3327
+ border-color: var(
3328
+ --hx-slider-disabled-thumb-border-color,
3329
+ var(--hx-color-border-strong, #8e9c98)
3330
+ );
3311
3331
  }
3312
3332
  /* ── hx-switch ── */
3313
3333
  :host {
@@ -3352,7 +3372,7 @@
3352
3372
  border: none;
3353
3373
  padding: 0;
3354
3374
  border-radius: var(--hx-border-radius-full, 9999px);
3355
- background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #cbd5e1));
3375
+ background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #8e9c98));
3356
3376
  cursor: pointer;
3357
3377
  transition: background-color var(--hx-transition-fast, 150ms ease);
3358
3378
  outline: none;
@@ -3364,13 +3384,21 @@
3364
3384
  outline: var(--hx-focus-ring-width, 2px) solid
3365
3385
  var(
3366
3386
  --hx-switch-focus-ring-color,
3367
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3387
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3368
3388
  );
3369
3389
  outline-offset: var(--hx-focus-ring-offset, 2px);
3370
3390
  }
3371
3391
 
3372
3392
  .switch--checked .switch__track {
3373
- background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
3393
+ background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #429797));
3394
+ }
3395
+
3396
+ .switch:not(.switch--checked) .switch__track:hover {
3397
+ background-color: var(--hx-switch-track-hover-bg, var(--hx-color-border-strong, #8e9c98));
3398
+ }
3399
+
3400
+ .switch--checked .switch__track:hover {
3401
+ background-color: var(--hx-switch-track-checked-hover-bg, var(--hx-color-primary-600, #0f7078));
3374
3402
  }
3375
3403
 
3376
3404
  /* --- Thumb --- */
@@ -3448,7 +3476,7 @@
3448
3476
  .switch__label {
3449
3477
  font-size: var(--hx-font-size-sm, 0.875rem);
3450
3478
  font-weight: var(--hx-font-weight-medium, 500);
3451
- color: var(--hx-switch-label-color, var(--hx-color-text-strong, #334155));
3479
+ color: var(--hx-switch-label-color, var(--hx-color-text-strong, #202b39));
3452
3480
  line-height: var(--hx-line-height-normal, 1.5);
3453
3481
  cursor: pointer;
3454
3482
  user-select: none;
@@ -3456,7 +3484,7 @@
3456
3484
  }
3457
3485
 
3458
3486
  .switch__required-marker {
3459
- color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
3487
+ color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
3460
3488
  font-weight: var(--hx-font-weight-bold, 700);
3461
3489
  }
3462
3490
 
@@ -3464,13 +3492,13 @@
3464
3492
 
3465
3493
  .switch__help-text {
3466
3494
  font-size: var(--hx-font-size-xs, 0.75rem);
3467
- color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #64748b));
3495
+ color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #4a5362));
3468
3496
  line-height: var(--hx-line-height-normal, 1.5);
3469
3497
  }
3470
3498
 
3471
3499
  .switch__error {
3472
3500
  font-size: var(--hx-font-size-xs, 0.75rem);
3473
- color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
3501
+ color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
3474
3502
  line-height: var(--hx-line-height-normal, 1.5);
3475
3503
  }
3476
3504
 
@@ -3543,6 +3571,100 @@
3543
3571
  /* ── hx-text-input ── */
3544
3572
  :host {
3545
3573
  display: block;
3574
+
3575
+ /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
3576
+
3577
+ /* Surface */
3578
+ --_text-input-bg: var(
3579
+ --hx-text-input-bg,
3580
+ var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
3581
+ );
3582
+ --_text-input-color: var(
3583
+ --hx-text-input-color,
3584
+ var(--hx-input-color, var(--hx-color-text-strong, #202b39))
3585
+ );
3586
+ --_text-input-placeholder-color: var(
3587
+ --hx-text-input-placeholder-color,
3588
+ var(--hx-color-text-placeholder, #66787b)
3589
+ );
3590
+
3591
+ /* Border */
3592
+ --_text-input-border-color: var(
3593
+ --hx-text-input-border-color,
3594
+ var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
3595
+ );
3596
+ --_text-input-border-color-hover: var(
3597
+ --hx-text-input-border-color-hover,
3598
+ var(--hx-color-border-strong, #8e9c98)
3599
+ );
3600
+ --_text-input-border-color-focus: var(
3601
+ --hx-text-input-border-color-focus,
3602
+ var(
3603
+ --hx-input-focus-ring-color,
3604
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3605
+ )
3606
+ );
3607
+ --_text-input-border-color-invalid: var(
3608
+ --hx-text-input-border-color-invalid,
3609
+ var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
3610
+ );
3611
+ --_text-input-border-width: var(--hx-text-input-border-width, var(--hx-border-width-thin, 1px));
3612
+ --_text-input-border-radius: var(
3613
+ --hx-text-input-border-radius,
3614
+ var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
3615
+ );
3616
+
3617
+ /* Spacing */
3618
+ --_text-input-padding-x: var(--hx-text-input-padding-x, var(--hx-space-3, 0.75rem));
3619
+ --_text-input-padding-y: var(--hx-text-input-padding-y, var(--hx-space-2, 0.5rem));
3620
+
3621
+ /* Typography */
3622
+ --_text-input-font-family: var(
3623
+ --hx-text-input-font-family,
3624
+ var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
3625
+ );
3626
+ --_text-input-font-size: var(--hx-text-input-font-size, var(--hx-font-size-md, 1rem));
3627
+
3628
+ /* Focus ring */
3629
+ --_text-input-focus-ring-color: var(
3630
+ --hx-text-input-focus-ring-color,
3631
+ var(
3632
+ --hx-input-focus-ring-color,
3633
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3634
+ )
3635
+ );
3636
+ --_text-input-focus-ring-width: var(
3637
+ --hx-text-input-focus-ring-width,
3638
+ var(--hx-focus-ring-width, 2px)
3639
+ );
3640
+ --_text-input-focus-ring-offset: var(
3641
+ --hx-text-input-focus-ring-offset,
3642
+ var(--hx-focus-ring-offset, 0px)
3643
+ );
3644
+
3645
+ /* Disabled */
3646
+ --_text-input-disabled-bg: var(
3647
+ --hx-text-input-disabled-bg,
3648
+ var(--hx-color-surface-sunken, #ebeee9)
3649
+ );
3650
+ --_text-input-disabled-color: var(
3651
+ --hx-text-input-disabled-color,
3652
+ var(--hx-color-text-disabled, #8e9c98)
3653
+ );
3654
+
3655
+ /* Label / help / error */
3656
+ --_text-input-label-color: var(
3657
+ --hx-text-input-label-color,
3658
+ var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
3659
+ );
3660
+ --_text-input-help-text-color: var(
3661
+ --hx-text-input-help-text-color,
3662
+ var(--hx-color-text-muted, #4a5362)
3663
+ );
3664
+ --_text-input-error-color: var(
3665
+ --hx-text-input-error-color,
3666
+ var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
3667
+ );
3546
3668
  }
3547
3669
 
3548
3670
  :host([disabled]) {
@@ -3557,36 +3679,13 @@
3557
3679
  * These complement the :focus-within rules on .field__input-wrapper and are
3558
3680
  * exposed as theming hooks for consumers who target the host element.
3559
3681
  */
3560
- :host([focused]) .field__input-wrapper {
3561
- border-color: var(
3562
- --hx-input-focus-ring-color,
3563
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3564
- );
3565
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3566
- color-mix(
3567
- in srgb,
3568
- var(
3569
- --hx-input-focus-ring-color,
3570
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3571
- )
3572
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3573
- transparent
3574
- );
3575
- }
3576
-
3682
+ :host([focused]) .field__input-wrapper,
3577
3683
  :host([focused-visible]) .field__input-wrapper {
3578
- border-color: var(
3579
- --hx-input-focus-ring-color,
3580
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3581
- );
3582
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3684
+ border-color: var(--_text-input-border-color-focus);
3685
+ box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
3583
3686
  color-mix(
3584
3687
  in srgb,
3585
- var(
3586
- --hx-input-focus-ring-color,
3587
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3588
- )
3589
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3688
+ var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3590
3689
  transparent
3591
3690
  );
3592
3691
  }
@@ -3599,7 +3698,7 @@
3599
3698
  display: flex;
3600
3699
  flex-direction: column;
3601
3700
  gap: var(--hx-space-1, 0.25rem);
3602
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
3701
+ font-family: var(--_text-input-font-family);
3603
3702
  }
3604
3703
 
3605
3704
  /* ─── Label ─── */
@@ -3614,12 +3713,12 @@
3614
3713
  gap: var(--hx-space-1, 0.25rem);
3615
3714
  font-size: var(--hx-font-size-sm, 0.875rem);
3616
3715
  font-weight: var(--hx-font-weight-medium, 500);
3617
- color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
3716
+ color: var(--_text-input-label-color);
3618
3717
  line-height: var(--hx-line-height-normal, 1.5);
3619
3718
  }
3620
3719
 
3621
3720
  .field__required-marker {
3622
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
3721
+ color: var(--_text-input-error-color);
3623
3722
  font-weight: var(--hx-font-weight-bold, 700);
3624
3723
  }
3625
3724
 
@@ -3628,29 +3727,25 @@
3628
3727
  .field__input-wrapper {
3629
3728
  display: flex;
3630
3729
  align-items: center;
3631
- border: var(--hx-border-width-thin, 1px) solid
3632
- var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
3633
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
3634
- background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
3730
+ border: var(--_text-input-border-width) solid var(--_text-input-border-color);
3731
+ border-radius: var(--_text-input-border-radius);
3732
+ background-color: var(--_text-input-bg);
3635
3733
  transition:
3636
3734
  border-color var(--hx-transition-fast, 150ms ease),
3637
3735
  box-shadow var(--hx-transition-fast, 150ms ease);
3638
3736
  overflow: hidden;
3639
3737
  }
3640
3738
 
3739
+ .field__input-wrapper:hover {
3740
+ border-color: var(--_text-input-border-color-hover);
3741
+ }
3742
+
3641
3743
  .field__input-wrapper:focus-within {
3642
- border-color: var(
3643
- --hx-input-focus-ring-color,
3644
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3645
- );
3646
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3744
+ border-color: var(--_text-input-border-color-focus);
3745
+ box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
3647
3746
  color-mix(
3648
3747
  in srgb,
3649
- var(
3650
- --hx-input-focus-ring-color,
3651
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3652
- )
3653
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3748
+ var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3654
3749
  transparent
3655
3750
  );
3656
3751
  }
@@ -3658,16 +3753,15 @@
3658
3753
  /* ─── Error State ─── */
3659
3754
 
3660
3755
  .field--error .field__input-wrapper {
3661
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
3756
+ border-color: var(--_text-input-border-color-invalid);
3662
3757
  }
3663
3758
 
3664
3759
  .field--error .field__input-wrapper:focus-within {
3665
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
3666
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3760
+ border-color: var(--_text-input-border-color-invalid);
3761
+ box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
3667
3762
  color-mix(
3668
3763
  in srgb,
3669
- var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
3670
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3764
+ var(--_text-input-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3671
3765
  transparent
3672
3766
  );
3673
3767
  }
@@ -3678,17 +3772,17 @@
3678
3772
  .field__suffix {
3679
3773
  display: flex;
3680
3774
  align-items: center;
3681
- color: var(--hx-color-text-muted, #64748b);
3775
+ color: var(--hx-color-text-muted, #4a5362);
3682
3776
  flex-shrink: 0;
3683
3777
  }
3684
3778
 
3685
3779
  /* Only add padding when slot has content — avoids phantom space on empty slots */
3686
3780
  .field__prefix--filled {
3687
- padding: 0 var(--hx-space-3, 0.75rem);
3781
+ padding: 0 var(--_text-input-padding-x);
3688
3782
  }
3689
3783
 
3690
3784
  .field__suffix--filled {
3691
- padding: 0 var(--hx-space-3, 0.75rem);
3785
+ padding: 0 var(--_text-input-padding-x);
3692
3786
  }
3693
3787
 
3694
3788
  /* ─── Native Input ─── */
@@ -3698,17 +3792,17 @@
3698
3792
  border: none;
3699
3793
  outline: none;
3700
3794
  background: transparent;
3701
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
3795
+ padding: var(--_text-input-padding-y) var(--_text-input-padding-x);
3702
3796
  font-family: inherit;
3703
- font-size: var(--hx-font-size-md, 1rem);
3704
- color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
3797
+ font-size: var(--_text-input-font-size);
3798
+ color: var(--_text-input-color);
3705
3799
  line-height: var(--hx-line-height-normal, 1.5);
3706
3800
  min-height: var(--hx-size-10, 2.5rem);
3707
3801
  width: 100%;
3708
3802
  }
3709
3803
 
3710
3804
  .field__input::placeholder {
3711
- color: var(--hx-color-text-placeholder, #94a3b8);
3805
+ color: var(--_text-input-placeholder-color);
3712
3806
  }
3713
3807
 
3714
3808
  .field__input:focus-visible {
@@ -3717,6 +3811,12 @@
3717
3811
 
3718
3812
  .field__input:disabled {
3719
3813
  cursor: not-allowed;
3814
+ background-color: var(--_text-input-disabled-bg);
3815
+ color: var(--_text-input-disabled-color);
3816
+ }
3817
+
3818
+ :host([disabled]) .field__input-wrapper {
3819
+ background-color: var(--_text-input-disabled-bg);
3720
3820
  }
3721
3821
 
3722
3822
  /* ─── Size Variants ─── */
@@ -3724,7 +3824,7 @@
3724
3824
  .field--size-sm .field__input {
3725
3825
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
3726
3826
  min-height: var(--hx-size-8, 2rem);
3727
- font-size: var(--hx-input-sm-font-size, 0.875rem);
3827
+ font-size: var(--hx-text-input-sm-font-size, var(--hx-input-sm-font-size, 0.875rem));
3728
3828
  }
3729
3829
 
3730
3830
  .field--size-md .field__input {
@@ -3734,20 +3834,20 @@
3734
3834
  .field--size-lg .field__input {
3735
3835
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
3736
3836
  min-height: var(--hx-size-12, 3rem);
3737
- font-size: var(--hx-input-lg-font-size, 1.125rem);
3837
+ font-size: var(--hx-text-input-lg-font-size, var(--hx-input-lg-font-size, 1.125rem));
3738
3838
  }
3739
3839
 
3740
3840
  /* ─── Help Text & Error Messages ─── */
3741
3841
 
3742
3842
  .field__help-text {
3743
3843
  font-size: var(--hx-font-size-xs, 0.75rem);
3744
- color: var(--hx-color-text-muted, #64748b);
3844
+ color: var(--_text-input-help-text-color);
3745
3845
  line-height: var(--hx-line-height-normal, 1.5);
3746
3846
  }
3747
3847
 
3748
3848
  .field__error {
3749
3849
  font-size: var(--hx-font-size-xs, 0.75rem);
3750
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
3850
+ color: var(--_text-input-error-color);
3751
3851
  line-height: var(--hx-line-height-normal, 1.5);
3752
3852
  }
3753
3853
 
@@ -3759,7 +3859,13 @@
3759
3859
  }
3760
3860
  }
3761
3861
 
3762
- /* ─── High Contrast Mode (forced-colors) ─── */
3862
+ /* ─── High Contrast Mode (forced-colors) ───
3863
+ *
3864
+ * Component-specific overrides that complement the shared forcedColorsField
3865
+ * mixin (composed in static styles). The mixin handles the input/wrapper
3866
+ * core; the rules below extend it to the label / error / help-text /
3867
+ * disabled-host surfaces unique to hx-text-input.
3868
+ */
3763
3869
 
3764
3870
  @media (forced-colors: active) {
3765
3871
  .field__input-wrapper {
@@ -3819,6 +3925,42 @@
3819
3925
  /* ── hx-textarea ── */
3820
3926
  :host {
3821
3927
  display: block;
3928
+
3929
+ /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
3930
+ --_textarea-bg: var(
3931
+ --hx-textarea-bg,
3932
+ var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
3933
+ );
3934
+ --_textarea-color: var(
3935
+ --hx-textarea-color,
3936
+ var(--hx-input-color, var(--hx-color-text-strong, #202b39))
3937
+ );
3938
+ --_textarea-border-color: var(
3939
+ --hx-textarea-border-color,
3940
+ var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
3941
+ );
3942
+ --_textarea-border-color-focus: var(
3943
+ --hx-textarea-border-color-focus,
3944
+ var(
3945
+ --hx-input-focus-ring-color,
3946
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3947
+ )
3948
+ );
3949
+ --_textarea-border-color-invalid: var(
3950
+ --hx-textarea-border-color-invalid,
3951
+ var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
3952
+ );
3953
+ --_textarea-border-radius: var(
3954
+ --hx-textarea-border-radius,
3955
+ var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
3956
+ );
3957
+ --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));
3958
+ --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));
3959
+ --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));
3960
+ --_textarea-placeholder-color: var(
3961
+ --hx-textarea-placeholder-color,
3962
+ var(--hx-color-text-placeholder, #66787b)
3963
+ );
3822
3964
  }
3823
3965
 
3824
3966
  :host([disabled]) {
@@ -3834,7 +3976,10 @@
3834
3976
  display: flex;
3835
3977
  flex-direction: column;
3836
3978
  gap: var(--hx-space-1, 0.25rem);
3837
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
3979
+ font-family: var(
3980
+ --hx-textarea-font-family,
3981
+ var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
3982
+ );
3838
3983
  }
3839
3984
 
3840
3985
  /* --- Label --- */
@@ -3849,12 +3994,18 @@
3849
3994
  gap: var(--hx-space-1, 0.25rem);
3850
3995
  font-size: var(--hx-font-size-sm, 0.875rem);
3851
3996
  font-weight: var(--hx-font-weight-medium, 500);
3852
- color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
3997
+ color: var(
3998
+ --hx-textarea-label-color,
3999
+ var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
4000
+ );
3853
4001
  line-height: var(--hx-line-height-normal, 1.5);
3854
4002
  }
3855
4003
 
3856
4004
  .field__required-marker {
3857
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
4005
+ color: var(
4006
+ --hx-textarea-error-color,
4007
+ var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
4008
+ );
3858
4009
  font-weight: var(--hx-font-weight-bold, 700);
3859
4010
  }
3860
4011
 
@@ -3863,10 +4014,9 @@
3863
4014
  .field__textarea-wrapper {
3864
4015
  display: flex;
3865
4016
  flex-direction: column;
3866
- border: var(--hx-border-width-thin, 1px) solid
3867
- var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
3868
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
3869
- background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
4017
+ border: var(--hx-border-width-thin, 1px) solid var(--_textarea-border-color);
4018
+ border-radius: var(--_textarea-border-radius);
4019
+ background-color: var(--_textarea-bg);
3870
4020
  transition:
3871
4021
  border-color var(--hx-transition-fast, 150ms ease),
3872
4022
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3874,18 +4024,11 @@
3874
4024
  }
3875
4025
 
3876
4026
  .field__textarea-wrapper:focus-within {
3877
- border-color: var(
3878
- --hx-input-focus-ring-color,
3879
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3880
- );
4027
+ border-color: var(--_textarea-border-color-focus);
3881
4028
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3882
4029
  color-mix(
3883
4030
  in srgb,
3884
- var(
3885
- --hx-input-focus-ring-color,
3886
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3887
- )
3888
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
4031
+ var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3889
4032
  transparent
3890
4033
  );
3891
4034
  }
@@ -3893,16 +4036,15 @@
3893
4036
  /* --- Error State --- */
3894
4037
 
3895
4038
  .field--error .field__textarea-wrapper {
3896
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
4039
+ border-color: var(--_textarea-border-color-invalid);
3897
4040
  }
3898
4041
 
3899
4042
  .field--error .field__textarea-wrapper:focus-within {
3900
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
4043
+ border-color: var(--_textarea-border-color-invalid);
3901
4044
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3902
4045
  color-mix(
3903
4046
  in srgb,
3904
- var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
3905
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
4047
+ var(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3906
4048
  transparent
3907
4049
  );
3908
4050
  }
@@ -3913,10 +4055,10 @@
3913
4055
  border: none;
3914
4056
  outline: none;
3915
4057
  background: transparent;
3916
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
4058
+ padding: var(--_textarea-padding-y) var(--_textarea-padding-x);
3917
4059
  font-family: inherit;
3918
- font-size: var(--hx-font-size-md, 1rem);
3919
- color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
4060
+ font-size: var(--_textarea-font-size);
4061
+ color: var(--_textarea-color);
3920
4062
  line-height: var(--hx-line-height-normal, 1.5);
3921
4063
  min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
3922
4064
  width: 100%;
@@ -3924,7 +4066,7 @@
3924
4066
  }
3925
4067
 
3926
4068
  .field__textarea::placeholder {
3927
- color: var(--hx-color-text-placeholder, #94a3b8);
4069
+ color: var(--_textarea-placeholder-color);
3928
4070
  }
3929
4071
 
3930
4072
  .field__textarea:focus-visible {
@@ -3962,7 +4104,7 @@
3962
4104
 
3963
4105
  .field__counter {
3964
4106
  font-size: var(--hx-font-size-xs, 0.75rem);
3965
- color: var(--hx-color-text-muted, #64748b);
4107
+ color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));
3966
4108
  line-height: var(--hx-line-height-normal, 1.5);
3967
4109
  text-align: end;
3968
4110
  }
@@ -3985,13 +4127,16 @@
3985
4127
 
3986
4128
  .field__help-text {
3987
4129
  font-size: var(--hx-font-size-xs, 0.75rem);
3988
- color: var(--hx-color-text-muted, #64748b);
4130
+ color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));
3989
4131
  line-height: var(--hx-line-height-normal, 1.5);
3990
4132
  }
3991
4133
 
3992
4134
  .field__error {
3993
4135
  font-size: var(--hx-font-size-xs, 0.75rem);
3994
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
4136
+ color: var(
4137
+ --hx-textarea-error-color,
4138
+ var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
4139
+ );
3995
4140
  line-height: var(--hx-line-height-normal, 1.5);
3996
4141
  }
3997
4142
 
@@ -4076,11 +4221,11 @@
4076
4221
  gap: var(--hx-space-1, 0.25rem);
4077
4222
  font-size: var(--hx-font-size-sm, 0.875rem);
4078
4223
  font-weight: var(--hx-font-weight-medium, 500);
4079
- color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #1e293b));
4224
+ color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
4080
4225
  line-height: var(--hx-line-height-normal, 1.5);
4081
4226
  }
4082
4227
  .field__required-marker {
4083
- color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
4228
+ color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
4084
4229
  font-weight: var(--hx-font-weight-bold, 700);
4085
4230
  }
4086
4231
  .field__combobox {
@@ -4088,7 +4233,7 @@
4088
4233
  display: flex;
4089
4234
  align-items: center;
4090
4235
  border: var(--hx-border-width-thin, 1px) solid
4091
- var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
4236
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
4092
4237
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
4093
4238
  background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
4094
4239
  transition:
@@ -4107,14 +4252,14 @@
4107
4252
  );
4108
4253
  }
4109
4254
  .field--error .field__combobox {
4110
- border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
4255
+ border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
4111
4256
  }
4112
4257
  .field--error .field__combobox:focus-within {
4113
- border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
4258
+ border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
4114
4259
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
4115
4260
  color-mix(
4116
4261
  in srgb,
4117
- var(--hx-time-picker-error-color, var(--hx-color-error-500))
4262
+ var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
4118
4263
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
4119
4264
  transparent
4120
4265
  );
@@ -4127,14 +4272,14 @@
4127
4272
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
4128
4273
  font-family: inherit;
4129
4274
  font-size: var(--hx-font-size-md, 1rem);
4130
- color: var(--hx-time-picker-color, var(--hx-color-text-strong, #1e293b));
4275
+ color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
4131
4276
  line-height: var(--hx-line-height-normal, 1.5);
4132
4277
  min-height: var(--hx-size-10, 2.5rem);
4133
4278
  width: 100%;
4134
4279
  cursor: text;
4135
4280
  }
4136
4281
  .field__input::placeholder {
4137
- color: var(--hx-color-text-placeholder, #64748b);
4282
+ color: var(--hx-color-text-placeholder, #66787b);
4138
4283
  }
4139
4284
  .field__input:disabled {
4140
4285
  cursor: not-allowed;
@@ -4146,13 +4291,13 @@
4146
4291
  border: none;
4147
4292
  background: transparent;
4148
4293
  padding: 0 var(--hx-space-3, 0.75rem);
4149
- color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #64748b));
4294
+ color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
4150
4295
  cursor: pointer;
4151
4296
  height: 100%;
4152
4297
  min-height: var(--hx-size-10, 2.5rem);
4153
4298
  flex-shrink: 0;
4154
4299
  border-inline-start: var(--hx-border-width-thin, 1px) solid
4155
- var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
4300
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
4156
4301
  }
4157
4302
  .field__toggle:focus-visible {
4158
4303
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -4168,7 +4313,7 @@
4168
4313
  z-index: var(--hx-z-index-dropdown, 1000);
4169
4314
  background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
4170
4315
  border: var(--hx-border-width-thin, 1px) solid
4171
- var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
4316
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
4172
4317
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
4173
4318
  box-shadow: var(
4174
4319
  --hx-time-picker-listbox-shadow,
@@ -4201,23 +4346,29 @@
4201
4346
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
4202
4347
  font-size: var(--hx-font-size-md, 1rem);
4203
4348
  font-family: inherit;
4204
- color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #1e293b));
4349
+ color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
4205
4350
  cursor: pointer;
4206
4351
  transition: background-color var(--hx-transition-fast, 150ms ease);
4207
4352
  line-height: var(--hx-line-height-normal, 1.5);
4208
4353
  }
4209
4354
  .field__option:hover,
4210
4355
  .field__option--active {
4211
- background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
4212
- color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
4356
+ background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
4357
+ color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));
4213
4358
  }
4214
4359
  .field__option--selected {
4215
- background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
4216
- color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
4360
+ background-color: var(
4361
+ --hx-time-picker-option-selected-bg,
4362
+ var(--hx-color-primary-100, #dbf0f0)
4363
+ );
4364
+ color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));
4217
4365
  font-weight: var(--hx-font-weight-medium, 500);
4218
4366
  }
4219
4367
  .field__option--selected.field__option--active {
4220
- background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
4368
+ background-color: var(
4369
+ --hx-time-picker-option-selected-bg,
4370
+ var(--hx-color-primary-100, #dbf0f0)
4371
+ );
4221
4372
  }
4222
4373
  @media (prefers-reduced-motion: reduce) {
4223
4374
  .field__combobox,
@@ -4231,10 +4382,10 @@
4231
4382
  line-height: var(--hx-line-height-normal, 1.5);
4232
4383
  }
4233
4384
  .field__help-text {
4234
- color: var(--hx-color-text-muted, #64748b);
4385
+ color: var(--hx-color-text-muted, #4a5362);
4235
4386
  }
4236
4387
  .field__error {
4237
- color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
4388
+ color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
4238
4389
  }
4239
4390
  @media (forced-colors: active) {
4240
4391
  .field__combobox {
@@ -4296,7 +4447,7 @@
4296
4447
  gap: var(--hx-space-2, 0.5rem);
4297
4448
  border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
4298
4449
  border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
4299
- background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
4450
+ background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
4300
4451
  color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
4301
4452
  font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
4302
4453
  font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -4317,7 +4468,7 @@
4317
4468
  outline: var(--hx-focus-ring-width, 2px) solid
4318
4469
  var(
4319
4470
  --hx-toggle-button-focus-ring-color,
4320
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
4471
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
4321
4472
  );
4322
4473
  outline-offset: var(--hx-focus-ring-offset, 2px);
4323
4474
  }
@@ -4356,49 +4507,55 @@
4356
4507
  /* ─── Style Variants ─── */
4357
4508
 
4358
4509
  .button--primary {
4359
- --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
4510
+ --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
4360
4511
  --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
4361
4512
  --hx-toggle-button-border-color: transparent;
4362
4513
  }
4363
4514
 
4515
+ /*
4516
+ * secondary/ghost paint primary text on the surface (white). primary-500
4517
+ * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to
4518
+ * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500
4519
+ * for the brand affordance (3:1 non-text contrast still met).
4520
+ */
4364
4521
  .button--secondary {
4365
4522
  --hx-toggle-button-bg: transparent;
4366
- --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
4367
- --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
4523
+ --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
4524
+ --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
4368
4525
  }
4369
4526
 
4370
4527
  .button--secondary:hover {
4371
- --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
4528
+ --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);
4372
4529
  }
4373
4530
 
4374
4531
  .button--tertiary {
4375
- --hx-toggle-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
4376
- --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
4532
+ --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);
4533
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
4377
4534
  --hx-toggle-button-border-color: transparent;
4378
4535
  }
4379
4536
 
4380
4537
  .button--tertiary:hover {
4381
- --hx-toggle-button-bg: var(--hx-color-surface-raised, #e2e8f0);
4538
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
4382
4539
  }
4383
4540
 
4384
4541
  .button--ghost {
4385
4542
  --hx-toggle-button-bg: transparent;
4386
- --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
4543
+ --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
4387
4544
  --hx-toggle-button-border-color: transparent;
4388
4545
  }
4389
4546
 
4390
4547
  .button--ghost:hover {
4391
- --hx-toggle-button-bg: var(--hx-color-surface-raised, #f1f5f9);
4548
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
4392
4549
  }
4393
4550
 
4394
4551
  .button--outline {
4395
4552
  --hx-toggle-button-bg: transparent;
4396
- --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
4397
- --hx-toggle-button-border-color: var(--hx-color-border-strong, #cbd5e1);
4553
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
4554
+ --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);
4398
4555
  }
4399
4556
 
4400
4557
  .button--outline:hover {
4401
- --hx-toggle-button-bg: var(--hx-color-surface-raised, #f8fafc);
4558
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
4402
4559
  }
4403
4560
 
4404
4561
  /* ─── Pressed State ─── */
@@ -4406,12 +4563,19 @@
4406
4563
  /*
4407
4564
  * Primary: already uses solid primary bg; pressed deepens to primary-700
4408
4565
  * to give clear visual feedback without introducing a new color.
4566
+ *
4567
+ * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)
4568
+ * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill
4569
+ * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast
4570
+ * precedent (commit 300e21ab0) and hx-button hover treatment.
4571
+ * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —
4572
+ * leave it alone.
4409
4573
  */
4410
4574
  .button--primary.button--pressed {
4411
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
4575
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));
4412
4576
  --hx-toggle-button-color: var(
4413
4577
  --hx-toggle-button-pressed-color,
4414
- var(--hx-color-text-on-primary, #ffffff)
4578
+ var(--hx-color-neutral-0, #ffffff)
4415
4579
  );
4416
4580
  --hx-toggle-button-border-color: transparent;
4417
4581
  }
@@ -4421,31 +4585,31 @@
4421
4585
  * so the state change is immediately legible.
4422
4586
  */
4423
4587
  .button--secondary.button--pressed {
4424
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
4588
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
4425
4589
  --hx-toggle-button-color: var(
4426
4590
  --hx-toggle-button-pressed-color,
4427
4591
  var(--hx-color-text-on-primary, #ffffff)
4428
4592
  );
4429
- --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
4593
+ --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
4430
4594
  }
4431
4595
 
4432
4596
  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
4433
4597
  .button--tertiary.button--pressed {
4434
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
4598
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
4435
4599
  --hx-toggle-button-color: var(
4436
4600
  --hx-toggle-button-pressed-color,
4437
- var(--hx-color-primary-700, #1e40af)
4601
+ var(--hx-color-primary-700, #0f6363)
4438
4602
  );
4439
- --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
4440
- box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
4603
+ --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);
4604
+ box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);
4441
4605
  }
4442
4606
 
4443
4607
  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
4444
4608
  .button--ghost.button--pressed {
4445
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
4609
+ --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
4446
4610
  --hx-toggle-button-color: var(
4447
4611
  --hx-toggle-button-pressed-color,
4448
- var(--hx-color-primary-700, #1e40af)
4612
+ var(--hx-color-primary-700, #0f6363)
4449
4613
  );
4450
4614
  --hx-toggle-button-border-color: transparent;
4451
4615
  }
@@ -4454,14 +4618,14 @@
4454
4618
  .button--outline.button--pressed {
4455
4619
  --hx-toggle-button-bg: var(
4456
4620
  --hx-toggle-button-pressed-bg,
4457
- var(--hx-color-surface-sunken, #f1f5f9)
4621
+ var(--hx-color-surface-sunken, #ebeee9)
4458
4622
  );
4459
4623
  --hx-toggle-button-color: var(
4460
4624
  --hx-toggle-button-pressed-color,
4461
- var(--hx-color-text-primary, #0f172a)
4625
+ var(--hx-color-text-primary, #0d1825)
4462
4626
  );
4463
- --hx-toggle-button-border-color: var(--hx-color-text-muted, #64748b);
4464
- box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
4627
+ --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
4628
+ box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
4465
4629
  }
4466
4630
 
4467
4631
  /* ─── Disabled ─── */