@helixui/library 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (608) hide show
  1. package/custom-elements.json +6597 -366
  2. package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
  3. package/dist/components/hx-accordion/hx-accordion.d.ts +3 -0
  4. package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
  5. package/dist/components/hx-accordion/index.js +1 -1
  6. package/dist/components/hx-action-bar/hx-action-bar.d.ts +14 -0
  7. package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
  8. package/dist/components/hx-action-bar/index.js +1 -1
  9. package/dist/components/hx-alert/hx-alert.d.ts +36 -0
  10. package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
  11. package/dist/components/hx-alert/hx-alert.styles.d.ts +12 -0
  12. package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
  13. package/dist/components/hx-alert/index.js +1 -1
  14. package/dist/components/hx-avatar/hx-avatar.d.ts +17 -0
  15. package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
  16. package/dist/components/hx-avatar/index.js +1 -1
  17. package/dist/components/hx-badge/hx-badge.d.ts +35 -0
  18. package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
  19. package/dist/components/hx-badge/index.js +1 -1
  20. package/dist/components/hx-banner/hx-banner.d.ts +34 -0
  21. package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
  22. package/dist/components/hx-banner/hx-banner.styles.d.ts +12 -0
  23. package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
  24. package/dist/components/hx-banner/index.js +1 -1
  25. package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
  26. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +3 -0
  27. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
  28. package/dist/components/hx-breadcrumb/index.js +1 -1
  29. package/dist/components/hx-button/hx-button.d.ts +42 -0
  30. package/dist/components/hx-button/hx-button.d.ts.map +1 -1
  31. package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
  32. package/dist/components/hx-button/index.js +1 -1
  33. package/dist/components/hx-button-group/hx-button-group.d.ts +2 -0
  34. package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
  35. package/dist/components/hx-button-group/hx-button-group.styles.d.ts.map +1 -1
  36. package/dist/components/hx-button-group/index.js +1 -1
  37. package/dist/components/hx-card/hx-card.d.ts +28 -0
  38. package/dist/components/hx-card/hx-card.d.ts.map +1 -1
  39. package/dist/components/hx-card/hx-card.styles.d.ts +9 -0
  40. package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
  41. package/dist/components/hx-card/index.js +1 -1
  42. package/dist/components/hx-carousel/hx-carousel.d.ts +25 -0
  43. package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
  44. package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
  45. package/dist/components/hx-carousel/index.js +1 -1
  46. package/dist/components/hx-checkbox/hx-checkbox.d.ts +38 -7
  47. package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
  48. package/dist/components/hx-checkbox/index.js +1 -1
  49. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +16 -2
  50. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
  51. package/dist/components/hx-checkbox-group/index.js +1 -1
  52. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +37 -0
  53. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
  54. package/dist/components/hx-clinical-status/index.js +1 -1
  55. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts +35 -0
  56. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
  57. package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
  58. package/dist/components/hx-code-snippet/index.js +1 -1
  59. package/dist/components/hx-color-picker/hx-color-picker.d.ts +29 -0
  60. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  61. package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
  62. package/dist/components/hx-color-picker/index.js +1 -1
  63. package/dist/components/hx-combobox/hx-combobox.d.ts +49 -0
  64. package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
  65. package/dist/components/hx-combobox/index.js +1 -1
  66. package/dist/components/hx-container/hx-container.d.ts +5 -0
  67. package/dist/components/hx-container/hx-container.d.ts.map +1 -1
  68. package/dist/components/hx-copy-button/hx-copy-button.d.ts +24 -0
  69. package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
  70. package/dist/components/hx-copy-button/hx-copy-button.styles.d.ts.map +1 -1
  71. package/dist/components/hx-copy-button/index.js +1 -1
  72. package/dist/components/hx-counter/hx-counter.d.ts +7 -0
  73. package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
  74. package/dist/components/hx-counter/index.js +1 -1
  75. package/dist/components/hx-data-table/hx-data-table.d.ts +29 -0
  76. package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
  77. package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
  78. package/dist/components/hx-data-table/index.js +1 -1
  79. package/dist/components/hx-date-picker/hx-date-picker.d.ts +44 -0
  80. package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
  81. package/dist/components/hx-date-picker/index.js +1 -1
  82. package/dist/components/hx-dialog/hx-dialog.d.ts +31 -0
  83. package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
  84. package/dist/components/hx-dialog/hx-dialog.styles.d.ts +10 -0
  85. package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
  86. package/dist/components/hx-dialog/index.js +1 -1
  87. package/dist/components/hx-divider/hx-divider.d.ts +9 -0
  88. package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
  89. package/dist/components/hx-divider/index.js +1 -1
  90. package/dist/components/hx-drawer/hx-drawer.d.ts +30 -0
  91. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  92. package/dist/components/hx-drawer/hx-drawer.styles.d.ts +10 -0
  93. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  94. package/dist/components/hx-drawer/index.js +1 -1
  95. package/dist/components/hx-dropdown/hx-dropdown.d.ts +6 -0
  96. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  97. package/dist/components/hx-dropdown/index.js +1 -1
  98. package/dist/components/hx-field/hx-field.d.ts +15 -0
  99. package/dist/components/hx-field/hx-field.d.ts.map +1 -1
  100. package/dist/components/hx-field/index.js +1 -1
  101. package/dist/components/hx-field-label/hx-field-label.d.ts +11 -0
  102. package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
  103. package/dist/components/hx-field-label/index.js +1 -1
  104. package/dist/components/hx-file-upload/hx-file-upload.d.ts +35 -0
  105. package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
  106. package/dist/components/hx-file-upload/index.js +1 -1
  107. package/dist/components/hx-form/index.js +1 -1
  108. package/dist/components/hx-grid/hx-grid.d.ts +5 -0
  109. package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
  110. package/dist/components/hx-help-text/hx-help-text.d.ts +8 -0
  111. package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
  112. package/dist/components/hx-help-text/index.js +1 -1
  113. package/dist/components/hx-icon/hx-icon.d.ts +5 -0
  114. package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
  115. package/dist/components/hx-icon/index.js +1 -1
  116. package/dist/components/hx-icon-button/hx-icon-button.d.ts +27 -0
  117. package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
  118. package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
  119. package/dist/components/hx-icon-button/index.js +1 -1
  120. package/dist/components/hx-image/hx-image.d.ts +4 -0
  121. package/dist/components/hx-image/hx-image.d.ts.map +1 -1
  122. package/dist/components/hx-image/index.js +1 -1
  123. package/dist/components/hx-link/hx-link.d.ts +15 -0
  124. package/dist/components/hx-link/hx-link.d.ts.map +1 -1
  125. package/dist/components/hx-link/index.js +1 -1
  126. package/dist/components/hx-list/hx-list-item.d.ts.map +1 -1
  127. package/dist/components/hx-list/hx-list.d.ts +3 -0
  128. package/dist/components/hx-list/hx-list.d.ts.map +1 -1
  129. package/dist/components/hx-list/index.js +1 -1
  130. package/dist/components/hx-menu/hx-menu-divider.d.ts.map +1 -1
  131. package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
  132. package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
  133. package/dist/components/hx-menu/hx-menu.d.ts +6 -0
  134. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  135. package/dist/components/hx-menu/index.js +1 -1
  136. package/dist/components/hx-meter/hx-meter.d.ts +23 -0
  137. package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
  138. package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
  139. package/dist/components/hx-meter/index.js +1 -1
  140. package/dist/components/hx-nav/hx-nav.d.ts +29 -0
  141. package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
  142. package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
  143. package/dist/components/hx-nav/index.js +1 -1
  144. package/dist/components/hx-number-input/hx-number-input.d.ts +34 -0
  145. package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
  146. package/dist/components/hx-number-input/index.js +1 -1
  147. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +26 -0
  148. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
  149. package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
  150. package/dist/components/hx-overflow-menu/index.js +1 -1
  151. package/dist/components/hx-pagination/hx-pagination.d.ts +21 -0
  152. package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
  153. package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
  154. package/dist/components/hx-pagination/index.js +1 -1
  155. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts +23 -0
  156. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
  157. package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
  158. package/dist/components/hx-patient-banner/index.js +1 -1
  159. package/dist/components/hx-phi-field/hx-phi-field.d.ts +19 -5
  160. package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
  161. package/dist/components/hx-phi-field/index.js +1 -1
  162. package/dist/components/hx-popover/hx-popover.d.ts +15 -0
  163. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  164. package/dist/components/hx-popover/hx-popover.styles.d.ts +9 -0
  165. package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
  166. package/dist/components/hx-popover/index.js +1 -1
  167. package/dist/components/hx-popup/hx-popup.d.ts +1 -0
  168. package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
  169. package/dist/components/hx-popup/hx-popup.styles.d.ts +9 -0
  170. package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
  171. package/dist/components/hx-popup/index.js +1 -1
  172. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +17 -0
  173. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
  174. package/dist/components/hx-progress-bar/index.js +1 -1
  175. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts +15 -0
  176. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
  177. package/dist/components/hx-progress-ring/index.js +1 -1
  178. package/dist/components/hx-prose/hx-prose.d.ts +2 -0
  179. package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
  180. package/dist/components/hx-prose/index.js +1 -1
  181. package/dist/components/hx-radio-group/hx-radio-group.d.ts +17 -3
  182. package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
  183. package/dist/components/hx-radio-group/hx-radio.d.ts +5 -5
  184. package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
  185. package/dist/components/hx-radio-group/index.js +1 -1
  186. package/dist/components/hx-rating/hx-rating.d.ts +13 -0
  187. package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
  188. package/dist/components/hx-rating/index.js +1 -1
  189. package/dist/components/hx-select/hx-select.d.ts +43 -0
  190. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  191. package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
  192. package/dist/components/hx-select/index.js +1 -1
  193. package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
  194. package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
  195. package/dist/components/hx-side-nav/hx-side-nav.d.ts +19 -0
  196. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  197. package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
  198. package/dist/components/hx-side-nav/index.js +1 -1
  199. package/dist/components/hx-skeleton/hx-skeleton.d.ts +5 -0
  200. package/dist/components/hx-skeleton/hx-skeleton.d.ts.map +1 -1
  201. package/dist/components/hx-skeleton/index.js +1 -1
  202. package/dist/components/hx-slider/hx-slider.d.ts +38 -0
  203. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  204. package/dist/components/hx-slider/hx-slider.styles.d.ts.map +1 -1
  205. package/dist/components/hx-slider/index.js +1 -1
  206. package/dist/components/hx-spinner/hx-spinner.d.ts +10 -0
  207. package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
  208. package/dist/components/hx-spinner/index.js +1 -1
  209. package/dist/components/hx-split-button/hx-split-button.d.ts +39 -0
  210. package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
  211. package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
  212. package/dist/components/hx-split-button/index.js +1 -1
  213. package/dist/components/hx-split-panel/hx-split-panel.d.ts +12 -0
  214. package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
  215. package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
  216. package/dist/components/hx-split-panel/index.js +1 -1
  217. package/dist/components/hx-stack/hx-stack.d.ts +5 -0
  218. package/dist/components/hx-stack/hx-stack.d.ts.map +1 -1
  219. package/dist/components/hx-stat/hx-stat.d.ts +24 -0
  220. package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
  221. package/dist/components/hx-stat/index.js +1 -1
  222. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +13 -0
  223. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
  224. package/dist/components/hx-status-indicator/index.js +1 -1
  225. package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
  226. package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
  227. package/dist/components/hx-steps/hx-steps.d.ts +15 -0
  228. package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
  229. package/dist/components/hx-steps/index.js +1 -1
  230. package/dist/components/hx-structured-list/hx-structured-list.d.ts +7 -0
  231. package/dist/components/hx-structured-list/hx-structured-list.d.ts.map +1 -1
  232. package/dist/components/hx-structured-list/index.js +1 -1
  233. package/dist/components/hx-switch/hx-switch.d.ts +42 -0
  234. package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
  235. package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
  236. package/dist/components/hx-switch/index.js +1 -1
  237. package/dist/components/hx-table/hx-table.d.ts +20 -6
  238. package/dist/components/hx-table/hx-table.d.ts.map +1 -1
  239. package/dist/components/hx-table/hx-td.d.ts +1 -1
  240. package/dist/components/hx-table/index.js +1 -1
  241. package/dist/components/hx-tabs/hx-tab-panel.d.ts +2 -2
  242. package/dist/components/hx-tabs/hx-tab-panel.d.ts.map +1 -1
  243. package/dist/components/hx-tabs/hx-tab.d.ts +6 -6
  244. package/dist/components/hx-tabs/hx-tab.d.ts.map +1 -1
  245. package/dist/components/hx-tabs/hx-tabs.d.ts +12 -8
  246. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  247. package/dist/components/hx-tabs/index.js +1 -1
  248. package/dist/components/hx-tag/hx-tag.d.ts +36 -0
  249. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  250. package/dist/components/hx-tag/index.js +1 -1
  251. package/dist/components/hx-text/hx-text.d.ts +22 -0
  252. package/dist/components/hx-text/hx-text.d.ts.map +1 -1
  253. package/dist/components/hx-text/hx-text.styles.d.ts.map +1 -1
  254. package/dist/components/hx-text/index.js +1 -1
  255. package/dist/components/hx-text-input/hx-text-input.d.ts +30 -0
  256. package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
  257. package/dist/components/hx-text-input/hx-text-input.styles.d.ts +12 -0
  258. package/dist/components/hx-text-input/hx-text-input.styles.d.ts.map +1 -1
  259. package/dist/components/hx-text-input/index.js +1 -1
  260. package/dist/components/hx-textarea/hx-textarea.d.ts +27 -0
  261. package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
  262. package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
  263. package/dist/components/hx-textarea/index.js +1 -1
  264. package/dist/components/hx-theme/hx-theme.d.ts +3 -0
  265. package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
  266. package/dist/components/hx-theme/index.js +1 -1
  267. package/dist/components/hx-time-picker/hx-time-picker.d.ts +32 -0
  268. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  269. package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
  270. package/dist/components/hx-time-picker/index.js +1 -1
  271. package/dist/components/hx-toast/hx-toast.d.ts +24 -0
  272. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  273. package/dist/components/hx-toast/hx-toast.styles.d.ts +10 -0
  274. package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
  275. package/dist/components/hx-toast/index.js +1 -1
  276. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +35 -0
  277. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
  278. package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
  279. package/dist/components/hx-toggle-button/index.js +1 -1
  280. package/dist/components/hx-tooltip/hx-tooltip.d.ts +13 -0
  281. package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
  282. package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts +8 -0
  283. package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts.map +1 -1
  284. package/dist/components/hx-tooltip/index.js +1 -1
  285. package/dist/components/hx-top-nav/hx-top-nav.d.ts +21 -0
  286. package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
  287. package/dist/components/hx-top-nav/hx-top-nav.styles.d.ts.map +1 -1
  288. package/dist/components/hx-top-nav/index.js +1 -1
  289. package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
  290. package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
  291. package/dist/components/hx-tree-view/hx-tree-view.d.ts +6 -0
  292. package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
  293. package/dist/components/hx-tree-view/index.js +1 -1
  294. package/dist/css/helix-all.css +1173 -828
  295. package/dist/css/helix-core.css +215 -154
  296. package/dist/css/helix-data.css +58 -45
  297. package/dist/css/helix-feedback.css +119 -92
  298. package/dist/css/helix-forms.css +502 -332
  299. package/dist/css/helix-layout.css +9 -6
  300. package/dist/css/helix-media.css +13 -9
  301. package/dist/css/helix-navigation.css +86 -59
  302. package/dist/css/helix-overlay.css +65 -50
  303. package/dist/css/helix-tokens.css +113 -101
  304. package/dist/css/helix-utility.css +57 -40
  305. package/dist/css/hx-action-bar.css +5 -5
  306. package/dist/css/hx-alert.css +27 -23
  307. package/dist/css/hx-avatar.css +3 -3
  308. package/dist/css/hx-badge.css +22 -22
  309. package/dist/css/hx-banner.css +31 -24
  310. package/dist/css/hx-button-group.css +31 -14
  311. package/dist/css/hx-button.css +38 -21
  312. package/dist/css/hx-card.css +26 -12
  313. package/dist/css/hx-carousel.css +13 -9
  314. package/dist/css/hx-checkbox-group.css +5 -5
  315. package/dist/css/hx-checkbox.css +19 -19
  316. package/dist/css/hx-clinical-status.css +28 -28
  317. package/dist/css/hx-code-snippet.css +24 -18
  318. package/dist/css/hx-color-picker.css +30 -13
  319. package/dist/css/hx-combobox.css +28 -28
  320. package/dist/css/hx-copy-button.css +6 -3
  321. package/dist/css/hx-counter.css +1 -1
  322. package/dist/css/hx-data-table.css +22 -15
  323. package/dist/css/hx-date-picker.css +34 -34
  324. package/dist/css/hx-dialog.css +31 -24
  325. package/dist/css/hx-divider.css +2 -2
  326. package/dist/css/hx-drawer.css +18 -15
  327. package/dist/css/hx-dropdown.css +2 -2
  328. package/dist/css/hx-field-label.css +3 -3
  329. package/dist/css/hx-field.css +6 -6
  330. package/dist/css/hx-file-upload.css +18 -18
  331. package/dist/css/hx-help-text.css +5 -5
  332. package/dist/css/hx-icon-button.css +49 -38
  333. package/dist/css/hx-image.css +3 -3
  334. package/dist/css/hx-link.css +9 -9
  335. package/dist/css/hx-list.css +1 -1
  336. package/dist/css/hx-menu.css +2 -2
  337. package/dist/css/hx-meter.css +11 -10
  338. package/dist/css/hx-nav.css +17 -11
  339. package/dist/css/hx-number-input.css +18 -18
  340. package/dist/css/hx-overflow-menu.css +18 -9
  341. package/dist/css/hx-pagination.css +21 -15
  342. package/dist/css/hx-patient-banner.css +17 -9
  343. package/dist/css/hx-phi-field.css +4 -4
  344. package/dist/css/hx-popover.css +10 -6
  345. package/dist/css/hx-progress-bar.css +7 -7
  346. package/dist/css/hx-progress-ring.css +6 -6
  347. package/dist/css/hx-radio-group.css +5 -5
  348. package/dist/css/hx-rating.css +5 -5
  349. package/dist/css/hx-select.css +17 -14
  350. package/dist/css/hx-side-nav.css +13 -10
  351. package/dist/css/hx-skeleton.css +1 -1
  352. package/dist/css/hx-slider.css +15 -12
  353. package/dist/css/hx-spinner.css +4 -4
  354. package/dist/css/hx-split-button.css +45 -31
  355. package/dist/css/hx-split-panel.css +9 -6
  356. package/dist/css/hx-stat.css +8 -8
  357. package/dist/css/hx-status-indicator.css +7 -7
  358. package/dist/css/hx-structured-list.css +5 -5
  359. package/dist/css/hx-switch.css +16 -8
  360. package/dist/css/hx-table.css +6 -6
  361. package/dist/css/hx-tabs.css +3 -3
  362. package/dist/css/hx-tag.css +18 -18
  363. package/dist/css/hx-text-input.css +139 -61
  364. package/dist/css/hx-text.css +9 -7
  365. package/dist/css/hx-textarea.css +66 -27
  366. package/dist/css/hx-time-picker.css +27 -21
  367. package/dist/css/hx-toast.css +22 -7
  368. package/dist/css/hx-toggle-button.css +46 -30
  369. package/dist/css/hx-tooltip.css +4 -3
  370. package/dist/css/hx-top-nav.css +11 -8
  371. package/dist/css/hx-tree-view.css +1 -1
  372. package/dist/css/index.css +1 -1
  373. package/dist/css/manifest.json +280 -194
  374. package/dist/index.js +75 -75
  375. package/dist/shared/forced-colors-CTEDFRGa.js +117 -0
  376. package/dist/shared/forced-colors-CTEDFRGa.js.map +1 -0
  377. package/dist/shared/{hx-accordion-Wt52OOZD.js → hx-accordion-cnKg4_la.js} +31 -30
  378. package/dist/shared/hx-accordion-cnKg4_la.js.map +1 -0
  379. package/dist/shared/{hx-action-bar-BKMADbHj.js → hx-action-bar-CitgcpGv.js} +38 -37
  380. package/dist/shared/hx-action-bar-CitgcpGv.js.map +1 -0
  381. package/dist/shared/{hx-alert-D7n94HwI.js → hx-alert-BZH8iHQf.js} +36 -31
  382. package/dist/shared/hx-alert-BZH8iHQf.js.map +1 -0
  383. package/dist/shared/{hx-avatar-iLYzu8MJ.js → hx-avatar-C9hOmlAb.js} +19 -18
  384. package/dist/shared/hx-avatar-C9hOmlAb.js.map +1 -0
  385. package/dist/shared/{hx-badge-CVCmMPyW.js → hx-badge-CQXgOXJM.js} +65 -64
  386. package/dist/shared/hx-badge-CQXgOXJM.js.map +1 -0
  387. package/dist/shared/{hx-banner-C_He7Tr4.js → hx-banner-DT7Zn9Bo.js} +43 -35
  388. package/dist/shared/hx-banner-DT7Zn9Bo.js.map +1 -0
  389. package/dist/shared/{hx-breadcrumb-item-CldCwD1d.js → hx-breadcrumb-item-COeYcB2x.js} +24 -23
  390. package/dist/shared/hx-breadcrumb-item-COeYcB2x.js.map +1 -0
  391. package/dist/shared/{hx-button-group-BJOGWoMa.js → hx-button-group-BI-QBqmO.js} +45 -27
  392. package/dist/shared/hx-button-group-BI-QBqmO.js.map +1 -0
  393. package/dist/shared/{hx-button-Ddl-T6T-.js → hx-button-modUSOpY.js} +50 -32
  394. package/dist/shared/hx-button-modUSOpY.js.map +1 -0
  395. package/dist/shared/{hx-card-ycveujjL.js → hx-card-CU1QnjNb.js} +54 -39
  396. package/dist/shared/hx-card-CU1QnjNb.js.map +1 -0
  397. package/dist/shared/{hx-carousel-item-D_dCv61-.js → hx-carousel-item-BaE4hpLl.js} +38 -33
  398. package/dist/shared/hx-carousel-item-BaE4hpLl.js.map +1 -0
  399. package/dist/shared/{hx-checkbox-DkkoWoye.js → hx-checkbox-C46TyXhM.js} +42 -41
  400. package/dist/shared/hx-checkbox-C46TyXhM.js.map +1 -0
  401. package/dist/shared/{hx-checkbox-group-C3poJ-Zw.js → hx-checkbox-group-C9n315Ju.js} +20 -19
  402. package/dist/shared/hx-checkbox-group-C9n315Ju.js.map +1 -0
  403. package/dist/shared/{hx-clinical-status-BS5lcddT.js → hx-clinical-status-BmSjfSEN.js} +55 -54
  404. package/dist/shared/hx-clinical-status-BmSjfSEN.js.map +1 -0
  405. package/dist/shared/{hx-code-snippet-B7wUKzyb.js → hx-code-snippet-CJ0FbQYG.js} +39 -32
  406. package/dist/shared/hx-code-snippet-CJ0FbQYG.js.map +1 -0
  407. package/dist/shared/{hx-color-picker-DBaKTVLr.js → hx-color-picker-DiDLZyvK.js} +74 -56
  408. package/dist/shared/hx-color-picker-DiDLZyvK.js.map +1 -0
  409. package/dist/shared/{hx-combobox-BmgYT7Ar.js → hx-combobox-DaA5dBC4.js} +43 -42
  410. package/dist/shared/hx-combobox-DaA5dBC4.js.map +1 -0
  411. package/dist/shared/hx-container-DVI7sxfX.js.map +1 -1
  412. package/dist/shared/{hx-copy-button-8deNUdwP.js → hx-copy-button-sUVuikyH.js} +23 -19
  413. package/dist/shared/hx-copy-button-sUVuikyH.js.map +1 -0
  414. package/dist/shared/{hx-counter-CKfl_g8K.js → hx-counter-0zYapFhf.js} +10 -9
  415. package/dist/shared/hx-counter-0zYapFhf.js.map +1 -0
  416. package/dist/shared/{hx-data-table-B6h0RPn0.js → hx-data-table-Cq3t86Ic.js} +55 -47
  417. package/dist/shared/hx-data-table-Cq3t86Ic.js.map +1 -0
  418. package/dist/shared/{hx-date-picker-Dq2Nb68_.js → hx-date-picker-DMqRQNSB.js} +45 -44
  419. package/dist/shared/hx-date-picker-DMqRQNSB.js.map +1 -0
  420. package/dist/shared/{hx-dialog-CvIlY0Tc.js → hx-dialog-eIS8tcDm.js} +68 -60
  421. package/dist/shared/hx-dialog-eIS8tcDm.js.map +1 -0
  422. package/dist/shared/{hx-divider-DwpOrzMW.js → hx-divider-CYfcUjcr.js} +18 -17
  423. package/dist/shared/hx-divider-CYfcUjcr.js.map +1 -0
  424. package/dist/shared/{hx-drawer-Cx2ZJhBe.js → hx-drawer-DDhDz7RI.js} +31 -27
  425. package/dist/shared/hx-drawer-DDhDz7RI.js.map +1 -0
  426. package/dist/shared/{hx-dropdown-BjDrPUq5.js → hx-dropdown-LyaRc8Rf.js} +16 -15
  427. package/dist/shared/hx-dropdown-LyaRc8Rf.js.map +1 -0
  428. package/dist/shared/{hx-field-Dp3qQMut.js → hx-field-B3Qo8OLS.js} +15 -15
  429. package/dist/shared/hx-field-B3Qo8OLS.js.map +1 -0
  430. package/dist/shared/{hx-field-label-BC8QViXv.js → hx-field-label-BVRyyKeh.js} +8 -7
  431. package/dist/shared/hx-field-label-BVRyyKeh.js.map +1 -0
  432. package/dist/shared/{hx-file-upload-B6Yl1u0i.js → hx-file-upload-zTDbjsRw.js} +42 -41
  433. package/dist/shared/hx-file-upload-zTDbjsRw.js.map +1 -0
  434. package/dist/shared/hx-form-CkChEATa.js +257 -0
  435. package/dist/shared/hx-form-CkChEATa.js.map +1 -0
  436. package/dist/shared/hx-grid-CXZf3jeK.js.map +1 -1
  437. package/dist/shared/{hx-help-text-D7eytSim.js → hx-help-text-Xb2Yr8x2.js} +30 -29
  438. package/dist/shared/hx-help-text-Xb2Yr8x2.js.map +1 -0
  439. package/dist/shared/{hx-icon-button-BHneqPCU.js → hx-icon-button-BmV97nqz.js} +81 -69
  440. package/dist/shared/hx-icon-button-BmV97nqz.js.map +1 -0
  441. package/dist/shared/{hx-icon-CcyDPDYY.js → hx-icon-fuVm4-bk.js} +15 -14
  442. package/dist/shared/hx-icon-fuVm4-bk.js.map +1 -0
  443. package/dist/shared/{hx-image-2gt14zZd.js → hx-image-Ben_4yM5.js} +18 -17
  444. package/dist/shared/hx-image-Ben_4yM5.js.map +1 -0
  445. package/dist/shared/{hx-link-BESrWK8M.js → hx-link-DmiV-mPw.js} +21 -20
  446. package/dist/shared/hx-link-DmiV-mPw.js.map +1 -0
  447. package/dist/shared/{hx-list-_9qVv02L.js → hx-list-CkphGi9T.js} +22 -21
  448. package/dist/shared/hx-list-CkphGi9T.js.map +1 -0
  449. package/dist/shared/{hx-menu-divider-Ck-9Os1t.js → hx-menu-divider-j__TZjH2.js} +53 -49
  450. package/dist/shared/hx-menu-divider-j__TZjH2.js.map +1 -0
  451. package/dist/shared/{hx-meter-TbROk-dw.js → hx-meter-Cm7k_Ro8.js} +42 -40
  452. package/dist/shared/hx-meter-Cm7k_Ro8.js.map +1 -0
  453. package/dist/shared/{hx-nav-BcYDmjf7.js → hx-nav-LoyEKZQC.js} +30 -23
  454. package/dist/shared/hx-nav-LoyEKZQC.js.map +1 -0
  455. package/dist/shared/{hx-nav-item-pqPasRUm.js → hx-nav-item-D8xHLVOs.js} +89 -77
  456. package/dist/shared/hx-nav-item-D8xHLVOs.js.map +1 -0
  457. package/dist/shared/{hx-number-input-mOIZ3-46.js → hx-number-input-yUzFOSC1.js} +68 -67
  458. package/dist/shared/hx-number-input-yUzFOSC1.js.map +1 -0
  459. package/dist/shared/{hx-overflow-menu-Dprb9lnT.js → hx-overflow-menu-BmKyAp5D.js} +33 -23
  460. package/dist/shared/hx-overflow-menu-BmKyAp5D.js.map +1 -0
  461. package/dist/shared/{hx-pagination-AguTQjYC.js → hx-pagination-Dqw5dorC.js} +72 -65
  462. package/dist/shared/hx-pagination-Dqw5dorC.js.map +1 -0
  463. package/dist/shared/{hx-patient-banner-uE6gqLpT.js → hx-patient-banner-CkS-Lmj4.js} +29 -20
  464. package/dist/shared/hx-patient-banner-CkS-Lmj4.js.map +1 -0
  465. package/dist/shared/{hx-phi-field-BC_XowhC.js → hx-phi-field-Bf9TdtC1.js} +13 -12
  466. package/dist/shared/hx-phi-field-Bf9TdtC1.js.map +1 -0
  467. package/dist/shared/{hx-popover-B2_203ct.js → hx-popover-B93rTAfr.js} +29 -24
  468. package/dist/shared/hx-popover-B93rTAfr.js.map +1 -0
  469. package/dist/shared/{hx-popup-DZXpsJ1R.js → hx-popup-COUXXZ9X.js} +8 -7
  470. package/dist/shared/hx-popup-COUXXZ9X.js.map +1 -0
  471. package/dist/shared/{hx-progress-bar-KjEkEJLy.js → hx-progress-bar-Bn3JEPUf.js} +28 -27
  472. package/dist/shared/hx-progress-bar-Bn3JEPUf.js.map +1 -0
  473. package/dist/shared/{hx-progress-ring-3zMwvrwD.js → hx-progress-ring-TwHyXeEp.js} +15 -14
  474. package/dist/shared/hx-progress-ring-TwHyXeEp.js.map +1 -0
  475. package/dist/shared/{hx-prose-BCtK7YL6.js → hx-prose-BThYcASV.js} +12 -12
  476. package/dist/shared/{hx-prose-BCtK7YL6.js.map → hx-prose-BThYcASV.js.map} +1 -1
  477. package/dist/shared/{hx-radio-BBC5qZgE.js → hx-radio-N8xgDd_5.js} +38 -37
  478. package/dist/shared/hx-radio-N8xgDd_5.js.map +1 -0
  479. package/dist/shared/{hx-rating-C3E3ENJb.js → hx-rating-i2FL1WUN.js} +38 -37
  480. package/dist/shared/hx-rating-i2FL1WUN.js.map +1 -0
  481. package/dist/shared/{hx-select-CixTo7jp.js → hx-select-vgaBo1Ai.js} +63 -59
  482. package/dist/shared/hx-select-vgaBo1Ai.js.map +1 -0
  483. package/dist/shared/{hx-skeleton-LxkI0pxr.js → hx-skeleton-Cnieh5Uc.js} +14 -13
  484. package/dist/shared/hx-skeleton-Cnieh5Uc.js.map +1 -0
  485. package/dist/shared/{hx-slider-DFHuzF3N.js → hx-slider-ydBamYhd.js} +83 -79
  486. package/dist/shared/hx-slider-ydBamYhd.js.map +1 -0
  487. package/dist/shared/{hx-spinner-BKjuCdZB.js → hx-spinner-DL5AYr16.js} +18 -17
  488. package/dist/shared/hx-spinner-DL5AYr16.js.map +1 -0
  489. package/dist/shared/{hx-split-button-CGcJMmCG.js → hx-split-button-BeMsmS6N.js} +74 -59
  490. package/dist/shared/hx-split-button-BeMsmS6N.js.map +1 -0
  491. package/dist/shared/{hx-split-panel-C-1R10Mc.js → hx-split-panel-BVG1VWNT.js} +16 -12
  492. package/dist/shared/hx-split-panel-BVG1VWNT.js.map +1 -0
  493. package/dist/shared/hx-stack-DGfcOfWJ.js.map +1 -1
  494. package/dist/shared/{hx-stat-BTpykQAt.js → hx-stat-WOcNV1Ry.js} +16 -15
  495. package/dist/shared/hx-stat-WOcNV1Ry.js.map +1 -0
  496. package/dist/shared/{hx-status-indicator-X2QEWNFt.js → hx-status-indicator-BlQyen43.js} +17 -16
  497. package/dist/shared/hx-status-indicator-BlQyen43.js.map +1 -0
  498. package/dist/shared/{hx-step-CRNQlmSo.js → hx-step-DL3PbOzm.js} +63 -50
  499. package/dist/shared/hx-step-DL3PbOzm.js.map +1 -0
  500. package/dist/shared/{hx-structured-list-CqNbaEXg.js → hx-structured-list-m_-dMJbC.js} +18 -17
  501. package/dist/shared/hx-structured-list-m_-dMJbC.js.map +1 -0
  502. package/dist/shared/{hx-switch-DqOD9JR7.js → hx-switch-Dougzsgp.js} +29 -20
  503. package/dist/shared/hx-switch-Dougzsgp.js.map +1 -0
  504. package/dist/shared/{hx-tab-panel-BIzKfW5i.js → hx-tab-panel-CbkO9VKu.js} +45 -44
  505. package/dist/shared/hx-tab-panel-CbkO9VKu.js.map +1 -0
  506. package/dist/shared/{hx-tag-CgnrNnte.js → hx-tag-CNSmdyaK.js} +63 -62
  507. package/dist/shared/hx-tag-CNSmdyaK.js.map +1 -0
  508. package/dist/shared/{hx-td-Bra35cH4.js → hx-td-1zwTFLRw.js} +62 -61
  509. package/dist/shared/hx-td-1zwTFLRw.js.map +1 -0
  510. package/dist/shared/{hx-text-DMC2CPlL.js → hx-text-Bz_9fJ3J.js} +28 -25
  511. package/dist/shared/hx-text-Bz_9fJ3J.js.map +1 -0
  512. package/dist/shared/{hx-text-input--q0GH78x.js → hx-text-input-B-caO5fI.js} +159 -80
  513. package/dist/shared/hx-text-input-B-caO5fI.js.map +1 -0
  514. package/dist/shared/{hx-textarea-CK621vSL.js → hx-textarea-D9O4U8cb.js} +110 -70
  515. package/dist/shared/hx-textarea-D9O4U8cb.js.map +1 -0
  516. package/dist/shared/{hx-theme-DfEy-SJA.js → hx-theme-BiyQ7UUK.js} +46 -35
  517. package/dist/shared/hx-theme-BiyQ7UUK.js.map +1 -0
  518. package/dist/shared/{hx-time-picker-tPUfgElQ.js → hx-time-picker-m0z4nFB-.js} +59 -52
  519. package/dist/shared/hx-time-picker-m0z4nFB-.js.map +1 -0
  520. package/dist/shared/{hx-toggle-button-L-uBJr-a.js → hx-toggle-button-Dd8clXB4.js} +75 -58
  521. package/dist/shared/hx-toggle-button-Dd8clXB4.js.map +1 -0
  522. package/dist/shared/{hx-tooltip-B_zfKvwc.js → hx-tooltip-nYOv9OLu.js} +18 -16
  523. package/dist/shared/hx-tooltip-nYOv9OLu.js.map +1 -0
  524. package/dist/shared/{hx-top-nav-CATbRvIv.js → hx-top-nav-CchPYaiV.js} +36 -32
  525. package/dist/shared/hx-top-nav-CchPYaiV.js.map +1 -0
  526. package/dist/shared/{hx-tree-item-A45WCiBu.js → hx-tree-item-DtMC3DTa.js} +35 -28
  527. package/dist/shared/hx-tree-item-DtMC3DTa.js.map +1 -0
  528. package/dist/shared/{toast-factory-BPPnG3mM.js → toast-factory-DvDRAh0l.js} +77 -61
  529. package/dist/shared/toast-factory-DvDRAh0l.js.map +1 -0
  530. package/dist/styles/forced-colors.d.ts +60 -0
  531. package/dist/styles/forced-colors.d.ts.map +1 -0
  532. package/figma-inventory.json +8606 -591
  533. package/package.json +2 -2
  534. package/dist/shared/hx-accordion-Wt52OOZD.js.map +0 -1
  535. package/dist/shared/hx-action-bar-BKMADbHj.js.map +0 -1
  536. package/dist/shared/hx-alert-D7n94HwI.js.map +0 -1
  537. package/dist/shared/hx-avatar-iLYzu8MJ.js.map +0 -1
  538. package/dist/shared/hx-badge-CVCmMPyW.js.map +0 -1
  539. package/dist/shared/hx-banner-C_He7Tr4.js.map +0 -1
  540. package/dist/shared/hx-breadcrumb-item-CldCwD1d.js.map +0 -1
  541. package/dist/shared/hx-button-Ddl-T6T-.js.map +0 -1
  542. package/dist/shared/hx-button-group-BJOGWoMa.js.map +0 -1
  543. package/dist/shared/hx-card-ycveujjL.js.map +0 -1
  544. package/dist/shared/hx-carousel-item-D_dCv61-.js.map +0 -1
  545. package/dist/shared/hx-checkbox-DkkoWoye.js.map +0 -1
  546. package/dist/shared/hx-checkbox-group-C3poJ-Zw.js.map +0 -1
  547. package/dist/shared/hx-clinical-status-BS5lcddT.js.map +0 -1
  548. package/dist/shared/hx-code-snippet-B7wUKzyb.js.map +0 -1
  549. package/dist/shared/hx-color-picker-DBaKTVLr.js.map +0 -1
  550. package/dist/shared/hx-combobox-BmgYT7Ar.js.map +0 -1
  551. package/dist/shared/hx-copy-button-8deNUdwP.js.map +0 -1
  552. package/dist/shared/hx-counter-CKfl_g8K.js.map +0 -1
  553. package/dist/shared/hx-data-table-B6h0RPn0.js.map +0 -1
  554. package/dist/shared/hx-date-picker-Dq2Nb68_.js.map +0 -1
  555. package/dist/shared/hx-dialog-CvIlY0Tc.js.map +0 -1
  556. package/dist/shared/hx-divider-DwpOrzMW.js.map +0 -1
  557. package/dist/shared/hx-drawer-Cx2ZJhBe.js.map +0 -1
  558. package/dist/shared/hx-dropdown-BjDrPUq5.js.map +0 -1
  559. package/dist/shared/hx-field-Dp3qQMut.js.map +0 -1
  560. package/dist/shared/hx-field-label-BC8QViXv.js.map +0 -1
  561. package/dist/shared/hx-file-upload-B6Yl1u0i.js.map +0 -1
  562. package/dist/shared/hx-form-ButQFt9A.js +0 -257
  563. package/dist/shared/hx-form-ButQFt9A.js.map +0 -1
  564. package/dist/shared/hx-help-text-D7eytSim.js.map +0 -1
  565. package/dist/shared/hx-icon-CcyDPDYY.js.map +0 -1
  566. package/dist/shared/hx-icon-button-BHneqPCU.js.map +0 -1
  567. package/dist/shared/hx-image-2gt14zZd.js.map +0 -1
  568. package/dist/shared/hx-link-BESrWK8M.js.map +0 -1
  569. package/dist/shared/hx-list-_9qVv02L.js.map +0 -1
  570. package/dist/shared/hx-menu-divider-Ck-9Os1t.js.map +0 -1
  571. package/dist/shared/hx-meter-TbROk-dw.js.map +0 -1
  572. package/dist/shared/hx-nav-BcYDmjf7.js.map +0 -1
  573. package/dist/shared/hx-nav-item-pqPasRUm.js.map +0 -1
  574. package/dist/shared/hx-number-input-mOIZ3-46.js.map +0 -1
  575. package/dist/shared/hx-overflow-menu-Dprb9lnT.js.map +0 -1
  576. package/dist/shared/hx-pagination-AguTQjYC.js.map +0 -1
  577. package/dist/shared/hx-patient-banner-uE6gqLpT.js.map +0 -1
  578. package/dist/shared/hx-phi-field-BC_XowhC.js.map +0 -1
  579. package/dist/shared/hx-popover-B2_203ct.js.map +0 -1
  580. package/dist/shared/hx-popup-DZXpsJ1R.js.map +0 -1
  581. package/dist/shared/hx-progress-bar-KjEkEJLy.js.map +0 -1
  582. package/dist/shared/hx-progress-ring-3zMwvrwD.js.map +0 -1
  583. package/dist/shared/hx-radio-BBC5qZgE.js.map +0 -1
  584. package/dist/shared/hx-rating-C3E3ENJb.js.map +0 -1
  585. package/dist/shared/hx-select-CixTo7jp.js.map +0 -1
  586. package/dist/shared/hx-skeleton-LxkI0pxr.js.map +0 -1
  587. package/dist/shared/hx-slider-DFHuzF3N.js.map +0 -1
  588. package/dist/shared/hx-spinner-BKjuCdZB.js.map +0 -1
  589. package/dist/shared/hx-split-button-CGcJMmCG.js.map +0 -1
  590. package/dist/shared/hx-split-panel-C-1R10Mc.js.map +0 -1
  591. package/dist/shared/hx-stat-BTpykQAt.js.map +0 -1
  592. package/dist/shared/hx-status-indicator-X2QEWNFt.js.map +0 -1
  593. package/dist/shared/hx-step-CRNQlmSo.js.map +0 -1
  594. package/dist/shared/hx-structured-list-CqNbaEXg.js.map +0 -1
  595. package/dist/shared/hx-switch-DqOD9JR7.js.map +0 -1
  596. package/dist/shared/hx-tab-panel-BIzKfW5i.js.map +0 -1
  597. package/dist/shared/hx-tag-CgnrNnte.js.map +0 -1
  598. package/dist/shared/hx-td-Bra35cH4.js.map +0 -1
  599. package/dist/shared/hx-text-DMC2CPlL.js.map +0 -1
  600. package/dist/shared/hx-text-input--q0GH78x.js.map +0 -1
  601. package/dist/shared/hx-textarea-CK621vSL.js.map +0 -1
  602. package/dist/shared/hx-theme-DfEy-SJA.js.map +0 -1
  603. package/dist/shared/hx-time-picker-tPUfgElQ.js.map +0 -1
  604. package/dist/shared/hx-toggle-button-L-uBJr-a.js.map +0 -1
  605. package/dist/shared/hx-tooltip-B_zfKvwc.js.map +0 -1
  606. package/dist/shared/hx-top-nav-CATbRvIv.js.map +0 -1
  607. package/dist/shared/hx-tree-item-A45WCiBu.js.map +0 -1
  608. package/dist/shared/toast-factory-BPPnG3mM.js.map +0 -1
