@helixui/library 1.0.0 → 1.0.1

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 (208) hide show
  1. package/custom-elements.json +213 -22
  2. package/dist/components/hx-accordion/hx-accordion-item.d.ts +20 -0
  3. package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
  4. package/dist/components/hx-accordion/index.js +1 -1
  5. package/dist/components/hx-alert/hx-alert.d.ts +10 -0
  6. package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
  7. package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
  8. package/dist/components/hx-alert/index.js +1 -1
  9. package/dist/components/hx-badge/hx-badge.d.ts +2 -0
  10. package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
  11. package/dist/components/hx-badge/hx-badge.styles.d.ts.map +1 -1
  12. package/dist/components/hx-badge/index.js +1 -1
  13. package/dist/components/hx-banner/hx-banner.d.ts +6 -0
  14. package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
  15. package/dist/components/hx-banner/index.js +1 -1
  16. package/dist/components/hx-breadcrumb/hx-breadcrumb-item.styles.d.ts.map +1 -1
  17. package/dist/components/hx-breadcrumb/index.js +1 -1
  18. package/dist/components/hx-card/hx-card.d.ts +1 -0
  19. package/dist/components/hx-card/hx-card.d.ts.map +1 -1
  20. package/dist/components/hx-card/hx-card.styles.d.ts.map +1 -1
  21. package/dist/components/hx-card/index.js +1 -1
  22. package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
  23. package/dist/components/hx-carousel/index.js +1 -1
  24. package/dist/components/hx-checkbox/hx-checkbox.styles.d.ts.map +1 -1
  25. package/dist/components/hx-checkbox/index.js +1 -1
  26. package/dist/components/hx-code-snippet/index.js +1 -1
  27. package/dist/components/hx-color-picker/hx-color-picker.d.ts +44 -10
  28. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  29. package/dist/components/hx-color-picker/index.js +1 -1
  30. package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
  31. package/dist/components/hx-combobox/index.js +1 -1
  32. package/dist/components/hx-data-table/hx-data-table.styles.d.ts.map +1 -1
  33. package/dist/components/hx-data-table/index.js +1 -1
  34. package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
  35. package/dist/components/hx-date-picker/index.js +1 -1
  36. package/dist/components/hx-dialog/hx-dialog.styles.d.ts.map +1 -1
  37. package/dist/components/hx-dialog/index.js +1 -1
  38. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  39. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  40. package/dist/components/hx-drawer/index.js +1 -1
  41. package/dist/components/hx-dropdown/hx-dropdown.d.ts +20 -5
  42. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  43. package/dist/components/hx-dropdown/index.js +1 -1
  44. package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
  45. package/dist/components/hx-file-upload/index.js +1 -1
  46. package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
  47. package/dist/components/hx-icon-button/index.js +1 -1
  48. package/dist/components/hx-menu/hx-menu-item.d.ts +1 -0
  49. package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
  50. package/dist/components/hx-menu/hx-menu.d.ts +1 -0
  51. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  52. package/dist/components/hx-menu/index.js +1 -1
  53. package/dist/components/hx-meter/hx-meter.d.ts +1 -0
  54. package/dist/components/hx-meter/hx-meter.d.ts.map +1 -1
  55. package/dist/components/hx-meter/hx-meter.styles.d.ts.map +1 -1
  56. package/dist/components/hx-meter/index.js +1 -1
  57. package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
  58. package/dist/components/hx-nav/index.js +1 -1
  59. package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
  60. package/dist/components/hx-overflow-menu/index.js +1 -1
  61. package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
  62. package/dist/components/hx-pagination/index.js +1 -1
  63. package/dist/components/hx-popover/hx-popover.d.ts +41 -9
  64. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  65. package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
  66. package/dist/components/hx-popover/index.js +1 -1
  67. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts +2 -0
  68. package/dist/components/hx-progress-bar/hx-progress-bar.d.ts.map +1 -1
  69. package/dist/components/hx-progress-bar/index.js +1 -1
  70. package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
  71. package/dist/components/hx-radio-group/index.js +1 -1
  72. package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
  73. package/dist/components/hx-select/index.js +1 -1
  74. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  75. package/dist/components/hx-slider/index.js +1 -1
  76. package/dist/components/hx-split-button/index.js +1 -1
  77. package/dist/components/hx-split-panel/hx-split-panel.d.ts +44 -11
  78. package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
  79. package/dist/components/hx-split-panel/hx-split-panel.styles.d.ts.map +1 -1
  80. package/dist/components/hx-split-panel/index.js +1 -1
  81. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  82. package/dist/components/hx-tabs/index.js +1 -1
  83. package/dist/components/hx-tag/hx-tag.d.ts +2 -0
  84. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  85. package/dist/components/hx-tag/hx-tag.styles.d.ts.map +1 -1
  86. package/dist/components/hx-tag/index.js +1 -1
  87. package/dist/components/hx-text-input/hx-text-input.d.ts +1 -1
  88. package/dist/components/hx-text-input/index.js +1 -1
  89. package/dist/components/hx-time-picker/hx-time-picker.d.ts +80 -19
  90. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  91. package/dist/components/hx-time-picker/index.js +1 -1
  92. package/dist/components/hx-toast/hx-toast.d.ts +10 -0
  93. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  94. package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
  95. package/dist/components/hx-toast/index.js +1 -1
  96. package/dist/components/hx-top-nav/index.js +1 -1
  97. package/dist/components/hx-tree-view/hx-tree-item.d.ts +11 -1
  98. package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
  99. package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
  100. package/dist/components/hx-tree-view/hx-tree-view.d.ts +1 -0
  101. package/dist/components/hx-tree-view/hx-tree-view.d.ts.map +1 -1
  102. package/dist/components/hx-tree-view/index.js +1 -1
  103. package/dist/index.js +37 -37
  104. package/dist/shared/{hx-accordion-Cyswa6J3.js → hx-accordion-DT8qHOay.js} +54 -37
  105. package/dist/shared/hx-accordion-DT8qHOay.js.map +1 -0
  106. package/dist/shared/{hx-alert-Cg-zxRiU.js → hx-alert-D6uok29t.js} +95 -28
  107. package/dist/shared/hx-alert-D6uok29t.js.map +1 -0
  108. package/dist/shared/{hx-badge-CjT0d8NK.js → hx-badge-BeuWuUj_.js} +57 -31
  109. package/dist/shared/hx-badge-BeuWuUj_.js.map +1 -0
  110. package/dist/shared/{hx-banner-lxAIJ2kR.js → hx-banner-DnCBJtRR.js} +27 -23
  111. package/dist/shared/{hx-banner-lxAIJ2kR.js.map → hx-banner-DnCBJtRR.js.map} +1 -1
  112. package/dist/shared/{hx-breadcrumb-item-C0rz0fzV.js → hx-breadcrumb-item-Bj2UqhzR.js} +12 -8
  113. package/dist/shared/{hx-breadcrumb-item-C0rz0fzV.js.map → hx-breadcrumb-item-Bj2UqhzR.js.map} +1 -1
  114. package/dist/shared/{hx-card-Bg4W4uXC.js → hx-card-B9j2SHyI.js} +15 -11
  115. package/dist/shared/hx-card-B9j2SHyI.js.map +1 -0
  116. package/dist/shared/{hx-carousel-item-BKpmFbUT.js → hx-carousel-item-Be0bC-7o.js} +91 -77
  117. package/dist/shared/hx-carousel-item-Be0bC-7o.js.map +1 -0
  118. package/dist/shared/{hx-checkbox-BMayOpAM.js → hx-checkbox-CuaJqEo7.js} +3 -1
  119. package/dist/shared/hx-checkbox-CuaJqEo7.js.map +1 -0
  120. package/dist/shared/{hx-code-snippet-B4hV7rWG.js → hx-code-snippet-DBwIjl5p.js} +11 -11
  121. package/dist/shared/{hx-code-snippet-B4hV7rWG.js.map → hx-code-snippet-DBwIjl5p.js.map} +1 -1
  122. package/dist/shared/{hx-color-picker-BvfJ_h16.js → hx-color-picker-Bb2UPVc3.js} +2 -2
  123. package/dist/shared/hx-color-picker-Bb2UPVc3.js.map +1 -0
  124. package/dist/shared/{hx-combobox-BBi3izKJ.js → hx-combobox-CNvY-es8.js} +42 -39
  125. package/dist/shared/hx-combobox-CNvY-es8.js.map +1 -0
  126. package/dist/shared/{hx-data-table-DNiDVWR2.js → hx-data-table-BwoJCFgs.js} +9 -8
  127. package/dist/shared/hx-data-table-BwoJCFgs.js.map +1 -0
  128. package/dist/shared/{hx-date-picker-D7yCK0nk.js → hx-date-picker-DDcIBJir.js} +43 -37
  129. package/dist/shared/hx-date-picker-DDcIBJir.js.map +1 -0
  130. package/dist/shared/{hx-dialog-Z7Ou_AZ9.js → hx-dialog-M7so0sRT.js} +41 -34
  131. package/dist/shared/hx-dialog-M7so0sRT.js.map +1 -0
  132. package/dist/shared/{hx-drawer-Dk-_xzy0.js → hx-drawer-CYxuhIQ0.js} +50 -43
  133. package/dist/shared/hx-drawer-CYxuhIQ0.js.map +1 -0
  134. package/dist/shared/{hx-dropdown-DnjLnkTj.js → hx-dropdown-7cfowTWv.js} +30 -30
  135. package/dist/shared/hx-dropdown-7cfowTWv.js.map +1 -0
  136. package/dist/shared/{hx-file-upload-CUORgnKc.js → hx-file-upload-9HbONfqt.js} +49 -43
  137. package/dist/shared/hx-file-upload-9HbONfqt.js.map +1 -0
  138. package/dist/shared/{hx-icon-button-C83bCR0K.js → hx-icon-button-iu0i_faq.js} +39 -29
  139. package/dist/shared/hx-icon-button-iu0i_faq.js.map +1 -0
  140. package/dist/shared/{hx-menu-divider-11Dp2VfM.js → hx-menu-divider-DR8klkFT.js} +32 -26
  141. package/dist/shared/hx-menu-divider-DR8klkFT.js.map +1 -0
  142. package/dist/shared/{hx-meter-UinDQjl6.js → hx-meter-CZ7lnMra.js} +67 -35
  143. package/dist/shared/hx-meter-CZ7lnMra.js.map +1 -0
  144. package/dist/shared/{hx-nav-DSpwWYUX.js → hx-nav-DM6-cGKF.js} +49 -47
  145. package/dist/shared/hx-nav-DM6-cGKF.js.map +1 -0
  146. package/dist/shared/{hx-overflow-menu-C7k5wlZy.js → hx-overflow-menu-CobkjAb8.js} +17 -9
  147. package/dist/shared/{hx-overflow-menu-C7k5wlZy.js.map → hx-overflow-menu-CobkjAb8.js.map} +1 -1
  148. package/dist/shared/{hx-pagination-BQ0cLTuB.js → hx-pagination-10dpXS95.js} +14 -12
  149. package/dist/shared/hx-pagination-10dpXS95.js.map +1 -0
  150. package/dist/shared/hx-popover-ULjonbaO.js +269 -0
  151. package/dist/shared/hx-popover-ULjonbaO.js.map +1 -0
  152. package/dist/shared/{hx-progress-bar-C_mdPVF-.js → hx-progress-bar-CnTibV63.js} +67 -57
  153. package/dist/shared/{hx-progress-bar-C_mdPVF-.js.map → hx-progress-bar-CnTibV63.js.map} +1 -1
  154. package/dist/shared/{hx-radio-Bqyi8re3.js → hx-radio-BnKcRuQu.js} +10 -8
  155. package/dist/shared/{hx-radio-Bqyi8re3.js.map → hx-radio-BnKcRuQu.js.map} +1 -1
  156. package/dist/shared/{hx-select-BBae2LqN.js → hx-select-C50lD7NS.js} +4 -3
  157. package/dist/shared/hx-select-C50lD7NS.js.map +1 -0
  158. package/dist/shared/{hx-slider-CpnxH2UP.js → hx-slider-CprSNrRi.js} +3 -2
  159. package/dist/shared/hx-slider-CprSNrRi.js.map +1 -0
  160. package/dist/shared/{hx-split-button-BvwoG8h2.js → hx-split-button-CHGy4FUc.js} +11 -11
  161. package/dist/shared/{hx-split-button-BvwoG8h2.js.map → hx-split-button-CHGy4FUc.js.map} +1 -1
  162. package/dist/shared/{hx-split-panel-Cxkeauwe.js → hx-split-panel-DYtB45Tr.js} +16 -8
  163. package/dist/shared/hx-split-panel-DYtB45Tr.js.map +1 -0
  164. package/dist/shared/{hx-tab-panel-CHB0u1zF.js → hx-tab-panel-BRNcLICw.js} +55 -52
  165. package/dist/shared/hx-tab-panel-BRNcLICw.js.map +1 -0
  166. package/dist/shared/{hx-tag-SJJtMlOS.js → hx-tag-B3N-vZ6B.js} +80 -55
  167. package/dist/shared/hx-tag-B3N-vZ6B.js.map +1 -0
  168. package/dist/shared/{hx-text-input-BrCjo4fJ.js → hx-text-input-CCZZbWQ9.js} +6 -6
  169. package/dist/shared/hx-text-input-CCZZbWQ9.js.map +1 -0
  170. package/dist/shared/{hx-time-picker-DRRAFuVd.js → hx-time-picker-CJcIjH3C.js} +5 -2
  171. package/dist/shared/hx-time-picker-CJcIjH3C.js.map +1 -0
  172. package/dist/shared/{hx-top-nav-DzW7XLv-.js → hx-top-nav-D2bQpns3.js} +2 -2
  173. package/dist/shared/{hx-top-nav-DzW7XLv-.js.map → hx-top-nav-D2bQpns3.js.map} +1 -1
  174. package/dist/shared/{hx-tree-item-DdH6RbMs.js → hx-tree-item-BobGN76x.js} +119 -96
  175. package/dist/shared/hx-tree-item-BobGN76x.js.map +1 -0
  176. package/dist/shared/{toast-factory-B8jicczW.js → toast-factory-MvMMreTu.js} +178 -94
  177. package/dist/shared/toast-factory-MvMMreTu.js.map +1 -0
  178. package/package.json +1 -1
  179. package/dist/shared/hx-accordion-Cyswa6J3.js.map +0 -1
  180. package/dist/shared/hx-alert-Cg-zxRiU.js.map +0 -1
  181. package/dist/shared/hx-badge-CjT0d8NK.js.map +0 -1
  182. package/dist/shared/hx-card-Bg4W4uXC.js.map +0 -1
  183. package/dist/shared/hx-carousel-item-BKpmFbUT.js.map +0 -1
  184. package/dist/shared/hx-checkbox-BMayOpAM.js.map +0 -1
  185. package/dist/shared/hx-color-picker-BvfJ_h16.js.map +0 -1
  186. package/dist/shared/hx-combobox-BBi3izKJ.js.map +0 -1
  187. package/dist/shared/hx-data-table-DNiDVWR2.js.map +0 -1
  188. package/dist/shared/hx-date-picker-D7yCK0nk.js.map +0 -1
  189. package/dist/shared/hx-dialog-Z7Ou_AZ9.js.map +0 -1
  190. package/dist/shared/hx-drawer-Dk-_xzy0.js.map +0 -1
  191. package/dist/shared/hx-dropdown-DnjLnkTj.js.map +0 -1
  192. package/dist/shared/hx-file-upload-CUORgnKc.js.map +0 -1
  193. package/dist/shared/hx-icon-button-C83bCR0K.js.map +0 -1
  194. package/dist/shared/hx-menu-divider-11Dp2VfM.js.map +0 -1
  195. package/dist/shared/hx-meter-UinDQjl6.js.map +0 -1
  196. package/dist/shared/hx-nav-DSpwWYUX.js.map +0 -1
  197. package/dist/shared/hx-pagination-BQ0cLTuB.js.map +0 -1
  198. package/dist/shared/hx-popover-BQsgrJCW.js +0 -226
  199. package/dist/shared/hx-popover-BQsgrJCW.js.map +0 -1
  200. package/dist/shared/hx-select-BBae2LqN.js.map +0 -1
  201. package/dist/shared/hx-slider-CpnxH2UP.js.map +0 -1
  202. package/dist/shared/hx-split-panel-Cxkeauwe.js.map +0 -1
  203. package/dist/shared/hx-tab-panel-CHB0u1zF.js.map +0 -1
  204. package/dist/shared/hx-tag-SJJtMlOS.js.map +0 -1
  205. package/dist/shared/hx-text-input-BrCjo4fJ.js.map +0 -1
  206. package/dist/shared/hx-time-picker-DRRAFuVd.js.map +0 -1
  207. package/dist/shared/hx-tree-item-DdH6RbMs.js.map +0 -1
  208. package/dist/shared/toast-factory-B8jicczW.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-slider-CpnxH2UP.js","sources":["../../src/components/hx-slider/hx-slider.styles.ts","../../src/components/hx-slider/hx-slider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSliderStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Container ─── */\n\n .slider {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n /* ─── Label Row ─── */\n\n .slider__label-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n .slider__label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .slider__value-display {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #6c757d));\n line-height: var(--hx-line-height-normal, 1.5);\n font-variant-numeric: tabular-nums;\n min-width: var(--hx-size-8, 2rem);\n text-align: right;\n }\n\n /* ─── Track Container ─── */\n\n .slider__track-container {\n position: relative;\n width: 100%;\n }\n\n .slider__track {\n position: relative;\n width: 100%;\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e9ecef));\n overflow: visible;\n }\n\n /* ─── Size: sm ─── */\n\n .slider--sm .slider__track {\n height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));\n }\n\n .slider--sm .slider__input {\n height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));\n }\n\n /* ─── Size: md ─── */\n\n .slider--md .slider__track {\n height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));\n }\n\n .slider--md .slider__input {\n height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));\n }\n\n /* ─── Size: lg ─── */\n\n .slider--lg .slider__track {\n height: var(--hx-slider-track-height-lg, var(--hx-size-2, 0.5rem));\n }\n\n .slider--lg .slider__input {\n height: var(--hx-slider-track-height-lg, var(--hx-size-2, 0.5rem));\n }\n\n /* ─── Fill ─── */\n\n .slider__fill {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #2563eb));\n pointer-events: none;\n transition: width var(--hx-transition-fast, 150ms ease);\n }\n\n /* Suppress fill animation on initial render — only animate on user interaction */\n :host(:not([data-ready])) .slider__fill {\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .slider__fill {\n transition: none;\n }\n }\n\n /* ─── Native Range Input ─── */\n\n .slider__input {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n background: transparent;\n border: none;\n outline: none;\n /* Expand the hit area so the thumb is easy to grab */\n padding-block: var(--hx-slider-input-padding-block, 0.75rem);\n }\n\n /* In forced-color mode, restore native outline so the input remains focusable */\n @media (forced-colors: active) {\n .slider__input {\n outline: revert;\n opacity: 1;\n }\n .slider__input:focus-visible {\n outline: 2px solid ButtonText;\n }\n }\n\n .slider__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Thumb (visual, :before on a wrapper or via ::after on track) ─── */\n /*\n * The native thumb is hidden (opacity 0 on the input). We render a visible\n * thumb element positioned by --fill-pct (a raw 0–100 number set in JS).\n *\n * Correct alignment formula keeps the thumb centered within the track at\n * both extremes, preventing the left/right halves from clipping outside:\n * left = fillPct% * (1 – thumbSize/100%) + thumbSize * (1 – fillPct/100)\n * Simplified: left = calc(var(--fill-pct,0)*1% + var(--_thumb-size)*(1 - var(--fill-pct,0)/100))\n * Combined with translate(-50%,-50%) this places the thumb center correctly\n * at every position from min to max.\n */\n\n .slider__thumb-visual {\n position: absolute;\n top: 50%;\n /* Corrected position: thumb stays within track at all fill values */\n left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));\n transform: translate(-50%, -50%);\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(--hx-slider-thumb-border-width, 2px) solid\n var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));\n box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n pointer-events: none;\n transition:\n box-shadow var(--hx-transition-fast, 150ms ease),\n transform var(--hx-transition-fast, 150ms ease);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .slider__thumb-visual {\n transition: none;\n }\n }\n\n .slider__input:focus-visible ~ .slider__thumb-visual {\n box-shadow:\n 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-slider-focus-ring-color, var(--hx-focus-ring-color, #2563eb)),\n var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n }\n\n /* ─── Thumb sizes ─── */\n\n .slider--sm .slider__thumb-visual {\n --_thumb-size: var(--hx-slider-thumb-size-sm, var(--hx-size-3, 0.75rem));\n width: var(--_thumb-size);\n height: var(--_thumb-size);\n }\n\n .slider--md .slider__thumb-visual {\n --_thumb-size: var(--hx-slider-thumb-size-md, var(--hx-size-4, 1rem));\n width: var(--_thumb-size);\n height: var(--_thumb-size);\n }\n\n .slider--lg .slider__thumb-visual {\n --_thumb-size: var(--hx-slider-thumb-size-lg, var(--hx-size-5, 1.25rem));\n width: var(--_thumb-size);\n height: var(--_thumb-size);\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n @media (forced-colors: active) {\n .slider__fill {\n background-color: Highlight;\n }\n .slider__track {\n background-color: ButtonFace;\n border: 1px solid ButtonText;\n }\n .slider__thumb-visual {\n background-color: ButtonText;\n border-color: ButtonText;\n }\n .slider__input:focus-visible ~ .slider__thumb-visual {\n outline: 2px solid Highlight;\n }\n }\n\n /* ─── Ticks ─── */\n\n .slider__ticks {\n position: relative;\n width: 100%;\n height: var(--hx-size-2, 0.5rem);\n margin-top: var(--hx-space-1, 0.25rem);\n }\n\n .slider__tick {\n position: absolute;\n top: 0;\n width: var(--hx-border-width-thin, 1px);\n height: 100%;\n background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #adb5bd));\n transform: translateX(-50%);\n }\n\n /* ─── Range Labels ─── */\n\n .slider__range-labels {\n display: flex;\n justify-content: space-between;\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #6c757d));\n line-height: var(--hx-line-height-normal, 1.5);\n margin-top: var(--hx-space-0-5, 0.125rem);\n }\n\n /* ─── Help Text ─── */\n\n .slider__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #6c757d));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Disabled state ─── */\n\n .slider--disabled .slider__fill {\n background-color: var(--hx-color-neutral-400, #adb5bd);\n }\n\n .slider--disabled .slider__thumb-visual {\n border-color: var(--hx-color-neutral-400, #adb5bd);\n }\n`;\n","import { LitElement, TemplateResult, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSliderStyles } from './hx-slider.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxSliderIdCounter = 0;\n\n/**\n * A range slider component for selecting a numeric value within a min/max boundary.\n * Supports tick marks, value display, range labels, and native form participation\n * via ElementInternals.\n *\n * The native `<input type=\"range\">` receives `role=\"slider\"` with `aria-valuenow`,\n * `aria-valuemin`, and `aria-valuemax`. Label association uses `aria-labelledby`\n * when a label is present, or `aria-label` as a fallback. Help text is linked via\n * `aria-describedby`. Keyboard navigation follows the native range behavior:\n * Arrow keys increment/decrement by step, Home jumps to min, End jumps to max.\n *\n * @summary Form-associated range slider with label, ticks, and value display.\n *\n * @tag hx-slider\n *\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot min-label - Label rendered at the minimum end of the slider.\n * @slot max-label - Label rendered at the maximum end of the slider.\n *\n * @fires {CustomEvent<{value: number}>} hx-input - Dispatched continuously while the user drags.\n * @fires {CustomEvent<{value: number}>} hx-change - Dispatched when the user releases the thumb.\n *\n * @csspart slider - The outer container element.\n * @csspart track - The track background element.\n * @csspart fill - The filled portion of the track showing progress.\n * @csspart thumb - The draggable thumb overlay element.\n * @csspart label - The label element.\n * @csspart value-display - The element displaying the current numeric value.\n * @csspart tick - Each individual tick mark element.\n *\n * @cssprop [--hx-slider-track-bg=var(--hx-color-neutral-200)] - Track background color.\n * @cssprop [--hx-slider-fill-bg=var(--hx-color-primary-500)] - Fill/progress color.\n * @cssprop [--hx-slider-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-slider-thumb-border-color=var(--hx-color-primary-500)] - Thumb border color.\n * @cssprop [--hx-slider-thumb-border-width=2px] - Thumb border width.\n * @cssprop [--hx-slider-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-slider-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-slider-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-slider-value-color=var(--hx-color-neutral-600)] - Value display text color.\n * @cssprop [--hx-slider-tick-color=var(--hx-color-neutral-400)] - Tick mark color.\n * @cssprop [--hx-slider-range-label-color=var(--hx-color-neutral-500)] - Range label text color.\n * @cssprop [--hx-slider-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n */\n@customElement('hx-slider')\nexport class HelixSlider extends LitElement {\n static override styles = [tokenStyles, helixSliderStyles];\n\n // ─── Form Association ───\n\n /** Enables native form participation via ElementInternals. */\n static formAssociated = true;\n\n /** ElementInternals instance for form value, validity, and label association. */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The name submitted with the form.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The current numeric value of the slider.\n * @attr value\n */\n @property({ type: Number })\n value = 0;\n\n /**\n * The minimum allowed value.\n * @attr min\n */\n @property({ type: Number })\n min = 0;\n\n /**\n * The maximum allowed value.\n * @attr max\n */\n @property({ type: Number })\n max = 100;\n\n /**\n * The stepping interval between values.\n * @attr step\n */\n @property({ type: Number })\n step = 1;\n\n /**\n * Whether the slider is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The visible label text for the slider.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Help text displayed below the slider for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * When true, the current value is shown next to the label.\n * @attr show-value\n */\n @property({ type: Boolean, attribute: 'show-value' })\n showValue = false;\n\n /**\n * When true, tick marks are rendered at each step interval.\n * @attr show-ticks\n */\n @property({ type: Boolean, attribute: 'show-ticks' })\n showTicks = false;\n\n /**\n * The size variant of the slider.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Human-readable text alternative for the current value, announced by screen readers\n * instead of the numeric value. For example, on a pain scale: \"7 — Moderate-Severe\".\n * @attr aria-valuetext\n */\n @property({ type: String, attribute: 'aria-valuetext' })\n valueText = '';\n\n // ─── Internal State ───\n\n /** Whether the label slot has assigned content. */\n @state() private _hasLabelSlot = false;\n /** Whether the min-label slot has assigned content. */\n @state() private _hasMinLabelSlot = false;\n /** Whether the max-label slot has assigned content. */\n @state() private _hasMaxLabelSlot = false;\n /** Whether the help slot has assigned content. */\n @state() private _hasHelpSlot = false;\n\n // ─── Internal References ───\n\n /** Reference to the native range `<input>` inside shadow DOM. */\n @query('.slider__input')\n declare private _input: HTMLInputElement | null;\n\n // ─── Unique IDs ───\n\n /** Unique ID for the native range input element. */\n private readonly _sliderId = `hx-slider-${++_hxSliderIdCounter}`;\n /** Unique ID for the label element, derived from _sliderId. */\n private readonly _labelId = `${this._sliderId}-label`;\n /** Unique ID for the help text element, derived from _sliderId. */\n private readonly _helpId = `${this._sliderId}-help`;\n\n // ─── Computed Values ───\n\n private _clamp(v: number): number {\n return Math.min(Math.max(v, this.min), this.max);\n }\n\n private _fillPercent(): number {\n const clamped = this._clamp(this.value);\n const range = this.max - this.min;\n if (range === 0) return 0;\n return ((clamped - this.min) / range) * 100;\n }\n\n // Cached tick array — recomputed only when showTicks, min, max, or step change.\n // Avoids redundant array allocation on every render during continuous drag updates.\n private _cachedTicks: number[] = [];\n\n private _computeTicks(): number[] {\n if (!this.showTicks) return [];\n const ticks: number[] = [];\n const range = this.max - this.min;\n if (range <= 0 || this.step <= 0) return ticks;\n const count = Math.round(range / this.step);\n for (let i = 0; i <= count; i++) {\n ticks.push((i / count) * 100);\n }\n return ticks;\n }\n\n // ─── Lifecycle ───\n\n override willUpdate(changedProperties: PropertyValues<this>): void {\n super.willUpdate(changedProperties);\n if (\n changedProperties.has('showTicks') ||\n changedProperties.has('min') ||\n changedProperties.has('max') ||\n changedProperties.has('step')\n ) {\n this._cachedTicks = this._computeTicks();\n }\n }\n\n override firstUpdated(): void {\n // Enable fill transition after initial render to suppress animation on mount\n requestAnimationFrame(() => this.setAttribute('data-ready', ''));\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n // Clamp value to [min, max] after any relevant property change\n if (\n changedProperties.has('value') ||\n changedProperties.has('min') ||\n changedProperties.has('max')\n ) {\n const clamped = this._clamp(this.value);\n if (clamped !== this.value) {\n this.value = clamped;\n return;\n }\n this._internals.setFormValue(String(this.value));\n } else if (changedProperties.has('name')) {\n this._internals.setFormValue(String(this.value));\n }\n // Reflect aria-disabled on host for AT traversal\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the slider satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** Called by the form when it resets. Restores to the declared `value` attribute (default value). */\n formResetCallback(): void {\n const attrValue = this.getAttribute('value');\n const defaultValue = attrValue !== null ? parseFloat(attrValue) : this.min;\n const resetTo = this._clamp(!isNaN(defaultValue) ? defaultValue : this.min);\n this.value = resetTo;\n this._internals.setFormValue(String(resetTo));\n }\n\n /**\n * Called when the form restores state (e.g., back/forward navigation or autofill).\n * @param state - The serialized value to restore.\n * @param _reason - Either \"restore\" (back/forward) or \"autocomplete\".\n */\n formStateRestoreCallback(state: string | File | FormData | null, _reason: string): void {\n if (typeof state !== 'string' || state === null) return;\n const parsed = parseFloat(state);\n if (!isNaN(parsed)) {\n this.value = this._clamp(parsed);\n }\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Public Methods ───\n\n /** Moves focus to the native range input. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\n\n // ─── Slot Handlers ───\n\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleMinLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasMinLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleMaxLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasMaxLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Handling ───\n\n private _handleInput(e: Event): void {\n if (this.disabled) return;\n const target = e.target as HTMLInputElement;\n this.value = parseFloat(target.value);\n this._internals.setFormValue(String(this.value));\n\n /**\n * Dispatched continuously while the user drags the thumb.\n * @event hx-input\n */\n this.dispatchEvent(\n new CustomEvent('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n private _handleChange(e: Event): void {\n if (this.disabled) return;\n const target = e.target as HTMLInputElement;\n this.value = parseFloat(target.value);\n this._internals.setFormValue(String(this.value));\n\n /**\n * Dispatched when the user releases the thumb after dragging.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Render ───\n\n override render(): TemplateResult {\n const fillPct = this._fillPercent();\n const ticks = this._cachedTicks;\n const hasLabel = !!this.label || this._hasLabelSlot;\n const showRangeLabels = this._hasMinLabelSlot || this._hasMaxLabelSlot;\n\n const containerClasses = {\n slider: true,\n [`slider--${this.size}`]: true,\n 'slider--disabled': this.disabled,\n 'slider--has-ticks': this.showTicks,\n };\n\n const describedBy =\n [this.helpText || this._hasHelpSlot ? this._helpId : null].filter(Boolean).join(' ') ||\n undefined;\n\n return html`\n <div part=\"slider\" class=${classMap(containerClasses)}>\n <!-- Label row -->\n <div class=\"slider__label-row\">\n ${hasLabel\n ? html`<label\n part=\"label\"\n class=\"slider__label\"\n id=${this._labelId}\n for=${this._sliderId}\n >\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>${this.label}</slot>\n </label>`\n : html`<slot name=\"label\" @slotchange=${this._handleLabelSlotChange}></slot>`}\n ${this.showValue\n ? html`<span part=\"value-display\" class=\"slider__value-display\"> ${this.value} </span>`\n : nothing}\n </div>\n\n <!-- Track -->\n <div class=\"slider__track-container\">\n <div part=\"track\" class=\"slider__track\">\n <div part=\"fill\" class=\"slider__fill\" style=${styleMap({ width: `${fillPct}%` })}></div>\n\n <input\n class=\"slider__input\"\n id=${this._sliderId}\n type=\"range\"\n .value=${live(String(this.value))}\n min=${this.min}\n max=${this.max}\n step=${this.step}\n ?disabled=${this.disabled}\n name=${ifDefined(this.name || undefined)}\n aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n aria-valuetext=${ifDefined(this.valueText || undefined)}\n aria-describedby=${ifDefined(describedBy)}\n @input=${this._handleInput}\n @change=${this._handleChange}\n />\n\n <!-- Visual thumb positioned by fill percentage (--fill-pct drives CSS calc) -->\n <span\n part=\"thumb\"\n class=\"slider__thumb-visual\"\n style=${styleMap({ '--fill-pct': String(fillPct) })}\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <!-- Tick marks -->\n ${this.showTicks && ticks.length > 0\n ? html`<div class=\"slider__ticks\">\n ${ticks.map(\n (pct) =>\n html`<span\n part=\"tick\"\n class=\"slider__tick\"\n style=${styleMap({ left: `${pct}%` })}\n ></span>`,\n )}\n </div>`\n : nothing}\n\n <!-- Range labels -->\n ${showRangeLabels\n ? html`<div class=\"slider__range-labels\">\n <slot name=\"min-label\" @slotchange=${this._handleMinLabelSlotChange}></slot>\n <slot name=\"max-label\" @slotchange=${this._handleMaxLabelSlotChange}></slot>\n </div>`\n : html`\n <!-- Always observe slot changes even when not rendered -->\n <slot name=\"min-label\" hidden @slotchange=${this._handleMinLabelSlotChange}></slot>\n <slot name=\"max-label\" hidden @slotchange=${this._handleMaxLabelSlotChange}></slot>\n `}\n\n <!-- Help text -->\n <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>\n ${this.helpText\n ? html`<div part=\"help-text\" class=\"slider__help-text\" id=${this._helpId}>\n ${this.helpText}\n </div>`\n : nothing}\n </slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-slider': HelixSlider;\n }\n}\n"],"names":["helixSliderStyles","css","_hxSliderIdCounter","HelixSlider","LitElement","v","clamped","range","ticks","count","i","changedProperties","attrValue","defaultValue","resetTo","state","_reason","parsed","disabled","options","_a","slot","target","fillPct","hasLabel","showRangeLabels","containerClasses","describedBy","html","classMap","nothing","styleMap","live","ifDefined","pct","tokenStyles","__decorateClass","property","query","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-split-panel-Cxkeauwe.js","sources":["../../src/components/hx-split-panel/hx-split-panel.styles.ts","../../src/components/hx-split-panel/hx-split-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitPanelStyles = css`\n :host {\n display: flex;\n --_divider-size: var(--hx-split-panel-divider-size, 4px);\n --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));\n --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));\n overflow: hidden;\n }\n\n :host([orientation='horizontal']) {\n flex-direction: row;\n width: 100%;\n height: 100%;\n }\n\n :host([orientation='vertical']) {\n flex-direction: column;\n width: 100%;\n height: 100%;\n }\n\n .panel {\n overflow: auto;\n min-width: 0;\n min-height: 0;\n }\n\n .panel--start {\n flex-shrink: 0;\n }\n\n .panel--end {\n flex: 1;\n }\n\n :host([orientation='horizontal']) .panel--start {\n height: 100%;\n }\n\n :host([orientation='vertical']) .panel--start {\n width: 100%;\n }\n\n /* ─── Divider Track (flex child wrapper) ─── */\n\n .divider-track {\n flex-shrink: 0;\n position: relative;\n overflow: visible;\n display: flex;\n align-items: stretch;\n }\n\n :host([orientation='horizontal']) .divider-track {\n width: var(--_divider-size);\n height: 100%;\n }\n\n :host([orientation='vertical']) .divider-track {\n width: 100%;\n height: var(--_divider-size);\n }\n\n /* ─── Divider (separator role — no interactive children) ─── */\n\n .divider {\n flex: 1;\n background-color: var(--_divider-color);\n cursor: col-resize;\n transition: background-color 0.15s ease;\n touch-action: none;\n user-select: none;\n -webkit-user-select: none;\n outline: none;\n }\n\n :host([orientation='horizontal']) .divider {\n cursor: col-resize;\n }\n\n :host([orientation='vertical']) .divider {\n cursor: row-resize;\n }\n\n .divider:hover,\n .divider:focus-visible {\n background-color: var(--_divider-hover-color);\n }\n\n .divider:focus-visible {\n outline: 2px solid var(--_divider-hover-color);\n outline-offset: 2px;\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);\n }\n\n :host([disabled]) .divider {\n cursor: default;\n pointer-events: none;\n }\n\n :host([disabled]) .divider:hover,\n :host([disabled]) .divider:focus-visible {\n background-color: var(--_divider-color);\n outline: none;\n box-shadow: none;\n }\n\n /* ─── Collapse Controls (siblings of separator, not children) ─── */\n\n .collapse-controls {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n z-index: 2;\n pointer-events: auto;\n }\n\n :host([orientation='vertical']) .collapse-controls {\n flex-direction: row;\n }\n\n .collapse-btn {\n background: var(--_divider-hover-color);\n border: 2px solid var(--hx-color-neutral-0);\n color: var(--hx-color-neutral-0);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n padding: 0;\n line-height: 1;\n flex-shrink: 0;\n }\n\n .collapse-btn:hover {\n filter: brightness(1.1);\n }\n\n .collapse-btn:focus-visible {\n outline: 2px solid var(--hx-color-neutral-0);\n outline-offset: 2px;\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSplitPanelStyles } from './hx-split-panel.styles.js';\n\n/**\n * A resizable two-pane layout with a draggable divider.\n *\n * @summary Resizable split panel with start and end panes.\n *\n * @tag hx-split-panel\n *\n * @slot start - The first (start) panel content.\n * @slot end - The second (end) panel content.\n *\n * @csspart start - The start panel container.\n * @csspart divider - The draggable divider element.\n * @csspart end - The end panel container.\n *\n * @fires hx-reposition - Fired when the divider is moved. Detail: `{ position: number }`.\n *\n * @cssprop [--hx-split-panel-divider-size=4px] - Width (horizontal) or height (vertical) of the divider.\n * @cssprop [--hx-split-panel-divider-color=var(--hx-color-neutral-200)] - Default divider color.\n * @cssprop [--hx-split-panel-divider-hover-color=var(--hx-color-primary-500)] - Divider color on hover/focus.\n *\n * @example Drupal Twig usage:\n * ```twig\n * <hx-split-panel\n * position=\"50\"\n * orientation=\"horizontal\"\n * min=\"10\"\n * max=\"90\"\n * collapsible\n * >\n * <div slot=\"start\">{{ start_content }}</div>\n * <div slot=\"end\">{{ end_content }}</div>\n * </hx-split-panel>\n *\n * Attribute-settable: position, position-in-pixels, orientation, disabled, min, max, collapsible, collapsed\n * JS-only (complex types): snap (use .snap=${[25, 50, 75]} in Lit templates,\n * or snap=\"[25,50,75]\" as JSON string in Twig)\n * ```\n */\n@customElement('hx-split-panel')\nexport class HelixSplitPanel extends LitElement {\n static override styles = [tokenStyles, helixSplitPanelStyles];\n\n /**\n * Position of the divider as a percentage (0–100) of the start panel.\n * @attr position\n */\n @property({ type: Number, reflect: true })\n position = 50;\n\n /**\n * Position of the divider in pixels (alternative to `position`).\n * When set, takes precedence over `position` until the host is measured.\n * @attr position-in-pixels\n */\n @property({ type: Number, attribute: 'position-in-pixels' })\n positionInPixels: number | undefined;\n\n /**\n * Orientation of the split.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Minimum position as a percentage (0–100). Prevents full collapse of start panel.\n * @attr min\n */\n @property({ type: Number, reflect: true })\n min = 0;\n\n /**\n * Maximum position as a percentage (0–100). Prevents full expansion of start panel.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 100;\n\n /**\n * Snap points as an array of percentages. The divider snaps to the\n * nearest point within a 5% threshold.\n * Accepts JSON array string in HTML: snap=\"[25, 50, 75]\"\n * @attr snap\n */\n @property({\n attribute: 'snap',\n converter: {\n fromAttribute(value: string | null): number[] {\n if (!value) return [];\n try {\n const parsed = JSON.parse(value) as unknown;\n if (Array.isArray(parsed)) return (parsed as unknown[]).map(Number);\n return [];\n } catch {\n return value\n .split(',')\n .map((s) => Number(s.trim()))\n .filter((n) => !isNaN(n));\n }\n },\n toAttribute(value: number[]): string {\n return JSON.stringify(value);\n },\n },\n })\n snap: number[] = [];\n\n /**\n * When true, the divider cannot be dragged.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * When true, collapse/expand buttons appear on the divider.\n * @attr collapsible\n */\n @property({ type: Boolean, reflect: true })\n collapsible = false;\n\n /**\n * Which panel is collapsed: 'start', 'end', or null (not collapsed).\n * @attr collapsed\n */\n @property({ type: String, reflect: true })\n collapsed: 'start' | 'end' | null = null;\n\n /** @internal */\n private _dragging = false;\n /** @internal */\n private _dragStart = 0;\n /** @internal */\n private _positionAtDragStart = 0;\n /** @internal */\n private _positionBeforeCollapse = 50;\n\n private _clamp(value: number): number {\n return Math.min(this.max, Math.max(this.min, value));\n }\n\n private _snapToPoint(value: number): number {\n if (!this.snap.length) return value;\n const threshold = 5;\n for (const point of this.snap) {\n if (Math.abs(value - point) <= threshold) return point;\n }\n return value;\n }\n\n private _setPosition(percent: number): void {\n const clamped = this._clamp(this._snapToPoint(percent));\n if (clamped === this.position) return;\n this.position = clamped;\n this.dispatchEvent(\n new CustomEvent<{ position: number }>('hx-reposition', {\n detail: { position: this.position },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _getHostSize(): number {\n if (this.orientation === 'horizontal') {\n return this.offsetWidth;\n }\n return this.offsetHeight;\n }\n\n /** @internal */\n private _onPointerDown = (e: PointerEvent): void => {\n if (this.disabled) return;\n const divider = e.currentTarget as HTMLElement;\n divider.setPointerCapture(e.pointerId);\n this._dragging = true;\n this._dragStart = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n this._positionAtDragStart = this.position;\n e.preventDefault();\n };\n\n /** @internal */\n private _onPointerMove = (e: PointerEvent): void => {\n if (!this._dragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const delta = current - this._dragStart;\n const hostSize = this._getHostSize();\n if (hostSize === 0) return;\n const deltaPercent = (delta / hostSize) * 100;\n this._setPosition(this._positionAtDragStart + deltaPercent);\n };\n\n /** @internal */\n private _onPointerUp = (): void => {\n this._dragging = false;\n };\n\n /** @internal */\n private _onKeyDown = (e: KeyboardEvent): void => {\n if (this.disabled) return;\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n e.preventDefault();\n this._setPosition(this.position - 1);\n break;\n case 'ArrowRight':\n case 'ArrowDown':\n e.preventDefault();\n this._setPosition(this.position + 1);\n break;\n case 'PageUp':\n e.preventDefault();\n this._setPosition(this.position + 10);\n break;\n case 'PageDown':\n e.preventDefault();\n this._setPosition(this.position - 10);\n break;\n case 'Home':\n e.preventDefault();\n this._setPosition(this.min);\n break;\n case 'End':\n e.preventDefault();\n this._setPosition(this.max);\n break;\n }\n };\n\n /** @internal */\n private _collapseStart = (): void => {\n this.collapsed = 'start';\n };\n\n /** @internal */\n private _collapseEnd = (): void => {\n this.collapsed = 'end';\n };\n\n /** @internal */\n private _expand = (): void => {\n this.collapsed = null;\n };\n\n protected override willUpdate(changedProperties: PropertyValues): void {\n super.willUpdate(changedProperties);\n if (!changedProperties.has('collapsed')) return;\n\n const prev = changedProperties.get('collapsed');\n\n if (this.collapsed === 'start') {\n // Save restore point when transitioning from non-collapsed state (or initial render)\n if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n this._setPosition(this.min);\n } else if (this.collapsed === 'end') {\n if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n this._setPosition(this.max);\n } else if (this.collapsed === null && prev !== null && prev !== undefined) {\n // Only expand when transitioning from an explicitly collapsed state (not first render)\n this._setPosition(this._positionBeforeCollapse);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (this.positionInPixels !== undefined) {\n // Convert pixel position to percentage after first paint\n requestAnimationFrame(() => {\n if (this.positionInPixels !== undefined) {\n const hostSize = this._getHostSize();\n if (hostSize > 0) {\n this._setPosition((this.positionInPixels / hostSize) * 100);\n }\n }\n });\n }\n }\n\n private _startPanelStyle(): string {\n if (this.orientation === 'horizontal') {\n return `width: ${this.position}%;`;\n }\n return `height: ${this.position}%;`;\n }\n\n override render() {\n return html`\n <div part=\"start\" class=\"panel panel--start\" style=${this._startPanelStyle()}>\n <slot name=\"start\"></slot>\n </div>\n <div class=\"divider-track\">\n <div\n part=\"divider\"\n class=\"divider\"\n role=\"separator\"\n aria-label=\"Resize panels\"\n aria-orientation=${this.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n aria-valuenow=${this.position}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @pointerdown=${this._onPointerDown}\n @pointermove=${this._onPointerMove}\n @pointerup=${this._onPointerUp}\n @keydown=${this._onKeyDown}\n ></div>\n ${this.collapsible\n ? this.collapsed\n ? html`<div class=\"collapse-controls\">\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=${`Expand ${this.collapsed} panel`}\n @click=${this._expand}\n >\n ${this.collapsed === 'start' ? '▶' : '◀'}\n </button>\n </div>`\n : html`<div class=\"collapse-controls\">\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=\"Collapse start panel\"\n @click=${this._collapseStart}\n >\n ◀\n </button>\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=\"Collapse end panel\"\n @click=${this._collapseEnd}\n >\n ▶\n </button>\n </div>`\n : nothing}\n </div>\n <div part=\"end\" class=\"panel panel--end\">\n <slot name=\"end\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-split-panel': HelixSplitPanel;\n }\n}\n"],"names":["helixSplitPanelStyles","css","HelixSplitPanel","LitElement","e","delta","hostSize","deltaPercent","value","threshold","point","percent","clamped","changedProperties","prev","html","nothing","tokenStyles","__decorateClass","property","parsed","s","n","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-tab-panel-CHB0u1zF.js","sources":["../../src/components/hx-tabs/hx-tabs.styles.ts","../../src/components/hx-tabs/hx-tabs.ts","../../src/components/hx-tabs/hx-tab.styles.ts","../../src/components/hx-tabs/hx-tab.ts","../../src/components/hx-tabs/hx-tab-panel.styles.ts","../../src/components/hx-tabs/hx-tab-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTabsStyles = css`\n :host {\n display: block;\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Container ─── */\n\n .tabs {\n display: flex;\n flex-direction: column;\n gap: var(--hx-tabs-gap, 0);\n }\n\n :host([orientation='vertical']) .tabs {\n flex-direction: row;\n }\n\n /* ─── Tablist ─── */\n\n .tablist {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n gap: 0;\n border-bottom: var(--hx-tabs-border-width, 1px) solid\n var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n .tablist::-webkit-scrollbar {\n display: none;\n }\n\n /* ─── Vertical Orientation ─── */\n\n :host([orientation='vertical']) {\n --_tab-indicator-bottom: 0px;\n --_tab-indicator-end: var(--hx-tabs-indicator-size, 2px);\n --_tab-indicator-bottom-color: transparent;\n --_tab-indicator-end-color: var(\n --hx-tabs-indicator-color,\n var(--hx-color-primary-500, #2563eb)\n );\n }\n\n :host([orientation='vertical']) .tablist {\n flex-direction: column;\n border-bottom: none;\n border-inline-end: var(--hx-tabs-border-width, 1px) solid\n var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));\n overflow-x: visible;\n overflow-y: auto;\n min-width: var(--hx-tabs-vertical-width, 12rem);\n flex-shrink: 0;\n }\n\n /* ─── Panels Container ─── */\n\n .panels {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .tablist {\n scroll-behavior: auto;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabsStyles } from './hx-tabs.styles.js';\nimport type { HelixTab } from './hx-tab.js';\nimport type { HelixTabPanel } from './hx-tab-panel.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxTabsIdCounter = 0;\n\n/**\n * A tabbed content organizer that manages a set of `<hx-tab>` and `<hx-tab-panel>` children.\n * Supports horizontal and vertical orientations, automatic and manual activation modes,\n * and full keyboard navigation per the ARIA Authoring Practices Guide.\n *\n * @summary Tab container that organizes content into selectable panels.\n *\n * @tag hx-tabs\n *\n * @slot tab - Slot for `<hx-tab>` elements. Rendered inside the tablist.\n * @slot - Default slot for `<hx-tab-panel>` elements.\n *\n * @fires {CustomEvent<{tabId: string, index: number}>} hx-tab-change - Dispatched when the active tab changes.\n *\n * @csspart tablist - The tablist container element.\n * @csspart panels - The panel content container element.\n *\n * @cssprop [--hx-tabs-border-color=var(--hx-color-neutral-200, #e9ecef)] - Tablist border color.\n * @cssprop [--hx-tabs-border-width=1px] - Tablist border width.\n * @cssprop [--hx-tabs-vertical-width=12rem] - Width of the tablist in vertical orientation.\n * @cssprop [--hx-tabs-gap=0] - Gap between the tablist and panels container.\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #495057)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #1d4ed8)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #212529)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #f8f9fa)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #2563eb)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color for tabs and panels.\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #343a40)] - Panel text color.\n */\n@customElement('hx-tabs')\nexport class HelixTabs extends LitElement {\n static override styles = [tokenStyles, helixTabsStyles];\n\n // ─── Internal ID ───\n\n /** @internal */\n private _id = `hx-tabs-${++_hxTabsIdCounter}`;\n\n // ─── Properties ───\n\n /**\n * The layout orientation of the tabs.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Controls how keyboard navigation activates tabs.\n * In `automatic` mode, focus also activates the tab.\n * In `manual` mode, focus moves independently; Space or Enter activates.\n * @attr activation\n */\n @property({ type: String, attribute: 'activation', reflect: true })\n activation: 'manual' | 'automatic' = 'automatic';\n\n /**\n * Accessible label for the tablist. Rendered as `aria-label` on the tablist container.\n * Provide a brief description of what the tabs represent (e.g., \"Patient record sections\").\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n // ─── State ───\n\n /** @internal */\n @state() private _activePanel = '';\n\n // ─── Child Accessors ───\n\n /** @internal */\n private _cachedTabs: HelixTab[] | null = null;\n /** @internal */\n private _cachedPanels: HelixTabPanel[] | null = null;\n /** @internal */\n private _observer: MutationObserver | null = null;\n\n // ─── Public API ───\n\n /**\n * Gets or sets the zero-based index of the currently selected tab.\n * Setting this programmatically activates the tab at the given index.\n */\n get selectedIndex(): number {\n return this._getTabs().findIndex((tab) => tab.panel === this._activePanel);\n }\n\n set selectedIndex(index: number) {\n const tab = this._getTabs()[index];\n if (tab && !tab.disabled) {\n this._activateTab(tab, true);\n }\n }\n\n private _getTabs(): HelixTab[] {\n if (!this._cachedTabs) {\n this._cachedTabs = Array.from(this.querySelectorAll(':scope > hx-tab')).filter(\n (el): el is HelixTab => el.tagName.toLowerCase() === 'hx-tab',\n );\n }\n return this._cachedTabs;\n }\n\n private _getPanels(): HelixTabPanel[] {\n if (!this._cachedPanels) {\n this._cachedPanels = Array.from(this.querySelectorAll(':scope > hx-tab-panel')).filter(\n (el): el is HelixTabPanel => el.tagName.toLowerCase() === 'hx-tab-panel',\n );\n }\n return this._cachedPanels;\n }\n\n private _getEnabledTabs(): HelixTab[] {\n return this._getTabs().filter((tab) => !tab.disabled);\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('hx-tab-select', this._handleTabSelect);\n this.addEventListener('keydown', this._handleKeydown);\n // Watch for panel/name attribute changes on child tabs and panels\n this._observer = new MutationObserver(() => {\n this._cachedTabs = null;\n this._cachedPanels = null;\n this._syncTabsAndPanels();\n });\n this._observer.observe(this, {\n subtree: true,\n attributeFilter: ['panel', 'name'],\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-tab-select', this._handleTabSelect);\n this.removeEventListener('keydown', this._handleKeydown);\n this._observer?.disconnect();\n this._observer = null;\n }\n\n override firstUpdated(): void {\n this._syncTabsAndPanels();\n // Activate the first enabled tab if none is selected\n if (!this._activePanel) {\n const firstEnabled = this._getEnabledTabs()[0];\n if (firstEnabled) {\n this._activateTab(firstEnabled, false);\n }\n }\n }\n\n override updated(changedProperties: Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('_activePanel')) {\n this._updateTabsAndPanels();\n }\n }\n\n // ─── Tab / Panel Sync ───\n\n private _syncTabsAndPanels(): void {\n const tabs = this._getTabs();\n const panels = this._getPanels();\n\n tabs.forEach((tab, i) => {\n const tabId = tab.id || `hx-tab-${this._id}-${i}`;\n tab.id = tabId;\n\n // Connect tab to its panel by aria-controls\n const panelName = tab.panel;\n const panel = panels.find((p) => p.name === panelName) ?? panels[i];\n if (panel) {\n const panelId = panel.id || `hx-panel-${this._id}-${i}`;\n panel.id = panelId;\n // Set controls on the tab so aria-controls lands on the inner button (role=\"tab\")\n tab.controls = panelId;\n panel.setAttribute('aria-labelledby', tabId);\n }\n });\n\n this._updateTabsAndPanels();\n }\n\n private _updateTabsAndPanels(): void {\n const tabs = this._getTabs();\n const panels = this._getPanels();\n\n tabs.forEach((tab) => {\n const isSelected = tab.panel === this._activePanel;\n tab.selected = isSelected;\n // Dual tabindex is intentional: the inner button in hx-tab manages its own tabindex\n // via the `selected` property. We also set it on the host element for the roving\n // tabindex pattern so document.activeElement comparisons work correctly when the\n // inner button is focused. This is safe because the inner button is the only\n // focusable element in hx-tab's shadow DOM (WCAG 2.4.3).\n tab.tabIndex = isSelected ? 0 : -1;\n });\n\n panels.forEach((panel) => {\n const isActive = panel.name === this._activePanel;\n if (isActive) {\n panel.removeAttribute('hidden');\n panel.setAttribute('tabindex', '0');\n } else {\n panel.setAttribute('hidden', '');\n panel.setAttribute('tabindex', '-1');\n }\n });\n }\n\n // ─── Tab Activation ───\n\n private _activateTab(tab: HelixTab, dispatchEvent = true): void {\n if (tab.disabled) {\n return;\n }\n\n const tabs = this._getTabs();\n const previousPanel = this._activePanel;\n this._activePanel = tab.panel;\n\n if (dispatchEvent && previousPanel !== this._activePanel) {\n const index = tabs.indexOf(tab);\n /**\n * Dispatched when the active tab changes.\n * @event hx-tab-change\n */\n this.dispatchEvent(\n new CustomEvent('hx-tab-change', {\n bubbles: true,\n composed: true,\n detail: { tabId: tab.id, index },\n }),\n );\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleTabSelect = (e: Event): void => {\n if (!(e instanceof CustomEvent)) return;\n e.stopPropagation();\n const tab = e\n .composedPath()\n .find((el): el is HelixTab => el instanceof Element && el.tagName.toLowerCase() === 'hx-tab');\n if (tab) {\n this._activateTab(tab);\n }\n };\n\n /** @internal */\n private _warnInvalidSlotContent(): void {\n const tabSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tab\"]');\n const panelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (tabSlot) {\n const invalid = tabSlot\n .assignedElements()\n .filter((el) => el.tagName.toLowerCase() !== 'hx-tab');\n if (invalid.length > 0) {\n devWarn(\n 'hx-tabs',\n `Slot \"tab\" expects <hx-tab> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n }\n if (panelSlot) {\n const invalid = panelSlot\n .assignedElements()\n .filter((el) => el.tagName.toLowerCase() !== 'hx-tab-panel');\n if (invalid.length > 0) {\n devWarn(\n 'hx-tabs',\n `Default slot expects <hx-tab-panel> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n }\n }\n\n /** @internal */\n private _handleSlotChange = (): void => {\n this._warnInvalidSlotContent();\n this._cachedTabs = null;\n this._cachedPanels = null;\n this._syncTabsAndPanels();\n // If the active panel was removed, fall back to the first enabled tab\n const panels = this._getPanels();\n const activePanelExists = panels.some((p) => p.name === this._activePanel);\n if (!activePanelExists) {\n const firstEnabled = this._getEnabledTabs()[0];\n if (firstEnabled) {\n this._activateTab(firstEnabled, false);\n } else {\n this._activePanel = '';\n }\n }\n };\n\n /** @internal */\n private _handleKeydown = (e: KeyboardEvent): void => {\n const enabledTabs = this._getEnabledTabs();\n if (enabledTabs.length === 0) {\n return;\n }\n\n const isHorizontal = this.orientation === 'horizontal';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n const isNavigationKey = [prevKey, nextKey, 'Home', 'End', ' ', 'Enter'].includes(e.key);\n if (!isNavigationKey) {\n return;\n }\n\n // Determine focused tab — when a button inside shadow DOM is focused,\n // document.activeElement returns the shadow host (hx-tab), not the inner button.\n const focusedTab = enabledTabs.find((tab) => tab === document.activeElement);\n\n if (e.key === ' ' || e.key === 'Enter') {\n if (focusedTab) {\n e.preventDefault();\n this._activateTab(focusedTab);\n focusedTab.shadowRoot?.querySelector('button')?.focus();\n }\n return;\n }\n\n e.preventDefault();\n\n let currentIndex = focusedTab ? enabledTabs.indexOf(focusedTab) : -1;\n // Fall back to the active tab's index if nothing is focused yet\n if (currentIndex === -1) {\n const activeTab = enabledTabs.find((tab) => tab.panel === this._activePanel);\n currentIndex = activeTab ? enabledTabs.indexOf(activeTab) : 0;\n }\n\n let nextIndex: number;\n\n if (e.key === 'Home') {\n nextIndex = 0;\n } else if (e.key === 'End') {\n nextIndex = enabledTabs.length - 1;\n } else if (e.key === nextKey) {\n nextIndex = (currentIndex + 1) % enabledTabs.length;\n } else {\n // prevKey\n nextIndex = currentIndex <= 0 ? enabledTabs.length - 1 : currentIndex - 1;\n }\n\n const targetTab = enabledTabs[nextIndex];\n if (!targetTab) {\n return;\n }\n\n // Focus the tab button inside the shadow root\n targetTab.shadowRoot?.querySelector('button')?.focus();\n\n if (this.activation === 'automatic') {\n this._activateTab(targetTab);\n }\n };\n\n // ─── Render ───\n\n override render() {\n return html`\n <div class=\"tabs\">\n <div\n part=\"tablist\"\n class=\"tablist\"\n role=\"tablist\"\n aria-orientation=${this.orientation}\n aria-label=${this.label || nothing}\n >\n <slot name=\"tab\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"panels\" class=\"panels\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tabs': HelixTabs;\n }\n}\n","import { css } from 'lit';\n\nexport const helixTabStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n * {\n box-sizing: border-box;\n }\n\n .tab {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-tabs-tab-padding-y, var(--hx-space-2, 0.5rem))\n var(--hx-tabs-tab-padding-x, var(--hx-space-4, 1rem));\n border: none;\n border-bottom: var(--_tab-indicator-bottom, var(--hx-tabs-indicator-size, 2px)) solid\n transparent;\n border-inline-end: var(--_tab-indicator-end, 0px) solid transparent;\n background: none;\n font-family: var(--hx-tabs-tab-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-tabs-tab-font-size, var(--hx-font-size-md, 1rem));\n font-weight: var(--hx-tabs-tab-font-weight, var(--hx-font-weight-medium, 500));\n color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #495057));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n transition:\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n border-inline-end-color var(--hx-transition-fast, 150ms ease),\n background-color var(--hx-transition-fast, 150ms ease);\n position: relative;\n }\n\n /* ─── Hover State ─── */\n\n .tab:not([aria-selected='true']):not([aria-disabled='true']):hover {\n color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #212529));\n background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f8f9fa));\n }\n\n /* ─── Selected State ─── */\n\n .tab[aria-selected='true'] {\n color: var(--hx-tabs-tab-active-color, var(--hx-color-primary-600, #1d4ed8));\n border-bottom-color: var(\n --_tab-indicator-bottom-color,\n var(--hx-tabs-indicator-color, var(--hx-color-primary-500, #2563eb))\n );\n border-inline-end-color: var(--_tab-indicator-end-color, transparent);\n font-weight: var(--hx-tabs-tab-active-font-weight, var(--hx-font-weight-semibold, 600));\n }\n\n /* ─── Focus State ─── */\n\n .tab:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n /* ─── Disabled State ─── */\n\n .tab[aria-disabled='true'] {\n cursor: not-allowed;\n color: var(--hx-color-neutral-400, #adb5bd);\n }\n\n /* ─── Prefix / Suffix Slots ─── */\n\n .tab__prefix,\n .tab__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .tab {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabStyles } from './hx-tab.styles.js';\n\n/**\n * An individual tab button, designed to be used inside an `<hx-tabs>` container.\n * Must be placed in the `tab` named slot of `<hx-tabs>`.\n *\n * @summary Presentational tab button that activates a corresponding panel.\n *\n * @tag hx-tab\n *\n * @slot - Default slot for the tab label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @csspart tab - The underlying button element.\n * @csspart prefix - The container for prefix slot content (e.g. icons).\n * @csspart suffix - The container for suffix slot content (e.g. badges).\n *\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #495057)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #1d4ed8)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #212529)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #f8f9fa)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #2563eb)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color.\n */\n@customElement('hx-tab')\nexport class HelixTab extends LitElement {\n static override styles = [tokenStyles, helixTabStyles];\n\n // ─── Properties ───\n\n /**\n * The name of the `<hx-tab-panel>` this tab controls. Must match the `name`\n * attribute on the corresponding `<hx-tab-panel>`.\n * @attr panel\n */\n @property({ type: String, reflect: true })\n panel = '';\n\n /**\n * Whether this tab is currently selected. Managed by the parent `<hx-tabs>`.\n * @attr selected\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * Whether this tab is disabled. Prevents selection and keyboard navigation.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The id of the panel this tab controls. Set by the parent `<hx-tabs>` to establish the\n * aria-controls relationship on the inner button element (which carries role=\"tab\").\n * @internal\n */\n @property({ type: String, attribute: false })\n controls = '';\n\n // ─── Slot Visibility ───\n\n /** @internal */\n @state() private _hasPrefixSlot = false;\n /** @internal */\n @state() private _hasSuffixSlot = false;\n\n // ─── Event Handling ───\n\n private _handleClick(): void {\n if (this.disabled) {\n return;\n }\n /**\n * Internal event dispatched to signal tab selection to the parent container.\n * Not part of the public API.\n * @internal\n */\n this.dispatchEvent(\n new CustomEvent('hx-tab-select', {\n bubbles: true,\n composed: true,\n detail: { panel: this.panel },\n }),\n );\n }\n\n private _handlePrefixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasPrefixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleSuffixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSuffixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <button\n part=\"tab\"\n class=\"tab\"\n role=\"tab\"\n aria-selected=${this.selected ? 'true' : 'false'}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-controls=${this.controls || nothing}\n tabindex=${this.selected ? '0' : '-1'}\n @click=${this._handleClick}\n >\n <span part=\"prefix\" class=\"tab__prefix\" ?hidden=${!this._hasPrefixSlot}>\n <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n </span>\n <slot></slot>\n <span part=\"suffix\" class=\"tab__suffix\" ?hidden=${!this._hasSuffixSlot}>\n <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n </span>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tab': HelixTab;\n }\n}\n","import { css } from 'lit';\n\nexport const helixTabPanelStyles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n :host(:focus-visible) {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n .panel {\n padding: var(--hx-tabs-panel-padding, var(--hx-space-4, 1rem));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n outline: none;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabPanelStyles } from './hx-tab-panel.styles.js';\n\n/**\n * A content panel associated with an `<hx-tab>`, managed by a parent `<hx-tabs>`.\n *\n * @summary Tab content panel shown when its corresponding tab is selected.\n *\n * @tag hx-tab-panel\n *\n * @slot - Default slot for panel content.\n *\n * @csspart panel - The panel content wrapper.\n *\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #343a40)] - Panel text color.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color.\n */\n@customElement('hx-tab-panel')\nexport class HelixTabPanel extends LitElement {\n static override styles = [tokenStyles, helixTabPanelStyles];\n\n // ─── Properties ───\n\n /**\n * The name that corresponds to the `panel` attribute on the associated `<hx-tab>`.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'tabpanel');\n // tabindex is managed dynamically by the parent hx-tabs component:\n // active panels get tabindex=\"0\", hidden panels get tabindex=\"-1\"\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div part=\"panel\" class=\"panel\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tab-panel': HelixTabPanel;\n }\n}\n"],"names":["helixTabsStyles","css","_hxTabsIdCounter","HelixTabs","LitElement","e","tab","el","p","firstEnabled","enabledTabs","isHorizontal","prevKey","nextKey","focusedTab","_b","_a","currentIndex","activeTab","nextIndex","targetTab","_d","_c","index","changedProperties","tabs","panels","tabId","panelName","panel","panelId","isSelected","dispatchEvent","previousPanel","tabSlot","panelSlot","invalid","devWarn","html","nothing","tokenStyles","__decorateClass","property","state","customElement","helixTabStyles","HelixTab","slot","helixTabPanelStyles","HelixTabPanel"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACO/B,IAAIC,IAAmB,GAuCVC,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAML,KAAQ,MAAM,WAAW,EAAEF,CAAgB,IAS3C,KAAA,cAAyC,cASzC,KAAA,aAAqC,aAQrC,KAAA,QAAQ,IAKC,KAAQ,eAAe,IAKhC,KAAQ,cAAiC,MAEzC,KAAQ,gBAAwC,MAEhD,KAAQ,YAAqC,MAuK7C,KAAQ,mBAAmB,CAACG,MAAmB;AAC7C,UAAI,EAAEA,aAAa,aAAc;AACjC,MAAAA,EAAE,gBAAA;AACF,YAAMC,IAAMD,EACT,aAAA,EACA,KAAK,CAACE,MAAuBA,aAAc,WAAWA,EAAG,QAAQ,YAAA,MAAkB,QAAQ;AAC9F,MAAID,KACF,KAAK,aAAaA,CAAG;AAAA,IAEzB,GA+BA,KAAQ,oBAAoB,MAAY;AAQtC,UAPA,KAAK,wBAAA,GACL,KAAK,cAAc,MACnB,KAAK,gBAAgB,MACrB,KAAK,mBAAA,GAID,CAFW,KAAK,WAAA,EACa,KAAK,CAACE,MAAMA,EAAE,SAAS,KAAK,YAAY,GACjD;AACtB,cAAMC,IAAe,KAAK,gBAAA,EAAkB,CAAC;AAC7C,QAAIA,IACF,KAAK,aAAaA,GAAc,EAAK,IAErC,KAAK,eAAe;AAAA,MAExB;AAAA,IACF,GAGA,KAAQ,iBAAiB,CAACJ,MAA2B;;AACnD,YAAMK,IAAc,KAAK,gBAAA;AACzB,UAAIA,EAAY,WAAW;AACzB;AAGF,YAAMC,IAAe,KAAK,gBAAgB,cACpCC,IAAUD,IAAe,cAAc,WACvCE,IAAUF,IAAe,eAAe;AAG9C,UAAI,CADoB,CAACC,GAASC,GAAS,QAAQ,OAAO,KAAK,OAAO,EAAE,SAASR,EAAE,GAAG;AAEpF;AAKF,YAAMS,IAAaJ,EAAY,KAAK,CAACJ,MAAQA,MAAQ,SAAS,aAAa;AAE3E,UAAID,EAAE,QAAQ,OAAOA,EAAE,QAAQ,SAAS;AACtC,QAAIS,MACFT,EAAE,eAAA,GACF,KAAK,aAAaS,CAAU,IAC5BC,KAAAC,IAAAF,EAAW,eAAX,gBAAAE,EAAuB,cAAc,cAArC,QAAAD,EAAgD;AAElD;AAAA,MACF;AAEA,MAAAV,EAAE,eAAA;AAEF,UAAIY,IAAeH,IAAaJ,EAAY,QAAQI,CAAU,IAAI;AAElE,UAAIG,MAAiB,IAAI;AACvB,cAAMC,IAAYR,EAAY,KAAK,CAACJ,MAAQA,EAAI,UAAU,KAAK,YAAY;AAC3E,QAAAW,IAAeC,IAAYR,EAAY,QAAQQ,CAAS,IAAI;AAAA,MAC9D;AAEA,UAAIC;AAEJ,MAAId,EAAE,QAAQ,SACZc,IAAY,IACHd,EAAE,QAAQ,QACnBc,IAAYT,EAAY,SAAS,IACxBL,EAAE,QAAQQ,IACnBM,KAAaF,IAAe,KAAKP,EAAY,SAG7CS,IAAYF,KAAgB,IAAIP,EAAY,SAAS,IAAIO,IAAe;AAG1E,YAAMG,IAAYV,EAAYS,CAAS;AACvC,MAAKC,OAKLC,KAAAC,IAAAF,EAAU,eAAV,gBAAAE,EAAsB,cAAc,cAApC,QAAAD,EAA+C,SAE3C,KAAK,eAAe,eACtB,KAAK,aAAaD,CAAS;AAAA,IAE/B;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAvRA,IAAI,gBAAwB;AAC1B,WAAO,KAAK,WAAW,UAAU,CAACd,MAAQA,EAAI,UAAU,KAAK,YAAY;AAAA,EAC3E;AAAA,EAEA,IAAI,cAAciB,GAAe;AAC/B,UAAMjB,IAAM,KAAK,SAAA,EAAWiB,CAAK;AACjC,IAAIjB,KAAO,CAACA,EAAI,YACd,KAAK,aAAaA,GAAK,EAAI;AAAA,EAE/B;AAAA,EAEQ,WAAuB;AAC7B,WAAK,KAAK,gBACR,KAAK,cAAc,MAAM,KAAK,KAAK,iBAAiB,iBAAiB,CAAC,EAAE;AAAA,MACtE,CAACC,MAAuBA,EAAG,QAAQ,kBAAkB;AAAA,IAAA,IAGlD,KAAK;AAAA,EACd;AAAA,EAEQ,aAA8B;AACpC,WAAK,KAAK,kBACR,KAAK,gBAAgB,MAAM,KAAK,KAAK,iBAAiB,uBAAuB,CAAC,EAAE;AAAA,MAC9E,CAACA,MAA4BA,EAAG,QAAQ,kBAAkB;AAAA,IAAA,IAGvD,KAAK;AAAA,EACd;AAAA,EAEQ,kBAA8B;AACpC,WAAO,KAAK,WAAW,OAAO,CAACD,MAAQ,CAACA,EAAI,QAAQ;AAAA,EACtD;AAAA;AAAA,EAIS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,iBAAiB,KAAK,gBAAgB,GAC5D,KAAK,iBAAiB,WAAW,KAAK,cAAc,GAEpD,KAAK,YAAY,IAAI,iBAAiB,MAAM;AAC1C,WAAK,cAAc,MACnB,KAAK,gBAAgB,MACrB,KAAK,mBAAA;AAAA,IACP,CAAC,GACD,KAAK,UAAU,QAAQ,MAAM;AAAA,MAC3B,SAAS;AAAA,MACT,iBAAiB,CAAC,SAAS,MAAM;AAAA,IAAA,CAClC;AAAA,EACH;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,iBAAiB,KAAK,gBAAgB,GAC/D,KAAK,oBAAoB,WAAW,KAAK,cAAc,IACvDU,IAAA,KAAK,cAAL,QAAAA,EAAgB,cAChB,KAAK,YAAY;AAAA,EACnB;AAAA,EAES,eAAqB;AAG5B,QAFA,KAAK,mBAAA,GAED,CAAC,KAAK,cAAc;AACtB,YAAMP,IAAe,KAAK,gBAAA,EAAkB,CAAC;AAC7C,MAAIA,KACF,KAAK,aAAaA,GAAc,EAAK;AAAA,IAEzC;AAAA,EACF;AAAA,EAES,QAAQe,GAAoD;AACnE,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,cAAc,KACtC,KAAK,qBAAA;AAAA,EAET;AAAA;AAAA,EAIQ,qBAA2B;AACjC,UAAMC,IAAO,KAAK,SAAA,GACZC,IAAS,KAAK,WAAA;AAEpB,IAAAD,EAAK,QAAQ,CAACnB,GAAK,MAAM;AACvB,YAAMqB,IAAQrB,EAAI,MAAM,UAAU,KAAK,GAAG,IAAI,CAAC;AAC/C,MAAAA,EAAI,KAAKqB;AAGT,YAAMC,IAAYtB,EAAI,OAChBuB,IAAQH,EAAO,KAAK,CAAClB,MAAMA,EAAE,SAASoB,CAAS,KAAKF,EAAO,CAAC;AAClE,UAAIG,GAAO;AACT,cAAMC,IAAUD,EAAM,MAAM,YAAY,KAAK,GAAG,IAAI,CAAC;AACrD,QAAAA,EAAM,KAAKC,GAEXxB,EAAI,WAAWwB,GACfD,EAAM,aAAa,mBAAmBF,CAAK;AAAA,MAC7C;AAAA,IACF,CAAC,GAED,KAAK,qBAAA;AAAA,EACP;AAAA,EAEQ,uBAA6B;AACnC,UAAMF,IAAO,KAAK,SAAA,GACZC,IAAS,KAAK,WAAA;AAEpB,IAAAD,EAAK,QAAQ,CAACnB,MAAQ;AACpB,YAAMyB,IAAazB,EAAI,UAAU,KAAK;AACtC,MAAAA,EAAI,WAAWyB,GAMfzB,EAAI,WAAWyB,IAAa,IAAI;AAAA,IAClC,CAAC,GAEDL,EAAO,QAAQ,CAACG,MAAU;AAExB,MADiBA,EAAM,SAAS,KAAK,gBAEnCA,EAAM,gBAAgB,QAAQ,GAC9BA,EAAM,aAAa,YAAY,GAAG,MAElCA,EAAM,aAAa,UAAU,EAAE,GAC/BA,EAAM,aAAa,YAAY,IAAI;AAAA,IAEvC,CAAC;AAAA,EACH;AAAA;AAAA,EAIQ,aAAavB,GAAe0B,IAAgB,IAAY;AAC9D,QAAI1B,EAAI;AACN;AAGF,UAAMmB,IAAO,KAAK,SAAA,GACZQ,IAAgB,KAAK;AAG3B,QAFA,KAAK,eAAe3B,EAAI,OAEpB0B,KAAiBC,MAAkB,KAAK,cAAc;AACxD,YAAMV,IAAQE,EAAK,QAAQnB,CAAG;AAK9B,WAAK;AAAA,QACH,IAAI,YAAY,iBAAiB;AAAA,UAC/B,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,OAAOA,EAAI,IAAI,OAAAiB,EAAA;AAAA,QAAM,CAChC;AAAA,MAAA;AAAA,IAEL;AAAA,EACF;AAAA;AAAA,EAiBQ,0BAAgC;;AACtC,UAAMW,KAAUlB,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B,qBAC1DmB,KAAYpB,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAClE,QAAImB,GAAS;AACX,YAAME,IAAUF,EACb,iBAAA,EACA,OAAO,CAAC3B,MAAOA,EAAG,QAAQ,YAAA,MAAkB,QAAQ;AACvD,MAAI6B,EAAQ,SAAS,KACnBC;AAAA,QACE;AAAA,QACA,2DAA2DD,EAAQ,IAAI,CAAC7B,MAAO,IAAIA,EAAG,QAAQ,YAAA,CAAa,GAAG,EAAE,KAAK,IAAI,CAAC;AAAA,MAAA;AAAA,IAGhI;AACA,QAAI4B,GAAW;AACb,YAAMC,IAAUD,EACb,iBAAA,EACA,OAAO,CAAC5B,MAAOA,EAAG,QAAQ,YAAA,MAAkB,cAAc;AAC7D,MAAI6B,EAAQ,SAAS,KACnBC;AAAA,QACE;AAAA,QACA,mEAAmED,EAAQ,IAAI,CAAC7B,MAAO,IAAIA,EAAG,QAAQ,YAAA,CAAa,GAAG,EAAE,KAAK,IAAI,CAAC;AAAA,MAAA;AAAA,IAGxI;AAAA,EACF;AAAA;AAAA,EAuFS,SAAS;AAChB,WAAO+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAMkB,KAAK,WAAW;AAAA,uBACtB,KAAK,SAASC,CAAO;AAAA;AAAA,yCAEH,KAAK,iBAAiB;AAAA;AAAA;AAAA,8BAGjC,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAIlD;AACF;AAnWapC,EACK,SAAS,CAACqC,GAAaxC,CAAe;AActDyC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BvC,EAeX,WAAA,eAAA,CAAA;AASAsC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,SAAS,IAAM;AAAA,GAvBvDvC,EAwBX,WAAA,cAAA,CAAA;AAQAsC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/B9BvC,EAgCX,WAAA,SAAA,CAAA;AAKiBsC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GArCIxC,EAqCM,WAAA,gBAAA,CAAA;AArCNA,IAANsC,EAAA;AAAA,EADNG,EAAc,SAAS;AAAA,GACXzC,CAAA;AC9CN,MAAM0C,IAAiB5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACiCvB,IAAM6C,IAAN,cAAuB1C,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAWL,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,WAAW,IAQX,KAAA,WAAW,IAKF,KAAQ,iBAAiB,IAEzB,KAAQ,iBAAiB;AAAA,EAAA;AAAA;AAAA,EAI1B,eAAqB;AAC3B,IAAI,KAAK,YAQT,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB;AAAA,QAC/B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,wBAAwBC,GAAgB;AAC9C,UAAM0C,IAAO1C,EAAE;AACf,SAAK,iBAAiB0C,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACvE;AAAA,EAEQ,wBAAwB1C,GAAgB;AAC9C,UAAM0C,IAAO1C,EAAE;AACf,SAAK,iBAAiB0C,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACvE;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOT;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKa,KAAK,WAAW,SAAS,OAAO;AAAA,wBAChC,KAAK,WAAW,SAAS,OAAO;AAAA,wBAChC,KAAK,YAAYC,CAAO;AAAA,mBAC7B,KAAK,WAAW,MAAM,IAAI;AAAA,iBAC5B,KAAK,YAAY;AAAA;AAAA,0DAEwB,CAAC,KAAK,cAAc;AAAA,4CAClC,KAAK,uBAAuB;AAAA;AAAA;AAAA,0DAGd,CAAC,KAAK,cAAc;AAAA,4CAClC,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAItE;AACF;AAhGaO,EACK,SAAS,CAACN,GAAaK,CAAc;AAUrDJ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAV9BI,EAWX,WAAA,SAAA,CAAA;AAOAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjB/BI,EAkBX,WAAA,YAAA,CAAA;AAOAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxB/BI,EAyBX,WAAA,YAAA,CAAA;AAQAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,IAAO;AAAA,GAhCjCI,EAiCX,WAAA,YAAA,CAAA;AAKiBL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtCIG,EAsCM,WAAA,kBAAA,CAAA;AAEAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxCIG,EAwCM,WAAA,kBAAA,CAAA;AAxCNA,IAANL,EAAA;AAAA,EADNG,EAAc,QAAQ;AAAA,GACVE,CAAA;ACjCN,MAAME,IAAsB/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACmB5B,IAAMgD,IAAN,cAA4B7C,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,OAAO;AAAA,EAAA;AAAA;AAAA,EAIE,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,UAAU;AAAA,EAGtC;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOkC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA9BaW,EACK,SAAS,CAACT,GAAaQ,CAAmB;AAS1DP,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAT9BO,EAUX,WAAA,QAAA,CAAA;AAVWA,IAANR,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChBK,CAAA;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-tag-SJJtMlOS.js","sources":["../../src/components/hx-tag/hx-tag.styles.ts","../../src/components/hx-tag/hx-tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTagStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n /* cursor: not-allowed is intentionally omitted — pointer-events: none prevents cursor display */\n }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));\n background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f3f4f6));\n color: var(--hx-tag-color, var(--hx-color-neutral-700, #374151));\n font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n vertical-align: middle;\n border: 1px solid var(--hx-tag-border-color, var(--hx-color-neutral-200, #e5e7eb));\n }\n\n /* ─── Size Variants ─── */\n\n .tag--sm {\n font-size: var(--hx-tag-font-size, var(--hx-font-size-xs, 0.75rem));\n padding: var(--hx-tag-padding-y, var(--hx-space-0-5, 0.125rem))\n var(--hx-tag-padding-x, var(--hx-space-1-5, 0.375rem));\n }\n\n .tag--md {\n font-size: var(--hx-tag-font-size, var(--hx-font-size-sm, 0.875rem));\n padding: var(--hx-tag-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-tag-padding-x, var(--hx-space-2, 0.5rem));\n }\n\n .tag--lg {\n font-size: var(--hx-tag-font-size, var(--hx-font-size-base, 1rem));\n padding: var(--hx-tag-padding-y, var(--hx-space-1-5, 0.375rem))\n var(--hx-tag-padding-x, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Color Variants ─── */\n\n .tag--default {\n --hx-tag-bg: var(--hx-color-neutral-100, #f3f4f6);\n --hx-tag-color: var(--hx-color-neutral-700, #374151);\n --hx-tag-border-color: var(--hx-color-neutral-200, #e5e7eb);\n }\n\n .tag--primary {\n --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);\n --hx-tag-color: var(--hx-color-primary-700, #1d4ed8);\n --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);\n }\n\n .tag--success {\n --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);\n --hx-tag-color: var(--hx-color-success-700, #15803d);\n --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);\n }\n\n .tag--warning {\n --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);\n --hx-tag-color: var(--hx-color-warning-700, #b45309);\n --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);\n }\n\n .tag--danger {\n --hx-tag-bg: var(--hx-color-error-50, #fef2f2);\n --hx-tag-color: var(--hx-color-error-700, #b91c1c);\n --hx-tag-border-color: var(--hx-color-error-200, #fecaca);\n }\n\n /* ─── Pill Mode ─── */\n\n /* Uses --hx-tag-border-radius-pill (separate from --hx-tag-border-radius) so consumer\n overrides to --hx-tag-border-radius don't break pill shape. */\n .tag--pill {\n border-radius: var(--hx-tag-border-radius-pill, var(--hx-border-radius-full, 9999px));\n }\n\n /* ─── Prefix / Suffix slots ─── */\n\n .tag__prefix,\n .tag__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n /* Hide wrappers when slots have no assigned content */\n .tag__prefix--hidden,\n .tag__suffix--hidden {\n display: none;\n }\n\n /* ─── Remove Button ─── */\n\n .tag__remove-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n /* WCAG 2.5.8 (Level AA): minimum 24×24 CSS pixel touch target */\n min-width: 24px;\n min-height: 24px;\n padding: 0;\n margin-inline-start: var(--hx-space-1, 0.25rem);\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n line-height: 0;\n }\n\n .tag__remove-button:hover {\n opacity: 1;\n }\n\n .tag__remove-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n outline-offset: var(--hx-focus-ring-offset, 1px);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTagStyles } from './hx-tag.styles.js';\n\n/**\n * A compact label for categorization, filtering, and selection.\n *\n * @summary Compact tag/chip for categorization, filtering, and selection.\n *\n * @tag hx-tag\n *\n * @slot - Default slot for tag label text.\n * @slot prefix - Icon or avatar rendered before the label.\n * @slot suffix - Content rendered after the label.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart base - The root tag element.\n * @csspart prefix - The prefix slot wrapper.\n * @csspart label - The label slot wrapper.\n * @csspart suffix - The suffix slot wrapper.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-tag-bg=var(--hx-color-neutral-100)] - Tag background color.\n * @cssprop [--hx-tag-color=var(--hx-color-neutral-700)] - Tag text color.\n * @cssprop [--hx-tag-border-color=var(--hx-color-neutral-200)] - Tag border color.\n * @cssprop [--hx-tag-font-size] - Tag font size (set per size variant).\n * @cssprop [--hx-tag-font-weight=var(--hx-font-weight-medium)] - Tag font weight.\n * @cssprop [--hx-tag-font-family=var(--hx-font-family-sans)] - Tag font family.\n * @cssprop [--hx-tag-border-radius=var(--hx-border-radius-sm)] - Tag border radius (non-pill mode).\n * @cssprop [--hx-tag-border-radius-pill=var(--hx-border-radius-full)] - Border radius in pill mode. Independent of --hx-tag-border-radius so consumer overrides don't break pill shape.\n * @cssprop [--hx-tag-padding-x] - Tag horizontal padding (set per size variant).\n * @cssprop [--hx-tag-padding-y] - Tag vertical padding (set per size variant).\n *\n * @note Visual style variants (filled/outlined/ghost) are not supported. This component\n * intentionally provides only filled-style tags with color variation via the `variant` prop.\n *\n * @note aria-live removal announcements are the consuming application's responsibility.\n * When a tag is removed from the DOM, applications should announce the change via their\n * own aria-live region to inform screen reader users of clinical data filter changes.\n */\n@customElement('hx-tag')\nexport class HelixTag extends LitElement {\n static override styles = [tokenStyles, helixTagStyles];\n\n /**\n * Visual style variant of the tag.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' = 'default';\n\n /**\n * Size of the tag.\n * @attr hx-size\n * @note The attribute name is `hx-size` (not `size`) to avoid conflict with the native\n * `size` attribute. Storybook autodocs controls bind to the property name `size`; when\n * writing HTML or Drupal Twig templates always use the `hx-size` attribute name.\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the tag uses fully rounded (pill) styling.\n * @attr pill\n */\n @property({ type: Boolean, reflect: true })\n pill = false;\n\n /**\n * Whether the tag renders a dismiss button.\n * @attr removable\n */\n @property({ type: Boolean, reflect: true })\n removable = false;\n\n /**\n * Whether the tag is disabled. When disabled, interactions are suppressed.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n // ─── Internal State ───\n\n /**\n * Text from the default slot only (excludes prefix/suffix slotted content).\n * Used to build the remove button's aria-label without polluting it with icon text.\n * @internal\n */\n @state() private _defaultSlotText = '';\n\n /** @internal Whether the prefix slot has assigned content. */\n @state() private _hasPrefix = false;\n\n /** @internal Whether the suffix slot has assigned content. */\n @state() private _hasSuffix = false;\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleRemove(): void {\n if (this.disabled) return;\n this.dispatchEvent(\n new CustomEvent('hx-remove', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal Updates _defaultSlotText from only the default slot's text nodes. */\n private _onDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._defaultSlotText = nodes\n .filter((n): n is Text => n.nodeType === Node.TEXT_NODE)\n .map((n) => n.textContent ?? '')\n .join('')\n .trim();\n }\n\n /** @internal */\n private _onPrefixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasPrefix = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _onSuffixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSuffix = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n tag: true,\n [`tag--${this.variant}`]: true,\n [`tag--${this.size}`]: true,\n 'tag--pill': this.pill,\n };\n\n const prefixClasses = {\n tag__prefix: true,\n 'tag__prefix--hidden': !this._hasPrefix,\n };\n\n const suffixClasses = {\n tag__suffix: true,\n 'tag__suffix--hidden': !this._hasSuffix,\n };\n\n return html`\n <span part=\"base\" class=${classMap(classes)}>\n <span part=\"prefix\" class=${classMap(prefixClasses)}>\n <slot name=\"prefix\" @slotchange=${this._onPrefixSlotChange}></slot>\n </span>\n <span part=\"label\" class=\"tag__label\">\n <slot @slotchange=${this._onDefaultSlotChange}></slot>\n </span>\n <span part=\"suffix\" class=${classMap(suffixClasses)}>\n <slot name=\"suffix\" @slotchange=${this._onSuffixSlotChange}></slot>\n </span>\n ${this.removable\n ? html`<button\n part=\"remove-button\"\n class=\"tag__remove-button\"\n aria-label=${`Remove ${this._defaultSlotText}`}\n ?disabled=${this.disabled}\n @click=${this._handleRemove}\n >\n <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n <path\n d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>`\n : nothing}\n </span>\n `;\n }\n}\n\nexport type HxTag = HelixTag;\n\n/** @deprecated Use {@link HxTag} instead. The `Wc` prefix was a legacy alias. */\nexport type WcTag = HelixTag;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tag': HelixTag;\n }\n}\n"],"names":["helixTagStyles","css","HelixTag","LitElement","e","nodes","n","slot","classes","prefixClasses","suffixClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-text-input-BrCjo4fJ.js","sources":["../../src/components/hx-text-input/hx-text-input.styles.ts","../../src/components/hx-text-input/hx-text-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextInputStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n /* ─── Label ─── */\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Input Wrapper ─── */\n\n .field__input-wrapper {\n display: flex;\n align-items: center;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n overflow: hidden;\n }\n\n .field__input-wrapper:focus-within {\n border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Error State ─── */\n\n .field--error .field__input-wrapper {\n border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Slots (Prefix / Suffix) ─── */\n\n .field__prefix,\n .field__suffix {\n display: flex;\n align-items: center;\n color: var(--hx-color-neutral-500, #6c757d);\n flex-shrink: 0;\n }\n\n /* Only add padding when slot has content — avoids phantom space on empty slots */\n .field__prefix--filled {\n padding: 0 var(--hx-space-3, 0.75rem);\n }\n\n .field__suffix--filled {\n padding: 0 var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Native Input ─── */\n\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-size-10, 2.5rem);\n width: 100%;\n }\n\n .field__input::placeholder {\n color: var(--hx-color-neutral-400, #adb5bd);\n }\n\n .field__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Size Variants ─── */\n\n .field--size-sm .field__input {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n min-height: var(--hx-size-8, 2rem);\n font-size: var(--hx-input-sm-font-size, 0.875rem);\n }\n\n .field--size-md .field__input {\n /* md is the default — no overrides needed */\n }\n\n .field--size-lg .field__input {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n min-height: var(--hx-size-12, 3rem);\n font-size: var(--hx-input-lg-font-size, 1.125rem);\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-color-neutral-500, #6c757d);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .field__input-wrapper {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextInputStyles } from './hx-text-input.styles.js';\n\n// Module-level counter for stable, SSR-compatible IDs (avoids Math.random() hydration mismatch)\nlet _hxTextInputIdCounter = 0;\n\n/**\n * A text input component with label, validation, and form association.\n * Supports accessible labeling via `label` property, `aria-label` attribute, or the `label` slot.\n * Uses `aria-invalid`, `aria-describedby`, and `aria-required` on the native input for screen reader support.\n * Error messages are announced via `role=\"alert\"`. Keyboard navigation follows native input behavior.\n *\n * @summary Form-associated text input with built-in label, error, and help text.\n *\n * @tag hx-text-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot prefix - Content rendered before the input (e.g., icon).\n * @slot suffix - Content rendered after the input (e.g., icon or button).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, and suffix.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-input-sm-font-size=0.875rem] - Font size for the sm size variant.\n * @cssprop [--hx-input-lg-font-size=1.125rem] - Font size for the lg size variant.\n */\n@customElement('hx-text-input')\nexport class HelixTextInput extends LitElement {\n static override styles = [tokenStyles, helixTextInputStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static formAssociated = true;\n\n /** @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The visible label text for the input.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Placeholder text shown when the input is empty.\n * @attr placeholder\n */\n @property({ type: String })\n placeholder = '';\n\n /**\n * The current value of the input.\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * The type of the native input element.\n * @attr type\n */\n @property({ type: String })\n type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'date' = 'text';\n\n /**\n * Whether the input is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the input is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message to display. When set, the input enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the input for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * The name of the input, used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * Accessible name for screen readers, if different from the visible label.\n * @attr aria-label\n */\n @property({ type: String, attribute: 'aria-label' })\n override ariaLabel: string | null = null;\n\n /**\n * Whether the input is read-only.\n * @attr readonly\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * Minimum number of characters allowed.\n * @attr minlength\n */\n @property({ type: Number })\n minlength: number | undefined = undefined;\n\n /**\n * Maximum number of characters allowed.\n * @attr maxlength\n */\n @property({ type: Number })\n maxlength: number | undefined = undefined;\n\n /**\n * A regular expression pattern the value must match for form validation.\n * @attr pattern\n */\n @property({ type: String })\n pattern = '';\n\n /**\n * Hint for the browser's autocomplete feature. Accepts standard HTML autocomplete values.\n * @attr autocomplete\n */\n @property({ type: String })\n autocomplete = '';\n\n /**\n * Visual size of the input field.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n // ─── Internal References ───\n\n /** @internal */\n @query('.field__input')\n private _input: HTMLInputElement | undefined;\n\n // ─── Slot Tracking ───\n\n /** @internal */\n private _hasLabelSlot = false;\n /** @internal */\n private _hasErrorSlot = false;\n /** @internal */\n private _hasPrefixSlot = false;\n /** @internal */\n private _hasSuffixSlot = false;\n /** @internal */\n private _hasHelpTextSlot = false;\n\n /** @internal */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._inputId}-slotted-label`;\n }\n }\n this.requestUpdate();\n }\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n this.requestUpdate();\n }\n\n /** @internal */\n private _handlePrefixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasPrefixSlot = slot.assignedElements().length > 0;\n this.requestUpdate();\n }\n\n /** @internal */\n private _handleSuffixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSuffixSlot = slot.assignedElements().length > 0;\n this.requestUpdate();\n }\n\n /** @internal */\n private _handleHelpTextSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpTextSlot = slot.assignedElements().length > 0;\n this.requestUpdate();\n }\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n if (\n changedProperties.has('value') ||\n changedProperties.has('required') ||\n changedProperties.has('minlength') ||\n changedProperties.has('maxlength')\n ) {\n this._updateValidity();\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the input satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'This field is required.',\n this._input,\n );\n } else if (\n this.minlength !== undefined &&\n this.value.length > 0 &&\n this.value.length < this.minlength\n ) {\n this._internals.setValidity(\n { tooShort: true },\n this.error || `Please lengthen this text to ${this.minlength} characters or more.`,\n this._input,\n );\n } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n this._internals.setValidity(\n { tooLong: true },\n this.error || `Please shorten this text to ${this.maxlength} characters or fewer.`,\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n // Called by the form when it resets\n formResetCallback(): void {\n this.value = '';\n this._internals.setFormValue('');\n }\n\n // Called when the form restores state (e.g., back/forward navigation)\n formStateRestoreCallback(state: string): void {\n this.value = state;\n }\n\n // Called when a parent fieldset is disabled/enabled\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleInput(e: Event): void {\n const target = e.target as HTMLInputElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n\n /**\n * Dispatched on every keystroke as the user types.\n * @event hx-input\n */\n this.dispatchEvent(\n new CustomEvent('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n /** @internal */\n private _handleChange(e: Event): void {\n const target = e.target as HTMLInputElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n this._updateValidity();\n\n /**\n * Dispatched when the input loses focus after its value changed.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Public Methods ───\n\n /** Moves focus to the input element. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\n\n /** Selects all text in the input. */\n select(): void {\n this._input?.select();\n }\n\n // ─── Render ───\n\n /** @internal */\n private _inputId = `hx-text-input-${++_hxTextInputIdCounter}`;\n /** @internal */\n private _helpTextId = `${this._inputId}-help`;\n /** @internal */\n private _errorId = `${this._inputId}-error`;\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n [`field--size-${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError ? this._errorId : null,\n this.helpText || this._hasHelpTextSlot ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n <span\n class=${classMap({\n field__prefix: true,\n 'field__prefix--filled': this._hasPrefixSlot,\n })}\n >\n <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n </span>\n\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._inputId}\n type=${this.type}\n .value=${live(this.value)}\n placeholder=${ifDefined(this.placeholder || undefined)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name || undefined)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n pattern=${ifDefined(this.pattern || undefined)}\n autocomplete=${ifDefined(this.autocomplete || undefined)}\n aria-label=${ifDefined(this.ariaLabel || undefined)}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n @input=${this._handleInput}\n @change=${this._handleChange}\n />\n\n <span\n class=${classMap({\n field__suffix: true,\n 'field__suffix--filled': this._hasSuffixSlot,\n })}\n >\n <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n </span>\n </div>\n\n ${hasError\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n </div>\n `\n : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n ${(this.helpText || this._hasHelpTextSlot) && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n ${this.helpText}\n </slot>\n </div>\n `\n : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-text-input': HelixTextInput;\n }\n}\n\n/** Primary type alias for hx-text-input */\nexport type HxTextInput = HelixTextInput;\n\n/** @deprecated Use HxTextInput instead */\nexport type WcTextInput = HelixTextInput;\n"],"names":["helixTextInputStyles","css","_hxTextInputIdCounter","HelixTextInput","LitElement","slot","slottedLabel","changedProperties","state","disabled","target","options","_a","hasError","fieldClasses","describedBy","html","classMap","nothing","live","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOpC,IAAIC,IAAwB,GAwCfC,IAAN,cAA6BC,EAAW;AAAA,EAW7C,cAAc;AACZ,UAAA,GAWF,KAAA,QAAQ,IAOR,KAAA,cAAc,IAOd,KAAA,QAAQ,IAOR,KAAA,OAAqF,QAOrF,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAAO,IAOP,KAAS,YAA2B,MAOpC,KAAA,WAAW,IAOX,KAAA,YAAgC,QAOhC,KAAA,YAAgC,QAOhC,KAAA,UAAU,IAOV,KAAA,eAAe,IAOf,KAAA,OAA2B,MAW3B,KAAQ,gBAAgB,IAExB,KAAQ,gBAAgB,IAExB,KAAQ,iBAAiB,IAEzB,KAAQ,iBAAiB,IAEzB,KAAQ,mBAAmB,IA4L3B,KAAQ,WAAW,iBAAiB,EAAEF,CAAqB,IAE3D,KAAQ,cAAc,GAAG,KAAK,QAAQ,SAEtC,KAAQ,WAAW,GAAG,KAAK,QAAQ,UAtUjC,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA,EAwIQ,uBAAuB,GAAgB;AAC7C,UAAMG,IAAO,EAAE;AAEf,QADA,KAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS,GAClD,KAAK,eAAe;AACtB,YAAMC,IAAeD,EAAK,iBAAA,EAAmB,CAAC;AAC9C,MAAIC,KAAgB,CAACA,EAAa,OAChCA,EAAa,KAAK,GAAG,KAAK,QAAQ;AAAA,IAEtC;AACA,SAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAGQ,uBAAuB,GAAgB;AAC7C,UAAMD,IAAO,EAAE;AACf,SAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS,GACtD,KAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAGQ,wBAAwB,GAAgB;AAC9C,UAAMA,IAAO,EAAE;AACf,SAAK,iBAAiBA,EAAK,iBAAA,EAAmB,SAAS,GACvD,KAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAGQ,wBAAwB,GAAgB;AAC9C,UAAMA,IAAO,EAAE;AACf,SAAK,iBAAiBA,EAAK,iBAAA,EAAmB,SAAS,GACvD,KAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAGQ,0BAA0B,GAAgB;AAChD,UAAMA,IAAO,EAAE;AACf,SAAK,mBAAmBA,EAAK,iBAAA,EAAmB,SAAS,GACzD,KAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAIS,QAAQE,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,OAAO,KAC/B,KAAK,WAAW,aAAa,KAAK,KAAK,IAGvCA,EAAkB,IAAI,OAAO,KAC7BA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,WAAW,KACjCA,EAAkB,IAAI,WAAW,MAEjC,KAAK,gBAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,gBAAyB;AACvB,WAAO,KAAK,WAAW,cAAA;AAAA,EACzB;AAAA;AAAA,EAGA,iBAA0B;AACxB,WAAO,KAAK,WAAW,eAAA;AAAA,EACzB;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,IAAI,KAAK,YAAY,CAAC,KAAK,QACzB,KAAK,WAAW;AAAA,MACd,EAAE,cAAc,GAAA;AAAA,MAChB,KAAK,SAAS;AAAA,MACd,KAAK;AAAA,IAAA,IAGP,KAAK,cAAc,UACnB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,KAAK,YAEzB,KAAK,WAAW;AAAA,MACd,EAAE,UAAU,GAAA;AAAA,MACZ,KAAK,SAAS,gCAAgC,KAAK,SAAS;AAAA,MAC5D,KAAK;AAAA,IAAA,IAEE,KAAK,cAAc,UAAa,KAAK,MAAM,SAAS,KAAK,YAClE,KAAK,WAAW;AAAA,MACd,EAAE,SAAS,GAAA;AAAA,MACX,KAAK,SAAS,+BAA+B,KAAK,SAAS;AAAA,MAC3D,KAAK;AAAA,IAAA,IAGP,KAAK,WAAW,YAAY,EAAE;AAAA,EAElC;AAAA;AAAA,EAGA,oBAA0B;AACxB,SAAK,QAAQ,IACb,KAAK,WAAW,aAAa,EAAE;AAAA,EACjC;AAAA;AAAA,EAGA,yBAAyBC,GAAqB;AAC5C,SAAK,QAAQA;AAAA,EACf;AAAA;AAAA,EAGA,qBAAqBC,GAAyB;AAC5C,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,UAAMC,IAAS,EAAE;AACjB,SAAK,QAAQA,EAAO,OACpB,KAAK,WAAW,aAAa,KAAK,KAAK,GAMvC,KAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,cAAc,GAAgB;AACpC,UAAMA,IAAS,EAAE;AACjB,SAAK,QAAQA,EAAO,OACpB,KAAK,WAAW,aAAa,KAAK,KAAK,GACvC,KAAK,gBAAA,GAML,KAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKS,MAAMC,GAA8B;;AAC3C,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa,MAAMD;AAAA,EACrB;AAAA;AAAA,EAGA,SAAe;;AACb,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa;AAAA,EACf;AAAA,EAWS,SAAS;AAChB,UAAMC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAEhCC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBD;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,CAAC,eAAe,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAG1BE,IACJ;AAAA,MACEF,IAAW,KAAK,WAAW;AAAA,MAC3B,KAAK,YAAY,KAAK,mBAAmB,KAAK,cAAc;AAAA,IAAA,EAE3D,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAElB,WAAOG;AAAA,gCACqBC,EAASH,CAAY,CAAC;AAAA;AAAA,2CAEX,KAAK,sBAAsB;AAAA,cACxD,KAAK,QACHE;AAAA,iEACiD,KAAK,QAAQ;AAAA,sBACxD,KAAK,KAAK;AAAA,sBACV,KAAK,WACHA,sEACAE,CAAO;AAAA;AAAA,oBAGfA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMHD,EAAS;AAAA,MACf,eAAe;AAAA,MACf,yBAAyB,KAAK;AAAA,IAAA,CAC/B,CAAC;AAAA;AAAA,8CAEgC,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMzD,KAAK,QAAQ;AAAA,mBACX,KAAK,IAAI;AAAA,qBACPE,EAAK,KAAK,KAAK,CAAC;AAAA,0BACXC,EAAU,KAAK,eAAe,MAAS,CAAC;AAAA,wBAC1C,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClBA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,wBAC5BA,EAAU,KAAK,SAAS,CAAC;AAAA,wBACzBA,EAAU,KAAK,SAAS,CAAC;AAAA,sBAC3BA,EAAU,KAAK,WAAW,MAAS,CAAC;AAAA,2BAC/BA,EAAU,KAAK,gBAAgB,MAAS,CAAC;AAAA,yBAC3CA,EAAU,KAAK,aAAa,MAAS,CAAC;AAAA,8BACjCA;AAAA,MAChB,KAAK,gBAAgB,GAAG,KAAK,QAAQ,mBAAmB;AAAA,IAAA,CACzD;AAAA,2BACcP,IAAW,SAASK,CAAO;AAAA,+BACvBE,EAAUL,CAAW,CAAC;AAAA,qBAChC,KAAK,YAAY;AAAA,sBAChB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,oBAIpBE,EAAS;AAAA,MACf,eAAe;AAAA,MACf,yBAAyB,KAAK;AAAA,IAAA,CAC/B,CAAC;AAAA;AAAA,8CAEgC,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,UAIhEJ,IACEG;AAAA,0DAC8C,KAAK,QAAQ;AAAA,iDACtB,KAAK,sBAAsB,KAAK,KAAK,KAAK;AAAA;AAAA,gBAG/EA,mCAAsC,KAAK,sBAAsB,UAAU;AAAA,WAC5E,KAAK,YAAY,KAAK,qBAAqB,CAACH,IAC3CG;AAAA,kEACsD,KAAK,WAAW;AAAA,qDAC7B,KAAK,yBAAyB;AAAA,oBAC/D,KAAK,QAAQ;AAAA;AAAA;AAAA,gBAIrBA,uCAA0C,KAAK,yBAAyB,UAAU;AAAA;AAAA;AAAA,EAG5F;AACF;AAzbab,EACK,SAAS,CAACkB,GAAarB,CAAoB;AADhDG,EAMJ,iBAAiB;AAiBxBmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBfpB,EAuBX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfpB,EA8BX,WAAA,eAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfpB,EAqCX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3CfpB,EA4CX,WAAA,QAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlD/BpB,EAmDX,WAAA,YAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzD/BpB,EA0DX,WAAA,YAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhEfpB,EAiEX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAvEvCpB,EAwEX,WAAA,YAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9EfpB,EA+EX,WAAA,QAAA,CAAA;AAOSmB,EAAA;AAAA,EADRC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GArFxCpB,EAsFF,WAAA,aAAA,CAAA;AAOTmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5F/BpB,EA6FX,WAAA,YAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnGfpB,EAoGX,WAAA,aAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1GfpB,EA2GX,WAAA,aAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjHfpB,EAkHX,WAAA,WAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxHfpB,EAyHX,WAAA,gBAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,SAAS,IAAM;AAAA,GA/HpDpB,EAgIX,WAAA,QAAA,CAAA;AAMQmB,EAAA;AAAA,EADPE,EAAM,eAAe;AAAA,GArIXrB,EAsIH,WAAA,UAAA,CAAA;AAtIGA,IAANmB,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjBtB,CAAA;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-time-picker-DRRAFuVd.js","sources":["../../src/components/hx-time-picker/hx-time-picker.styles.ts","../../src/components/hx-time-picker/hx-time-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTimePickerStyles = css`\n :host {\n display: block;\n position: relative;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n /* ─── Label ─── */\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Combobox Wrapper ─── */\n\n .field__combobox {\n position: relative;\n display: flex;\n align-items: center;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-neutral-300));\n border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n overflow: visible;\n }\n\n .field__combobox:focus-within {\n border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));\n /* Fallback for Safari < 16.2 (no color-mix support) */\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Error State ─── */\n\n .field--error .field__combobox {\n border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));\n }\n\n .field--error .field__combobox:focus-within {\n border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));\n /* Fallback for Safari < 16.2 (no color-mix support) */\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-time-picker-error-color, var(--hx-color-error-500));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-time-picker-error-color, var(--hx-color-error-500))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Native Input ─── */\n\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-time-picker-color, var(--hx-color-neutral-800));\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-size-10, 2.5rem);\n width: 100%;\n cursor: text;\n }\n\n .field__input::placeholder {\n color: var(--hx-color-neutral-400);\n }\n\n .field__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Toggle Button ─── */\n\n .field__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n padding: 0 var(--hx-space-3, 0.75rem);\n color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));\n cursor: pointer;\n height: 100%;\n min-height: var(--hx-size-10, 2.5rem);\n flex-shrink: 0;\n border-inline-start: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-neutral-300));\n }\n\n .field__toggle:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: -2px;\n border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem))\n var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n }\n\n /* ─── Listbox Dropdown ─── */\n\n .field__listbox {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n inset-inline-start: 0;\n inset-inline-end: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-neutral-300));\n border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-time-picker-listbox-shadow,\n 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)\n );\n max-height: var(--hx-time-picker-listbox-max-height, 16rem);\n overflow-y: auto;\n padding: var(--hx-space-1, 0.25rem) 0;\n list-style: none;\n margin: 0;\n\n @media (prefers-reduced-motion: no-preference) {\n animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;\n }\n }\n\n @keyframes hx-listbox-enter {\n from {\n opacity: 0;\n transform: translateY(calc(-1 * var(--hx-space-1, 0.25rem)));\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ─── Option Items ─── */\n\n .field__option {\n display: flex;\n align-items: center;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n font-family: inherit;\n color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__option:hover,\n .field__option--active {\n background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));\n color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));\n }\n\n .field__option--selected {\n background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));\n color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));\n font-weight: var(--hx-font-weight-medium, 500);\n }\n\n .field__option--selected.field__option--active {\n background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-color-neutral-500);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTimePickerStyles } from './hx-time-picker.styles.js';\n\n// ─── Time Slot ───────────────────────────────────────────────────────────────\n\ninterface TimeSlot {\n /** HH:MM in 24-hour format — canonical internal value. */\n value: string;\n /** Display label respecting the component's `format` property. */\n label: string;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/** Parse \"HH:MM\" into { hours, minutes }. Returns null when the string is not valid. */\nfunction parseHHMM(raw: string): { hours: number; minutes: number } | null {\n const match = /^(\\d{1,2}):(\\d{2})$/.exec(raw.trim());\n if (!match) return null;\n const hours = parseInt(match[1] ?? '0', 10);\n const minutes = parseInt(match[2] ?? '0', 10);\n if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null;\n return { hours, minutes };\n}\n\n/** Format { hours, minutes } as zero-padded \"HH:MM\". */\nfunction toHHMM(hours: number, minutes: number): string {\n return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;\n}\n\n/** Convert a 24-hour HH:MM value to a 12-hour display string (e.g. \"02:30 PM\"). */\nfunction to12h(value: string): string {\n const parsed = parseHHMM(value);\n if (!parsed) return value;\n const { hours, minutes } = parsed;\n const period = hours < 12 ? 'AM' : 'PM';\n const h = hours % 12 === 0 ? 12 : hours % 12;\n return `${String(h).padStart(2, '0')}:${String(minutes).padStart(2, '0')} ${period}`;\n}\n\n/**\n * Generate ordered time slots between `minTime` and `maxTime` (inclusive) at\n * `stepMinutes` intervals. Both bounds are HH:MM strings; defaults fall back\n * to \"00:00\" / \"23:59\".\n */\nfunction generateSlots(\n minTime: string,\n maxTime: string,\n stepMinutes: number,\n format: '12h' | '24h',\n): TimeSlot[] {\n const minParsed = parseHHMM(minTime) ?? { hours: 0, minutes: 0 };\n const maxParsed = parseHHMM(maxTime) ?? { hours: 23, minutes: 59 };\n\n const minTotal = minParsed.hours * 60 + minParsed.minutes;\n const maxTotal = maxParsed.hours * 60 + maxParsed.minutes;\n\n // Guard against degenerate step values\n const step = Math.max(1, Math.round(stepMinutes));\n\n const slots: TimeSlot[] = [];\n for (let t = minTotal; t <= maxTotal; t += step) {\n const h = Math.floor(t / 60) % 24;\n const m = t % 60;\n const value = toHHMM(h, m);\n slots.push({\n value,\n label: format === '12h' ? to12h(value) : value,\n });\n }\n return slots;\n}\n\n/** Clamp a raw HH:MM value to the [min, max] range; return '' when value is empty. */\nfunction clampValue(value: string, minTime: string, maxTime: string): string {\n if (!value) return '';\n const parsed = parseHHMM(value);\n if (!parsed) return '';\n\n const total = parsed.hours * 60 + parsed.minutes;\n const minParsed = parseHHMM(minTime) ?? { hours: 0, minutes: 0 };\n const maxParsed = parseHHMM(maxTime) ?? { hours: 23, minutes: 59 };\n const minTotal = minParsed.hours * 60 + minParsed.minutes;\n const maxTotal = maxParsed.hours * 60 + maxParsed.minutes;\n\n if (total < minTotal) return toHHMM(minParsed.hours, minParsed.minutes);\n if (total > maxTotal) return toHHMM(maxParsed.hours, maxParsed.minutes);\n return toHHMM(parsed.hours, parsed.minutes);\n}\n\n/**\n * Attempt to parse a user-typed string (12 h or 24 h) into an HH:MM value.\n * Returns null when the string cannot be resolved.\n */\nfunction parseUserInput(raw: string): string | null {\n const trimmed = raw.trim().toUpperCase();\n\n // 24-hour \"HH:MM\" or \"H:MM\"\n const hhmm = parseHHMM(trimmed);\n if (hhmm) return toHHMM(hhmm.hours, hhmm.minutes);\n\n // 12-hour patterns: \"2:30 PM\", \"2:30PM\", \"02:30 AM\", \"230 pm\", \"2 PM\"\n const twelve =\n /^(\\d{1,2})(?::(\\d{2}))?\\s*(AM|PM)$/.exec(trimmed) ??\n /^(\\d{1,2})(\\d{2})\\s*(AM|PM)$/.exec(trimmed);\n\n if (twelve) {\n let hours = parseInt(twelve[1] ?? '0', 10);\n const minutes = twelve[2] !== undefined ? parseInt(twelve[2], 10) : 0;\n const period = twelve[3] ?? '';\n if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) return null;\n if (period === 'AM') {\n hours = hours === 12 ? 0 : hours;\n } else {\n hours = hours === 12 ? 12 : hours + 12;\n }\n return toHHMM(hours, minutes);\n }\n\n return null;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * A time-picker component with a combobox pattern: a text input with format\n * masking and a dropdown listbox of pre-generated time slots.\n *\n * @summary Form-associated time picker with 12h/24h format support and dropdown listbox.\n *\n * @tag hx-time-picker\n *\n * @slot label - Custom label content; overrides the rendered label element when used.\n * @slot help-text - Help text displayed below the field.\n * @slot error - Custom error content; overrides the `error` property.\n *\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the selected time changes. Detail value is HH:MM (24h).\n *\n * @csspart label - The label element.\n * @csspart input - The text input element.\n * @csspart toggle - The clock icon toggle button.\n * @csspart listbox - The dropdown `<ul>` element.\n * @csspart option - Each `<li>` option in the listbox.\n *\n * @cssprop [--hx-time-picker-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-time-picker-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-time-picker-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-time-picker-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-time-picker-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-time-picker-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-time-picker-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-time-picker-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-time-picker-chevron-color=var(--hx-color-neutral-500)] - Toggle chevron color.\n * @cssprop [--hx-time-picker-listbox-bg=var(--hx-color-neutral-0)] - Listbox background.\n * @cssprop [--hx-time-picker-listbox-max-height=16rem] - Maximum height of the dropdown.\n * @cssprop [--hx-time-picker-listbox-shadow=0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)] - Box shadow for the dropdown listbox.\n * @cssprop [--hx-time-picker-option-color=var(--hx-color-neutral-800)] - Option text color.\n * @cssprop [--hx-time-picker-option-hover-bg=var(--hx-color-primary-50)] - Option hover background.\n * @cssprop [--hx-time-picker-option-hover-color=var(--hx-color-primary-700)] - Option hover text color.\n * @cssprop [--hx-time-picker-option-selected-bg=var(--hx-color-primary-100)] - Selected option background.\n * @cssprop [--hx-time-picker-option-selected-color=var(--hx-color-primary-800)] - Selected option text color.\n */\n@customElement('hx-time-picker')\nexport class HelixTimePicker extends LitElement {\n static override styles = [tokenStyles, helixTimePickerStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static formAssociated = true;\n\n /** @internal */\n private readonly _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The name submitted with the form. Value is always HH:MM (24-hour).\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The current value in HH:MM (24-hour) format.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '';\n\n /**\n * The earliest selectable time in HH:MM format.\n * @attr min\n */\n @property({ type: String })\n min = '00:00';\n\n /**\n * The latest selectable time in HH:MM format.\n * @attr max\n */\n @property({ type: String })\n max = '23:59';\n\n /**\n * Step interval between dropdown options, in minutes. Defaults to 30.\n * @attr step\n */\n @property({ type: Number })\n step = 30;\n\n /**\n * The visible label text for the field.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether the field is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the field is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Display format for the time input. '12h' shows AM/PM; '24h' is bare HH:MM.\n * @attr format\n */\n @property({ type: String, reflect: true })\n format: '12h' | '24h' = '12h';\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _open = false;\n /** @internal */\n @state() private _activeIndex = -1;\n /** @internal */\n @state() private _inputDisplayValue = '';\n /** @internal */\n @state() private _hasLabelSlot = false;\n /** @internal */\n @state() private _hasErrorSlot = false;\n @state() private _hasHelpSlot = false;\n /** @internal */\n @state() private _slottedLabelId = '';\n\n // ─── Stable IDs (monotonically incrementing counter for SSR safety) ───\n\n /** @internal */\n private static _instanceCount = 0;\n\n /** @internal */\n private readonly _id = `hx-time-picker-${++HelixTimePicker._instanceCount}`;\n /** @internal */\n private readonly _listboxId = `${this._id}-listbox`;\n /** @internal */\n private readonly _errorId = `${this._id}-error`;\n /** @internal */\n private readonly _helpId = `${this._id}-help`;\n\n // ─── Query References ───\n\n /** @internal */\n @query('.field__input')\n private _inputEl: HTMLInputElement | undefined;\n\n /** @internal */\n @query('.field__listbox')\n private _listboxEl: HTMLUListElement | undefined;\n\n // ─── Memoized slot generation (avoids regenerating on every render call) ───\n\n /** @internal */\n private _cachedSlots: TimeSlot[] | null = null;\n /** @internal */\n private _slotsKey = '';\n\n /** @internal */\n private get _slots(): TimeSlot[] {\n const key = `${this.min}|${this.max}|${this.step}|${this.format}`;\n if (this._cachedSlots === null || key !== this._slotsKey) {\n this._slotsKey = key;\n this._cachedSlots = generateSlots(this.min, this.max, this.step, this.format);\n }\n return this._cachedSlots;\n }\n\n // ─── Outside-click handler (bound reference for add/removeEventListener) ───\n\n /** @internal */\n private readonly _handleOutsideClick = (e: MouseEvent): void => {\n if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n this._closeListbox();\n }\n };\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._handleOutsideClick);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleOutsideClick);\n }\n\n override willUpdate(changed: Map<string, unknown>): void {\n // Keep display value in sync whenever the canonical value or format changes\n if (changed.has('value') || changed.has('format')) {\n this._inputDisplayValue = this.value\n ? this.format === '12h'\n ? to12h(this.value)\n : this.value\n : '';\n }\n }\n\n override updated(changed: Map<string, unknown>): void {\n super.updated(changed);\n if (changed.has('value')) {\n this._internals.setFormValue(this.value || null);\n this._updateValidity();\n }\n // When the listbox opens, scroll the selected (or active) option into view\n if (changed.has('_open') && this._open) {\n this._scrollActiveOptionIntoView();\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the field satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'Please select a time.',\n this._inputEl ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n formResetCallback(): void {\n this.value = '';\n this._inputDisplayValue = '';\n this._internals.setFormValue(null);\n this._closeListbox();\n }\n\n formStateRestoreCallback(\n state: string | File | FormData,\n _mode: 'restore' | 'autocomplete' = 'restore',\n ): void {\n // Only string states are valid for this component; ignore File/FormData\n if (typeof state !== 'string') return;\n // Validate and clamp before assigning; ignore out-of-spec values\n const clamped = clampValue(state, this.min, this.max);\n this.value = clamped;\n }\n\n // ─── Listbox helpers ───\n\n private _openListbox(): void {\n if (this._open) return;\n // Pre-set active index to currently selected slot (or 0)\n const selectedIndex = this._slots.findIndex((s) => s.value === this.value);\n this._activeIndex = selectedIndex >= 0 ? selectedIndex : 0;\n this._open = true;\n }\n\n private _closeListbox(): void {\n if (!this._open) return;\n this._open = false;\n this._activeIndex = -1;\n }\n\n private _scrollActiveOptionIntoView(): void {\n if (!this._listboxEl) return;\n const active = this._listboxEl.querySelector<HTMLElement>('.field__option--active');\n active?.scrollIntoView({ block: 'nearest' });\n }\n\n private _selectSlot(slot: TimeSlot): void {\n const clamped = clampValue(slot.value, this.min, this.max);\n this.value = clamped;\n this._closeListbox();\n this._dispatchChange(clamped);\n }\n\n // ─── Slot tracking ───\n\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasLabelSlot = nodes.length > 0;\n if (this._hasLabelSlot) {\n // Forward aria-labelledby: ensure the slotted label element has an ID so\n // the shadow-DOM input can reference it via aria-labelledby (A-03).\n const labelEl = nodes.find((n) => n.nodeType === Node.ELEMENT_NODE) as\n | HTMLElement\n | undefined;\n if (labelEl) {\n if (!labelEl.id) {\n labelEl.id = `${this._id}-slotted-label`;\n }\n this._slottedLabelId = labelEl.id;\n }\n } else {\n this._slottedLabelId = '';\n }\n }\n\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Dispatch ───\n\n private _dispatchChange(value: string): void {\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value },\n }),\n );\n }\n\n // ─── Input Handlers ───\n\n private _handleInputClick(): void {\n if (!this.disabled) this._openListbox();\n }\n\n private _handleToggleClick(e: MouseEvent): void {\n e.stopPropagation();\n if (this.disabled) return;\n if (this._open) {\n this._closeListbox();\n } else {\n this._openListbox();\n this._inputEl?.focus();\n }\n }\n\n private _handleInputInput(e: Event): void {\n const target = e.target as HTMLInputElement;\n this._inputDisplayValue = target.value;\n // Open the listbox as the user types\n if (!this._open) this._openListbox();\n }\n\n private _handleInputChange(e: Event): void {\n const target = e.target as HTMLInputElement;\n const raw = target.value.trim();\n\n if (!raw) {\n // User cleared the field\n this.value = '';\n this._internals.setFormValue(null);\n this._updateValidity();\n this._dispatchChange('');\n return;\n }\n\n const parsed = parseUserInput(raw);\n if (parsed) {\n const clamped = clampValue(parsed, this.min, this.max);\n this.value = clamped;\n this._dispatchChange(clamped);\n } else {\n // Revert display to last known good value\n this._inputDisplayValue = this.value\n ? this.format === '12h'\n ? to12h(this.value)\n : this.value\n : '';\n }\n }\n\n private _handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!this._open) {\n this._openListbox();\n } else {\n this._activeIndex = Math.min(this._activeIndex + 1, this._slots.length - 1);\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (this._open) {\n this._activeIndex = Math.max(this._activeIndex - 1, 0);\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'Enter':\n if (this._open && this._activeIndex >= 0) {\n e.preventDefault();\n const slot = this._slots[this._activeIndex];\n if (slot) this._selectSlot(slot);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n this._closeListbox();\n break;\n\n case 'Home':\n if (this._open) {\n e.preventDefault();\n this._activeIndex = 0;\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'End':\n if (this._open) {\n e.preventDefault();\n this._activeIndex = this._slots.length - 1;\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'Tab':\n this._closeListbox();\n break;\n }\n }\n\n private _handleOptionPointerDown(e: MouseEvent): void {\n // Prevent the input from losing focus when clicking an option\n e.preventDefault();\n }\n\n private _handleOptionClick(slot: TimeSlot): void {\n this._selectSlot(slot);\n this._inputEl?.focus();\n }\n\n private _handleOptionMouseEnter(index: number): void {\n this._activeIndex = index;\n }\n\n // ─── Public API ───\n\n /** Moves focus to the time input element. */\n override focus(options?: FocusOptions): void {\n this._inputEl?.focus(options);\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const slots = this._slots;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n };\n\n const activeDescendant =\n this._open && this._activeIndex >= 0\n ? `${this._listboxId}-option-${this._activeIndex}`\n : undefined;\n\n const placeholder = this.format === '12h' ? 'hh:mm AM' : 'hh:mm';\n\n const describedBy =\n [hasError ? this._errorId : null, this._hasHelpSlot ? this._helpId : null]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._id}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n\n <!-- Combobox wrapper; role=\"combobox\" lives on the input per ARIA 1.2 -->\n <div class=\"field__combobox\">\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._id}\n type=\"text\"\n inputmode=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n role=\"combobox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n .value=${live(this._inputDisplayValue)}\n placeholder=${placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n name=${ifDefined(this.name || undefined)}\n aria-autocomplete=\"list\"\n aria-controls=${ifDefined(this._open ? this._listboxId : undefined)}\n aria-activedescendant=${ifDefined(activeDescendant)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : undefined,\n )}\n @click=${this._handleInputClick}\n @input=${this._handleInputInput}\n @change=${this._handleInputChange}\n @keydown=${this._handleInputKeyDown}\n />\n\n <!-- Toggle button -->\n <button\n part=\"toggle\"\n type=\"button\"\n class=\"field__toggle\"\n tabindex=\"-1\"\n aria-label=${this._open ? 'Close time picker' : 'Open time picker'}\n ?disabled=${this.disabled}\n @click=${this._handleToggleClick}\n >\n <!-- Clock icon -->\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.25\" />\n <path\n d=\"M8 4.5V8L10.5 10\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Dropdown listbox -->\n ${this._open\n ? html`\n <ul\n part=\"listbox\"\n class=\"field__listbox\"\n id=${this._listboxId}\n role=\"listbox\"\n aria-label=${this.label || 'Time options'}\n >\n ${repeat(\n slots,\n (slot) => slot.value,\n (slot, index) => {\n const isSelected = slot.value === this.value;\n const isActive = index === this._activeIndex;\n return html`\n <li\n part=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--active': isActive,\n })}\n id=\"${this._listboxId}-option-${index}\"\n role=\"option\"\n aria-selected=${isSelected ? 'true' : 'false'}\n @pointerdown=${this._handleOptionPointerDown}\n @click=${() => this._handleOptionClick(slot)}\n @mouseenter=${() => this._handleOptionMouseEnter(index)}\n >\n ${slot.label}\n </li>\n `;\n },\n )}\n </ul>\n `\n : nothing}\n </div>\n\n <!-- Error slot / property -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <!-- Help slot -->\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-time-picker': HelixTimePicker;\n }\n}\n"],"names":["helixTimePickerStyles","css","parseHHMM","raw","match","hours","minutes","toHHMM","to12h","value","parsed","period","h","generateSlots","minTime","maxTime","stepMinutes","format","minParsed","maxParsed","minTotal","maxTotal","step","slots","t","m","clampValue","total","parseUserInput","trimmed","hhmm","twelve","HelixTimePicker","LitElement","_a","key","changed","state","_mode","clamped","selectedIndex","s","active","slot","nodes","labelEl","n","target","index","options","hasError","fieldClasses","activeDescendant","placeholder","describedBy","html","classMap","nothing","live","ifDefined","repeat","isSelected","isActive","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-tree-item-DdH6RbMs.js","sources":["../../src/components/hx-tree-view/hx-tree-view.styles.ts","../../src/components/hx-tree-view/hx-tree-view.ts","../../src/components/hx-tree-view/hx-tree-item.styles.ts","../../src/components/hx-tree-view/hx-tree-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTreeViewStyles = css`\n :host {\n display: block;\n contain: layout style;\n font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n * {\n box-sizing: border-box;\n }\n\n .tree {\n display: block;\n outline: none;\n }\n\n .tree:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTreeViewStyles } from './hx-tree-view.styles.js';\nimport type { HelixTreeItem, HxTreeItemSelectDetail } from './hx-tree-item.js';\n\n/** Selection mode for the tree. */\nexport type TreeSelection = 'none' | 'single' | 'multiple';\n\n/** Detail type for the `hx-select` event. */\nexport interface HxSelectDetail {\n /** The tree item that was selected or deselected. */\n item: HelixTreeItem;\n /** Whether the item is now selected. */\n selected: boolean;\n}\n\n/**\n * A hierarchical tree component for navigating nested data structures.\n * Used in healthcare applications for org charts, ICD-10 code hierarchies, and department navigation.\n *\n * Implements WAI-ARIA tree view pattern with `role=\"tree\"` on the container\n * and `role=\"treeitem\"` on each item. Supports `aria-label` via the `label` property\n * for screen reader identification. Full keyboard navigation: Arrow keys for movement,\n * Enter/Space for selection, Home/End for first/last item.\n *\n * ## Scale Limits\n *\n * This component renders all tree items simultaneously in the DOM. It is suitable for\n * trees with up to ~500 visible items. For large taxonomies (e.g., ICD-10 with 70,000+\n * codes), use async/lazy loading: only render top-level nodes initially and populate\n * child nodes on `hx-select` or expand events. The component exposes the `expanded`\n * property on `hx-tree-item` for programmatic control of subtrees, enabling consumer-level\n * virtualization strategies without requiring changes to this component.\n *\n * @summary Hierarchical tree view with expand/collapse and keyboard navigation.\n *\n * @tag hx-tree-view\n *\n * @slot - Default slot for hx-tree-item elements.\n *\n * @fires {CustomEvent<HxSelectDetail>} hx-select - Dispatched when a tree item is selected or deselected.\n *\n * @csspart tree - The tree container element with role=\"tree\".\n *\n * @cssprop [--hx-tree-font-family=var(--hx-font-family-sans)] - Tree font family.\n */\n@customElement('hx-tree-view')\nexport class HelixTreeView extends LitElement {\n static override styles = [tokenStyles, helixTreeViewStyles];\n\n // ─── Properties ───\n\n /**\n * Accessible label for the tree. Applied as `aria-label` on the tree container.\n * Provides context to screen readers about the tree's purpose.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n /**\n * Selection mode for the tree.\n * - `none` — items cannot be selected\n * - `single` — only one item can be selected at a time\n * - `multiple` — multiple items can be selected\n * @attr selection\n */\n @property({ type: String, reflect: true })\n selection: TreeSelection = 'none';\n\n // ─── Internal State ───\n\n @state() private _currentIndex = 0;\n\n /** Tracks whether the tree has any visible items, to decide the container tabindex. */\n @state() private _hasVisibleItems = false;\n\n // ─── Internal Helpers ───\n\n /**\n * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items\n * in depth-first order.\n */\n private _getVisibleItems(): HelixTreeItem[] {\n return this._collectVisibleItems(this);\n }\n\n private _collectVisibleItems(container: Element): HelixTreeItem[] {\n const items: HelixTreeItem[] = [];\n for (const child of Array.from(container.children)) {\n if (child.tagName.toLowerCase() === 'hx-tree-item') {\n const item = child as HelixTreeItem;\n items.push(item);\n if (item.expanded) {\n items.push(...this._collectVisibleItems(item));\n }\n } else {\n items.push(...this._collectVisibleItems(child));\n }\n }\n return items;\n }\n\n private _getSelectedItems(): HelixTreeItem[] {\n return Array.from(this.querySelectorAll<HelixTreeItem>('hx-tree-item[selected]'));\n }\n\n /**\n * Updates the roving tabindex across all visible items so that only the\n * item at `activeIndex` has `tabindex=\"0\"`. All others receive `tabindex=\"-1\"`.\n * This is called whenever the active item changes (navigation, initial render).\n */\n private _updateRovingTabindex(items: HelixTreeItem[], activeIndex: number): void {\n items.forEach((item, i) => {\n item.setRovingActive(i === activeIndex);\n });\n }\n\n private _focusItem(index: number): void {\n const items = this._getVisibleItems();\n if (items.length === 0) return;\n const clamped = Math.max(0, Math.min(index, items.length - 1));\n this._currentIndex = clamped;\n this._updateRovingTabindex(items, clamped);\n items[clamped]?.focus();\n }\n\n // ─── Event Handling ───\n\n private _handleTreeItemSelect(e: Event): void {\n const event = e as CustomEvent<HxTreeItemSelectDetail>;\n const item = event.detail.item;\n\n if (this.selection === 'none') return;\n\n if (this.selection === 'single') {\n const wasSelected = item.selected;\n this._getSelectedItems().forEach((i) => {\n i.selected = false;\n });\n item.selected = !wasSelected;\n } else if (this.selection === 'multiple') {\n item.selected = !item.selected;\n }\n\n this.dispatchEvent(\n new CustomEvent<HxSelectDetail>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, selected: item.selected },\n }),\n );\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n const items = this._getVisibleItems();\n if (items.length === 0) return;\n\n let currentIndex = this._currentIndex;\n const focused = document.activeElement;\n\n for (let i = 0; i < items.length; i++) {\n if (items[i] === focused || items[i]?.shadowRoot?.activeElement) {\n currentIndex = i;\n break;\n }\n }\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this._focusItem(next);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this._focusItem(prev);\n break;\n }\n case 'ArrowLeft': {\n e.preventDefault();\n const currentItem = items[currentIndex];\n if (!currentItem) break;\n if (currentItem.expanded && currentItem.hasChildItems) {\n currentItem.expanded = false;\n } else {\n const parentItem = currentItem.parentElement?.closest('hx-tree-item') as\n | HelixTreeItem\n | undefined;\n if (parentItem) {\n const parentIndex = items.indexOf(parentItem);\n if (parentIndex >= 0) {\n this._focusItem(parentIndex);\n }\n }\n }\n break;\n }\n case 'ArrowRight': {\n e.preventDefault();\n const currentItem = items[currentIndex];\n if (!currentItem) break;\n if (currentItem.hasChildItems) {\n if (!currentItem.expanded) {\n currentItem.expanded = true;\n } else {\n this._focusItem(currentIndex + 1);\n }\n }\n break;\n }\n case 'Home': {\n e.preventDefault();\n this._focusItem(0);\n break;\n }\n case 'End': {\n e.preventDefault();\n this._focusItem(items.length - 1);\n break;\n }\n }\n }\n\n private _handleFocusIn(e: FocusEvent): void {\n // With roving tabindex, the tree container (tabindex=\"-1\") should only receive\n // focus when the tree is empty. If focus does land on the container (e.g. the\n // tree is empty or programmatic focus), redirect to the active item if present.\n if (e.target === e.currentTarget) {\n const items = this._getVisibleItems();\n if (items.length > 0) {\n this._focusItem(this._currentIndex);\n }\n }\n }\n\n /**\n * Initializes the roving tabindex after items are first slotted in.\n * Ensures the active item (index 0 by default) has tabindex=\"0\" from the start,\n * so a Tab into the tree lands directly on the first item without a redirect.\n * Also updates `_hasVisibleItems` so the container tabindex re-renders correctly.\n */\n private _handleSlotChange(): void {\n const items = this._getVisibleItems();\n this._hasVisibleItems = items.length > 0;\n if (items.length === 0) return;\n // Clamp _currentIndex in case items were removed.\n const clamped = Math.min(this._currentIndex, items.length - 1);\n this._currentIndex = clamped;\n this._updateRovingTabindex(items, clamped);\n }\n\n // ─── Render ───\n\n override render() {\n // Roving tabindex pattern (WCAG 2.4.3 Fix):\n // The tree container is NOT a Tab stop (tabindex=\"-1\"). Tab focus goes\n // directly to the active item, which carries tabindex=\"0\". The container\n // is only a landing target (tabindex=\"0\") when the tree is empty.\n const containerTabindex = this._hasVisibleItems ? '-1' : '0';\n\n return html`\n <div\n part=\"tree\"\n class=\"tree\"\n role=\"tree\"\n tabindex=${containerTabindex}\n aria-label=${this.label || nothing}\n aria-multiselectable=${this.selection === 'multiple' ? 'true' : 'false'}\n @hx-tree-item-select=${this._handleTreeItemSelect}\n @keydown=${this._handleKeyDown}\n @focusin=${this._handleFocusIn}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tree-view': HelixTreeView;\n }\n}\n\n/** Canonical type alias for HelixTreeView. Use this when typing hx-tree-view element references. */\nexport type HxTreeView = HelixTreeView;\n\n/** @deprecated Use {@link HxTreeView} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeView = HelixTreeView;\n","import { css } from 'lit';\n\nexport const helixTreeItemStyles = css`\n :host {\n display: block;\n contain: layout style;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Item Container ─── */\n\n .item {\n display: block;\n }\n\n /* ─── Item Row ─── */\n\n .item-row {\n display: flex;\n align-items: center;\n gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));\n padding: var(--hx-tree-item-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));\n padding-left: calc(\n var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem)) + var(--_indent-level, 0) *\n var(--hx-tree-indent-size, 1.5rem)\n );\n border-radius: var(--hx-tree-item-border-radius, var(--hx-border-radius-sm, 0.25rem));\n cursor: pointer;\n outline: none;\n color: var(--hx-tree-item-color, var(--hx-color-neutral-900, #111827));\n font-family: var(--hx-tree-item-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-tree-item-font-size, var(--hx-font-size-sm, 0.875rem));\n line-height: var(--hx-line-height-normal, 1.5);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n user-select: none;\n }\n\n .item-row:hover {\n background-color: var(--hx-tree-item-hover-bg, var(--hx-color-neutral-100, #f3f4f6));\n }\n\n .item-row:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, -2px);\n }\n\n /* ─── Selected State ─── */\n\n :host([selected]) .item-row {\n background-color: var(--hx-tree-item-selected-bg, var(--hx-color-primary-100, #dbeafe));\n color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #1e40af));\n }\n\n :host([selected]) .item-row:hover {\n background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bfdbfe));\n }\n\n /* ─── Disabled State ─── */\n\n :host([disabled]) .item-row {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ─── Expand Icon ─── */\n\n .expand-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n }\n\n .expand-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n padding: 0;\n border: none;\n background: transparent;\n color: var(--hx-tree-item-expand-icon-color, var(--hx-color-neutral-500, #6b7280));\n cursor: pointer;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n transition: transform var(--hx-transition-fast, 150ms ease);\n pointer-events: auto;\n }\n\n .expand-btn:hover {\n background-color: var(\n --hx-tree-item-expand-hover-bg,\n var(--hx-overlay-black-6, rgba(0, 0, 0, 0.06))\n );\n }\n\n .expand-btn svg {\n width: var(--hx-space-3, 0.75rem);\n height: var(--hx-space-3, 0.75rem);\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n :host([expanded]) .expand-btn svg {\n transform: rotate(90deg);\n }\n\n .expand-placeholder {\n display: block;\n width: var(--hx-space-4, 1rem);\n flex-shrink: 0;\n }\n\n /* ─── Icon Slot ─── */\n\n .item-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-tree-item-icon-color, var(--hx-color-neutral-500, #6b7280));\n }\n\n .item-icon:empty {\n display: none;\n }\n\n /* ─── Label ─── */\n\n .item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ─── Children (animated) ─── */\n\n .children {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--hx-transition-base, 200ms ease);\n --_indent-level: calc(var(--_indent-level, 0) + 1);\n }\n\n .children--expanded {\n grid-template-rows: 1fr;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .item-row,\n .expand-btn,\n .expand-btn svg,\n .children {\n transition: none;\n }\n }\n\n .children-inner {\n overflow: hidden;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTreeItemStyles } from './hx-tree-item.styles.js';\n\n/** Detail type for the `hx-tree-item-select` event. */\nexport interface HxTreeItemSelectDetail {\n /** The tree item that was selected or activated. */\n item: HelixTreeItem;\n}\n\n/**\n * A tree item used within an hx-tree-view component.\n * Supports expand/collapse, selection, keyboard navigation, and icon/children slots.\n *\n * @summary Individual item within an hx-tree-view hierarchical tree.\n *\n * @tag hx-tree-item\n *\n * @slot - Default slot for the item label content.\n * @slot icon - Custom icon shown before the label.\n * @slot children - Nested hx-tree-item elements for sub-tree.\n *\n * @csspart item - The outer item container.\n * @csspart row - The interactive item row (contains expand icon, icon slot, and label).\n * @csspart expand-icon - The expand/collapse toggle button.\n * @csspart label - The label text content area.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-tree-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-tree-item-hover-bg=var(--hx-color-neutral-100)] - Hover background color.\n * @cssprop [--hx-tree-item-selected-bg=var(--hx-color-primary-100)] - Selected background color.\n * @cssprop [--hx-tree-item-selected-color=var(--hx-color-primary-800)] - Selected text color.\n * @cssprop [--hx-tree-item-padding-x=var(--hx-space-2)] - Horizontal padding.\n * @cssprop [--hx-tree-item-padding-y=var(--hx-space-1)] - Vertical padding.\n * @cssprop [--hx-tree-indent-size=1.5rem] - Indentation size per level.\n *\n * @fires {CustomEvent<HxTreeItemSelectDetail>} hx-tree-item-select - Dispatched when this item is clicked or activated via keyboard.\n */\n@customElement('hx-tree-item')\nexport class HelixTreeItem extends LitElement {\n static override styles = [tokenStyles, helixTreeItemStyles];\n\n // ─── Properties ───\n\n /**\n * Whether the item is expanded (showing children).\n * @attr expanded\n */\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /**\n * Whether the item is selected.\n * @attr selected\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * Whether the item is disabled (non-interactive).\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n // ─── Internal State ───\n\n /**\n * Tracks whether any elements are assigned to the children slot, controlling expand icon visibility.\n * @internal\n */\n @state() private _hasChildren = false;\n\n /**\n * Whether this item is the roving-tabindex active item in the tree.\n * @internal\n */\n @state() private _rovingActive = false;\n\n /**\n * Cached ARIA position metadata. Computed once on connect and on slotchange\n * of the parent container, avoiding repeated DOM traversal on every render.\n * @internal\n */\n @state() private _level = 1;\n /**\n * One-based position of this item within its sibling set, set as aria-posinset.\n * @internal\n */\n @state() private _posInSet = 1;\n /**\n * Total count of sibling hx-tree-item elements at the same level, set as aria-setsize.\n * @internal\n */\n @state() private _setSize = 1;\n /**\n * Whether the owning hx-tree-view supports item selection (single or multiple mode).\n * @internal\n */\n @state() private _selectable = false;\n\n // ─── Computed ARIA ───\n\n /**\n * Whether this item has slotted children.\n * @returns True if one or more elements are assigned to the children slot.\n */\n get hasChildItems(): boolean {\n return this._hasChildren;\n }\n\n /**\n * Recompute all cached ARIA metadata in a single DOM pass.\n * Called on connect, slotchange, and whenever structural context may change.\n * @internal\n */\n private _updateAriaMetadata(): void {\n // Compute nesting level by counting ancestor hx-tree-item elements.\n let level = 1;\n let el: Element | null = this.parentElement;\n while (el) {\n if (el.tagName.toLowerCase() === 'hx-tree-item') level++;\n el = el.parentElement;\n }\n this._level = level;\n\n // Compute position-in-set and set-size from sibling hx-tree-item elements.\n const parent = this.parentElement;\n if (parent) {\n const siblings = Array.from(parent.children).filter(\n (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n );\n this._posInSet = siblings.indexOf(this) + 1;\n this._setSize = siblings.length;\n } else {\n this._posInSet = 1;\n this._setSize = 1;\n }\n\n // Determine if the owning tree supports selection.\n const tree = this.closest('hx-tree-view');\n if (tree) {\n const selection = tree.getAttribute('selection');\n this._selectable = selection === 'single' || selection === 'multiple';\n } else {\n this._selectable = false;\n }\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._updateAriaMetadata();\n }\n\n // ─── Children Detection ───\n\n /**\n * Updates _hasChildren and recomputes ARIA metadata when the children slot assignment changes.\n * @internal\n */\n private _handleChildrenSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasChildren = slot.assignedElements().length > 0;\n this._updateAriaMetadata();\n }\n\n // ─── Event Handlers ───\n\n /**\n * Toggles the expanded state when the expand/collapse button is clicked, stopping event propagation.\n * @internal\n */\n private _handleExpandClick(e: Event): void {\n e.stopPropagation();\n if (this.disabled) return;\n this.expanded = !this.expanded;\n }\n\n /**\n * Dispatches the hx-tree-item-select event when the item is activated via click or keyboard.\n * @internal\n */\n private _handleRowClick(): void {\n if (this.disabled) return;\n this.dispatchEvent(\n new CustomEvent<HxTreeItemSelectDetail>('hx-tree-item-select', {\n bubbles: true,\n composed: true,\n detail: { item: this },\n }),\n );\n }\n\n /**\n * Handles keyboard interaction for the tree item, including expand/collapse, activation, and delegation of list-navigation keys to the parent tree.\n * @internal\n */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'ArrowRight':\n e.preventDefault();\n if (this._hasChildren && !this.expanded) {\n this.expanded = true;\n }\n break;\n case 'ArrowLeft':\n e.preventDefault();\n if (this._hasChildren && this.expanded) {\n this.expanded = false;\n }\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n this._handleRowClick();\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n case 'Home':\n case 'End':\n // Bubble up to hx-tree-view for navigation\n break;\n }\n }\n\n // ─── Public API ───\n\n /**\n * Sets the roving tabindex state for this item.\n * When `active` is true, the item row gets `tabindex=\"0\"` making it the\n * Tab-reachable item in the tree. All other items should be set to false.\n * Called by the parent hx-tree-view to manage the roving tabindex pattern.\n */\n setRovingActive(active: boolean): void {\n this._rovingActive = active;\n }\n\n /** Focus this item's interactive row element. */\n override focus(): void {\n const row = this.shadowRoot?.querySelector<HTMLElement>('.item-row');\n row?.focus();\n }\n\n // ─── Render ───\n\n /**\n * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.\n * @internal\n */\n private _renderExpandIcon() {\n if (!this._hasChildren) {\n return html`<span class=\"expand-placeholder\" aria-hidden=\"true\"></span>`;\n }\n return html`\n <button\n part=\"expand-icon\"\n class=\"expand-btn\"\n tabindex=\"-1\"\n aria-label=\"${this.expanded ? 'Collapse' : 'Expand'}\"\n @click=${this._handleExpandClick}\n >\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <polyline points=\"6 4 10 8 6 12\" />\n </svg>\n </button>\n `;\n }\n\n override render() {\n const ariaExpanded = this._hasChildren ? String(this.expanded) : nothing;\n const ariaSelected = this._selectable ? String(this.selected) : nothing;\n\n return html`\n <div part=\"item\" class=\"item\">\n <div\n part=\"row\"\n class=\"item-row\"\n role=\"treeitem\"\n tabindex=${this._rovingActive ? '0' : '-1'}\n aria-expanded=${ariaExpanded}\n aria-selected=${ariaSelected}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-level=${this._level}\n aria-posinset=${this._posInSet}\n aria-setsize=${this._setSize}\n @click=${this._handleRowClick}\n @keydown=${this._handleKeyDown}\n >\n ${this._renderExpandIcon()}\n <span class=\"item-icon\">\n <slot name=\"icon\"></slot>\n </span>\n <span part=\"label\" class=\"item-label\">\n <slot></slot>\n </span>\n </div>\n <div\n part=\"children\"\n class=\"children ${this.expanded ? 'children--expanded' : ''}\"\n role=\"group\"\n >\n <div class=\"children-inner\">\n <slot name=\"children\" @slotchange=${this._handleChildrenSlotChange}></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tree-item': HelixTreeItem;\n }\n}\n\n/** Canonical type alias for HelixTreeItem. Use this when typing hx-tree-item element references. */\nexport type HxTreeItem = HelixTreeItem;\n\n/** @deprecated Use {@link HxTreeItem} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeItem = HelixTreeItem;\n"],"names":["helixTreeViewStyles","css","HelixTreeView","LitElement","container","items","child","item","activeIndex","index","clamped","_a","wasSelected","i","currentIndex","focused","_b","next","prev","currentItem","parentItem","_c","parentIndex","containerTabindex","html","nothing","tokenStyles","__decorateClass","property","state","customElement","helixTreeItemStyles","HelixTreeItem","level","el","parent","siblings","c","tree","selection","slot","active","row","ariaExpanded","ariaSelected"],"mappings":";;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC8C5B,IAAMC,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAWL,KAAA,QAAQ,IAUR,KAAA,YAA2B,QAIlB,KAAQ,gBAAgB,GAGxB,KAAQ,mBAAmB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ5B,mBAAoC;AAC1C,WAAO,KAAK,qBAAqB,IAAI;AAAA,EACvC;AAAA,EAEQ,qBAAqBC,GAAqC;AAChE,UAAMC,IAAyB,CAAA;AAC/B,eAAWC,KAAS,MAAM,KAAKF,EAAU,QAAQ;AAC/C,UAAIE,EAAM,QAAQ,YAAA,MAAkB,gBAAgB;AAClD,cAAMC,IAAOD;AACb,QAAAD,EAAM,KAAKE,CAAI,GACXA,EAAK,YACPF,EAAM,KAAK,GAAG,KAAK,qBAAqBE,CAAI,CAAC;AAAA,MAEjD;AACE,QAAAF,EAAM,KAAK,GAAG,KAAK,qBAAqBC,CAAK,CAAC;AAGlD,WAAOD;AAAA,EACT;AAAA,EAEQ,oBAAqC;AAC3C,WAAO,MAAM,KAAK,KAAK,iBAAgC,wBAAwB,CAAC;AAAA,EAClF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,sBAAsBA,GAAwBG,GAA2B;AAC/E,IAAAH,EAAM,QAAQ,CAACE,GAAM,MAAM;AACzB,MAAAA,EAAK,gBAAgB,MAAMC,CAAW;AAAA,IACxC,CAAC;AAAA,EACH;AAAA,EAEQ,WAAWC,GAAqB;;AACtC,UAAMJ,IAAQ,KAAK,iBAAA;AACnB,QAAIA,EAAM,WAAW,EAAG;AACxB,UAAMK,IAAU,KAAK,IAAI,GAAG,KAAK,IAAID,GAAOJ,EAAM,SAAS,CAAC,CAAC;AAC7D,SAAK,gBAAgBK,GACrB,KAAK,sBAAsBL,GAAOK,CAAO,IACzCC,IAAAN,EAAMK,CAAO,MAAb,QAAAC,EAAgB;AAAA,EAClB;AAAA;AAAA,EAIQ,sBAAsB,GAAgB;AAE5C,UAAMJ,IADQ,EACK,OAAO;AAE1B,QAAI,KAAK,cAAc,QAEvB;AAAA,UAAI,KAAK,cAAc,UAAU;AAC/B,cAAMK,IAAcL,EAAK;AACzB,aAAK,kBAAA,EAAoB,QAAQ,CAACM,MAAM;AACtC,UAAAA,EAAE,WAAW;AAAA,QACf,CAAC,GACDN,EAAK,WAAW,CAACK;AAAA,MACnB,MAAA,CAAW,KAAK,cAAc,eAC5BL,EAAK,WAAW,CAACA,EAAK;AAGxB,WAAK;AAAA,QACH,IAAI,YAA4B,aAAa;AAAA,UAC3C,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,MAAAA,GAAM,UAAUA,EAAK,SAAA;AAAA,QAAS,CACzC;AAAA,MAAA;AAAA;AAAA,EAEL;AAAA,EAEQ,eAAe,GAAwB;;AAC7C,UAAMF,IAAQ,KAAK,iBAAA;AACnB,QAAIA,EAAM,WAAW,EAAG;AAExB,QAAIS,IAAe,KAAK;AACxB,UAAMC,IAAU,SAAS;AAEzB,aAASF,IAAI,GAAGA,IAAIR,EAAM,QAAQQ;AAChC,UAAIR,EAAMQ,CAAC,MAAME,MAAWC,KAAAL,IAAAN,EAAMQ,CAAC,MAAP,gBAAAF,EAAU,eAAV,QAAAK,EAAsB,eAAe;AAC/D,QAAAF,IAAeD;AACf;AAAA,MACF;AAGF,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK,aAAa;AAChB,UAAE,eAAA;AACF,cAAMI,IAAOH,IAAeT,EAAM,SAAS,IAAIS,IAAe,IAAI;AAClE,aAAK,WAAWG,CAAI;AACpB;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,UAAE,eAAA;AACF,cAAMC,IAAOJ,IAAe,IAAIA,IAAe,IAAIT,EAAM,SAAS;AAClE,aAAK,WAAWa,CAAI;AACpB;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,UAAE,eAAA;AACF,cAAMC,IAAcd,EAAMS,CAAY;AACtC,YAAI,CAACK,EAAa;AAClB,YAAIA,EAAY,YAAYA,EAAY;AACtC,UAAAA,EAAY,WAAW;AAAA,aAClB;AACL,gBAAMC,KAAaC,IAAAF,EAAY,kBAAZ,gBAAAE,EAA2B,QAAQ;AAGtD,cAAID,GAAY;AACd,kBAAME,IAAcjB,EAAM,QAAQe,CAAU;AAC5C,YAAIE,KAAe,KACjB,KAAK,WAAWA,CAAW;AAAA,UAE/B;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,KAAK,cAAc;AACjB,UAAE,eAAA;AACF,cAAMH,IAAcd,EAAMS,CAAY;AACtC,YAAI,CAACK,EAAa;AAClB,QAAIA,EAAY,kBACTA,EAAY,WAGf,KAAK,WAAWL,IAAe,CAAC,IAFhCK,EAAY,WAAW;AAK3B;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AACX,UAAE,eAAA,GACF,KAAK,WAAW,CAAC;AACjB;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,UAAE,eAAA,GACF,KAAK,WAAWd,EAAM,SAAS,CAAC;AAChC;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEQ,eAAe,GAAqB;AAI1C,IAAI,EAAE,WAAW,EAAE,iBACH,KAAK,iBAAA,EACT,SAAS,KACjB,KAAK,WAAW,KAAK,aAAa;AAAA,EAGxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,oBAA0B;AAChC,UAAMA,IAAQ,KAAK,iBAAA;AAEnB,QADA,KAAK,mBAAmBA,EAAM,SAAS,GACnCA,EAAM,WAAW,EAAG;AAExB,UAAMK,IAAU,KAAK,IAAI,KAAK,eAAeL,EAAM,SAAS,CAAC;AAC7D,SAAK,gBAAgBK,GACrB,KAAK,sBAAsBL,GAAOK,CAAO;AAAA,EAC3C;AAAA;AAAA,EAIS,SAAS;AAKhB,UAAMa,IAAoB,KAAK,mBAAmB,OAAO;AAEzD,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKQD,CAAiB;AAAA,qBACf,KAAK,SAASE,CAAO;AAAA,+BACX,KAAK,cAAc,aAAa,SAAS,OAAO;AAAA,+BAChD,KAAK,qBAAqB;AAAA,mBACtC,KAAK,cAAc;AAAA,mBACnB,KAAK,cAAc;AAAA;AAAA,4BAEV,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGhD;AACF;AAxOavB,EACK,SAAS,CAACwB,GAAa1B,CAAmB;AAU1D2B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAV9B1B,EAWX,WAAA,SAAA,CAAA;AAUAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9B1B,EAqBX,WAAA,aAAA,CAAA;AAIiByB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzBI3B,EAyBM,WAAA,iBAAA,CAAA;AAGAyB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA5BI3B,EA4BM,WAAA,oBAAA,CAAA;AA5BNA,IAANyB,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChB5B,CAAA;AC9CN,MAAM6B,IAAsB9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACsC5B,IAAM+B,IAAN,cAA4B7B,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,WAAW,IAQF,KAAQ,eAAe,IAMvB,KAAQ,gBAAgB,IAOxB,KAAQ,SAAS,GAKjB,KAAQ,YAAY,GAKpB,KAAQ,WAAW,GAKnB,KAAQ,cAAc;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ/B,IAAI,gBAAyB;AAC3B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,sBAA4B;AAElC,QAAI8B,IAAQ,GACRC,IAAqB,KAAK;AAC9B,WAAOA;AACL,MAAIA,EAAG,QAAQ,YAAA,MAAkB,kBAAgBD,KACjDC,IAAKA,EAAG;AAEV,SAAK,SAASD;AAGd,UAAME,IAAS,KAAK;AACpB,QAAIA,GAAQ;AACV,YAAMC,IAAW,MAAM,KAAKD,EAAO,QAAQ,EAAE;AAAA,QAC3C,CAACE,MAAMA,EAAE,QAAQ,kBAAkB;AAAA,MAAA;AAErC,WAAK,YAAYD,EAAS,QAAQ,IAAI,IAAI,GAC1C,KAAK,WAAWA,EAAS;AAAA,IAC3B;AACE,WAAK,YAAY,GACjB,KAAK,WAAW;AAIlB,UAAME,IAAO,KAAK,QAAQ,cAAc;AACxC,QAAIA,GAAM;AACR,YAAMC,IAAYD,EAAK,aAAa,WAAW;AAC/C,WAAK,cAAcC,MAAc,YAAYA,MAAc;AAAA,IAC7D;AACE,WAAK,cAAc;AAAA,EAEvB;AAAA;AAAA,EAIS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,oBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,0BAA0B,GAAgB;AAChD,UAAMC,IAAO,EAAE;AACf,SAAK,eAAeA,EAAK,iBAAA,EAAmB,SAAS,GACrD,KAAK,oBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,mBAAmB,GAAgB;AAEzC,IADA,EAAE,gBAAA,GACE,MAAK,aACT,KAAK,WAAW,CAAC,KAAK;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,kBAAwB;AAC9B,IAAI,KAAK,YACT,KAAK;AAAA,MACH,IAAI,YAAoC,uBAAuB;AAAA,QAC7D,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,KAAA;AAAA,MAAK,CACtB;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,eAAe,GAAwB;AAC7C,QAAI,MAAK;AAET,cAAQ,EAAE,KAAA;AAAA,QACR,KAAK;AACH,YAAE,eAAA,GACE,KAAK,gBAAgB,CAAC,KAAK,aAC7B,KAAK,WAAW;AAElB;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACE,KAAK,gBAAgB,KAAK,aAC5B,KAAK,WAAW;AAElB;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,YAAE,eAAA,GACF,KAAK,gBAAA;AACL;AAAA,MAMA;AAAA,EAEN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,gBAAgBC,GAAuB;AACrC,SAAK,gBAAgBA;AAAA,EACvB;AAAA;AAAA,EAGS,QAAc;;AACrB,UAAMC,KAAM/B,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA2B;AACxD,IAAA+B,KAAA,QAAAA,EAAK;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,oBAAoB;AAC1B,WAAK,KAAK,eAGHlB;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKW,KAAK,WAAW,aAAa,QAAQ;AAAA,iBAC1C,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAR3BA;AAAA,EAeX;AAAA,EAES,SAAS;AAChB,UAAMmB,IAAe,KAAK,eAAe,OAAO,KAAK,QAAQ,IAAIlB,GAC3DmB,IAAe,KAAK,cAAc,OAAO,KAAK,QAAQ,IAAInB;AAEhE,WAAOD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMU,KAAK,gBAAgB,MAAM,IAAI;AAAA,0BAC1BmB,CAAY;AAAA,0BACZC,CAAY;AAAA,0BACZ,KAAK,WAAW,SAASnB,CAAO;AAAA,uBACnC,KAAK,MAAM;AAAA,0BACR,KAAK,SAAS;AAAA,yBACf,KAAK,QAAQ;AAAA,mBACnB,KAAK,eAAe;AAAA,qBAClB,KAAK,cAAc;AAAA;AAAA,YAE5B,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAUR,KAAK,WAAW,uBAAuB,EAAE;AAAA;AAAA;AAAA;AAAA,gDAIrB,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5E;AACF;AAjRaO,EACK,SAAS,CAACN,GAAaK,CAAmB;AAS1DJ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BI,EAUX,WAAA,YAAA,CAAA;AAOAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BI,EAiBX,WAAA,YAAA,CAAA;AAOAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvB/BI,EAwBX,WAAA,YAAA,CAAA;AAQiBL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhCIG,EAgCM,WAAA,gBAAA,CAAA;AAMAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtCIG,EAsCM,WAAA,iBAAA,CAAA;AAOAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7CIG,EA6CM,WAAA,UAAA,CAAA;AAKAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAlDIG,EAkDM,WAAA,aAAA,CAAA;AAKAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvDIG,EAuDM,WAAA,YAAA,CAAA;AAKAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA5DIG,EA4DM,WAAA,eAAA,CAAA;AA5DNA,IAANL,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChBE,CAAA;"}