@nova-design-system/nova-webcomponents 3.9.1 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (432) hide show
  1. package/dist/cjs/{constants-8fb8ccc0.js → constants-3b6beb66.js} +15 -1
  2. package/dist/cjs/constants-3b6beb66.js.map +1 -0
  3. package/dist/cjs/index-c56424e5.js +12 -0
  4. package/dist/cjs/index.cjs.js +7 -1
  5. package/dist/cjs/index.cjs.js.map +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/native.cjs.js +1 -1
  8. package/dist/cjs/nv-accordion-item.cjs.entry.js +1 -1
  9. package/dist/cjs/nv-accordion-item.cjs.entry.js.map +1 -1
  10. package/dist/cjs/nv-alert.cjs.entry.js +2 -2
  11. package/dist/cjs/nv-alert.cjs.entry.js.map +1 -1
  12. package/dist/cjs/nv-avatar.cjs.entry.js +1 -1
  13. package/dist/cjs/nv-badge_2.cjs.entry.js +2 -2
  14. package/dist/cjs/nv-badge_2.cjs.entry.js.map +1 -1
  15. package/dist/cjs/nv-breadcrumb.cjs.entry.js +1 -1
  16. package/dist/cjs/nv-breadcrumb.cjs.entry.js.map +1 -1
  17. package/dist/cjs/nv-button.cjs.entry.js +2 -2
  18. package/dist/cjs/nv-button.cjs.entry.js.map +1 -1
  19. package/dist/cjs/nv-buttongroup.cjs.entry.js +198 -0
  20. package/dist/cjs/nv-buttongroup.cjs.entry.js.map +1 -0
  21. package/dist/cjs/nv-calendar.cjs.entry.js +114 -37
  22. package/dist/cjs/nv-calendar.cjs.entry.js.map +1 -1
  23. package/dist/cjs/nv-col.cjs.entry.js +1 -1
  24. package/dist/cjs/nv-datagrid.cjs.entry.js +4 -4
  25. package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
  26. package/dist/cjs/nv-datagridcolumn.cjs.entry.js +1 -1
  27. package/dist/cjs/nv-dialog.cjs.entry.js +2 -2
  28. package/dist/cjs/nv-dialogfooter_2.cjs.entry.js +3 -3
  29. package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +5 -5
  30. package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map +1 -1
  31. package/dist/cjs/nv-fielddate.cjs.entry.js +6 -6
  32. package/dist/cjs/nv-fielddaterange.cjs.entry.js +6 -6
  33. package/dist/cjs/nv-fielddropdown.cjs.entry.js +3 -3
  34. package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +1 -1
  35. package/dist/cjs/nv-fieldmultiselect.cjs.entry.js +377 -27
  36. package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map +1 -1
  37. package/dist/cjs/nv-fieldnumber.cjs.entry.js +3 -3
  38. package/dist/cjs/nv-fieldpassword.cjs.entry.js +3 -3
  39. package/dist/cjs/nv-fieldradio.cjs.entry.js +4 -4
  40. package/dist/cjs/nv-fieldradio.cjs.entry.js.map +1 -1
  41. package/dist/cjs/nv-fieldselect.cjs.entry.js +5 -5
  42. package/dist/cjs/nv-fieldslider.cjs.entry.js +3 -3
  43. package/dist/cjs/nv-fieldtext.cjs.entry.js +3 -3
  44. package/dist/cjs/nv-fieldtextarea.cjs.entry.js +3 -3
  45. package/dist/cjs/nv-fieldtime.cjs.entry.js +10 -10
  46. package/dist/cjs/nv-icon.cjs.entry.js +3 -3
  47. package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
  48. package/dist/cjs/nv-iconbutton_2.cjs.entry.js +3 -3
  49. package/dist/cjs/nv-iconbutton_2.cjs.entry.js.map +1 -1
  50. package/dist/cjs/nv-menu.cjs.entry.js +1 -1
  51. package/dist/cjs/nv-menuitem.cjs.entry.js +1 -1
  52. package/dist/cjs/nv-popover.cjs.entry.js +1 -1
  53. package/dist/cjs/nv-row.cjs.entry.js +1 -1
  54. package/dist/cjs/nv-stack.cjs.entry.js +1 -1
  55. package/dist/cjs/nv-table.cjs.entry.js +2 -2
  56. package/dist/cjs/nv-toggle.cjs.entry.js +3 -3
  57. package/dist/cjs/nv-toggle.cjs.entry.js.map +1 -1
  58. package/dist/cjs/nv-togglebutton.cjs.entry.js +58 -0
  59. package/dist/cjs/nv-togglebutton.cjs.entry.js.map +1 -0
  60. package/dist/cjs/nv-togglebuttongroup.cjs.entry.js +172 -0
  61. package/dist/cjs/nv-togglebuttongroup.cjs.entry.js.map +1 -0
  62. package/dist/cjs/nv-tooltip.cjs.entry.js +1 -1
  63. package/dist/collection/collection-manifest.json +3 -0
  64. package/dist/collection/components/nv-accordion-item/nv-accordion-item.js +1 -1
  65. package/dist/collection/components/nv-accordion-item/nv-accordion-item.js.map +1 -1
  66. package/dist/collection/components/nv-alert/nv-alert.css +5 -0
  67. package/dist/collection/components/nv-badge/nv-badge.css +21 -0
  68. package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.css +2 -0
  69. package/dist/collection/components/nv-button/styles/nv-button.css +8 -0
  70. package/dist/collection/components/nv-buttongroup/nv-buttongroup.docs.js +43 -0
  71. package/dist/collection/components/nv-buttongroup/nv-buttongroup.docs.js.map +1 -0
  72. package/dist/collection/components/nv-buttongroup/nv-buttongroup.js +217 -0
  73. package/dist/collection/components/nv-buttongroup/nv-buttongroup.js.map +1 -0
  74. package/dist/collection/components/nv-buttongroup/nv-buttongroup.utils.js +86 -0
  75. package/dist/collection/components/nv-buttongroup/nv-buttongroup.utils.js.map +1 -0
  76. package/dist/collection/components/nv-buttongroup/styles/nv-buttongroup.css +73 -0
  77. package/dist/collection/components/nv-buttongroup/test/nv-buttongroup.utils.test.js +312 -0
  78. package/dist/collection/components/nv-buttongroup/test/nv-buttongroup.utils.test.js.map +1 -0
  79. package/dist/collection/components/nv-calendar/nv-calendar.css +9 -0
  80. package/dist/collection/components/nv-calendar/nv-calendar.js +37 -24
  81. package/dist/collection/components/nv-calendar/nv-calendar.js.map +1 -1
  82. package/dist/collection/components/nv-calendar/nv-calendar.utils.js +68 -0
  83. package/dist/collection/components/nv-calendar/nv-calendar.utils.js.map +1 -1
  84. package/dist/collection/components/nv-calendar/partials/calendar-grid.js +5 -3
  85. package/dist/collection/components/nv-calendar/partials/calendar-grid.js.map +1 -1
  86. package/dist/collection/components/nv-calendar/partials/day-cell.js +4 -9
  87. package/dist/collection/components/nv-calendar/partials/day-cell.js.map +1 -1
  88. package/dist/collection/components/nv-col/nv-col.js +1 -1
  89. package/dist/collection/components/nv-datagrid/nv-datagrid.css +1 -0
  90. package/dist/collection/components/nv-datagrid/nv-datagrid.js +2 -2
  91. package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.js +1 -1
  92. package/dist/collection/components/nv-dialog/nv-dialog.js +1 -1
  93. package/dist/collection/components/nv-dialogfooter/nv-dialogfooter.js +1 -1
  94. package/dist/collection/components/nv-dialogheader/nv-dialogheader.js +1 -1
  95. package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.css +1 -0
  96. package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js +4 -4
  97. package/dist/collection/components/nv-fielddate/nv-fielddate.js +6 -6
  98. package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js +6 -6
  99. package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js +3 -3
  100. package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js +1 -1
  101. package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js +1 -1
  102. package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js.map +1 -1
  103. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js +885 -122
  104. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js.map +1 -1
  105. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js +561 -89
  106. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js.map +1 -1
  107. package/dist/collection/components/nv-fieldmultiselect/styles/nv-fieldmultiselect.css +70 -16
  108. package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js +3 -3
  109. package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js +3 -3
  110. package/dist/collection/components/nv-fieldradio/nv-fieldradio.css +1 -0
  111. package/dist/collection/components/nv-fieldradio/nv-fieldradio.js +3 -3
  112. package/dist/collection/components/nv-fieldselect/nv-fieldselect.js +5 -5
  113. package/dist/collection/components/nv-fieldslider/nv-fieldslider.js +3 -3
  114. package/dist/collection/components/nv-fieldtext/nv-fieldtext.js +3 -3
  115. package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js +3 -3
  116. package/dist/collection/components/nv-fieldtime/nv-fieldtime.js +9 -9
  117. package/dist/collection/components/nv-icon/nv-icon.js +1 -1
  118. package/dist/collection/components/nv-icon/nv-icons.js +6 -0
  119. package/dist/collection/components/nv-icon/nv-icons.js.map +1 -1
  120. package/dist/collection/components/nv-iconbutton/nv-iconbutton.css +4 -0
  121. package/dist/collection/components/nv-iconbutton/nv-iconbutton.js +1 -1
  122. package/dist/collection/components/nv-loader/nv-loader.js +1 -1
  123. package/dist/collection/components/nv-menu/nv-menu.js +1 -1
  124. package/dist/collection/components/nv-menuitem/nv-menuitem.js +2 -2
  125. package/dist/collection/components/nv-popover/nv-popover.js +1 -1
  126. package/dist/collection/components/nv-row/nv-row.js +1 -1
  127. package/dist/collection/components/nv-stack/nv-stack.js +1 -1
  128. package/dist/collection/components/nv-table/nv-table.js +2 -2
  129. package/dist/collection/components/nv-toggle/nv-toggle.css +1 -0
  130. package/dist/collection/components/nv-toggle/nv-toggle.js +2 -2
  131. package/dist/collection/components/nv-togglebutton/nv-togglebutton.docs.js +6 -0
  132. package/dist/collection/components/nv-togglebutton/nv-togglebutton.docs.js.map +1 -0
  133. package/dist/collection/components/nv-togglebutton/nv-togglebutton.js +191 -0
  134. package/dist/collection/components/nv-togglebutton/nv-togglebutton.js.map +1 -0
  135. package/dist/collection/components/nv-togglebutton/styles/nv-togglebutton.css +135 -0
  136. package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.js +56 -0
  137. package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.js.map +1 -0
  138. package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js +324 -0
  139. package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js.map +1 -0
  140. package/dist/collection/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.css +45 -0
  141. package/dist/collection/components/nv-tooltip/nv-tooltip.js +1 -1
  142. package/dist/collection/utils/constants.js +12 -0
  143. package/dist/collection/utils/constants.js.map +1 -1
  144. package/dist/components/index.js +7 -1
  145. package/dist/components/index.js.map +1 -1
  146. package/dist/components/nv-accordion-item.js +1 -1
  147. package/dist/components/nv-accordion.js +4 -4
  148. package/dist/components/nv-alert.js +3 -3
  149. package/dist/components/nv-alert.js.map +1 -1
  150. package/dist/components/nv-avatar.js +2 -2
  151. package/dist/components/nv-badge.js +1 -1
  152. package/dist/components/nv-breadcrumb.js +3 -3
  153. package/dist/components/nv-breadcrumb.js.map +1 -1
  154. package/dist/components/nv-button.js +1 -1
  155. package/dist/components/nv-buttongroup.d.ts +11 -0
  156. package/dist/components/nv-buttongroup.js +221 -0
  157. package/dist/components/nv-buttongroup.js.map +1 -0
  158. package/dist/components/nv-calendar.js +1 -1
  159. package/dist/components/nv-col.js +1 -1
  160. package/dist/components/nv-datagrid.js +6 -6
  161. package/dist/components/nv-datagrid.js.map +1 -1
  162. package/dist/components/nv-datagridcolumn.js +1 -1
  163. package/dist/components/nv-dialog.js +7 -7
  164. package/dist/components/nv-dialogfooter.js +1 -1
  165. package/dist/components/nv-dialogheader.js +1 -1
  166. package/dist/components/nv-fieldcheckbox.js +1 -1
  167. package/dist/components/nv-fielddate.js +12 -12
  168. package/dist/components/nv-fielddaterange.js +12 -12
  169. package/dist/components/nv-fielddropdown.js +8 -8
  170. package/dist/components/nv-fielddropdownitem.js +1 -1
  171. package/dist/components/nv-fielddropdownitemcheck.js +1 -1
  172. package/dist/components/nv-fieldmultiselect.js +399 -41
  173. package/dist/components/nv-fieldmultiselect.js.map +1 -1
  174. package/dist/components/nv-fieldnumber.js +1 -1
  175. package/dist/components/nv-fieldpassword.js +6 -6
  176. package/dist/components/nv-fieldradio.js +4 -4
  177. package/dist/components/nv-fieldradio.js.map +1 -1
  178. package/dist/components/nv-fieldselect.js +8 -8
  179. package/dist/components/nv-fieldslider.js +7 -7
  180. package/dist/components/nv-fieldtext.js +1 -1
  181. package/dist/components/nv-fieldtextarea.js +3 -3
  182. package/dist/components/nv-fieldtime.js +14 -14
  183. package/dist/components/nv-icon.js +1 -1
  184. package/dist/components/nv-iconbutton.js +1 -1
  185. package/dist/components/nv-loader.js +1 -1
  186. package/dist/components/nv-menu.js +4 -4
  187. package/dist/components/nv-menuitem.js +1 -1
  188. package/dist/components/nv-popover.js +1 -1
  189. package/dist/components/nv-row.js +1 -1
  190. package/dist/components/nv-stack.js +1 -1
  191. package/dist/components/nv-table.js +2 -2
  192. package/dist/components/nv-toggle.js +3 -3
  193. package/dist/components/nv-toggle.js.map +1 -1
  194. package/dist/components/nv-togglebutton.d.ts +11 -0
  195. package/dist/components/nv-togglebutton.js +78 -0
  196. package/dist/components/nv-togglebutton.js.map +1 -0
  197. package/dist/components/nv-togglebuttongroup.d.ts +11 -0
  198. package/dist/components/nv-togglebuttongroup.js +196 -0
  199. package/dist/components/nv-togglebuttongroup.js.map +1 -0
  200. package/dist/components/nv-tooltip.js +1 -1
  201. package/dist/components/{p-68ff562f.js → p-0ffb4785.js} +5 -5
  202. package/dist/components/{p-68ff562f.js.map → p-0ffb4785.js.map} +1 -1
  203. package/dist/components/{p-8067d283.js → p-195f46f3.js} +2 -2
  204. package/dist/components/{p-8067d283.js.map → p-195f46f3.js.map} +1 -1
  205. package/dist/components/{p-e4e1a926.js → p-1bb737fa.js} +3 -3
  206. package/dist/components/{p-e4e1a926.js.map → p-1bb737fa.js.map} +1 -1
  207. package/dist/components/{p-db4ba1d9.js → p-2db5d1ab.js} +7 -7
  208. package/dist/components/{p-db4ba1d9.js.map → p-2db5d1ab.js.map} +1 -1
  209. package/dist/components/{p-ba87d9d5.js → p-2ef4fb88.js} +3 -3
  210. package/dist/components/{p-ba87d9d5.js.map → p-2ef4fb88.js.map} +1 -1
  211. package/dist/components/{p-f1df2634.js → p-32e8e42e.js} +2 -2
  212. package/dist/components/{p-f1df2634.js.map → p-32e8e42e.js.map} +1 -1
  213. package/dist/components/{p-6de6866c.js → p-45a625fb.js} +6 -6
  214. package/dist/components/{p-6de6866c.js.map → p-45a625fb.js.map} +1 -1
  215. package/dist/components/{p-025b8a78.js → p-50d0db7b.js} +5 -5
  216. package/dist/components/{p-025b8a78.js.map → p-50d0db7b.js.map} +1 -1
  217. package/dist/components/{p-ed6686a1.js → p-51876ca1.js} +2 -2
  218. package/dist/components/{p-ed6686a1.js.map → p-51876ca1.js.map} +1 -1
  219. package/dist/components/{p-e104c58a.js → p-51a156ff.js} +3 -3
  220. package/dist/components/p-51a156ff.js.map +1 -0
  221. package/dist/components/p-8011513c.js +189 -0
  222. package/dist/components/{p-60064345.js.map → p-8011513c.js.map} +1 -1
  223. package/dist/components/{p-82e5674c.js → p-8aee1010.js} +116 -38
  224. package/dist/components/p-8aee1010.js.map +1 -0
  225. package/dist/components/{p-79e6b6a2.js → p-9fdaea9a.js} +5 -5
  226. package/dist/components/p-9fdaea9a.js.map +1 -0
  227. package/dist/components/{p-6460318d.js → p-a1fe0a5d.js} +4 -4
  228. package/dist/components/p-a1fe0a5d.js.map +1 -0
  229. package/dist/components/{p-1f505531.js → p-a3ddec4c.js} +15 -1
  230. package/dist/components/p-a3ddec4c.js.map +1 -0
  231. package/dist/components/{p-0143cee0.js → p-a5002d14.js} +6 -6
  232. package/dist/components/{p-0143cee0.js.map → p-a5002d14.js.map} +1 -1
  233. package/dist/components/{p-30f970c3.js → p-b659b999.js} +3 -3
  234. package/dist/components/{p-30f970c3.js.map → p-b659b999.js.map} +1 -1
  235. package/dist/components/{p-5d5668f0.js → p-cf06032d.js} +4 -4
  236. package/dist/components/{p-5d5668f0.js.map → p-cf06032d.js.map} +1 -1
  237. package/dist/components/{p-dfd2d4f0.js → p-fda58a76.js} +2 -2
  238. package/dist/components/{p-dfd2d4f0.js.map → p-fda58a76.js.map} +1 -1
  239. package/dist/esm/{constants-4faa1fae.js → constants-23aaef7b.js} +15 -1
  240. package/dist/esm/constants-23aaef7b.js.map +1 -0
  241. package/dist/esm/index-a1936cd0.js +12 -0
  242. package/dist/esm/index.js +7 -1
  243. package/dist/esm/index.js.map +1 -1
  244. package/dist/esm/loader.js +1 -1
  245. package/dist/esm/native.js +1 -1
  246. package/dist/esm/nv-accordion-item.entry.js +1 -1
  247. package/dist/esm/nv-accordion-item.entry.js.map +1 -1
  248. package/dist/esm/nv-alert.entry.js +2 -2
  249. package/dist/esm/nv-alert.entry.js.map +1 -1
  250. package/dist/esm/nv-avatar.entry.js +1 -1
  251. package/dist/esm/nv-badge_2.entry.js +2 -2
  252. package/dist/esm/nv-badge_2.entry.js.map +1 -1
  253. package/dist/esm/nv-breadcrumb.entry.js +1 -1
  254. package/dist/esm/nv-breadcrumb.entry.js.map +1 -1
  255. package/dist/esm/nv-button.entry.js +2 -2
  256. package/dist/esm/nv-button.entry.js.map +1 -1
  257. package/dist/esm/nv-buttongroup.entry.js +194 -0
  258. package/dist/esm/nv-buttongroup.entry.js.map +1 -0
  259. package/dist/esm/nv-calendar.entry.js +114 -37
  260. package/dist/esm/nv-calendar.entry.js.map +1 -1
  261. package/dist/esm/nv-col.entry.js +1 -1
  262. package/dist/esm/nv-datagrid.entry.js +4 -4
  263. package/dist/esm/nv-datagrid.entry.js.map +1 -1
  264. package/dist/esm/nv-datagridcolumn.entry.js +1 -1
  265. package/dist/esm/nv-dialog.entry.js +2 -2
  266. package/dist/esm/nv-dialogfooter_2.entry.js +3 -3
  267. package/dist/esm/nv-fieldcheckbox.entry.js +5 -5
  268. package/dist/esm/nv-fieldcheckbox.entry.js.map +1 -1
  269. package/dist/esm/nv-fielddate.entry.js +6 -6
  270. package/dist/esm/nv-fielddaterange.entry.js +6 -6
  271. package/dist/esm/nv-fielddropdown.entry.js +3 -3
  272. package/dist/esm/nv-fielddropdownitem.entry.js +1 -1
  273. package/dist/esm/nv-fieldmultiselect.entry.js +378 -28
  274. package/dist/esm/nv-fieldmultiselect.entry.js.map +1 -1
  275. package/dist/esm/nv-fieldnumber.entry.js +3 -3
  276. package/dist/esm/nv-fieldpassword.entry.js +3 -3
  277. package/dist/esm/nv-fieldradio.entry.js +4 -4
  278. package/dist/esm/nv-fieldradio.entry.js.map +1 -1
  279. package/dist/esm/nv-fieldselect.entry.js +5 -5
  280. package/dist/esm/nv-fieldslider.entry.js +3 -3
  281. package/dist/esm/nv-fieldtext.entry.js +3 -3
  282. package/dist/esm/nv-fieldtextarea.entry.js +3 -3
  283. package/dist/esm/nv-fieldtime.entry.js +10 -10
  284. package/dist/esm/nv-icon.entry.js +3 -3
  285. package/dist/esm/nv-icon.entry.js.map +1 -1
  286. package/dist/esm/nv-iconbutton_2.entry.js +3 -3
  287. package/dist/esm/nv-iconbutton_2.entry.js.map +1 -1
  288. package/dist/esm/nv-menu.entry.js +1 -1
  289. package/dist/esm/nv-menuitem.entry.js +1 -1
  290. package/dist/esm/nv-popover.entry.js +1 -1
  291. package/dist/esm/nv-row.entry.js +1 -1
  292. package/dist/esm/nv-stack.entry.js +1 -1
  293. package/dist/esm/nv-table.entry.js +2 -2
  294. package/dist/esm/nv-toggle.entry.js +3 -3
  295. package/dist/esm/nv-toggle.entry.js.map +1 -1
  296. package/dist/esm/nv-togglebutton.entry.js +54 -0
  297. package/dist/esm/nv-togglebutton.entry.js.map +1 -0
  298. package/dist/esm/nv-togglebuttongroup.entry.js +168 -0
  299. package/dist/esm/nv-togglebuttongroup.entry.js.map +1 -0
  300. package/dist/esm/nv-tooltip.entry.js +1 -1
  301. package/dist/native/index.esm.js +1 -1
  302. package/dist/native/index.esm.js.map +1 -1
  303. package/dist/native/native.css +1 -1
  304. package/dist/native/native.esm.js +1 -1
  305. package/dist/native/native.esm.js.map +1 -1
  306. package/dist/native/{p-2a6783ca.entry.js → p-0da8f0d1.entry.js} +2 -2
  307. package/dist/native/{p-2a6783ca.entry.js.map → p-0da8f0d1.entry.js.map} +1 -1
  308. package/dist/native/p-0ef94dae.entry.js +2 -0
  309. package/dist/native/{p-1ad1bff9.entry.js.map → p-0ef94dae.entry.js.map} +1 -1
  310. package/dist/native/p-13032ec1.entry.js +2 -0
  311. package/dist/native/p-13032ec1.entry.js.map +1 -0
  312. package/dist/native/p-184032cb.entry.js +2 -0
  313. package/dist/native/{p-a73fa60a.entry.js.map → p-184032cb.entry.js.map} +1 -1
  314. package/dist/native/p-2197ffdf.entry.js +2 -0
  315. package/dist/native/{p-fa81b77f.entry.js.map → p-2197ffdf.entry.js.map} +1 -1
  316. package/dist/native/p-234cfa2e.entry.js +2 -0
  317. package/dist/native/p-2a3325fb.entry.js +2 -0
  318. package/dist/native/p-2a3325fb.entry.js.map +1 -0
  319. package/dist/native/{p-3f139780.entry.js → p-2d647761.entry.js} +2 -2
  320. package/dist/native/{p-ff248eb8.entry.js → p-348c6bb4.entry.js} +2 -2
  321. package/dist/native/p-397c0fca.entry.js +2 -0
  322. package/dist/native/{p-51a57a3a.entry.js.map → p-397c0fca.entry.js.map} +1 -1
  323. package/dist/native/{p-55cd3d62.entry.js → p-3da64006.entry.js} +2 -2
  324. package/dist/native/p-3ed84cd9.entry.js +2 -0
  325. package/dist/native/{p-fcd52432.entry.js.map → p-3ed84cd9.entry.js.map} +1 -1
  326. package/dist/native/{p-3ff7a912.entry.js → p-3fcaac6d.entry.js} +2 -2
  327. package/dist/native/{p-b7ec9a1b.entry.js → p-4302824a.entry.js} +2 -2
  328. package/dist/native/p-43071c3b.entry.js +2 -0
  329. package/dist/native/p-44dd9a4c.entry.js +2 -0
  330. package/dist/native/p-44dd9a4c.entry.js.map +1 -0
  331. package/dist/native/p-464bb197.entry.js +2 -0
  332. package/dist/native/p-464bb197.entry.js.map +1 -0
  333. package/dist/native/{p-916acbd3.entry.js → p-49504fd6.entry.js} +2 -2
  334. package/dist/native/{p-bc77cac1.entry.js → p-553778e6.entry.js} +2 -2
  335. package/dist/native/p-553778e6.entry.js.map +1 -0
  336. package/dist/native/{p-bee62b2b.entry.js → p-5f0776cb.entry.js} +2 -2
  337. package/dist/native/p-62032cd9.entry.js +2 -0
  338. package/dist/native/p-62032cd9.entry.js.map +1 -0
  339. package/dist/native/{p-11012998.entry.js → p-676447d7.entry.js} +3 -3
  340. package/dist/native/{p-16ef7dd4.entry.js → p-681f2bac.entry.js} +2 -2
  341. package/dist/native/{p-4b15cff3.entry.js → p-7f0d576b.entry.js} +2 -2
  342. package/dist/native/{p-68edb2e8.entry.js → p-85f8f11a.entry.js} +2 -2
  343. package/dist/native/{p-0e005d95.entry.js → p-888ad58e.entry.js} +2 -2
  344. package/dist/native/{p-34bf336f.entry.js → p-92931ab8.entry.js} +2 -2
  345. package/dist/native/{p-f00a4552.entry.js → p-94dc9c41.entry.js} +2 -2
  346. package/dist/native/{p-85a54ef2.entry.js → p-9c5d6827.entry.js} +2 -2
  347. package/dist/native/{p-08452012.entry.js → p-9f451b8a.entry.js} +3 -3
  348. package/dist/native/{p-08452012.entry.js.map → p-9f451b8a.entry.js.map} +1 -1
  349. package/dist/native/{p-1f932a4b.entry.js → p-aacd8789.entry.js} +2 -2
  350. package/dist/native/p-ac5496e7.entry.js +2 -0
  351. package/dist/native/{p-9ea3d30d.entry.js → p-ad2cc829.entry.js} +2 -2
  352. package/dist/native/p-b2442d4b.entry.js +2 -0
  353. package/dist/native/{p-a36dc25a.entry.js.map → p-b2442d4b.entry.js.map} +1 -1
  354. package/dist/native/{p-67c34b8c.entry.js → p-b58fb522.entry.js} +2 -2
  355. package/dist/native/p-ba9906b7.entry.js +2 -0
  356. package/dist/native/{p-64cb38e6.entry.js.map → p-ba9906b7.entry.js.map} +1 -1
  357. package/dist/native/{p-f540db71.entry.js → p-dd023fd6.entry.js} +2 -2
  358. package/dist/native/p-f033c4ce.entry.js +2 -0
  359. package/dist/native/p-f033c4ce.entry.js.map +1 -0
  360. package/dist/native/{p-051db87c.entry.js → p-fb672f90.entry.js} +2 -2
  361. package/dist/native/p-fc9564b3.js +2 -0
  362. package/dist/native/p-fc9564b3.js.map +1 -0
  363. package/dist/types/components/nv-buttongroup/nv-buttongroup.d.ts +50 -0
  364. package/dist/types/components/nv-buttongroup/nv-buttongroup.docs.d.ts +4 -0
  365. package/dist/types/components/nv-buttongroup/nv-buttongroup.utils.d.ts +25 -0
  366. package/dist/types/components/nv-buttongroup/test/nv-buttongroup.utils.test.d.ts +1 -0
  367. package/dist/types/components/nv-calendar/nv-calendar.d.ts +11 -1
  368. package/dist/types/components/nv-calendar/nv-calendar.utils.d.ts +31 -0
  369. package/dist/types/components/nv-calendar/partials/calendar-grid.d.ts +11 -1
  370. package/dist/types/components/nv-calendar/partials/day-cell.d.ts +7 -1
  371. package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.d.ts +116 -23
  372. package/dist/types/components/nv-icon/nv-icons.d.ts +1 -1
  373. package/dist/types/components/nv-togglebutton/nv-togglebutton.d.ts +46 -0
  374. package/dist/types/components/nv-togglebutton/nv-togglebutton.docs.d.ts +4 -0
  375. package/dist/types/components/nv-togglebuttongroup/nv-togglebuttongroup.d.ts +80 -0
  376. package/dist/types/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.d.ts +4 -0
  377. package/dist/types/components.d.ts +289 -2
  378. package/dist/types/utils/constants.d.ts +10 -0
  379. package/dist/vscode-data.json +189 -0
  380. package/hydrate/index.js +1058 -154
  381. package/hydrate/index.mjs +1058 -154
  382. package/package.json +14 -2
  383. package/dist/cjs/constants-8fb8ccc0.js.map +0 -1
  384. package/dist/components/p-1f505531.js.map +0 -1
  385. package/dist/components/p-60064345.js +0 -189
  386. package/dist/components/p-6460318d.js.map +0 -1
  387. package/dist/components/p-79e6b6a2.js.map +0 -1
  388. package/dist/components/p-82e5674c.js.map +0 -1
  389. package/dist/components/p-e104c58a.js.map +0 -1
  390. package/dist/esm/constants-4faa1fae.js.map +0 -1
  391. package/dist/native/p-10ce53ea.entry.js +0 -2
  392. package/dist/native/p-1ad1bff9.entry.js +0 -2
  393. package/dist/native/p-4a533dd8.entry.js +0 -2
  394. package/dist/native/p-4a533dd8.entry.js.map +0 -1
  395. package/dist/native/p-51a57a3a.entry.js +0 -2
  396. package/dist/native/p-64cb38e6.entry.js +0 -2
  397. package/dist/native/p-73c08f3b.entry.js +0 -2
  398. package/dist/native/p-73c08f3b.entry.js.map +0 -1
  399. package/dist/native/p-a36dc25a.entry.js +0 -2
  400. package/dist/native/p-a50f3850.entry.js +0 -2
  401. package/dist/native/p-a73fa60a.entry.js +0 -2
  402. package/dist/native/p-b3f9db23.entry.js +0 -2
  403. package/dist/native/p-b3f9db23.entry.js.map +0 -1
  404. package/dist/native/p-bc77cac1.entry.js.map +0 -1
  405. package/dist/native/p-e2d0a77d.js +0 -2
  406. package/dist/native/p-e2d0a77d.js.map +0 -1
  407. package/dist/native/p-ec92ee7a.entry.js +0 -2
  408. package/dist/native/p-fa81b77f.entry.js +0 -2
  409. package/dist/native/p-fcd52432.entry.js +0 -2
  410. /package/dist/native/{p-ec92ee7a.entry.js.map → p-234cfa2e.entry.js.map} +0 -0
  411. /package/dist/native/{p-3f139780.entry.js.map → p-2d647761.entry.js.map} +0 -0
  412. /package/dist/native/{p-ff248eb8.entry.js.map → p-348c6bb4.entry.js.map} +0 -0
  413. /package/dist/native/{p-55cd3d62.entry.js.map → p-3da64006.entry.js.map} +0 -0
  414. /package/dist/native/{p-3ff7a912.entry.js.map → p-3fcaac6d.entry.js.map} +0 -0
  415. /package/dist/native/{p-b7ec9a1b.entry.js.map → p-4302824a.entry.js.map} +0 -0
  416. /package/dist/native/{p-10ce53ea.entry.js.map → p-43071c3b.entry.js.map} +0 -0
  417. /package/dist/native/{p-916acbd3.entry.js.map → p-49504fd6.entry.js.map} +0 -0
  418. /package/dist/native/{p-bee62b2b.entry.js.map → p-5f0776cb.entry.js.map} +0 -0
  419. /package/dist/native/{p-11012998.entry.js.map → p-676447d7.entry.js.map} +0 -0
  420. /package/dist/native/{p-16ef7dd4.entry.js.map → p-681f2bac.entry.js.map} +0 -0
  421. /package/dist/native/{p-4b15cff3.entry.js.map → p-7f0d576b.entry.js.map} +0 -0
  422. /package/dist/native/{p-68edb2e8.entry.js.map → p-85f8f11a.entry.js.map} +0 -0
  423. /package/dist/native/{p-0e005d95.entry.js.map → p-888ad58e.entry.js.map} +0 -0
  424. /package/dist/native/{p-34bf336f.entry.js.map → p-92931ab8.entry.js.map} +0 -0
  425. /package/dist/native/{p-f00a4552.entry.js.map → p-94dc9c41.entry.js.map} +0 -0
  426. /package/dist/native/{p-85a54ef2.entry.js.map → p-9c5d6827.entry.js.map} +0 -0
  427. /package/dist/native/{p-1f932a4b.entry.js.map → p-aacd8789.entry.js.map} +0 -0
  428. /package/dist/native/{p-a50f3850.entry.js.map → p-ac5496e7.entry.js.map} +0 -0
  429. /package/dist/native/{p-9ea3d30d.entry.js.map → p-ad2cc829.entry.js.map} +0 -0
  430. /package/dist/native/{p-67c34b8c.entry.js.map → p-b58fb522.entry.js.map} +0 -0
  431. /package/dist/native/{p-f540db71.entry.js.map → p-dd023fd6.entry.js.map} +0 -0
  432. /package/dist/native/{p-051db87c.entry.js.map → p-fb672f90.entry.js.map} +0 -0