package/dist/css/helix-forms.css CHANGED
@@ -60,9 +60,9 @@
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-neutral-300, #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
- background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
65
+ background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
66
66
  transition:
67
67
  background-color var(--hx-transition-fast, 150ms ease),
68
68
  border-color var(--hx-transition-fast, 150ms ease),
@@ -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 ─── */
@@ -132,7 +132,7 @@
132
132
  width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
133
133
  height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
134
134
  fill: none;
135
- stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
135
+ stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
136
136
  stroke-width: 2.5;
137
137
  stroke-linecap: round;
138
138
  stroke-linejoin: round;
@@ -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-neutral-700, #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-neutral-500, #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)
@@ -319,14 +319,14 @@
319
319
  gap: var(--hx-space-1);
320
320
  font-size: var(--hx-font-size-sm);
321
321
  font-weight: var(--hx-font-weight-medium);
322
- color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));
322
+ color: var(--hx-checkbox-group-label-color, var(--hx-color-text-strong));
323
323
  line-height: var(--hx-line-height-normal);
324
324
  padding: 0;
325
325
  margin-bottom: var(--hx-space-1);
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,20 +346,20 @@
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 ─── */
353
353
 
354
354
  .fieldset__help-text {
355
355
  font-size: var(--hx-font-size-xs);
356
- color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
356
+ color: var(--hx-checkbox-group-help-text-color, var(--hx-color-text-muted));
357
357
  line-height: var(--hx-line-height-normal);
358
358
  }
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-neutral-700, #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,9 +724,9 @@
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-neutral-300, #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
- background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));
729
+ background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
713
730
  transition:
