@helixui/library 3.6.0 → 3.8.0-next.145

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 (413) hide show
  1. package/README.md +41 -0
  2. package/aaa-verdicts.json +2036 -0
  3. package/custom-elements.json +3045 -1254
  4. package/dist/components/hx-accordion/hx-accordion-item.d.ts.map +1 -1
  5. package/dist/components/hx-accordion/hx-accordion-item.styles.d.ts.map +1 -1
  6. package/dist/components/hx-accordion/index.js +1 -1
  7. package/dist/components/hx-action-bar/hx-action-bar.d.ts +18 -0
  8. package/dist/components/hx-action-bar/hx-action-bar.d.ts.map +1 -1
  9. package/dist/components/hx-action-bar/hx-action-bar.styles.d.ts.map +1 -1
  10. package/dist/components/hx-action-bar/index.js +1 -1
  11. package/dist/components/hx-alert/hx-alert.d.ts +18 -8
  12. package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
  13. package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
  14. package/dist/components/hx-alert/index.js +1 -1
  15. package/dist/components/hx-avatar/hx-avatar.d.ts +4 -1
  16. package/dist/components/hx-avatar/hx-avatar.d.ts.map +1 -1
  17. package/dist/components/hx-avatar/hx-avatar.styles.d.ts.map +1 -1
  18. package/dist/components/hx-avatar/index.js +1 -1
  19. package/dist/components/hx-badge/hx-badge.d.ts.map +1 -1
  20. package/dist/components/hx-badge/hx-badge.styles.d.ts.map +1 -1
  21. package/dist/components/hx-badge/index.js +1 -1
  22. package/dist/components/hx-banner/hx-banner.d.ts +19 -8
  23. package/dist/components/hx-banner/hx-banner.d.ts.map +1 -1
  24. package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
  25. package/dist/components/hx-banner/index.js +1 -1
  26. package/dist/components/hx-breadcrumb/hx-breadcrumb-item.d.ts.map +1 -1
  27. package/dist/components/hx-breadcrumb/hx-breadcrumb-item.styles.d.ts.map +1 -1
  28. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts +18 -0
  29. package/dist/components/hx-breadcrumb/hx-breadcrumb.d.ts.map +1 -1
  30. package/dist/components/hx-breadcrumb/index.js +1 -1
  31. package/dist/components/hx-button/hx-button.d.ts +18 -0
  32. package/dist/components/hx-button/hx-button.d.ts.map +1 -1
  33. package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
  34. package/dist/components/hx-button/index.js +1 -1
  35. package/dist/components/hx-button-group/hx-button-group.d.ts +47 -0
  36. package/dist/components/hx-button-group/hx-button-group.d.ts.map +1 -1
  37. package/dist/components/hx-button-group/index.js +1 -1
  38. package/dist/components/hx-carousel/hx-carousel.d.ts.map +1 -1
  39. package/dist/components/hx-carousel/hx-carousel.styles.d.ts.map +1 -1
  40. package/dist/components/hx-carousel/index.js +1 -1
  41. package/dist/components/hx-checkbox/hx-checkbox.d.ts +18 -0
  42. package/dist/components/hx-checkbox/hx-checkbox.d.ts.map +1 -1
  43. package/dist/components/hx-checkbox/hx-checkbox.styles.d.ts.map +1 -1
  44. package/dist/components/hx-checkbox/index.js +1 -1
  45. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts +36 -0
  46. package/dist/components/hx-checkbox-group/hx-checkbox-group.d.ts.map +1 -1
  47. package/dist/components/hx-checkbox-group/hx-checkbox-group.styles.d.ts.map +1 -1
  48. package/dist/components/hx-checkbox-group/index.js +1 -1
  49. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +26 -9
  50. package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
  51. package/dist/components/hx-clinical-status/hx-clinical-status.styles.d.ts.map +1 -1
  52. package/dist/components/hx-clinical-status/index.js +1 -1
  53. package/dist/components/hx-color-picker/hx-color-picker.d.ts +18 -0
  54. package/dist/components/hx-color-picker/hx-color-picker.d.ts.map +1 -1
  55. package/dist/components/hx-color-picker/hx-color-picker.styles.d.ts.map +1 -1
  56. package/dist/components/hx-color-picker/index.js +1 -1
  57. package/dist/components/hx-combobox/hx-combobox.d.ts +18 -0
  58. package/dist/components/hx-combobox/hx-combobox.d.ts.map +1 -1
  59. package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
  60. package/dist/components/hx-combobox/index.js +1 -1
  61. package/dist/components/hx-copy-button/hx-copy-button.d.ts +18 -0
  62. package/dist/components/hx-copy-button/hx-copy-button.d.ts.map +1 -1
  63. package/dist/components/hx-copy-button/hx-copy-button.styles.d.ts.map +1 -1
  64. package/dist/components/hx-copy-button/index.js +1 -1
  65. package/dist/components/hx-date-picker/hx-date-picker.d.ts +18 -0
  66. package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
  67. package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
  68. package/dist/components/hx-date-picker/index.js +1 -1
  69. package/dist/components/hx-dialog/hx-dialog.d.ts +18 -0
  70. package/dist/components/hx-dialog/hx-dialog.d.ts.map +1 -1
  71. package/dist/components/hx-drawer/hx-drawer.d.ts +18 -0
  72. package/dist/components/hx-drawer/hx-drawer.d.ts.map +1 -1
  73. package/dist/components/hx-drawer/hx-drawer.styles.d.ts.map +1 -1
  74. package/dist/components/hx-drawer/index.js +1 -1
  75. package/dist/components/hx-dropdown/hx-dropdown.d.ts +18 -0
  76. package/dist/components/hx-dropdown/hx-dropdown.d.ts.map +1 -1
  77. package/dist/components/hx-dropdown/hx-dropdown.styles.d.ts.map +1 -1
  78. package/dist/components/hx-dropdown/index.js +1 -1
  79. package/dist/components/hx-field/hx-field.d.ts +17 -0
  80. package/dist/components/hx-field/hx-field.d.ts.map +1 -1
  81. package/dist/components/hx-field-label/hx-field-label.d.ts +17 -0
  82. package/dist/components/hx-field-label/hx-field-label.d.ts.map +1 -1
  83. package/dist/components/hx-file-upload/hx-file-upload.d.ts +46 -0
  84. package/dist/components/hx-file-upload/hx-file-upload.d.ts.map +1 -1
  85. package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
  86. package/dist/components/hx-file-upload/index.js +1 -1
  87. package/dist/components/hx-form/hx-form.d.ts +19 -0
  88. package/dist/components/hx-form/hx-form.d.ts.map +1 -1
  89. package/dist/components/hx-help-text/hx-help-text.d.ts +17 -0
  90. package/dist/components/hx-help-text/hx-help-text.d.ts.map +1 -1
  91. package/dist/components/hx-help-text/hx-help-text.styles.d.ts.map +1 -1
  92. package/dist/components/hx-help-text/index.js +1 -1
  93. package/dist/components/hx-icon/hx-icon.d.ts +108 -12
  94. package/dist/components/hx-icon/hx-icon.d.ts.map +1 -1
  95. package/dist/components/hx-icon/hx-icon.styles.d.ts.map +1 -1
  96. package/dist/components/hx-icon/index.js +1 -1
  97. package/dist/components/hx-icon-button/hx-icon-button.d.ts +18 -0
  98. package/dist/components/hx-icon-button/hx-icon-button.d.ts.map +1 -1
  99. package/dist/components/hx-icon-button/hx-icon-button.styles.d.ts.map +1 -1
  100. package/dist/components/hx-icon-button/index.js +1 -1
  101. package/dist/components/hx-link/hx-link.d.ts.map +1 -1
  102. package/dist/components/hx-link/hx-link.styles.d.ts.map +1 -1
  103. package/dist/components/hx-link/index.js +1 -1
  104. package/dist/components/hx-menu/hx-menu-item.d.ts.map +1 -1
  105. package/dist/components/hx-menu/hx-menu-item.styles.d.ts.map +1 -1
  106. package/dist/components/hx-menu/hx-menu.d.ts +18 -0
  107. package/dist/components/hx-menu/hx-menu.d.ts.map +1 -1
  108. package/dist/components/hx-menu/index.js +1 -1
  109. package/dist/components/hx-nav/hx-nav.d.ts +18 -0
  110. package/dist/components/hx-nav/hx-nav.d.ts.map +1 -1
  111. package/dist/components/hx-nav/hx-nav.styles.d.ts.map +1 -1
  112. package/dist/components/hx-nav/index.js +1 -1
  113. package/dist/components/hx-number-input/hx-number-input.d.ts +18 -0
  114. package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
  115. package/dist/components/hx-number-input/hx-number-input.styles.d.ts.map +1 -1
  116. package/dist/components/hx-number-input/index.js +1 -1
  117. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts +23 -1
  118. package/dist/components/hx-overflow-menu/hx-overflow-menu.d.ts.map +1 -1
  119. package/dist/components/hx-overflow-menu/hx-overflow-menu.styles.d.ts.map +1 -1
  120. package/dist/components/hx-overflow-menu/index.js +1 -1
  121. package/dist/components/hx-pagination/hx-pagination.styles.d.ts.map +1 -1
  122. package/dist/components/hx-pagination/index.js +1 -1
  123. package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
  124. package/dist/components/hx-phi-field/hx-phi-field.styles.d.ts.map +1 -1
  125. package/dist/components/hx-phi-field/index.js +1 -1
  126. package/dist/components/hx-popover/hx-popover.d.ts +18 -0
  127. package/dist/components/hx-popover/hx-popover.d.ts.map +1 -1
  128. package/dist/components/hx-popover/hx-popover.styles.d.ts.map +1 -1
  129. package/dist/components/hx-popover/index.js +1 -1
  130. package/dist/components/hx-popup/hx-popup.d.ts +18 -0
  131. package/dist/components/hx-popup/hx-popup.d.ts.map +1 -1
  132. package/dist/components/hx-popup/hx-popup.styles.d.ts.map +1 -1
  133. package/dist/components/hx-popup/index.js +1 -1
  134. package/dist/components/hx-radio-group/hx-radio-group.d.ts +18 -0
  135. package/dist/components/hx-radio-group/hx-radio-group.d.ts.map +1 -1
  136. package/dist/components/hx-radio-group/hx-radio-group.styles.d.ts.map +1 -1
  137. package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
  138. package/dist/components/hx-radio-group/index.js +1 -1
  139. package/dist/components/hx-rating/hx-rating.d.ts +19 -0
  140. package/dist/components/hx-rating/hx-rating.d.ts.map +1 -1
  141. package/dist/components/hx-rating/hx-rating.styles.d.ts.map +1 -1
  142. package/dist/components/hx-rating/index.js +1 -1
  143. package/dist/components/hx-select/hx-select.d.ts +18 -0
  144. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  145. package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
  146. package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
  147. package/dist/components/hx-side-nav/hx-side-nav.d.ts +18 -0
  148. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  149. package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
  150. package/dist/components/hx-side-nav/index.js +1 -1
  151. package/dist/components/hx-slider/hx-slider.d.ts +47 -0
  152. package/dist/components/hx-slider/hx-slider.d.ts.map +1 -1
  153. package/dist/components/hx-slider/index.js +1 -1
  154. package/dist/components/hx-split-button/hx-split-button.d.ts +18 -0
  155. package/dist/components/hx-split-button/hx-split-button.d.ts.map +1 -1
  156. package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
  157. package/dist/components/hx-split-button/index.js +1 -1
  158. package/dist/components/hx-stat/hx-stat.d.ts.map +1 -1
  159. package/dist/components/hx-stat/hx-stat.styles.d.ts.map +1 -1
  160. package/dist/components/hx-stat/index.js +1 -1
  161. package/dist/components/hx-steps/hx-step.d.ts.map +1 -1
  162. package/dist/components/hx-steps/hx-step.styles.d.ts.map +1 -1
  163. package/dist/components/hx-steps/index.js +1 -1
  164. package/dist/components/hx-switch/hx-switch.d.ts +18 -0
  165. package/dist/components/hx-switch/hx-switch.d.ts.map +1 -1
  166. package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
  167. package/dist/components/hx-switch/index.js +1 -1
  168. package/dist/components/hx-tabs/hx-tab.styles.d.ts.map +1 -1
  169. package/dist/components/hx-tabs/hx-tabs.d.ts +18 -0
  170. package/dist/components/hx-tabs/hx-tabs.d.ts.map +1 -1
  171. package/dist/components/hx-tabs/index.js +1 -1
  172. package/dist/components/hx-tag/hx-tag.d.ts.map +1 -1
  173. package/dist/components/hx-tag/hx-tag.styles.d.ts.map +1 -1
  174. package/dist/components/hx-tag/index.js +1 -1
  175. package/dist/components/hx-text-input/hx-text-input.d.ts +18 -0
  176. package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
  177. package/dist/components/hx-text-input/hx-text-input.styles.d.ts.map +1 -1
  178. package/dist/components/hx-text-input/index.js +1 -1
  179. package/dist/components/hx-textarea/hx-textarea.d.ts +18 -0
  180. package/dist/components/hx-textarea/hx-textarea.d.ts.map +1 -1
  181. package/dist/components/hx-time-picker/hx-time-picker.d.ts +18 -0
  182. package/dist/components/hx-time-picker/hx-time-picker.d.ts.map +1 -1
  183. package/dist/components/hx-time-picker/hx-time-picker.styles.d.ts.map +1 -1
  184. package/dist/components/hx-time-picker/index.js +1 -1
  185. package/dist/components/hx-toast/hx-toast.d.ts +19 -8
  186. package/dist/components/hx-toast/hx-toast.d.ts.map +1 -1
  187. package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
  188. package/dist/components/hx-toast/index.js +1 -1
  189. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts +18 -0
  190. package/dist/components/hx-toggle-button/hx-toggle-button.d.ts.map +1 -1
  191. package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
  192. package/dist/components/hx-toggle-button/index.js +1 -1
  193. package/dist/components/hx-tooltip/hx-tooltip.d.ts +18 -0
  194. package/dist/components/hx-tooltip/hx-tooltip.d.ts.map +1 -1
  195. package/dist/components/hx-tooltip/hx-tooltip.styles.d.ts.map +1 -1
  196. package/dist/components/hx-tooltip/index.js +1 -1
  197. package/dist/components/hx-top-nav/hx-top-nav.d.ts +18 -0
  198. package/dist/components/hx-top-nav/hx-top-nav.d.ts.map +1 -1
  199. package/dist/components/hx-top-nav/hx-top-nav.styles.d.ts.map +1 -1
  200. package/dist/components/hx-top-nav/index.js +1 -1
  201. package/dist/components/hx-tree-view/hx-tree-item.d.ts.map +1 -1
  202. package/dist/components/hx-tree-view/hx-tree-item.styles.d.ts.map +1 -1
  203. package/dist/components/hx-tree-view/index.js +1 -1
  204. package/dist/css/helix-all.css +414 -118
  205. package/dist/css/helix-core.css +43 -19
  206. package/dist/css/helix-feedback.css +15 -18
  207. package/dist/css/helix-forms.css +172 -44
  208. package/dist/css/helix-media.css +6 -3
  209. package/dist/css/helix-navigation.css +65 -12
  210. package/dist/css/helix-overlay.css +63 -0
  211. package/dist/css/helix-tokens.css +18 -15
  212. package/dist/css/helix-utility.css +44 -12
  213. package/dist/css/hx-action-bar.css +12 -0
  214. package/dist/css/hx-alert.css +4 -8
  215. package/dist/css/hx-avatar.css +1 -2
  216. package/dist/css/hx-badge.css +10 -5
  217. package/dist/css/hx-banner.css +4 -8
  218. package/dist/css/hx-button.css +15 -5
  219. package/dist/css/hx-carousel.css +6 -3
  220. package/dist/css/hx-checkbox-group.css +11 -0
  221. package/dist/css/hx-checkbox.css +24 -13
  222. package/dist/css/hx-clinical-status.css +4 -7
  223. package/dist/css/hx-color-picker.css +14 -1
  224. package/dist/css/hx-combobox.css +8 -0
  225. package/dist/css/hx-copy-button.css +5 -2
  226. package/dist/css/hx-date-picker.css +16 -3
  227. package/dist/css/hx-drawer.css +5 -0
  228. package/dist/css/hx-dropdown.css +18 -0
  229. package/dist/css/hx-file-upload.css +4 -0
  230. package/dist/css/hx-help-text.css +5 -0
  231. package/dist/css/hx-icon-button.css +4 -5
  232. package/dist/css/hx-icon.css +7 -0
  233. package/dist/css/hx-link.css +1 -2
  234. package/dist/css/hx-nav.css +31 -2
  235. package/dist/css/hx-number-input.css +10 -11
  236. package/dist/css/hx-overflow-menu.css +5 -0
  237. package/dist/css/hx-pagination.css +6 -3
  238. package/dist/css/hx-phi-field.css +2 -3
  239. package/dist/css/hx-popover.css +13 -0
  240. package/dist/css/hx-popup.css +14 -0
  241. package/dist/css/hx-radio-group.css +10 -0
  242. package/dist/css/hx-rating.css +6 -0
  243. package/dist/css/hx-side-nav.css +10 -5
  244. package/dist/css/hx-split-button.css +27 -10
  245. package/dist/css/hx-stat.css +1 -2
  246. package/dist/css/hx-switch.css +19 -1
  247. package/dist/css/hx-tag.css +5 -0
  248. package/dist/css/hx-text-input.css +4 -1
  249. package/dist/css/hx-time-picker.css +12 -2
  250. package/dist/css/hx-toast.css +6 -0
  251. package/dist/css/hx-toggle-button.css +29 -12
  252. package/dist/css/hx-tooltip.css +13 -0
  253. package/dist/css/hx-top-nav.css +13 -2
  254. package/dist/css/index.css +1 -1
  255. package/dist/css/manifest.json +60 -20
  256. package/dist/index.js +49 -49
  257. package/dist/shared/{hx-accordion-ZVzgDzTG.js → hx-accordion-DR--Ev4t.js} +48 -54
  258. package/dist/shared/hx-accordion-DR--Ev4t.js.map +1 -0
  259. package/dist/shared/{hx-action-bar-CitgcpGv.js → hx-action-bar-BlEG4aZv.js} +41 -29
  260. package/dist/shared/hx-action-bar-BlEG4aZv.js.map +1 -0
  261. package/dist/shared/{hx-alert-Bto8-TIi.js → hx-alert-C0axS32J.js} +40 -79
  262. package/dist/shared/hx-alert-C0axS32J.js.map +1 -0
  263. package/dist/shared/{hx-avatar-C9hOmlAb.js → hx-avatar-ChAYWnK8.js} +22 -24
  264. package/dist/shared/hx-avatar-ChAYWnK8.js.map +1 -0
  265. package/dist/shared/{hx-badge-JlFtAdxS.js → hx-badge-vX-1cuLA.js} +25 -20
  266. package/dist/shared/hx-badge-vX-1cuLA.js.map +1 -0
  267. package/dist/shared/{hx-banner-fpRnciIO.js → hx-banner-PbHwFNSb.js} +51 -90
  268. package/dist/shared/hx-banner-PbHwFNSb.js.map +1 -0
  269. package/dist/shared/{hx-breadcrumb-item-3tKppF9h.js → hx-breadcrumb-item-D8xYqe3s.js} +56 -43
  270. package/dist/shared/hx-breadcrumb-item-D8xYqe3s.js.map +1 -0
  271. package/dist/shared/{hx-button-BOwAEcF1.js → hx-button-DOZTZnz-.js} +29 -19
  272. package/dist/shared/hx-button-DOZTZnz-.js.map +1 -0
  273. package/dist/shared/hx-button-group-D3QUmSzl.js +248 -0
  274. package/dist/shared/hx-button-group-D3QUmSzl.js.map +1 -0
  275. package/dist/shared/{hx-carousel-item-z1Lc24op.js → hx-carousel-item-BVIKgQ4i.js} +72 -102
  276. package/dist/shared/hx-carousel-item-BVIKgQ4i.js.map +1 -0
  277. package/dist/shared/{hx-checkbox-CYd0YV_u.js → hx-checkbox-DDSXXhps.js} +56 -47
  278. package/dist/shared/hx-checkbox-DDSXXhps.js.map +1 -0
  279. package/dist/shared/{hx-checkbox-group-D5piJLY8.js → hx-checkbox-group-C0q6HDqn.js} +101 -58
  280. package/dist/shared/hx-checkbox-group-C0q6HDqn.js.map +1 -0
  281. package/dist/shared/{hx-clinical-status-D3XQIOqX.js → hx-clinical-status-ZSVEc3Qg.js} +68 -87
  282. package/dist/shared/hx-clinical-status-ZSVEc3Qg.js.map +1 -0
  283. package/dist/shared/{hx-color-picker-DBwJzT5f.js → hx-color-picker-CYjx8i8R.js} +97 -84
  284. package/dist/shared/hx-color-picker-CYjx8i8R.js.map +1 -0
  285. package/dist/shared/{hx-combobox-NgJaLbs2.js → hx-combobox-Be-mqOv4.js} +35 -45
  286. package/dist/shared/hx-combobox-Be-mqOv4.js.map +1 -0
  287. package/dist/shared/{hx-copy-button-sUVuikyH.js → hx-copy-button-DJirFCUL.js} +18 -15
  288. package/dist/shared/hx-copy-button-DJirFCUL.js.map +1 -0
  289. package/dist/shared/{hx-date-picker-B49yo4Vm.js → hx-date-picker-CziP3Hm1.js} +85 -84
  290. package/dist/shared/hx-date-picker-CziP3Hm1.js.map +1 -0
  291. package/dist/shared/hx-dialog-B4weoj_1.js.map +1 -1
  292. package/dist/shared/{hx-drawer-CM_upadk.js → hx-drawer-BlU2oX8-.js} +32 -36
  293. package/dist/shared/hx-drawer-BlU2oX8-.js.map +1 -0
  294. package/dist/shared/{hx-dropdown-D626S2ZG.js → hx-dropdown-DREqpIpm.js} +51 -33
  295. package/dist/shared/hx-dropdown-DREqpIpm.js.map +1 -0
  296. package/dist/shared/hx-field-label-BVRyyKeh.js.map +1 -1
  297. package/dist/shared/hx-field-zw0U1KVi.js.map +1 -1
  298. package/dist/shared/{hx-file-upload-D3rKROK5.js → hx-file-upload-CU5QGZSP.js} +137 -80
  299. package/dist/shared/hx-file-upload-CU5QGZSP.js.map +1 -0
  300. package/dist/shared/hx-form-CkChEATa.js.map +1 -1
  301. package/dist/shared/hx-help-text-CNaZ82LT.js +137 -0
  302. package/dist/shared/hx-help-text-CNaZ82LT.js.map +1 -0
  303. package/dist/shared/{hx-icon-button-a6OpeQz5.js → hx-icon-button-B2BdVdyK.js} +10 -11
  304. package/dist/shared/hx-icon-button-B2BdVdyK.js.map +1 -0
  305. package/dist/shared/hx-icon-bxz9eB9a.js +386 -0
  306. package/dist/shared/hx-icon-bxz9eB9a.js.map +1 -0
  307. package/dist/shared/{hx-link-CMnZRUtQ.js → hx-link-BURSdYLp.js} +19 -26
  308. package/dist/shared/hx-link-BURSdYLp.js.map +1 -0
  309. package/dist/shared/{hx-menu-divider-A6Guuzi_.js → hx-menu-divider-g0grbWV9.js} +19 -31
  310. package/dist/shared/hx-menu-divider-g0grbWV9.js.map +1 -0
  311. package/dist/shared/{hx-nav-ldFM3Fle.js → hx-nav-GTsAZGOx.js} +94 -85
  312. package/dist/shared/hx-nav-GTsAZGOx.js.map +1 -0
  313. package/dist/shared/{hx-nav-item-CODtUlew.js → hx-nav-item-CxE7Mp3M.js} +46 -41
  314. package/dist/shared/hx-nav-item-CxE7Mp3M.js.map +1 -0
  315. package/dist/shared/{hx-number-input-yUzFOSC1.js → hx-number-input-Bvyc9kOi.js} +59 -64
  316. package/dist/shared/hx-number-input-Bvyc9kOi.js.map +1 -0
  317. package/dist/shared/{hx-overflow-menu-DFjJAziP.js → hx-overflow-menu-LrTteeR1.js} +32 -39
  318. package/dist/shared/{hx-overflow-menu-DFjJAziP.js.map → hx-overflow-menu-LrTteeR1.js.map} +1 -1
  319. package/dist/shared/{hx-pagination-C7y8GVyU.js → hx-pagination-D726PyTM.js} +7 -4
  320. package/dist/shared/hx-pagination-D726PyTM.js.map +1 -0
  321. package/dist/shared/{hx-phi-field-C19oxlrr.js → hx-phi-field-sZt_rYIL.js} +46 -66
  322. package/dist/shared/hx-phi-field-sZt_rYIL.js.map +1 -0
  323. package/dist/shared/{hx-popover-BAlAFOH9.js → hx-popover-BjB0nkcq.js} +51 -38
  324. package/dist/shared/hx-popover-BjB0nkcq.js.map +1 -0
  325. package/dist/shared/{hx-popup-COUXXZ9X.js → hx-popup-BiV_2evC.js} +59 -45
  326. package/dist/shared/hx-popup-BiV_2evC.js.map +1 -0
  327. package/dist/shared/{hx-radio-C7eTj5YI.js → hx-radio-BD_c9NJy.js} +52 -39
  328. package/dist/shared/hx-radio-BD_c9NJy.js.map +1 -0
  329. package/dist/shared/{hx-rating-C3QP53k9.js → hx-rating-BGK4AxvI.js} +45 -71
  330. package/dist/shared/hx-rating-BGK4AxvI.js.map +1 -0
  331. package/dist/shared/hx-select-DahFehiZ.js.map +1 -1
  332. package/dist/shared/{hx-slider-Blmv_rwS.js → hx-slider-CkOk5BCY.js} +83 -23
  333. package/dist/shared/hx-slider-CkOk5BCY.js.map +1 -0
  334. package/dist/shared/{hx-split-button-Ddle8iVx.js → hx-split-button-Bg9FHrFK.js} +73 -65
  335. package/dist/shared/hx-split-button-Bg9FHrFK.js.map +1 -0
  336. package/dist/shared/{hx-stat-Gtw_SpK8.js → hx-stat-wKxbyep6.js} +22 -55
  337. package/dist/shared/hx-stat-wKxbyep6.js.map +1 -0
  338. package/dist/shared/{hx-step-R2rjp1fT.js → hx-step-CyGQAuiB.js} +7 -27
  339. package/dist/shared/hx-step-CyGQAuiB.js.map +1 -0
  340. package/dist/shared/{hx-switch-TvKGvZJz.js → hx-switch-BCXuNxEH.js} +42 -24
  341. package/dist/shared/hx-switch-BCXuNxEH.js.map +1 -0
  342. package/dist/shared/{hx-tab-panel-DzsX8BHV.js → hx-tab-panel-BfisavKo.js} +47 -32
  343. package/dist/shared/hx-tab-panel-BfisavKo.js.map +1 -0
  344. package/dist/shared/{hx-tag-C5aCUpVi.js → hx-tag-BqO6HY6V.js} +26 -21
  345. package/dist/shared/hx-tag-BqO6HY6V.js.map +1 -0
  346. package/dist/shared/{hx-text-input-D6FlOZM-.js → hx-text-input-V5sQOpDh.js} +5 -2
  347. package/dist/shared/hx-text-input-V5sQOpDh.js.map +1 -0
  348. package/dist/shared/hx-textarea-CNG590KY.js.map +1 -1
  349. package/dist/shared/{hx-time-picker-Bo7FWzmf.js → hx-time-picker-if5Cl0Ei.js} +42 -43
  350. package/dist/shared/hx-time-picker-if5Cl0Ei.js.map +1 -0
  351. package/dist/shared/{hx-toggle-button-DwBers3A.js → hx-toggle-button-xNVYeA3X.js} +64 -47
  352. package/dist/shared/hx-toggle-button-xNVYeA3X.js.map +1 -0
  353. package/dist/shared/{hx-tooltip-DVqtKPCD.js → hx-tooltip-CamO-9nd.js} +24 -11
  354. package/dist/shared/hx-tooltip-CamO-9nd.js.map +1 -0
  355. package/dist/shared/{hx-top-nav-DP6OFS8C.js → hx-top-nav-vP6oDWMV.js} +42 -44
  356. package/dist/shared/hx-top-nav-vP6oDWMV.js.map +1 -0
  357. package/dist/shared/{hx-tree-item-CXyspGxI.js → hx-tree-item-D8hwKd5m.js} +54 -57
  358. package/dist/shared/hx-tree-item-D8hwKd5m.js.map +1 -0
  359. package/dist/shared/{toast-factory-Dht3pVsw.js → toast-factory-DgnbFxVs.js} +127 -153
  360. package/dist/shared/toast-factory-DgnbFxVs.js.map +1 -0
  361. package/figma-inventory.json +1280 -429
  362. package/package.json +8 -4
  363. package/dist/shared/hx-accordion-ZVzgDzTG.js.map +0 -1
  364. package/dist/shared/hx-action-bar-CitgcpGv.js.map +0 -1
  365. package/dist/shared/hx-alert-Bto8-TIi.js.map +0 -1
  366. package/dist/shared/hx-avatar-C9hOmlAb.js.map +0 -1
  367. package/dist/shared/hx-badge-JlFtAdxS.js.map +0 -1
  368. package/dist/shared/hx-banner-fpRnciIO.js.map +0 -1
  369. package/dist/shared/hx-breadcrumb-item-3tKppF9h.js.map +0 -1
  370. package/dist/shared/hx-button-BOwAEcF1.js.map +0 -1
  371. package/dist/shared/hx-button-group-4NUBpkyC.js +0 -181
  372. package/dist/shared/hx-button-group-4NUBpkyC.js.map +0 -1
  373. package/dist/shared/hx-carousel-item-z1Lc24op.js.map +0 -1
  374. package/dist/shared/hx-checkbox-CYd0YV_u.js.map +0 -1
  375. package/dist/shared/hx-checkbox-group-D5piJLY8.js.map +0 -1
  376. package/dist/shared/hx-clinical-status-D3XQIOqX.js.map +0 -1
  377. package/dist/shared/hx-color-picker-DBwJzT5f.js.map +0 -1
  378. package/dist/shared/hx-combobox-NgJaLbs2.js.map +0 -1
  379. package/dist/shared/hx-copy-button-sUVuikyH.js.map +0 -1
  380. package/dist/shared/hx-date-picker-B49yo4Vm.js.map +0 -1
  381. package/dist/shared/hx-drawer-CM_upadk.js.map +0 -1
  382. package/dist/shared/hx-dropdown-D626S2ZG.js.map +0 -1
  383. package/dist/shared/hx-file-upload-D3rKROK5.js.map +0 -1
  384. package/dist/shared/hx-help-text-Xb2Yr8x2.js +0 -156
  385. package/dist/shared/hx-help-text-Xb2Yr8x2.js.map +0 -1
  386. package/dist/shared/hx-icon-button-a6OpeQz5.js.map +0 -1
  387. package/dist/shared/hx-icon-fuVm4-bk.js +0 -283
  388. package/dist/shared/hx-icon-fuVm4-bk.js.map +0 -1
  389. package/dist/shared/hx-link-CMnZRUtQ.js.map +0 -1
  390. package/dist/shared/hx-menu-divider-A6Guuzi_.js.map +0 -1
  391. package/dist/shared/hx-nav-item-CODtUlew.js.map +0 -1
  392. package/dist/shared/hx-nav-ldFM3Fle.js.map +0 -1
  393. package/dist/shared/hx-number-input-yUzFOSC1.js.map +0 -1
  394. package/dist/shared/hx-pagination-C7y8GVyU.js.map +0 -1
  395. package/dist/shared/hx-phi-field-C19oxlrr.js.map +0 -1
  396. package/dist/shared/hx-popover-BAlAFOH9.js.map +0 -1
  397. package/dist/shared/hx-popup-COUXXZ9X.js.map +0 -1
  398. package/dist/shared/hx-radio-C7eTj5YI.js.map +0 -1
  399. package/dist/shared/hx-rating-C3QP53k9.js.map +0 -1
  400. package/dist/shared/hx-slider-Blmv_rwS.js.map +0 -1
  401. package/dist/shared/hx-split-button-Ddle8iVx.js.map +0 -1
  402. package/dist/shared/hx-stat-Gtw_SpK8.js.map +0 -1
  403. package/dist/shared/hx-step-R2rjp1fT.js.map +0 -1
  404. package/dist/shared/hx-switch-TvKGvZJz.js.map +0 -1
  405. package/dist/shared/hx-tab-panel-DzsX8BHV.js.map +0 -1
  406. package/dist/shared/hx-tag-C5aCUpVi.js.map +0 -1
  407. package/dist/shared/hx-text-input-D6FlOZM-.js.map +0 -1
  408. package/dist/shared/hx-time-picker-Bo7FWzmf.js.map +0 -1
  409. package/dist/shared/hx-toggle-button-DwBers3A.js.map +0 -1
  410. package/dist/shared/hx-tooltip-DVqtKPCD.js.map +0 -1
  411. package/dist/shared/hx-top-nav-DP6OFS8C.js.map +0 -1
  412. package/dist/shared/hx-tree-item-CXyspGxI.js.map +0 -1
  413. package/dist/shared/toast-factory-Dht3pVsw.js.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helixui/library",
