@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-cEBVK9NQ.d.ts ADDED
@@ -0,0 +1,487 @@
1
+ import { t as SigveloToastItem } from "./toast-item-BPpJT6vD.js";
2
+ import { t as SigveloTransitionGroup } from "./transition-group-DD_CjSNC.js";
3
+ import { CSSResultGroup, PropertyValues } from "lit";
4
+ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
5
+ import { TransitionAnimation } from "@mcp-b/wc-support/utilities/animate";
6
+
7
+ //#region src/components/toast/toast.d.ts
8
+ interface CreateOptions {
9
+ /**
10
+ * Set to true to process the content as HTML instead of plain text. Make sure you trust the included content,
11
+ * otherwise your app may become vulnerable to XSS exploits!
12
+ */
13
+ allowHtml: boolean;
14
+ /**
15
+ * The length of time to show the notification before removing it. Set this to `0` to show the notification until the
16
+ * user dismisses it.
17
+ */
18
+ duration: number;
19
+ /**
20
+ * When true, the close button will be omitted.
21
+ */
22
+ noCloseButton: boolean;
23
+ /**
24
+ * The type of notification to render.
25
+ */
26
+ color: "primary" | "success" | "destructive" | "neutral";
27
+ }
28
+ /**
29
+ * <sigvelo-toast>
30
+ *
31
+ * @summary A mechanism for showing temporary, non-intrusive notifications that appear above the page's content.
32
+ * @tag sigvelo-toast
33
+ * @documentation https://design-system.sigvelo.com/docs/components/toast
34
+ * @status stable
35
+ * @since 1.0
36
+ *
37
+ * @dependency sigvelo-toast-item
38
+ * @dependency sigvelo-transition-group
39
+ *
40
+ * @cssstate visible - Applied when the toast stack is visible.
41
+ *
42
+ * @example Default
43
+ * 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.
44
+ *
45
+ * ```html
46
+ * <sigvelo-toast id="toast__overview"></sigvelo-toast>
47
+ * <sigvelo-button>Show notification</sigvelo-button>
48
+ *
49
+ * <script>
50
+ * const toast = document.getElementById('toast__overview');
51
+ * const button = toast.nextElementSibling;
52
+ *
53
+ * button.addEventListener('click', () => {
54
+ * toast.create(`
55
+ * <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>
56
+ * <strong>Meowy McGee</strong><br>
57
+ * <small style="color: var(--sigvelo-color-text-muted);">has sent you a message</small>
58
+ * `, {
59
+ * allowHtml: true,
60
+ * color: 'primary'
61
+ * });
62
+ * });
63
+ * </script>
64
+ * ```
65
+ *
66
+ * **Note:** You can put the `<sigvelo-toast>` element anywhere in the DOM, as long as its somewhere inside the `<body>`.
67
+ *
68
+ * @example Creating notifications
69
+ * 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.
70
+ *
71
+ * ```html
72
+ * <sigvelo-toast></sigvelo-toast>
73
+ *
74
+ * <script>
75
+ * const toast = document.querySelector('sigvelo-toast');
76
+ * const button = document.querySelector('sigvelo-button');
77
+ *
78
+ * button.addEventListener('click', () => {
79
+ * toast.create('The notification has been sent', {
80
+ * allowHtml: false,
81
+ * duration: 5000,
82
+ * color: 'primary'
83
+ * });
84
+ * });
85
+ * </script>
86
+ * ```
87
+ *
88
+ * 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.
89
+ *
90
+ * | Property | Description | Default |
91
+ * | -------- | ----------- | ------- |
92
+ * | `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` |
93
+ * | `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` |
94
+ * | `color` | The type of notification to render, either `primary`, `success`, `destructive`, or `neutral`. | `neutral` |
95
+ *
96
+ * @example Creating notifications from templates
97
+ * 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.
98
+ *
99
+ *
100
+ * ```html
101
+ * <div id="toast__declarative">
102
+ * <!-- Toast stack -->
103
+ * <sigvelo-toast></sigvelo-toast>
104
+ *
105
+ * <!-- The toast item must be in a <template>! -->
106
+ * <template>
107
+ * <sigvelo-toast-item color="primary" duration="3000">
108
+ * <sigvelo-icon slot="icon" name="click"></sigvelo-icon>
109
+ * This was generated from a template.
110
+ * </sigvelo-toast-item>
111
+ * </template>
112
+ *
113
+ * <sigvelo-button>Show notification</sigvelo-button>
114
+ * </div>
115
+ *
116
+ * <script>
117
+ * const container = document.getElementById('toast__declarative');
118
+ * const toast = container.querySelector('sigvelo-toast');
119
+ * const template = container.querySelector('template');
120
+ * const button = container.querySelector('sigvelo-button');
121
+ *
122
+ * button.addEventListener('click', () => {
123
+ * toast.createFromTemplate(template);
124
+ * });
125
+ * </script>
126
+ * ```
127
+ *
128
+ * **Note:** Refer to the [toast item](/docs/components/toast-item) docs to see more examples of creating notifications declaratively.
129
+ *
130
+ * @example Variants
131
+ * When calling `create()`, set the `color` option to `primary`, `success`, `destructive`, or `neutral` to change the type of notification.
132
+ *
133
+ * ```html
134
+ * <div id="toast__color">
135
+ * <sigvelo-toast></sigvelo-toast>
136
+ *
137
+ * <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
138
+ * <sigvelo-button data-color="neutral" data-icon="settings">Neutral</sigvelo-button>
139
+ * <sigvelo-button data-color="primary" data-icon="info-circle">Primary</sigvelo-button>
140
+ * <sigvelo-button data-color="success" data-icon="check">Constructive</sigvelo-button>
141
+ * <sigvelo-button data-color="destructive" data-icon="alert-triangle">Destructive</sigvelo-button>
142
+ * </div>
143
+ * </div>
144
+ *
145
+ * <script>
146
+ * const container = document.getElementById('toast__color');
147
+ * const toast = container.querySelector('sigvelo-toast');
148
+ *
149
+ * // Listen for button clicks
150
+ * container.addEventListener('click', event => {
151
+ * const button = event.target.closest('[data-color]');
152
+ * const color = button?.getAttribute('data-color');
153
+ * const icon = button?.getAttribute('data-icon');
154
+ * if (!button) return;
155
+ *
156
+ * toast.create(`
157
+ * <sigvelo-icon slot="icon" name="${icon}"></sigvelo-icon>
158
+ * This is a ${color} notification
159
+ * `, {
160
+ * allowHtml: true,
161
+ * color
162
+ * });
163
+ * });
164
+ * </script>
165
+ * ```
166
+ *
167
+ * @example Changing the duration
168
+ * 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.
169
+ *
170
+ * ```html
171
+ * <sigvelo-toast id="toast__duration"></sigvelo-toast>
172
+ * <sigvelo-button>Show notification</sigvelo-button>
173
+ *
174
+ * <script>
175
+ * const toast = document.getElementById('toast__duration');
176
+ * const button = toast.nextElementSibling;
177
+ *
178
+ * button.addEventListener('click', () => {
179
+ * toast.create('You have 10 seconds to feed the cats', {
180
+ * duration: 10000
181
+ * });
182
+ * });
183
+ * </script>
184
+ * ```
185
+ *
186
+ * @example Removing the close button
187
+ * 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.
188
+ *
189
+ * ```html
190
+ * <sigvelo-toast id="toast__no-close"></sigvelo-toast>
191
+ * <sigvelo-button>Show notification</sigvelo-button>
192
+ *
193
+ * <script>
194
+ * const toast = document.getElementById('toast__no-close');
195
+ * const button = toast.nextElementSibling;
196
+ *
197
+ * button.addEventListener('click', () => {
198
+ * toast.create('This notification has no close button', {
199
+ * noCloseButton: true
200
+ * });
201
+ * });
202
+ * </script>
203
+ * ```
204
+ *
205
+ * **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.
206
+ *
207
+ * @example Responding to events
208
+ * 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.
209
+ *
210
+ * ```html
211
+ * <sigvelo-toast id="toast__click"></sigvelo-toast>
212
+ * <sigvelo-button>Show notification</sigvelo-button>
213
+ *
214
+ * <script>
215
+ * const toast = document.getElementById('toast__click');
216
+ * const button = toast.nextElementSibling;
217
+ *
218
+ * button.addEventListener('click', async () => {
219
+ * const toastItem = await toast.create('Click this and check the console');
220
+ *
221
+ * // Log to the console and remove the notification when clicked
222
+ * toastItem.addEventListener('click', () => {
223
+ * console.log('The cats appreciate your click');
224
+ * toastItem.remove();
225
+ * });
226
+ *
227
+ * // Log when the notification is dismissed
228
+ * toastItem.addEventListener('sigvelo-closed', () => {
229
+ * console.log('Closed');
230
+ * });
231
+ * });
232
+ * </script>
233
+ * ```
234
+ *
235
+ * @example Responding to custom buttons
236
+ * 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.
237
+ *
238
+ * ```html
239
+ * <sigvelo-toast id="toast__buttons"></sigvelo-toast>
240
+ * <sigvelo-button>Show notification</sigvelo-button>
241
+ *
242
+ * <script>
243
+ * const toast = document.getElementById('toast__buttons');
244
+ * const button = toast.nextElementSibling;
245
+ *
246
+ * button.addEventListener('click', async () => {
247
+ * // Create the notification
248
+ * const toastItem = await toast.create(`
249
+ * <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
250
+ * <p>The cats really want you to feed them now</p>
251
+ * <div style="display: flex; flex-wrap: wrap; gap: 0.5em;">
252
+ * <sigvelo-button class="complete" size="sm">Complete</sigvelo-button>
253
+ * <sigvelo-button class="later" size="sm">Remind me later</sigvelo-button>
254
+ * </div>
255
+ * `, {
256
+ * allowHtml: true,
257
+ * noCloseButton: true,
258
+ * color: 'primary',
259
+ * duration: 0
260
+ * });
261
+ *
262
+ * // Obtain a reference to each button
263
+ * const complete = toastItem.querySelector('.complete');
264
+ * const later = toastItem.querySelector('.later');
265
+ *
266
+ * // When complete is clicked...
267
+ * complete.addEventListener('click', async () => {
268
+ * toastItem.remove();
269
+ * toast.create('OK, the cats are happy now!', {
270
+ * color: 'success',
271
+ * duration: 3000
272
+ * });
273
+ * });
274
+ *
275
+ * // When later is clicked...
276
+ * later.addEventListener('click', async () => {
277
+ * toastItem.remove();
278
+ * toast.create('The cats do not want to wait…', {
279
+ * color: 'destructive',
280
+ * duration: 3000
281
+ * });
282
+ * });
283
+ * });
284
+ * </script>
285
+ * ```
286
+ *
287
+ * @example Custom progress bars
288
+ * You can add custom progress indicators using the readonly `--progress` custom property, which updates as the timer counts down.
289
+ *
290
+ * ```html
291
+ * <sigvelo-toast id="toast__progress"></sigvelo-toast>
292
+ * <sigvelo-button>Show notification</sigvelo-button>
293
+ *
294
+ * <script>
295
+ * const toast = document.getElementById('toast__progress');
296
+ * const button = toast.nextElementSibling;
297
+ *
298
+ * button.addEventListener('click', async () => {
299
+ * const toastItem = await toast.create(`
300
+ * <sigvelo-icon slot="icon" name="balloon"></sigvelo-icon>
301
+ * <p>This is fun, but the cats like the ring better.</p>
302
+ * <div class="custom-timer"></div>
303
+ * `, {
304
+ * allowHtml: true,
305
+ * color: 'primary'
306
+ * });
307
+ * });
308
+ * </script>
309
+ *
310
+ * <style>
311
+ * #toast__progress {
312
+ * <!--* Hide the standard progress ring -->
313
+ * sigvelo-toast-item::part(progress__track),
314
+ * sigvelo-toast-item::part(progress__indicator) {
315
+ * display: none;
316
+ * }
317
+ *
318
+ * .custom-timer {
319
+ * position: relative;
320
+ * height: 0.25em;
321
+ * width: 100%;
322
+ * border-radius: var(--sigvelo-radius-full);
323
+ * background-color: var(--sigvelo-color-neutral-bg-subtle);
324
+ * box-shadow: inset 0 0.25rem 0.25rem -0.25rem color-mix(in oklab, var(--sigvelo-color-shadow), transparent 85%);
325
+ * margin-block-start: -.5rem;
326
+ * margin-block-end: -.5rem;
327
+ *
328
+ * <!--* Custom progress bar -->
329
+ * &::after {
330
+ * content: '';
331
+ * position: absolute;
332
+ * top: 0;
333
+ * bottom: 0;
334
+ * left: 0;
335
+ * width: var(--progress);
336
+ * background-color: var(--sigvelo-color-primary-bg);
337
+ * border-radius: inherit;
338
+ * transition: 100ms width;
339
+ * }
340
+ * }
341
+ * }
342
+ * </style>
343
+ * ```
344
+ *
345
+ * @example Changing the placement
346
+ * 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.
347
+ *
348
+ * ```html
349
+ * <div id="toast__placement">
350
+ * <sigvelo-toast></sigvelo-toast>
351
+ *
352
+ * <sigvelo-select label="Placement" value="bottom-end" style="max-width: 300px;">
353
+ * <option value="top-start">top-start</option>
354
+ * <option value="top-center">top-center</option>
355
+ * <option value="top-end">top-end</option>
356
+ * <option value="bottom-start">bottom-start</option>
357
+ * <option value="bottom-center">bottom-center</option>
358
+ * <option value="bottom-end">bottom-end</option>
359
+ * </sigvelo-select>
360
+ * <br>
361
+ * <sigvelo-button>Alert the cats</sigvelo-button>
362
+ * </div>
363
+ *
364
+ * <script>
365
+ * const container = document.getElementById('toast__placement');
366
+ * const toast = container.querySelector('sigvelo-toast');
367
+ * const button = container.querySelector('sigvelo-button');
368
+ * const placementSelect = container.querySelector('sigvelo-select');
369
+ * let count = 0;
370
+ *
371
+ * // Update the stack's position
372
+ * placementSelect.addEventListener('input', () => {
373
+ * toast.placement = placementSelect.value;
374
+ * });
375
+ *
376
+ * // Send a notification
377
+ * button.addEventListener('click', event => {
378
+ * const numTimes = ++count === 1 ? '1 time' : `${count} times`;
379
+ *
380
+ * toast.create(`
381
+ * <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
382
+ * Notified the cats ${numTimes}
383
+ * `, {
384
+ * allowHtml: true,
385
+ * color: 'primary',
386
+ * duration: 0
387
+ * });
388
+ * });
389
+ * </script>
390
+ * ```
391
+ *
392
+ * **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.
393
+ *
394
+ * @example Changing the animation
395
+ * 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.
396
+ *
397
+ * See changing the transition group's animation for more animations and examples.
398
+ *
399
+ * ```html
400
+ * <sigvelo-toast id="toast__animation"></sigvelo-toast>
401
+ * <sigvelo-button>Show notification</sigvelo-button>
402
+ *
403
+ * <script type="module">
404
+ * import { allDefined } from '/dist/sigvelo.js';
405
+ * await allDefined();
406
+ *
407
+ * const toast = document.getElementById('toast__animation');
408
+ * const button = toast.nextElementSibling;
409
+ *
410
+ * // Set a custom animation
411
+ * toast.transitionAnimation = {
412
+ * enter: {
413
+ * keyframes: [
414
+ * { opacity: 0, translate: '0 100%' },
415
+ * { opacity: 1, translate: '0 0' }
416
+ * ],
417
+ * easing: 'cubic-bezier(0.33, 1, 0.68, 1)'
418
+ * },
419
+ * exit: {
420
+ * keyframes: [
421
+ * { opacity: 1, translate: '0 0' },
422
+ * { opacity: 0, translate: '0 -100%' }
423
+ * ],
424
+ * easing: 'cubic-bezier(0.33, 1, 0.68, 1)'
425
+ * }
426
+ * };
427
+ *
428
+ * button.addEventListener('click', () => {
429
+ * toast.create(`
430
+ * <sigvelo-icon slot="icon" name="keyframes"></sigvelo-icon>
431
+ * This notification has a custom animation!
432
+ * `, {
433
+ * allowHtml: true,
434
+ * color: 'primary'
435
+ * });
436
+ * });
437
+ * </script>
438
+ * ```
439
+ */
440
+ declare class SigveloToast extends SigveloElement {
441
+ static styles: CSSResultGroup;
442
+ private isStackShowing;
443
+ stack: SigveloTransitionGroup;
444
+ transitionGroup: SigveloTransitionGroup;
445
+ /**
446
+ * A custom enter/exit animation passed through to the internal transition group.
447
+ * (Property only)
448
+ */
449
+ transitionAnimation?: TransitionAnimation;
450
+ /** The placement of the toast stack on the screen. */
451
+ placement: "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end";
452
+ connectedCallback(): void;
453
+ updated(changedProperties: PropertyValues<this>): void;
454
+ /** Watch for clicks inside the stack */
455
+ private handleClick;
456
+ /** Called when the transition group detects content changes. */
457
+ private handleContentChanged;
458
+ /** Listen for Escape anywhere in the document */
459
+ private handleDocumentKeyDown;
460
+ /** Update the positions when scrolling */
461
+ private handleDocumentScroll;
462
+ /** Hides the stack when the last notification has transitioned out */
463
+ private handleTransitionEnd;
464
+ /** Hides the toast stack. Call this after all notifications have been removed. */
465
+ private hideStack;
466
+ /** Shows the toast stack in preparation for a notification. */
467
+ private showStack;
468
+ /**
469
+ * Creates a toast notification and adds it to the stack. Returns a reference to the created toast item.
470
+ */
471
+ create(content: string, options?: Partial<CreateOptions>): Promise<SigveloToastItem>;
472
+ /**
473
+ * Creates a toast notification using an existing `<sigvelo-toast-item>` element. Useful if you want to create your own
474
+ * toast items declaratively. Returns a reference to the cloned toast item.
475
+ */
476
+ createFromTemplate(template: HTMLTemplateElement): Promise<SigveloToastItem | undefined>;
477
+ /** Removes all elements from the toast stack and turns when the remove transition finishes. */
478
+ empty(): Promise<void>;
479
+ render(): import("lit-html").TemplateResult<1>;
480
+ }
481
+ declare global {
482
+ interface HTMLElementTagNameMap {
483
+ "sigvelo-toast": SigveloToast;
484
+ }
485
+ }
486
+ //#endregion
487
+ export { SigveloToast as n, CreateOptions as t };
package/dist/toast-item-BPpJT6vD.d.ts ADDED
@@ -0,0 +1,159 @@
1
+ import { CSSResultGroup, PropertyValues } from "lit";
2
+ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
3
+
4
+ //#region src/components/toast-item/toast-item.d.ts
5
+ /**
6
+ * <sigvelo-toast-item>
7
+ *
8
+ * @summary Notifications displayed by the toast component.
9
+ * @tag sigvelo-toast-item
10
+ * @documentation https://design-system.sigvelo.com/docs/components/toast-item
11
+ * @status stable
12
+ * @since 1.0
13
+ *
14
+ * @dependency sigvelo-icon
15
+ * @dependency sigvelo-progress
16
+ *
17
+ * @slot - Content to show in the toast item.
18
+ * @slot icon - Content to show as a visual. Usually an icon, image, avatar, etc.
19
+ *
20
+ * @event sigvelo-before-close - Emitted when the toast item is dismissed.
21
+ * @event sigvelo-close - Emitted after the toast has been dismissed and the hide animation has completed.
22
+ *
23
+ * @csspart icon
24
+ * @csspart content
25
+ * @csspart close-button - The close button, a `<button>` element.
26
+ * @csspart progress - The progress ring, a `<sigvelo-progress>` element.
27
+ * @csspart progress__track - The progress ring's exported `track` part.
28
+ * @csspart progress__indicator - The progress ring's exported `indicator` part.
29
+ * @csspart progress__content - The progress ring's exported `content` part.
30
+ * @csspart close-icon - The close icon, a `<sigvelo-icon>` element.
31
+ * @csspart close-icon__svg - The close icons exported `svg` part.
32
+ *
33
+ * @cssproperty [--accent-line-width=0.33em] - The width of the notification's accent line.
34
+ * @cssproperty --progress - A readonly value that goes from 100% to 0%, representing the progress remaining until the
35
+ * notification closes. Useful for creating custom content with visual indicators of the notification's progress.
36
+ *
37
+ * @example Default
38
+ * You can create toast items on the fly using the toast element's `create()` method. Alternatively, you can create them declaratively by wrapping them in a `<template>` and calling `createFromTemplate()`.
39
+ *
40
+ * ```html
41
+ * <sigvelo-toast-item color="primary" duration="0">
42
+ * <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>
43
+ * <strong>Meowy McGee</strong><br>
44
+ * <small style="color: var(--sigvelo-color-text-muted);">has sent you a message</small>
45
+ * </sigvelo-toast-item>
46
+ * ```
47
+ *
48
+ * **Note:** For documentation purposes, this page omits the `<template>` tag, allowing the toast item to appear inline so you can see the result of each example.
49
+ *
50
+ * @example Variants
51
+ * Set the `color` attribute to `default`, `primary`, `success`, or `destructive` to change the button's color.
52
+ *
53
+ * ```html
54
+ * <sigvelo-toast-item color="neutral" duration="0">
55
+ * <sigvelo-icon slot="icon" name="settings"></sigvelo-icon>
56
+ * Your changes have been saved
57
+ * </sigvelo-toast-item>
58
+ *
59
+ * <sigvelo-toast-item color="primary" duration="0">
60
+ * <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
61
+ * The cats have requested more food
62
+ * </sigvelo-toast-item>
63
+ *
64
+ * <sigvelo-toast-item color="success" duration="0">
65
+ * <sigvelo-icon slot="icon" name="send"></sigvelo-icon>
66
+ * Your message has been sent
67
+ * </sigvelo-toast-item>
68
+ *
69
+ * <sigvelo-toast-item color="destructive" duration="0">
70
+ * <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
71
+ * The litter box has been emptied
72
+ * </sigvelo-toast-item>
73
+ * ```
74
+ *
75
+ * @example Adding icons
76
+ * Use the `icon` slot to add a visual to the toast item. Icons, images, and avatars work well here.
77
+ *
78
+ * ```html
79
+ * <sigvelo-toast-item duration="0">
80
+ * <sigvelo-avatar slot="icon" label="Chill kitty" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
81
+ * <strong>Chill Kitty</strong><br>
82
+ * <small style="color: var(--sigvelo-color-text-muted);">has invited you to collaborate on a project</small>
83
+ * </sigvelo-toast-item>
84
+ * ```
85
+ *
86
+ * @example Changing the duration
87
+ * By default, toast items dismiss themselves after five seconds. Set the `duration` property to the number of milliseconds the item should wait before dismissing, or `0` to wait for the user to dismiss it.
88
+ *
89
+ * ```html
90
+ * <sigvelo-toast-item duration="10000">
91
+ * This notification will stay open for 10 seconds.
92
+ * </sigvelo-toast-item>
93
+ *
94
+ * <sigvelo-toast-item duration="0">
95
+ * This notification will stay open until the user closes it
96
+ * </sigvelo-toast-item>
97
+ * ```
98
+ *
99
+ * @example Hiding the close button
100
+ * Use the `without-close` attribute to hide the close button. This is only recommended when a duration is set or when you're using custom buttons to dismiss the notification.
101
+ *
102
+ * ```html
103
+ * <sigvelo-toast-item without-close duration="0">
104
+ * This notification does not have a close button.
105
+ * </sigvelo-toast-item>
106
+ * ```
107
+ *
108
+ * **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.
109
+ */
110
+ declare class SigveloToastItem extends SigveloElement {
111
+ static observeSlots: boolean;
112
+ static styles: CSSResultGroup;
113
+ private animationFrame;
114
+ private isPaused;
115
+ private localize;
116
+ private startTime;
117
+ /**
118
+ * @internal The amount of time left before the notification is removed. Moves from 100 (full time left) to zero (no
119
+ * time left).
120
+ */
121
+ timeLeft: number;
122
+ /** The type of notification to render. */
123
+ color: "primary" | "success" | "destructive" | "neutral";
124
+ /**
125
+ * The length of time to show the notification before removing it. Set this to `0` to show the notification until the
126
+ * user dismisses it.
127
+ */
128
+ duration: number;
129
+ /** When set, the close button will be omitted. */
130
+ withoutClose: boolean;
131
+ connectedCallback(): void;
132
+ disconnectedCallback(): void;
133
+ updated(changedProperties: PropertyValues<this>): void;
134
+ /**
135
+ * @internal Starts the auto-dismiss timer. If no duration is specified, this method has no effect.
136
+ */
137
+ startTimer(): void;
138
+ /**
139
+ * @internal Stops the auto-dismiss timer.
140
+ */
141
+ stopTimer(): void;
142
+ private tick;
143
+ /** Close it! */
144
+ private handleCloseClick;
145
+ /** Pause the timer on hover in */
146
+ private handlePointerEnter;
147
+ /** Resume the timer on hover out */
148
+ private handlePointerLeave;
149
+ /** Waits for the toast stack's transition group to finish transitioning and then resolves. */
150
+ private waitForStackTransition;
151
+ render(): import("lit-html").TemplateResult<1>;
152
+ }
153
+ declare global {
154
+ interface HTMLElementTagNameMap {
155
+ "sigvelo-toast-item": SigveloToastItem;
156
+ }
157
+ }
158
+ //#endregion
159
+ export { SigveloToastItem as t };