714
731
  border-color var(--hx-transition-fast, 150ms ease),
715
732
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -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-neutral-500, #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-neutral-800, #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-neutral-400, #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-neutral-400, #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-neutral-700, #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
@@ -832,13 +849,13 @@
832
849
  left: 0;
833
850
  right: 0;
834
851
  z-index: var(--hx-z-index-dropdown, 1000);
835
- background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
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-neutral-300, #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-neutral-800, #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-neutral-400, #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-neutral-500, #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-neutral-700, #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,9 +1138,9 @@
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-neutral-300, #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
- background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
1143
+ background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
1127
1144
  transition:
1128
1145
  border-color var(--hx-transition-fast, 150ms ease),
1129
1146
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -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-neutral-800, #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-neutral-400, #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-neutral-300, #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-neutral-500, #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-neutral-700, #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 {
@@ -1244,9 +1261,9 @@
1244
1261
  left: 0;
1245
1262
  z-index: var(--hx-z-index-dropdown, 1000);
1246
1263
  min-width: var(--hx-date-picker-calendar-min-width, 18rem);
1247
- background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
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-neutral-200, #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-neutral-600, #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-neutral-100, #f1f5f9);
1315
- color: var(--hx-color-neutral-900, #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-neutral-800, #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-neutral-500, #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-neutral-800, #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-neutral-100, #f1f5f9);
1379
- color: var(--hx-color-neutral-900, #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));
1384
- color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
1400
+ background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
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-neutral-500, #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-neutral-700, #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-neutral-500, #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-neutral-700, #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-neutral-500, #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-neutral-700, #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-neutral-300, #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-neutral-50, #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-neutral-600, #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,20 +1799,20 @@
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%,
1791
- var(--hx-color-neutral-0, #ffffff)
1807
+ var(--hx-color-primary-500, #429797) 8%,
1808
+ var(--hx-color-surface-default, #ffffff)
1792
1809
  )
1793
1810
  );
1794
1811
  border-style: solid;
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,9 +1857,9 @@
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-neutral-200, #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
- background-color: var(--hx-color-neutral-0, #ffffff);
1862
+ background-color: var(--hx-color-surface-default, #ffffff);
1846
1863
  }
1847
1864
 
1848
1865
  .file-item__row {
@@ -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-neutral-800, #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-neutral-500, #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-neutral-500, #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-neutral-200, #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-neutral-500, #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-neutral-500, #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) ─── */
@@ -2102,12 +2119,12 @@
2102
2119
  gap: var(--hx-space-1);
2103
2120
  font-size: var(--hx-font-size-sm);
2104
2121
  font-weight: var(--hx-font-weight-medium);
2105
- color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
2122
+ color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
2106
2123
  line-height: var(--hx-line-height-normal);
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
 
@@ -2117,9 +2134,9 @@
2117
2134
  display: flex;
2118
2135
  align-items: stretch;
2119
2136
  border: var(--hx-border-width-thin) solid
2120
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
2137
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
2121
2138
  border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
2122
- background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
2139
+ background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
2123
2140
  transition:
2124
2141
  border-color var(--hx-transition-fast),
2125
2142
  box-shadow var(--hx-transition-fast);
@@ -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
  );
@@ -2167,7 +2184,7 @@
2167
2184
  display: flex;
2168
2185
  align-items: center;
2169
2186
  padding: 0 var(--hx-space-3);
2170
- color: var(--hx-color-neutral-500);
2187
+ color: var(--hx-color-text-muted);
2171
2188
  flex-shrink: 0;
2172
2189
  }
2173
2190
 
@@ -2179,7 +2196,7 @@
2179
2196
  outline: none;
2180
2197
  background: transparent;
2181
2198
  font-family: inherit;
2182
- color: var(--hx-number-input-color, var(--hx-color-neutral-800));
2199
+ color: var(--hx-number-input-color, var(--hx-color-text-strong));
2183
2200
  line-height: var(--hx-line-height-normal);
2184
2201
  width: 100%;
2185
2202
  /* Size: md (default) */
@@ -2189,7 +2206,7 @@
2189
2206
  }
2190
2207
 
2191
2208
  .field__input::placeholder {
2192
- color: var(--hx-color-neutral-400);
2209
+ color: var(--hx-color-text-placeholder);
2193
2210
  }
2194
2211
 
2195
2212
  .field__input:disabled {
@@ -2228,7 +2245,7 @@
2228
2245
  flex-direction: column;
2229
2246
  flex-shrink: 0;
2230
2247
  border-inline-start: var(--hx-border-width-thin) solid
2231
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
2248
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
2232
2249
  }
2233
2250
 
2234
2251
  .field__stepper-btn {
@@ -2238,7 +2255,7 @@
2238
2255
  background: transparent;
2239
2256
  border: none;
2240
2257
  cursor: pointer;
2241
- color: var(--hx-color-neutral-600);
2258
+ color: var(--hx-color-text-secondary);
2242
2259
  padding: 0;
2243
2260
  flex: 1;
2244
2261
  min-width: var(--hx-size-8);
@@ -2250,12 +2267,12 @@
2250
2267
 
2251
2268
  .field__stepper-btn:not(:last-child) {
2252
2269
  border-bottom: var(--hx-border-width-thin) solid
2253
- var(--hx-number-input-border-color, var(--hx-color-neutral-300));
2270
+ var(--hx-number-input-border-color, var(--hx-color-border-strong));
2254
2271
  }
2255
2272
 
2256
2273
  .field__stepper-btn:hover:not(:disabled) {
2257
- background-color: var(--hx-color-neutral-50);
2258
- color: var(--hx-color-neutral-800);
2274
+ background-color: var(--hx-color-surface-raised);
2275
+ color: var(--hx-color-text-strong);
2259
2276
  }
2260
2277
 
2261
2278
  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -2294,13 +2311,13 @@
2294
2311
 
2295
2312
  .field__help-text {
2296
2313
  font-size: var(--hx-font-size-xs);
2297
- color: var(--hx-color-neutral-500);
2314
+ color: var(--hx-color-text-muted);
2298
2315
  line-height: var(--hx-line-height-normal);
2299
2316
  }
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-neutral-700, #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-neutral-500, #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-neutral-300, #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-neutral-300, #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
  }
@@ -2645,36 +2662,39 @@
2645
2662
  display: block;
2646
2663
 
2647
2664
  /* Background & foreground */
2648
- --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
2649
- --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
2650
- --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
2665
+ --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
2666
+ --_color: var(--hx-select-color, var(--hx-color-text-strong, #202b39));
2667
+ --_placeholder-color: var(
2668
+ --hx-select-placeholder-color,
2669
+ var(--hx-color-text-placeholder, #66787b)
2670
+ );
2651
2671
 
2652
2672
  /* Label */
2653
- --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
2673
+ --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #202b39));
2654
2674
 
2655
2675
  /* Border */
2656
- --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
2676
+ --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #8e9c98));
2657
2677
  --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
2658
2678
 
2659
2679
  /* Focus ring */
2660
2680
  --_focus-ring-color: var(
2661
2681
  --hx-select-focus-ring-color,
2662
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
2682
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
2663
2683
  );
2664
2684
 
2665
2685
  /* Error */
2666
- --_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));
2667
2687
 
2668
2688
  /* Chevron */
2669
- --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
2689
+ --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #4a5362));
2670
2690
  --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
2671
2691
 
2672
2692
  /* Listbox */
2673
- --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
2674
- --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
2693
+ --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
2694
+ --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
2675
2695
  --_option-selected-bg: var(
2676
2696
  --hx-select-option-selected-bg,
2677
- var(--hx-color-primary-100, #dbeafe)
2697
+ var(--hx-color-primary-100, #dbf0f0)
2678
2698
  );
2679
2699
 
2680
2700
  /* Typography */
@@ -2709,7 +2729,7 @@
2709
2729
  }
2710
2730
 
2711
2731
  .field__required-marker {
2712
- 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));
2713
2733
  font-weight: var(--hx-font-weight-bold, 700);
2714
2734
  }
2715
2735
 
@@ -2918,11 +2938,11 @@
2918
2938
  }
2919
2939
 
2920
2940
  .field__help-text {
2921
- color: var(--hx-color-neutral-500, #64748b);
2941
+ color: var(--hx-color-text-muted, #4a5362);
2922
2942
  }
2923
2943
 
2924
2944
  .field__error {
2925
- 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));
2926
2946
  }
2927
2947
 
2928
2948
  @media (prefers-reduced-motion: reduce) {
@@ -3049,14 +3069,14 @@
3049
3069
  .slider__label {
3050
3070
  font-size: var(--hx-font-size-sm, 0.875rem);
3051
3071
  font-weight: var(--hx-font-weight-medium, 500);
3052
- color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
3072
+ color: var(--hx-slider-label-color, var(--hx-color-text-strong, #202b39));
3053
3073
  line-height: var(--hx-line-height-normal, 1.5);
3054
3074
  }
3055
3075
 
3056
3076
  .slider__value-display {
3057
3077
  font-size: var(--hx-font-size-sm, 0.875rem);
3058
3078
  font-weight: var(--hx-font-weight-medium, 500);
3059
- color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
3079
+ color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #313e4b));
3060
3080
  line-height: var(--hx-line-height-normal, 1.5);
3061
3081
  font-variant-numeric: tabular-nums;
3062
3082
  min-width: var(--hx-size-8, 2rem);
@@ -3074,7 +3094,7 @@
3074
3094
  position: relative;
3075
3095
  width: 100%;
3076
3096
  border-radius: var(--hx-border-radius-full, 9999px);
3077
- background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
3097
+ background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #d6dbd5));
3078
3098
  overflow: visible;
3079
3099
  }
3080
3100
 
@@ -3117,7 +3137,7 @@
3117
3137
  height: 100%;
3118
3138
  width: 100%;
3119
3139
  border-radius: var(--hx-border-radius-full, 9999px);
3120
- 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));
3121
3141
  pointer-events: none;
3122
3142
  transform-origin: left center;
3123
3143
  transform: scaleX(var(--_fill-ratio, 0));
@@ -3196,9 +3216,9 @@
3196
3216
  left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
3197
3217
  transform: translate(-50%, -50%);
3198
3218
  border-radius: var(--hx-border-radius-full, 9999px);
3199
- background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
3219
+ background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
3200
3220
  border: var(--hx-slider-thumb-border-width, 2px) solid
3201
- 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));
3202
3222
  box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