3
- "version": "3.6.0",
3
+ "version": "3.8.0-next.145",
4
4
  "description": "Enterprise Web Component Library built with Lit 3.x",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -21,6 +21,7 @@
21
21
  "import": "./dist/components/*/index.js"
22
22
  },
23
23
  "./custom-elements.json": "./custom-elements.json",
24
+ "./aaa-verdicts.json": "./aaa-verdicts.json",
24
25
  "./fouc.css": "./fouc.css",
25
26
  "./dist/css/helix-all.css": "./dist/css/helix-all.css",
26
27
  "./dist/css/helix-tokens.css": "./dist/css/helix-tokens.css",
@@ -53,16 +54,18 @@
53
54
  "dist/utilities/**",
54
55
  "dist/utils/**",
55
56
  "custom-elements.json",
57
+ "aaa-verdicts.json",
56
58
  "figma-inventory.json",
57
59
  "fouc.css"
58
60
  ],
59
61
  "customElements": "custom-elements.json",
60
62
  "dependencies": {
61
63
  "lit": "^3.3.2",
62
- "@helixui/tokens": "3.5.0"
64
+ "@helixui/tokens": "3.8.0-next.145"
63
65
  },
64
66
  "peerDependencies": {
65
- "@floating-ui/dom": "^1.7.6"
67
+ "@floating-ui/dom": "^1.7.6",
68
+ "@helixui/icons": "1.0.0"
66
69
  },
