@mcp-b/web-components 0.2.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 (366) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +49 -0
  3. package/dist/accordion-B1Q3kuP_.d.ts +373 -0
  4. package/dist/accordion-item-DvPfhpm8.js +307 -0
  5. package/dist/accordion-item-bPRIahNn.d.ts +63 -0
  6. package/dist/accordion-zDr-Br4V.js +483 -0
  7. package/dist/action-bar-CYsjmhwP.d.ts +29 -0
  8. package/dist/action-bar-CjN_UcnP.js +56 -0
  9. package/dist/alert-dialog-4CnO3Nb5.d.ts +60 -0
  10. package/dist/alert-dialog-D25Oi_TS.js +126 -0
  11. package/dist/avatar-Bje_KpZo.d.ts +141 -0
  12. package/dist/avatar-CRP0kW3x.js +224 -0
  13. package/dist/badge-Ct95U4UO.js +301 -0
  14. package/dist/badge-D1DNQrWn.d.ts +106 -0
  15. package/dist/breadcrumb-BxZ-nQE5.d.ts +365 -0
  16. package/dist/breadcrumb-item-BC454oQe.d.ts +59 -0
  17. package/dist/breadcrumb-item-P5pdq_gE.js +151 -0
  18. package/dist/breadcrumb-uURhiqWJ.js +384 -0
  19. package/dist/button-5k_aL_gD.js +802 -0
  20. package/dist/button-BQofnUt4.d.ts +354 -0
  21. package/dist/button-group-BydvJTQy.js +197 -0
  22. package/dist/button-group-COodHeuB.d.ts +155 -0
  23. package/dist/callout-B8zTf8Go.js +188 -0
  24. package/dist/callout-DFwPao36.d.ts +103 -0
  25. package/dist/card-BYDzdMAU.d.ts +177 -0
  26. package/dist/card-DIg1-X2G.js +332 -0
  27. package/dist/carousel-Bktu7wrD.js +843 -0
  28. package/dist/carousel-DQITCtEY.d.ts +423 -0
  29. package/dist/carousel-item-B5-X31Ha.js +79 -0
  30. package/dist/carousel-item-BB3jL2tk.d.ts +34 -0
  31. package/dist/cdn/loader.js +530 -0
  32. package/dist/checkbox-D6r7PVPj.js +641 -0
  33. package/dist/checkbox-DoFcDEKB.d.ts +354 -0
  34. package/dist/checkbox-group-CLvNAO_F.js +201 -0
  35. package/dist/checkbox-group-Cnh8rAn4.d.ts +152 -0
  36. package/dist/color-input-Bky89xg_.d.ts +470 -0
  37. package/dist/color-input-DPIxi9wR.js +894 -0
  38. package/dist/color-picker-adwOmtRl.js +1240 -0
  39. package/dist/color-picker-wQw8bPsq.d.ts +360 -0
  40. package/dist/combobox-B6al50UG.js +1693 -0
  41. package/dist/combobox-item-D2H1CMxC.d.ts +714 -0
  42. package/dist/combobox-item-yM6tDrGG.js +225 -0
  43. package/dist/comparison-B1-nMwmp.d.ts +134 -0
  44. package/dist/comparison-CyqKrCN-.js +435 -0
  45. package/dist/components/accordion/accordion.d.ts +2 -0
  46. package/dist/components/accordion/accordion.js +2 -0
  47. package/dist/components/accordion-item/accordion-item.d.ts +2 -0
  48. package/dist/components/accordion-item/accordion-item.js +2 -0
  49. package/dist/components/action-bar/action-bar.d.ts +2 -0
  50. package/dist/components/action-bar/action-bar.js +2 -0
  51. package/dist/components/alert-dialog/alert-dialog.d.ts +2 -0
  52. package/dist/components/alert-dialog/alert-dialog.js +2 -0
  53. package/dist/components/avatar/avatar.d.ts +2 -0
  54. package/dist/components/avatar/avatar.js +2 -0
  55. package/dist/components/badge/badge.d.ts +2 -0
  56. package/dist/components/badge/badge.js +2 -0
  57. package/dist/components/breadcrumb/breadcrumb.d.ts +2 -0
  58. package/dist/components/breadcrumb/breadcrumb.js +2 -0
  59. package/dist/components/breadcrumb-item/breadcrumb-item.d.ts +2 -0
  60. package/dist/components/breadcrumb-item/breadcrumb-item.js +2 -0
  61. package/dist/components/button/button.d.ts +2 -0
  62. package/dist/components/button/button.js +2 -0
  63. package/dist/components/button-group/button-group.d.ts +2 -0
  64. package/dist/components/button-group/button-group.js +2 -0
  65. package/dist/components/callout/callout.d.ts +2 -0
  66. package/dist/components/callout/callout.js +2 -0
  67. package/dist/components/card/card.d.ts +2 -0
  68. package/dist/components/card/card.js +2 -0
  69. package/dist/components/carousel/carousel.d.ts +2 -0
  70. package/dist/components/carousel/carousel.js +2 -0
  71. package/dist/components/carousel-item/carousel-item.d.ts +2 -0
  72. package/dist/components/carousel-item/carousel-item.js +2 -0
  73. package/dist/components/checkbox/checkbox.d.ts +2 -0
  74. package/dist/components/checkbox/checkbox.js +2 -0
  75. package/dist/components/checkbox-group/checkbox-group.d.ts +2 -0
  76. package/dist/components/checkbox-group/checkbox-group.js +2 -0
  77. package/dist/components/color-input/color-input.d.ts +2 -0
  78. package/dist/components/color-input/color-input.js +2 -0
  79. package/dist/components/color-picker/color-picker.d.ts +2 -0
  80. package/dist/components/color-picker/color-picker.js +2 -0
  81. package/dist/components/combobox/combobox.d.ts +2 -0
  82. package/dist/components/combobox/combobox.js +2 -0
  83. package/dist/components/combobox-item/combobox-item.d.ts +2 -0
  84. package/dist/components/combobox-item/combobox-item.js +2 -0
  85. package/dist/components/comparison/comparison.d.ts +2 -0
  86. package/dist/components/comparison/comparison.js +2 -0
  87. package/dist/components/copy/copy.d.ts +2 -0
  88. package/dist/components/copy/copy.js +291 -0
  89. package/dist/components/data-table/data-table.d.ts +2 -0
  90. package/dist/components/data-table/data-table.js +2 -0
  91. package/dist/components/date/date.d.ts +2 -0
  92. package/dist/components/date/date.js +2 -0
  93. package/dist/components/dialog/dialog.d.ts +2 -0
  94. package/dist/components/dialog/dialog.js +2 -0
  95. package/dist/components/divider/divider.d.ts +2 -0
  96. package/dist/components/divider/divider.js +2 -0
  97. package/dist/components/dropdown/dropdown.d.ts +2 -0
  98. package/dist/components/dropdown/dropdown.js +2 -0
  99. package/dist/components/dropdown-item/dropdown-item.d.ts +2 -0
  100. package/dist/components/dropdown-item/dropdown-item.js +2 -0
  101. package/dist/components/empty-result/empty-result.d.ts +2 -0
  102. package/dist/components/empty-result/empty-result.js +2 -0
  103. package/dist/components/empty-state/empty-state.d.ts +2 -0
  104. package/dist/components/empty-state/empty-state.js +2 -0
  105. package/dist/components/expander/expander.d.ts +2 -0
  106. package/dist/components/expander/expander.js +2 -0
  107. package/dist/components/field/field.d.ts +2 -0
  108. package/dist/components/field/field.js +2 -0
  109. package/dist/components/file-input/file-input.d.ts +2 -0
  110. package/dist/components/file-input/file-input.js +2 -0
  111. package/dist/components/filter-bar/filter-bar.d.ts +2 -0
  112. package/dist/components/filter-bar/filter-bar.js +2 -0
  113. package/dist/components/form-section/form-section.d.ts +2 -0
  114. package/dist/components/form-section/form-section.js +2 -0
  115. package/dist/components/icon/icon.d.ts +2 -0
  116. package/dist/components/icon/icon.js +2 -0
  117. package/dist/components/include/include.d.ts +2 -0
  118. package/dist/components/include/include.js +2 -0
  119. package/dist/components/index.d.ts +85 -0
  120. package/dist/components/index.js +86 -0
  121. package/dist/components/infinite-scroller/infinite-scroller.d.ts +2 -0
  122. package/dist/components/infinite-scroller/infinite-scroller.js +2 -0
  123. package/dist/components/intersection-observer/intersection-observer.d.ts +2 -0
  124. package/dist/components/intersection-observer/intersection-observer.js +2 -0
  125. package/dist/components/listbox/listbox.d.ts +2 -0
  126. package/dist/components/listbox/listbox.js +2 -0
  127. package/dist/components/listbox-item/listbox-item.d.ts +2 -0
  128. package/dist/components/listbox-item/listbox-item.js +2 -0
  129. package/dist/components/lorem-ipsum/lorem-ipsum.d.ts +2 -0
  130. package/dist/components/lorem-ipsum/lorem-ipsum.js +2 -0
  131. package/dist/components/meter/meter.d.ts +2 -0
  132. package/dist/components/meter/meter.js +2 -0
  133. package/dist/components/metric/metric.d.ts +2 -0
  134. package/dist/components/metric/metric.js +2 -0
  135. package/dist/components/metric-grid/metric-grid.d.ts +2 -0
  136. package/dist/components/metric-grid/metric-grid.js +2 -0
  137. package/dist/components/mutation-observer/mutation-observer.d.ts +2 -0
  138. package/dist/components/mutation-observer/mutation-observer.js +2 -0
  139. package/dist/components/navicon/navicon.d.ts +2 -0
  140. package/dist/components/navicon/navicon.js +2 -0
  141. package/dist/components/number/number.d.ts +2 -0
  142. package/dist/components/number/number.js +2 -0
  143. package/dist/components/number-field/number-field.d.ts +2 -0
  144. package/dist/components/number-field/number-field.js +2 -0
  145. package/dist/components/pagination/pagination.d.ts +2 -0
  146. package/dist/components/pagination/pagination.js +2 -0
  147. package/dist/components/popover/popover.d.ts +2 -0
  148. package/dist/components/popover/popover.js +2 -0
  149. package/dist/components/preview-card/preview-card.d.ts +2 -0
  150. package/dist/components/preview-card/preview-card.js +2 -0
  151. package/dist/components/progress/progress.d.ts +2 -0
  152. package/dist/components/progress/progress.js +2 -0
  153. package/dist/components/radio/radio.d.ts +2 -0
  154. package/dist/components/radio/radio.js +2 -0
  155. package/dist/components/radio-item/radio-item.d.ts +2 -0
  156. package/dist/components/radio-item/radio-item.js +2 -0
  157. package/dist/components/random-content/random-content.d.ts +2 -0
  158. package/dist/components/random-content/random-content.js +2 -0
  159. package/dist/components/rating/rating.d.ts +2 -0
  160. package/dist/components/rating/rating.js +2 -0
  161. package/dist/components/resize-observer/resize-observer.d.ts +2 -0
  162. package/dist/components/resize-observer/resize-observer.js +2 -0
  163. package/dist/components/scroll-area/scroll-area.d.ts +2 -0
  164. package/dist/components/scroll-area/scroll-area.js +2 -0
  165. package/dist/components/scroller/scroller.d.ts +2 -0
  166. package/dist/components/scroller/scroller.js +2 -0
  167. package/dist/components/search-list/search-list.d.ts +2 -0
  168. package/dist/components/search-list/search-list.js +2 -0
  169. package/dist/components/select/select.d.ts +2 -0
  170. package/dist/components/select/select.js +2 -0
  171. package/dist/components/selection-summary/selection-summary.d.ts +2 -0
  172. package/dist/components/selection-summary/selection-summary.js +2 -0
  173. package/dist/components/share/share.d.ts +2 -0
  174. package/dist/components/share/share.js +2 -0
  175. package/dist/components/slide-activator/slide-activator.d.ts +2 -0
  176. package/dist/components/slide-activator/slide-activator.js +2 -0
  177. package/dist/components/slider/slider.d.ts +2 -0
  178. package/dist/components/slider/slider.js +2 -0
  179. package/dist/components/sparkline/sparkline.d.ts +2 -0
  180. package/dist/components/sparkline/sparkline.js +2 -0
  181. package/dist/components/spinner/spinner.d.ts +2 -0
  182. package/dist/components/spinner/spinner.js +2 -0
  183. package/dist/components/splitter/splitter.d.ts +2 -0
  184. package/dist/components/splitter/splitter.js +2 -0
  185. package/dist/components/switch/switch.d.ts +2 -0
  186. package/dist/components/switch/switch.js +2 -0
  187. package/dist/components/tab/tab.d.ts +2 -0
  188. package/dist/components/tab/tab.js +2 -0
  189. package/dist/components/tab-list/tab-list.d.ts +2 -0
  190. package/dist/components/tab-list/tab-list.js +2 -0
  191. package/dist/components/tab-panel/tab-panel.d.ts +2 -0
  192. package/dist/components/tab-panel/tab-panel.js +2 -0
  193. package/dist/components/text-area/text-area.d.ts +2 -0
  194. package/dist/components/text-area/text-area.js +2 -0
  195. package/dist/components/text-field/text-field.d.ts +2 -0
  196. package/dist/components/text-field/text-field.js +2 -0
  197. package/dist/components/text-mask/text-mask.d.ts +2 -0
  198. package/dist/components/text-mask/text-mask.js +2 -0
  199. package/dist/components/timed-content/timed-content.d.ts +2 -0
  200. package/dist/components/timed-content/timed-content.js +2 -0
  201. package/dist/components/toast/toast.d.ts +2 -0
  202. package/dist/components/toast/toast.js +2 -0
  203. package/dist/components/toast-item/toast-item.d.ts +2 -0
  204. package/dist/components/toast-item/toast-item.js +2 -0
  205. package/dist/components/toggle-icon/toggle-icon.d.ts +2 -0
  206. package/dist/components/toggle-icon/toggle-icon.js +2 -0
  207. package/dist/components/toggle-tag/toggle-tag.d.ts +2 -0
  208. package/dist/components/toggle-tag/toggle-tag.js +2 -0
  209. package/dist/components/toolbar/toolbar.d.ts +2 -0
  210. package/dist/components/toolbar/toolbar.js +2 -0
  211. package/dist/components/tooltip/tooltip.d.ts +2 -0
  212. package/dist/components/tooltip/tooltip.js +2 -0
  213. package/dist/components/transition-group/transition-group.d.ts +2 -0
  214. package/dist/components/transition-group/transition-group.js +2 -0
  215. package/dist/components/zoomable-frame/zoomable-frame.d.ts +2 -0
  216. package/dist/components/zoomable-frame/zoomable-frame.js +2 -0
  217. package/dist/copy-CvC9vaGw.d.ts +206 -0
  218. package/dist/copy.styles-DWGvGNTP.js +100 -0
  219. package/dist/data-table-CITa8DSn.js +247 -0
  220. package/dist/data-table-DL5RhE0d.d.ts +89 -0
  221. package/dist/date-CJPmOdi9.js +146 -0
  222. package/dist/date-DtaTBM71.d.ts +142 -0
  223. package/dist/decorate-DcF3lt7P.js +9 -0
  224. package/dist/dialog-Cx46HMaZ.js +983 -0
  225. package/dist/dialog-N-v0woIy.d.ts +414 -0
  226. package/dist/divider-9vNsfHW8.js +169 -0
  227. package/dist/divider-DWuAxcXv.d.ts +79 -0
  228. package/dist/docs/custom-elements.json +29301 -0
  229. package/dist/dropdown-BXSKpVX9.js +1123 -0
  230. package/dist/dropdown-Bo00Vlr5.d.ts +537 -0
  231. package/dist/dropdown-item-_lIs-Tfd.d.ts +111 -0
  232. package/dist/dropdown-item-i77cRuN6.js +504 -0
  233. package/dist/empty-result-B2ln1yFL.js +65 -0
  234. package/dist/empty-result-B54x_Ab2.d.ts +31 -0
  235. package/dist/empty-state-BLWjtKUo.js +186 -0
  236. package/dist/empty-state-SGKjpwp3.d.ts +117 -0
  237. package/dist/expander-BUev0BmM.d.ts +174 -0
  238. package/dist/expander-Bwvxj6Oa.js +342 -0
  239. package/dist/field-BEyS909F.js +163 -0
  240. package/dist/field-ITx0jVw-.d.ts +69 -0
  241. package/dist/file-input-BEumLJjg.js +841 -0
  242. package/dist/file-input-D2D6YC0B.d.ts +378 -0
  243. package/dist/filter-bar-Bj2QzEn9.d.ts +35 -0
  244. package/dist/filter-bar-Dcs67aXo.js +66 -0
  245. package/dist/form-section-BchPetkj.js +83 -0
  246. package/dist/form-section-xFBTBULQ.d.ts +34 -0
  247. package/dist/icon-BPVkNsY4.js +165 -0
  248. package/dist/icon-Ci9CPZJV.d.ts +72 -0
  249. package/dist/icon-library-D_if7p2h.d.ts +2 -0
  250. package/dist/include-CQHVVtNs.d.ts +103 -0
  251. package/dist/include-qNUh_6kT.js +155 -0
  252. package/dist/index.d.ts +89 -0
  253. package/dist/index.js +92 -0
  254. package/dist/infinite-scroller-BmmtnWNt.js +285 -0
  255. package/dist/infinite-scroller-CuUEAlB9.d.ts +174 -0
  256. package/dist/intersection-observer-B6TciOAQ.js +503 -0
  257. package/dist/intersection-observer-B7nmP7Zz.d.ts +418 -0
  258. package/dist/listbox-C3XXRWGX.js +1257 -0
  259. package/dist/listbox-DD4ujIJe.d.ts +682 -0
  260. package/dist/listbox-item-CwD9s3VY.js +135 -0
  261. package/dist/listbox-item-DQEJWp4Z.d.ts +53 -0
  262. package/dist/localize-322EtXNX.d.ts +66 -0
  263. package/dist/lorem-ipsum-B2x3V-v8.js +198 -0
  264. package/dist/lorem-ipsum-CR82CSuJ.d.ts +130 -0
  265. package/dist/meter-BC7uaJWf.d.ts +73 -0
  266. package/dist/meter-BIDyjwFp.js +155 -0
  267. package/dist/metric-CjlLq_VA.d.ts +36 -0
  268. package/dist/metric-DbuOcDp_.js +86 -0
  269. package/dist/metric-grid-C2Pb0Zl3.js +37 -0
  270. package/dist/metric-grid-C5Xbb1_0.d.ts +27 -0
  271. package/dist/mutation-observer-BmrZ-GER.d.ts +326 -0
  272. package/dist/mutation-observer-DS8EBuOp.js +388 -0
  273. package/dist/navicon-Dic5Qjzb.d.ts +159 -0
  274. package/dist/navicon-_yMHY27-.js +486 -0
  275. package/dist/number-BNtNXNF3.js +162 -0
  276. package/dist/number-BwbnErlB.d.ts +143 -0
  277. package/dist/number-field-BQHB7UYo.js +726 -0
  278. package/dist/number-field-odk4lKXM.d.ts +422 -0
  279. package/dist/pagination-6z2qcf3U.d.ts +322 -0
  280. package/dist/pagination-DuKPuzdb.js +679 -0
  281. package/dist/popover-D0sxTU6o.d.ts +259 -0
  282. package/dist/popover-DJBrJ0za.js +556 -0
  283. package/dist/preview-card-C7H1FPfd.js +287 -0
  284. package/dist/preview-card-DitOCZTD.d.ts +86 -0
  285. package/dist/progress-Db0_axHQ.d.ts +181 -0
  286. package/dist/progress-DzVk260j.js +494 -0
  287. package/dist/radio-BtDG9xJM.js +658 -0
  288. package/dist/radio-CieMa4zU.d.ts +460 -0
  289. package/dist/radio-item-DIrUStAX.js +264 -0
  290. package/dist/radio-item-Xq2U3cMu.d.ts +69 -0
  291. package/dist/random-content-BhSeJFKz.d.ts +380 -0
  292. package/dist/random-content-BwiirXdG.js +450 -0
  293. package/dist/rating-4xNsWumY.d.ts +369 -0
  294. package/dist/rating-C1BcJDIO.js +722 -0
  295. package/dist/resize-observer-BseSbVWP.d.ts +187 -0
  296. package/dist/resize-observer-DcrLhddo.js +236 -0
  297. package/dist/scroll-area-COc1857S.js +127 -0
  298. package/dist/scroll-area-CVYDf5qY.d.ts +61 -0
  299. package/dist/scroller-LYgBVyfY.js +590 -0
  300. package/dist/scroller-bB2rGs7b.d.ts +374 -0
  301. package/dist/search-list-Clmrg8EV.js +884 -0
  302. package/dist/search-list-n0GYO7rh.d.ts +777 -0
  303. package/dist/select-CkZK2jJn.d.ts +506 -0
  304. package/dist/select-DLIaRnA4.js +690 -0
  305. package/dist/selection-summary-BVnNJ8Lw.js +48 -0
  306. package/dist/selection-summary-DmFkGyZI.d.ts +34 -0
  307. package/dist/share-DPlqP2dc.d.ts +162 -0
  308. package/dist/share-bsgXZCl7.js +250 -0
  309. package/dist/sigvelo.d.ts +5 -0
  310. package/dist/sigvelo.js +5 -0
  311. package/dist/sigvelo.loader.d.ts +3 -0
  312. package/dist/sigvelo.loader.js +102 -0
  313. package/dist/slide-activator-D7bBz69E.d.ts +429 -0
  314. package/dist/slide-activator-DlxQt9R9.js +798 -0
  315. package/dist/slider-B0FVsV1o.d.ts +921 -0
  316. package/dist/slider-B90Il7x3.js +1744 -0
  317. package/dist/sparkline-CcpTaJ_Z.js +358 -0
  318. package/dist/sparkline-DlCIt81-.d.ts +235 -0
  319. package/dist/spinner-C04Dmc0H.js +188 -0
  320. package/dist/spinner-CZ19x_dC.d.ts +99 -0
  321. package/dist/splitter-DBDJAzsp.d.ts +325 -0
  322. package/dist/splitter-MnD4In9H.js +638 -0
  323. package/dist/switch-CPaEKbog.js +581 -0
  324. package/dist/switch-Cief9M59.d.ts +248 -0
  325. package/dist/tab-BcqYGsuW.d.ts +44 -0
  326. package/dist/tab-C-FtuNmh.js +102 -0
  327. package/dist/tab-list-B_Ye_Oj9.js +691 -0
  328. package/dist/tab-list-DDvS8qHr.d.ts +450 -0
  329. package/dist/tab-panel-BaBl6eep.js +60 -0
  330. package/dist/tab-panel-BzSJlSfd.d.ts +38 -0
  331. package/dist/text-area-B_mjCE9W.d.ts +327 -0
  332. package/dist/text-area-Czixaz-_.js +556 -0
  333. package/dist/text-field-BClWMp6q.d.ts +424 -0
  334. package/dist/text-field-inpJfp0A.js +687 -0
  335. package/dist/text-mask-CNKVKSFp.d.ts +336 -0
  336. package/dist/text-mask-DDEurj90.js +370 -0
  337. package/dist/themes/sigvelo.css +10 -0
  338. package/dist/themes/utilities.css +9 -0
  339. package/dist/timed-content-D2mGFamc.d.ts +181 -0
  340. package/dist/timed-content-pvEP4l5V.js +226 -0
  341. package/dist/toast-BnZaIg6Z.js +636 -0
  342. package/dist/toast-cEBVK9NQ.d.ts +487 -0
  343. package/dist/toast-item-BPpJT6vD.d.ts +159 -0
  344. package/dist/toast-item-IS8IFUEg.js +372 -0
  345. package/dist/toggle-icon-4oLDeEt4.js +752 -0
  346. package/dist/toggle-icon-DlwMMWZL.d.ts +359 -0
  347. package/dist/toggle-tag-1sfTFJtg.js +434 -0
  348. package/dist/toggle-tag-IVvMGT4R.d.ts +245 -0
  349. package/dist/toolbar-CABq0ZL1.d.ts +122 -0
  350. package/dist/toolbar-CEZ0-F-X.js +196 -0
  351. package/dist/tooltip-DbyoPFNe.js +521 -0
  352. package/dist/tooltip-ahFthek8.d.ts +192 -0
  353. package/dist/transition-group-3hnAnwSd.js +801 -0
  354. package/dist/transition-group-DD_CjSNC.d.ts +608 -0
  355. package/dist/translations/en.d.ts +6 -0
  356. package/dist/translations/en.js +75 -0
  357. package/dist/translations/es.d.ts +6 -0
  358. package/dist/translations/es.js +75 -0
  359. package/dist/types/custom-element-jsx.d.ts +13723 -0
  360. package/dist/utilities/icon-library.d.ts +3 -0
  361. package/dist/utilities/icon-library.js +93 -0
  362. package/dist/utilities/localize.d.ts +2 -0
  363. package/dist/utilities/localize.js +6 -0
  364. package/dist/zoomable-frame-Cldvj5sE.js +398 -0
  365. package/dist/zoomable-frame-r6S6587z.d.ts +162 -0
  366. package/package.json +83 -0