3203
3223
  pointer-events: none;
3204
3224
  transition:
@@ -3217,7 +3237,7 @@
3217
3237
  0 0 0 var(--hx-focus-ring-width, 2px)
3218
3238
  var(
3219
3239
  --hx-slider-focus-ring-color,
3220
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3240
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3221
3241
  ),
3222
3242
  var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
3223
3243
  }
@@ -3274,7 +3294,7 @@
3274
3294
  top: 0;
3275
3295
  width: var(--hx-border-width-thin, 1px);
3276
3296
  height: 100%;
3277
- background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
3297
+ background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #8e9c98));
3278
3298
  transform: translateX(-50%);
3279
3299
  }
3280
3300
 
@@ -3284,7 +3304,7 @@
3284
3304
  display: flex;
3285
3305
  justify-content: space-between;
3286
3306
  font-size: var(--hx-font-size-xs, 0.75rem);
3287
- color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
3307
+ color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #4a5362));
3288
3308
  line-height: var(--hx-line-height-normal, 1.5);
3289
3309
  margin-top: var(--hx-space-0-5, 0.125rem);
3290
3310
  }
@@ -3293,18 +3313,21 @@
3293
3313
 
3294
3314
  .slider__help-text {
3295
3315
  font-size: var(--hx-font-size-xs, 0.75rem);
3296
- color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #64748b));
3316
+ color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #4a5362));
3297
3317
  line-height: var(--hx-line-height-normal, 1.5);
3298
3318
  }
