@helixui/library 1.0.1 → 1.1.2

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 (466) hide show
  1. package/custom-elements.json +2936 -9700
  2. package/dist/components/hx-accordion/hx-accordion-item.d.ts +7 -0
  3. package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
  4. package/dist/components/hx-accordion/hx-accordion.d.ts +3 -0
  5. package/dist/components/hx-accordion/hx-accordion.d.ts.map +1 -1
  6. package/dist/components/hx-accordion/index.js +1 -1
  7. package/dist/components/hx-action-bar/hx-action-bar.d.ts +13 -3
  8. package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
  9. package/dist/components/hx-action-bar/index.js +1 -1
  10. package/dist/components/hx-alert/hx-alert.d.ts +23 -0
  11. package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
  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 +8 -1
  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 +8 -1
  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 +11 -0
  21. package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
  22. package/dist/components/hx-banner/index.js +1 -1
  23. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +17 -2
  24. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
  25. package/dist/components/hx-breadcrumb/index.js +1 -1
  26. package/dist/components/hx-button/hx-button.d.ts +6 -0
  27. package/dist/components/hx-button/hx-button.d.ts.map +1 -1
  28. package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
  29. package/dist/components/hx-button/index.js +1 -1
  30. package/dist/components/hx-card/hx-card.d.ts +7 -0
  31. package/dist/components/hx-card/hx-card.d.ts.map +1 -1
  32. package/dist/components/hx-card/index.js +1 -1
  33. package/dist/components/hx-carousel/hx-carousel-item.d.ts +2 -0
  34. package/dist/components/hx-carousel/hx-carousel-item.d.ts.map +1 -1
  35. package/dist/components/hx-carousel/hx-carousel-item.styles.d.ts +2 -0
  36. package/dist/components/hx-carousel/hx-carousel-item.styles.d.ts.map +1 -0
  37. package/dist/components/hx-carousel/hx-carousel.d.ts +27 -0
  38. package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
  39. package/dist/components/hx-carousel/index.js +1 -1
  40. package/dist/components/hx-checkbox/hx-checkbox.d.ts +18 -2
  41. package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
  42. package/dist/components/hx-checkbox/index.js +1 -1
  43. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +20 -4
  44. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
  45. package/dist/components/hx-checkbox-group/index.js +1 -1
  46. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts +10 -0
  47. package/dist/components/hx-code-snippet/hx-code-snippet.d.ts.map +1 -1
  48. package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
  49. package/dist/components/hx-code-snippet/index.js +1 -1
  50. package/dist/components/hx-color-picker/hx-color-picker.d.ts +70 -2
  51. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  52. package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
  53. package/dist/components/hx-color-picker/index.js +1 -1
  54. package/dist/components/hx-combobox/hx-combobox.d.ts +37 -2
  55. package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
  56. package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
  57. package/dist/components/hx-combobox/index.js +1 -1
  58. package/dist/components/hx-copy-button/hx-copy-button.d.ts +11 -0
  59. package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
  60. package/dist/components/hx-copy-button/index.js +1 -1
  61. package/dist/components/hx-counter/hx-counter.d.ts +12 -3
  62. package/dist/components/hx-counter/hx-counter.d.ts.map +1 -1
  63. package/dist/components/hx-counter/index.js +1 -1
  64. package/dist/components/hx-data-table/hx-data-table.d.ts +19 -2
  65. package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
  66. package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
  67. package/dist/components/hx-data-table/index.js +1 -1
  68. package/dist/components/hx-date-picker/hx-date-picker.d.ts +62 -3
  69. package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
  70. package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
  71. package/dist/components/hx-date-picker/index.js +1 -1
  72. package/dist/components/hx-dialog/hx-dialog.d.ts +31 -4
  73. package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
  74. package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
  75. package/dist/components/hx-dialog/index.js +1 -1
  76. package/dist/components/hx-divider/hx-divider.d.ts +4 -1
  77. package/dist/components/hx-divider/hx-divider.d.ts.map +1 -1
  78. package/dist/components/hx-divider/index.js +1 -1
  79. package/dist/components/hx-drawer/hx-drawer.d.ts +25 -3
  80. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  81. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  82. package/dist/components/hx-drawer/index.js +1 -1
  83. package/dist/components/hx-dropdown/hx-dropdown.d.ts +15 -2
  84. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  85. package/dist/components/hx-dropdown/index.js +1 -1
  86. package/dist/components/hx-field/hx-field.d.ts +10 -2
  87. package/dist/components/hx-field/hx-field.d.ts.map +1 -1
  88. package/dist/components/hx-field/index.js +1 -1
  89. package/dist/components/hx-file-upload/hx-file-upload.d.ts +39 -2
  90. package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
  91. package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
  92. package/dist/components/hx-file-upload/index.js +1 -1
  93. package/dist/components/hx-form/hx-form.d.ts.map +1 -1
  94. package/dist/components/hx-form/index.js +1 -1
  95. package/dist/components/hx-format-date/hx-format-date.d.ts +8 -0
  96. package/dist/components/hx-format-date/hx-format-date.d.ts.map +1 -1
  97. package/dist/components/hx-format-date/index.js +1 -1
  98. package/dist/components/hx-grid/hx-grid.d.ts +9 -3
  99. package/dist/components/hx-grid/hx-grid.d.ts.map +1 -1
  100. package/dist/components/hx-grid/index.js +1 -1
  101. package/dist/components/hx-help-text/index.js +1 -1
  102. package/dist/components/hx-icon/hx-icon.d.ts +10 -2
  103. package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
  104. package/dist/components/hx-icon/index.js +1 -1
  105. package/dist/components/hx-icon-button/hx-icon-button.d.ts +11 -0
  106. package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
  107. package/dist/components/hx-icon-button/index.js +1 -1
  108. package/dist/components/hx-image/hx-image.d.ts +8 -0
  109. package/dist/components/hx-image/hx-image.d.ts.map +1 -1
  110. package/dist/components/hx-image/index.js +1 -1
  111. package/dist/components/hx-link/hx-link.d.ts +3 -0
  112. package/dist/components/hx-link/hx-link.d.ts.map +1 -1
  113. package/dist/components/hx-link/hx-link.styles.d.ts.map +1 -1
  114. package/dist/components/hx-link/index.js +1 -1
  115. package/dist/components/hx-list/hx-list-item.d.ts +8 -2
  116. package/dist/components/hx-list/hx-list-item.d.ts.map +1 -1
  117. package/dist/components/hx-list/hx-list-item.styles.d.ts.map +1 -1
  118. package/dist/components/hx-list/hx-list.d.ts +6 -2
  119. package/dist/components/hx-list/hx-list.d.ts.map +1 -1
  120. package/dist/components/hx-list/index.js +1 -1
  121. package/dist/components/hx-menu/hx-menu-item.d.ts +11 -0
  122. package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
  123. package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
  124. package/dist/components/hx-menu/hx-menu.d.ts +10 -1
  125. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  126. package/dist/components/hx-menu/index.js +1 -1
  127. package/dist/components/hx-meter/hx-meter.d.ts +8 -0
  128. package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
  129. package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
  130. package/dist/components/hx-meter/index.js +1 -1
  131. package/dist/components/hx-nav/hx-nav.d.ts +15 -0
  132. package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
  133. package/dist/components/hx-nav/index.js +1 -1
  134. package/dist/components/hx-number-input/hx-number-input.d.ts +47 -1
  135. package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
  136. package/dist/components/hx-number-input/index.js +1 -1
  137. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +15 -0
  138. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
  139. package/dist/components/hx-overflow-menu/index.js +1 -1
  140. package/dist/components/hx-pagination/hx-pagination.d.ts +30 -0
  141. package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
  142. package/dist/components/hx-pagination/index.js +1 -1
  143. package/dist/components/hx-popover/hx-popover.d.ts +53 -2
  144. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  145. package/dist/components/hx-popover/index.js +1 -1
  146. package/dist/components/hx-popup/hx-popup.d.ts +8 -0
  147. package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
  148. package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
  149. package/dist/components/hx-popup/index.js +1 -1
  150. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +8 -2
  151. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
  152. package/dist/components/hx-progress-bar/hx-progress-bar.styles.d.ts.map +1 -1
  153. package/dist/components/hx-progress-bar/index.js +1 -1
  154. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts +8 -2
  155. package/dist/components/hx-progress-ring/hx-progress-ring.d.ts.map +1 -1
  156. package/dist/components/hx-progress-ring/index.js +1 -1
  157. package/dist/components/hx-prose/hx-prose.d.ts +5 -3
  158. package/dist/components/hx-prose/hx-prose.d.ts.map +1 -1
  159. package/dist/components/hx-prose/index.js +1 -1
  160. package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
  161. package/dist/components/hx-radio-group/hx-radio.d.ts +4 -2
  162. package/dist/components/hx-radio-group/hx-radio.d.ts.map +1 -1
  163. package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
  164. package/dist/components/hx-radio-group/index.js +1 -1
  165. package/dist/components/hx-rating/hx-rating.d.ts +54 -2
  166. package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
  167. package/dist/components/hx-rating/index.js +1 -1
  168. package/dist/components/hx-select/hx-select.d.ts +22 -2
  169. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  170. package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
  171. package/dist/components/hx-select/index.js +1 -1
  172. package/dist/components/hx-side-nav/hx-nav-item.d.ts +6 -0
  173. package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
  174. package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
  175. package/dist/components/hx-side-nav/hx-side-nav.d.ts +6 -1
  176. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  177. package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
  178. package/dist/components/hx-side-nav/index.js +1 -1
  179. package/dist/components/hx-slider/hx-slider.d.ts +22 -1
  180. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  181. package/dist/components/hx-slider/hx-slider.styles.d.ts.map +1 -1
  182. package/dist/components/hx-slider/index.js +1 -1
  183. package/dist/components/hx-spinner/hx-spinner.d.ts +3 -1
  184. package/dist/components/hx-spinner/hx-spinner.d.ts.map +1 -1
  185. package/dist/components/hx-spinner/index.js +1 -1
  186. package/dist/components/hx-split-button/hx-split-button.d.ts +12 -0
  187. package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
  188. package/dist/components/hx-split-button/index.js +1 -1
  189. package/dist/components/hx-split-panel/hx-split-panel.d.ts +32 -2
  190. package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
  191. package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
  192. package/dist/components/hx-split-panel/index.js +1 -1
  193. package/dist/components/hx-stack/index.js +1 -1
  194. package/dist/components/hx-stat/hx-stat.d.ts +5 -1
  195. package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
  196. package/dist/components/hx-stat/index.js +1 -1
  197. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +13 -12
  198. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
  199. package/dist/components/hx-status-indicator/index.js +1 -1
  200. package/dist/components/hx-steps/hx-step.d.ts +7 -9
  201. package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
  202. package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
  203. package/dist/components/hx-steps/hx-steps.d.ts +3 -3
  204. package/dist/components/hx-steps/hx-steps.d.ts.map +1 -1
  205. package/dist/components/hx-steps/index.js +1 -1
  206. package/dist/components/hx-switch/hx-switch.d.ts +21 -1
  207. package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
  208. package/dist/components/hx-switch/index.js +1 -1
  209. package/dist/components/hx-table/hx-table.d.ts +7 -2
  210. package/dist/components/hx-table/hx-table.d.ts.map +1 -1
  211. package/dist/components/hx-table/hx-table.styles.d.ts.map +1 -1
  212. package/dist/components/hx-table/hx-th.d.ts +4 -0
  213. package/dist/components/hx-table/hx-th.d.ts.map +1 -1
  214. package/dist/components/hx-table/index.js +1 -1
  215. package/dist/components/hx-tabs/hx-tab.d.ts +3 -0
  216. package/dist/components/hx-tabs/hx-tab.d.ts.map +1 -1
  217. package/dist/components/hx-tabs/hx-tabs.d.ts +6 -0
  218. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  219. package/dist/components/hx-tabs/index.js +1 -1
  220. package/dist/components/hx-tag/hx-tag.d.ts +2 -0
  221. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  222. package/dist/components/hx-tag/index.js +1 -1
  223. package/dist/components/hx-text/hx-text.d.ts +1 -0
  224. package/dist/components/hx-text/hx-text.d.ts.map +1 -1
  225. package/dist/components/hx-text/index.js +1 -1
  226. package/dist/components/hx-text-input/hx-text-input.d.ts +8 -3
  227. package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
  228. package/dist/components/hx-text-input/index.js +1 -1
  229. package/dist/components/hx-textarea/hx-textarea.d.ts +9 -3
  230. package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
  231. package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
  232. package/dist/components/hx-textarea/index.js +1 -1
  233. package/dist/components/hx-theme/hx-theme.d.ts +2 -2
  234. package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
  235. package/dist/components/hx-time-picker/hx-time-picker.d.ts +22 -3
  236. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  237. package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
  238. package/dist/components/hx-time-picker/index.js +1 -1
  239. package/dist/components/hx-toast/hx-toast.d.ts +8 -0
  240. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  241. package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
  242. package/dist/components/hx-toast/index.js +1 -1
  243. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +23 -0
  244. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
  245. package/dist/components/hx-toggle-button/index.js +1 -1
  246. package/dist/components/hx-tooltip/hx-tooltip.d.ts +57 -0
  247. package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
  248. package/dist/components/hx-tooltip/index.js +1 -1
  249. package/dist/components/hx-top-nav/hx-top-nav.d.ts +4 -0
  250. package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
  251. package/dist/components/hx-top-nav/index.js +1 -1
  252. package/dist/components/hx-tree-view/hx-tree-item.d.ts +2 -0
  253. package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
  254. package/dist/components/hx-tree-view/hx-tree-view.d.ts +11 -0
  255. package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
  256. package/dist/components/hx-tree-view/index.js +1 -1
  257. package/dist/index.js +70 -70
  258. package/dist/shared/{hx-accordion-DT8qHOay.js → hx-accordion-D1kFhdeQ.js} +15 -3
  259. package/dist/shared/hx-accordion-D1kFhdeQ.js.map +1 -0
  260. package/dist/shared/{hx-action-bar-we_WJety.js → hx-action-bar-D4bulGQP.js} +38 -31
  261. package/dist/shared/hx-action-bar-D4bulGQP.js.map +1 -0
  262. package/dist/shared/{hx-alert-D6uok29t.js → hx-alert-CSxCF2rr.js} +74 -53
  263. package/dist/shared/hx-alert-CSxCF2rr.js.map +1 -0
  264. package/dist/shared/{hx-avatar-Cep6Urm3.js → hx-avatar-Cun-O99h.js} +5 -1
  265. package/dist/shared/hx-avatar-Cun-O99h.js.map +1 -0
  266. package/dist/shared/{hx-badge-BeuWuUj_.js → hx-badge-CsFd2xtw.js} +53 -43
  267. package/dist/shared/hx-badge-CsFd2xtw.js.map +1 -0
  268. package/dist/shared/{hx-banner-DnCBJtRR.js → hx-banner-BTV-X2xF.js} +55 -43
  269. package/dist/shared/{hx-banner-DnCBJtRR.js.map → hx-banner-BTV-X2xF.js.map} +1 -1
  270. package/dist/shared/{hx-breadcrumb-item-Bj2UqhzR.js → hx-breadcrumb-item-4IwaLgaO.js} +34 -22
  271. package/dist/shared/hx-breadcrumb-item-4IwaLgaO.js.map +1 -0
  272. package/dist/shared/{hx-button-Cbhqpm5i.js → hx-button-7k-KeCYU.js} +29 -15
  273. package/dist/shared/hx-button-7k-KeCYU.js.map +1 -0
  274. package/dist/shared/{hx-card-B9j2SHyI.js → hx-card-0hT3G5hi.js} +10 -3
  275. package/dist/shared/hx-card-0hT3G5hi.js.map +1 -0
  276. package/dist/shared/{hx-carousel-item-Be0bC-7o.js → hx-carousel-item-DgeYyYZJ.js} +106 -89
  277. package/dist/shared/hx-carousel-item-DgeYyYZJ.js.map +1 -0
  278. package/dist/shared/{hx-checkbox-CuaJqEo7.js → hx-checkbox-BvjO-O41.js} +13 -6
  279. package/dist/shared/hx-checkbox-BvjO-O41.js.map +1 -0
  280. package/dist/shared/{hx-checkbox-group-ydUdV9Sx.js → hx-checkbox-group-Z5VvWzcj.js} +50 -37
  281. package/dist/shared/hx-checkbox-group-Z5VvWzcj.js.map +1 -0
  282. package/dist/shared/{hx-code-snippet-DBwIjl5p.js → hx-code-snippet-DqzPkH4K.js} +17 -1
  283. package/dist/shared/hx-code-snippet-DqzPkH4K.js.map +1 -0
  284. package/dist/shared/hx-color-picker-Da8z6AlQ.js +596 -0
  285. package/dist/shared/hx-color-picker-Da8z6AlQ.js.map +1 -0
  286. package/dist/shared/{hx-combobox-CNvY-es8.js → hx-combobox-CivfelTS.js} +93 -459
  287. package/dist/shared/hx-combobox-CivfelTS.js.map +1 -0
  288. package/dist/shared/{hx-copy-button-CLBA31to.js → hx-copy-button--0dymSvw.js} +9 -1
  289. package/dist/shared/{hx-copy-button-CLBA31to.js.map → hx-copy-button--0dymSvw.js.map} +1 -1
  290. package/dist/shared/{hx-counter-D-1NXzGs.js → hx-counter-Duf00H7p.js} +58 -49
  291. package/dist/shared/hx-counter-Duf00H7p.js.map +1 -0
  292. package/dist/shared/{hx-data-table-BwoJCFgs.js → hx-data-table-BWvd5NNx.js} +123 -89
  293. package/dist/shared/hx-data-table-BWvd5NNx.js.map +1 -0
  294. package/dist/shared/{hx-date-picker-DDcIBJir.js → hx-date-picker-6voxxxNE.js} +119 -485
  295. package/dist/shared/hx-date-picker-6voxxxNE.js.map +1 -0
  296. package/dist/shared/{hx-dialog-M7so0sRT.js → hx-dialog-DkUSnVgw.js} +72 -52
  297. package/dist/shared/hx-dialog-DkUSnVgw.js.map +1 -0
  298. package/dist/shared/{hx-divider-XgWIz4Mr.js → hx-divider-DNNs4e8q.js} +2 -1
  299. package/dist/shared/{hx-divider-XgWIz4Mr.js.map → hx-divider-DNNs4e8q.js.map} +1 -1
  300. package/dist/shared/{hx-drawer-CYxuhIQ0.js → hx-drawer-CJcRZcns.js} +85 -56
  301. package/dist/shared/hx-drawer-CJcRZcns.js.map +1 -0
  302. package/dist/shared/{hx-dropdown-7cfowTWv.js → hx-dropdown-Bo0KTM1A.js} +29 -20
  303. package/dist/shared/hx-dropdown-Bo0KTM1A.js.map +1 -0
  304. package/dist/shared/{hx-field-CDP8EXuj.js → hx-field-3MmzJ4kZ.js} +21 -13
  305. package/dist/shared/hx-field-3MmzJ4kZ.js.map +1 -0
  306. package/dist/shared/{hx-file-upload-9HbONfqt.js → hx-file-upload-ByjAgfNy.js} +103 -64
  307. package/dist/shared/hx-file-upload-ByjAgfNy.js.map +1 -0
  308. package/dist/shared/hx-form-BpS6v3Iu.js +258 -0
  309. package/dist/shared/hx-form-BpS6v3Iu.js.map +1 -0
  310. package/dist/shared/{hx-format-date-BsVr8gpD.js → hx-format-date-BdnWV2kX.js} +7 -1
  311. package/dist/shared/hx-format-date-BdnWV2kX.js.map +1 -0
  312. package/dist/shared/{hx-grid-BsDBCTbt.js → hx-grid-gEjuF0cR.js} +25 -18
  313. package/dist/shared/hx-grid-gEjuF0cR.js.map +1 -0
  314. package/dist/shared/{hx-help-text-DaOPN1iB.js → hx-help-text-BAcEGRUE.js} +2 -2
  315. package/dist/shared/{hx-help-text-DaOPN1iB.js.map → hx-help-text-BAcEGRUE.js.map} +1 -1
  316. package/dist/shared/{hx-icon--xsJztDh.js → hx-icon-CP6OnLoM.js} +6 -1
  317. package/dist/shared/hx-icon-CP6OnLoM.js.map +1 -0
  318. package/dist/shared/{hx-icon-button-iu0i_faq.js → hx-icon-button-DzH_bRtC.js} +15 -1
  319. package/dist/shared/{hx-icon-button-iu0i_faq.js.map → hx-icon-button-DzH_bRtC.js.map} +1 -1
  320. package/dist/shared/{hx-image-xyb_tHCR.js → hx-image-C6pGiI6c.js} +6 -1
  321. package/dist/shared/hx-image-C6pGiI6c.js.map +1 -0
  322. package/dist/shared/{hx-link-DfNy_UU8.js → hx-link-Tmk_YPvW.js} +46 -37
  323. package/dist/shared/hx-link-Tmk_YPvW.js.map +1 -0
  324. package/dist/shared/{hx-list-CdRNgeoP.js → hx-list-DwInEX2H.js} +63 -37
  325. package/dist/shared/hx-list-DwInEX2H.js.map +1 -0
  326. package/dist/shared/{hx-menu-divider-DR8klkFT.js → hx-menu-divider-DR4G_rqw.js} +71 -40
  327. package/dist/shared/hx-menu-divider-DR4G_rqw.js.map +1 -0
  328. package/dist/shared/{hx-meter-CZ7lnMra.js → hx-meter-uXkTZq-W.js} +77 -61
  329. package/dist/shared/hx-meter-uXkTZq-W.js.map +1 -0
  330. package/dist/shared/{hx-nav-DM6-cGKF.js → hx-nav-3JsN2Oak.js} +64 -47
  331. package/dist/shared/hx-nav-3JsN2Oak.js.map +1 -0
  332. package/dist/shared/{hx-nav-item-D54-5eUM.js → hx-nav-item-D3EJatzc.js} +40 -16
  333. package/dist/shared/hx-nav-item-D3EJatzc.js.map +1 -0
  334. package/dist/shared/{hx-number-input-BP6TIA92.js → hx-number-input-CIpL2BEh.js} +65 -34
  335. package/dist/shared/hx-number-input-CIpL2BEh.js.map +1 -0
  336. package/dist/shared/{hx-overflow-menu-CobkjAb8.js → hx-overflow-menu-2kgOJ_ht.js} +76 -64
  337. package/dist/shared/hx-overflow-menu-2kgOJ_ht.js.map +1 -0
  338. package/dist/shared/{hx-pagination-10dpXS95.js → hx-pagination-Blt-fFqV.js} +113 -94
  339. package/dist/shared/hx-pagination-Blt-fFqV.js.map +1 -0
  340. package/dist/shared/{hx-popover-ULjonbaO.js → hx-popover-DxE67miP.js} +71 -66
  341. package/dist/shared/hx-popover-DxE67miP.js.map +1 -0
  342. package/dist/shared/{hx-popup-CYf9Q5sj.js → hx-popup-Dg6n_PbY.js} +13 -1
  343. package/dist/shared/hx-popup-Dg6n_PbY.js.map +1 -0
  344. package/dist/shared/{hx-progress-bar-CnTibV63.js → hx-progress-bar-Dm_EHyng.js} +65 -47
  345. package/dist/shared/hx-progress-bar-Dm_EHyng.js.map +1 -0
  346. package/dist/shared/{hx-progress-ring-BHJBaXNk.js → hx-progress-ring-DpxBDD5d.js} +35 -28
  347. package/dist/shared/hx-progress-ring-DpxBDD5d.js.map +1 -0
  348. package/dist/shared/hx-prose-Ml_L2zje.js +59 -0
  349. package/dist/shared/hx-prose-Ml_L2zje.js.map +1 -0
  350. package/dist/shared/{hx-radio-BnKcRuQu.js → hx-radio-BywgVSEu.js} +7 -8
  351. package/dist/shared/hx-radio-BywgVSEu.js.map +1 -0
  352. package/dist/shared/{hx-rating-Y_t7Z4qb.js → hx-rating-CUWBQ0fZ.js} +131 -64
  353. package/dist/shared/hx-rating-CUWBQ0fZ.js.map +1 -0
  354. package/dist/shared/{hx-select-C50lD7NS.js → hx-select-BwDwxk-M.js} +107 -169
  355. package/dist/shared/hx-select-BwDwxk-M.js.map +1 -0
  356. package/dist/shared/hx-skeleton-BHvALyd7.js.map +1 -1
  357. package/dist/shared/{hx-slider-CprSNrRi.js → hx-slider-D_0EKJyk.js} +23 -7
  358. package/dist/shared/hx-slider-D_0EKJyk.js.map +1 -0
  359. package/dist/shared/{hx-spinner-BOApJ-g9.js → hx-spinner-DMn4SChS.js} +35 -28
  360. package/dist/shared/hx-spinner-DMn4SChS.js.map +1 -0
  361. package/dist/shared/{hx-split-button-CHGy4FUc.js → hx-split-button-CypgLXw1.js} +14 -3
  362. package/dist/shared/{hx-split-button-CHGy4FUc.js.map → hx-split-button-CypgLXw1.js.map} +1 -1
  363. package/dist/shared/{hx-split-panel-DYtB45Tr.js → hx-split-panel-CV_Kr4EK.js} +58 -37
  364. package/dist/shared/hx-split-panel-CV_Kr4EK.js.map +1 -0
  365. package/dist/shared/{hx-stack-CfoW7jU7.js → hx-stack-BStY1RmV.js} +29 -29
  366. package/dist/shared/hx-stack-BStY1RmV.js.map +1 -0
  367. package/dist/shared/{hx-stat-C2wfph8W.js → hx-stat-CHntLHJM.js} +18 -10
  368. package/dist/shared/hx-stat-CHntLHJM.js.map +1 -0
  369. package/dist/shared/{hx-status-indicator-oYWOkWlD.js → hx-status-indicator-C1BwEvUw.js} +15 -12
  370. package/dist/shared/hx-status-indicator-C1BwEvUw.js.map +1 -0
  371. package/dist/shared/{hx-step-DYoIumpR.js → hx-step-BIVWSPxd.js} +45 -33
  372. package/dist/shared/hx-step-BIVWSPxd.js.map +1 -0
  373. package/dist/shared/{hx-switch-DkKchcuP.js → hx-switch-BgX8kuWt.js} +12 -3
  374. package/dist/shared/hx-switch-BgX8kuWt.js.map +1 -0
  375. package/dist/shared/{hx-tab-panel-BRNcLICw.js → hx-tab-panel-DhOq67jj.js} +11 -2
  376. package/dist/shared/hx-tab-panel-DhOq67jj.js.map +1 -0
  377. package/dist/shared/{hx-tag-B3N-vZ6B.js → hx-tag-CzOTDcXI.js} +2 -1
  378. package/dist/shared/{hx-tag-B3N-vZ6B.js.map → hx-tag-CzOTDcXI.js.map} +1 -1
  379. package/dist/shared/{hx-td-CVwCGBYf.js → hx-td-h6oeW6YC.js} +43 -41
  380. package/dist/shared/hx-td-h6oeW6YC.js.map +1 -0
  381. package/dist/shared/{hx-text-NjKoQATI.js → hx-text-DTXjiviE.js} +2 -1
  382. package/dist/shared/{hx-text-NjKoQATI.js.map → hx-text-DTXjiviE.js.map} +1 -1
  383. package/dist/shared/{hx-text-input-CCZZbWQ9.js → hx-text-input-CqEdDHMU.js} +82 -65
  384. package/dist/shared/hx-text-input-CqEdDHMU.js.map +1 -0
  385. package/dist/shared/{hx-textarea-BsQdB1Rk.js → hx-textarea-BgX7rxyo.js} +21 -12
  386. package/dist/shared/hx-textarea-BgX7rxyo.js.map +1 -0
  387. package/dist/shared/hx-theme-6GDoUG8j.js.map +1 -1
  388. package/dist/shared/{hx-time-picker-CJcIjH3C.js → hx-time-picker-DmLu7WUC.js} +73 -273
  389. package/dist/shared/hx-time-picker-DmLu7WUC.js.map +1 -0
  390. package/dist/shared/{hx-toggle-button-D4F1soEM.js → hx-toggle-button-D1jpDvSA.js} +75 -38
  391. package/dist/shared/hx-toggle-button-D1jpDvSA.js.map +1 -0
  392. package/dist/shared/{hx-tooltip-Bk1iQRHs.js → hx-tooltip-kh7QFPKu.js} +66 -49
  393. package/dist/shared/hx-tooltip-kh7QFPKu.js.map +1 -0
  394. package/dist/shared/{hx-top-nav-D2bQpns3.js → hx-top-nav-DYlnzDaU.js} +3 -1
  395. package/dist/shared/{hx-top-nav-D2bQpns3.js.map → hx-top-nav-DYlnzDaU.js.map} +1 -1
  396. package/dist/shared/{hx-tree-item-BobGN76x.js → hx-tree-item-BP6UF_H1.js} +29 -16
  397. package/dist/shared/hx-tree-item-BP6UF_H1.js.map +1 -0
  398. package/dist/shared/{toast-factory-MvMMreTu.js → toast-factory-DTy-qN8r.js} +70 -59
  399. package/dist/shared/toast-factory-DTy-qN8r.js.map +1 -0
  400. package/dist/styles/shared-field.styles.d.ts +6 -0
  401. package/dist/styles/shared-field.styles.d.ts.map +1 -0
  402. package/package.json +2 -5
  403. package/dist/shared/hx-accordion-DT8qHOay.js.map +0 -1
  404. package/dist/shared/hx-action-bar-we_WJety.js.map +0 -1
  405. package/dist/shared/hx-alert-D6uok29t.js.map +0 -1
  406. package/dist/shared/hx-avatar-Cep6Urm3.js.map +0 -1
  407. package/dist/shared/hx-badge-BeuWuUj_.js.map +0 -1
  408. package/dist/shared/hx-breadcrumb-item-Bj2UqhzR.js.map +0 -1
  409. package/dist/shared/hx-button-Cbhqpm5i.js.map +0 -1
  410. package/dist/shared/hx-card-B9j2SHyI.js.map +0 -1
  411. package/dist/shared/hx-carousel-item-Be0bC-7o.js.map +0 -1
  412. package/dist/shared/hx-checkbox-CuaJqEo7.js.map +0 -1
  413. package/dist/shared/hx-checkbox-group-ydUdV9Sx.js.map +0 -1
  414. package/dist/shared/hx-code-snippet-DBwIjl5p.js.map +0 -1
  415. package/dist/shared/hx-color-picker-Bb2UPVc3.js +0 -803
  416. package/dist/shared/hx-color-picker-Bb2UPVc3.js.map +0 -1
  417. package/dist/shared/hx-combobox-CNvY-es8.js.map +0 -1
  418. package/dist/shared/hx-counter-D-1NXzGs.js.map +0 -1
  419. package/dist/shared/hx-data-table-BwoJCFgs.js.map +0 -1
  420. package/dist/shared/hx-date-picker-DDcIBJir.js.map +0 -1
  421. package/dist/shared/hx-dialog-M7so0sRT.js.map +0 -1
  422. package/dist/shared/hx-drawer-CYxuhIQ0.js.map +0 -1
  423. package/dist/shared/hx-dropdown-7cfowTWv.js.map +0 -1
  424. package/dist/shared/hx-field-CDP8EXuj.js.map +0 -1
  425. package/dist/shared/hx-file-upload-9HbONfqt.js.map +0 -1
  426. package/dist/shared/hx-form-BFv_N1dm.js +0 -1272
  427. package/dist/shared/hx-form-BFv_N1dm.js.map +0 -1
  428. package/dist/shared/hx-format-date-BsVr8gpD.js.map +0 -1
  429. package/dist/shared/hx-grid-BsDBCTbt.js.map +0 -1
  430. package/dist/shared/hx-icon--xsJztDh.js.map +0 -1
  431. package/dist/shared/hx-image-xyb_tHCR.js.map +0 -1
  432. package/dist/shared/hx-link-DfNy_UU8.js.map +0 -1
  433. package/dist/shared/hx-list-CdRNgeoP.js.map +0 -1
  434. package/dist/shared/hx-menu-divider-DR8klkFT.js.map +0 -1
  435. package/dist/shared/hx-meter-CZ7lnMra.js.map +0 -1
  436. package/dist/shared/hx-nav-DM6-cGKF.js.map +0 -1
  437. package/dist/shared/hx-nav-item-D54-5eUM.js.map +0 -1
  438. package/dist/shared/hx-number-input-BP6TIA92.js.map +0 -1
  439. package/dist/shared/hx-overflow-menu-CobkjAb8.js.map +0 -1
  440. package/dist/shared/hx-pagination-10dpXS95.js.map +0 -1
  441. package/dist/shared/hx-popover-ULjonbaO.js.map +0 -1
  442. package/dist/shared/hx-popup-CYf9Q5sj.js.map +0 -1
  443. package/dist/shared/hx-progress-bar-CnTibV63.js.map +0 -1
  444. package/dist/shared/hx-progress-ring-BHJBaXNk.js.map +0 -1
  445. package/dist/shared/hx-prose-DZh2KrMb.js +0 -876
  446. package/dist/shared/hx-prose-DZh2KrMb.js.map +0 -1
  447. package/dist/shared/hx-radio-BnKcRuQu.js.map +0 -1
  448. package/dist/shared/hx-rating-Y_t7Z4qb.js.map +0 -1
  449. package/dist/shared/hx-select-C50lD7NS.js.map +0 -1
  450. package/dist/shared/hx-slider-CprSNrRi.js.map +0 -1
  451. package/dist/shared/hx-spinner-BOApJ-g9.js.map +0 -1
  452. package/dist/shared/hx-split-panel-DYtB45Tr.js.map +0 -1
  453. package/dist/shared/hx-stack-CfoW7jU7.js.map +0 -1
  454. package/dist/shared/hx-stat-C2wfph8W.js.map +0 -1
  455. package/dist/shared/hx-status-indicator-oYWOkWlD.js.map +0 -1
  456. package/dist/shared/hx-step-DYoIumpR.js.map +0 -1
  457. package/dist/shared/hx-switch-DkKchcuP.js.map +0 -1
  458. package/dist/shared/hx-tab-panel-BRNcLICw.js.map +0 -1
  459. package/dist/shared/hx-td-CVwCGBYf.js.map +0 -1
  460. package/dist/shared/hx-text-input-CCZZbWQ9.js.map +0 -1
  461. package/dist/shared/hx-textarea-BsQdB1Rk.js.map +0 -1
  462. package/dist/shared/hx-time-picker-CJcIjH3C.js.map +0 -1
  463. package/dist/shared/hx-toggle-button-D4F1soEM.js.map +0 -1
  464. package/dist/shared/hx-tooltip-Bk1iQRHs.js.map +0 -1
  465. package/dist/shared/hx-tree-item-BobGN76x.js.map +0 -1
  466. package/dist/shared/toast-factory-MvMMreTu.js.map +0 -1