package/dist/esm/nv-badge_2.entry.js CHANGED
@@ -5,7 +5,7 @@ import { u as useFade } from './fade.animation-71e8e34c.js';
5
5
  import './stylefire.es-74da334a.js';
6
6
  import { t as timeline } from './timeline.animation-adf35ecb.js';
7
7
 
8
- const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge:not(.with-gap).is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge.badge-error{color:var(--color-feedback-error-low-text);background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border)}nv-badge.badge-error .close:focus,nv-badge.badge-error .close:focus-within{outline:none}nv-badge.badge-error .close:focus-visible,nv-badge.badge-error .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-badge.badge-information{color:var(--color-feedback-information-low-text);background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border)}nv-badge.badge-information .close:focus,nv-badge.badge-information .close:focus-within{outline:none}nv-badge.badge-information .close:focus-visible,nv-badge.badge-information .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-badge.badge-neutral{color:var(--color-feedback-neutral-low-text);background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border)}nv-badge.badge-neutral .close:focus,nv-badge.badge-neutral .close:focus-within{outline:none}nv-badge.badge-neutral .close:focus-visible,nv-badge.badge-neutral .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-badge.badge-success{color:var(--color-feedback-success-low-text);background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border)}nv-badge.badge-success .close:focus,nv-badge.badge-success .close:focus-within{outline:none}nv-badge.badge-success .close:focus-visible,nv-badge.badge-success .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-badge.badge-warning{color:var(--color-feedback-warning-low-text);background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border)}nv-badge.badge-warning .close:focus,nv-badge.badge-warning .close:focus-within{outline:none}nv-badge.badge-warning .close:focus-visible,nv-badge.badge-warning .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-badge.badge-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-amber .close:focus,nv-badge.badge-amber .close:focus-within{outline:none}nv-badge.badge-amber .close:focus-visible,nv-badge.badge-amber .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-orange .close:focus,nv-badge.badge-orange .close:focus-within{outline:none}nv-badge.badge-orange .close:focus-visible,nv-badge.badge-orange .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-turquoise .close:focus,nv-badge.badge-turquoise .close:focus-within{outline:none}nv-badge.badge-turquoise .close:focus-visible,nv-badge.badge-turquoise .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-crimson .close:focus,nv-badge.badge-crimson .close:focus-within{outline:none}nv-badge.badge-crimson .close:focus-visible,nv-badge.badge-crimson .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-lime .close:focus,nv-badge.badge-lime .close:focus-within{outline:none}nv-badge.badge-lime .close:focus-visible,nv-badge.badge-lime .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-petrol{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-petrol .close:focus,nv-badge.badge-petrol .close:focus-within{outline:none}nv-badge.badge-petrol .close:focus-visible,nv-badge.badge-petrol .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-petrol nv-icon{color:var(--color-rainbow-8-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important;text-align:center}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
8
+ const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge:not(.with-gap).is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge.badge-error{color:var(--color-feedback-error-low-text);background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border)}nv-badge.badge-error .close:focus,nv-badge.badge-error .close:focus-within{outline:none}nv-badge.badge-error .close:focus-visible,nv-badge.badge-error .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-badge.badge-information{color:var(--color-feedback-information-low-text);background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border)}nv-badge.badge-information .close:focus,nv-badge.badge-information .close:focus-within{outline:none}nv-badge.badge-information .close:focus-visible,nv-badge.badge-information .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-badge.badge-neutral{color:var(--color-feedback-neutral-low-text);background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border)}nv-badge.badge-neutral .close:focus,nv-badge.badge-neutral .close:focus-within{outline:none}nv-badge.badge-neutral .close:focus-visible,nv-badge.badge-neutral .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-badge.badge-success{color:var(--color-feedback-success-low-text);background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border)}nv-badge.badge-success .close:focus,nv-badge.badge-success .close:focus-within{outline:none}nv-badge.badge-success .close:focus-visible,nv-badge.badge-success .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-badge.badge-warning{color:var(--color-feedback-warning-low-text);background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border)}nv-badge.badge-warning .close:focus,nv-badge.badge-warning .close:focus-within{outline:none}nv-badge.badge-warning .close:focus-visible,nv-badge.badge-warning .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-badge.badge-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-amber .close:focus,nv-badge.badge-amber .close:focus-within{outline:none}nv-badge.badge-amber .close:focus-visible,nv-badge.badge-amber .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-orange .close:focus,nv-badge.badge-orange .close:focus-within{outline:none}nv-badge.badge-orange .close:focus-visible,nv-badge.badge-orange .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-turquoise .close:focus,nv-badge.badge-turquoise .close:focus-within{outline:none}nv-badge.badge-turquoise .close:focus-visible,nv-badge.badge-turquoise .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-crimson .close:focus,nv-badge.badge-crimson .close:focus-within{outline:none}nv-badge.badge-crimson .close:focus-visible,nv-badge.badge-crimson .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-lime .close:focus,nv-badge.badge-lime .close:focus-within{outline:none}nv-badge.badge-lime .close:focus-visible,nv-badge.badge-lime .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-petrol{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-petrol .close:focus,nv-badge.badge-petrol .close:focus-within{outline:none}nv-badge.badge-petrol .close:focus-visible,nv-badge.badge-petrol .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));outline-offset:calc(var(--focus-outline-offset) * 0.2);z-index:111}nv-badge.badge-petrol nv-icon{color:var(--color-rainbow-8-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important;text-align:center}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
9
9
  const NvBadgeStyle0 = nvBadgeCss;
10
10
 
11
11
  const NvBadge = class {
@@ -193,7 +193,7 @@ const NvFielddropdownitemcheck = class {
193
193
  };
194
194
  }
195
195
  render() {
196
- return (h(Host, { key: '82abe79dd061f60e380f033027f799121769f89e', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: '505181c56faacb09e55c428d91287d96e1c3b72a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: '95a53b7d4ec735fd3256505b57e2a497b475f511' }), h("slot", { key: '137d5e2b3046417bbc90c0bd2dd10b846d1dfd53', name: "main" }), h("slot", { key: '47d4a73e401186b7bc7a18aaad82018f0ccc1e2f', name: "label" }), h("slot", { key: 'ff5c752d386c282635a97ad2bcb8858571aff7e9', name: "description" }))));
196
+ return (h(Host, { key: '869eb969c0cff66f1947673e5aa3e0c677a07421', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: '4bbe45597bdd0f30c8e9a255e52d08be476fab1a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: 'f53f44e3fdb78894e9bb37fa455b1407efea17b1' }), h("slot", { key: 'aacd757c1fec541a4fc7b4f2683281aef31ee135', name: "main" }), h("slot", { key: 'ef2f761a3a1f05dcba6145efc89830ddc82af27d', name: "label" }), h("slot", { key: '610700f871b524f1f89538d03bd6c16167e3b24e', name: "description" }))));
197
197
  }
198
198
  get el() { return getElement(this); }
199
199
  };
package/dist/esm/nv-badge_2.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nv-badge.nv-fielddropdownitemcheck.entry.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants */\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus-ring(\n if(\n str-index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n and not\n str-index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n */\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /**\n * The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * The location of the icon in the badge.\n * @deprecated only leadIcon now.\n */\n @Prop({ reflect: true })\n readonly iconLocation: 'left' | 'right';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n */\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /**\n * Main content of the badge.\n */\n @Prop({ reflect: true })\n readonly label?: string | null = null;\n\n /**\n * The lead icon of the badge.\n */\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string | null = null;\n\n /**\n * Whether the badge is dismissible.\n */\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /**\n * Controls the visibility of the badge. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /**\n * When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n */\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the badge is dismissed.\n */\n @Event()\n closeClicked: EventEmitter<void>;\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n */\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /**\n * Handles the icon prop change.\n * @param {string} icon - The new icon value.\n */\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /**\n * Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n /**\n * Component will load.\n */\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the close button click.\n */\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible || this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n slot-fb,\n span {\n all: unset;\n }\n\n cursor: pointer;\n display: flex;\n padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n border-radius: var(--list-dropdown-item-radius);\n\n &:hover {\n background-color: var(--components-list-dropdown-item-background-hover);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Indicates whether the checkbox is selected.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * The value associated with this item.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed alongside the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * A description providing additional context or information about the\n * checkbox.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /**\n * The group this item belongs to, if applicable.\n */\n @Prop({ reflect: true })\n readonly group?: string;\n\n /**\n * Disables the item, preventing any user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n */\n @Event()\n itemChecked: EventEmitter<{\n /**\n * The value associated with this item\n */\n value: string | undefined;\n /**\n * Whether the checkbox is currently checked\n */\n checked: boolean;\n /**\n * The group this item belongs to, if any\n */\n group?: string | undefined;\n }>;\n\n /**\n * when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n */\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /** Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label || this.value}\n label={this.label || this.value}\n label-placement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n role=\"option\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n >\n <slot></slot>\n <slot name=\"main\"></slot>\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </nv-fieldcheckbox>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nv-badge.nv-fielddropdownitemcheck.entry.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants */\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus-ring(\n if(\n str-index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n and not\n str-index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n */\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /**\n * The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * The location of the icon in the badge.\n * @deprecated only leadIcon now.\n */\n @Prop({ reflect: true })\n readonly iconLocation: 'left' | 'right';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n */\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /**\n * Main content of the badge.\n */\n @Prop({ reflect: true })\n readonly label?: string | null = null;\n\n /**\n * The lead icon of the badge.\n */\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string | null = null;\n\n /**\n * Whether the badge is dismissible.\n */\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /**\n * Controls the visibility of the badge. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /**\n * When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n */\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the badge is dismissed.\n */\n @Event()\n closeClicked: EventEmitter<void>;\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n */\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /**\n * Handles the icon prop change.\n * @param {string} icon - The new icon value.\n */\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /**\n * Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n /**\n * Component will load.\n */\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the close button click.\n */\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible || this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n slot-fb,\n span {\n all: unset;\n }\n\n cursor: pointer;\n display: flex;\n padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n border-radius: var(--list-dropdown-item-radius);\n\n &:hover {\n background-color: var(--components-list-dropdown-item-background-hover);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Indicates whether the checkbox is selected.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * The value associated with this item.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed alongside the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * A description providing additional context or information about the\n * checkbox.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /**\n * The group this item belongs to, if applicable.\n */\n @Prop({ reflect: true })\n readonly group?: string;\n\n /**\n * Disables the item, preventing any user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n */\n @Event()\n itemChecked: EventEmitter<{\n /**\n * The value associated with this item\n */\n value: string | undefined;\n /**\n * Whether the checkbox is currently checked\n */\n checked: boolean;\n /**\n * The group this item belongs to, if any\n */\n group?: string | undefined;\n }>;\n\n /**\n * when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n */\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /** Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label || this.value}\n label={this.label || this.value}\n labelPlacement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n >\n <slot></slot>\n <slot name=\"main\"></slot>\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </nv-fieldcheckbox>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/nv-breadcrumb.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-a1936cd0.js';
2
2
  import { c as clsx } from './clsx-297c1ffe.js';
3
3
 
4
- const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
4
+ const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
5
5
  const NvBreadcrumbStyle0 = nvBreadcrumbCss;
6
6
 
7
7
  const NvBreadcrumb = class {
package/dist/esm/nv-breadcrumb.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nv-breadcrumb.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,6+DAA6+D,CAAC;AACtgE,2BAAe,eAAe;;MCUjB,YAAY;IALzB;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;","names":[],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as focus;\n@use \"../../styles/utils\" as utils;\n\n@mixin root-styles() {\n display: flex;\n align-items: center;\n color: var(--components-breadcrumb-text);\n font-size: var(--font-size-sm);\n font-style: normal;\n font-weight: 500;\n line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n display: inline-flex;\n align-self: center;\n color: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n line-height: inherit;\n text-decoration: none;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin button-styles() {\n height: 20px;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin separator-styles() {\n display: inline-flex;\n padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1-5);\n padding: var(--spacing-1);\n\n a,\n button {\n @include link-styles();\n }\n}\n\nnv-breadcrumb {\n @include root-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n ul {\n @include list-styles();\n }\n & > a,\n & > button {\n @include link-styles();\n }\n span[data-scope=\"separator\"] {\n @include separator-styles();\n }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n */\n@Component({\n tag: 'nv-breadcrumb',\n styleUrl: 'nv-breadcrumb.scss',\n shadow: false,\n})\nexport class NvBreadcrumb {\n @Element() el: HTMLNvBreadcrumbElement;\n private popoverTrigger!: Element;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n * in a dropdown. Use default for a single item. When passing multiple items\n * as collapsed, make sure to wrap you links in list tags\n */\n @Prop({ reflect: true })\n readonly type: 'collapsed' | 'default' = 'default';\n\n /**\n * Add an optional tooltip to provide extra information about the breadcrumb.\n */\n @Prop({ reflect: true })\n readonly tooltip: string;\n\n /**\n * Use this to highlight the breadcrumb as the current page in your\n * navigation. It also makes the page clearer to screen readers with\n * aria-current=\"location\".\n */\n @Prop({ reflect: true })\n readonly current: boolean;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n // Force a re-render to pass the popoverTrigger ref to the popovers\n if (this.type === 'collapsed') forceUpdate(this);\n }\n\n componentWillLoad() {\n if (this.type === 'default' && this.tooltip) {\n this.popoverTrigger = Array.from(this.el.children).find(\n child => child.getAttribute('slot') === null,\n );\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"listitem\"\n aria-current={this.current ? 'location' : undefined}\n class={clsx({ 'visually-hidden': this.current })}\n >\n {this.type === 'collapsed' ? (\n <button ref={el => (this.popoverTrigger = el)}>...</button>\n ) : (\n <slot></slot>\n )}\n {this.tooltip && (\n <nv-tooltip\n message={this.tooltip}\n triggerElement={this.popoverTrigger}\n placement=\"top\"\n ></nv-tooltip>\n )}\n {this.type === 'collapsed' && (\n <nv-popover\n triggerMode=\"click\"\n groupName=\"breadcrumbs\"\n triggerElement={this.popoverTrigger}\n >\n <ul slot=\"content\">\n <slot></slot>\n </ul>\n </nv-popover>\n )}\n <span data-scope=\"separator\">/</span>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"version":3}
1
+ {"file":"nv-breadcrumb.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,qgEAAqgE,CAAC;AAC9hE,2BAAe,eAAe;;MCUjB,YAAY;IALzB;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;","names":[],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as focus;\n@use \"../../styles/utils\" as utils;\n\n@mixin root-styles() {\n display: flex;\n align-items: center;\n color: var(--components-breadcrumb-text);\n font-size: var(--font-size-sm);\n font-style: normal;\n font-weight: 500;\n line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n display: inline-flex;\n align-self: center;\n color: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n line-height: inherit;\n text-decoration: none;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin button-styles() {\n height: 20px;\n @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n &:hover {\n text-decoration: underline;\n color: var(--components-breadcrumb-text-hover);\n }\n}\n\n@mixin separator-styles() {\n display: inline-flex;\n padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1-5);\n padding: var(--spacing-1);\n\n a,\n button {\n @include link-styles();\n }\n}\n\nnv-breadcrumb {\n @include root-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n ul {\n @include list-styles();\n }\n & > a,\n & > button {\n @include link-styles();\n }\n span[data-scope=\"separator\"] {\n @include separator-styles();\n }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n */\n@Component({\n tag: 'nv-breadcrumb',\n styleUrl: 'nv-breadcrumb.scss',\n shadow: false,\n})\nexport class NvBreadcrumb {\n @Element() el: HTMLNvBreadcrumbElement;\n private popoverTrigger!: Element;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n * in a dropdown. Use default for a single item. When passing multiple items\n * as collapsed, make sure to wrap you links in list tags\n */\n @Prop({ reflect: true })\n readonly type: 'collapsed' | 'default' = 'default';\n\n /**\n * Add an optional tooltip to provide extra information about the breadcrumb.\n */\n @Prop({ reflect: true })\n readonly tooltip: string;\n\n /**\n * Use this to highlight the breadcrumb as the current page in your\n * navigation. It also makes the page clearer to screen readers with\n * aria-current=\"location\".\n */\n @Prop({ reflect: true })\n readonly current: boolean;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n // Force a re-render to pass the popoverTrigger ref to the popovers\n if (this.type === 'collapsed') forceUpdate(this);\n }\n\n componentWillLoad() {\n if (this.type === 'default' && this.tooltip) {\n this.popoverTrigger = Array.from(this.el.children).find(\n child => child.getAttribute('slot') === null,\n );\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"listitem\"\n aria-current={this.current ? 'location' : undefined}\n class={clsx({ 'visually-hidden': this.current })}\n >\n {this.type === 'collapsed' ? (\n <button ref={el => (this.popoverTrigger = el)}>...</button>\n ) : (\n <slot></slot>\n )}\n {this.tooltip && (\n <nv-tooltip\n message={this.tooltip}\n triggerElement={this.popoverTrigger}\n placement=\"top\"\n ></nv-tooltip>\n )}\n {this.type === 'collapsed' && (\n <nv-popover\n triggerMode=\"click\"\n groupName=\"breadcrumbs\"\n triggerElement={this.popoverTrigger}\n >\n <ul slot=\"content\">\n <slot></slot>\n </ul>\n </nv-popover>\n )}\n <span data-scope=\"separator\">/</span>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"version":3}
package/dist/esm/nv-button.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, h, H as Host, g as getElement } from './index-a1936cd0.js';
2
- import { B as ButtonType, b as ButtonSize } from './constants-4faa1fae.js';
2
+ import { B as ButtonType, b as ButtonSize } from './constants-23aaef7b.js';
3
3
 
4
- const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
4
+ const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
5
5
  const NvButtonStyle0 = nvButtonCss;
6
6
 
7
7
  const NvButton = class {
package/dist/esm/nv-button.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nv-button.entry.js","mappings":"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","names":[],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $emphases {\n &[emphasis=\"#{$emphasis}\"] {\n @include emphasis-styles($emphasis);\n\n &[active]:not([active=\"false\"]) {\n @include active-styles($emphasis);\n }\n\n &[danger]:not([danger=\"false\"]) {\n @include danger-styles($emphasis);\n }\n }\n }\n\n &[fluid]:not([fluid=\"false\"]) {\n @include fluid-styles();\n }\n\n &[loading]:not([loading=\"false\"]) {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n}\n","import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /**\n * Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /**\n * Applies styling that visually indicates the button represents a dangerous\n * action.\n */\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /**\n * Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n */\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /**\n * Disables the button, preventing user interaction.\n */\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /**\n * Allows the button to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /**\n * Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n */\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /**\n * Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n */\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n */\n private handleButtonClick = (event: Event): void => {\n if (this.loading || this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (\n this.type !== ButtonType.Button &&\n (this.form || this.internals?.form)\n ) {\n this.processFormAction();\n } else if (this.form && this.type === ButtonType.Button) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /**\n * Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n */\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form || 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1
+ {"file":"nv-button.entry.js","mappings":"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","names":[],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $emphases {\n &[emphasis=\"#{$emphasis}\"] {\n @include emphasis-styles($emphasis);\n\n &[active]:not([active=\"false\"]) {\n @include active-styles($emphasis);\n }\n\n &[danger]:not([danger=\"false\"]) {\n @include danger-styles($emphasis);\n }\n }\n }\n\n &[fluid]:not([fluid=\"false\"]) {\n @include fluid-styles();\n }\n\n &[loading]:not([loading=\"false\"]) {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n}\n","import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /**\n * Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /**\n * Applies styling that visually indicates the button represents a dangerous\n * action.\n */\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /**\n * Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n */\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /**\n * Disables the button, preventing user interaction.\n */\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /**\n * Allows the button to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /**\n * Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n */\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /**\n * Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n */\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n */\n private handleButtonClick = (event: Event): void => {\n if (this.loading || this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (\n this.type !== ButtonType.Button &&\n (this.form || this.internals?.form)\n ) {\n this.processFormAction();\n } else if (this.form && this.type === ButtonType.Button) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /**\n * Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n */\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form || 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
package/dist/esm/nv-buttongroup.entry.js ADDED
@@ -0,0 +1,194 @@
1
+ import { r as registerInstance, h, H as Host, g as getElement } from './index-a1936cd0.js';
2
+
3
+ /**
4
+ * Utility functions for nv-buttongroup.
5
+ */
6
+ /**
7
+ * Recursively finds the first button or link element within a container
8
+ * @param {HTMLElement} element - The HTML element to search within
9
+ * @returns {HTMLElement | null} The first button or link element found, or null if none exists
10
+ */
11
+ function findFirstButtonOrLink(element) {
12
+ // Check if the element itself is a button or link
13
+ const tagName = element.tagName.toLowerCase();
14
+ if (tagName === 'nv-button' ||
15
+ tagName === 'nv-iconbutton' ||
16
+ tagName === 'a') {
17
+ return element;
18
+ }
19
+ // Recursively search through children
20
+ for (const child of Array.from(element.children)) {
21
+ const found = findFirstButtonOrLink(child);
22
+ if (found) {
23
+ return found;
24
+ }
25
+ }
26
+ return null;
27
+ }
28
+ /**
29
+ * Forwards the buttongroup properties to all child elements
30
+ * @param {HTMLElement} containerElement - The container element containing the buttons
31
+ * @param {object} props - The properties to forward to children
32
+ * @param {string} props.size - The size property to apply
33
+ * @param {string} props.emphasis - The emphasis property to apply
34
+ * @param {boolean} props.fluid - Whether the buttons should be fluid
35
+ */
36
+ function forwardPropsToChildren(containerElement, props) {
37
+ const children = Array.from(containerElement.children);
38
+ const buttonElements = [];
39
+ // Find the first button or link in each direct child
40
+ children.forEach(child => {
41
+ const buttonOrLink = findFirstButtonOrLink(child);
42
+ if (buttonOrLink) {
43
+ buttonElements.push(buttonOrLink);
44
+ }
45
+ });
46
+ buttonElements.forEach(element => {
47
+ element.classList.remove('first', 'last', 'group-item');
48
+ });
49
+ // Apply properties and positional classes to found elements
50
+ buttonElements.forEach((element, index) => {
51
+ const isFirst = index === 0;
52
+ const isLast = index === buttonElements.length - 1;
53
+ const tagName = element.tagName.toLowerCase();
54
+ // Add positional classes
55
+ if (isFirst) {
56
+ element.classList.add('first');
57
+ }
58
+ if (isLast) {
59
+ element.classList.add('last');
60
+ }
61
+ // Add group item classes
62
+ element.classList.add('group-item');
63
+ // Forward props to nv-button elements
64
+ if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {
65
+ element.setAttribute('size', props.size);
66
+ element.setAttribute('emphasis', props.emphasis);
67
+ if (props.fluid) {
68
+ element.setAttribute('fluid', '');
69
+ }
70
+ else {
71
+ element.removeAttribute('fluid');
72
+ }
73
+ }
74
+ // Forward props to anchor elements by adding CSS classes
75
+ if (tagName === 'a') {
76
+ element.classList.add('nv-button');
77
+ element.classList.add(`size-${props.size}`);
78
+ element.classList.add(`emphasis-${props.emphasis}`);
79
+ if (props.fluid) {
80
+ element.classList.add('fluid');
81
+ }
82
+ else {
83
+ element.classList.remove('fluid');
84
+ }
85
+ }
86
+ });
87
+ }
88
+
89
+ const nvButtongroupCss = "nv-buttongroup{display:flex}nv-buttongroup[emphasis=high]{gap:1px}nv-buttongroup[emphasis=low] .group-item,nv-buttongroup[emphasis=low] .group-item:hover{border:1px solid var(--components-button-low-text)}nv-buttongroup[emphasis=lower] .group-item,nv-buttongroup[emphasis=lower] .group-item:hover{border:1px solid var(--components-button-lower-text)}nv-buttongroup:not([orientation=vertical]) .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.first{border-top-right-radius:0;border-bottom-right-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.last{border-top-left-radius:0;border-bottom-left-radius:0}nv-buttongroup:not([orientation=vertical])[emphasis=medium] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.first){border-left:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.first){border-left:none}nv-buttongroup[orientation=vertical]{flex-direction:column;align-items:stretch;width:fit-content}nv-buttongroup[orientation=vertical] .group-item{width:unset;display:flex}nv-buttongroup[orientation=vertical] .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup[orientation=vertical] .group-item.first{border-bottom-left-radius:0;border-bottom-right-radius:0}nv-buttongroup[orientation=vertical] .group-item.last{border-top-left-radius:0;border-top-right-radius:0}nv-buttongroup[orientation=vertical][emphasis=medium] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.first){border-top:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.first){border-top:none}";
90
+ const NvButtongroupStyle0 = nvButtongroupCss;
91
+
92
+ const NvButtongroup = class {
93
+ constructor(hostRef) {
94
+ registerInstance(this, hostRef);
95
+ /****************************************************************************/
96
+ //#region PROPERTIES
97
+ /**
98
+ * Determines how large or small all the buttons appear, allowing for
99
+ * customization of the button's dimensions to fit different design
100
+ * specifications and user needs.
101
+ */
102
+ this.size = 'md';
103
+ /**
104
+ * Adjusts the emphasis of all the buttons to make it more or less visually
105
+ * prominent to users. Use this to draw attention to important actions or
106
+ * reduce focus on less critical ones
107
+ */
108
+ this.emphasis = 'medium';
109
+ /**
110
+ * Allows the button group to stretch and fill the entire width of its
111
+ * container.
112
+ */
113
+ this.fluid = false;
114
+ /**
115
+ * Determines the orientation of the button group. When enabled, the buttons
116
+ * are stacked vertically rather than aligned side by side.
117
+ */
118
+ this.orientation = 'horizontal';
119
+ //#endregion PROPERTIES
120
+ /****************************************************************************/
121
+ //#region METHODS
122
+ /**
123
+ * Forwards the buttongroup properties to all child elements
124
+ */
125
+ this.forwardPropsToChildren = () => {
126
+ forwardPropsToChildren(this.el, {
127
+ size: this.size,
128
+ emphasis: this.emphasis,
129
+ fluid: this.fluid,
130
+ });
131
+ };
132
+ /**
133
+ * Sets up the MutationObserver to watch for changes in child elements
134
+ */
135
+ this.setupMutationObserver = () => {
136
+ this.mutationObserver = new MutationObserver(mutations => {
137
+ mutations.forEach(mutation => {
138
+ if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
139
+ // Forward props to all children when changes occur
140
+ this.forwardPropsToChildren();
141
+ }
142
+ });
143
+ });
144
+ this.mutationObserver.observe(this.el, {
145
+ childList: true,
146
+ subtree: true,
147
+ });
148
+ };
149
+ }
150
+ //#endregion METHODS
151
+ /****************************************************************************/
152
+ //#region WATCHERS
153
+ onEmphasisChange() {
154
+ this.forwardPropsToChildren();
155
+ }
156
+ onSizeChange() {
157
+ this.forwardPropsToChildren();
158
+ }
159
+ onFluidChange() {
160
+ this.forwardPropsToChildren();
161
+ }
162
+ //#endregion WATCHERS
163
+ /****************************************************************************/
164
+ //#region LIFECYCLE
165
+ componentWillLoad() {
166
+ this.forwardPropsToChildren();
167
+ this.setupMutationObserver();
168
+ }
169
+ disconnectedCallback() {
170
+ if (this.mutationObserver) {
171
+ this.mutationObserver.disconnect();
172
+ }
173
+ }
174
+ //#endregion LIFECYCLE
175
+ /****************************************************************************/
176
+ //#region EVENTS
177
+ //#endregion EVENTS
178
+ /****************************************************************************/
179
+ //#region RENDER
180
+ render() {
181
+ return (h(Host, { key: 'd0322897a0312e7b55b087e4abfc94fcaf9f7747' }, h("slot", { key: '70afccf10fe728482096d3fce42083e9931e06bd' })));
182
+ }
183
+ get el() { return getElement(this); }
184
+ static get watchers() { return {
185
+ "emphasis": ["onEmphasisChange"],
186
+ "size": ["onSizeChange"],
187
+ "fluid": ["onFluidChange"]
188
+ }; }
189
+ };
190
+ NvButtongroup.style = NvButtongroupStyle0;
191
+
192
+ export { NvButtongroup as nv_buttongroup };
193
+
194
+ //# sourceMappingURL=nv-buttongroup.entry.js.map
package/dist/esm/nv-buttongroup.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"nv-buttongroup.entry.js","mappings":";;AAAA;;;AAIA;;;;;SAKgB,qBAAqB,CACnC,OAAoB;;IAGpB,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IAC9C,IACE,OAAO,KAAK,WAAW;QACvB,OAAO,KAAK,eAAe;QAC3B,OAAO,KAAK,GAAG,EACf;QACA,OAAO,OAAO,CAAC;KAChB;;IAGD,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAkB,EAAE;QACjE,MAAM,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,KAAK,EAAE;YACT,OAAO,KAAK,CAAC;SACd;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;;SAQgB,sBAAsB,CACpC,gBAA6B,EAC7B,KAOC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAkB,CAAC;IACxE,MAAM,cAAc,GAAkB,EAAE,CAAC;;IAGzC,QAAQ,CAAC,OAAO,CAAC,KAAK;QACpB,MAAM,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAClD,IAAI,YAAY,EAAE;YAChB,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACnC;KACF,CAAC,CAAC;IAEH,cAAc,CAAC,OAAO,CAAC,OAAO;QAC5B,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;KACzD,CAAC,CAAC;;IAGH,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;QACpC,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;QAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;QACnD,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;QAG9C,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAChC;QACD,IAAI,MAAM,EAAE;YACV,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SAC/B;;QAGD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;;QAGpC,IAAI,OAAO,KAAK,WAAW,IAAI,OAAO,KAAK,eAAe,EAAE;YAC1D,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;YACzC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;YACjD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;aACnC;iBAAM;gBACL,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;aAClC;SACF;;QAGD,IAAI,OAAO,KAAK,GAAG,EAAE;YACnB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YACnC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;YAC5C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YACpD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;aAChC;iBAAM;gBACL,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;aACnC;SACF;KACF,CAAC,CAAC;AACL;;AC3GA,MAAM,gBAAgB,GAAG,okEAAokE,CAAC;AAC9lE,4BAAe,gBAAgB;;MCYlB,aAAa;IAL1B;;;;;;;;;QAkBW,SAAI,GAAoB,IAAI,CAAC;;;;;;QAQ7B,aAAQ,GAAwB,QAAQ,CAAC;;;;;QAOzC,UAAK,GAAY,KAAK,CAAC;;;;;QAOvB,gBAAW,GAA8B,YAAY,CAAC;;;;;;;QASvD,2BAAsB,GAAG;YAC/B,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE;gBAC9B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;;;;QAKM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS;gBACpD,SAAS,CAAC,OAAO,CAAC,QAAQ;oBACxB,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,IAAI,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;;wBAEnE,IAAI,CAAC,sBAAsB,EAAE,CAAC;qBAC/B;iBACF,CAAC,CAAC;aACJ,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;gBACrC,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;SACJ,CAAC;KAkDH;;;;IA3CC,gBAAgB;QACd,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAGD,YAAY;QACV,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAGD,aAAa;QACX,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;SACpC;KACF;;;;;;;IAQD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;","names":[],"sources":["src/components/nv-buttongroup/nv-buttongroup.utils.ts","src/components/nv-buttongroup/styles/nv-buttongroup.scss?tag=nv-buttongroup","src/components/nv-buttongroup/nv-buttongroup.tsx"],"sourcesContent":["/**\n * Utility functions for nv-buttongroup.\n */\n\n/**\n * Recursively finds the first button or link element within a container\n * @param {HTMLElement} element - The HTML element to search within\n * @returns {HTMLElement | null} The first button or link element found, or null if none exists\n */\nexport function findFirstButtonOrLink(\n element: HTMLElement,\n): HTMLElement | null {\n // Check if the element itself is a button or link\n const tagName = element.tagName.toLowerCase();\n if (\n tagName === 'nv-button' ||\n tagName === 'nv-iconbutton' ||\n tagName === 'a'\n ) {\n return element;\n }\n\n // Recursively search through children\n for (const child of Array.from(element.children) as HTMLElement[]) {\n const found = findFirstButtonOrLink(child);\n if (found) {\n return found;\n }\n }\n\n return null;\n}\n\n/**\n * Forwards the buttongroup properties to all child elements\n * @param {HTMLElement} containerElement - The container element containing the buttons\n * @param {object} props - The properties to forward to children\n * @param {string} props.size - The size property to apply\n * @param {string} props.emphasis - The emphasis property to apply\n * @param {boolean} props.fluid - Whether the buttons should be fluid\n */\nexport function forwardPropsToChildren(\n containerElement: HTMLElement,\n props: {\n /** The size property to apply */\n size: string;\n /** The emphasis property to apply */\n emphasis: string;\n /** Whether the buttons should be fluid */\n fluid: boolean;\n },\n): void {\n const children = Array.from(containerElement.children) as HTMLElement[];\n const buttonElements: HTMLElement[] = [];\n\n // Find the first button or link in each direct child\n children.forEach(child => {\n const buttonOrLink = findFirstButtonOrLink(child);\n if (buttonOrLink) {\n buttonElements.push(buttonOrLink);\n }\n });\n\n buttonElements.forEach(element => {\n element.classList.remove('first', 'last', 'group-item');\n });\n\n // Apply properties and positional classes to found elements\n buttonElements.forEach((element, index) => {\n const isFirst = index === 0;\n const isLast = index === buttonElements.length - 1;\n const tagName = element.tagName.toLowerCase();\n\n // Add positional classes\n if (isFirst) {\n element.classList.add('first');\n }\n if (isLast) {\n element.classList.add('last');\n }\n\n // Add group item classes\n element.classList.add('group-item');\n\n // Forward props to nv-button elements\n if (tagName === 'nv-button' || tagName === 'nv-iconbutton') {\n element.setAttribute('size', props.size);\n element.setAttribute('emphasis', props.emphasis);\n if (props.fluid) {\n element.setAttribute('fluid', '');\n } else {\n element.removeAttribute('fluid');\n }\n }\n\n // Forward props to anchor elements by adding CSS classes\n if (tagName === 'a') {\n element.classList.add('nv-button');\n element.classList.add(`size-${props.size}`);\n element.classList.add(`emphasis-${props.emphasis}`);\n if (props.fluid) {\n element.classList.add('fluid');\n } else {\n element.classList.remove('fluid');\n }\n }\n });\n}\n","@use \"./mixins\" as *;\n\nnv-buttongroup {\n @include root-styles();\n\n &[emphasis=\"high\"] {\n @include high-emphasis-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-styles();\n }\n &[emphasis=\"lower\"] {\n @include lower-emphasis-styles();\n }\n\n &:not([orientation=\"vertical\"]) {\n @include border-radius-horizontal-styles();\n\n &[emphasis=\"medium\"] {\n @include medium-emphasis-horizontal-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-horizontal-styles();\n }\n &[emphasis=\"lower\"] {\n @include lower-emphasis-horizontal-styles();\n }\n }\n\n &[orientation=\"vertical\"] {\n @include vertical-styles();\n @include border-radius-vertical-styles();\n\n &[emphasis=\"medium\"] {\n @include medium-emphasis-vertical-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-vertical-styles();\n }\n &[emphasis=\"lower\"] {\n @include lower-emphasis-vertical-styles();\n }\n }\n}","import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis } from '../../utils/constants';\nimport { forwardPropsToChildren } from './nv-buttongroup.utils';\n\n/**\n * @slot default - Child buttons or links.\n */\n@Component({\n tag: 'nv-buttongroup',\n styleUrl: 'styles/nv-buttongroup.scss',\n shadow: false,\n})\nexport class NvButtongroup {\n @Element() el: HTMLNvButtongroupElement;\n private mutationObserver: MutationObserver;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small all the buttons appear, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the emphasis of all the buttons to make it more or less visually\n * prominent to users. Use this to draw attention to important actions or\n * reduce focus on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'medium';\n\n /**\n * Allows the button group to stretch and fill the entire width of its\n * container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /**\n * Determines the orientation of the button group. When enabled, the buttons\n * are stacked vertically rather than aligned side by side.\n */\n @Prop({ reflect: true })\n readonly orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Forwards the buttongroup properties to all child elements\n */\n private forwardPropsToChildren = (): void => {\n forwardPropsToChildren(this.el, {\n size: this.size,\n emphasis: this.emphasis,\n fluid: this.fluid,\n });\n };\n\n /**\n * Sets up the MutationObserver to watch for changes in child elements\n */\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n // Forward props to all children when changes occur\n this.forwardPropsToChildren();\n }\n });\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('emphasis')\n onEmphasisChange() {\n this.forwardPropsToChildren();\n }\n\n @Watch('size')\n onSizeChange() {\n this.forwardPropsToChildren();\n }\n\n @Watch('fluid')\n onFluidChange() {\n this.forwardPropsToChildren();\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.forwardPropsToChildren();\n this.setupMutationObserver();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region EVENTS\n //#endregion EVENTS\n /****************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}