3299
3319
 
3300
3320
  /* ─── Disabled state ─── */
3301
3321
 
3302
3322
  .slider--disabled .slider__fill {
3303
- background-color: var(--hx-color-neutral-400, #94a3b8);
3323
+ background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #8e9c98));
3304
3324
  }
3305
3325
 
3306
3326
  .slider--disabled .slider__thumb-visual {
3307
- border-color: var(--hx-color-neutral-400, #94a3b8);
3327
+ border-color: var(
3328
+ --hx-slider-disabled-thumb-border-color,
3329
+ var(--hx-color-border-strong, #8e9c98)
3330
+ );
3308
3331
  }
3309
3332
  /* ── hx-switch ── */
3310
3333
  :host {
@@ -3349,7 +3372,7 @@
3349
3372
  border: none;
3350
3373
  padding: 0;
3351
3374
  border-radius: var(--hx-border-radius-full, 9999px);
3352
- background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
3375
+ background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #8e9c98));
3353
3376
  cursor: pointer;
3354
3377
  transition: background-color var(--hx-transition-fast, 150ms ease);
3355
3378
  outline: none;
@@ -3361,13 +3384,21 @@
3361
3384
  outline: var(--hx-focus-ring-width, 2px) solid
3362
3385
  var(
3363
3386
  --hx-switch-focus-ring-color,
3364
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3387
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
3365
3388
  );
3366
3389
  outline-offset: var(--hx-focus-ring-offset, 2px);
3367
3390
  }
3368
3391
 
3369
3392
  .switch--checked .switch__track {
3370
- 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));
3371
3402
  }
3372
3403
 
3373
3404
  /* --- Thumb --- */
@@ -3375,7 +3406,7 @@
3375
3406
  .switch__thumb {
3376
3407
  position: absolute;
3377
3408
  border-radius: var(--hx-border-radius-full, 9999px);
3378
- background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
3409
+ background-color: var(--hx-switch-thumb-bg, var(--hx-color-surface-default, #ffffff));
3379
3410
  box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
3380
3411
  transition: transform var(--hx-transition-fast, 150ms ease);
3381
3412
  }
@@ -3445,7 +3476,7 @@
3445
3476
  .switch__label {
3446
3477
  font-size: var(--hx-font-size-sm, 0.875rem);
3447
3478
  font-weight: var(--hx-font-weight-medium, 500);
3448
- color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
3479
+ color: var(--hx-switch-label-color, var(--hx-color-text-strong, #202b39));
3449
3480
  line-height: var(--hx-line-height-normal, 1.5);
3450
3481
  cursor: pointer;
3451
3482
  user-select: none;
@@ -3453,7 +3484,7 @@
3453
3484
  }
3454
3485
 
3455
3486
  .switch__required-marker {
3456
- 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));
3457
3488
  font-weight: var(--hx-font-weight-bold, 700);
3458
3489
  }
3459
3490
 
@@ -3461,13 +3492,13 @@
3461
3492
 
3462
3493
  .switch__help-text {
3463
3494
  font-size: var(--hx-font-size-xs, 0.75rem);
3464
- color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
3495
+ color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #4a5362));
3465
3496
  line-height: var(--hx-line-height-normal, 1.5);
3466
3497
  }
3467
3498
 
3468
3499
  .switch__error {
3469
3500
  font-size: var(--hx-font-size-xs, 0.75rem);
3470
- 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));
3471
3502
  line-height: var(--hx-line-height-normal, 1.5);
3472
3503
  }
3473
3504
 
@@ -3540,6 +3571,100 @@
3540
3571
  /* ── hx-text-input ── */
3541
3572
  :host {
3542
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
+ );
3543
3668
  }
