@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-meter-UinDQjl6.js","sources":["../../src/components/hx-meter/hx-meter.styles.ts","../../src/components/hx-meter/hx-meter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMeterStyles = css`\n :host {\n display: block;\n width: 100%;\n }\n\n .meter {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-2, 0.5rem);\n width: 100%;\n }\n\n .meter__label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .meter__track {\n position: relative;\n width: 100%;\n height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));\n background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));\n border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));\n overflow: hidden;\n }\n\n .meter__indicator {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n height: 100%;\n border-radius: inherit;\n background-color: var(--_indicator-color);\n transition:\n width var(--hx-duration-fast, 150ms) ease,\n background-color var(--hx-duration-fast, 150ms) ease;\n }\n\n /* ─── Default (no thresholds configured) ─── */\n\n :host {\n --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));\n }\n\n /* ─── Semantic state colors ─── */\n\n :host([data-state='optimum']) {\n --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));\n }\n\n :host([data-state='warning']) {\n --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));\n }\n\n :host([data-state='danger']) {\n --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));\n }\n\n /* ─── Native meter hidden (we use custom rendering) ─── */\n\n .meter__native {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMeterStyles } from './hx-meter.styles.js';\n\ntype MeterState = 'optimum' | 'warning' | 'danger' | 'default';\n\n/**\n * A scalar measurement within a known range — e.g., disk usage, health score,\n * or any numeric value with defined min/max bounds. Supports low/high/optimum\n * threshold markers for semantic color feedback.\n *\n * @summary Scalar measurement gauge within a defined range.\n *\n * @tag hx-meter\n *\n * @slot label - Visible label rendered above the meter track. When using this\n * slot without the `label` attribute, the accessible name is derived from the\n * slot content via `aria-labelledby`. The `label` attribute is NOT required\n * when slot content is provided — the component detects slot content and\n * switches to `aria-labelledby` automatically.\n *\n * @csspart base - The outer wrapper element.\n * @csspart track - The unfilled track bar element.\n * @csspart indicator - The filled bar indicating the current value.\n * @csspart label - The label wrapper element.\n *\n * @cssprop [--hx-meter-track-height] - Height of the track bar.\n * @cssprop [--hx-meter-track-color] - Background color of the unfilled track.\n * @cssprop [--hx-meter-track-radius] - Border radius of the track.\n * @cssprop [--hx-meter-indicator-color] - Default filled bar color (no thresholds).\n * @cssprop [--hx-meter-color-optimum] - Color when value is in the optimum zone.\n * @cssprop [--hx-meter-color-warning] - Color when value is in a warning zone.\n * @cssprop [--hx-meter-color-danger] - Color when value is in the danger zone.\n * @cssprop [--hx-meter-label-color] - Label text color.\n */\n@customElement('hx-meter')\nexport class HelixMeter extends LitElement {\n static override styles = [tokenStyles, helixMeterStyles];\n\n private static _counter = 0;\n private _uid = `hx-meter-${++HelixMeter._counter}`;\n\n /**\n * Current value of the meter.\n * @attr value\n */\n @property({ type: Number, reflect: true })\n value = 0;\n\n /**\n * Minimum value of the range.\n * @attr min\n */\n @property({ type: Number, reflect: true })\n min = 0;\n\n /**\n * Maximum value of the range.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 100;\n\n /**\n * Threshold below which the value is considered suboptimal (lower range warning).\n * @attr low\n */\n @property({ type: Number, reflect: true })\n low?: number;\n\n /**\n * Threshold above which the value is considered suboptimal (upper range warning).\n * @attr high\n */\n @property({ type: Number, reflect: true })\n high?: number;\n\n /**\n * The optimal value within the range. Used to determine which zone is \"good\".\n * @attr optimum\n */\n @property({ type: Number, reflect: true })\n optimum?: number;\n\n /**\n * Accessible label for the meter. Used as the visible label text and as\n * the source for `aria-labelledby`. When only slot content is provided\n * (no `label` attribute), the slot content is used for the accessible name.\n * @attr label\n */\n @property({ type: String })\n label?: string;\n\n @state()\n private _hasSlotContent = false;\n\n private _clampedValue(): number {\n return Math.min(Math.max(this.value, this.min), this.max);\n }\n\n private _percentage(): number {\n const range = this.max - this.min;\n if (range === 0) return 0;\n return ((this._clampedValue() - this.min) / range) * 100;\n }\n\n private _resolveState(): MeterState {\n const v = this._clampedValue();\n const hasLow = this.low !== undefined;\n const hasHigh = this.high !== undefined;\n const hasOptimum = this.optimum !== undefined;\n\n if (!hasLow && !hasHigh && !hasOptimum) return 'default';\n\n // When hasLow/hasHigh/hasOptimum are true, the corresponding property is defined.\n // Use nullish coalescing to satisfy the type checker while preserving the runtime logic.\n const lowVal = this.low ?? 0;\n const highVal = this.high ?? this.max;\n const inLowZone = hasLow && v < lowVal;\n const inHighZone = hasHigh && v > highVal;\n const inMiddleZone = !inLowZone && !inHighZone;\n\n if (!hasOptimum) {\n if (inLowZone || inHighZone) return 'warning';\n return 'optimum';\n }\n\n const opt = this.optimum ?? this.min;\n const optimumInLow = hasLow && opt < lowVal;\n const optimumInHigh = hasHigh && opt > highVal;\n const optimumInMiddle = !optimumInLow && !optimumInHigh;\n\n if (optimumInMiddle) {\n if (inMiddleZone) return 'optimum';\n return 'warning';\n } else if (optimumInLow) {\n if (inLowZone) return 'optimum';\n if (inMiddleZone) return 'warning';\n return 'danger';\n } else {\n // optimumInHigh\n if (inHighZone) return 'optimum';\n if (inMiddleZone) return 'warning';\n return 'danger';\n }\n }\n\n private _onLabelSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this._hasSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n override updated() {\n // Set data-state on host so :host([data-state]) CSS selectors work\n this.dataset['state'] = this._resolveState();\n }\n\n override render() {\n const pct = this._percentage();\n const state = this._resolveState();\n const clampedValue = this._clampedValue();\n const stateLabel = state !== 'default' ? ` — ${state}` : '';\n const ariaValuetext = `${clampedValue} of ${this.max}${stateLabel}`;\n const hasVisibleLabel = this.label !== undefined || this._hasSlotContent;\n\n return html`\n <div\n part=\"base\"\n class=\"meter\"\n role=\"meter\"\n tabindex=\"0\"\n aria-valuenow=${clampedValue}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-valuetext=${ariaValuetext}\n aria-label=${ifDefined(!hasVisibleLabel ? `${clampedValue} of ${this.max}` : undefined)}\n aria-labelledby=${ifDefined(hasVisibleLabel ? `${this._uid}-label` : undefined)}\n >\n <span\n id=${`${this._uid}-label`}\n part=\"label\"\n class=\"meter__label\"\n ?hidden=${!hasVisibleLabel}\n >\n <slot name=\"label\" @slotchange=${this._onLabelSlotChange}>${this.label ?? ''}</slot>\n </span>\n <div class=\"meter__track\" part=\"track\">\n <div\n part=\"indicator\"\n class=\"meter__indicator\"\n style=${styleMap({ width: `${pct}%` })}\n ></div>\n </div>\n <meter\n class=\"meter__native\"\n value=${clampedValue}\n min=${this.min}\n max=${this.max}\n low=${ifDefined(this.low)}\n high=${ifDefined(this.high)}\n optimum=${ifDefined(this.optimum)}\n aria-hidden=\"true\"\n tabindex=\"-1\"\n ></meter>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-meter': HelixMeter;\n }\n}\n"],"names":["helixMeterStyles","css","HelixMeter","LitElement","range","v","hasLow","hasHigh","hasOptimum","lowVal","highVal","inLowZone","inHighZone","inMiddleZone","opt","optimumInLow","optimumInHigh","e","slot","pct","state","clampedValue","stateLabel","ariaValuetext","hasVisibleLabel","html","ifDefined","styleMap","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-nav-DSpwWYUX.js","sources":["../../src/components/hx-nav/hx-nav.styles.ts","../../src/components/hx-nav/hx-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNavStyles = css`\n :host {\n display: block;\n font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-nav-font-size, var(--hx-font-size-sm, 0.875rem));\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Nav Container ─── */\n\n [part='nav'] {\n position: relative;\n background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #111827));\n color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));\n padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));\n }\n\n /* ─── Hamburger Toggle ─── */\n\n [part='toggle'] {\n display: none;\n align-items: center;\n justify-content: center;\n padding: var(--hx-space-2, 0.5rem);\n background: transparent;\n border: none;\n border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms) ease;\n line-height: 0;\n }\n\n [part='toggle']:hover {\n background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));\n }\n\n [part='toggle']: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 /* ─── Navigation List ─── */\n\n [part='list'] {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--hx-space-1, 0.25rem);\n align-items: center;\n }\n\n /* ─── Nav Item ─── */\n\n [part='item'] {\n position: relative;\n }\n\n /* ─── Nav Link / Button ─── */\n\n .nav__link {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f3f4f6));\n text-decoration: none;\n border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n border: none;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--hx-font-weight-medium, 500);\n line-height: var(--hx-line-height-normal, 1.5);\n white-space: nowrap;\n transition:\n background-color var(--hx-transition-fast, 150ms) ease,\n color var(--hx-transition-fast, 150ms) ease;\n }\n\n .nav__link:hover {\n background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));\n color: var(--hx-nav-link-hover-color, var(--hx-color-white, #ffffff));\n }\n\n .nav__link: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 .nav__link--active {\n background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));\n color: var(--hx-nav-link-active-color, var(--hx-color-white, #ffffff));\n }\n\n /* ─── Chevron Icon ─── */\n\n .nav__chevron {\n transition: transform var(--hx-transition-normal, 200ms) ease;\n flex-shrink: 0;\n }\n\n .nav__link--expanded .nav__chevron {\n transform: rotate(180deg);\n }\n\n /* ─── Submenu ─── */\n\n .nav__submenu {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n left: 0;\n min-width: var(--hx-nav-submenu-min-width, 12rem);\n list-style: none;\n margin: 0;\n padding: var(--hx-space-1, 0.25rem) 0;\n background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1f2937));\n border-radius: var(--hx-border-radius-md, 0.375rem);\n box-shadow: var(\n --hx-shadow-md,\n 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1)\n );\n z-index: var(--hx-z-index-dropdown, 100);\n }\n\n .nav__submenu[hidden] {\n display: none;\n }\n\n .nav__submenu .nav__link {\n display: block;\n width: 100%;\n text-align: left;\n border-radius: 0;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n }\n\n /* ─── Vertical / Sidebar Orientation ─── */\n\n :host([orientation='vertical']) [part='nav'] {\n padding: var(--hx-space-4, 1rem) var(--hx-space-2, 0.5rem);\n }\n\n :host([orientation='vertical']) [part='list'] {\n flex-direction: column;\n align-items: stretch;\n gap: var(--hx-space-1, 0.25rem);\n }\n\n :host([orientation='vertical']) .nav__link {\n width: 100%;\n justify-content: flex-start;\n }\n\n :host([orientation='vertical']) .nav__submenu {\n position: static;\n box-shadow: none;\n border-radius: 0;\n background-color: transparent;\n padding: 0;\n padding-left: var(--hx-space-4, 1rem);\n }\n\n :host([orientation='vertical']) .nav__submenu[hidden] {\n display: none;\n }\n\n :host([orientation='vertical']) .nav__submenu .nav__link {\n padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #d1d5db));\n }\n\n /* ─── Mobile Responsive ─── */\n\n @media (max-width: 768px) {\n [part='nav'] {\n display: flex;\n flex-direction: column;\n padding: var(--hx-space-2, 0.5rem);\n }\n\n [part='toggle'] {\n display: inline-flex;\n align-self: flex-end;\n }\n\n [part='list'] {\n display: none;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n margin-top: var(--hx-space-2, 0.5rem);\n gap: var(--hx-space-1, 0.25rem);\n }\n\n [part='list'].nav__list--open {\n display: flex;\n }\n\n [part='item'] {\n width: 100%;\n }\n\n .nav__link {\n width: 100%;\n justify-content: flex-start;\n }\n\n .nav__submenu {\n position: static;\n box-shadow: none;\n border-radius: 0;\n padding-left: var(--hx-space-4, 1rem);\n background-color: transparent;\n }\n\n .nav__submenu .nav__link {\n padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n }\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .nav__link,\n .nav__chevron,\n [part='toggle'] {\n transition: none;\n animation: none;\n }\n }\n`;\n","import { LitElement, html, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixNavStyles } from './hx-nav.styles.js';\n\n/** A single navigation item, optionally with nested children. */\nexport interface NavItem {\n /** Display label for the item. */\n label: string;\n /** Href for the item link. Required unless children are provided. */\n href?: string;\n /** Whether this item represents the current page. */\n current?: boolean;\n /** Nested sub-menu items. */\n children?: NavItem[];\n}\n\n/** Layout orientation for the navigation. */\ntype NavOrientation = 'horizontal' | 'vertical';\n\n/**\n * Primary and secondary navigation component.\n * Supports horizontal menu bar and vertical sidebar patterns.\n * Mobile responsive with hamburger toggle.\n *\n * @summary Navigation bar supporting horizontal and vertical layouts with nested submenus.\n *\n * @tag hx-nav\n *\n * @fires {CustomEvent<{item: NavItem}>} hx-nav-select - Dispatched when a nav item is activated.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The top-level list element.\n * @csspart item - Each list item wrapper.\n * @csspart link - The anchor or button element inside each item.\n * @csspart toggle - The mobile hamburger toggle button.\n *\n * @cssprop [--hx-nav-bg=var(--hx-color-neutral-900)] - Navigation background color.\n * @cssprop [--hx-nav-color=var(--hx-color-neutral-100)] - Navigation text color.\n * @cssprop [--hx-nav-font-family=var(--hx-font-family-sans)] - Navigation font family.\n * @cssprop [--hx-nav-link-color=var(--hx-color-neutral-100)] - Link text color.\n * @cssprop [--hx-nav-link-hover-bg=var(--hx-color-neutral-700)] - Link hover background.\n * @cssprop [--hx-nav-link-hover-color=var(--hx-color-white)] - Link hover text color.\n * @cssprop [--hx-nav-link-active-bg=var(--hx-color-primary-600)] - Active link background.\n * @cssprop [--hx-nav-link-active-color=var(--hx-color-white)] - Active link text color.\n * @cssprop [--hx-nav-submenu-bg=var(--hx-color-neutral-800)] - Submenu background color.\n * @cssprop [--hx-nav-submenu-min-width=12rem] - Submenu minimum width.\n * @cssprop [--hx-nav-font-size=var(--hx-font-size-sm)] - Navigation font size.\n * @cssprop [--hx-nav-padding=var(--hx-space-2) var(--hx-space-4)] - Navigation padding.\n * @cssprop [--hx-nav-item-padding=var(--hx-space-2) var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-nav-border-radius=var(--hx-border-radius-sm)] - Item border radius.\n */\n@customElement('hx-nav')\nexport class HelixNav extends LitElement {\n static override styles = [tokenStyles, helixNavStyles];\n\n // ─── Properties ───\n\n /**\n * Navigation items array.\n * @attr items\n */\n @property({\n type: Array,\n converter: {\n fromAttribute(value: string | null): NavItem[] {\n if (!value) return [];\n try {\n const parsed: unknown = JSON.parse(value);\n return Array.isArray(parsed) ? (parsed as NavItem[]) : [];\n } catch {\n return [];\n }\n },\n },\n })\n items: NavItem[] = [];\n\n /**\n * Layout orientation: 'horizontal' (menu bar) or 'vertical' (sidebar).\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: NavOrientation = 'horizontal';\n\n /**\n * Accessible label for the nav landmark.\n * @attr label\n */\n @property({ type: String })\n label = 'Main navigation';\n\n // ─── State ───\n\n /**\n * Tracks whether the mobile navigation menu is currently expanded.\n * @internal\n */\n @state() private _mobileOpen = false;\n /**\n * Index of the currently expanded top-level nav item with a submenu, or null if none is expanded.\n * @internal\n */\n @state() private _expandedIndex: number | null = null;\n\n // ─── Private: bound event handler reference ───\n\n /**\n * Stable bound reference to the outside-click handler, stored for addEventListener/removeEventListener symmetry.\n * @internal\n */\n private _boundOutsideClick: (e: MouseEvent) => void = this._handleOutsideClick.bind(this);\n\n /**\n * Sanitizes a URL to prevent XSS via javascript: or data: URIs.\n * Only allows http:, https:, relative paths, and fragment-only links.\n */\n private _sanitizeHref(href: string | undefined): string {\n if (!href || href === '#') return '#';\n // Allow relative paths, fragments, and http(s)\n if (\n href.startsWith('/') ||\n href.startsWith('./') ||\n href.startsWith('../') ||\n href.startsWith('#')\n ) {\n return href;\n }\n try {\n const url = new URL(href, window.location.href);\n if (url.protocol === 'http:' || url.protocol === 'https:') {\n return href;\n }\n } catch {\n // Invalid URL — fall through to safe default\n }\n return '#';\n }\n\n // ─── Event Handling ───\n\n private _handleToggle(): void {\n this._mobileOpen = !this._mobileOpen;\n if (!this._mobileOpen) {\n this._expandedIndex = null;\n }\n }\n\n private _handleItemClick(item: NavItem, index: number, e: Event): void {\n e.preventDefault();\n if (item.children?.length) {\n this._expandedIndex = this._expandedIndex === index ? null : index;\n } else {\n this._mobileOpen = false;\n this._expandedIndex = null;\n this.dispatchEvent(\n new CustomEvent('hx-nav-select', {\n bubbles: true,\n composed: true,\n detail: { item },\n }),\n );\n }\n }\n\n private _handleSubItemClick(item: NavItem, e: Event): void {\n e.preventDefault();\n this._mobileOpen = false;\n this._expandedIndex = null;\n this.dispatchEvent(\n new CustomEvent('hx-nav-select', {\n bubbles: true,\n composed: true,\n detail: { item },\n }),\n );\n }\n\n private _handleKeydown(e: KeyboardEvent, index: number, item: NavItem): void {\n const items = this.shadowRoot?.querySelectorAll<HTMLElement>(\n '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n );\n if (!items) return;\n const itemsArr = Array.from(items);\n const current = itemsArr[index];\n\n switch (e.key) {\n case 'ArrowRight':\n case 'ArrowDown': {\n e.preventDefault();\n if (item.children?.length && e.key === 'ArrowDown' && this.orientation === 'horizontal') {\n // open submenu and focus first item\n this._expandedIndex = index;\n this.updateComplete.then(() => {\n const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n `.nav__submenu [part=\"link\"]`,\n );\n firstSub?.focus();\n });\n } else {\n const next = itemsArr[index + 1] ?? itemsArr[0];\n next?.focus();\n }\n break;\n }\n case 'ArrowLeft':\n case 'ArrowUp': {\n e.preventDefault();\n const prev = itemsArr[index - 1] ?? itemsArr[itemsArr.length - 1];\n prev?.focus();\n break;\n }\n case 'Escape': {\n this._expandedIndex = null;\n current?.focus();\n break;\n }\n case 'Enter':\n case ' ': {\n if (item.children?.length) {\n e.preventDefault();\n const wasExpanded = this._expandedIndex === index;\n this._expandedIndex = wasExpanded ? null : index;\n if (!wasExpanded) {\n this.updateComplete.then(() => {\n const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n `.nav__submenu:not([hidden]) [part=\"link\"]`,\n );\n firstSub?.focus();\n });\n }\n }\n break;\n }\n }\n }\n\n private _handleSubKeydown(e: KeyboardEvent, parentIndex: number): void {\n const subItems = this.shadowRoot?.querySelectorAll<HTMLElement>(\n `.nav__submenu:not([hidden]) [part=\"link\"]`,\n );\n if (!subItems) return;\n const arr = Array.from(subItems);\n const focused = (e.currentTarget ?? e.target) as HTMLElement;\n const currentIdx = arr.indexOf(focused);\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n const next = arr[currentIdx + 1] ?? arr[0];\n next?.focus();\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prev = arr[currentIdx - 1] ?? arr[arr.length - 1];\n prev?.focus();\n break;\n }\n case 'Escape': {\n e.preventDefault();\n this._expandedIndex = null;\n const parentLinks = this.shadowRoot?.querySelectorAll<HTMLElement>(\n '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n );\n parentLinks?.[parentIndex]?.focus();\n break;\n }\n }\n }\n\n private _handleOutsideClick(e: MouseEvent): void {\n const path = e.composedPath();\n if (!path.includes(this)) {\n this._expandedIndex = null;\n }\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._boundOutsideClick);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._boundOutsideClick);\n }\n\n // ─── Render Helpers ───\n\n private _renderHamburgerIcon() {\n return html`<svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n >\n ${this._mobileOpen\n ? svg`<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>`\n : svg`<line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>`}\n </svg>`;\n }\n\n private _renderChevronIcon() {\n return html`<svg\n class=\"nav__chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M4.5 6L8 9.5 11.5 6\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>`;\n }\n\n private _renderSubMenu(children: NavItem[], parentIndex: number, parentLabel: string) {\n const isExpanded = this._expandedIndex === parentIndex;\n return html`\n <ul\n class=\"nav__submenu\"\n role=\"list\"\n aria-label=\"${parentLabel} submenu\"\n ?hidden=${!isExpanded}\n >\n ${children.map(\n (child) => html`\n <li class=\"nav__submenu-item\">\n <a\n part=\"link\"\n href=${this._sanitizeHref(child.href)}\n class=${classMap({\n nav__link: true,\n 'nav__link--active': !!child.current,\n })}\n aria-current=${child.current ? 'page' : nothing}\n @click=${(e: Event) => this._handleSubItemClick(child, e)}\n @keydown=${(e: KeyboardEvent) => this._handleSubKeydown(e, parentIndex)}\n >\n ${child.label}\n </a>\n </li>\n `,\n )}\n </ul>\n `;\n }\n\n private _renderItem(item: NavItem, index: number) {\n const hasChildren = !!item.children?.length;\n const isExpanded = this._expandedIndex === index;\n\n const linkClasses = {\n nav__link: true,\n 'nav__link--active': !!item.current,\n 'nav__link--has-submenu': hasChildren,\n 'nav__link--expanded': isExpanded,\n };\n\n const content = hasChildren\n ? html`\n <button\n part=\"link\"\n class=${classMap(linkClasses)}\n aria-expanded=${isExpanded ? 'true' : 'false'}\n @click=${(e: Event) => this._handleItemClick(item, index, e)}\n @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n >\n ${item.label} ${this._renderChevronIcon()}\n </button>\n ${this._renderSubMenu(item.children ?? [], index, item.label)}\n `\n : html`\n <a\n part=\"link\"\n href=${this._sanitizeHref(item.href)}\n class=${classMap(linkClasses)}\n aria-current=${item.current ? 'page' : nothing}\n @click=${(e: Event) => this._handleItemClick(item, index, e)}\n @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n >\n ${item.label}\n </a>\n `;\n\n return html` <li part=\"item\" class=\"nav__item\">${content}</li> `;\n }\n\n // ─── Render ───\n\n override render() {\n const listClasses = {\n nav__list: true,\n 'nav__list--open': this._mobileOpen,\n };\n\n return html`\n <nav part=\"nav\" aria-label=${this.label}>\n <button\n part=\"toggle\"\n class=\"nav__toggle\"\n aria-expanded=${this._mobileOpen ? 'true' : 'false'}\n aria-controls=\"nav-list\"\n aria-label=${this._mobileOpen ? 'Close navigation menu' : 'Open navigation menu'}\n @click=${this._handleToggle}\n >\n ${this._renderHamburgerIcon()}\n </button>\n\n <ul part=\"list\" id=\"nav-list\" class=${classMap(listClasses)} role=\"list\">\n ${repeat(\n this.items,\n (_item, i) => i,\n (item, i) => this._renderItem(item, i),\n )}\n </ul>\n </nav>\n `;\n }\n}\n\n/** Canonical type alias for the hx-nav component. */\nexport type HxNav = HelixNav;\n\n/** @deprecated Use {@link HxNav} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcNav = HelixNav;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-nav': HelixNav;\n }\n}\n"],"names":["helixNavStyles","css","HelixNav","LitElement","href","url","item","index","e","_a","items","itemsArr","current","_b","firstSub","next","prev","_c","wasExpanded","parentIndex","subItems","arr","focused","currentIdx","parentLinks","html","svg","children","parentLabel","isExpanded","child","classMap","nothing","hasChildren","linkClasses","content","listClasses","repeat","_item","tokenStyles","__decorateClass","property","value","parsed","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-pagination-BQ0cLTuB.js","sources":["../../src/components/hx-pagination/hx-pagination.styles.ts","../../src/components/hx-pagination/hx-pagination.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPaginationStyles = css`\n :host {\n display: block;\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n .pagination-root {\n display: flex;\n align-items: center;\n gap: var(--hx-spacing-4, 1rem);\n flex-wrap: wrap;\n }\n\n nav {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .list {\n display: flex;\n align-items: center;\n gap: var(--hx-pagination-gap, var(--hx-spacing-1, 0.25rem));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .item {\n display: flex;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--hx-pagination-button-size, 2.25rem);\n height: var(--hx-pagination-button-size, 2.25rem);\n padding: 0 var(--hx-spacing-2, 0.5rem);\n border: 1px solid var(--hx-pagination-border-color, var(--hx-color-border, #d1d5db));\n border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n background: var(--hx-pagination-bg, var(--hx-color-surface, #ffffff));\n color: var(--hx-pagination-color, var(--hx-color-text-primary, #111827));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms) ease,\n border-color var(--hx-transition-fast, 150ms) ease,\n color var(--hx-transition-fast, 150ms) ease;\n text-decoration: none;\n white-space: nowrap;\n }\n\n .button:hover:not(:disabled) {\n background: var(--hx-pagination-hover-bg, var(--hx-color-surface-hover, #f3f4f6));\n border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary, #2563eb));\n }\n\n .button:focus-visible {\n outline: 2px solid var(--hx-color-focus, var(--hx-color-primary, #2563eb));\n outline-offset: 2px;\n }\n\n .button[aria-current='page'] {\n background: var(--hx-pagination-active-bg, var(--hx-color-primary, #2563eb));\n border-color: var(\n --hx-pagination-active-border-color,\n var(--hx-pagination-active-bg, var(--hx-color-primary, #2563eb))\n );\n color: var(--hx-pagination-active-color, var(--hx-color-surface, #ffffff));\n font-weight: var(--hx-font-weight-semibold, 600);\n cursor: default;\n pointer-events: none;\n }\n\n .button:disabled {\n opacity: 0.4;\n pointer-events: none;\n }\n\n .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--hx-pagination-button-size, 2.25rem);\n height: var(--hx-pagination-button-size, 2.25rem);\n color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-secondary, #6b7280));\n font-size: var(--hx-font-size-sm, 0.875rem);\n user-select: none;\n }\n\n .button[aria-disabled='true'] {\n cursor: default;\n pointer-events: none;\n }\n\n /* Page size selector */\n .page-size-wrapper {\n display: flex;\n align-items: center;\n }\n\n .page-size-label {\n display: flex;\n align-items: center;\n gap: var(--hx-spacing-2, 0.5rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-text-secondary, #6b7280);\n white-space: nowrap;\n }\n\n .page-size-select {\n height: var(--hx-pagination-button-size, 2.25rem);\n padding: 0 var(--hx-spacing-2, 0.5rem);\n border: 1px solid var(--hx-pagination-border-color, var(--hx-color-border, #d1d5db));\n border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n background: var(--hx-pagination-bg, var(--hx-color-surface, #ffffff));\n color: var(--hx-pagination-color, var(--hx-color-text-primary, #111827));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n }\n\n .page-size-select:focus-visible {\n outline: 2px solid var(--hx-color-focus, var(--hx-color-primary, #2563eb));\n outline-offset: 2px;\n }\n\n /* Visually hidden — used for aria-live status messages */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n\n /* Windows High Contrast / forced-colors support */\n @media (forced-colors: active) {\n .button {\n border: 1px solid ButtonText;\n color: ButtonText;\n background: ButtonFace;\n forced-color-adjust: none;\n }\n\n .button:hover:not(:disabled) {\n border-color: Highlight;\n color: Highlight;\n }\n\n .button:focus-visible {\n outline-color: Highlight;\n }\n\n .button[aria-current='page'] {\n background: Highlight;\n border-color: Highlight;\n color: HighlightText;\n }\n\n .button:disabled {\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n .button[aria-disabled='true'] {\n color: GrayText;\n }\n\n .page-size-select {\n border-color: ButtonText;\n color: ButtonText;\n background: ButtonFace;\n forced-color-adjust: none;\n }\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 { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixPaginationStyles } from './hx-pagination.styles.js';\n\n/**\n * A pagination component for navigating content listings.\n *\n * @summary Page navigation with page numbers, prev/next, and ellipsis.\n *\n * @tag hx-pagination\n *\n * @csspart nav - The wrapping `<nav>` element.\n * @csspart list - The `<ul>` containing pagination items.\n * @csspart item - Each `<li>` item.\n * @csspart button - Each page button or prev/next control.\n * @csspart ellipsis - The ellipsis (`…`) span between page groups.\n * @csspart page-size-wrapper - The wrapper `<div>` around the page-size selector.\n * @csspart page-size-label - The `<label>` element for the page-size selector.\n * @csspart page-size-select - The `<select>` element for page-size.\n *\n * @cssprop [--hx-pagination-gap=0.25rem] - Gap between pagination buttons. Inherits from --hx-spacing-1.\n * @cssprop [--hx-pagination-button-size=2.25rem] - Minimum width and height of each button.\n * @cssprop [--hx-pagination-border-color] - Border color of buttons. Inherits from --hx-color-border (final fallback: #d1d5db).\n * @cssprop [--hx-pagination-border-radius] - Border radius of buttons. Inherits from --hx-border-radius-md (final fallback: 0.375rem).\n * @cssprop [--hx-pagination-bg] - Background color of buttons. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-color] - Text color of buttons. Inherits from --hx-color-text-primary (final fallback: #111827).\n * @cssprop [--hx-pagination-hover-bg] - Background color of buttons on hover. Inherits from --hx-color-surface-hover (final fallback: #f3f4f6).\n * @cssprop [--hx-pagination-hover-border-color] - Border color of buttons on hover. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-bg] - Background color of the active/current page button. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-color] - Text color of the active/current page button. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-active-border-color] - Border color of the active/current page button. Defaults to --hx-pagination-active-bg.\n * @cssprop [--hx-pagination-ellipsis-color] - Color of ellipsis characters. Inherits from --hx-color-text-secondary (final fallback: #6b7280).\n * @cssprop [--hx-transition-fast=150ms] - Duration used for hover/focus transitions.\n *\n * @fires {CustomEvent<{ page: number }>} hx-page-change - Fired when the user navigates to a new page.\n * @fires {CustomEvent<{ pageSize: number }>} hx-page-size-change - Fired when the user selects a new page size.\n *\n * @example\n * ```html\n * <hx-pagination total-pages=\"10\" current-page=\"1\"></hx-pagination>\n * ```\n *\n * @example Drupal / Twig integration\n * ```twig\n * {#\n * Drupal's pager uses 0-based page index in the URL (?page=N).\n * This component is 1-based, so add 1 to the Drupal page value.\n * Listen to hx-page-change and update the URL query param:\n * element.addEventListener('hx-page-change', (e) => {\n * const params = new URLSearchParams(location.search);\n * params.set('page', e.detail.page - 1); // convert back to 0-based\n * history.pushState({}, '', '?' + params.toString());\n * });\n * #}\n * <hx-pagination\n * total-pages=\"{{ total_pages }}\"\n * current-page=\"{{ pager.current_page + 1 }}\"\n * label=\"{{ 'Pagination'|t }}\"\n * {{ show_first_last ? 'show-first-last' : '' }}\n * ></hx-pagination>\n * ```\n */\n@customElement('hx-pagination')\nexport class HelixPagination extends LitElement {\n static override styles = [tokenStyles, helixPaginationStyles];\n\n /**\n * Total number of pages.\n * @attr total-pages\n */\n @property({ type: Number, attribute: 'total-pages', reflect: true })\n totalPages = 1;\n\n /**\n * The currently active page (1-based).\n * @attr current-page\n */\n @property({ type: Number, attribute: 'current-page' })\n currentPage = 1;\n\n /**\n * Number of page buttons shown on each side of the current page.\n * @attr sibling-count\n */\n @property({ type: Number, attribute: 'sibling-count', reflect: true })\n siblingCount = 1;\n\n /**\n * Number of pages always shown at the start and end of the list.\n * @attr boundary-count\n */\n @property({ type: Number, attribute: 'boundary-count', reflect: true })\n boundaryCount = 1;\n\n /**\n * Whether to show First and Last page buttons.\n * @attr show-first-last\n */\n @property({ type: Boolean, attribute: 'show-first-last', reflect: true })\n showFirstLast = false;\n\n /**\n * Accessible label for the `<nav>` element.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Pagination';\n\n /**\n * The number of items displayed per page. When set, a page-size selector\n * `<select>` is rendered. Set `show-page-size` to display the selector.\n * @attr page-size\n */\n @property({ type: Number, attribute: 'page-size', reflect: true })\n pageSize = 25;\n\n /**\n * Whether to show the page-size selector UI.\n * @attr show-page-size\n */\n @property({ type: Boolean, attribute: 'show-page-size', reflect: true })\n showPageSize = false;\n\n /**\n * Label text for the rows-per-page selector.\n * @attr label-rows-per-page\n */\n @property({ type: String, attribute: 'label-rows-per-page' })\n labelRowsPerPage = 'Rows per page:';\n\n /** Tracks the roving tabindex target. Null means default to currentPage. */\n @state() private _rovingKey: number | string | null = null;\n\n /** Text for the aria-live region, updated on navigation. */\n @state() private _liveMessage = '';\n\n /** Memoization cache for _buildPageRange. */\n private _pageRangeCache: { key: string; result: Array<number | 'ellipsis'> } | null = null;\n\n // ─── Helpers ───\n\n private _buildPageRange(): Array<number | 'ellipsis'> {\n const key = `${this.totalPages}-${this.currentPage}-${this.siblingCount}-${this.boundaryCount}`;\n if (this._pageRangeCache?.key === key) return this._pageRangeCache.result;\n\n const total = Math.max(1, this.totalPages);\n const current = Math.min(Math.max(1, this.currentPage), total);\n const boundary = Math.max(0, this.boundaryCount);\n const sibling = Math.max(0, this.siblingCount);\n\n const startPages = this._range(1, Math.min(boundary, total));\n const endPages = this._range(Math.max(total - boundary + 1, boundary + 1), total);\n\n const siblingStart = Math.max(\n Math.min(current - sibling, total - boundary - sibling * 2 - 1),\n boundary + 2,\n );\n const siblingEnd = Math.min(\n Math.max(current + sibling, boundary + sibling * 2 + 2),\n endPages.length > 0 ? (endPages[0] ?? total) - 2 : total - 1,\n );\n\n const items: Array<number | 'ellipsis'> = [];\n\n for (const p of startPages) items.push(p);\n\n if (siblingStart > boundary + 2) {\n items.push('ellipsis');\n } else if (boundary + 1 < siblingStart) {\n items.push(boundary + 1);\n }\n\n for (const p of this._range(siblingStart, siblingEnd)) items.push(p);\n\n if (siblingEnd < total - boundary - 1) {\n items.push('ellipsis');\n } else if (siblingEnd < total - boundary) {\n items.push(total - boundary);\n }\n\n for (const p of endPages) items.push(p);\n\n this._pageRangeCache = { key, result: items };\n return items;\n }\n\n private _range(start: number, end: number): number[] {\n const result: number[] = [];\n for (let i = start; i <= end; i++) result.push(i);\n return result;\n }\n\n private _navigate(page: number): void {\n const clamped = Math.min(Math.max(1, page), this.totalPages);\n if (clamped === this.currentPage) return;\n\n this.currentPage = clamped;\n this._rovingKey = null; // reset so focus follows the new current page\n this._liveMessage = `Page ${clamped} of ${this.totalPages}`;\n this.dispatchEvent(\n new CustomEvent<{ page: number }>('hx-page-change', {\n detail: { page: clamped },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handlePageSizeChange(e: Event): void {\n const select = e.target as HTMLSelectElement;\n const newSize = Number(select.value);\n if (newSize === this.pageSize) return;\n\n this.pageSize = newSize;\n this.dispatchEvent(\n new CustomEvent<{ pageSize: number }>('hx-page-size-change', {\n detail: { pageSize: newSize },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private get _effectiveRovingKey(): number | string {\n return this._rovingKey ?? this.currentPage;\n }\n\n private _handleFocusin(e: FocusEvent): void {\n const btn = e.target as HTMLElement;\n if (btn.tagName !== 'BUTTON') return;\n const key = btn.dataset['rovingKey'];\n if (key === undefined) return;\n this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n }\n\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;\n e.preventDefault();\n\n const list = this.shadowRoot?.querySelector('.list');\n if (!list) return;\n\n // Collect all non-disabled buttons (disabled prev/next excluded; aria-disabled current page included)\n const buttons = Array.from(list.querySelectorAll<HTMLButtonElement>('button:not([disabled])'));\n const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;\n const currentIdx = focused ? buttons.indexOf(focused) : 0;\n\n const nextIdx =\n e.key === 'ArrowLeft'\n ? Math.max(0, currentIdx - 1)\n : Math.min(buttons.length - 1, currentIdx + 1);\n\n if (nextIdx !== currentIdx) {\n const nextBtn = buttons[nextIdx];\n if (!nextBtn) return;\n const key = nextBtn.dataset['rovingKey'];\n if (key !== undefined) {\n this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n }\n nextBtn.focus();\n }\n }\n\n // ─── Render ───\n\n override render() {\n const pages = this._buildPageRange();\n const isFirst = this.currentPage <= 1;\n const isLast = this.currentPage >= this.totalPages;\n const rovingKey = this._effectiveRovingKey;\n\n return html`\n <div class=\"pagination-root\">\n ${this.showPageSize\n ? html`\n <div part=\"page-size-wrapper\" class=\"page-size-wrapper\">\n <label part=\"page-size-label\" class=\"page-size-label\">\n ${this.labelRowsPerPage}\n <select\n part=\"page-size-select\"\n class=\"page-size-select\"\n @change=${this._handlePageSizeChange}\n >\n ${[10, 25, 50, 100].map(\n (n) =>\n html`<option value=${n} ?selected=${n === this.pageSize}>${n}</option>`,\n )}\n </select>\n </label>\n </div>\n `\n : nothing}\n\n <nav part=\"nav\" aria-label=${this.label}>\n <span class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\"\n >${this._liveMessage}</span\n >\n <ul\n part=\"list\"\n class=\"list\"\n role=\"list\"\n @keydown=${this._handleKeydown}\n @focusin=${this._handleFocusin}\n >\n ${this.showFirstLast\n ? html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isFirst}\n tabindex=${rovingKey === 'first' ? 0 : -1}\n data-roving-key=\"first\"\n aria-label=\"First page\"\n @click=${() => this._navigate(1)}\n >\n «\n </button>\n </li>\n `\n : nothing}\n\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isFirst}\n tabindex=${rovingKey === 'prev' ? 0 : -1}\n data-roving-key=\"prev\"\n aria-label=\"Previous page\"\n @click=${() => this._navigate(this.currentPage - 1)}\n >\n ‹\n </button>\n </li>\n\n ${repeat(\n pages,\n (page, i) => (page === 'ellipsis' ? `ellipsis-${i}` : `page-${page}`),\n (page) => {\n if (page === 'ellipsis') {\n return html`\n <li part=\"item\" class=\"item\">\n <span part=\"ellipsis\" class=\"ellipsis\" aria-hidden=\"true\">…</span>\n </li>\n `;\n }\n const isCurrent = page === this.currentPage;\n return html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=${classMap({ button: true })}\n aria-disabled=${isCurrent ? 'true' : nothing}\n tabindex=${rovingKey === page ? 0 : -1}\n data-roving-key=${page}\n aria-current=${isCurrent ? 'page' : nothing}\n aria-label=${`Page ${page}`}\n @click=${() => this._navigate(page)}\n >\n ${page}\n </button>\n </li>\n `;\n },\n )}\n\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isLast}\n tabindex=${rovingKey === 'next' ? 0 : -1}\n data-roving-key=\"next\"\n aria-label=\"Next page\"\n @click=${() => this._navigate(this.currentPage + 1)}\n >\n ›\n </button>\n </li>\n\n ${this.showFirstLast\n ? html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isLast}\n tabindex=${rovingKey === 'last' ? 0 : -1}\n data-roving-key=\"last\"\n aria-label=\"Last page\"\n @click=${() => this._navigate(this.totalPages)}\n >\n »\n </button>\n </li>\n `\n : nothing}\n </ul>\n </nav>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-pagination': HelixPagination;\n }\n}\n\n/** Canonical type alias for HelixPagination. Use this when typing hx-pagination element references. */\nexport type HxPagination = HelixPagination;\n"],"names":["helixPaginationStyles","css","HelixPagination","LitElement","key","_a","total","current","boundary","sibling","startPages","endPages","siblingStart","siblingEnd","items","p","start","end","result","i","page","clamped","e","select","newSize","btn","list","buttons","focused","_b","currentIdx","nextIdx","nextBtn","pages","isFirst","isLast","rovingKey","html","n","nothing","repeat","isCurrent","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
@@ -1,226 +0,0 @@
1
- import { css as w, LitElement as E, html as m } from "lit";
2
- import { property as a, state as A, customElement as k } from "lit/decorators.js";
3
- import { tokenStyles as C } from "@helixui/tokens/lit";
4
- import { offset as S, flip as $, shift as P, arrow as D, computePosition as F } from "@floating-ui/dom";
5
- const L = w`
6
- :host {
7
- /* P2-05: display:contents lets the trigger-wrapper control layout inline;
8
- position:relative was vestigial — body uses position:fixed via Floating UI */
9
- display: contents;
10
- }
11
-
12
- .trigger-wrapper {
13
- display: inline-block;
14
- }
15
-
16
- [part='body'] {
17
- position: fixed;
18
- z-index: var(--hx-popover-z-index, 9999);
19
- max-width: var(--hx-popover-max-width, 320px);
20
- padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
21
- background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
22
- color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));
23
- font-family: var(--hx-font-family-sans, sans-serif);
24
- font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
25
- line-height: var(--hx-line-height-normal, 1.5);
26
- border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
27
- border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
28
- box-shadow: var(
29
- --hx-popover-shadow,
30
- var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))
31
- );
32
- visibility: hidden;
33
- opacity: 0;
34
- transition:
35
- opacity var(--hx-popover-transition-duration, 0.2s) ease,
36
- visibility var(--hx-popover-transition-duration, 0.2s) ease;
37
- word-wrap: break-word;
38
- }
39
-
40
- [part='body'].visible {
41
- visibility: visible;
42
- opacity: 1;
43
- }
44
-
45
- [part='arrow'] {
46
- position: absolute;
47
- width: var(--hx-popover-arrow-size, 10px);
48
- height: var(--hx-popover-arrow-size, 10px);
49
- background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
50
- border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
51
- transform: rotate(45deg);
52
- pointer-events: none;
53
- }
54
-
55
- @media (prefers-reduced-motion: reduce) {
56
- [part='body'] {
57
- transition: none;
58
- }
59
- }
60
- `;
61
- var O = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (e, o, i, t) => {
62
- for (var s = t > 1 ? void 0 : t ? z(o, i) : o, h = e.length - 1, d; h >= 0; h--)
63
- (d = e[h]) && (s = (t ? d(o, i, s) : d(s)) || s);
64
- return t && s && O(o, i, s), s;
65
- };
66
- let M = 0, r = class extends E {
67
- constructor() {
68
- super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this.distance = 8, this.skidding = 0, this.arrow = !1, this.label = "Popover", this._visible = !1, this._previousFocus = null, this._popoverId = `hx-popover-${++M}`, this._handleDocumentKeydown = (e) => {
69
- e.key === "Escape" && this._visible && this._hide();
70
- }, this._handleDocumentClick = (e) => {
71
- e.target !== this && !this.contains(e.target) && this._hide();
72
- }, this._handleAnchorClick = () => {
73
- this.trigger === "click" && (this._visible ? this._hide() : this._show());
74
- }, this._handleAnchorMouseEnter = () => {
75
- this.trigger === "hover" && this._show();
76
- }, this._handleAnchorMouseLeave = () => {
77
- this.trigger === "hover" && this._hide();
78
- }, this._handleAnchorFocusIn = () => {
79
- this.trigger === "focus" && this._show();
80
- }, this._handleAnchorFocusOut = () => {
81
- this.trigger === "focus" && this._hide();
82
- };
83
- }
84
- // ─── Lifecycle ───
85
- disconnectedCallback() {
86
- super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown);
87
- }
88
- firstUpdated() {
89
- this._setAnchorAriaExpanded(!1), this.open && this._show();
90
- }
91
- updated(e) {
92
- e.has("open") && (this.open ? this._show() : this._hide());
93
- }
94
- // ─── ARIA setup ───
95
- // P2-03: collapsed _setupAnchorAria + _updateAnchorAriaExpanded into one method
96
- _setAnchorAriaExpanded(e) {
97
- var t;
98
- const o = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
99
- 'slot[name="anchor"]'
100
- );
101
- if (!o) return;
102
- const i = o.assignedElements()[0];
103
- i && i.setAttribute("aria-expanded", String(e));
104
- }
105
- // ─── Show/Hide ───
106
- async _show() {
107
- var o;
108
- if (this._visible) return;
109
- this._previousFocus = document.activeElement, this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })), this._visible = !0, this.open = !0, this._setAnchorAriaExpanded(!0), document.addEventListener("keydown", this._handleDocumentKeydown), await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-show", { bubbles: !0, composed: !0 }));
110
- const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector('[part="body"]');
111
- e && e.focus(), setTimeout(() => {
112
- document.addEventListener("click", this._handleDocumentClick);
113
- }, 0), await this._updatePosition();
114
- }
115
- async _hide() {
116
- var e;
117
- this._visible && (document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })), this._visible = !1, this.open = !1, this._setAnchorAriaExpanded(!1), (e = this._previousFocus) == null || e.focus(), this._previousFocus = null, await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
118
- }
119
- // ─── Positioning ───
120
- async _updatePosition() {
121
- var c, u, v;
122
- const e = (c = this.shadowRoot) == null ? void 0 : c.querySelector(
123
- 'slot[name="anchor"]'
124
- );
125
- if (!e) return;
126
- const o = e.assignedElements()[0], i = (u = this.shadowRoot) == null ? void 0 : u.querySelector('[part="body"]'), t = this.arrow ? (v = this.shadowRoot) == null ? void 0 : v.querySelector('[part="arrow"]') : null;
127
- if (!o || !i) return;
128
- const s = [
129
- S({ mainAxis: this.distance, crossAxis: this.skidding }),
130
- $(),
131
- P({ padding: 8 })
132
- ];
133
- t && s.push(D({ element: t }));
134
- const { x: h, y: d, placement: x, middlewareData: p } = await F(o, i, {
135
- placement: this.placement,
136
- strategy: "fixed",
137
- middleware: s
138
- });
139
- if (Object.assign(i.style, {
140
- left: `${h}px`,
141
- top: `${d}px`
142
- }), t && p.arrow) {
143
- const l = p.arrow, b = x.split("-")[0] ?? "bottom", y = { top: "bottom", right: "left", bottom: "top", left: "right" }[b] ?? "bottom";
144
- Object.assign(t.style, {
145
- left: l.x != null ? `${l.x}px` : "",
146
- top: l.y != null ? `${l.y}px` : "",
147
- right: "",
148
- bottom: "",
149
- [y]: "-5px"
150
- });
151
- const _ = ["border-top", "border-right", "border-bottom", "border-left"];
152
- for (const g of _)
153
- t.style.setProperty(g, "");
154
- const f = {
155
- bottom: ["border-bottom", "border-right"],
156
- top: ["border-top", "border-left"],
157
- right: ["border-top", "border-right"],
158
- left: ["border-bottom", "border-left"]
159
- }[b] ?? ["border-bottom", "border-right"];
160
- t.style.setProperty(f[0], "1px solid transparent"), t.style.setProperty(f[1], "1px solid transparent");
161
- }
162
- }
163
- _handleAnchorSlotChange() {
164
- this._setAnchorAriaExpanded(this._visible);
165
- }
166
- // ─── Render ───
167
- render() {
168
- return m`
169
- <div
170
- class="trigger-wrapper"
171
- @click=${this._handleAnchorClick}
172
- @mouseenter=${this._handleAnchorMouseEnter}
173
- @mouseleave=${this._handleAnchorMouseLeave}
174
- @focusin=${this._handleAnchorFocusIn}
175
- @focusout=${this._handleAnchorFocusOut}
176
- >
177
- <slot name="anchor" @slotchange=${this._handleAnchorSlotChange}></slot>
178
- </div>
179
- <div
180
- part="body"
181
- id=${this._popoverId}
182
- role="region"
183
- aria-label=${this.label}
184
- aria-hidden="${this._visible ? "false" : "true"}"
185
- tabindex="-1"
186
- ?inert=${!this._visible}
187
- class=${this._visible ? "visible" : ""}
188
- >
189
- <slot></slot>
190
- ${this.arrow ? m`<div part="arrow"></div>` : ""}
191
- </div>
192
- `;
193
- }
194
- };
195
- r.styles = [C, L];
196
- n([
197
- a({ type: Boolean, reflect: !0 })
198
- ], r.prototype, "open", 2);
199
- n([
200
- a({ type: String, reflect: !0 })
201
- ], r.prototype, "placement", 2);
202
- n([
203
- a({ type: String, reflect: !0 })
204
- ], r.prototype, "trigger", 2);
205
- n([
206
- a({ type: Number, reflect: !0 })
207
- ], r.prototype, "distance", 2);
208
- n([
209
- a({ type: Number, reflect: !0 })
210
- ], r.prototype, "skidding", 2);
211
- n([
212
- a({ type: Boolean, reflect: !0 })
213
- ], r.prototype, "arrow", 2);
214
- n([
215
- a({ type: String, reflect: !0 })
216
- ], r.prototype, "label", 2);
217
- n([
218
- A()
219
- ], r.prototype, "_visible", 2);
220
- r = n([
221
- k("hx-popover")
222
- ], r);
223
- export {
224
- r as H
225
- };
226
- //# sourceMappingURL=hx-popover-BQsgrJCW.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-popover-BQsgrJCW.js","sources":["../../src/components/hx-popover/hx-popover.styles.ts","../../src/components/hx-popover/hx-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopoverStyles = css`\n :host {\n /* P2-05: display:contents lets the trigger-wrapper control layout inline;\n position:relative was vestigial — body uses position:fixed via Floating UI */\n display: contents;\n }\n\n .trigger-wrapper {\n display: inline-block;\n }\n\n [part='body'] {\n position: fixed;\n z-index: var(--hx-popover-z-index, 9999);\n max-width: var(--hx-popover-max-width, 320px);\n padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));\n background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));\n line-height: var(--hx-line-height-normal, 1.5);\n border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-popover-shadow,\n var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))\n );\n visibility: hidden;\n opacity: 0;\n transition:\n opacity var(--hx-popover-transition-duration, 0.2s) ease,\n visibility var(--hx-popover-transition-duration, 0.2s) ease;\n word-wrap: break-word;\n }\n\n [part='body'].visible {\n visibility: visible;\n opacity: 1;\n }\n\n [part='arrow'] {\n position: absolute;\n width: var(--hx-popover-arrow-size, 10px);\n height: var(--hx-popover-arrow-size, 10px);\n background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [part='body'] {\n transition: none;\n }\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\n\ntype PopoverPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\ntype TriggerMode = 'click' | 'hover' | 'focus' | 'manual';\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * @summary Rich floating overlay attached to a trigger element.\n *\n * @tag hx-popover\n *\n * @slot anchor - The trigger element that opens the popover.\n * @slot - Default slot for popover body content.\n *\n * @csspart body - The popover body container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-popover-bg=var(--hx-color-neutral-0)] - Popover background color.\n * @cssprop [--hx-popover-color=var(--hx-color-neutral-900)] - Popover text color.\n * @cssprop [--hx-popover-font-size=var(--hx-font-size-sm)] - Popover font size.\n * @cssprop [--hx-popover-max-width=320px] - Maximum popover width.\n * @cssprop [--hx-popover-padding] - Popover padding.\n * @cssprop [--hx-popover-border-color=var(--hx-color-neutral-200)] - Popover border color.\n * @cssprop [--hx-popover-border-radius=var(--hx-border-radius-md)] - Popover border radius.\n * @cssprop [--hx-popover-shadow] - Popover box shadow.\n * @cssprop [--hx-popover-z-index=9999] - Popover z-index.\n * @cssprop [--hx-popover-transition-duration=0.2s] - Show/hide transition duration.\n * @cssprop [--hx-popover-arrow-size=10px] - Size of the arrow indicator.\n *\n * @fires hx-show - Dispatched when the popover begins to show.\n * @fires hx-after-show - Dispatched after the popover is fully visible.\n * @fires hx-hide - Dispatched when the popover begins to hide.\n * @fires hx-after-hide - Dispatched after the popover is fully hidden.\n *\n * @example\n * ```html\n * <hx-popover placement=\"bottom\" trigger=\"click\">\n * <button slot=\"anchor\">Open Popover</button>\n * <p>Rich popover content here.</p>\n * </hx-popover>\n * ```\n */\nlet _popoverCounter = 0;\n\n@customElement('hx-popover')\nexport class HelixPopover extends LitElement {\n static override styles = [tokenStyles, helixPopoverStyles];\n\n /**\n * Whether the popover is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Preferred placement of the popover relative to the anchor.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement: PopoverPlacement = 'bottom';\n\n /**\n * How the popover is triggered.\n * @attr trigger\n */\n @property({ type: String, reflect: true })\n trigger: TriggerMode = 'click';\n\n /**\n * Distance in pixels between the popover and the anchor.\n * @attr distance\n */\n @property({ type: Number, reflect: true })\n distance = 8;\n\n /**\n * Alignment offset in pixels along the anchor.\n * @attr skidding\n */\n @property({ type: Number, reflect: true })\n skidding = 0;\n\n /**\n * Whether to show an arrow pointing to the anchor.\n * @attr arrow\n */\n @property({ type: Boolean, reflect: true })\n arrow = false;\n\n /**\n * Accessible label for the popover body (sets aria-label on the dialog).\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Popover';\n\n /** @internal */\n @state() private _visible = false;\n\n /** @internal */\n private _previousFocus: HTMLElement | null = null;\n\n /** @internal */\n private readonly _popoverId = `hx-popover-${++_popoverCounter}`;\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleDocumentClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\n }\n\n override firstUpdated(): void {\n this._setAnchorAriaExpanded(false);\n // Sync initial open state\n if (this.open) {\n void this._show();\n }\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has('open')) {\n if (this.open) {\n void this._show();\n } else {\n void this._hide();\n }\n }\n }\n\n // ─── ARIA setup ───\n\n // P2-03: collapsed _setupAnchorAria + _updateAnchorAriaExpanded into one method\n private _setAnchorAriaExpanded(value: boolean): void {\n const anchorSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"anchor\"]',\n ) as HTMLSlotElement | null;\n if (!anchorSlot) return;\n const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n if (anchorEl) {\n anchorEl.setAttribute('aria-expanded', String(value));\n // aria-controls is omitted: the body lives in Shadow DOM and axe-core\n // cannot resolve cross-root IDREF values, which causes a critical violation.\n }\n }\n\n // ─── Show/Hide ───\n\n private async _show(): Promise<void> {\n if (this._visible) return;\n // P0-02: save focus target before moving focus into dialog\n this._previousFocus = document.activeElement as HTMLElement | null;\n this.dispatchEvent(new CustomEvent('hx-show', { bubbles: true, composed: true }));\n this._visible = true;\n this.open = true;\n this._setAnchorAriaExpanded(true);\n // P1-03: add Escape listener synchronously before any await so it is registered\n // by the time the test fires an Escape keydown after a single await el.updateComplete.\n document.addEventListener('keydown', this._handleDocumentKeydown);\n await this.updateComplete;\n // hx-after-show fires after Lit has rendered the visible state. Dispatching here\n // (before _updatePosition) ensures it fires in the same microtask as the test's\n // await-continuation, so tests can rely on a single await el.updateComplete.\n this.dispatchEvent(new CustomEvent('hx-after-show', { bubbles: true, composed: true }));\n // P0-02: move focus into dialog body\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n if (bodyEl) bodyEl.focus();\n // P0-01: listen for outside clicks; deferred to avoid catching the opening click\n setTimeout(() => {\n document.addEventListener('click', this._handleDocumentClick);\n }, 0);\n await this._updatePosition();\n }\n\n private async _hide(): Promise<void> {\n if (!this._visible) return;\n document.removeEventListener('click', this._handleDocumentClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\n this.dispatchEvent(new CustomEvent('hx-hide', { bubbles: true, composed: true }));\n this._visible = false;\n this.open = false;\n this._setAnchorAriaExpanded(false);\n // P0-02: return focus to the element that was focused before the popover opened\n this._previousFocus?.focus();\n this._previousFocus = null;\n await this.updateComplete;\n this.dispatchEvent(new CustomEvent('hx-after-hide', { bubbles: true, composed: true }));\n }\n\n // ─── Positioning ───\n\n private async _updatePosition(): Promise<void> {\n const anchorSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"anchor\"]',\n ) as HTMLSlotElement | null;\n if (!anchorSlot) return;\n const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n const arrowEl = this.arrow\n ? (this.shadowRoot?.querySelector('[part=\"arrow\"]') as HTMLElement | null)\n : null;\n\n if (!anchorEl || !bodyEl) return;\n\n const middleware = [\n offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n flip(),\n shift({ padding: 8 }),\n ];\n\n if (arrowEl) {\n middleware.push(arrow({ element: arrowEl }));\n }\n\n const { x, y, placement, middlewareData } = await computePosition(anchorEl, bodyEl, {\n placement: this.placement,\n strategy: 'fixed',\n middleware,\n });\n\n Object.assign(bodyEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (arrowEl && middlewareData.arrow) {\n const arrowData = middlewareData.arrow;\n const basePlacement = placement.split('-')[0] ?? 'bottom';\n const staticSide =\n ({ top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as Record<string, string>)[\n basePlacement\n ] ?? 'bottom';\n\n Object.assign(arrowEl.style, {\n left: arrowData.x != null ? `${arrowData.x}px` : '',\n top: arrowData.y != null ? `${arrowData.y}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-5px',\n });\n\n // P2-02: hide the two border sides facing the popover body so only\n // the outward-facing corner is visible (avoids the inner border line).\n // Reset all four sides first, then make the two inner-facing ones transparent.\n const borderSides = ['border-top', 'border-right', 'border-bottom', 'border-left'] as const;\n for (const side of borderSides) {\n arrowEl.style.setProperty(side, '');\n }\n // Maps base placement → the two sides that face inward toward the popover body\n const innerBorderMap: Record<string, readonly [string, string]> = {\n bottom: ['border-bottom', 'border-right'],\n top: ['border-top', 'border-left'],\n right: ['border-top', 'border-right'],\n left: ['border-bottom', 'border-left'],\n };\n const innerSides = innerBorderMap[basePlacement] ?? ['border-bottom', 'border-right'];\n arrowEl.style.setProperty(innerSides[0], '1px solid transparent');\n arrowEl.style.setProperty(innerSides[1], '1px solid transparent');\n }\n }\n\n // ─── Event Handlers ───\n\n // P1-03 / P0-01: document-level handlers active only while popover is open\n /** @internal */\n private _handleDocumentKeydown = (e: Event): void => {\n if ((e as KeyboardEvent).key === 'Escape' && this._visible) {\n void this._hide();\n }\n };\n\n // P0-01: close when click target is outside this component\n /** @internal */\n private _handleDocumentClick = (e: Event): void => {\n // Shadow DOM retargets events from within to the host at document level,\n // so a click on the trigger wrapper appears as e.target === this.\n if (e.target !== this && !this.contains(e.target as Node)) {\n void this._hide();\n }\n };\n\n /** @internal */\n private _handleAnchorClick = (): void => {\n if (this.trigger !== 'click') return;\n if (this._visible) {\n void this._hide();\n } else {\n void this._show();\n }\n };\n\n /** @internal */\n private _handleAnchorMouseEnter = (): void => {\n if (this.trigger !== 'hover') return;\n void this._show();\n };\n\n /** @internal */\n private _handleAnchorMouseLeave = (): void => {\n if (this.trigger !== 'hover') return;\n void this._hide();\n };\n\n /** @internal */\n private _handleAnchorFocusIn = (): void => {\n if (this.trigger !== 'focus') return;\n void this._show();\n };\n\n /** @internal */\n private _handleAnchorFocusOut = (): void => {\n if (this.trigger !== 'focus') return;\n void this._hide();\n };\n\n private _handleAnchorSlotChange(): void {\n this._setAnchorAriaExpanded(this._visible);\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n class=\"trigger-wrapper\"\n @click=${this._handleAnchorClick}\n @mouseenter=${this._handleAnchorMouseEnter}\n @mouseleave=${this._handleAnchorMouseLeave}\n @focusin=${this._handleAnchorFocusIn}\n @focusout=${this._handleAnchorFocusOut}\n >\n <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n </div>\n <div\n part=\"body\"\n id=${this._popoverId}\n role=\"region\"\n aria-label=${this.label}\n aria-hidden=\"${!this._visible ? 'true' : 'false'}\"\n tabindex=\"-1\"\n ?inert=${!this._visible}\n class=${this._visible ? 'visible' : ''}\n >\n <slot></slot>\n ${this.arrow ? html`<div part=\"arrow\"></div>` : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-popover': HelixPopover;\n }\n}\n"],"names":["helixPopoverStyles","css","_popoverCounter","HelixPopover","LitElement","changedProperties","value","anchorSlot","_a","anchorEl","bodyEl","_b","arrowEl","_c","middleware","offset","flip","shift","arrow","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-select-BBae2LqN.js","sources":["../../src/components/hx-select/hx-select.styles.ts","../../src/components/hx-select/hx-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSelectStyles = 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 Container ─── */\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));\n position: relative;\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-select-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-select-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Select Wrapper ─── */\n\n .field__select-wrapper {\n position: relative;\n display: block;\n }\n\n /* ─── Trigger Button ─── */\n\n .field__trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--hx-space-2, 0.5rem);\n width: 100%;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n cursor: pointer;\n text-align: left;\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n outline: none;\n }\n\n /* Fallback focus ring for environments where :focus-visible is unavailable */\n .field__trigger:focus {\n border-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n }\n\n /* Enhanced focus ring with opacity via color-mix when :focus-visible is available */\n .field__trigger:focus-visible {\n border-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n }\n\n @supports (color: color-mix(in srgb, red 50%, blue)) {\n .field__trigger:focus-visible {\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-select-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\n .field__trigger[aria-disabled='true'] {\n cursor: not-allowed;\n }\n\n /* ─── Trigger size variants ─── */\n\n .field__trigger--sm {\n min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));\n font-size: var(--hx-font-size-sm, 0.875rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n }\n\n .field__trigger--md {\n min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\n font-size: var(--hx-font-size-md, 1rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n }\n\n .field__trigger--lg {\n min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));\n font-size: var(--hx-font-size-lg, 1.125rem);\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n }\n\n /* ─── Trigger value ─── */\n\n .field__trigger-value {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .field__trigger--placeholder .field__trigger-value {\n color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));\n }\n\n /* ─── Chevron (CSS-drawn) ─── */\n\n .field__chevron {\n flex-shrink: 0;\n width: 12px;\n height: 8px;\n position: relative;\n color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));\n pointer-events: none;\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n .field__chevron::after {\n content: '';\n position: absolute;\n top: 0;\n left: 2px;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid currentColor;\n border-bottom: 1.5px solid currentColor;\n transform: rotate(45deg);\n }\n\n .field--open .field__chevron {\n transform: rotate(180deg);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .field__chevron {\n transition: none;\n }\n }\n\n /* ─── Error State (trigger) ─── */\n\n .field--error .field__trigger {\n border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n .field--error .field__trigger:focus {\n border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n .field--error .field__trigger:focus-visible {\n border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n @supports (color: color-mix(in srgb, red 50%, blue)) {\n .field--error .field__trigger:focus-visible {\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-select-error-color, var(--hx-color-error-500, #dc3545))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n }\n\n /* ─── Listbox Panel ─── */\n\n .field__listbox {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n left: 0;\n right: 0;\n z-index: var(--hx-z-index-dropdown, 100);\n background-color: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-select-listbox-shadow,\n 0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))\n );\n max-height: var(--hx-select-listbox-max-height, 16rem);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .field__listbox[hidden] {\n display: none;\n }\n\n /* ─── Options Container ─── */\n\n .field__options {\n overflow-y: auto;\n flex: 1;\n padding: var(--hx-space-1, 0.25rem) 0;\n }\n\n /* ─── Individual Options ─── */\n\n .field__option {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n .field__option:hover {\n background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n }\n\n .field__option--selected {\n background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));\n font-weight: var(--hx-font-weight-medium, 500);\n }\n\n .field__option--focused {\n background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n outline: 2px solid var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: -2px;\n }\n\n .field__option--focused.field__option--selected {\n background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));\n }\n\n .field__option--disabled {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .field__option-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n /* ─── No Options State ─── */\n\n .field__no-options {\n padding: var(--hx-space-3, 0.75rem);\n text-align: center;\n color: var(--hx-color-neutral-400, #adb5bd);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n /* ─── Hidden native select (form participation + test compat) ─── */\n\n .field__select {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n clip: rect(0, 0, 0, 0);\n }\n\n /* ─── Size Variants (mirrored on native select for test compat) ─── */\n\n .field__select--sm {\n min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .field__select--md {\n min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\n font-size: var(--hx-font-size-md, 1rem);\n }\n\n .field__select--lg {\n min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));\n font-size: var(--hx-font-size-lg, 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-select-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .field__trigger,\n .field__option {\n transition: none;\n }\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 { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSelectStyles } from './hx-select.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxSelectIdCounter = 0;\n\n// ─── Internal option model ───\n\ninterface SelectOption {\n value: string;\n label: string;\n disabled: boolean;\n}\n\n/**\n * A form-associated select component with custom styling, label, error, and\n * help text. Options are provided via slotted `<option>` (and `<optgroup>`)\n * elements in the light DOM. The component wraps a hidden native `<select>`\n * for form participation and provides a combobox trigger for consistent\n * cross-browser styling.\n *\n * @remarks Multi-select is intentionally not supported. This component\n * implements a single-value select (combobox) pattern only. For multi-value\n * selection use a separate multi-select component.\n *\n * @remarks The listbox panel uses `position: absolute` and may be clipped by\n * ancestor elements with `overflow: hidden` or `overflow: auto`. This is a\n * known limitation when embedding the component inside cards, tables, or\n * dialogs. Use the CSS custom property `--hx-select-listbox-shadow` or\n * restructure the containing layout to avoid clipping.\n *\n * @summary Form-associated custom select with label, error, and help text.\n *\n * @tag hx-select\n *\n * @slot - Default slot for `<option>` and `<optgroup>` elements.\n * @slot label - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the selected option changes.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart select-wrapper - The wrapper containing the trigger and listbox.\n * @csspart select - The hidden native select element (kept for form participation).\n * @csspart trigger - The button that opens/closes the dropdown.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart option - Individual option items in the listbox.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-select-bg=var(--hx-color-neutral-0)] - Select background color.\n * @cssprop [--hx-select-color=var(--hx-color-neutral-800)] - Select text color.\n * @cssprop [--hx-select-border-color=var(--hx-color-neutral-300)] - Select border color.\n * @cssprop [--hx-select-border-radius=var(--hx-border-radius-md)] - Select border radius.\n * @cssprop [--hx-select-font-family=var(--hx-font-family-sans)] - Select font family.\n * @cssprop [--hx-select-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-select-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-select-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-select-chevron-color=var(--hx-color-neutral-500)] - Chevron indicator color.\n * @cssprop [--hx-select-listbox-bg=var(--hx-color-neutral-0)] - Listbox panel background color.\n * @cssprop [--hx-select-option-hover-bg=var(--hx-color-primary-50)] - Option hover background color.\n * @cssprop [--hx-select-option-selected-bg=var(--hx-color-primary-100)] - Selected option background color.\n * @cssprop [--hx-select-placeholder-color=var(--hx-color-neutral-400)] - Placeholder text color.\n */\n@customElement('hx-select')\nexport class HelixSelect extends LitElement {\n static override styles = [tokenStyles, helixSelectStyles];\n\n // ─── Form Association ───\n\n /** Marks this element as form-associated for ElementInternals support. @internal */\n static formAssociated = true;\n\n /** Holds the ElementInternals instance used for form value and validity management. @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Stable IDs ───\n\n private _selectId = `hx-select-${++_hxSelectIdCounter}`;\n private _listboxId = `${this._selectId}-listbox`;\n private _labelId = `${this._selectId}-label`;\n private _helpTextId = `${this._selectId}-help`;\n private _errorId = `${this._selectId}-error`;\n\n // ─── Public Properties ───\n\n /**\n * The visible label text for the select.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Placeholder text shown in the trigger when no option is selected.\n * @attr placeholder\n */\n @property({ type: String })\n placeholder = '';\n\n /**\n * The current value of the select.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '';\n\n /**\n * Whether the select is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the select is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The name used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\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 * Help text displayed below the select for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Size variant of the select trigger.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\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 * Controls whether the dropdown listbox is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n // ─── Internal State ───\n\n /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n @state() private _options: SelectOption[] = [];\n /** Whether the named error slot contains projected content. @internal */\n @state() private _hasErrorSlot = false;\n /** Zero-based index of the keyboard-focused option in the listbox; -1 means none. @internal */\n @state() private _focusedOptionIndex = -1;\n\n // ─── Queries ───\n\n /** Reference to the hidden native select element used for form participation. @internal */\n @query('.field__select')\n private _select: HTMLSelectElement | undefined;\n\n /** Reference to the visible combobox trigger element that receives keyboard focus. @internal */\n @query('.field__trigger')\n private _trigger: HTMLElement | undefined;\n\n // ─── Computed helpers ───\n\n private get _displayValue(): string {\n if (!this.value) return '';\n const opt = this._options.find((o) => o.value === this.value);\n return opt ? opt.label : this.value;\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 updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has('value')) {\n this._syncNativeSelect();\n this._updateFormValue();\n this._updateValidity();\n }\n if (changedProperties.has('size')) {\n const validSizes: string[] = ['sm', 'md', 'lg'];\n if (!validSizes.includes(this.size)) {\n devWarn(\n 'hx-select',\n `Invalid size \"${this.size}\". Expected one of: ${validSizes.join(', ')}.`,\n );\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 select 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 _updateFormValue(): void {\n this._internals.setFormValue(this.value || null);\n }\n\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'Please select an option.',\n this._trigger ?? this._select,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** Called by the browser when the owning form resets. */\n formResetCallback(): void {\n this.value = '';\n this._internals.setFormValue(null);\n }\n\n /** Called when the browser restores form state (e.g., bfcache navigation). */\n formStateRestoreCallback(\n state: string | File | FormData,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Native Select Sync ───\n\n private _syncNativeSelect(): void {\n if (!this._select) return;\n if (this.value) {\n this._select.value = this.value;\n }\n }\n\n // ─── Option Syncing from Slot ───\n\n private _parseOption(el: HTMLOptionElement): SelectOption {\n return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n }\n\n /**\n * Single-pass slot handler: reads options into _options for the custom\n * listbox AND clones them into the native <select> for form participation.\n * Handles both top-level <option> and <optgroup> children.\n */\n private _handleSlotChange(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const parsed: SelectOption[] = [];\n\n // Remove previously cloned options from native select\n if (this._select) {\n this._select.querySelectorAll('option[data-cloned]').forEach((opt) => opt.remove());\n }\n\n const cloneIntoSelect = (optEl: HTMLOptionElement): void => {\n if (!this._select) return;\n const clone = optEl.cloneNode(true) as HTMLOptionElement;\n clone.setAttribute('data-cloned', '');\n this._select.appendChild(clone);\n };\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (el instanceof HTMLOptionElement) {\n parsed.push(this._parseOption(el));\n cloneIntoSelect(el);\n } else if (el instanceof HTMLOptGroupElement) {\n for (const child of Array.from(el.children)) {\n if (child instanceof HTMLOptionElement) {\n parsed.push(this._parseOption(child));\n cloneIntoSelect(child);\n }\n }\n }\n }\n\n this._options = parsed;\n\n if (this._select) {\n if (this.value) {\n this._select.value = this.value;\n } else if (!this.placeholder && parsed.length > 0) {\n this.value = this._select.value;\n this._updateFormValue();\n }\n }\n }\n\n // ─── Slot Change Handlers ───\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 // ─── Dropdown Control ───\n\n private _toggleDropdown(): void {\n if (!this.disabled) {\n this.open = !this.open;\n if (this.open) {\n // Pre-focus the currently selected option (or first enabled) when opening\n const selectedIndex = this._options.findIndex((o) => o.value === this.value);\n this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n } else {\n this._focusedOptionIndex = -1;\n }\n }\n }\n\n // ─── Keyboard Navigation ───\n\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.disabled) return;\n\n const enabledIndices = this._options\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled)\n .map(({ i }) => i);\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n break;\n }\n const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n this._focusedOptionIndex =\n nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n const lastEnabled = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n break;\n }\n const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex =\n prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n break;\n }\n case 'Home': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n }\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n break;\n }\n case 'End': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n }\n const lastEnabled = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n break;\n }\n case 'Enter':\n case ' ': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n const selIdx = this._options.findIndex((o) => o.value === this.value);\n this._focusedOptionIndex = selIdx >= 0 ? selIdx : (enabledIndices[0] ?? 0);\n break;\n }\n if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {\n const opt = this._options[this._focusedOptionIndex];\n if (opt) this._selectOption(opt);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n this.open = false;\n this._focusedOptionIndex = -1;\n this._trigger?.focus();\n break;\n }\n case 'Tab': {\n // Close the dropdown but allow Tab to move focus naturally\n if (this.open) {\n this.open = false;\n this._focusedOptionIndex = -1;\n }\n break;\n }\n default: {\n // Typeahead: single printable character jumps to first matching option\n if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {\n const char = e.key.toLowerCase();\n const startIndex = this.open ? this._focusedOptionIndex + 1 : 0;\n const matching = this._options\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled && o.label.toLowerCase().startsWith(char));\n const afterCurrent = matching.find(({ i }) => i >= startIndex);\n const target = afterCurrent ?? matching[0];\n if (target) {\n if (!this.open) {\n this.open = true;\n }\n this._focusedOptionIndex = target.i;\n e.preventDefault();\n }\n }\n break;\n }\n }\n }\n\n // ─── Selection ───\n\n private _selectOption(option: SelectOption): void {\n if (option.disabled) return;\n this.value = option.value; // triggers updated() → sync + formValue + validity\n this._dispatchChange();\n this.open = false;\n this._focusedOptionIndex = -1;\n }\n\n // ─── Event Dispatchers ───\n\n private _dispatchChange(): void {\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n private _handleNativeChange(e: Event): void {\n this.value = (e.target as HTMLSelectElement).value; // triggers updated()\n this._dispatchChange();\n }\n\n // ─── Outside Click Handler ───\n\n private _handleOutsideClick = (e: MouseEvent): void => {\n if (this.open && !e.composedPath().includes(this)) {\n this.open = false;\n }\n };\n\n // ─── Public Methods ───\n\n /** Moves focus to the visible trigger button. */\n override focus(options?: FocusOptions): void {\n this._trigger?.focus(options);\n }\n\n // ─── Render Helpers ───\n\n private _optionId(index: number): string {\n return `hx-select-option-${this._selectId}-${index}`;\n }\n\n private _renderOptions() {\n if (this._options.length === 0) {\n return html`<div class=\"field__no-options\">No options found</div>`;\n }\n\n return this._options.map((opt, index) => {\n const isSelected = opt.value === this.value;\n const isFocused = index === this._focusedOptionIndex;\n\n return html`\n <div\n id=${this._optionId(index)}\n part=\"option\"\n role=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--focused': isFocused,\n 'field__option--disabled': opt.disabled,\n })}\n aria-selected=${isSelected ? 'true' : 'false'}\n aria-disabled=${opt.disabled ? 'true' : nothing}\n @click=${() => this._selectOption(opt)}\n >\n <span class=\"field__option-label\">${opt.label}</span>\n </div>\n `;\n });\n }\n\n // ─── Main Render ───\n\n override render() {\n const hasError = !!this.error;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--open': this.open,\n };\n\n const triggerClasses = {\n field__trigger: true,\n [`field__trigger--${this.size}`]: true,\n 'field__trigger--placeholder': !this.value,\n };\n\n const selectClasses = {\n field__select: true,\n [`field__select--${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError || this._hasErrorSlot ? this._errorId : null,\n this.helpText ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <slot name=\"label\">\n ${this.label\n ? html`<label\n part=\"label\"\n class=\"field__label\"\n id=${this._labelId}\n for=${this._selectId}\n >\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>`\n : nothing}\n </slot>\n\n <!-- Select Wrapper: trigger + listbox -->\n <div part=\"select-wrapper\" class=\"field__select-wrapper\">\n <!-- Custom Trigger (combobox — div to avoid native role conflicts per APG) -->\n <div\n part=\"trigger\"\n id=${this._selectId}\n class=${classMap(triggerClasses)}\n role=\"combobox\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-controls=${this._listboxId}\n aria-activedescendant=${this.open && this._focusedOptionIndex >= 0\n ? this._optionId(this._focusedOptionIndex)\n : nothing}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n @click=${this._toggleDropdown}\n @keydown=${this._handleKeydown}\n >\n <span class=\"field__trigger-value\"\n >${this._displayValue || this.placeholder || nothing}</span\n >\n <span class=\"field__chevron\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Custom Listbox Panel -->\n <div\n part=\"listbox\"\n role=\"listbox\"\n id=${this._listboxId}\n class=\"field__listbox\"\n aria-label=${ifDefined(this.label || this.ariaLabel || undefined)}\n ?hidden=${!this.open}\n >\n <div class=\"field__options\">${this._renderOptions()}</div>\n </div>\n\n <!-- Hidden native select (form participation + test compat) -->\n <select\n part=\"select\"\n class=${classMap(selectClasses)}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n name=${ifDefined(this.name || undefined)}\n aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n @change=${this._handleNativeChange}\n >\n ${this.placeholder\n ? html`<option value=\"\" disabled selected>${this.placeholder}</option>`\n : nothing}\n </select>\n </div>\n\n <!-- Hidden slot (options are read from here) -->\n <slot @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n <!-- Error -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n <!-- Help Text -->\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-select': HelixSelect;\n }\n}\n\nexport type { HelixSelect as HxSelect };\n/** @deprecated Use HxSelect instead */\nexport type { HelixSelect as WcSelect };\n"],"names":["helixSelectStyles","css","_hxSelectIdCounter","HelixSelect","LitElement","opt","o","changedProperties","validSizes","devWarn","state","_mode","disabled","el","_a","slot","parsed","cloneIntoSelect","optEl","clone","child","selectedIndex","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","selIdx","char","startIndex","matching","target","option","options","index","html","isSelected","isFocused","classMap","nothing","hasError","fieldClasses","triggerClasses","selectClasses","describedBy","ifDefined","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;A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"}