package/dist/toast-BnZaIg6Z.js ADDED
@@ -0,0 +1,636 @@
1
+ import { t as __decorate } from "./decorate-DcF3lt7P.js";
2
+ import "./toast-item-IS8IFUEg.js";
3
+ import "./transition-group-3hnAnwSd.js";
4
+ import { css, html, render } from "lit";
5
+ import { property, query, state } from "lit/decorators.js";
6
+ import hostStyles from "@mcp-b/wc-support/styles/host.styles";
7
+ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
8
+ import { SigveloBeforeCloseEvent, SigveloCloseEvent } from "@mcp-b/wc-support/events/open-close";
9
+ import { unsafeHTML } from "lit/directives/unsafe-html.js";
10
+ //#region src/components/toast/toast.styles.ts
11
+ var toast_styles_default = css`
12
+ :host {
13
+ display: flex;
14
+ position: fixed;
15
+ flex-direction: column;
16
+ width: 460px;
17
+ height: 100dvh;
18
+ max-height: 100dvh;
19
+ margin: 0;
20
+ inset: unset;
21
+ padding: 1.5em;
22
+ overflow-y: auto;
23
+ gap: 1em;
24
+ border: none;
25
+ background: transparent;
26
+ pointer-events: none;
27
+ scrollbar-width: thin;
28
+ }
29
+
30
+ :host(:not(:state(visible))) {
31
+ display: none;
32
+ }
33
+
34
+ @media screen and (max-width: 499px) {
35
+ :host {
36
+ width: 100%;
37
+ }
38
+ }
39
+
40
+ /* Placements */
41
+ :host([placement*="top"]) {
42
+ top: 0;
43
+ }
44
+
45
+ :host([placement*="bottom"]) {
46
+ bottom: 0;
47
+ align-content: end;
48
+ }
49
+
50
+ :host([placement*="start"]:dir(ltr)) {
51
+ left: 0;
52
+ }
53
+
54
+ :host([placement*="start"]:dir(rtl)) {
55
+ right: 0;
56
+ }
57
+
58
+ :host([placement*="center"]) {
59
+ left: 50%;
60
+ transform: translateX(-50%);
61
+ }
62
+
63
+ :host([placement*="end"]:dir(ltr)) {
64
+ right: 0;
65
+ }
66
+
67
+ :host([placement*="end"]:dir(rtl)) {
68
+ left: 0;
69
+ }
70
+
71
+ :host([placement*="bottom"]) {
72
+ justify-content: end;
73
+ }
74
+ `;
75
+ //#endregion
76
+ //#region src/components/toast/toast.ts
77
+ /**
78
+ * <sigvelo-toast>
79
+ *
80
+ * @summary A mechanism for showing temporary, non-intrusive notifications that appear above the page's content.
81
+ * @tag sigvelo-toast
82
+ * @documentation https://design-system.sigvelo.com/docs/components/toast
83
+ * @status stable
84
+ * @since 1.0
85
+ *
86
+ * @dependency sigvelo-toast-item
87
+ * @dependency sigvelo-transition-group
88
+ *
89
+ * @cssstate visible - Applied when the toast stack is visible.
90
+ *
91
+ * @example Default
92
+ * Adding a single `<sigvelo-toast>` element to the page gives you the power to dispatch notifications any time. Notifications appear in the _toast stack_, which renders in the top layer and shows above everything else on the page.
93
+ *
94
+ * ```html
95
+ * <sigvelo-toast id="toast__overview"></sigvelo-toast>
96
+ * <sigvelo-button>Show notification</sigvelo-button>
97
+ *
98
+ * <script>
99
+ * const toast = document.getElementById('toast__overview');
100
+ * const button = toast.nextElementSibling;
101
+ *
102
+ * button.addEventListener('click', () => {
103
+ * toast.create(`
104
+ * <sigvelo-avatar slot="icon" label="Meowy McGee's avatar" image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
105
+ * <strong>Meowy McGee</strong><br>
106
+ * <small style="color: var(--sigvelo-color-text-muted);">has sent you a message</small>
107
+ * `, {
108
+ * allowHtml: true,
109
+ * color: 'primary'
110
+ * });
111
+ * });
112
+ * <\/script>
113
+ * ```
114
+ *
115
+ * **Note:** You can put the `<sigvelo-toast>` element anywhere in the DOM, as long as its somewhere inside the `<body>`.
116
+ *
117
+ * @example Creating notifications
118
+ * Start by placing a `<sigvelo-toast>` somewhere on the page and obtain a reference to it. To dispatch a notification, call the toast's `create()` method as shown below.
119
+ *
120
+ * ```html
121
+ * <sigvelo-toast></sigvelo-toast>
122
+ *
123
+ * <script>
124
+ * const toast = document.querySelector('sigvelo-toast');
125
+ * const button = document.querySelector('sigvelo-button');
126
+ *
127
+ * button.addEventListener('click', () => {
128
+ * toast.create('The notification has been sent', {
129
+ * allowHtml: false,
130
+ * duration: 5000,
131
+ * color: 'primary'
132
+ * });
133
+ * });
134
+ * <\/script>
135
+ * ```
136
+ *
137
+ * The first argument is the content to show in the notification. The second argument is an object containing any of the following properties, all of which are optional.
138
+ *
139
+ * | Property | Description | Default |
140
+ * | -------- | ----------- | ------- |
141
+ * | `allowHtml` | Set this to true to allow HTML content. Make sure you trust the included content, otherwise your app may become vulnerable to XSS exploits! | `false` |
142
+ * | `duration` | The length of time in milliseconds to show the notification before removing it. Set this to `0` to show the notification until the user dismisses it. | `5000` |
143
+ * | `color` | The type of notification to render, either `primary`, `success`, `destructive`, or `neutral`. | `neutral` |
144
+ *
145
+ * @example Creating notifications from templates
146
+ * To create notifications declaratively, place a single `<sigvelo-toast-item>` in a template and call the toast's `createFromTemplate()` method. The toast item will be cloned and added to the stack.
147
+ *
148
+ *
149
+ * ```html
150
+ * <div id="toast__declarative">
151
+ * <!-- Toast stack -->
152
+ * <sigvelo-toast></sigvelo-toast>
153
+ *
154
+ * <!-- The toast item must be in a <template>! -->
155
+ * <template>
156
+ * <sigvelo-toast-item color="primary" duration="3000">
157
+ * <sigvelo-icon slot="icon" name="click"></sigvelo-icon>
158
+ * This was generated from a template.
159
+ * </sigvelo-toast-item>
160
+ * </template>
161
+ *
162
+ * <sigvelo-button>Show notification</sigvelo-button>
163
+ * </div>
164
+ *
165
+ * <script>
166
+ * const container = document.getElementById('toast__declarative');
167
+ * const toast = container.querySelector('sigvelo-toast');
168
+ * const template = container.querySelector('template');
169
+ * const button = container.querySelector('sigvelo-button');
170
+ *
171
+ * button.addEventListener('click', () => {
172
+ * toast.createFromTemplate(template);
173
+ * });
174
+ * <\/script>
175
+ * ```
176
+ *
177
+ * **Note:** Refer to the [toast item](/docs/components/toast-item) docs to see more examples of creating notifications declaratively.
178
+ *
179
+ * @example Variants
180
+ * When calling `create()`, set the `color` option to `primary`, `success`, `destructive`, or `neutral` to change the type of notification.
181
+ *
182
+ * ```html
183
+ * <div id="toast__color">
184
+ * <sigvelo-toast></sigvelo-toast>
185
+ *
186
+ * <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
187
+ * <sigvelo-button data-color="neutral" data-icon="settings">Neutral</sigvelo-button>
188
+ * <sigvelo-button data-color="primary" data-icon="info-circle">Primary</sigvelo-button>
189
+ * <sigvelo-button data-color="success" data-icon="check">Constructive</sigvelo-button>
190
+ * <sigvelo-button data-color="destructive" data-icon="alert-triangle">Destructive</sigvelo-button>
191
+ * </div>
192
+ * </div>
193
+ *
194
+ * <script>
195
+ * const container = document.getElementById('toast__color');
196
+ * const toast = container.querySelector('sigvelo-toast');
197
+ *
198
+ * // Listen for button clicks
199
+ * container.addEventListener('click', event => {
200
+ * const button = event.target.closest('[data-color]');
201
+ * const color = button?.getAttribute('data-color');
202
+ * const icon = button?.getAttribute('data-icon');
203
+ * if (!button) return;
204
+ *
205
+ * toast.create(`
206
+ * <sigvelo-icon slot="icon" name="${icon}"></sigvelo-icon>
207
+ * This is a ${color} notification
208
+ * `, {
209
+ * allowHtml: true,
210
+ * color
211
+ * });
212
+ * });
213
+ * <\/script>
214
+ * ```
215
+ *
216
+ * @example Changing the duration
217
+ * When calling `create()`, set the `duration` option to change how long notifications show before disappearing. The value is in milliseconds. A value of `0` will keep the notification open until the user dismisses it.
218
+ *
219
+ * ```html
220
+ * <sigvelo-toast id="toast__duration"></sigvelo-toast>
221
+ * <sigvelo-button>Show notification</sigvelo-button>
222
+ *
223
+ * <script>
224
+ * const toast = document.getElementById('toast__duration');
225
+ * const button = toast.nextElementSibling;
226
+ *
227
+ * button.addEventListener('click', () => {
228
+ * toast.create('You have 10 seconds to feed the cats', {
229
+ * duration: 10000
230
+ * });
231
+ * });
232
+ * <\/script>
233
+ * ```
234
+ *
235
+ * @example Removing the close button
236
+ * Use the `without-close` attribute to hide the close button and the progress ring. This is only recommended when a duration is set or when you're using custom buttons to dismiss the notification.
237
+ *
238
+ * ```html
239
+ * <sigvelo-toast id="toast__no-close"></sigvelo-toast>
240
+ * <sigvelo-button>Show notification</sigvelo-button>
241
+ *
242
+ * <script>
243
+ * const toast = document.getElementById('toast__no-close');
244
+ * const button = toast.nextElementSibling;
245
+ *
246
+ * button.addEventListener('click', () => {
247
+ * toast.create('This notification has no close button', {
248
+ * noCloseButton: true
249
+ * });
250
+ * });
251
+ * <\/script>
252
+ * ```
253
+ *
254
+ * **Warning:** Do not use this as a way to force the notification to stay open. You should provide a custom close button when you use this option. Remember that users can also press <sigvelo-hotkey keys="$escape"></sigvelo-hotkey> to close a notification.
255
+ *
256
+ * @example Responding to events
257
+ * The `create()` and `createFromTemplate()` methods return a reference to the generated toast item. You can use this to add a listener to respond when users click on the notification or dismiss it.
258
+ *
259
+ * ```html
260
+ * <sigvelo-toast id="toast__click"></sigvelo-toast>
261
+ * <sigvelo-button>Show notification</sigvelo-button>
262
+ *
263
+ * <script>
264
+ * const toast = document.getElementById('toast__click');
265
+ * const button = toast.nextElementSibling;
266
+ *
267
+ * button.addEventListener('click', async () => {
268
+ * const toastItem = await toast.create('Click this and check the console');
269
+ *
270
+ * // Log to the console and remove the notification when clicked
271
+ * toastItem.addEventListener('click', () => {
272
+ * console.log('The cats appreciate your click');
273
+ * toastItem.remove();
274
+ * });
275
+ *
276
+ * // Log when the notification is dismissed
277
+ * toastItem.addEventListener('sigvelo-closed', () => {
278
+ * console.log('Closed');
279
+ * });
280
+ * });
281
+ * <\/script>
282
+ * ```
283
+ *
284
+ * @example Responding to custom buttons
285
+ * To respond to custom buttons inside a toast item, obtain a reference to the notification and attach event listeners directly to the buttons you're interested in.
286
+ *
287
+ * ```html
288
+ * <sigvelo-toast id="toast__buttons"></sigvelo-toast>
289
+ * <sigvelo-button>Show notification</sigvelo-button>
290
+ *
291
+ * <script>
292
+ * const toast = document.getElementById('toast__buttons');
293
+ * const button = toast.nextElementSibling;
294
+ *
295
+ * button.addEventListener('click', async () => {
296
+ * // Create the notification
297
+ * const toastItem = await toast.create(`
298
+ * <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
299
+ * <p>The cats really want you to feed them now</p>
300
+ * <div style="display: flex; flex-wrap: wrap; gap: 0.5em;">
301
+ * <sigvelo-button class="complete" size="sm">Complete</sigvelo-button>
302
+ * <sigvelo-button class="later" size="sm">Remind me later</sigvelo-button>
303
+ * </div>
304
+ * `, {
305
+ * allowHtml: true,
306
+ * noCloseButton: true,
307
+ * color: 'primary',
308
+ * duration: 0
309
+ * });
310
+ *
311
+ * // Obtain a reference to each button
312
+ * const complete = toastItem.querySelector('.complete');
313
+ * const later = toastItem.querySelector('.later');
314
+ *
315
+ * // When complete is clicked...
316
+ * complete.addEventListener('click', async () => {
317
+ * toastItem.remove();
318
+ * toast.create('OK, the cats are happy now!', {
319
+ * color: 'success',
320
+ * duration: 3000
321
+ * });
322
+ * });
323
+ *
324
+ * // When later is clicked...
325
+ * later.addEventListener('click', async () => {
326
+ * toastItem.remove();
327
+ * toast.create('The cats do not want to wait…', {
328
+ * color: 'destructive',
329
+ * duration: 3000
330
+ * });
331
+ * });
332
+ * });
333
+ * <\/script>
334
+ * ```
335
+ *
336
+ * @example Custom progress bars
337
+ * You can add custom progress indicators using the readonly `--progress` custom property, which updates as the timer counts down.
338
+ *
339
+ * ```html
340
+ * <sigvelo-toast id="toast__progress"></sigvelo-toast>
341
+ * <sigvelo-button>Show notification</sigvelo-button>
342
+ *
343
+ * <script>
344
+ * const toast = document.getElementById('toast__progress');
345
+ * const button = toast.nextElementSibling;
346
+ *
347
+ * button.addEventListener('click', async () => {
348
+ * const toastItem = await toast.create(`
349
+ * <sigvelo-icon slot="icon" name="balloon"></sigvelo-icon>
350
+ * <p>This is fun, but the cats like the ring better.</p>
351
+ * <div class="custom-timer"></div>
352
+ * `, {
353
+ * allowHtml: true,
354
+ * color: 'primary'
355
+ * });
356
+ * });
357
+ * <\/script>
358
+ *
359
+ * <style>
360
+ * #toast__progress {
361
+ * <!--* Hide the standard progress ring -->
362
+ * sigvelo-toast-item::part(progress__track),
363
+ * sigvelo-toast-item::part(progress__indicator) {
364
+ * display: none;
365
+ * }
366
+ *
367
+ * .custom-timer {
368
+ * position: relative;
369
+ * height: 0.25em;
370
+ * width: 100%;
371
+ * border-radius: var(--sigvelo-radius-full);
372
+ * background-color: var(--sigvelo-color-neutral-bg-subtle);
373
+ * box-shadow: inset 0 0.25rem 0.25rem -0.25rem color-mix(in oklab, var(--sigvelo-color-shadow), transparent 85%);
374
+ * margin-block-start: -.5rem;
375
+ * margin-block-end: -.5rem;
376
+ *
377
+ * <!--* Custom progress bar -->
378
+ * &::after {
379
+ * content: '';
380
+ * position: absolute;
381
+ * top: 0;
382
+ * bottom: 0;
383
+ * left: 0;
384
+ * width: var(--progress);
385
+ * background-color: var(--sigvelo-color-primary-bg);
386
+ * border-radius: inherit;
387
+ * transition: 100ms width;
388
+ * }
389
+ * }
390
+ * }
391
+ * </style>
392
+ * ```
393
+ *
394
+ * @example Changing the placement
395
+ * Use the placement `attribute` to set the position of the toast stack. The most recent notification will always shows on top since users read from top to bottom.
396
+ *
397
+ * ```html
398
+ * <div id="toast__placement">
399
+ * <sigvelo-toast></sigvelo-toast>
400
+ *
401
+ * <sigvelo-select label="Placement" value="bottom-end" style="max-width: 300px;">
402
+ * <option value="top-start">top-start</option>
403
+ * <option value="top-center">top-center</option>
404
+ * <option value="top-end">top-end</option>
405
+ * <option value="bottom-start">bottom-start</option>
406
+ * <option value="bottom-center">bottom-center</option>
407
+ * <option value="bottom-end">bottom-end</option>
408
+ * </sigvelo-select>
409
+ * <br>
410
+ * <sigvelo-button>Alert the cats</sigvelo-button>
411
+ * </div>
412
+ *
413
+ * <script>
414
+ * const container = document.getElementById('toast__placement');
415
+ * const toast = container.querySelector('sigvelo-toast');
416
+ * const button = container.querySelector('sigvelo-button');
417
+ * const placementSelect = container.querySelector('sigvelo-select');
418
+ * let count = 0;
419
+ *
420
+ * // Update the stack's position
421
+ * placementSelect.addEventListener('input', () => {
422
+ * toast.placement = placementSelect.value;
423
+ * });
424
+ *
425
+ * // Send a notification
426
+ * button.addEventListener('click', event => {
427
+ * const numTimes = ++count === 1 ? '1 time' : `${count} times`;
428
+ *
429
+ * toast.create(`
430
+ * <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
431
+ * Notified the cats ${numTimes}
432
+ * `, {
433
+ * allowHtml: true,
434
+ * color: 'primary',
435
+ * duration: 0
436
+ * });
437
+ * });
438
+ * <\/script>
439
+ * ```
440
+ *
441
+ * **Note:** It's possible, although not typically recommended, to have more than one `<sigvelo-toast>` element on the page at a time. If you need to do this, use a different placement for each and ensure they respond as expected on mobile devices.
442
+ *
443
+ * @example Changing the animation
444
+ * Toast uses a transition group internally to handle enter and exit animations. To customize the animation, set the `transitionAnimation` property using JavaScript. This value will be passed through to the transition group's property of the same name.
445
+ *
446
+ * See changing the transition group's animation for more animations and examples.
447
+ *
448
+ * ```html
449
+ * <sigvelo-toast id="toast__animation"></sigvelo-toast>
450
+ * <sigvelo-button>Show notification</sigvelo-button>
451
+ *
452
+ * <script type="module">
453
+ * import { allDefined } from '/dist/sigvelo.js';
454
+ * await allDefined();
455
+ *
456
+ * const toast = document.getElementById('toast__animation');
457
+ * const button = toast.nextElementSibling;
458
+ *
459
+ * // Set a custom animation
460
+ * toast.transitionAnimation = {
461
+ * enter: {
462
+ * keyframes: [
463
+ * { opacity: 0, translate: '0 100%' },
464
+ * { opacity: 1, translate: '0 0' }
465
+ * ],
466
+ * easing: 'cubic-bezier(0.33, 1, 0.68, 1)'
467
+ * },
468
+ * exit: {
469
+ * keyframes: [
470
+ * { opacity: 1, translate: '0 0' },
471
+ * { opacity: 0, translate: '0 -100%' }
472
+ * ],
473
+ * easing: 'cubic-bezier(0.33, 1, 0.68, 1)'
474
+ * }
475
+ * };
476
+ *
477
+ * button.addEventListener('click', () => {
478
+ * toast.create(`
479
+ * <sigvelo-icon slot="icon" name="keyframes"></sigvelo-icon>
480
+ * This notification has a custom animation!
481
+ * `, {
482
+ * allowHtml: true,
483
+ * color: 'primary'
484
+ * });
485
+ * });
486
+ * <\/script>
487
+ * ```
488
+ */
489
+ var SigveloToast = class extends SigveloElement {
490
+ constructor(..._args) {
491
+ super(..._args);
492
+ this.isStackShowing = false;
493
+ this.placement = "bottom-end";
494
+ this.handleDocumentKeyDown = async (event) => {
495
+ await new Promise(requestAnimationFrame);
496
+ if (event.key === "Escape" && this.children.length > 0 && !event.defaultPrevented) {
497
+ event.preventDefault();
498
+ await this.stack.transitionComplete();
499
+ this.children[this.children.length - 1]?.remove();
500
+ }
501
+ };
502
+ this.handleDocumentScroll = () => {
503
+ this.stack.updateElementPositions();
504
+ };
505
+ }
506
+ static {
507
+ this.styles = [hostStyles, toast_styles_default];
508
+ }
509
+ connectedCallback() {
510
+ super.connectedCallback();
511
+ this.popover = "manual";
512
+ }
513
+ updated(changedProperties) {
514
+ if (changedProperties.has("placement")) this.stack.updateElementPositions();
515
+ }
516
+ /** Watch for clicks inside the stack */
517
+ handleClick(event) {
518
+ const target = event.target;
519
+ const notification = target.closest(".notification");
520
+ if (notification && target.closest("[data-toast=\"close\"]")) this.transitionGroup.transitionComplete().then(() => {
521
+ notification?.remove();
522
+ });
523
+ }
524
+ /** Called when the transition group detects content changes. */
525
+ handleContentChanged(event) {
526
+ event.detail.mutations.forEach((mutation) => {
527
+ mutation.removedNodes.forEach(async (node) => {
528
+ if (node instanceof Element && node.localName === "sigvelo-toast-item") {
529
+ node.dispatchEvent(new SigveloBeforeCloseEvent({ source: null }, { cancelable: false }));
530
+ await this.stack.transitionComplete();
531
+ node.dispatchEvent(new SigveloCloseEvent());
532
+ }
533
+ });
534
+ });
535
+ }
536
+ /** Hides the stack when the last notification has transitioned out */
537
+ async handleTransitionEnd() {
538
+ await new Promise(requestAnimationFrame);
539
+ if (this.children.length === 0) this.hideStack();
540
+ }
541
+ /** Hides the toast stack. Call this after all notifications have been removed. */
542
+ hideStack() {
543
+ this.hidePopover();
544
+ this.isStackShowing = false;
545
+ this.customStates.set("visible", false);
546
+ document.removeEventListener("keydown", this.handleDocumentKeyDown);
547
+ document.removeEventListener("scroll", this.handleDocumentScroll);
548
+ }
549
+ /** Shows the toast stack in preparation for a notification. */
550
+ showStack() {
551
+ if (this.isStackShowing) return;
552
+ this.isStackShowing = true;
553
+ this.customStates.set("visible", true);
554
+ this.showPopover();
555
+ document.addEventListener("keydown", this.handleDocumentKeyDown);
556
+ document.addEventListener("scroll", this.handleDocumentScroll, { passive: true });
557
+ }
558
+ /**
559
+ * Creates a toast notification and adds it to the stack. Returns a reference to the created toast item.
560
+ */
561
+ async create(content, options) {
562
+ const opts = {
563
+ allowHtml: false,
564
+ noCloseButton: false,
565
+ color: "neutral",
566
+ duration: 5e3,
567
+ ...options
568
+ };
569
+ const toastItemHtml = html`
570
+ <sigvelo-toast-item
571
+ color=${opts.color}
572
+ duration=${opts.duration}
573
+ ?without-close=${opts.noCloseButton}
574
+ >
575
+ ${opts.allowHtml ? unsafeHTML(content) : content}
576
+ </sigvelo-toast-item>
577
+ `;
578
+ this.showStack();
579
+ await this.transitionGroup.transitionComplete();
580
+ const tempDiv = document.createElement("div");
581
+ render(toastItemHtml, tempDiv);
582
+ const toastItem = tempDiv.firstElementChild;
583
+ this.prepend(toastItem);
584
+ toastItem.startTimer();
585
+ return toastItem;
586
+ }
587
+ /**
588
+ * Creates a toast notification using an existing `<sigvelo-toast-item>` element. Useful if you want to create your own
589
+ * toast items declaratively. Returns a reference to the cloned toast item.
590
+ */
591
+ async createFromTemplate(template) {
592
+ if (template.localName !== "template") {
593
+ console.warn("Only <template> elements can be passed to to createFromTemplate().", this);
594
+ return;
595
+ }
596
+ const toastItem = template.content.cloneNode(true).querySelector("sigvelo-toast-item");
597
+ if (toastItem?.localName !== "sigvelo-toast-item") {
598
+ console.warn("No <sigvelo-toast-item> element was found in the template passed to createFromTemplate().", this);
599
+ return;
600
+ }
601
+ this.showStack();
602
+ await this.transitionGroup.transitionComplete();
603
+ this.prepend(toastItem);
604
+ toastItem.startTimer();
605
+ return toastItem;
606
+ }
607
+ /** Removes all elements from the toast stack and turns when the remove transition finishes. */
608
+ async empty() {
609
+ await this.stack.transitionComplete();
610
+ this.innerHTML = "";
611
+ await this.stack.transitionComplete();
612
+ }
613
+ render() {
614
+ return html`
615
+ <slot></slot>
616
+
617
+ <sigvelo-transition-group
618
+ id="stack"
619
+ role="log"
620
+ aria-relevant="additions"
621
+ .transitionAnimation=${this.transitionAnimation}
622
+ .transitionContainer=${this}
623
+ @click=${this.handleClick}
624
+ @sigvelo-transition-end=${this.handleTransitionEnd}
625
+ @sigvelo-content-changed=${this.handleContentChanged}
626
+ ></sigvelo-transition-group>
627
+ `;
628
+ }
629
+ };
630
+ __decorate([query("#stack")], SigveloToast.prototype, "stack", void 0);
631
+ __decorate([query("sigvelo-transition-group")], SigveloToast.prototype, "transitionGroup", void 0);
632
+ __decorate([state()], SigveloToast.prototype, "transitionAnimation", void 0);
633
+ __decorate([property({ reflect: true })], SigveloToast.prototype, "placement", void 0);
634
+ customElements.define("sigvelo-toast", SigveloToast);
635
+ //#endregion
636
+ export { SigveloToast as t };