3544
3669
 
3545
3670
  :host([disabled]) {
@@ -3554,36 +3679,13 @@
3554
3679
  * These complement the :focus-within rules on .field__input-wrapper and are
3555
3680
  * exposed as theming hooks for consumers who target the host element.
3556
3681
  */
3557
- :host([focused]) .field__input-wrapper {
3558
- border-color: var(
3559
- --hx-input-focus-ring-color,
3560
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3561
- );
3562
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3563
- color-mix(
3564
- in srgb,
3565
- var(
3566
- --hx-input-focus-ring-color,
3567
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3568
- )
3569
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3570
- transparent
3571
- );
3572
- }
3573
-
3682
+ :host([focused]) .field__input-wrapper,
3574
3683
  :host([focused-visible]) .field__input-wrapper {
3575
- border-color: var(
3576
- --hx-input-focus-ring-color,
3577
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3578
- );
3579
- 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)
3580
3686
  color-mix(
3581
3687
  in srgb,
3582
- var(
3583
- --hx-input-focus-ring-color,
3584
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3585
- )
3586
- 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%),
3587
3689
  transparent
3588
3690
  );
3589
3691
  }
@@ -3596,7 +3698,7 @@
3596
3698
  display: flex;
3597
3699
  flex-direction: column;
3598
3700
  gap: var(--hx-space-1, 0.25rem);