@@ -1,1272 +0,0 @@
1
- import { LitElement as l, html as m, nothing as f } from "lit";
2
- import { state as x, property as h, customElement as p } from "lit/decorators.js";
3
- import { ifDefined as u } from "lit/directives/if-defined.js";
4
- import { A as d } from "./adopted-stylesheets-BZZnCSAs.js";
5
- const v = `/* ==========================================================================
6
- * form.scoped.css — Scoped barrel file
7
- *
8
- * Contains all form styles with every selector prefixed by \`hx-form\` to
9
- * prevent leaking outside the <hx-form> Light DOM wrapper.
10
- *
11
- * IMPORTANT: This file does NOT use @import because CSS imports cannot
12
- * add scope prefixes. All styles are written inline.
13
- * ==========================================================================
14
- */
15
-
16
- /* ==========================================================================
17
- * HOST / FORM ROOT TOKENS
18
- * ========================================================================== */
19
-
20
- hx-form {
21
- display: flex;
22
- flex-direction: column;
23
- gap: var(--hx-form-gap, var(--hx-space-4, 1rem));
24
- max-width: var(--hx-form-max-width, none);
25
- padding: var(--hx-form-padding, 0);
26
- }
27
-
28
- /* ==========================================================================
29
- * ERROR SUMMARY
30
- * ========================================================================== */
31
-
32
- hx-form .hx-form-error-summary {
33
- border: var(--hx-border-width-thin, 1px) solid
34
- var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
35
- border-radius: var(--hx-border-radius-md, 0.375rem);
36
- background-color: var(--hx-color-error-50, #fef2f2);
37
- color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
38
- padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
39
- font-size: var(--hx-font-size-sm, 0.875rem);
40
- line-height: var(--hx-line-height-normal, 1.5);
41
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
42
- }
43
-
44
- hx-form .hx-form-error-summary ul {
45
- margin: 0;
46
- padding: 0 0 0 var(--hx-space-4, 1rem);
47
- }
48
-
49
- hx-form .hx-form-error-summary li {
50
- margin-bottom: var(--hx-space-1, 0.25rem);
51
- }
52
-
53
- hx-form .hx-form-error-summary li:last-child {
54
- margin-bottom: 0;
55
- }
56
-
57
- /* ==========================================================================
58
- * FIELD (_field.css scoped)
59
- * ========================================================================== */
60
-
61
- /* ─── Field Container ─── */
62
-
63
- hx-form .form-item {
64
- display: flex;
65
- flex-direction: column;
66
- gap: var(--hx-space-1, 0.25rem);
67
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
68
- }
69
-
70
- hx-form .form-item + .form-item {
71
- margin-top: var(--hx-space-4, 1rem);
72
- }
73
-
74
- /* ─── Label ─── */
75
-
76
- hx-form label {
77
- display: flex;
78
- align-items: baseline;
79
- gap: var(--hx-space-1, 0.25rem);
80
- font-size: var(--hx-font-size-sm, 0.875rem);
81
- font-weight: var(--hx-font-weight-medium, 500);
82
- color: var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));
83
- line-height: var(--hx-line-height-normal, 1.5);
84
- }
85
-
86
- /* ─── Required Marker ─── */
87
-
88
- hx-form .form-required {
89
- color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
90
- font-weight: var(--hx-font-weight-bold, 700);
91
- }
92
-
93
- /* ─── Description / Help Text ─── */
94
-
95
- hx-form .description {
96
- font-size: var(--hx-font-size-xs, 0.75rem);
97
- color: var(--hx-color-neutral-500, #6c757d);
98
- line-height: var(--hx-line-height-normal, 1.5);
99
- }
100
-
101
- /* ─── Box Sizing Reset ─── */
102
-
103
- hx-form .form-item *,
104
- hx-form .form-item *::before,
105
- hx-form .form-item *::after {
106
- box-sizing: border-box;
107
- }
108
-
109
- /* ==========================================================================
110
- * TEXT INPUT (_text-input.css scoped)
111
- * ========================================================================== */
112
-
113
- hx-form input[type='text'],
114
- hx-form input[type='email'],
115
- hx-form input[type='password'],
116
- hx-form input[type='tel'],
117
- hx-form input[type='url'],
118
- hx-form input[type='search'],
119
- hx-form input[type='number'] {
120
- display: block;
121
- width: 100%;
122
- border: var(--hx-border-width-thin, 1px) solid
123
- var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
124
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
125
- background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
126
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
127
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
128
- font-size: var(--hx-font-size-md, 1rem);
129
- color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));
130
- line-height: var(--hx-line-height-normal, 1.5);
131
- min-height: var(--hx-size-10, 2.5rem);
132
- transition:
133
- border-color var(--hx-transition-fast, 150ms ease),
134
- box-shadow var(--hx-transition-fast, 150ms ease);
135
- }
136
-
137
- /* ─── Placeholder ─── */
138
-
139
- hx-form input[type='text']::placeholder,
140
- hx-form input[type='email']::placeholder,
141
- hx-form input[type='password']::placeholder,
142
- hx-form input[type='tel']::placeholder,
143
- hx-form input[type='url']::placeholder,
144
- hx-form input[type='search']::placeholder,
145
- hx-form input[type='number']::placeholder {
146
- color: var(--hx-color-neutral-400, #adb5bd);
147
- }
148
-
149
- /* ─── Focus State ─── */
150
-
151
- hx-form input[type='text']:focus,
152
- hx-form input[type='email']:focus,
153
- hx-form input[type='password']:focus,
154
- hx-form input[type='tel']:focus,
155
- hx-form input[type='url']:focus,
156
- hx-form input[type='search']:focus,
157
- hx-form input[type='number']:focus {
158
- outline: 0;
159
- border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
160
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
161
- color-mix(
162
- in srgb,
163
- var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))
164
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
165
- transparent
166
- );
167
- }
168
-
169
- @media (forced-colors: active) {
170
- hx-form input[type='text']:focus,
171
- hx-form input[type='email']:focus,
172
- hx-form input[type='password']:focus,
173
- hx-form input[type='tel']:focus,
174
- hx-form input[type='url']:focus,
175
- hx-form input[type='search']:focus,
176
- hx-form input[type='number']:focus {
177
- outline: var(--hx-focus-ring-width, 2px) solid ButtonText;
178
- outline-offset: var(--hx-focus-ring-offset, 2px);
179
- }
180
- }
181
-
182
- /* ─── Disabled State ─── */
183
-
184
- hx-form input[type='text']:disabled,
185
- hx-form input[type='email']:disabled,
186
- hx-form input[type='password']:disabled,
187
- hx-form input[type='tel']:disabled,
188
- hx-form input[type='url']:disabled,
189
- hx-form input[type='search']:disabled,
190
- hx-form input[type='number']:disabled {
191
- opacity: var(--hx-opacity-disabled, 0.5);
192
- cursor: not-allowed;
193
- pointer-events: none;
194
- }
195
-
196
- /* ─── Read-Only State ─── */
197
-
198
- hx-form input[type='text']:read-only,
199
- hx-form input[type='email']:read-only,
200
- hx-form input[type='password']:read-only,
201
- hx-form input[type='tel']:read-only,
202
- hx-form input[type='url']:read-only,
203
- hx-form input[type='search']:read-only,
204
- hx-form input[type='number']:read-only {
205
- background-color: var(--hx-color-neutral-100, #e9ecef);
206
- }
207
-
208
- /* ─── Remove browser search decorations ─── */
209
-
210
- hx-form input[type='search']::-webkit-search-decoration,
211
- hx-form input[type='search']::-webkit-search-cancel-button,
212
- hx-form input[type='search']::-webkit-search-results-button,
213
- hx-form input[type='search']::-webkit-search-results-decoration {
214
- -webkit-appearance: none;
215
- }
216
-
217
- /* ─── Remove number input spinners ─── */
218
-
219
- hx-form input[type='number']::-webkit-inner-spin-button,
220
- hx-form input[type='number']::-webkit-outer-spin-button {
221
- -webkit-appearance: none;
222
- margin: 0;
223
- }
224
-
225
- hx-form input[type='number'] {
226
- appearance: textfield;
227
- }
228
-
229
- /* ==========================================================================
230
- * TEXTAREA (_textarea.css scoped)
231
- * ========================================================================== */
232
-
233
- hx-form textarea {
234
- display: block;
235
- width: 100%;
236
- border: var(--hx-border-width-thin, 1px) solid
237
- var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
238
- border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
239
- background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
240
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
241
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
242
- font-size: var(--hx-font-size-md, 1rem);
243
- color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));
244
- line-height: var(--hx-line-height-normal, 1.5);
245
- min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
246
- resize: vertical;
247
- transition:
248
- border-color var(--hx-transition-fast, 150ms ease),
249
- box-shadow var(--hx-transition-fast, 150ms ease);
250
- }
251
-
252
- hx-form textarea::placeholder {
253
- color: var(--hx-color-neutral-400, #adb5bd);
254
- }
255
-
256
- hx-form textarea:focus {
257
- outline: 0;
258
- border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
259
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
260
- color-mix(
261
- in srgb,
262
- var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))
263
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
264
- transparent
265
- );
266
- }
267
-
268
- @media (forced-colors: active) {
269
- hx-form textarea:focus {
270
- outline: var(--hx-focus-ring-width, 2px) solid ButtonText;
271
- outline-offset: var(--hx-focus-ring-offset, 2px);
272
- }
273
- }
274
-
275
- hx-form textarea:disabled {
276
- opacity: var(--hx-opacity-disabled, 0.5);
277
- cursor: not-allowed;
278
- pointer-events: none;
279
- }
280
-
281
- hx-form textarea:read-only {
282
- background-color: var(--hx-color-neutral-100, #e9ecef);
283
- }
284
-
285
- /* ==========================================================================
286
- * SELECT (_select.css scoped)
287
- * ========================================================================== */
288
-
289
- hx-form select {
290
- display: block;
291
- width: 100%;
292
- border: var(--hx-border-width-thin, 1px) solid
293
- var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
294
- border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
295
- background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
296
- padding: var(--hx-space-2, 0.5rem) var(--hx-space-8, 2rem) var(--hx-space-2, 0.5rem)
297
- var(--hx-space-3, 0.75rem);
298
- font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));
299
- font-size: var(--hx-font-size-md, 1rem);
300
- color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
301
- line-height: var(--hx-line-height-normal, 1.5);
302
- min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
303
- cursor: pointer;
304
- transition:
305
- border-color var(--hx-transition-fast, 150ms ease),
306
- box-shadow var(--hx-transition-fast, 150ms ease);
307
- appearance: none;
308
- -webkit-appearance: none;
309
- -moz-appearance: none;
310
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
311
- background-repeat: no-repeat;
312
- background-position: right var(--hx-space-3, 0.75rem) center;
313
- background-size: 12px 8px;
314
- }
315
-
316
- hx-form select:focus {
317
- outline: 0;
318
- border-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
319
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
320
- color-mix(
321
- in srgb,
322
- var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb))
323
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
324
- transparent
325
- );
326
- }
327
-
328
- @media (forced-colors: active) {
329
- hx-form select:focus {
330
- outline: var(--hx-focus-ring-width, 2px) solid ButtonText;
331
- outline-offset: var(--hx-focus-ring-offset, 2px);
332
- }
333
- }
334
-
335
- hx-form select:disabled {
336
- opacity: var(--hx-opacity-disabled, 0.5);
337
- cursor: not-allowed;
338
- pointer-events: none;
339
- }
340
-
341
- hx-form select[multiple] {
342
- min-height: var(--hx-size-20, 5rem);
343
- padding-right: var(--hx-space-3, 0.75rem);
344
- background-image: none;
345
- }
346
-
347
- hx-form select[multiple] option {
348
- padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
349
- }
350
-
351
- hx-form select::-ms-expand {
352
- display: none;
353
- }
354
-
355
- /* ==========================================================================
356
- * CHECKBOX (_checkbox.css scoped)
357
- * ========================================================================== */
358
-
359
- hx-form input[type='checkbox'] {
360
- appearance: none;
361
- -webkit-appearance: none;
362
- -moz-appearance: none;
363
- display: inline-flex;
364
- align-items: center;
365
- justify-content: center;
366
- flex-shrink: 0;
367
- width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
368
- height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
369
- margin: 0;
370
- border: var(--hx-border-width-medium, 2px) solid
371
- var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));
372
- border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
373
- background-color: var(--hx-color-neutral-0, #ffffff);
374
- transition:
375
- background-color var(--hx-transition-fast, 150ms ease),
376
- border-color var(--hx-transition-fast, 150ms ease),
377
- box-shadow var(--hx-transition-fast, 150ms ease);
378
- cursor: pointer;
379
- vertical-align: middle;
380
- }
381
-
382
- hx-form input[type='checkbox']:checked {
383
- background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
384
- border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
385
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
386
- background-repeat: no-repeat;
387
- background-position: center;
388
- background-size: 100%;
389
- }
390
-
391
- hx-form input[type='checkbox']:indeterminate {
392
- background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
393
- border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
394
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8H12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
395
- background-repeat: no-repeat;
396
- background-position: center;
397
- background-size: 100%;
398
- }
399
-
400
- hx-form input[type='checkbox']:focus-visible {
401
- outline: var(--hx-focus-ring-width, 2px) solid
402
- var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
403
- outline-offset: var(--hx-focus-ring-offset, 2px);
404
- }
405
-
406
- hx-form input[type='checkbox']:hover:not(:disabled) {
407
- border-color: var(--hx-color-primary-500, #2563eb);
408
- }
409
-
410
- hx-form input[type='checkbox']:checked:hover:not(:disabled) {
411
- filter: brightness(var(--hx-filter-brightness-hover, 0.9));
412
- }
413
-
414
- hx-form input[type='checkbox']:disabled {
415
- opacity: var(--hx-opacity-disabled, 0.5);
416
- cursor: not-allowed;
417
- pointer-events: none;
418
- }
419
-
420
- hx-form .form-type-checkbox,
421
- hx-form .form-type-checkbox-toggle {
422
- display: flex;
423
- align-items: flex-start;
424
- gap: var(--hx-space-2, 0.5rem);
425
- }
426
-
427
- hx-form .form-type-checkbox label,
428
- hx-form .form-type-checkbox-toggle label {
429
- font-size: var(--hx-font-size-sm, 0.875rem);
430
- font-weight: var(--hx-font-weight-medium, 500);
431
- color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));
432
- line-height: var(--hx-line-height-normal, 1.5);
433
- cursor: pointer;
434
- user-select: none;
435
- -webkit-user-select: none;
436
- }
437
-
438
- /* ==========================================================================
439
- * RADIO (_radio.css scoped)
440
- * ========================================================================== */
441
-
442
- hx-form input[type='radio'] {
443
- appearance: none;
444
- -webkit-appearance: none;
445
- -moz-appearance: none;
446
- display: inline-flex;
447
- align-items: center;
448
- justify-content: center;
449
- flex-shrink: 0;
450
- width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
451
- height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
452
- margin: 0;
453
- border: var(--hx-border-width-medium, 2px) solid
454
- var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));
455
- border-radius: var(--hx-border-radius-full, 9999px);
456
- background-color: var(--hx-color-neutral-0, #ffffff);
457
- transition:
458
- border-color var(--hx-transition-fast, 150ms ease),
459
- background-color var(--hx-transition-fast, 150ms ease),
460
- box-shadow var(--hx-transition-fast, 150ms ease);
461
- cursor: pointer;
462
- vertical-align: middle;
463
- }
464
-
465
- hx-form input[type='radio']:checked {
466
- border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));
467
- background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));
468
- box-shadow: inset 0 0 0 calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.3)
469
- var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff));
470
- }
471
-
472
- hx-form input[type='radio']:focus-visible {
473
- outline: var(--hx-focus-ring-width, 2px) solid
474
- var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
475
- outline-offset: var(--hx-focus-ring-offset, 2px);
476
- }
477
-
478
- hx-form input[type='radio']:hover:not(:disabled):not(:checked) {
479
- border-color: var(--hx-color-neutral-400, #adb5bd);
480
- }
481
-
482
- hx-form input[type='radio']:disabled {
483
- opacity: var(--hx-opacity-disabled, 0.5);
484
- cursor: not-allowed;
485
- pointer-events: none;
486
- }
487
-
488
- hx-form .form-type-radio {
489
- display: inline-flex;
490
- align-items: center;
491
- gap: var(--hx-space-2, 0.5rem);
492
- }
493
-
494
- hx-form .form-type-radio label {
495
- font-size: var(--hx-font-size-md, 1rem);
496
- color: var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));
497
- line-height: var(--hx-line-height-normal, 1.5);
498
- cursor: pointer;
499
- user-select: none;
500
- -webkit-user-select: none;
501
- }
502
-
503
- hx-form .form-radios {
504
- display: flex;
505
- flex-direction: column;
506
- gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));
507
- }
508
-
509
- hx-form .form-radios--horizontal {
510
- flex-direction: row;
511
- flex-wrap: wrap;
512
- }
513
-
514
- /* ==========================================================================
515
- * SWITCH (_switch.css scoped)
516
- * ========================================================================== */
517
-
518
- hx-form .form-type-switch {
519
- display: flex;
520
- flex-direction: column;
521
- gap: var(--hx-space-1, 0.25rem);
522
- font-family: var(--hx-font-family-sans, sans-serif);
523
- }
524
-
525
- hx-form .form-type-switch .switch__control-row {
526
- display: flex;
527
- align-items: center;
528
- gap: var(--hx-space-2, 0.5rem);
529
- }
530
-
531
- hx-form .form-type-switch input[type='checkbox'] {
532
- appearance: none;
533
- -webkit-appearance: none;
534
- -moz-appearance: none;
535
- position: relative;
536
- display: inline-flex;
537
- align-items: center;
538
- flex-shrink: 0;
539
- width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));
540
- height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));
541
- margin: 0;
542
- border: none;
543
- border-radius: var(--hx-border-radius-full, 9999px);
544
- background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));
545
- transition: background-color var(--hx-transition-fast, 150ms ease);
546
- cursor: pointer;
547
- background-image: none;
548
- }
549
-
550
- hx-form .form-type-switch input[type='checkbox']::before {
551
- content: '';
552
- position: absolute;
553
- top: 50%;
554
- left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));
555
- transform: translateY(-50%);
556
- width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));
557
- height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));
558
- border-radius: var(--hx-border-radius-full, 9999px);
559
- background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
560
- box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
561
- transition: transform var(--hx-transition-fast, 150ms ease);
562
- }
563
-
564
- hx-form .form-type-switch input[type='checkbox']:checked {
565
- background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
566
- background-image: none;
567
- }
568
-
569
- hx-form .form-type-switch input[type='checkbox']:checked::before {
570
- transform: translateY(-50%)
571
- translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));
572
- }
573
-
574
- hx-form .form-type-switch input[type='checkbox']:focus-visible {
575
- outline: var(--hx-focus-ring-width, 2px) solid
576
- var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
577
- outline-offset: var(--hx-focus-ring-offset, 2px);
578
- }
579
-
580
- hx-form .form-type-switch input[type='checkbox']:disabled {
581
- opacity: var(--hx-opacity-disabled, 0.5);
582
- cursor: not-allowed;
583
- pointer-events: none;
584
- }
585
-
586
- hx-form .form-type-switch label {
587
- font-size: var(--hx-font-size-sm, 0.875rem);
588
- font-weight: var(--hx-font-weight-medium, 500);
589
- color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));
590
- line-height: var(--hx-line-height-normal, 1.5);
591
- cursor: pointer;
592
- user-select: none;
593
- -webkit-user-select: none;
594
- }
595
-
596
- /* Small */
597
- hx-form .form-type-switch--sm input[type='checkbox'] {
598
- width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));
599
- height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));
600
- }
601
-
602
- hx-form .form-type-switch--sm input[type='checkbox']::before {
603
- width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));
604
- height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));
605
- }
606
-
607
- hx-form .form-type-switch--sm input[type='checkbox']:checked::before {
608
- transform: translateY(-50%)
609
- translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));
610
- }
611
-
612
- /* Large */
613
- hx-form .form-type-switch--lg input[type='checkbox'] {
614
- width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));
615
- height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));
616
- }
617
-
618
- hx-form .form-type-switch--lg input[type='checkbox']::before {
619
- width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));
620
- height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));
621
- }
622
-
623
- hx-form .form-type-switch--lg input[type='checkbox']:checked::before {
624
- transform: translateY(-50%)
625
- translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));
626
- }
627
-
628
- /* ==========================================================================
629
- * FORM LAYOUT (_form-layout.css scoped)
630
- * ========================================================================== */
631
-
632
- /* ─── Form Root ─── */
633
-
634
- hx-form form {
635
- display: flex;
636
- flex-direction: column;
637
- gap: var(--hx-form-gap, var(--hx-space-4, 1rem));
638
- font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
639
- }
640
-
641
- /* ─── Fieldset ─── */
642
-
643
- hx-form fieldset {
644
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);
645
- border-radius: var(--hx-border-radius-md, 0.375rem);
646
- padding: var(--hx-space-4, 1rem) var(--hx-space-4, 1rem) var(--hx-space-4, 1rem);
647
- margin: 0;
648
- display: flex;
649
- flex-direction: column;
650
- gap: var(--hx-space-4, 1rem);
651
- }
652
-
653
- /* ─── Legend ─── */
654
-
655
- hx-form legend {
656
- display: flex;
657
- align-items: baseline;
658
- gap: var(--hx-space-1, 0.25rem);
659
- font-size: var(--hx-font-size-sm, 0.875rem);
660
- font-weight: var(--hx-font-weight-semibold, 600);
661
- color: var(--hx-color-neutral-700, #343a40);
662
- line-height: var(--hx-line-height-normal, 1.5);
663
- padding: 0 var(--hx-space-1, 0.25rem);
664
- }
665
-
666
- /* ─── Details / Collapsible Fieldset (Drupal) ─── */
667
-
668
- hx-form details {
669
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);
670
- border-radius: var(--hx-border-radius-md, 0.375rem);
671
- padding: var(--hx-space-4, 1rem);
672
- margin: 0;
673
- }
674
-
675
- hx-form summary {
676
- font-size: var(--hx-font-size-sm, 0.875rem);
677
- font-weight: var(--hx-font-weight-semibold, 600);
678
- color: var(--hx-color-neutral-700, #343a40);
679
- line-height: var(--hx-line-height-normal, 1.5);
680
- cursor: pointer;
681
- padding: var(--hx-space-1, 0.25rem) 0;
682
- user-select: none;
683
- -webkit-user-select: none;
684
- }
685
-
686
- hx-form summary:focus-visible {
687
- outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
688
- outline-offset: var(--hx-focus-ring-offset, 2px);
689
- border-radius: var(--hx-border-radius-sm, 0.25rem);
690
- }
691
-
692
- /* ─── Form Actions (button group) ─── */
693
-
694
- hx-form .form-actions {
695
- display: flex;
696
- align-items: center;
697
- gap: var(--hx-space-3, 0.75rem);
698
- padding-top: var(--hx-space-4, 1rem);
699
- }
700
-
701
- hx-form .form-actions--end {
702
- justify-content: flex-end;
703
- }
704
-
705
- hx-form .form-actions--between {
706
- justify-content: space-between;
707
- }
708
-
709
- /* ─── Multi-Column Layout ─── */
710
-
711
- hx-form .form-columns {
712
- display: grid;
713
- gap: var(--hx-space-4, 1rem);
714
- }
715
-
716
- hx-form .form-columns--2 {
717
- grid-template-columns: repeat(2, 1fr);
718
- }
719
-
720
- hx-form .form-columns--3 {
721
- grid-template-columns: repeat(3, 1fr);
722
- }
723
-
724
- hx-form .form-columns--4 {
725
- grid-template-columns: repeat(4, 1fr);
726
- }
727
-
728
- @media (max-width: 640px) {
729
- hx-form .form-columns--2,
730
- hx-form .form-columns--3,
731
- hx-form .form-columns--4 {
732
- grid-template-columns: 1fr;
733
- }
734
- }
735
-
736
- /* ─── Full-Width Form Item (spans all columns) ─── */
737
-
738
- hx-form .form-item--full {
739
- grid-column: 1 / -1;
740
- }
741
-
742
- /* ─── Inline Form Layout ─── */
743
-
744
- hx-form .form-inline {
745
- display: flex;
746
- flex-wrap: wrap;
747
- align-items: flex-end;
748
- gap: var(--hx-space-3, 0.75rem);
749
- }
750
-
751
- hx-form .form-inline .form-item {
752
- flex: 1;
753
- min-width: 0;
754
- }
755
-
756
- hx-form .form-inline .form-item + .form-item {
757
- margin-top: 0;
758
- }
759
-
760
- /* ─── Form Divider ─── */
761
-
762
- hx-form .form-divider {
763
- border: none;
764
- border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);
765
- margin: var(--hx-space-2, 0.5rem) 0;
766
- }
767
-
768
- /* ==========================================================================
769
- * VALIDATION (_validation.css scoped)
770
- * ========================================================================== */
771
-
772
- /* ─── Error State on Field Wrapper ─── */
773
-
774
- hx-form .form-item.error label,
775
- hx-form .form-item.has-error label,
776
- hx-form .form-item--error label {
777
- color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
778
- }
779
-
780
- hx-form .form-item.error input[type='text'],
781
- hx-form .form-item.error input[type='email'],
782
- hx-form .form-item.error input[type='password'],
783
- hx-form .form-item.error input[type='tel'],
784
- hx-form .form-item.error input[type='url'],
785
- hx-form .form-item.error input[type='search'],
786
- hx-form .form-item.error input[type='number'],
787
- hx-form .form-item.error textarea,
788
- hx-form .form-item.error select,
789
- hx-form .form-item.has-error input[type='text'],
790
- hx-form .form-item.has-error input[type='email'],
791
- hx-form .form-item.has-error input[type='password'],
792
- hx-form .form-item.has-error input[type='tel'],
793
- hx-form .form-item.has-error input[type='url'],
794
- hx-form .form-item.has-error input[type='search'],
795
- hx-form .form-item.has-error input[type='number'],
796
- hx-form .form-item.has-error textarea,
797
- hx-form .form-item.has-error select,
798
- hx-form .form-item--error input[type='text'],
799
- hx-form .form-item--error input[type='email'],
800
- hx-form .form-item--error input[type='password'],
801
- hx-form .form-item--error input[type='tel'],
802
- hx-form .form-item--error input[type='url'],
803
- hx-form .form-item--error input[type='search'],
804
- hx-form .form-item--error input[type='number'],
805
- hx-form .form-item--error textarea,
806
- hx-form .form-item--error select {
807
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
808
- }
809
-
810
- hx-form .form-item.error input[type='text']:focus,
811
- hx-form .form-item.error input[type='email']:focus,
812
- hx-form .form-item.error input[type='password']:focus,
813
- hx-form .form-item.error input[type='tel']:focus,
814
- hx-form .form-item.error input[type='url']:focus,
815
- hx-form .form-item.error input[type='search']:focus,
816
- hx-form .form-item.error input[type='number']:focus,
817
- hx-form .form-item.error textarea:focus,
818
- hx-form .form-item.error select:focus,
819
- hx-form .form-item.has-error input[type='text']:focus,
820
- hx-form .form-item.has-error input[type='email']:focus,
821
- hx-form .form-item.has-error input[type='password']:focus,
822
- hx-form .form-item.has-error input[type='tel']:focus,
823
- hx-form .form-item.has-error input[type='url']:focus,
824
- hx-form .form-item.has-error input[type='search']:focus,
825
- hx-form .form-item.has-error input[type='number']:focus,
826
- hx-form .form-item.has-error textarea:focus,
827
- hx-form .form-item.has-error select:focus,
828
- hx-form .form-item--error input[type='text']:focus,
829
- hx-form .form-item--error input[type='email']:focus,
830
- hx-form .form-item--error input[type='password']:focus,
831
- hx-form .form-item--error input[type='tel']:focus,
832
- hx-form .form-item--error input[type='url']:focus,
833
- hx-form .form-item--error input[type='search']:focus,
834
- hx-form .form-item--error input[type='number']:focus,
835
- hx-form .form-item--error textarea:focus,
836
- hx-form .form-item--error select:focus {
837
- border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
838
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
839
- color-mix(
840
- in srgb,
841
- var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))
842
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
843
- transparent
844
- );
845
- }
846
-
847
- /* ─── Error State on Checkbox/Radio ─── */
848
-
849
- hx-form .form-item.error input[type='checkbox'],
850
- hx-form .form-item.has-error input[type='checkbox'],
851
- hx-form .form-item--error input[type='checkbox'] {
852
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
853
- }
854
-
855
- hx-form .form-item.error input[type='checkbox']:checked,
856
- hx-form .form-item.has-error input[type='checkbox']:checked,
857
- hx-form .form-item--error input[type='checkbox']:checked {
858
- background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
859
- border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
860
- }
861
-
862
- hx-form .form-item.error input[type='radio'],
863
- hx-form .form-item.has-error input[type='radio'],
864
- hx-form .form-item--error input[type='radio'] {
865
- border-color: var(--hx-color-error-500, #dc3545);
866
- }
867
-
868
- /* ─── Inline Error Message ─── */
869
-
870
- hx-form .form-item__error-message,
871
- hx-form .form-item .error-message,
872
- hx-form .error-message {
873
- font-size: var(--hx-font-size-xs, 0.75rem);
874
- color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
875
- line-height: var(--hx-line-height-normal, 1.5);
876
- }
877
-
878
- /* ─── Success State on Field Wrapper ─── */
879
-
880
- hx-form .form-item.success label,
881
- hx-form .form-item.has-success label,
882
- hx-form .form-item--success label {
883
- color: var(--hx-color-success-500, #198754);
884
- }
885
-
886
- hx-form .form-item.success input[type='text'],
887
- hx-form .form-item.success input[type='email'],
888
- hx-form .form-item.success input[type='password'],
889
- hx-form .form-item.success input[type='tel'],
890
- hx-form .form-item.success input[type='url'],
891
- hx-form .form-item.success input[type='search'],
892
- hx-form .form-item.success input[type='number'],
893
- hx-form .form-item.success textarea,
894
- hx-form .form-item.success select,
895
- hx-form .form-item.has-success input[type='text'],
896
- hx-form .form-item.has-success input[type='email'],
897
- hx-form .form-item.has-success input[type='password'],
898
- hx-form .form-item.has-success input[type='tel'],
899
- hx-form .form-item.has-success input[type='url'],
900
- hx-form .form-item.has-success input[type='search'],
901
- hx-form .form-item.has-success input[type='number'],
902
- hx-form .form-item.has-success textarea,
903
- hx-form .form-item.has-success select,
904
- hx-form .form-item--success input[type='text'],
905
- hx-form .form-item--success input[type='email'],
906
- hx-form .form-item--success input[type='password'],
907
- hx-form .form-item--success input[type='tel'],
908
- hx-form .form-item--success input[type='url'],
909
- hx-form .form-item--success input[type='search'],
910
- hx-form .form-item--success input[type='number'],
911
- hx-form .form-item--success textarea,
912
- hx-form .form-item--success select {
913
- border-color: var(--hx-color-success-500, #198754);
914
- }
915
-
916
- hx-form .form-item.success input[type='text']:focus,
917
- hx-form .form-item.success input[type='email']:focus,
918
- hx-form .form-item.success input[type='password']:focus,
919
- hx-form .form-item.success input[type='tel']:focus,
920
- hx-form .form-item.success input[type='url']:focus,
921
- hx-form .form-item.success input[type='search']:focus,
922
- hx-form .form-item.success input[type='number']:focus,
923
- hx-form .form-item.success textarea:focus,
924
- hx-form .form-item.success select:focus,
925
- hx-form .form-item.has-success input[type='text']:focus,
926
- hx-form .form-item.has-success input[type='email']:focus,
927
- hx-form .form-item.has-success input[type='password']:focus,
928
- hx-form .form-item.has-success input[type='tel']:focus,
929
- hx-form .form-item.has-success input[type='url']:focus,
930
- hx-form .form-item.has-success input[type='search']:focus,
931
- hx-form .form-item.has-success input[type='number']:focus,
932
- hx-form .form-item.has-success textarea:focus,
933
- hx-form .form-item.has-success select:focus,
934
- hx-form .form-item--success input[type='text']:focus,
935
- hx-form .form-item--success input[type='email']:focus,
936
- hx-form .form-item--success input[type='password']:focus,
937
- hx-form .form-item--success input[type='tel']:focus,
938
- hx-form .form-item--success input[type='url']:focus,
939
- hx-form .form-item--success input[type='search']:focus,
940
- hx-form .form-item--success input[type='number']:focus,
941
- hx-form .form-item--success textarea:focus,
942
- hx-form .form-item--success select:focus {
943
- border-color: var(--hx-color-success-500, #198754);
944
- box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
945
- color-mix(
946
- in srgb,
947
- var(--hx-color-success-500, #198754) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
948
- transparent
949
- );
950
- }
951
-
952
- /* ─── Inline Success Message ─── */
953
-
954
- hx-form .form-item__success-message,
955
- hx-form .form-item .success-message,
956
- hx-form .success-message {
957
- font-size: var(--hx-font-size-xs, 0.75rem);
958
- color: var(--hx-color-success-500, #198754);
959
- line-height: var(--hx-line-height-normal, 1.5);
960
- }
961
-
962
- /* ─── Drupal System Messages ─── */
963
-
964
- hx-form .messages--error {
965
- border: var(--hx-border-width-thin, 1px) solid
966
- var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
967
- border-radius: var(--hx-border-radius-md, 0.375rem);
968
- background-color: var(--hx-color-error-50, #fef2f2);
969
- color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
970
- padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
971
- font-size: var(--hx-font-size-sm, 0.875rem);
972
- line-height: var(--hx-line-height-normal, 1.5);
973
- }
974
-
975
- hx-form .messages--status {
976
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-success-500, #198754);
977
- border-radius: var(--hx-border-radius-md, 0.375rem);
978
- background-color: var(--hx-color-success-50, #f0fdf4);
979
- color: var(--hx-color-success-500, #198754);
980
- padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
981
- font-size: var(--hx-font-size-sm, 0.875rem);
982
- line-height: var(--hx-line-height-normal, 1.5);
983
- }
984
-
985
- hx-form .messages--warning {
986
- border: var(--hx-border-width-thin, 1px) solid var(--hx-color-warning-500, #ffc107);
987
- border-radius: var(--hx-border-radius-md, 0.375rem);
988
- background-color: var(--hx-color-warning-50, #fffbeb);
989
- color: var(--hx-color-warning-700, #92400e);
990
- padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
991
- font-size: var(--hx-font-size-sm, 0.875rem);
992
- line-height: var(--hx-line-height-normal, 1.5);
993
- }
994
-
995
- /* ==========================================================================
996
- * FORCED-COLORS / HIGH CONTRAST MODE (P1-01)
997
- *
998
- * When box-shadow is used for focus rings, it is invisible in Windows
999
- * High Contrast Mode. Restore a visible outline.
1000
- * ========================================================================== */
1001
-
1002
- @media (forced-colors: active) {
1003
- hx-form input[type='text']:focus,
1004
- hx-form input[type='email']:focus,
1005
- hx-form input[type='password']:focus,
1006
- hx-form input[type='tel']:focus,
1007
- hx-form input[type='url']:focus,
1008
- hx-form input[type='search']:focus,
1009
- hx-form input[type='number']:focus,
1010
- hx-form textarea:focus,
1011
- hx-form select:focus {
1012
- outline: 2px solid CanvasText;
1013
- outline-offset: 2px;
1014
- }
1015
-
1016
- hx-form .hx-form-error-summary {
1017
- border-color: LinkText;
1018
- }
1019
- }
1020
- `, b = v;
1021
- var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, r, o, n) => {
1022
- for (var t = n > 1 ? void 0 : n ? g(r, o) : r, s = e.length - 1, c; s >= 0; s--)
1023
- (c = e[s]) && (t = (n ? c(r, o, t) : c(t)) || t);
1024
- return n && t && y(r, o, t), t;
1025
- };
1026
- let i = class extends l {
1027
- constructor() {
1028
- super(...arguments), this._styles = new d(this, b, document), this._validationErrors = [], this.action = "", this.method = "post", this.novalidate = !1, this.name = "", this.enctype = "application/x-www-form-urlencoded", this._handleSubmit = (e) => {
1029
- if (this.action)
1030
- return;
1031
- if (e.preventDefault(), !this.novalidate && !this.checkValidity()) {
1032
- const n = this._collectValidationErrors();
1033
- this._validationErrors = n, this._applyAriaInvalidFromValidity(), this.dispatchEvent(
1034
- new CustomEvent("hx-invalid", {
1035
- bubbles: !0,
1036
- composed: !0,
1037
- detail: { errors: n }
1038
- })
1039
- );
1040
- return;
1041
- }
1042
- this._validationErrors = [], this._clearAriaInvalid();
1043
- const r = this.getFormData(), o = {};
1044
- for (const n of new Set(r.keys())) {
1045
- const t = r.getAll(n);
1046
- t.length === 1 && t[0] !== void 0 ? o[n] = t[0] : o[n] = t;
1047
- }
1048
- this.dispatchEvent(
1049
- new CustomEvent("hx-submit", {
1050
- bubbles: !0,
1051
- composed: !0,
1052
- detail: { valid: !0, values: o, formData: r }
1053
- })
1054
- );
1055
- }, this._handleReset = () => {
1056
- this._validationErrors = [], this._clearAriaInvalid(), this.dispatchEvent(
1057
- new CustomEvent("hx-reset", {
1058
- bubbles: !0,
1059
- composed: !0
1060
- })
1061
- );
1062
- };
1063
- }
1064
- // ─── Light DOM ───
1065
- createRenderRoot() {
1066
- return this;
1067
- }
1068
- // ─── Lifecycle ───
1069
- connectedCallback() {
1070
- super.connectedCallback(), this.addEventListener("submit", this._handleSubmit), this.addEventListener("reset", this._handleReset);
1071
- }
1072
- disconnectedCallback() {
1073
- super.disconnectedCallback(), this.removeEventListener("submit", this._handleSubmit), this.removeEventListener("reset", this._handleReset);
1074
- }
1075
- // ─── Public Methods ───
1076
- /**
1077
- * Checks the validity of all child form elements without showing
1078
- * validation UI. Returns `true` if all elements are valid.
1079
- */
1080
- checkValidity() {
1081
- return this._getAllValidatableElements().every((r) => "checkValidity" in r && typeof r.checkValidity == "function" ? r.checkValidity() : !0);
1082
- }
1083
- /**
1084
- * Checks validity and triggers the browser's constraint validation UI
1085
- * on each invalid element. Returns `true` if all elements are valid.
1086
- */
1087
- reportValidity() {
1088
- const e = this._getAllValidatableElements();
1089
- let r = !0;
1090
- for (const o of e)
1091
- "reportValidity" in o && typeof o.reportValidity == "function" && (o.reportValidity() || (r = !1));
1092
- return r;
1093
- }
1094
- /**
1095
- * Collects form data from all child form elements (native and hx-*).
1096
- * Returns a `FormData` object.
1097
- */
1098
- getFormData() {
1099
- const e = this.querySelector("form");
1100
- if (e)
1101
- return new FormData(e);
1102
- const r = new FormData(), o = this.getNativeFormElements();
1103
- for (const n of o) {
1104
- const t = n;
1105
- t.name && (t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") ? t.checked && r.append(t.name, t.value || "on") : r.append(t.name, t.value));
1106
- }
1107
- return r;
1108
- }
1109
- /**
1110
- * Returns all child hx-* form components that implement the form
1111
- * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,
1112
- * hx-radio-group, hx-switch).
1113
- *
1114
- * Note: This uses a hardcoded allowlist. When a new hx-* form component
1115
- * is added, update this selector to include it.
1116
- */
1117
- getFormElements() {
1118
- return Array.from(
1119
- this.querySelectorAll(
1120
- "hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch"
1121
- )
1122
- );
1123
- }
1124
- /**
1125
- * Returns all native form elements (input, select, textarea, button)
1126
- * found within this component's light DOM.
1127
- */
1128
- getNativeFormElements() {
1129
- return Array.from(
1130
- this.querySelectorAll("input, select, textarea, button")
1131
- );
1132
- }
1133
- /**
1134
- * Programmatically sets server-side validation errors on the form.
1135
- * Renders an error summary and sets `aria-invalid="true"` on named fields.
1136
- *
1137
- * Useful for surfacing Drupal server-side validation responses.
1138
- *
1139
- * @param errors - Array of `{name, message}` pairs matching field `name` attributes.
1140
- */
1141
- setErrors(e) {
1142
- this._validationErrors = e, this._applyAriaInvalidFromErrors(e);
1143
- }
1144
- /**
1145
- * Programmatically sets a single field error. Merges with any existing errors.
1146
- *
1147
- * @param name - The `name` attribute of the field.
1148
- * @param message - The error message to display.
1149
- */
1150
- setFieldError(e, r) {
1151
- const o = this._validationErrors.filter((n) => n.name !== e);
1152
- this.setErrors([...o, { name: e, message: r }]);
1153
- }
1154
- /**
1155
- * Clears all validation errors from the error summary and removes
1156
- * `aria-invalid` from all fields.
1157
- */
1158
- clearErrors() {
1159
- this._clearAriaInvalid(), this._validationErrors = [];
1160
- }
1161
- // ─── Private Helpers ───
1162
- /**
1163
- * Returns all elements that support constraint validation, including
1164
- * both native form elements and hx-* components with `checkValidity`.
1165
- * @internal
1166
- */
1167
- _getAllValidatableElements() {
1168
- const e = Array.from(this.querySelectorAll("input, select, textarea")), r = this.getFormElements().filter(
1169
- (o) => "checkValidity" in o && typeof o.checkValidity == "function"
1170
- );
1171
- return [...e, ...r];
1172
- }
1173
- /**
1174
- * Sets `aria-invalid="true"` on fields with errors, removes it from valid fields.
1175
- * @internal
1176
- */
1177
- _applyAriaInvalidFromErrors(e) {
1178
- const r = new Set(e.map((n) => n.name)), o = this._getAllValidatableElements();
1179
- for (const n of o) {
1180
- const s = n.name ?? n.tagName.toLowerCase();
1181
- r.has(s) ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid");
1182
- }
1183
- }
1184
- /**
1185
- * Sets `aria-invalid` based on native constraint validation state.
1186
- * @internal
1187
- */
1188
- _applyAriaInvalidFromValidity() {
1189
- const e = this._getAllValidatableElements();
1190
- for (const r of e)
1191
- "validity" in r && (r.validity.valid ? r.removeAttribute("aria-invalid") : r.setAttribute("aria-invalid", "true"));
1192
- }
1193
- /**
1194
- * Removes `aria-invalid` from all validatable elements.
1195
- * @internal
1196
- */
1197
- _clearAriaInvalid() {
1198
- const e = this._getAllValidatableElements();
1199
- for (const r of e)
1200
- r.removeAttribute("aria-invalid");
1201
- }
1202
- /**
1203
- * Collects constraint validation errors from all validatable elements after a failed submit attempt.
1204
- * @internal
1205
- */
1206
- _collectValidationErrors() {
1207
- const e = [], r = this._getAllValidatableElements();
1208
- for (const o of r)
1209
- if ("validity" in o && "validationMessage" in o) {
1210
- const n = o;
1211
- n.validity.valid || e.push({
1212
- name: n.name || n.tagName.toLowerCase(),
1213
- message: n.validationMessage
1214
- });
1215
- }
1216
- return e;
1217
- }
1218
- // ─── Render ───
1219
- render() {
1220
- const e = this._validationErrors.length > 0 ? m`
1221
- <div
1222
- class="hx-form-error-summary"
1223
- role="alert"
1224
- aria-live="assertive"
1225
- aria-atomic="true"
1226
- >
1227
- <ul>
1228
- ${this._validationErrors.map(
1229
- (r) => m`<li>${r.message || r.name}</li>`
1230
- )}
1231
- </ul>
1232
- </div>
1233
- ` : f;
1234
- return this.action ? m`
1235
- ${e}
1236
- <form
1237
- action=${this.action}
1238
- method=${this.method}
1239
- enctype=${this.enctype}
1240
- name=${u(this.name || void 0)}
1241
- ?novalidate=${this.novalidate}
1242
- >
1243
- <slot></slot>
1244
- </form>
1245
- ` : m`${e}<slot></slot>`;
1246
- }
1247
- };
1248
- a([
1249
- x()
1250
- ], i.prototype, "_validationErrors", 2);
1251
- a([
1252
- h({ type: String })
1253
- ], i.prototype, "action", 2);
1254
- a([
1255
- h({ type: String })
1256
- ], i.prototype, "method", 2);
1257
- a([
1258
- h({ type: Boolean })
1259
- ], i.prototype, "novalidate", 2);
1260
- a([
1261
- h({ type: String })
1262
- ], i.prototype, "name", 2);
1263
- a([
1264
- h({ type: String })
1265
- ], i.prototype, "enctype", 2);
1266
- i = a([
1267
- p("hx-form")
1268
- ], i);
1269
- export {
1270
- i as H
1271
- };
1272
- //# sourceMappingURL=hx-form-BFv_N1dm.js.map