67
70
  "repository": {
68
71
  "type": "git",
@@ -99,7 +102,8 @@
99
102
  "tsx": "^4.21.0",
100
103
  "vite": "^6.2.0",
101
104
  "vite-plugin-dts": "^4.5.4",
102
- "vitest": "^3.0.0"
105
+ "vitest": "^3.0.0",
106
+ "@helixui/icons": "1.0.0"
103
107
  },
104
108
  "scripts": {
105
109
  "dev": "vite build --watch",
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-accordion-ZVzgDzTG.js","sources":["../../src/components/hx-accordion/hx-accordion.styles.ts","../../src/components/hx-accordion/hx-accordion-item.styles.ts","../../src/components/hx-accordion/hx-accordion-item.ts","../../src/components/hx-accordion/hx-accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAccordionStyles = css`\n :host {\n display: block;\n font-family: var(--hx-accordion-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n .accordion {\n border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));\n overflow: hidden;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .accordion {\n border: 2px solid CanvasText;\n }\n }\n`;\n","import { css } from 'lit';\n\nexport const helixAccordionItemStyles = css`\n :host {\n display: block;\n }\n\n .item {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));\n font-family: var(--hx-accordion-item-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n :host(:first-child) .item {\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));\n }\n\n /* Remove native details marker */\n .trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-accordion-trigger-padding, var(--hx-space-4, 1rem));\n cursor: pointer;\n list-style: none;\n font-size: var(--hx-font-size-md, 1rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #202b39));\n background-color: var(--hx-accordion-trigger-bg, transparent);\n user-select: none;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n /* Hide the native details disclosure triangle */\n .trigger::-webkit-details-marker {\n display: none;\n }\n\n .trigger::marker {\n display: none;\n }\n\n .item--disabled .trigger {\n cursor: not-allowed;\n }\n\n :host(:not([disabled])) .trigger:hover {\n background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f5f8f3));\n }\n\n .trigger:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\n outline-offset: var(--hx-focus-ring-offset, -2px);\n }\n\n /* ─── Icon ─── */\n\n .icon {\n flex-shrink: 0;\n width: var(--hx-accordion-icon-size, var(--hx-size-5, 1.25rem));\n height: var(--hx-accordion-icon-size, var(--hx-size-5, 1.25rem));\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #66787b));\n transition: transform var(--hx-transition-normal, 250ms ease);\n }\n\n .item--expanded .icon {\n transform: rotate(180deg);\n }\n\n /* ─── Content animation via CSS grid trick ─── */\n\n .content-wrapper {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--hx-transition-normal, 250ms ease);\n overflow: hidden;\n }\n\n .item--expanded .content-wrapper,\n details[open]:not(.item--expanded) .content-wrapper {\n grid-template-rows: 1fr;\n }\n\n .content-inner {\n overflow: hidden;\n }\n\n .content {\n padding: var(--hx-accordion-content-padding, 0 var(--hx-space-4, 1rem) var(--hx-space-4, 1rem));\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #4a5362));\n }\n\n /* ─── Disabled host ─── */\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .trigger {\n transition: none;\n }\n\n .icon {\n transition: none;\n }\n\n .content-wrapper {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .trigger {\n forced-color-adjust: none;\n color: ButtonText;\n background-color: ButtonFace;\n }\n\n .trigger:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: -2px;\n }\n\n .item {\n border-bottom-color: CanvasText;\n }\n\n :host(:first-child) .item {\n border-top-color: CanvasText;\n }\n\n .item--disabled .trigger {\n color: GrayText;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .icon {\n color: ButtonText;\n }\n\n .content {\n color: CanvasText;\n }\n }\n`;\n","import { html, svg, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixAccordionItemStyles } from './hx-accordion-item.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst chevronIcon = svg`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n`;\n\nconst _nextAccordionItemId = createIdCounter('hx-accordion-item');\n\n/** Detail for hx-expand and hx-collapse events dispatched by hx-accordion-item. */\nexport interface HxAccordionToggleDetail {\n expanded: boolean;\n itemId: string;\n}\n\n/**\n * An individual accordion item with collapsible content.\n *\n * ## Architecture Note: Slot Projection vs. Host-Canonical (group-4 round-1)\n *\n * `hx-accordion-item` deliberately does NOT participate in the\n * host-canonical / `internals.ariaLabelledByElements` pattern used by every\n * other group-2/3/4 component. Rationale:\n *\n * 1. The trigger label comes from `<slot name=\"trigger\">` — consumer\n * light-DOM projected directly into the `<summary>` element. AT reads\n * the slot-projected text natively because slot projection preserves\n * accessible name (the `<summary>` IS the heading and consumes the\n * slotted text in its own accessible name computation).\n * 2. `aria-labelledby=\"${_uid}-trigger\"` on the inner content region and\n * `aria-controls=\"${_uid}-content\"` on the summary BOTH resolve\n * same-shadow-root, which works correctly across every AT — these\n * IDREFs never cross a shadow boundary.\n * 3. Pushing these ids through `internals.ariaLabelledByElements` would\n * either duplicate the wiring (heading announced twice) or break the\n * native `<details>/<summary>` toggle semantics (the host carrying\n * `role=\"heading\"` would shadow the summary's own heading projection).\n *\n * `role=\"heading\"` on `<summary>` (with `aria-level=N`) is the APG-canonical\n * Accordion pattern. Per the APG note, `<summary>` MUST be a direct child\n * of `<details>` for the native toggle to function — wrapping it in an\n * `<h3>` would forfeit native disclosure. The role-on-summary approach is\n * the authoritative compromise. NVDA, JAWS, and VoiceOver all announce the\n * summary as a heading at the configured level when this pattern is used.\n *\n * `aria-controls` on the summary points at the shadow-internal content\n * region; APG marks the relationship as implicit via the heading + region\n * structure, so AT not following the IDREF still announces correctly. The\n * IDREF is a hint, not a requirement — and because both ids are in the\n * same shadow root, it resolves cleanly when AT does follow it. This\n * matches the popover/dropdown intentional `aria-controls` omission for\n * the cross-shadow case (see those components' code comments).\n *\n * @summary Collapsible panel that can be expanded or collapsed.\n *\n * @tag hx-accordion-item\n *\n * @slot trigger - The heading/trigger content for this item.\n * @slot - Default slot for the collapsible body content.\n *\n * @attr {number} level - Heading level (1–6) for the trigger via `role=\"heading\" aria-level`.\n * Defaults to 3. Set this to match the document outline — e.g., use `level=\"2\"` when the\n * accordion appears under an `<h1>` landmark.\n *\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-expand - Dispatched when the item is expanded.\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-collapse - Dispatched when the item is collapsed.\n *\n * @csspart item - The outer details element container.\n * @csspart trigger - The summary/trigger element.\n * @csspart content - The collapsible content area.\n * @csspart icon - The expand/collapse icon.\n *\n * @cssprop [--hx-accordion-border-color=var(--hx-color-neutral-200)] - Border color between items.\n * @cssprop [--hx-accordion-trigger-padding=var(--hx-space-4)] - Trigger padding.\n * @cssprop [--hx-accordion-trigger-color=var(--hx-color-neutral-800)] - Trigger text color.\n * @cssprop [--hx-accordion-trigger-bg=transparent] - Trigger background color.\n * @cssprop [--hx-accordion-trigger-hover-bg=var(--hx-color-neutral-50)] - Trigger hover background.\n * @cssprop [--hx-accordion-icon-color=var(--hx-color-neutral-500)] - Icon color.\n * @cssprop [--hx-accordion-content-padding=0 var(--hx-space-4) var(--hx-space-4)] - Content padding.\n * @cssprop [--hx-accordion-content-color=var(--hx-color-neutral-600)] - Content text color.\n */\n@customElement('hx-accordion-item')\nexport class HelixAccordionItem extends HelixElement {\n static override styles = [helixAccordionItemStyles, forcedColorsInteractive];\n\n /** @internal */\n private _uid = _nextAccordionItemId();\n\n /**\n * Whether this item is expanded.\n * @attr expanded\n */\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /**\n * Whether this item is disabled (cannot be toggled).\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\n * trigger. Defaults to 3. Set to match the document outline around the\n * accordion so screen readers surface accordion items in the heading list.\n * @attr level\n */\n @property({ type: Number })\n level: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.closest('hx-accordion')) {\n devWarn(\n 'hx-accordion-item',\n 'Used outside hx-accordion. Single-expand coordination will not function.',\n );\n }\n }\n\n // ─── Slot Handlers ───\n\n /** @internal */\n private _handleTriggerSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes({ flatten: true }).length > 0;\n if (!hasContent) {\n devWarn(\n 'hx-accordion-item',\n 'trigger slot is empty — provide a visible label for keyboard and screen reader users.',\n );\n }\n }\n\n // ─── Heading Level Helper ───\n\n /**\n * Returns a clamped heading level (1–6) for use as `aria-level` on the\n * `<summary>` element. Per the WAI-ARIA APG Accordion pattern, the\n * `<summary>` must be a **direct child** of `<details>` for native\n * disclosure behaviour to work. Instead of wrapping `<summary>` inside\n * an `<h3>` (which breaks the native toggle), we apply\n * `role=\"heading\" aria-level=\"N\"` directly on `<summary>`.\n */\n /** @internal */\n private get _headingLevel(): number {\n return Math.max(1, Math.min(6, this.level));\n }\n\n // ─── Toggle Logic ───\n\n /** @internal */\n private _toggle(): void {\n if (this.disabled) return;\n\n const willExpand = !this.expanded;\n this.expanded = willExpand;\n\n this._dispatchToggleEvent(willExpand);\n }\n\n /** @internal */\n _dispatchToggleEvent(expanded: boolean): void {\n const detail = { expanded, itemId: this.id || '' };\n const options = { bubbles: true, composed: true, detail };\n\n if (expanded) {\n this.dispatchEvent(\n new CustomEvent<{ expanded: boolean; itemId: string }>('hx-expand', options),\n );\n } else {\n this.dispatchEvent(\n new CustomEvent<{ expanded: boolean; itemId: string }>('hx-collapse', options),\n );\n }\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSummaryClick(e: MouseEvent): void {\n e.preventDefault();\n this._toggle();\n }\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._toggle();\n }\n }\n\n // ─── Render ───\n\n override render() {\n const itemClasses = {\n item: true,\n 'item--expanded': this.expanded,\n 'item--disabled': this.disabled,\n };\n\n return html`\n <details part=\"item\" class=${classMap(itemClasses)} ?open=${this.expanded}>\n <summary\n id=${`${this._uid}-trigger`}\n part=\"trigger\"\n class=\"trigger\"\n role=\"heading\"\n aria-level=${this._headingLevel}\n tabindex=${this.disabled ? '-1' : '0'}\n aria-expanded=${this.expanded ? 'true' : 'false'}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-controls=${`${this._uid}-content`}\n @click=${this._handleSummaryClick}\n @keydown=${this._handleKeyDown}\n >\n <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}></slot>\n <span part=\"icon\" class=\"icon\">${chevronIcon}</span>\n </summary>\n <div class=\"content-wrapper\">\n <div class=\"content-inner\">\n <div\n id=${`${this._uid}-content`}\n part=\"content\"\n class=\"content\"\n role=\"region\"\n aria-labelledby=${`${this._uid}-trigger`}\n aria-hidden=${this.expanded ? nothing : 'true'}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </details>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-accordion-item': HelixAccordionItem;\n }\n}\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixAccordionStyles } from './hx-accordion.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport './hx-accordion-item.js';\nimport type { HelixAccordionItem } from './hx-accordion-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accordion container that manages collapsible content sections.\n *\n * @summary Collapsible content sections with single or multi-expand modes.\n *\n * @tag hx-accordion\n *\n * @slot - Default slot for hx-accordion-item elements.\n *\n * @csspart accordion - The outer container wrapping all accordion items.\n *\n * @cssprop [--hx-accordion-border-radius=var(--hx-border-radius-md)] - Outer border radius.\n *\n * @example\n * ```html\n * <hx-accordion mode=\"single\">\n * <hx-accordion-item>\n * <span slot=\"trigger\">What is this?</span>\n * <p>Answer content here.</p>\n * </hx-accordion-item>\n * </hx-accordion>\n * ```\n * @cssprop [--hx-accordion-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n */\n@customElement('hx-accordion')\nexport class HelixAccordion extends HelixElement {\n static override styles = [helixAccordionStyles, forcedColorsInteractive];\n\n /**\n * Expansion mode: 'single' collapses all other items when one expands.\n * 'multi' allows multiple items open simultaneously.\n * @attr mode\n */\n @property({ type: String, reflect: true })\n mode: 'single' | 'multi' = 'single';\n\n // ─── Lifecycle ───\n\n /** @internal */\n private _mutationObserver: MutationObserver | null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('hx-expand', this._handleChildExpand);\n this.addEventListener('keydown', this._handleKeyDown);\n // Re-enforce single mode when reconnected with pre-expanded items\n this._enforceSingleMode();\n // Watch for dynamically added accordion items that may violate single-expand\n if (typeof MutationObserver !== 'undefined') {\n this._mutationObserver = new MutationObserver((mutations) => {\n const hasNewItems = mutations.some((m) =>\n Array.from(m.addedNodes).some(\n (n) => n instanceof Element && n.tagName.toLowerCase() === 'hx-accordion-item',\n ),\n );\n if (hasNewItems) {\n this._enforceSingleMode();\n }\n });\n this._mutationObserver.observe(this, { childList: true });\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-expand', this._handleChildExpand);\n this.removeEventListener('keydown', this._handleKeyDown);\n this._mutationObserver?.disconnect();\n this._mutationObserver = null;\n }\n\n protected override firstUpdated(): void {\n this._enforceSingleMode();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('mode')) {\n const validModes: string[] = ['single', 'multi'];\n if (!validModes.includes(this.mode)) {\n devWarn(\n 'hx-accordion',\n `Invalid mode \"${this.mode}\". Expected one of: ${validModes.join(', ')}. Clamping to \"single\".`,\n );\n this.mode = 'single';\n return;\n }\n // When switching from multi to single, enforce single-expand immediately\n this._enforceSingleMode();\n }\n }\n\n // ─── Single-expand coordination ───\n\n /** @internal */\n private _enforceSingleMode(): void {\n if (this.mode !== 'single') return;\n\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n let foundExpanded = false;\n\n items.forEach((item) => {\n if (item.expanded) {\n if (foundExpanded) {\n item.expanded = false;\n } else {\n foundExpanded = true;\n }\n }\n });\n }\n\n /**\n * Handles expand events from child accordion items to enforce single-expand mode.\n * @internal\n */\n private _handleChildExpand = (e: Event): void => {\n if (this.mode !== 'single') return;\n\n const expandedItem = e.composedPath()[0] as HelixAccordionItem;\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n\n items.forEach((item) => {\n if (item !== expandedItem && item.expanded) {\n item.expanded = false;\n item._dispatchToggleEvent(false);\n }\n });\n };\n\n // ─── Arrow key navigation (ARIA APG Accordion pattern) ───\n\n /**\n * Handles keyboard navigation between accordion triggers using arrow, Home, and End keys.\n * @internal\n */\n private _handleKeyDown = (e: KeyboardEvent): void => {\n const triggers = this._getTriggers();\n if (triggers.length === 0) return;\n\n const activeEl = this.shadowRoot?.activeElement ?? document.activeElement;\n let currentItem: HelixAccordionItem | null = null;\n\n const items = Array.from(this.querySelectorAll<HelixAccordionItem>('hx-accordion-item'));\n for (const item of items) {\n const summary = item.shadowRoot?.querySelector('[part=\"trigger\"]');\n if (summary === activeEl || item.shadowRoot?.activeElement === summary) {\n currentItem = item;\n break;\n }\n }\n\n if (!currentItem) return;\n\n const enabledItems = items.filter((item) => !item.disabled);\n const currentIndex = enabledItems.indexOf(currentItem);\n if (currentIndex === -1) return;\n\n let targetIndex = -1;\n\n switch (e.key) {\n case 'ArrowDown':\n targetIndex = (currentIndex + 1) % enabledItems.length;\n break;\n case 'ArrowUp':\n targetIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;\n break;\n case 'Home':\n targetIndex = 0;\n break;\n case 'End':\n targetIndex = enabledItems.length - 1;\n break;\n default:\n return;\n }\n\n e.preventDefault();\n const targetItem = enabledItems[targetIndex];\n const targetSummary = targetItem?.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n targetSummary?.focus();\n };\n\n /** @internal */\n private _getTriggers(): HTMLElement[] {\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n const triggers: HTMLElement[] = [];\n items.forEach((item) => {\n const summary = item.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n if (summary) triggers.push(summary);\n });\n return triggers;\n }\n\n // ─── Slot validation ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target;\n if (!(slot instanceof HTMLSlotElement)) return;\n const invalid = slot\n .assignedElements()\n .filter((el) => el.tagName.toLowerCase() !== 'hx-accordion-item');\n if (invalid.length > 0) {\n devWarn(\n 'hx-accordion',\n `Default slot expects <hx-accordion-item> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div part=\"accordion\" class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-accordion': HelixAccordion;\n }\n}\n"],"names":["helixAccordionStyles","css","helixAccordionItemStyles","chevronIcon","svg","_nextAccordionItemId","createIdCounter","HelixAccordionItem","HelixElement","willExpand","expanded","options","itemClasses","html","classMap","nothing","forcedColorsInteractive","__decorateClass","property","customElement","HelixAccordion","expandedItem","item","activeEl","_a","currentItem","items","summary","_b","_c","enabledItems","currentIndex","targetIndex","targetItem","targetSummary","_d","mutations","m","n","changedProperties","validModes","devWarn","foundExpanded","triggers","slot","invalid","el"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-action-bar-CitgcpGv.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n :host {\n display: block;\n }\n\n /* ─── Base ─── */\n\n .base {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n background: var(--hx-action-bar-bg, transparent);\n border: var(--hx-action-bar-border, none);\n box-sizing: border-box;\n width: 100%;\n }\n\n /* ─── Sticky (top) ─── */\n\n .base--sticky {\n position: sticky;\n top: 0;\n padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n z-index: var(--hx-action-bar-z-index, 10);\n /*\n * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n */\n }\n\n /* ─── Bottom sticky ─── */\n\n .base--bottom {\n position: sticky;\n bottom: 0;\n /*\n * Respect iOS home-indicator safe area on devices with notch/home bar.\n * Falls back to 0px on devices that do not support env().\n */\n padding-bottom: max(\n var(--hx-action-bar-padding-block-end, 0px),\n env(safe-area-inset-bottom, 0px)\n );\n z-index: var(--hx-action-bar-z-index, 10);\n }\n\n /* ─── Variant: outlined ─── */\n\n .base--outlined {\n background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));\n border: var(\n --hx-action-bar-border,\n var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)\n );\n border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n\n /* ─── Variant: filled ─── */\n\n .base--filled {\n background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));\n border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n\n /* ─── Size modifiers ─── */\n\n .base--sm {\n padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n min-height: var(--hx-size-8, 2rem);\n }\n\n .base--md {\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .base--lg {\n padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Sections ─── */\n\n .section {\n display: flex;\n align-items: center;\n gap: inherit;\n }\n\n /*\n * Equal flex-basis on start and end guarantees the center section is visually centered\n * within the full bar width, regardless of how wide start and end content are.\n */\n .section--start {\n flex: 1 1 0;\n justify-content: flex-start;\n }\n\n .section--center {\n flex: 0 0 auto;\n justify-content: center;\n }\n\n .section--end {\n flex: 1 1 0;\n justify-content: flex-end;\n }\n\n /* ─── Slotted content ─── */\n\n ::slotted(*) {\n flex-shrink: 0;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n /* Outlined variant: border is already present and will be honored by the browser */\n .base--outlined {\n border: 1px solid CanvasText;\n }\n\n /* Filled variant: background is suppressed — add border to maintain visual separation */\n .base--filled {\n border: 1px solid CanvasText;\n }\n }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Re-export size type for external consumers.\nexport type ActionBarSize = 'sm' | 'md' | 'lg';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} accessible-label - Identifies the toolbar to assistive technology.\n * When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n * Falls back to the native `aria-label` attribute if not set.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n * <hx-button slot=\"start\">Save</hx-button>\n * <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n * @cssprop [--hx-action-bar-padding-block-start=0px] - Padding.\n * @cssprop [--hx-action-bar-padding-block-end=0px] - Padding.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends HelixElement {\n static override styles = [helixActionBarStyles, forcedColorsInteractive];\n\n /**\n * Size of the action bar — propagated as a data attribute to slotted children.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Visual variant controlling the bar background.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'outlined' | 'filled' = 'default';\n\n /**\n * Position and sticky behavior of the action bar.\n * - `top` — normal flow (default)\n * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n * scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n * @attr position\n */\n @property({ type: String, reflect: true })\n position: 'top' | 'bottom' | 'sticky' = 'top';\n\n // The deprecated `sticky` boolean property has been removed in 3.0.0.\n // Use `position=\"sticky\"` instead.\n\n /**\n * Accessible label for the toolbar.\n * Required when multiple toolbars appear on the same page.\n *\n * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n * The `accessible-label` attribute takes precedence when both are set.\n *\n * Previously this was exposed as the `ariaLabel` JS property, which shadowed\n * the native `HTMLElement.ariaLabel`. That shadowing is removed; use\n * `accessibleLabel` or the HTML attributes instead.\n *\n * @attr accessible-label\n */\n @property({ attribute: 'accessible-label' })\n accessibleLabel: string = '';\n\n /**\n * Observed mirror of the host's `aria-label` attribute so Lit re-renders\n * when consumers set `aria-label` (the standard HTML pattern).\n * @internal\n */\n @property({ attribute: 'aria-label' })\n private _ariaLabelAttr: string = '';\n\n /**\n * Returns the effective label for the toolbar, checking accessible-label first,\n * then the aria-label attribute, falling back to 'Actions'.\n * @internal\n */\n private get _effectiveLabel(): string {\n return this.accessibleLabel || this._ariaLabelAttr || 'Actions';\n }\n\n /** Cached list of focusable items — invalidated on slot change. */\n /** @internal */\n private _focusableCache: HTMLElement[] | null = null;\n\n /** Whether the overflow slot has assigned content. * @internal\n */\n @state()\n private _hasOverflow = false;\n\n // ─── Lifecycle ───\n\n /** Arrow function field — stable reference for add/removeEventListener. */\n /** @internal */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n this._moveFocus('next');\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this._moveFocus('prev');\n } else if (e.key === 'Home') {\n e.preventDefault();\n // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n const items = this._getFocusableItems();\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n items[0]?.focus();\n }\n } else if (e.key === 'End') {\n e.preventDefault();\n const items = this._getFocusableItems();\n const last = items.length - 1;\n if (items.length) {\n items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n items[last]?.focus();\n }\n }\n };\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-action-bar', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as ActionBarSize;\n }\n // Prevent dual aria-label announcement: the host carries the consumer's\n // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n // same value. Setting role=\"none\" on the host hides it from the\n // accessibility tree so only the toolbar is announced.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'none');\n } else if (this.getAttribute('role') !== 'none') {\n devWarn(\n 'hx-action-bar',\n `Setting role=\"${this.getAttribute('role')}\" on the host creates a duplicate toolbar announcement. ` +\n 'The shadow DOM already contains role=\"toolbar\". Set role=\"none\" on the host to suppress it.',\n );\n }\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n // Slot assignments are complete by firstUpdated; initialize roving tabindex\n // immediately rather than waiting for the async slotchange event.\n this._initRovingTabindex();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Focusable item discovery ───\n\n /** @internal */\n private _isFocusable(el: HTMLElement): boolean {\n // Check disabled via DOM attribute (native elements) or property (custom elements)\n if (el.hasAttribute('disabled')) return false;\n const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n if (elWithDisabled.disabled === true) return false;\n\n // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n if (el.tabIndex >= 0) return true;\n\n const tag = el.tagName.toLowerCase();\n return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n }\n\n /** @internal */\n private _getFocusableItems(): HTMLElement[] {\n if (this._focusableCache) return this._focusableCache;\n\n const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n const items: HTMLElement[] = [];\n\n for (const slot of Array.from(slots)) {\n const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n for (const el of assigned) {\n if (!(el instanceof HTMLElement)) continue;\n if (this._isFocusable(el)) {\n // Element is itself focusable — include it and do NOT also recurse into its children\n // to prevent double-counting compound components (e.g. <a><button>).\n items.push(el);\n } else {\n // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n const descendants = el.querySelectorAll<HTMLElement>('*');\n for (const d of Array.from(descendants)) {\n if (this._isFocusable(d)) {\n items.push(d);\n }\n }\n }\n }\n }\n\n this._focusableCache = items;\n return items;\n }\n\n // ─── Roving tabindex helpers ───\n\n /** @internal */\n private _initRovingTabindex(): void {\n this._focusableCache = null; // invalidate cache on slot change\n const items = this._getFocusableItems();\n if (!items.length) return;\n // Find the currently active item. If none exists (e.g. first render or active item was\n // removed), fall back to index 0. Then set ALL items explicitly so newly added items and\n // items whose tabindex changed externally are always in a correct state.\n const activeIndex = items.findIndex((el) => el.getAttribute('tabindex') === '0');\n const targetIndex = activeIndex === -1 ? 0 : activeIndex;\n items.forEach((el, i) => el.setAttribute('tabindex', i === targetIndex ? '0' : '-1'));\n }\n\n /** @internal */\n private _moveFocus(direction: 'next' | 'prev'): void {\n const items = this._getFocusableItems();\n if (!items.length) return;\n\n const focused = document.activeElement as HTMLElement | null;\n const currentIndex = items.indexOf(focused as HTMLElement);\n\n let nextIndex: number;\n if (direction === 'next') {\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n } else {\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n }\n\n items.forEach((el, i) => {\n el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n });\n\n items[nextIndex]?.focus();\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n if (slot.name === 'overflow') {\n this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n }\n this._initRovingTabindex();\n }\n\n // ─── Render ───\n\n override render() {\n const isSticky = this.position === 'sticky';\n const isBottom = this.position === 'bottom';\n const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n return html`\n <div\n part=\"base\"\n role=\"toolbar\"\n aria-label=${this._effectiveLabel}\n aria-orientation=\"horizontal\"\n class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n >\n <div part=\"start\" class=\"section section--start\">\n <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"center\" class=\"section section--center\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"end\" class=\"section section--end\">\n <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-action-bar': HelixActionBar;\n }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","HelixElement","items","el","_a","last","i","_b","legacySize","devWarn","tag","slots","slot","assigned","descendants","activeIndex","targetIndex","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-alert-Bto8-TIi.js","sources":["../../src/components/hx-alert/hx-alert.styles.ts","../../src/components/hx-alert/hx-alert.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-alert styles.\n *\n * Component-tier tokens with two-level var() fallback:\n * var(--hx-alert-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * info-50 = #EFF6FE, info-200 = #BEDCFC, info-500 = #0C8BEB, info-800 = #064172,\n * success-50 = #EAFAEC, success-200 = #BAE6C2, success-500 = #3B9E58, success-800 = #0B4D23,\n * warning-50 = #FFF3EA, warning-200 = #FACFAE, warning-500 = #C2711C, warning-800 = #603301,\n * error-50 = #FFF2F0, error-200 = #FCCBC4, error-500 = #E5493E, error-800 = #7A090A,\n * primary-400 = #6AB1B1.\n */\nexport const helixAlertStyles = css`\n :host {\n display: block;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n /* ─── Screen-reader-only announcement region ─── */\n /* Always present in DOM so AT registers it before content is injected. */\n /* Visually hidden via clip-path technique (superior to display:none which */\n /* removes the element from the AT tree entirely). */\n\n .sr-only {\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 * {\n box-sizing: border-box;\n }\n\n /* ─── Alert Container ─── */\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));\n border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));\n border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-alert-bg, var(--hx-color-info-50, #eff6fe));\n color: var(--hx-alert-color, var(--hx-color-info-800, #064172));\n font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Accent Variant (left border stripe) ─── */\n /* Removes full border and replaces with a left-side accent stripe. */\n /* Common healthcare/enterprise dashboard pattern for dense information UIs. */\n\n .alert--accent {\n border-width: 0;\n border-inline-start: var(--hx-alert-accent-width, 4px) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));\n border-radius: 0;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* Visually hidden — provides a non-color cue for screen readers and users */\n /* who cannot distinguish variants by color alone (e.g. color-blind users). */\n /* Always present regardless of showIcon so severity is never color-only. */\n\n .alert__severity-label {\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 /* ─── Icon ─── */\n\n .alert__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));\n }\n\n .alert__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n /* ─── Title ─── */\n\n .alert__title {\n display: none;\n font-weight: var(--hx-font-weight-semibold, 600);\n margin-bottom: var(--hx-space-1, 0.25rem);\n }\n\n .alert__title--visible {\n display: block;\n }\n\n /* ─── Message ─── */\n\n .alert__message {\n flex: 1;\n min-width: 0;\n }\n\n /* (group-6 5.1) Wrapper around the default slot. Carries aria-hidden=true\n so the visible message text is not double-announced alongside the\n sr-only announcer. display:contents keeps the wrapper visually\n transparent so children participate in the parent flex layout as if\n the wrapper were not there. */\n .alert__default-slot {\n display: contents;\n }\n\n /* ─── Actions ─── */\n /* Hidden by default; shown via JS slotchange detection to avoid invisible */\n /* margin-top spacing when no actions are slotted. */\n\n .alert__actions {\n display: none;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-top: var(--hx-space-2, 0.5rem);\n }\n\n .alert__actions--visible {\n display: flex;\n }\n\n /* ─── Close Button ─── */\n /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n /* the target size is independent of the consumer's base font size. */\n\n .alert__close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n min-width: var(--hx-touch-target-size, 44px);\n min-height: var(--hx-touch-target-size, 44px);\n margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-alert-color, var(--hx-color-info-800, #064172));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: var(--hx-opacity-75, 0.75);\n }\n\n .alert__close-button:hover {\n opacity: var(--hx-opacity-100, 1);\n /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. */\n /* Falls back to transparent (no hover background) in older environments. */\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .alert__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-alert-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .alert__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .alert__close-button {\n transition: none;\n }\n }\n\n /* ─── Variant: info ─── */\n\n :host([variant='info']) .alert,\n :host(:not([variant])) .alert {\n --hx-alert-bg: var(--hx-color-info-50, #eff6fe);\n --hx-alert-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-alert-color: var(--hx-color-info-800, #064172);\n --hx-alert-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n /* ─── Variant: success ─── */\n\n :host([variant='success']) .alert {\n --hx-alert-bg: var(--hx-color-success-50, #eafaec);\n --hx-alert-border-color: var(--hx-color-success-200, #bae6c2);\n --hx-alert-color: var(--hx-color-success-800, #0b4d23);\n --hx-alert-icon-color: var(--hx-color-success-500, #3b9e58);\n }\n\n /* ─── Variant: warning ─── */\n\n :host([variant='warning']) .alert {\n --hx-alert-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-alert-border-color: var(--hx-color-warning-200, #facfae);\n --hx-alert-color: var(--hx-color-warning-800, #603301);\n --hx-alert-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n /* ─── Variant: error ─── */\n\n :host([variant='error']) .alert {\n --hx-alert-bg: var(--hx-color-error-50, #fff2f0);\n --hx-alert-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-alert-color: var(--hx-color-error-800, #7a090a);\n --hx-alert-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n @media (forced-colors: active) {\n .alert {\n border-color: CanvasText;\n }\n\n .alert--accent {\n border-inline-start-color: CanvasText;\n }\n\n .alert__icon svg {\n fill: CanvasText;\n }\n\n .alert__close-button {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixAlertStyles } from './hx-alert.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/** Alert variant determines visual styling and ARIA semantics. */\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/** Detail for the hx-close event dispatched by hx-alert. */\nexport interface HxAlertCloseDetail {\n reason: string;\n}\n\n/**\n * A feedback component for communicating status messages, warnings, and errors.\n * Critical for healthcare patient safety alerts.\n *\n * @summary Feedback alert for status messages with variant-based styling and ARIA live regions.\n *\n * @tag hx-alert\n *\n * @slot - Default slot for alert message content.\n * @slot title - Optional title/headline for the alert.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot actions - Action buttons rendered within the alert.\n *\n * @attr {string} heading - Text used to build the close button's contextual aria-label\n * (e.g., \"Close Low blood pressure alert\"). When absent the label falls back to \"Close alert\".\n *\n * @fires {CustomEvent<{reason: string}>} hx-close - Dispatched when the user dismisses the alert.\n * @fires {CustomEvent} hx-after-close - Dispatched after the alert is dismissed.\n *\n * @csspart alert - The outer alert container.\n * @csspart title - The title/headline container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n * @csspart actions - The actions container.\n *\n * @cssprop [--hx-alert-bg=var(--hx-color-info-50)] - Alert background color.\n * @cssprop [--hx-alert-color=var(--hx-color-info-800)] - Alert text color.\n * @cssprop [--hx-alert-border-color=var(--hx-color-info-200)] - Alert border color.\n * @cssprop [--hx-alert-border-radius=var(--hx-border-radius-md)] - Alert border radius.\n * @cssprop [--hx-alert-border-width=var(--hx-border-width-thin)] - Alert border width.\n * @cssprop [--hx-alert-padding=var(--hx-space-4)] - Alert padding.\n * @cssprop [--hx-alert-gap=var(--hx-space-3)] - Gap between alert elements.\n * @cssprop [--hx-alert-icon-color=var(--hx-color-info-500)] - Alert icon color.\n * @cssprop [--hx-alert-font-family=var(--hx-font-family-sans)] - Alert font family.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-alert-accent-width=4px] - Width of the left border accent stripe.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-success-800] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-transition-fast] - Transition timing.\n */\n@customElement('hx-alert')\nexport class HelixAlert extends HelixElement {\n static override styles = [helixAlertStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /**\n * Visual variant of the alert that determines colors and ARIA semantics.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n /**\n * Whether the alert can be dismissed by the user.\n * @attr dismissible\n */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /**\n * Optional heading text that provides context for the close button's accessible label.\n * When provided, the close button is announced as \"Close [heading] alert\".\n * When absent, the close button falls back to \"Close alert\".\n * @attr heading\n */\n @property({ type: String })\n heading = '';\n\n /**\n * Accessible label for the close button. Override for i18n.\n * @attr label-close\n */\n @property({ attribute: 'label-close' }) labelClose = 'Close alert';\n\n /**\n * Whether the alert is visible. Add the `open` attribute to show the alert.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Whether to show the default variant icon. Add `show-icon` attribute to display the icon.\n * @attr show-icon\n */\n @property({ type: Boolean, reflect: true, attribute: 'show-icon' })\n showIcon = false;\n\n /**\n * When true, applies a left border accent stripe instead of a full border.\n * Common healthcare/enterprise dashboard pattern for visual distinction of alert types.\n * @attr accent\n */\n @property({ type: Boolean, reflect: true })\n accent = false;\n\n /**\n * Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n * When not set, defaults to the English label matching the current variant.\n * @attr severity-label\n */\n @property({ attribute: 'severity-label' })\n severityLabel: string | undefined;\n\n /**\n * CSS selector for the element to return focus to after the alert is dismissed.\n * When set, the component will find and focus the matching element after dismissal.\n * If not set, focus management is the caller's responsibility via the hx-after-close event.\n * @attr return-focus-to\n */\n @property({ type: String, attribute: 'return-focus-to' })\n returnFocusTo: string | null = null;\n\n // ─── State ───\n\n /** @internal */\n @state()\n private _hasActions = false;\n\n /** @internal */\n @state()\n private _hasTitle = false;\n\n // ─── Private Handler References ───\n\n /** @internal */\n private _actionsSlotChangeHandler: (() => void) | null = null;\n /** @internal */\n private _titleSlotChangeHandler: (() => void) | null = null;\n\n /**\n * (group-6 §5.4) Race-guard counter for the sr-only announcer microtask\n * dance. Each open=false→true transition increments this; the deferred\n * text-clear + re-inject only writes to the announcer when the counter\n * matches the value captured at scheduling time. Rapid open/close cycles\n * therefore collapse to a single announcement on the final settled state\n * rather than leaking stale text from earlier cycles.\n *\n * @internal\n */\n private _announcerCycle = 0;\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _defaultSeverityLabel(): string {\n const labels: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n return labels[this.variant] ?? '';\n }\n\n /** @internal */\n private get _effectiveSeverityLabel(): string {\n return this.severityLabel ?? this._defaultSeverityLabel();\n }\n\n /** Returns true when the variant requires assertive announcement. */\n /** @internal */\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /**\n * Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n */\n /** @internal */\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n //\n // (group-6) Dual-write: `internals.role` is the modern IDL-based source of\n // truth; the `role` attribute is retained as a legacy fallback for older AT\n // that don't yet honour ElementInternals ARIA reflection. role implies\n // aria-live per ARIA spec — we do NOT set explicit aria-live on the host\n // (the inner sr-only announcer carries the explicit aria-live so the\n // open=false→true text-mutation is observed by AT).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot && this._actionsSlotChangeHandler) {\n actionsSlot.removeEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot && this._titleSlotChangeHandler) {\n titleSlot.removeEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n override firstUpdated(): void {\n // Track actions slot content to avoid invisible spacing when no actions are slotted.\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot) {\n this._actionsSlotChangeHandler = () => {\n this._hasActions = actionsSlot.assignedNodes({ flatten: true }).length > 0;\n };\n actionsSlot.addEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n\n // Track title slot content so the title container doesn't create dead space when empty.\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot) {\n this._titleSlotChangeHandler = () => {\n this._hasTitle = titleSlot.assignedNodes({ flatten: true }).length > 0;\n };\n titleSlot.addEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n // Dual-write: internals (modern) + attribute (legacy fallback).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n // Trigger announcement via the sr-only polite live region for ATs (JAWS+Chrome,\n // NVDA) that do not re-announce existing content when aria-hidden is merely removed.\n // We inject text after a microtask so the DOM has settled and the live region\n // is registered by the AT before content arrives.\n const previousOpen = changedProperties.get('open');\n if (previousOpen === false) {\n // (group-6 §5.4) Race-guard: bump the cycle counter and capture it.\n // The deferred microtask only writes if the counter still matches —\n // rapid open/close cycles therefore collapse to a single announcement\n // on the final settled state rather than leaking stale text.\n const myCycle = ++this._announcerCycle;\n Promise.resolve().then(() => {\n if (myCycle !== this._announcerCycle || !this.open) return;\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n // Second microtask ensures the clear is processed before re-injection,\n // guaranteeing the AT sees a content change rather than no-op.\n Promise.resolve().then(() => {\n if (myCycle !== this._announcerCycle || !this.open) return;\n const prefix = this._effectiveSeverityLabel;\n const message = this.textContent?.trim() ?? '';\n announcer.textContent = prefix ? `${prefix} ${message}` : message;\n });\n }\n });\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n // (group-6 §5.4) Bump the cycle counter on close so any pending\n // announcer microtask from the previous open is invalidated.\n this._announcerCycle++;\n // Clear the announcer when hidden so stale text is not re-read on next open.\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n }\n }\n }\n }\n\n // ─── Default Icons ───\n\n /** @internal */\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderSuccessIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderErrorIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\n case 'info':\n default:\n return this._renderInfoIcon();\n }\n }\n\n /** @internal */\n private _renderCloseIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>`;\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleDismiss(): void {\n this.open = false;\n\n /**\n * Dispatched when the user dismisses the alert.\n * @event hx-close\n */\n this.dispatchEvent(\n new CustomEvent<{ reason: string }>('hx-close', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n\n /**\n * Dispatched after the alert is dismissed.\n * @event hx-after-close\n */\n this.dispatchEvent(\n new CustomEvent<void>('hx-after-close', {\n bubbles: true,\n composed: true,\n }),\n );\n\n // Return focus to a designated element if specified via returnFocusTo.\n if (this.returnFocusTo) {\n const target = document.querySelector(this.returnFocusTo);\n if (target instanceof HTMLElement) {\n target.focus();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n alert: true,\n [`alert--${this.variant}`]: true,\n 'alert--accent': this.accent,\n };\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone, regardless of whether showIcon is set.\n const severityLabel = this._effectiveSeverityLabel;\n\n // (group-6 §5.1) Decorative duplicates of announcer copy — severity\n // label, icon, title — are each marked aria-hidden=true so the\n // sr-only announcer is the SOLE announcement surface for THAT copy.\n // Without this guard, JAWS+Chrome was observed reading those bits\n // twice (once from host text, once from the announcer).\n //\n // (group-6 codex round-1 fix) The default slot wrapper is NO LONGER\n // aria-hidden. The default slot can hold consumer-supplied interactive\n // content (inline links, inline buttons inside an alert message), and\n // aria-hidden on a parent of focusable elements is an axe-core\n // `aria-hidden-focus` violation: AT users would tab into invisible\n // controls. To suppress the (now exclusively-announcer-driven)\n // double-announce risk on the slot text itself, the announcer copy is\n // built from `this.textContent` and the host has its `role` toggled\n // off-then-on across the open transition, so AT only registers the\n // announcer as the live region for that text — not the host.\n //\n // aria-hidden is also NOT placed on the alert container, the actions\n // slot wrapper, or the close button — those host focusable descendants\n // for the same axe-core reason.\n return html`\n <div\n class=\"sr-only\"\n aria-live=${this._isAssertive ? 'assertive' : 'polite'}\n aria-atomic=\"true\"\n ></div>\n <div part=\"alert\" class=${classMap(classes)}>\n <span class=\"alert__severity-label\" aria-hidden=\"true\">${severityLabel}</span>\n ${this.showIcon\n ? html`\n <div part=\"icon\" class=\"alert__icon\" aria-hidden=\"true\">\n <slot name=\"icon\">${this._renderDefaultIcon()}</slot>\n </div>\n `\n : nothing}\n\n <div part=\"message\" class=\"alert__message\">\n <div\n part=\"title\"\n class=\"alert__title ${this._hasTitle ? 'alert__title--visible' : ''}\"\n aria-hidden=\"true\"\n >\n <slot name=\"title\"></slot>\n </div>\n <span class=\"alert__default-slot\"><slot></slot></span>\n <div\n part=\"actions\"\n class=\"alert__actions ${this._hasActions ? 'alert__actions--visible' : ''}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"alert__close-button\"\n aria-label=${this.labelClose}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-alert': HelixAlert;\n }\n}\n\nexport type { HelixAlert as HxAlert };\n"],"names":["helixAlertStyles","css","HelixAlert","HelixElement","actionsSlot","titleSlot","changedProperties","myCycle","announcer","prefix","message","_a","html","target","classes","severityLabel","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;AAcO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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-avatar-C9hOmlAb.js","sources":["../../src/components/hx-avatar/hx-avatar.styles.ts","../../src/components/hx-avatar/hx-avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAvatarStyles = css`\n :host {\n display: inline-block;\n }\n\n /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */\n :host([hidden]) {\n display: none !important;\n }\n\n /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */\n .avatar-wrapper {\n position: relative;\n display: inline-flex;\n }\n\n .avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n width: var(--hx-avatar-size);\n height: var(--hx-avatar-size);\n background-color: var(--hx-avatar-bg, var(--hx-color-primary-100, #dbf0f0));\n color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));\n border-radius: var(--hx-avatar-border-radius);\n flex-shrink: 0;\n }\n\n /* ─── Size Variants ─── */\n\n .avatar--xs {\n --hx-avatar-size: var(--hx-size-6, 1.5rem);\n --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);\n }\n\n .avatar--sm {\n --hx-avatar-size: var(--hx-size-8, 2rem);\n --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n .avatar--md {\n --hx-avatar-size: var(--hx-size-10, 2.5rem);\n --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .avatar--lg {\n --hx-avatar-size: var(--hx-size-12, 3rem);\n --hx-avatar-font-size: var(--hx-font-size-md, 1rem);\n }\n\n .avatar--xl {\n --hx-avatar-size: var(--hx-size-16, 4rem);\n --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);\n }\n\n /* ─── Shape Variants ─── */\n\n .avatar--circle {\n --hx-avatar-border-radius: 50%;\n }\n\n .avatar--square {\n --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Image ─── */\n\n .avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n /* ─── Initials ─── */\n\n .avatar__initials {\n font-family: var(--hx-avatar-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-avatar-font-size);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n user-select: none;\n }\n\n /* ─── Fallback Icon ─── */\n\n .avatar__fallback-icon {\n width: 60%;\n height: 60%;\n color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));\n }\n\n /* ─── Badge Slot ─── */\n\n /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */\n .avatar__badge {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */\n .avatar__badge--hidden {\n display: none;\n }\n\n /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,\n leaving no visual boundary. Restore a visible border, explicit foreground, and\n background so the avatar container, initials, and fallback icon all remain\n perceivable at any contrast level.\n WCAG 1.4.11 Non-text Contrast (Level AA). */\n @media (forced-colors: active) {\n .avatar {\n forced-color-adjust: none;\n border: 2px solid ButtonText;\n background-color: Canvas;\n color: CanvasText;\n }\n\n .avatar__initials {\n color: CanvasText;\n }\n\n .avatar__fallback-icon {\n color: CanvasText;\n }\n\n .avatar__image {\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixAvatarStyles } from './hx-avatar.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A user avatar component that displays an image, initials, or a fallback icon.\n * Supports a badge slot for status indicator overlays.\n *\n * @summary User avatar with image, initials, and fallback icon support for healthcare applications.\n *\n * @tag hx-avatar\n *\n * @slot - Default slot for custom avatar content. Overrides src and initials when slotted content is present.\n * @slot badge - Status indicator overlay, positioned at the bottom-right of the avatar container.\n *\n * @csspart avatar - The outer container element.\n * @csspart image - The img element shown when src is provided.\n * @csspart initials - The initials text span shown as a fallback.\n * @csspart fallback-icon - The SVG person silhouette shown when no src or initials are available.\n * @csspart badge - The badge slot container.\n *\n * @cssprop [--hx-avatar-size] - Computed width and height from the size variant.\n * @cssprop [--hx-avatar-border-radius] - Circle = 50%, Square = var(--hx-border-radius-md).\n * @cssprop [--hx-avatar-bg=var(--hx-color-primary-100)] - Background color of the avatar container.\n * @cssprop [--hx-avatar-color=var(--hx-color-primary-700)] - Text and icon color inside the avatar.\n * @cssprop [--hx-avatar-font-size] - Font size for the initials text, set per size variant.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-font-size-2xs] - Font size.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-16] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-avatar-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-letter-spacing-wide] - CSS custom property.\n */\n@customElement('hx-avatar')\nexport class HelixAvatar extends HelixElement {\n static override styles = [helixAvatarStyles, forcedColorsSurface];\n\n /**\n * Image URL. When provided and successfully loaded, displays the image.\n * @attr src\n */\n @property({ type: String })\n src: string | undefined = undefined;\n\n /**\n * Accessible label for the image. Required when `src` is provided.\n * Used as the container's aria-label in image mode.\n * @attr alt\n */\n @property({ type: String })\n alt = '';\n\n /**\n * Human-readable accessible name for non-image states (initials, fallback icon).\n * In healthcare contexts, provide the full person name (e.g., \"Dr. Jane Doe\") rather than\n * relying on raw initials, which screen readers announce as individual letters.\n * When set, takes precedence over raw initials and the generic \"Avatar\" fallback.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Fallback initials text displayed when no image is available.\n * @attr initials\n */\n @property({ type: String })\n initials = '';\n\n /**\n * Size variant of the avatar.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Shape variant of the avatar.\n * @attr shape\n */\n @property({ type: String, reflect: true })\n shape: 'circle' | 'square' = 'circle';\n\n /**\n * Tracks whether the image failed to load, triggering the fallback chain.\n * @internal\n */\n @state()\n private _imgError = false;\n\n /**\n * Tracks whether the default slot has assigned content.\n * @internal\n */\n @state()\n private _hasDefaultSlot = false;\n\n /**\n * Tracks whether the badge slot has assigned content.\n * @internal\n */\n @state()\n private _hasBadgeSlot = false;\n\n // ─── Lifecycle ───\n\n // P1-A / P2-B: Use willUpdate() instead of updated() for property validation\n // and derived state. willUpdate() runs before render() and does not schedule\n // a second update cycle when @state() properties are mutated.\n override willUpdate(changedProperties: PropertyValues<this>): void {\n // P0-1: Reset image error state when src changes so a new valid src renders correctly.\n if (changedProperties.has('src')) {\n this._imgError = false;\n }\n\n // P1-2: Warn when src is provided without alt — silent accessibility failure in healthcare UIs.\n if (changedProperties.has('src') || changedProperties.has('alt')) {\n if (this.src && !this.alt) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: \"alt\" attribute is required when \"src\" is provided. ' +\n 'Without alt text, screen readers announce a non-descriptive label. ' +\n 'Add alt=\"Full name or description\" to your hx-avatar element.',\n );\n }\n }\n\n // P2-A: Warn when initials are used without label — screen readers announce\n // raw initials as individual letters (e.g., \"J D\") instead of a name.\n if (changedProperties.has('initials') || changedProperties.has('label')) {\n if (this.initials && !this.label) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: \"label\" attribute is recommended when \"initials\" is provided. ' +\n 'Without label, screen readers announce raw initials as individual letters. ' +\n 'Add label=\"Full Name\" to your hx-avatar element.',\n );\n }\n }\n\n // P2-1: Warn when invalid size or shape attribute values are used (e.g., from Twig templates).\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n if (changedProperties.has('size') && !validSizes.includes(this.size)) {\n devWarn(\n 'hx-avatar',\n `Invalid hx-size=\"${String(this.size)}\". Valid values: xs, sm, md, lg, xl. Rendering with \"md\".`,\n );\n }\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n if (changedProperties.has('shape') && !validShapes.includes(this.shape)) {\n devWarn(\n 'hx-avatar',\n `Invalid shape=\"${String(this.shape)}\". Valid values: circle, square. Rendering with \"circle\".`,\n );\n }\n }\n\n // ─── Slot Change Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasDefaultSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n /** @internal */\n private _handleBadgeSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasBadgeSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n\n // P2-C: Warn when badge slot content lacks an accessible name.\n // A plain <span class=\"dot\"></span> badge is invisible to screen readers.\n if (this._hasBadgeSlot) {\n const hasAccessibleName = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const el = node as Element;\n return (\n el.hasAttribute('aria-label') ||\n el.hasAttribute('aria-labelledby') ||\n !!el.getAttribute('role')\n );\n }\n return false;\n });\n if (!hasAccessibleName) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: badge slot content should have an accessible name ' +\n '(aria-label, role, etc.). Without it, the badge is invisible to screen readers.',\n );\n }\n }\n }\n\n // ─── Image Error Handling ───\n\n /** @internal */\n private _handleImgError(): void {\n this._imgError = true;\n }\n\n // ─── Fallback Icon ───\n\n /** @internal */\n private _renderFallbackIcon() {\n return html`\n <svg\n part=\"fallback-icon\"\n class=\"avatar__fallback-icon\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\"\n />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const src = this.src;\n const showSlot = this._hasDefaultSlot;\n const showImage = !showSlot && !!src && !this._imgError;\n const showInitials = !showSlot && !showImage && !!this.initials.trim();\n const showFallback = !showSlot && !showImage && !showInitials;\n\n // P1-1 / P1-7: Use label property for human-readable accessible name in non-image states.\n const ariaLabel = showImage\n ? this.alt || this.label || 'Avatar'\n : showInitials\n ? this.label || this.initials\n : this.label || 'Avatar';\n\n // P2-1: Safe class fallback for invalid attribute values supplied via HTML/Twig.\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n const sizeClass = validSizes.includes(this.size) ? this.size : 'md';\n const shapeClass = validShapes.includes(this.shape) ? this.shape : 'circle';\n\n const classes = {\n avatar: true,\n [`avatar--${sizeClass}`]: true,\n [`avatar--${shapeClass}`]: true,\n };\n\n // P2-2: Badge wrapper is hidden (not removed) when empty so slotchange detection still works.\n const badgeClasses = {\n avatar__badge: true,\n 'avatar__badge--hidden': !this._hasBadgeSlot,\n };\n\n return html`\n <div class=\"avatar-wrapper\">\n <div\n part=\"avatar\"\n class=${classMap(classes)}\n role=${showSlot ? nothing : 'img'}\n aria-label=${showSlot ? nothing : ariaLabel}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n ${showImage && src\n ? html`<img\n part=\"image\"\n class=\"avatar__image\"\n src=${src}\n alt=${this.alt}\n aria-hidden=\"true\"\n loading=\"lazy\"\n @error=${this._handleImgError}\n />`\n : nothing}\n ${showInitials\n ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials.trim()}</span>`\n : nothing}\n ${showFallback ? this._renderFallbackIcon() : nothing}\n </div>\n <span part=\"badge\" class=${classMap(badgeClasses)}>\n <slot name=\"badge\" @slotchange=${this._handleBadgeSlotChange}></slot>\n </span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-avatar': HelixAvatar;\n }\n}\n"],"names":["helixAvatarStyles","css","HelixAvatar","HelixElement","changedProperties","validSizes","devWarn","validShapes","e","nodes","node","el","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-badge-JlFtAdxS.js","sources":["../../src/components/hx-badge/hx-badge.styles.ts","../../src/components/hx-badge/hx-badge.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBadgeStyles = css`\n :host {\n display: inline-block;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-1, 0.25rem);\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));\n color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));\n font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n vertical-align: middle;\n position: relative;\n }\n\n /* ─── Size Variants ─── */\n\n .badge--sm {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))\n var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));\n }\n\n .badge--md {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));\n }\n\n .badge--lg {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Style Variants ─── */\n\n .badge--primary {\n --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));\n --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))\n );\n }\n\n .badge--secondary {\n --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9));\n --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #313e4b));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9))\n );\n }\n\n .badge--success {\n --hx-badge-bg: var(--hx-badge-success-bg, var(--hx-color-success-700, #146831));\n --hx-badge-color: var(--hx-badge-success-color, var(--hx-color-neutral-0, #ffffff));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-success-bg, var(--hx-color-success-700, #146831))\n );\n }\n\n .badge--warning {\n --hx-badge-bg: var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c));\n --hx-badge-color: var(--hx-badge-warning-color, var(--hx-color-neutral-900, #0d1825));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c))\n );\n }\n\n .badge--error {\n --hx-badge-bg: var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e));\n --hx-badge-color: var(--hx-badge-error-color, var(--hx-color-text-on-error, #0d1825));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e))\n );\n }\n\n .badge--neutral {\n --hx-badge-bg: var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5));\n --hx-badge-color: var(--hx-badge-neutral-color, var(--hx-color-neutral-700, #313e4b));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5))\n );\n }\n\n .badge--info {\n --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997));\n --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));\n --hx-badge-pulse-color-internal: var(\n --hx-badge-pulse-color,\n var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997))\n );\n }\n\n /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */\n /* Visually hidden text prefix for semantic variants (success/warning/error/info). */\n /* Ensures the variant is not conveyed by color alone. */\n\n .badge__variant-label {\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 /* ─── Pill Mode ─── */\n\n .badge--pill {\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));\n }\n\n /* ─── Dot Indicator (empty + pulse) ─── */\n\n .badge--dot {\n width: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));\n height: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n /* Guard: hide all inner content in dot mode — the dot is purely visual */\n .badge--dot ::slotted(*),\n .badge--dot slot,\n .badge--dot slot[name='prefix'] {\n display: none !important;\n }\n\n /* ─── Pulse Animation ─── */\n\n @keyframes hx-badge-pulse {\n 0%,\n 100% {\n opacity: 1;\n box-shadow: 0 0 0 2px var(--hx-badge-pulse-color-internal, currentColor);\n }\n 50% {\n opacity: var(--hx-opacity-75, 0.75);\n box-shadow: 0 0 0 6px transparent;\n }\n }\n\n .badge--pulse {\n animation: hx-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))\n var(--hx-badge-pulse-easing, var(--hx-easing-in-out, ease-in-out)) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .badge--pulse {\n animation: none;\n }\n }\n\n /* ─── Remove Button ─── */\n\n .badge__remove-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n margin-inline-start: var(--hx-space-1, 0.25rem);\n cursor: pointer;\n color: inherit;\n opacity: var(--hx-opacity-75, 0.75);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n line-height: 0;\n /* WCAG 2.5.5: minimum 44×44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n }\n\n .badge__remove-button:hover {\n opacity: var(--hx-opacity-100, 1);\n }\n\n .badge__remove-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .badge {\n border: 1px solid CanvasText;\n forced-color-adjust: none;\n background-color: Canvas;\n color: CanvasText;\n }\n\n .badge--pulse {\n animation: none;\n }\n\n .badge__remove-button {\n color: ButtonText;\n }\n\n /* Per-semantic-variant forced-colors fallbacks. The visually-hidden\n semantic variant label (.badge__variant-label) keeps AT users\n informed; these blocks restore visual semantic distinction for\n sighted users in HCM where bg/color collapse to system defaults.\n Pattern: distinct border-style per variant. */\n .badge--success {\n border-style: solid;\n border-width: 2px;\n }\n\n .badge--warning {\n border-style: dashed;\n border-width: 2px;\n }\n\n .badge--error {\n border-style: double;\n border-width: 3px;\n }\n\n .badge--info {\n border-style: dotted;\n border-width: 2px;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixBadgeStyles } from './hx-badge.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A small status indicator for notifications, counts, and labels.\n *\n * @summary Presentational badge for status indicators, notification counts, and labels.\n *\n * @tag hx-badge\n *\n * @slot - Default slot for badge content (text, number). When empty with pulse enabled, renders as a dot indicator.\n * @slot prefix - Icon or content rendered before the badge text.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart badge - The badge element.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-badge-bg=var(--hx-color-primary-500)] - Badge background color. The primary override point.\n * @cssprop [--hx-badge-color=var(--hx-color-neutral-0)] - Badge text color. The primary override point.\n * @cssprop [--hx-badge-font-size] - Badge font size (set per size variant).\n * @cssprop [--hx-badge-font-weight=var(--hx-font-weight-semibold)] - Badge font weight.\n * @cssprop [--hx-badge-font-family=var(--hx-font-family-sans)] - Badge font family.\n * @cssprop [--hx-badge-border-radius=var(--hx-border-radius-md)] - Badge border radius.\n * @cssprop [--hx-badge-padding-x] - Badge horizontal padding (set per size variant).\n * @cssprop [--hx-badge-padding-y] - Badge vertical padding (set per size variant).\n * @cssprop [--hx-badge-pulse-color] - Pulse color matching variant background with reduced opacity.\n * @cssprop [--hx-badge-dot-size=var(--hx-size-2)] - Dot indicator size when rendered without content.\n * @cssprop [--hx-badge-secondary-bg=var(--hx-color-neutral-100)] - Background for the secondary variant.\n * @cssprop [--hx-badge-secondary-color=var(--hx-color-neutral-700)] - Text color for the secondary variant.\n * @cssprop [--hx-badge-info-bg=var(--hx-color-info-700)] - Background for the info variant.\n * @cssprop [--hx-badge-info-color=var(--hx-color-neutral-0)] - Text color for the info variant.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-font-size-2xs] - Font size.\n * @cssprop [--hx-space-0-5] - Spacing token.\n * @cssprop [--hx-space-1-5] - Spacing token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-badge-pulse-color-internal] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-success-700] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-info-700] - Color.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-badge-pulse-duration=var(--hx-duration-slow)] - CSS custom property.\n * @cssprop [--hx-duration-slow] - Animation duration.\n * @cssprop [--hx-badge-pulse-easing=var(--hx-easing-in-out)] - CSS custom property.\n * @cssprop [--hx-easing-in-out] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n */\n@customElement('hx-badge')\nexport class HelixBadge extends HelixElement {\n static override styles = [helixBadgeStyles, forcedColorsSurface];\n\n /**\n * Visual style variant of the badge.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral' | 'info' =\n 'primary';\n\n /**\n * Size of the badge.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the badge uses fully rounded (pill) styling.\n * @attr pill\n */\n @property({ type: Boolean, reflect: true })\n pill = false;\n\n /**\n * Whether the badge displays an animated pulse for attention.\n * @attr pulse\n */\n @property({ type: Boolean, reflect: true })\n pulse = false;\n\n /**\n * Whether the badge renders a dismiss button.\n * @attr removable\n */\n @property({ type: Boolean, reflect: true })\n removable = false;\n\n /**\n * Numeric count to display. When set, renders the count as badge content.\n * When count exceeds `max`, displays `${max}+` (e.g. `99+`).\n * @attr count\n */\n @property({ type: Number, reflect: true })\n count: number | undefined = undefined;\n\n /**\n * Maximum count value before truncation to `${max}+`. Defaults to 99.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 99;\n\n /**\n * Accessible label for the dot indicator mode (pulse + empty slot).\n * Required for WCAG 4.1.2 compliance when using the dot indicator pattern.\n * Example: `dot-label=\"3 new messages\"`.\n * @attr dot-label\n */\n @property({ type: String, attribute: 'dot-label' })\n dotLabel = '';\n\n /**\n * Accessible label for the remove button. Should describe what is being removed.\n * Defaults to \"Remove\". For better accessibility, include context: e.g. \"Remove Critical badge\".\n * @attr remove-label\n */\n @property({ type: String, attribute: 'remove-label' })\n removeLabel = 'Remove';\n\n /**\n * Tracks whether the default slot has assigned content.\n * @internal\n */\n @state()\n private _hasSlotContent = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-badge', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as 'sm' | 'md' | 'lg';\n }\n }\n\n // ─── Slot Change Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n // Check if any assigned node has non-whitespace content\n this._hasSlotContent = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleRemove(): void {\n this.dispatchEvent(\n new CustomEvent<void>('hx-remove', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // ─── Count Display ───\n\n /** @internal */\n private get _countDisplay(): string {\n if (this.count === undefined) return '';\n return this.count > this.max ? `${this.max}+` : String(this.count);\n }\n\n // ─── WCAG 1.4.1: Semantic variant label map ───\n // Variants that carry semantic meaning beyond decoration need a non-color cue.\n // Visually-hidden text is prepended so screen reader users and color-blind\n // users get the variant context even when no icon is slotted.\n\n /** @internal */\n private static readonly _SEMANTIC_VARIANT_LABELS: Partial<Record<HelixBadge['variant'], string>> =\n {\n success: 'Success',\n warning: 'Warning',\n error: 'Error',\n info: 'Info',\n };\n\n /** @internal */\n private get _semanticVariantLabel(): string {\n return HelixBadge._SEMANTIC_VARIANT_LABELS[this.variant] ?? '';\n }\n\n // ─── Render ───\n\n override render() {\n const hasCount = this.count !== undefined;\n const isDot = !this._hasSlotContent && !hasCount && this.pulse;\n\n if (isDot && !this.dotLabel) {\n devWarn(\n 'hx-badge',\n 'Dot badge is missing an accessible label. Set `dotLabel` so screen readers can announce the badge purpose (WCAG 4.1.2).',\n );\n }\n\n const classes = {\n badge: true,\n [`badge--${this.variant}`]: true,\n [`badge--${this.size}`]: true,\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n 'badge--dot': isDot,\n };\n\n const variantLabel = this._semanticVariantLabel;\n\n return html`\n <span\n part=\"badge\"\n class=${classMap(classes)}\n role=${isDot && this.dotLabel ? 'img' : nothing}\n aria-label=${isDot && this.dotLabel ? this.dotLabel : nothing}\n aria-live=${hasCount ? 'polite' : nothing}\n >\n ${variantLabel\n ? html`<span class=\"badge__variant-label\">${variantLabel}: </span>`\n : nothing}\n ${isDot ? nothing : html`<slot name=\"prefix\"></slot>`}\n ${hasCount ? this._countDisplay : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n ${this.removable\n ? html`<button\n part=\"remove-button\"\n class=\"badge__remove-button\"\n aria-label=${this.removeLabel}\n @click=${this._handleRemove}\n >\n <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n <path\n d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>`\n : nothing}\n </span>\n `;\n }\n}\n\n/** Canonical type alias for the hx-badge component. */\nexport type HxBadge = HelixBadge;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-badge': HelixBadge;\n }\n}\n"],"names":["helixBadgeStyles","css","HelixBadge","HelixElement","legacySize","e","nodes","node","hasCount","isDot","classes","variantLabel","html","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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-banner-fpRnciIO.js","sources":["../../src/components/hx-banner/hx-banner.styles.ts","../../src/components/hx-banner/hx-banner.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-banner styles.\n *\n * Component-tier tokens with two-level var() fallback:\n * var(--hx-banner-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * info-50 = #EFF6FE, info-200 = #BEDCFC, info-500 = #0C8BEB, info-800 = #064172,\n * success-50 = #EAFAEC, success-200 = #BAE6C2, success-500 = #3B9E58, success-800 = #0B4D23,\n * warning-50 = #FFF3EA, warning-200 = #FACFAE, warning-500 = #C2711C, warning-800 = #603301,\n * error-50 = #FFF2F0, error-200 = #FCCBC4, error-500 = #E5493E, error-800 = #7A090A,\n * primary-400 = #6AB1B1.\n */\nexport const helixBannerStyles = css`\n :host {\n display: block;\n width: 100%;\n position: var(--hx-banner-position, sticky);\n top: 0;\n left: 0;\n right: 0;\n z-index: var(--hx-banner-z-index, 100);\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* Visually hidden — ensures variant is never conveyed by color alone. */\n /* Always rendered so screen readers can identify the banner severity. */\n\n .banner__severity-label {\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 /* ─── Banner Container ─── */\n\n .banner {\n display: flex;\n align-items: center;\n gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));\n color: var(--hx-banner-color, var(--hx-color-info-800, #064172));\n border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));\n font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n width: 100%;\n }\n\n /* ─── Icon ─── */\n\n .banner__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));\n }\n\n .banner__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n /* ─── Message ─── */\n\n .banner__message {\n flex: 1;\n min-width: 0;\n }\n\n /* ─── Action Link ─── */\n\n .banner__action {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));\n font-weight: var(--hx-font-weight-semibold, 600);\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font-size: inherit;\n font-family: inherit;\n }\n\n .banner__action:hover {\n opacity: var(--hx-opacity-90, 0.9);\n }\n\n .banner__action:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-banner-action-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n /* ─── Close Button ─── */\n /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n /* the target size is independent of the consumer's base font size. */\n\n .banner__close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n min-width: var(--hx-touch-target-size, 44px);\n min-height: var(--hx-touch-target-size, 44px);\n margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-banner-color, var(--hx-color-info-800, #064172));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: var(--hx-opacity-75, 0.75);\n }\n\n .banner__close-button:hover {\n opacity: var(--hx-opacity-100, 1);\n /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. */\n /* Falls back to transparent (no hover background) in older environments. */\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .banner__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-banner-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .banner__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n /* ─── Variant: info ─── */\n\n :host([variant='info']) .banner,\n :host(:not([variant])) .banner {\n --hx-banner-bg: var(--hx-color-info-50, #eff6fe);\n --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-banner-color: var(--hx-color-info-800, #064172);\n --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n /* ─── Variant: success ─── */\n\n :host([variant='success']) .banner {\n --hx-banner-bg: var(--hx-color-success-50, #eafaec);\n --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);\n --hx-banner-color: var(--hx-color-success-800, #0b4d23);\n --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);\n }\n\n /* ─── Variant: warning ─── */\n\n :host([variant='warning']) .banner {\n --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-banner-border-color: var(--hx-color-warning-200, #facfae);\n --hx-banner-color: var(--hx-color-warning-800, #603301);\n --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n /* ─── Variant: error ─── */\n\n :host([variant='error']) .banner {\n --hx-banner-bg: var(--hx-color-error-50, #fff2f0);\n --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-banner-color: var(--hx-color-error-800, #7a090a);\n --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n /* ─── Position: fixed ─── */\n /* When position=\"fixed\", override the host-level CSS custom property. */\n /* The :host rule above sets position via var(--hx-banner-position). */\n /* We use an attribute selector to override it cleanly without duplication. */\n\n :host([position='fixed']) {\n position: fixed;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .banner__close-button {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n @media (forced-colors: active) {\n .banner {\n border-bottom-color: CanvasText;\n }\n\n .banner__icon svg {\n fill: CanvasText;\n }\n\n .banner__close-button {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixBannerStyles } from './hx-banner.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/** Banner variant determines visual styling and ARIA semantics. */\nexport type BannerVariant = 'info' | 'success' | 'warning' | 'error';\n\n/** Banner position determines CSS positioning behavior. */\nexport type BannerPosition = 'sticky' | 'fixed';\n\n// ─── ARIA naming disambiguation (group-6) ───\n//\n// IMPORTANT: the component name `hx-banner` refers to the visual UX pattern\n// (full-width page-level notification surface). It is NOT a semantic mapping\n// to the HTML5 LANDMARK role `role=\"banner\"` (which marks the page-level\n// header/masthead).\n//\n// The ARIA role this component sets on its host is `alert` or `status`,\n// derived from `variant`. A regression test in `hx-banner.test.ts` asserts\n// that `role=\"banner\"` (the LANDMARK role) is NEVER applied. Do NOT \"fix\"\n// this by adding the LANDMARK role.\n//\n// APG caveat: NVDA + JAWS do not announce alerts that are present in the DOM\n// at page-load. A `<hx-banner open>` rendered server-side will not be\n// announced on first paint. Consumers needing first-paint announcement\n// should mount with `open=false` and flip to `open=true` after window load,\n// or use a sticky `hx-alert` instead.\n\n/**\n * A full-width page-level banner for persistent notifications and announcements.\n * Designed for healthcare applications requiring prominent system-level messaging.\n *\n * @summary Full-width page-level banner for persistent notifications with variant-based styling and ARIA live regions.\n *\n * @tag hx-banner\n *\n * @slot - Default slot for banner message content.\n * @slot action - Optional slot to override the built-in action link with custom content.\n *\n * @fires {CustomEvent<{reason: string}>} hx-dismiss - Dispatched when the user dismisses the banner.\n *\n * @csspart banner - The outer banner container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart action - The action link element (only rendered when action-label and action-href are set).\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n *\n * @cssprop [--hx-banner-bg=var(--hx-color-info-50)] - Banner background color.\n * @cssprop [--hx-banner-color=var(--hx-color-info-800)] - Banner text color.\n * @cssprop [--hx-banner-border-color=var(--hx-color-info-200)] - Banner bottom border color.\n * @cssprop [--hx-banner-border-width=var(--hx-border-width-thin)] - Banner bottom border width.\n * @cssprop [--hx-banner-padding=var(--hx-space-3) var(--hx-space-4)] - Banner padding.\n * @cssprop [--hx-banner-gap=var(--hx-space-3)] - Gap between banner elements.\n * @cssprop [--hx-banner-icon-color=var(--hx-color-info-500)] - Banner icon color.\n * @cssprop [--hx-banner-font-family=var(--hx-font-family-sans)] - Banner font family.\n * @cssprop [--hx-banner-action-color=var(--hx-banner-color)] - Action link color.\n * @cssprop [--hx-banner-position=sticky] - CSS position value (sticky or fixed).\n * @cssprop [--hx-banner-z-index=100] - Banner z-index for stacking context.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-opacity-90] - Opacity.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-800] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n */\n@customElement('hx-banner')\nexport class HelixBanner extends HelixElement {\n static override styles = [helixBannerStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /**\n * Visual variant of the banner that determines colors and ARIA semantics.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n /**\n * CSS positioning behavior. \"sticky\" keeps the banner in flow; \"fixed\" pins it to the viewport.\n * @attr position\n */\n @property({ type: String, reflect: true })\n position: 'sticky' | 'fixed' = 'sticky';\n\n /**\n * Whether the banner can be dismissed by the user.\n * @attr dismissible\n */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /**\n * Heading text for the banner, used to provide context in the action link's and\n * close button's accessible labels.\n * @attr heading\n */\n @property({ type: String })\n heading = '';\n\n /**\n * Label text for the optional action link. Requires action-href to render.\n * @attr action-label\n */\n @property({ type: String, attribute: 'action-label' })\n actionLabel = '';\n\n /**\n * URL for the optional action link. Requires action-label to render.\n * @attr action-href\n */\n @property({ type: String, attribute: 'action-href' })\n actionHref = '';\n\n /**\n * Whether the banner is visible. Defaults to true — banners are shown by default.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = true;\n\n /** Accessible label for the dismiss button. Override for localized text. */\n @property({ type: String, attribute: 'label-close' })\n labelClose = 'Dismiss banner';\n\n /**\n * Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n * When not set, defaults to the English label matching the current variant.\n * @attr severity-label\n */\n @property({ attribute: 'severity-label' })\n severityLabel: string | undefined;\n\n // ─── Private Helpers ───\n\n /** Returns the default English severity label for the current variant. */\n private _defaultSeverityLabel(): string {\n const labels: Record<string, string> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n return labels[this.variant] ?? '';\n }\n\n /** Returns the effective severity label, using the override if provided. */\n private get _effectiveSeverityLabel(): string {\n return this.severityLabel ?? this._defaultSeverityLabel();\n }\n\n /**\n * Returns true when the variant requires assertive announcement.\n *\n * (group-6) Harmonized with `hx-alert` and `hx-toast`: only `error` is\n * assertive. Previous behavior also escalated `warning` to assertive on\n * `hx-banner`, which diverged from the rest of the live-region surface.\n * Warnings are non-urgent and use a polite live region (role=\"status\").\n * Critical/error messages remain assertive (role=\"alert\").\n */\n /** @internal */\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /**\n * Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n */\n /** @internal */\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n //\n // (group-6) Dual-write: `internals.role` is the modern IDL-based source of\n // truth; the `role` attribute is retained as a legacy fallback for older AT\n // that don't yet honour ElementInternals ARIA reflection. Per ARIA spec,\n // role implies aria-live (`alert`→assertive, `status`→polite); we therefore\n // do NOT set an explicit `aria-live` attribute (avoids §5.1 double-announce).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n this._internals.role = this._role;\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n } else {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n // ─── Default Icons ───\n\n /** @internal */\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderSuccessIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderErrorIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\n case 'info':\n default:\n return this._renderInfoIcon();\n }\n }\n\n /** @internal */\n private _renderCloseIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>`;\n }\n\n // ─── Public Methods ───\n\n /**\n * Programmatically dismisses the banner. Sets open=false and dispatches hx-dismiss.\n */\n dismiss(): void {\n this._handleDismiss();\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleDismiss(): void {\n this.open = false;\n\n /**\n * Dispatched when the user (or caller) dismisses the banner.\n * @event hx-dismiss\n */\n this.dispatchEvent(\n new CustomEvent<{ reason: string }>('hx-dismiss', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n banner: true,\n [`banner--${this.variant}`]: true,\n };\n\n const hasAction = this.actionLabel.length > 0 && this.actionHref.length > 0;\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone.\n const severityLabel = this._effectiveSeverityLabel;\n\n return html`\n <div part=\"banner\" class=${classMap(classes)}>\n <span class=\"banner__severity-label\">${severityLabel}</span>\n <div part=\"icon\" class=\"banner__icon\">${this._renderDefaultIcon()}</div>\n\n <div part=\"message\" class=\"banner__message\">\n <slot></slot>\n </div>\n\n ${hasAction\n ? html`\n <a\n part=\"action\"\n class=\"banner__action\"\n href=${ifDefined(this.actionHref || undefined)}\n aria-label=${this.heading\n ? `${this.actionLabel}: ${this.heading}`\n : this.actionLabel}\n >\n <slot name=\"action\">${this.actionLabel}</slot>\n </a>\n `\n : nothing}\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"banner__close-button\"\n aria-label=${this.labelClose}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-banner': HelixBanner;\n }\n}\n\nexport type { HelixBanner as HxBanner };\n"],"names":["helixBannerStyles","css","HelixBanner","HelixElement","changedProperties","html","classes","hasAction","severityLabel","classMap","ifDefined","nothing","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hx-breadcrumb-item-3tKppF9h.js","sources":["../../src/components/hx-breadcrumb/hx-breadcrumb.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBreadcrumbStyles = css`\n :host {\n display: block;\n font-family: var(\n --hx-breadcrumb-font-family,\n var(--hx-font-family-sans, system-ui, sans-serif)\n );\n font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));\n }\n\n [part='nav'] {\n /* nav landmark — no additional styling needed */\n }\n\n [part='list'] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n }\n\n /* Hide middle items when collapsed via maxItems */\n ::slotted([data-bc-hidden]) {\n display: none;\n }\n\n /*\n * Ellipsis ordering when collapsed (FS-014 fix):\n * The ellipsis <hx-breadcrumb-item> lives in shadow DOM to avoid mutating\n * the consumer's light DOM. CSS order places it between the first item\n * (order: 0, default) and the last item (order: 2) in the flex <ol>.\n */\n .hx-bc-ellipsis {\n order: 1;\n }\n\n ::slotted([data-bc-last]) {\n order: 2;\n }\n\n /* Visually hide the separator slot — used only to read text content.\n * display:none is intentional: the slot contains no interactive or focusable\n * content. If a future change adds focusable elements to this slot, switch to\n * visibility:hidden + position:absolute to preserve focus reachability. */\n .separator-slot {\n display: none;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n /*\n * hx-breadcrumb is a nav container. Link colors and separators are handled\n * by hx-breadcrumb-item's own forced-colors block. No additional overrides needed\n * at the container level.\n */\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixBreadcrumbStyles } from './hx-breadcrumb.styles.js';\n\n/** Typed schema.org ListItem entry for JSON-LD BreadcrumbList structured data. */\ninterface JsonLdListItem {\n '@type': string;\n position: number;\n name: string;\n item?: string;\n}\n\nconst _nextBreadcrumbId = createIdCounter('hx-breadcrumb');\n\n/**\n * Hierarchical page path navigation showing current location in site structure.\n *\n * @summary Navigation breadcrumb showing the page hierarchy. Works with Drupal's breadcrumb system.\n *\n * @tag hx-breadcrumb\n *\n * @slot - Default slot for hx-breadcrumb-item children.\n * @slot separator - Optional separator element. Its text content overrides the `separator` property.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The ordered list containing items.\n *\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character between items.\n * NOTE: If overriding this custom property directly in CSS (rather than via the `separator`\n * attribute), the value MUST be quoted: `--hx-breadcrumb-separator-content: \">\"`. An unquoted\n * value is invalid for the CSS `content` property and will silently render nothing.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal gap around separators.\n * @cssprop [--hx-breadcrumb-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-item-max-width] - Max-width for item text truncation (e.g. `12rem`).\n * @cssprop [--hx-breadcrumb-font-family] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n */\n@customElement('hx-breadcrumb')\nexport class HelixBreadcrumb extends HelixElement {\n static override styles = [helixBreadcrumbStyles, forcedColorsInteractive];\n\n /**\n * The separator character displayed between breadcrumb items.\n * @attr separator\n */\n @property({ type: String })\n separator = '/';\n\n /**\n * The accessible label for the nav landmark.\n * @attr label\n */\n @property({ type: String })\n label = 'Breadcrumb';\n\n /**\n * Maximum number of items to show before collapsing middle items with an ellipsis.\n * Set to 0 (default) to show all items. The ellipsis is a keyboard-accessible\n * button; activating it expands the full breadcrumb by setting maxItems to 0.\n * @attr max-items\n */\n @property({ type: Number, attribute: 'max-items' })\n maxItems = 0;\n\n /**\n * Accessible label for the expand ellipsis button. Override for i18n.\n * @attr label-ellipsis\n */\n @property({ attribute: 'label-ellipsis' }) labelEllipsis = 'Show all breadcrumb items';\n\n /**\n * When true, injects a JSON-LD BreadcrumbList structured data script into the document head.\n *\n * NOTE: Drupal manages `<head>` content via its own render pipeline. Injecting a\n * `<script>` directly via `document.head.appendChild()` in a Drupal context:\n * 1. Bypasses Drupal's deduplication and `hook_html_head_alter()` hook.\n * 2. Is not cacheable by Drupal's page cache.\n * 3. Will be wiped on BigPipe partial page replacements.\n *\n * For Drupal integrations, leave `json-ld` false and use the structured data\n * Twig template instead (see `hx-breadcrumb.twig` in the component directory).\n *\n * @attr json-ld\n */\n @property({ type: Boolean, attribute: 'json-ld' })\n jsonLd = false;\n\n /**\n * Whether the ellipsis expand button is currently shown (shadow DOM rendered).\n * Driven by maxItems collapse logic; replaces the old light-DOM ellipsis injection.\n * @internal\n */\n @state() private _showEllipsis = false;\n /** @internal */\n private _jsonLdScript: HTMLScriptElement | null = null;\n\n /**\n * Tracks which items had their `current` attribute set by this component\n * (as opposed to set by a consumer/Drupal template). This lets us re-evaluate\n * positional current-page detection on each slotchange without incorrectly\n * treating a previously component-set `current` attribute as a consumer-set\n * explicit override.\n * @internal\n */\n private readonly _managedCurrentItems = new WeakSet<Element>();\n\n /**\n * Stable per-instance ID used to tag the injected script element so that\n * multiple hx-breadcrumb instances on the same page don't produce conflicting\n * or duplicate structured-data blocks. Each instance owns exactly one script\n * tag identified by this ID; any stale tag from a previous render cycle is\n * removed before a new one is inserted.\n *\n * Uses a static counter (not Math.random()) so IDs are deterministic across\n * server and client renders, enabling SSR hydration matching.\n * @internal\n */\n private readonly _jsonLdId = `${_nextBreadcrumbId()}-ld`;\n\n // ─── Item Helpers ───\n\n /**\n * Returns only real breadcrumb items, excluding the managed ellipsis element.\n * @internal\n */\n private _getBreadcrumbItems(slot: HTMLSlotElement): Element[] {\n return slot\n .assignedElements({ flatten: true })\n .filter(\n (el) =>\n el.tagName.toLowerCase() === 'hx-breadcrumb-item' &&\n !el.classList.contains('hx-bc-ellipsis'),\n );\n }\n\n /**\n * Applies aria/state attributes to the item list.\n *\n * Current-page detection: if any item has an explicit `current` attribute\n * (e.g. set by a Drupal Twig template), that item is treated as the current\n * page. Otherwise the last item is the current page (default behaviour).\n *\n * This separation allows Drupal to control current-page marking without\n * relying on item order.\n * @internal\n */\n private _applyItemAttributes(items: Element[]): void {\n // Detect consumer-set 'current' attributes. An item has an explicit consumer\n // current if it has the 'current' attribute AND the component did not set it\n // (tracked via _managedCurrentItems). This prevents component-managed state\n // from being misread as a consumer override on subsequent slotchange events.\n const hasExplicitCurrent = items.some(\n (el) => el.hasAttribute('current') && !this._managedCurrentItems.has(el),\n );\n\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n const isLast = i === items.length - 1;\n\n // Separator hiding: always positional — last item has no trailing separator.\n if (isLast) {\n el.setAttribute('data-bc-last', '');\n } else {\n el.removeAttribute('data-bc-last');\n }\n\n // Current-page marker: explicit consumer attribute wins over positional last.\n // The item component renders aria-current=\"page\" on its inner element\n // based on this attribute (see hx-breadcrumb-item.ts).\n if (!hasExplicitCurrent) {\n if (isLast) {\n el.setAttribute('current', '');\n this._managedCurrentItems.add(el);\n } else {\n el.removeAttribute('current');\n this._managedCurrentItems.delete(el);\n }\n }\n // When hasExplicitCurrent is true, leave 'current' attributes as-is so\n // consumer or Drupal template markup is not overridden.\n });\n }\n\n // ─── Slot Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const items = this._getBreadcrumbItems(e.target);\n\n // Handle collapse behaviour\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n\n this._applyItemAttributes(items);\n\n if (this.jsonLd) {\n this._updateJsonLd(items);\n }\n }\n\n /** @internal */\n private _handleSeparatorSlotChange(e: Event): void {\n if (!(e.target instanceof HTMLSlotElement)) return;\n const assigned = e.target.assignedElements({ flatten: true });\n if (assigned.length > 0) {\n const text = (assigned[0] as HTMLElement).textContent?.trim() ?? '';\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(text));\n }\n }\n\n // ─── Collapse ───\n\n /** @internal */\n private _applyCollapse(items: Element[]): void {\n // Show only first and last; hide all middle items via data attribute.\n // The ellipsis is rendered in shadow DOM (see render()) to avoid mutating\n // the consumer's light DOM structure (FS-014).\n items.forEach((item, i) => {\n const el = item as HTMLElement;\n if (i === 0 || i === items.length - 1) {\n el.removeAttribute('data-bc-hidden');\n } else {\n el.setAttribute('data-bc-hidden', '');\n }\n });\n\n this._showEllipsis = true;\n }\n\n /** @internal */\n private _removeCollapse(items: Element[]): void {\n items.forEach((item) => {\n (item as HTMLElement).removeAttribute('data-bc-hidden');\n });\n\n this._showEllipsis = false;\n }\n\n /**\n * Expands a collapsed breadcrumb by resetting maxItems to 0.\n * Called by the ellipsis expand button (click or Enter/Space).\n * @internal\n */\n private _expandBreadcrumb(): void {\n this.maxItems = 0;\n // updated() will detect the maxItems change and call _removeCollapse.\n }\n\n // ─── JSON-LD ───\n\n /**\n * JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.\n * @internal\n */\n private _buildListItem(item: Element, position: number): JsonLdListItem {\n const href = (item as HTMLElement).getAttribute('href');\n const name = (item as HTMLElement).textContent?.trim() ?? '';\n const entry: JsonLdListItem = {\n '@type': 'ListItem',\n position,\n name,\n };\n if (href) entry.item = href;\n return entry;\n }\n\n /** @internal */\n private _updateJsonLd(items: Element[]): void {\n const schema = {\n '@context': 'https://schema.org',\n '@type': 'BreadcrumbList',\n itemListElement: items.map((item, i) => this._buildListItem(item, i + 1)),\n };\n\n // Guard for SSR — document is unavailable server-side\n if (typeof document === 'undefined') return;\n\n if (!this._jsonLdScript) {\n // Dedup guard: remove any stale script with this instance's ID before\n // creating a fresh one. This handles the edge case where the element was\n // reconnected to the DOM after being disconnected without the script\n // reference being re-established.\n document.getElementById(this._jsonLdId)?.remove();\n\n this._jsonLdScript = document.createElement('script');\n this._jsonLdScript.type = 'application/ld+json';\n this._jsonLdScript.id = this._jsonLdId;\n this._jsonLdScript.setAttribute('data-hx-breadcrumb', '');\n document.head.appendChild(this._jsonLdScript);\n }\n\n this._jsonLdScript.textContent = JSON.stringify(schema);\n }\n\n /** @internal */\n private _removeJsonLd(): void {\n this._jsonLdScript?.remove();\n this._jsonLdScript = null;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Do NOT set role=\"list\" on the host. The shadow-DOM <nav><ol> provides\n // both navigation landmark and list semantics. Setting role=\"list\" on\n // the host conflicts with the <nav> child — axe-core flags\n // aria-required-children because a list cannot own a navigation landmark.\n // Slotted items no longer need role=\"listitem\" either; the native <ol>\n // handles list semantics in the composed accessibility tree.\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._removeJsonLd();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('separator')) {\n // JSON.stringify wraps the string in quotes so the value is valid\n // for use in the CSS `content` property (e.g. '/' becomes '\"/\"').\n this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(this.separator));\n }\n\n if (changedProperties.has('maxItems')) {\n // Re-evaluate collapse state when maxItems changes programmatically\n // (e.g. when the expand button resets maxItems to 0).\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n const items = this._getBreadcrumbItems(slot);\n if (this.maxItems > 0 && items.length > this.maxItems) {\n this._applyCollapse(items);\n } else {\n this._removeCollapse(items);\n }\n this._applyItemAttributes(items);\n }\n }\n\n if (changedProperties.has('jsonLd')) {\n if (this.jsonLd) {\n // json-ld toggled on after initial render — inject script immediately.\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) {\n this._updateJsonLd(this._getBreadcrumbItems(slot));\n }\n } else {\n // json-ld toggled off — remove existing script.\n this._removeJsonLd();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <nav part=\"nav\" aria-label=${this.label}>\n <ol part=\"list\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n ${this._showEllipsis\n ? html`\n <hx-breadcrumb-item class=\"hx-bc-ellipsis\">\n <button\n type=\"button\"\n aria-label=${this.labelEllipsis}\n @click=${this._expandBreadcrumb}\n >\n …\n </button>\n </hx-breadcrumb-item>\n `\n : nothing}\n </ol>\n </nav>\n <slot\n name=\"separator\"\n class=\"separator-slot\"\n @slotchange=${this._handleSeparatorSlotChange}\n ></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb': HelixBreadcrumb;\n }\n}\n","import { css } from 'lit';\n\nexport const helixBreadcrumbItemStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n }\n\n /*\n * display: contents removes [part='item'] from the box model entirely.\n * This is intentional — the wrapper exists only for slot selection purposes.\n * Consumers using ::part(item) CANNOT apply box-model properties (padding,\n * margin, background, border) to this part. Use ::part(link) or ::part(text)\n * for visual styling of breadcrumb item content.\n */\n [part='item'] {\n display: contents;\n }\n\n [part='link'] {\n color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600, #0f7078));\n text-decoration: none;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n [part='link']:hover {\n color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700, #0f6363));\n text-decoration: underline;\n }\n\n [part='link']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-breadcrumb-link-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n [part='text'] {\n color: var(--hx-breadcrumb-text-color, var(--hx-color-text-strong, #202b39));\n font-family: inherit;\n font-size: inherit;\n max-width: var(--hx-breadcrumb-item-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .separator {\n margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));\n color: var(--hx-breadcrumb-separator-color, var(--hx-color-text-muted, #4a5362));\n user-select: none;\n }\n\n .separator::before {\n content: var(--hx-breadcrumb-separator-content, '/');\n }\n\n /* Normalize buttons slotted into breadcrumb items (e.g. the expand-ellipsis button). */\n ::slotted(button) {\n background: none;\n border: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n padding: 0;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n [part='link'] {\n color: LinkText;\n }\n\n [part='link']:hover {\n color: LinkText;\n }\n\n .separator {\n color: CanvasText;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixBreadcrumbItemStyles } from './hx-breadcrumb-item.styles.js';\n\n/**\n * A single breadcrumb navigation item.\n *\n * @summary A navigation item within an hx-breadcrumb component. Renders as a link when `href` is\n * provided, or as static text for the current page item. The current page item is determined by\n * the `current` attribute (set explicitly or automatically by the parent `hx-breadcrumb`).\n *\n * @tag hx-breadcrumb-item\n *\n * @slot - The link or page text content. Accepts text, HTML, or icon elements.\n *\n * @csspart item - Wrapper around the link or text content.\n * @csspart link - The anchor element when href is provided (non-current items only).\n * @csspart text - The span element for the current page or items without href.\n * @csspart separator - The separator element rendered after non-last items.\n *\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link text color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover text color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character displayed after non-last items.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal margin around separator.\n * @cssprop [--hx-breadcrumb-item-max-width] - Optional max-width for text truncation.\n * @cssprop [--hx-breadcrumb-link-focus-ring-color=var(--hx-focus-ring-color, var(--hx-color-primary-500))] - Focus ring color for breadcrumb links.\n */\n@customElement('hx-breadcrumb-item')\nexport class HelixBreadcrumbItem extends HelixElement {\n static override styles = [helixBreadcrumbItemStyles, forcedColorsInteractive];\n\n override connectedCallback(): void {\n super.connectedCallback();\n // No explicit role needed. The shadow-DOM <ol> inside hx-breadcrumb\n // provides native list semantics; slotted items are projected into it.\n // Previously role=\"listitem\" was set here, but it conflicted with the\n // host's role=\"list\" + shadow-DOM <nav> structure (aria-required-children).\n // The native <ol> handles the accessibility tree correctly without\n // explicit ARIA roles on host or items.\n }\n\n /**\n * The URL for this breadcrumb link. Omit for the current page item.\n * When `current` is true, this attribute is ignored and the item always\n * renders as static text per WAI-ARIA APG breadcrumb guidance.\n * @attr href\n */\n @property({ type: String, reflect: true })\n href: string | undefined = undefined;\n\n /**\n * Whether this is the last item in the breadcrumb trail. Set by the parent\n * hx-breadcrumb component via the `data-bc-last` boolean attribute. When\n * present the trailing separator is hidden.\n *\n * @attr data-bc-last\n * @internal\n */\n @property({ type: Boolean, attribute: 'data-bc-last', reflect: true })\n dataBcLast = false;\n\n /**\n * Marks this item as the current page. When set, the item always renders as\n * static text (never a navigable link) and `aria-current=\"page\"` is placed on\n * the inner text element per WAI-ARIA APG breadcrumb guidance, yielding the\n * canonical AT announcement (\"current page, Patient Records\").\n *\n * Can be set explicitly by consumers (e.g. Drupal Twig templates) to override\n * the default positional last-item detection in `hx-breadcrumb`. When any item\n * in the breadcrumb has an explicit `current` attribute, the parent will not\n * override it.\n *\n * @attr current\n */\n @property({ type: Boolean, reflect: true })\n current = false;\n\n override render() {\n // Per WAI-ARIA APG, the current page item MUST NOT be a navigable link.\n // aria-current=\"page\" is placed on the inner element (not the listitem host)\n // for canonical AT announcement (\"current page, Patient Records\" vs\n // \"current page, list item\").\n return html`\n <span part=\"item\">\n ${this.current\n ? html`<span part=\"text\" aria-current=\"page\"><slot></slot></span>`\n : this.href\n ? html`<a part=\"link\" href=${this.href}><slot></slot></a>`\n : html`<span part=\"text\"><slot></slot></span>`}\n </span>\n ${!this.dataBcLast\n ? html`<span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-breadcrumb-item': HelixBreadcrumbItem;\n }\n}\n"],"names":["helixBreadcrumbStyles","css","_nextBreadcrumbId","createIdCounter","HelixBreadcrumb","HelixElement","slot","el","items","hasExplicitCurrent","item","i","isLast","e","assigned","text","_a","position","href","name","entry","schema","changedProperties","_b","html","nothing","forcedColorsInteractive","__decorateClass","property","state","customElement","helixBreadcrumbItemStyles","HelixBreadcrumbItem"],"mappings":"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"}