3599
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
3701
+ font-family: var(--_text-input-font-family);
3600
3702
  }
3601
3703
 
3602
3704
  /* ─── Label ─── */
@@ -3611,12 +3713,12 @@
3611
3713
  gap: var(--hx-space-1, 0.25rem);
3612
3714
  font-size: var(--hx-font-size-sm, 0.875rem);
3613
3715
  font-weight: var(--hx-font-weight-medium, 500);
3614
- color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
3716
+ color: var(--_text-input-label-color);
3615
3717
  line-height: var(--hx-line-height-normal, 1.5);
3616
3718
  }
3617
3719
 
3618
3720
  .field__required-marker {
3619
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
3721
+ color: var(--_text-input-error-color);
3620
3722
  font-weight: var(--hx-font-weight-bold, 700);
3621
3723
  }
3622
3724
 
@@ -3625,29 +3727,25 @@
3625
3727
  .field__input-wrapper {
3626
3728
  display: flex;
3627
3729
  align-items: center;
3628
- border: var(--hx-border-width-thin, 1px) solid
3629
- var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
3630
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
3631
- background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #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);
3632
3733
  transition:
3633
3734
  border-color var(--hx-transition-fast, 150ms ease),
3634
3735
  box-shadow var(--hx-transition-fast, 150ms ease);
3635
3736
  overflow: hidden;
3636
3737
  }
3637
3738
 
3739
+ .field__input-wrapper:hover {
3740
+ border-color: var(--_text-input-border-color-hover);
3741
+ }
3742
+
3638
3743
  .field__input-wrapper:focus-within {
3639
- border-color: var(
3640
- --hx-input-focus-ring-color,
3641
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3642
- );
3643
- 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)
3644
3746
  color-mix(
3645
3747
  in srgb,
3646
- var(
3647
- --hx-input-focus-ring-color,
3648
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3649
- )
3650
- 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%),
3651
3749
  transparent
3652
3750
  );
3653
3751
  }
@@ -3655,16 +3753,15 @@
3655
3753
  /* ─── Error State ─── */
3656
3754
 
3657
3755
  .field--error .field__input-wrapper {
3658
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
3756
+ border-color: var(--_text-input-border-color-invalid);
3659
3757
  }
3660
3758
 
3661
3759
  .field--error .field__input-wrapper:focus-within {
3662
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
3663
- 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)
3664
3762
  color-mix(
3665
3763
  in srgb,
3666
- var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
3667
- 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%),
3668
3765
  transparent
3669
3766
  );
3670
3767
  }
@@ -3675,17 +3772,17 @@
3675
3772
  .field__suffix {
3676
3773
  display: flex;
3677
3774
  align-items: center;
3678
- color: var(--hx-color-neutral-500, #64748b);
3775
+ color: var(--hx-color-text-muted, #4a5362);
3679
3776
  flex-shrink: 0;
3680
3777
  }
3681
3778
 
3682
3779
  /* Only add padding when slot has content — avoids phantom space on empty slots */
3683
3780
  .field__prefix--filled {
3684
- padding: 0 var(--hx-space-3, 0.75rem);
3781
+ padding: 0 var(--_text-input-padding-x);
3685
3782
  }
3686
3783
 
3687
3784
  .field__suffix--filled {
3688
- padding: 0 var(--hx-space-3, 0.75rem);
3785
+ padding: 0 var(--_text-input-padding-x);
3689
3786
  }
3690
3787
 
3691
3788
  /* ─── Native Input ─── */
@@ -3695,17 +3792,17 @@
3695
3792
  border: none;
3696
3793
  outline: none;
3697
3794
  background: transparent;
3698
- 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);
3699
3796
  font-family: inherit;
3700
- font-size: var(--hx-font-size-md, 1rem);
3701
- color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
3797
+ font-size: var(--_text-input-font-size);
3798
+ color: var(--_text-input-color);
3702
3799
  line-height: var(--hx-line-height-normal, 1.5);
3703
3800
  min-height: var(--hx-size-10, 2.5rem);
3704
3801
  width: 100%;
3705
3802
  }
3706
3803
 
3707
3804
  .field__input::placeholder {
3708
- color: var(--hx-color-neutral-400, #94a3b8);
3805
+ color: var(--_text-input-placeholder-color);
3709
3806
  }
3710
3807
 
3711
3808
  .field__input:focus-visible {
@@ -3714,6 +3811,12 @@
3714
3811
 
3715
3812
  .field__input:disabled {
3716
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);
3717
3820
  }
3718
3821
 
3719
3822
  /* ─── Size Variants ─── */
@@ -3721,7 +3824,7 @@
3721
3824
  .field--size-sm .field__input {
3722
3825
  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
3723
3826
  min-height: var(--hx-size-8, 2rem);
3724
- 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));
3725
3828
  }
3726
3829
 
3727
3830
  .field--size-md .field__input {
@@ -3731,20 +3834,20 @@
3731
3834
  .field--size-lg .field__input {
3732
3835
  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
3733
3836
  min-height: var(--hx-size-12, 3rem);
3734
- 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));
3735
3838
  }
3736
3839
 
3737
3840
  /* ─── Help Text & Error Messages ─── */
3738
3841
 
3739
3842
  .field__help-text {
3740
3843
  font-size: var(--hx-font-size-xs, 0.75rem);
3741
- color: var(--hx-color-neutral-500, #64748b);
3844
+ color: var(--_text-input-help-text-color);
3742
3845
  line-height: var(--hx-line-height-normal, 1.5);
3743
3846
  }
3744
3847
 
3745
3848
  .field__error {
3746
3849
  font-size: var(--hx-font-size-xs, 0.75rem);
3747
- color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
3850
+ color: var(--_text-input-error-color);
3748
3851
  line-height: var(--hx-line-height-normal, 1.5);
3749
3852
  }
3750
3853
 
@@ -3756,7 +3859,13 @@
3756
3859
  }
3757
3860
  }
3758
3861
 
3759
- /* ─── 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
+ */
3760
3869
 
3761
3870
  @media (forced-colors: active) {
3762
3871
  .field__input-wrapper {
@@ -3816,6 +3925,42 @@
3816
3925
  /* ── hx-textarea ── */
3817
3926
  :host {
3818
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
+ );
3819
3964
  }
3820
3965
 
3821
3966
  :host([disabled]) {
@@ -3831,7 +3976,10 @@
3831
3976
  display: flex;
3832
3977
  flex-direction: column;
3833
3978
  gap: var(--hx-space-1, 0.25rem);
3834
- 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
+ );
3835
3983
  }
3836
3984
 
3837
3985
  /* --- Label --- */
@@ -3846,12 +3994,18 @@
3846
3994
  gap: var(--hx-space-1, 0.25rem);
3847
3995
  font-size: var(--hx-font-size-sm, 0.875rem);
3848
3996
  font-weight: var(--hx-font-weight-medium, 500);
3849
- color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
3997
+ color: var(
3998
+ --hx-textarea-label-color,
3999
+ var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
4000
+ );
3850
4001
  line-height: var(--hx-line-height-normal, 1.5);
3851
4002
  }
3852
4003
 
3853
4004
  .field__required-marker {
3854
- 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
+ );
3855
4009
  font-weight: var(--hx-font-weight-bold, 700);
3856
4010
  }
3857
4011
 
@@ -3860,10 +4014,9 @@
3860
4014
  .field__textarea-wrapper {
3861
4015
  display: flex;
3862
4016
  flex-direction: column;
3863
- border: var(--hx-border-width-thin, 1px) solid
3864
- var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
3865
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
3866
- background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #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);
3867
4020
  transition:
3868
4021
  border-color var(--hx-transition-fast, 150ms ease),
3869
4022
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3871,18 +4024,11 @@
3871
4024
  }
3872
4025
 
3873
4026
  .field__textarea-wrapper:focus-within {
3874
- border-color: var(
3875
- --hx-input-focus-ring-color,
3876
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3877
- );
4027
+ border-color: var(--_textarea-border-color-focus);
3878
4028
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3879
4029
  color-mix(
3880
4030
  in srgb,
3881
- var(
3882
- --hx-input-focus-ring-color,
3883
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
3884
- )
3885
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
4031
+ var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3886
4032
  transparent
3887
4033
  );
3888
4034
  }
@@ -3890,16 +4036,15 @@
3890
4036
  /* --- Error State --- */
3891
4037
 
3892
4038
  .field--error .field__textarea-wrapper {
3893
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
4039
+ border-color: var(--_textarea-border-color-invalid);
3894
4040
  }
3895
4041
 
3896
4042
  .field--error .field__textarea-wrapper:focus-within {
3897
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
4043
+ border-color: var(--_textarea-border-color-invalid);
3898
4044
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
3899
4045
  color-mix(
3900
4046
  in srgb,
3901
- var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
3902
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
4047
+ var(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
3903
4048
  transparent
3904
4049
  );
3905
4050
  }
@@ -3910,10 +4055,10 @@
3910
4055
  border: none;
3911
4056
  outline: none;
3912
4057
  background: transparent;
3913
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
4058
+ padding: var(--_textarea-padding-y) var(--_textarea-padding-x);
3914
4059
  font-family: inherit;
3915
- font-size: var(--hx-font-size-md, 1rem);
3916
- color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
4060
+ font-size: var(--_textarea-font-size);
4061
+ color: var(--_textarea-color);
3917
4062
  line-height: var(--hx-line-height-normal, 1.5);
3918
4063
  min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
3919
4064
  width: 100%;
@@ -3921,7 +4066,7 @@
3921
4066
  }
3922
4067
 
3923
4068
  .field__textarea::placeholder {
3924
- color: var(--hx-color-neutral-400, #94a3b8);
4069
+ color: var(--_textarea-placeholder-color);
3925
4070
  }
3926
4071
 
3927
4072
  .field__textarea:focus-visible {
@@ -3959,7 +4104,7 @@
3959
4104
 
3960
4105
  .field__counter {
3961
4106
  font-size: var(--hx-font-size-xs, 0.75rem);
3962
- color: var(--hx-color-neutral-500, #64748b);
4107
+ color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));
3963
4108
  line-height: var(--hx-line-height-normal, 1.5);
3964
4109
  text-align: end;
3965
4110
  }
@@ -3982,13 +4127,16 @@
3982
4127
 
3983
4128
  .field__help-text {
3984
4129
  font-size: var(--hx-font-size-xs, 0.75rem);
3985
- color: var(--hx-color-neutral-500, #64748b);
4130
+ color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));
3986
4131
  line-height: var(--hx-line-height-normal, 1.5);
3987
4132
  }
3988
4133
 
3989
4134
  .field__error {
3990
4135
  font-size: var(--hx-font-size-xs, 0.75rem);
3991
- 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
+ );
3992
4140
  line-height: var(--hx-line-height-normal, 1.5);
3993
4141
  }
3994
4142
 
@@ -4073,11 +4221,11 @@
4073
4221
  gap: var(--hx-space-1, 0.25rem);
4074
4222
  font-size: var(--hx-font-size-sm, 0.875rem);
4075
4223
  font-weight: var(--hx-font-weight-medium, 500);
4076
- color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
4224
+ color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
4077
4225
  line-height: var(--hx-line-height-normal, 1.5);
4078
4226
  }
4079
4227
  .field__required-marker {
4080
- 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));
4081
4229
  font-weight: var(--hx-font-weight-bold, 700);
4082
4230
  }
4083
4231
  .field__combobox {
@@ -4085,9 +4233,9 @@
4085
4233
  display: flex;
4086
4234
  align-items: center;
4087
4235
  border: var(--hx-border-width-thin, 1px) solid
4088
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
4236
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
4089
4237
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
4090
- background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
4238
+ background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
4091
4239
  transition:
4092
4240
  border-color var(--hx-transition-fast, 150ms ease),
4093
4241
  box-shadow var(--hx-transition-fast, 150ms ease);
@@ -4104,14 +4252,14 @@
4104
4252
  );
4105
4253
  }
4106
4254
  .field--error .field__combobox {
4107
- 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));
4108
4256
  }
4109
4257
  .field--error .field__combobox:focus-within {
4110
- 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));
4111
4259
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
4112
4260
  color-mix(
4113
4261
  in srgb,
4114
- var(--hx-time-picker-error-color, var(--hx-color-error-500))
4262
+ var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
4115
4263
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
4116
4264
  transparent
4117
4265
  );
@@ -4124,14 +4272,14 @@
4124
4272
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
4125
4273
  font-family: inherit;
4126
4274
  font-size: var(--hx-font-size-md, 1rem);
4127
- color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
4275
+ color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
4128
4276
  line-height: var(--hx-line-height-normal, 1.5);
4129
4277
  min-height: var(--hx-size-10, 2.5rem);
4130
4278
  width: 100%;
4131
4279
  cursor: text;
4132
4280
  }
4133
4281
  .field__input::placeholder {
4134
- color: var(--hx-color-neutral-400);
4282
+ color: var(--hx-color-text-placeholder, #66787b);
4135
4283
  }
4136
4284
  .field__input:disabled {
4137
4285
  cursor: not-allowed;
@@ -4143,13 +4291,13 @@
4143
4291
  border: none;
4144
4292
  background: transparent;
4145
4293
  padding: 0 var(--hx-space-3, 0.75rem);
4146
- color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
4294
+ color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
4147
4295
  cursor: pointer;
4148
4296
  height: 100%;
4149
4297
  min-height: var(--hx-size-10, 2.5rem);
4150
4298
  flex-shrink: 0;
4151
4299
  border-inline-start: var(--hx-border-width-thin, 1px) solid
4152
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
4300
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
4153
4301
  }
4154
4302
  .field__toggle:focus-visible {
4155
4303
  outline: var(--hx-focus-ring-width, 2px) solid
@@ -4163,9 +4311,9 @@
4163
4311
  inset-inline-start: 0;
4164
4312
  inset-inline-end: 0;
4165
4313
  z-index: var(--hx-z-index-dropdown, 1000);
4166
- background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
4314
+ background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
4167
4315
  border: var(--hx-border-width-thin, 1px) solid
4168
- var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
4316
+ var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
4169
4317
  border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
4170
4318
  box-shadow: var(
4171
4319
  --hx-time-picker-listbox-shadow,
@@ -4198,23 +4346,29 @@
4198
4346
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
4199
4347
  font-size: var(--hx-font-size-md, 1rem);
4200
4348
  font-family: inherit;
4201
- color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
4349
+ color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
4202
4350
  cursor: pointer;
4203
4351
  transition: background-color var(--hx-transition-fast, 150ms ease);
4204
4352
  line-height: var(--hx-line-height-normal, 1.5);
4205
4353
  }
4206
4354
  .field__option:hover,
4207
4355
  .field__option--active {
4208
- background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
4209
- 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));
4210
4358
  }
4211
4359
  .field__option--selected {
4212
- background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
4213
- 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));
4214
4365
  font-weight: var(--hx-font-weight-medium, 500);
4215
4366
  }
4216
4367
  .field__option--selected.field__option--active {
4217
- 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
+ );
4218
4372
  }
4219
4373
  @media (prefers-reduced-motion: reduce) {
4220
4374
  .field__combobox,
@@ -4228,10 +4382,10 @@
4228
4382
  line-height: var(--hx-line-height-normal, 1.5);
4229
4383
  }
4230
4384
  .field__help-text {
4231
- color: var(--hx-color-neutral-500);
4385
+ color: var(--hx-color-text-muted, #4a5362);
4232
4386
  }
4233
4387
  .field__error {
4234
- 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));
4235
4389
  }
4236
4390
  @media (forced-colors: active) {
4237
4391
  .field__combobox {
@@ -4293,8 +4447,8 @@
4293
4447
  gap: var(--hx-space-2, 0.5rem);
4294
4448
  border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
4295
4449
  border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
4296
- background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
4297
- color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));
4450
+ background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
4451
+ color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
4298
4452
  font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
4299
4453
  font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
4300
4454
  line-height: var(--hx-line-height-tight, 1.25);
@@ -4314,7 +4468,7 @@
4314
4468
  outline: var(--hx-focus-ring-width, 2px) solid
4315
4469
  var(
4316
4470
  --hx-toggle-button-focus-ring-color,
4317
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
4471
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
4318
4472
  );
4319
4473
  outline-offset: var(--hx-focus-ring-offset, 2px);
4320
4474
  }
@@ -4353,49 +4507,55 @@
4353
4507
  /* ─── Style Variants ─── */
4354
4508
 
4355
4509
  .button--primary {
4356
- --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
4357
- --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
4510
+ --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
4511
+ --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
4358
4512
  --hx-toggle-button-border-color: transparent;
4359
4513
  }
4360
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
+ */
4361
4521
  .button--secondary {
4362
4522
  --hx-toggle-button-bg: transparent;
4363
- --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
4364
- --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);
4365
4525
  }
4366
4526
 
4367
4527
  .button--secondary:hover {
4368
- --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
4528
+ --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);
4369
4529
  }
4370
4530
 
4371
4531
  .button--tertiary {
4372
- --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
4373
- --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
4532
+ --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);
4533
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
4374
4534
  --hx-toggle-button-border-color: transparent;
4375
4535
  }
4376
4536
 
4377
4537
  .button--tertiary:hover {
4378
- --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
4538
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
4379
4539
  }
4380
4540
 
4381
4541
  .button--ghost {
4382
4542
  --hx-toggle-button-bg: transparent;
4383
- --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
4543
+ --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
4384
4544
  --hx-toggle-button-border-color: transparent;
4385
4545
  }
4386
4546
 
4387
4547
  .button--ghost:hover {
4388
- --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
4548
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
4389
4549
  }
4390
4550
 
4391
4551
  .button--outline {
4392
4552
  --hx-toggle-button-bg: transparent;
4393
- --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
4394
- --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
4553
+ --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
4554
+ --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);
4395
4555
  }
4396
4556
 
4397
4557
  .button--outline:hover {
4398
- --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
4558
+ --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
4399
4559
  }
4400
4560
 
4401
4561
  /* ─── Pressed State ─── */
@@ -4403,9 +4563,16 @@
4403
4563
  /*
4404
4564
  * Primary: already uses solid primary bg; pressed deepens to primary-700
4405
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.
4406
4573
  */
4407
4574
  .button--primary.button--pressed {
4408
- --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));
4409
4576
  --hx-toggle-button-color: var(
4410
4577
  --hx-toggle-button-pressed-color,
4411
4578
  var(--hx-color-neutral-0, #ffffff)
@@ -4418,44 +4585,47 @@
4418
4585
  * so the state change is immediately legible.
4419
4586
  */
4420
4587
  .button--secondary.button--pressed {
4421
- --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));
4422
4589
  --hx-toggle-button-color: var(
4423
4590
  --hx-toggle-button-pressed-color,
4424
- var(--hx-color-neutral-0, #ffffff)
4591
+ var(--hx-color-text-on-primary, #ffffff)
4425
4592
  );
4426
- --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
4593
+ --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
4427
4594
  }
4428
4595
 
4429
4596
  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
4430
4597
  .button--tertiary.button--pressed {
4431
- --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));
4432
4599
  --hx-toggle-button-color: var(
4433
4600
  --hx-toggle-button-pressed-color,
4434
- var(--hx-color-primary-700, #1e40af)
4601
+ var(--hx-color-primary-700, #0f6363)
4435
4602
  );
4436
- --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
4437
- 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);
4438
4605
  }
4439
4606
 
4440
4607
  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
4441
4608
  .button--ghost.button--pressed {
4442
- --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));
4443
4610
  --hx-toggle-button-color: var(
4444
4611
  --hx-toggle-button-pressed-color,
4445
- var(--hx-color-primary-700, #1e40af)
4612
+ var(--hx-color-primary-700, #0f6363)
4446
4613
  );
4447
4614
  --hx-toggle-button-border-color: transparent;
4448
4615
  }
4449
4616
 
4450
4617
  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
4451
4618
  .button--outline.button--pressed {
4452
- --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
4619
+ --hx-toggle-button-bg: var(
4620
+ --hx-toggle-button-pressed-bg,
4621
+ var(--hx-color-surface-sunken, #ebeee9)
4622
+ );
4453
4623
  --hx-toggle-button-color: var(
4454
4624
  --hx-toggle-button-pressed-color,
4455
- var(--hx-color-neutral-900, #0f172a)
4625
+ var(--hx-color-text-primary, #0d1825)
4456
4626
  );
4457
- --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
4458
- 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);
4459
4629
  }
4460
4630
 
4461
4631
  /* ─── Disabled ─── */