@mozaic-ds/web-components 1.1.0 → 1.3.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 (406) hide show
  1. package/README.md +26 -104
  2. package/dist/Cross20.js +1 -1
  3. package/dist/Cross20.js.map +1 -1
  4. package/dist/Cross24.js +1 -1
  5. package/dist/CrossCircleFilled24.js +1 -1
  6. package/dist/Less24.js +2 -0
  7. package/dist/Less24.js.map +1 -0
  8. package/dist/attributes.js +1 -1
  9. package/dist/attributes.js.map +1 -1
  10. package/dist/bundle.d.ts +8 -5
  11. package/dist/bundle.d.ts.map +1 -1
  12. package/dist/bundle.js +8 -5
  13. package/dist/components/avatar/Avatar.js +2 -2
  14. package/dist/components/avatar/Avatar.js.map +1 -1
  15. package/dist/components/avatar/Avatar.stories.d.ts +2 -1
  16. package/dist/components/avatar/Avatar.stories.d.ts.map +1 -1
  17. package/dist/components/avatar/Avatar.stories.js +2 -1
  18. package/dist/components/avatar/Avatar.svelte +3 -3
  19. package/dist/components/breadcrumb/Breadcrumb.js +2 -2
  20. package/dist/components/breadcrumb/Breadcrumb.js.map +1 -1
  21. package/dist/components/breadcrumb/Breadcrumb.stories.d.ts +1 -0
  22. package/dist/components/breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
  23. package/dist/components/breadcrumb/Breadcrumb.stories.js +1 -0
  24. package/dist/components/breadcrumb/Breadcrumb.svelte +3 -3
  25. package/dist/components/button/Button.js +3 -3
  26. package/dist/components/button/Button.js.map +1 -1
  27. package/dist/components/button/Button.stories.d.ts +2 -0
  28. package/dist/components/button/Button.stories.d.ts.map +1 -1
  29. package/dist/components/button/Button.stories.js +2 -0
  30. package/dist/components/button/Button.svelte +2 -3
  31. package/dist/components/button/Button.svelte.d.ts +0 -1
  32. package/dist/components/button/Button.svelte.d.ts.map +1 -1
  33. package/dist/components/callout/Callout.js +2 -2
  34. package/dist/components/callout/Callout.js.map +1 -1
  35. package/dist/components/callout/Callout.stories.d.ts +5 -2
  36. package/dist/components/callout/Callout.stories.d.ts.map +1 -1
  37. package/dist/components/callout/Callout.stories.js +5 -2
  38. package/dist/components/callout/Callout.svelte +3 -3
  39. package/dist/components/carousel/Carousel.js +4 -0
  40. package/dist/components/carousel/Carousel.js.map +1 -0
  41. package/dist/components/carousel/Carousel.spec.js +49 -0
  42. package/dist/components/carousel/Carousel.stories.d.ts +9 -0
  43. package/dist/components/carousel/Carousel.stories.d.ts.map +1 -0
  44. package/dist/components/carousel/Carousel.stories.js +72 -0
  45. package/dist/components/carousel/Carousel.svelte +187 -0
  46. package/dist/components/carousel/Carousel.svelte.d.ts +46 -0
  47. package/dist/components/carousel/Carousel.svelte.d.ts.map +1 -0
  48. package/dist/components/carousel/README.md +18 -0
  49. package/dist/components/checkbox/Checkbox.js +4 -4
  50. package/dist/components/checkbox/Checkbox.js.map +1 -1
  51. package/dist/components/checkbox/Checkbox.stories.d.ts +1 -0
  52. package/dist/components/checkbox/Checkbox.stories.d.ts.map +1 -1
  53. package/dist/components/checkbox/Checkbox.stories.js +1 -0
  54. package/dist/components/checkbox/Checkbox.svelte +4 -2
  55. package/dist/components/checkbox/Checkbox.svelte.d.ts.map +1 -1
  56. package/dist/components/checkboxgroup/CheckboxGroup.js +4 -4
  57. package/dist/components/checkboxgroup/CheckboxGroup.js.map +1 -1
  58. package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts +1 -0
  59. package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts.map +1 -1
  60. package/dist/components/checkboxgroup/CheckboxGroup.stories.js +1 -0
  61. package/dist/components/checkboxgroup/CheckboxGroup.svelte +4 -4
  62. package/dist/components/circularprogressbar/CircularProgressbar.js +2 -2
  63. package/dist/components/circularprogressbar/CircularProgressbar.js.map +1 -1
  64. package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts +1 -0
  65. package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts.map +1 -1
  66. package/dist/components/circularprogressbar/CircularProgressbar.stories.js +3 -2
  67. package/dist/components/circularprogressbar/CircularProgressbar.svelte +9 -1
  68. package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts.map +1 -1
  69. package/dist/components/container/Container.js +14 -0
  70. package/dist/components/container/Container.js.map +1 -0
  71. package/dist/components/container/Container.spec.js +26 -0
  72. package/dist/components/container/Container.stories.d.ts +8 -0
  73. package/dist/components/container/Container.stories.d.ts.map +1 -0
  74. package/dist/components/container/Container.stories.js +24 -0
  75. package/dist/components/container/Container.svelte +60 -0
  76. package/dist/components/container/Container.svelte.d.ts +39 -0
  77. package/dist/components/container/Container.svelte.d.ts.map +1 -0
  78. package/dist/components/container/README.md +16 -0
  79. package/dist/components/datepicker/Datepicker.js +3 -3
  80. package/dist/components/datepicker/Datepicker.js.map +1 -1
  81. package/dist/components/datepicker/Datepicker.stories.d.ts +1 -0
  82. package/dist/components/datepicker/Datepicker.stories.d.ts.map +1 -1
  83. package/dist/components/datepicker/Datepicker.stories.js +1 -0
  84. package/dist/components/datepicker/Datepicker.svelte +11 -9
  85. package/dist/components/datepicker/Datepicker.svelte.d.ts.map +1 -1
  86. package/dist/components/divider/Divider.js +4 -0
  87. package/dist/components/divider/Divider.js.map +1 -0
  88. package/dist/components/divider/Divider.spec.js +50 -0
  89. package/dist/components/divider/Divider.stories.d.ts +10 -0
  90. package/dist/components/divider/Divider.stories.d.ts.map +1 -0
  91. package/dist/components/divider/Divider.stories.js +58 -0
  92. package/dist/components/divider/Divider.svelte +90 -0
  93. package/dist/components/divider/Divider.svelte.d.ts +47 -0
  94. package/dist/components/divider/Divider.svelte.d.ts.map +1 -0
  95. package/dist/components/divider/README.md +18 -0
  96. package/dist/components/drawer/Drawer.js +4 -4
  97. package/dist/components/drawer/Drawer.js.map +1 -1
  98. package/dist/components/drawer/Drawer.stories.d.ts +2 -0
  99. package/dist/components/drawer/Drawer.stories.d.ts.map +1 -1
  100. package/dist/components/drawer/Drawer.stories.js +2 -0
  101. package/dist/components/drawer/Drawer.svelte +16 -6
  102. package/dist/components/drawer/Drawer.svelte.d.ts.map +1 -1
  103. package/dist/components/field/Field.js +2 -2
  104. package/dist/components/field/Field.stories.d.ts +2 -0
  105. package/dist/components/field/Field.stories.d.ts.map +1 -1
  106. package/dist/components/field/Field.stories.js +2 -0
  107. package/dist/components/flag/Flag.js +2 -2
  108. package/dist/components/flag/Flag.js.map +1 -1
  109. package/dist/components/flag/Flag.stories.d.ts +1 -0
  110. package/dist/components/flag/Flag.stories.d.ts.map +1 -1
  111. package/dist/components/flag/Flag.stories.js +1 -0
  112. package/dist/components/flag/Flag.svelte +3 -3
  113. package/dist/components/iconbutton/IconButton.js +2 -2
  114. package/dist/components/iconbutton/IconButton.js.map +1 -1
  115. package/dist/components/iconbutton/IconButton.stories.d.ts +4 -2
  116. package/dist/components/iconbutton/IconButton.stories.d.ts.map +1 -1
  117. package/dist/components/iconbutton/IconButton.stories.js +4 -2
  118. package/dist/components/iconbutton/IconButton.svelte +2 -3
  119. package/dist/components/iconbutton/IconButton.svelte.d.ts +0 -1
  120. package/dist/components/iconbutton/IconButton.svelte.d.ts.map +1 -1
  121. package/dist/components/kpiitem/KpiItem.js +5 -0
  122. package/dist/components/kpiitem/KpiItem.js.map +1 -0
  123. package/dist/components/kpiitem/KpiItem.spec.js +60 -0
  124. package/dist/components/kpiitem/KpiItem.stories.d.ts +9 -0
  125. package/dist/components/kpiitem/KpiItem.stories.d.ts.map +1 -0
  126. package/dist/components/kpiitem/KpiItem.stories.js +57 -0
  127. package/dist/components/kpiitem/KpiItem.svelte +231 -0
  128. package/dist/components/kpiitem/KpiItem.svelte.d.ts +34 -0
  129. package/dist/components/kpiitem/KpiItem.svelte.d.ts.map +1 -0
  130. package/dist/components/kpiitem/README.md +15 -0
  131. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js +2 -2
  132. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js.map +1 -1
  133. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts +1 -0
  134. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts.map +1 -1
  135. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.js +1 -0
  136. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte +4 -3
  137. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js +2 -2
  138. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map +1 -1
  139. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts +1 -0
  140. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts.map +1 -1
  141. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.js +1 -0
  142. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte +5 -4
  143. package/dist/components/link/Link.js +2 -2
  144. package/dist/components/link/Link.js.map +1 -1
  145. package/dist/components/link/Link.stories.d.ts +3 -0
  146. package/dist/components/link/Link.stories.d.ts.map +1 -1
  147. package/dist/components/link/Link.stories.js +3 -0
  148. package/dist/components/link/Link.svelte +3 -1
  149. package/dist/components/link/Link.svelte.d.ts.map +1 -1
  150. package/dist/components/loader/Loader.js +2 -2
  151. package/dist/components/loader/Loader.js.map +1 -1
  152. package/dist/components/loader/Loader.stories.d.ts +1 -0
  153. package/dist/components/loader/Loader.stories.d.ts.map +1 -1
  154. package/dist/components/loader/Loader.stories.js +1 -0
  155. package/dist/components/loader/Loader.svelte +2 -1
  156. package/dist/components/loadingoverlay/LoadingOverlay.js +2 -2
  157. package/dist/components/loadingoverlay/LoadingOverlay.js.map +1 -1
  158. package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts +1 -0
  159. package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts.map +1 -1
  160. package/dist/components/loadingoverlay/LoadingOverlay.stories.js +1 -0
  161. package/dist/components/loadingoverlay/LoadingOverlay.svelte +2 -2
  162. package/dist/components/modal/Modal.js +4 -4
  163. package/dist/components/modal/Modal.js.map +1 -1
  164. package/dist/components/modal/Modal.stories.d.ts +5 -2
  165. package/dist/components/modal/Modal.stories.d.ts.map +1 -1
  166. package/dist/components/modal/Modal.stories.js +5 -2
  167. package/dist/components/modal/Modal.svelte +6 -5
  168. package/dist/components/numberbadge/NumberBadge.js +2 -2
  169. package/dist/components/numberbadge/NumberBadge.js.map +1 -1
  170. package/dist/components/numberbadge/NumberBadge.stories.d.ts +1 -0
  171. package/dist/components/numberbadge/NumberBadge.stories.d.ts.map +1 -1
  172. package/dist/components/numberbadge/NumberBadge.stories.js +1 -0
  173. package/dist/components/numberbadge/NumberBadge.svelte +6 -3
  174. package/dist/components/overlay/Overlay.js +2 -2
  175. package/dist/components/overlay/Overlay.stories.d.ts +1 -0
  176. package/dist/components/overlay/Overlay.stories.d.ts.map +1 -1
  177. package/dist/components/overlay/Overlay.stories.js +1 -0
  178. package/dist/components/pagination/Pagination.js +6 -6
  179. package/dist/components/pagination/Pagination.js.map +1 -1
  180. package/dist/components/pagination/Pagination.stories.d.ts +1 -0
  181. package/dist/components/pagination/Pagination.stories.d.ts.map +1 -1
  182. package/dist/components/pagination/Pagination.stories.js +1 -0
  183. package/dist/components/pagination/Pagination.svelte +5 -5
  184. package/dist/components/passwordinput/PasswordInput.js +4 -3
  185. package/dist/components/passwordinput/PasswordInput.js.map +1 -1
  186. package/dist/components/passwordinput/PasswordInput.stories.d.ts +1 -0
  187. package/dist/components/passwordinput/PasswordInput.stories.d.ts.map +1 -1
  188. package/dist/components/passwordinput/PasswordInput.stories.js +1 -0
  189. package/dist/components/passwordinput/PasswordInput.svelte +10 -8
  190. package/dist/components/passwordinput/PasswordInput.svelte.d.ts.map +1 -1
  191. package/dist/components/phonenumber/PhoneNumber.js +22 -0
  192. package/dist/components/phonenumber/PhoneNumber.js.map +1 -0
  193. package/dist/components/phonenumber/PhoneNumber.spec.js +103 -0
  194. package/dist/components/phonenumber/PhoneNumber.stories.d.ts +14 -0
  195. package/dist/components/phonenumber/PhoneNumber.stories.d.ts.map +1 -0
  196. package/dist/components/phonenumber/PhoneNumber.stories.js +116 -0
  197. package/dist/components/phonenumber/PhoneNumber.svelte +896 -0
  198. package/dist/components/phonenumber/PhoneNumber.svelte.d.ts +60 -0
  199. package/dist/components/phonenumber/PhoneNumber.svelte.d.ts.map +1 -0
  200. package/dist/components/phonenumber/README.md +27 -0
  201. package/dist/components/pincode/Pincode.js +2 -2
  202. package/dist/components/pincode/Pincode.js.map +1 -1
  203. package/dist/components/pincode/Pincode.stories.d.ts +1 -0
  204. package/dist/components/pincode/Pincode.stories.d.ts.map +1 -1
  205. package/dist/components/pincode/Pincode.stories.js +1 -0
  206. package/dist/components/pincode/Pincode.svelte +5 -5
  207. package/dist/components/quantityselector/QuantitySelector.js +3 -3
  208. package/dist/components/quantityselector/QuantitySelector.js.map +1 -1
  209. package/dist/components/quantityselector/QuantitySelector.stories.d.ts +1 -0
  210. package/dist/components/quantityselector/QuantitySelector.stories.d.ts.map +1 -1
  211. package/dist/components/quantityselector/QuantitySelector.stories.js +1 -0
  212. package/dist/components/quantityselector/QuantitySelector.svelte +11 -9
  213. package/dist/components/quantityselector/QuantitySelector.svelte.d.ts.map +1 -1
  214. package/dist/components/radio/Radio.js +2 -2
  215. package/dist/components/radio/Radio.js.map +1 -1
  216. package/dist/components/radio/Radio.stories.d.ts +1 -0
  217. package/dist/components/radio/Radio.stories.d.ts.map +1 -1
  218. package/dist/components/radio/Radio.stories.js +1 -0
  219. package/dist/components/radio/Radio.svelte +12 -3
  220. package/dist/components/radio/Radio.svelte.d.ts.map +1 -1
  221. package/dist/components/radiogroup/RadioGroup.js +2 -2
  222. package/dist/components/radiogroup/RadioGroup.stories.d.ts +1 -0
  223. package/dist/components/radiogroup/RadioGroup.stories.d.ts.map +1 -1
  224. package/dist/components/radiogroup/RadioGroup.stories.js +1 -0
  225. package/dist/components/radiogroup/RadioGroup.svelte +2 -2
  226. package/dist/components/segmentedcontrol/SegmentedControl.js +2 -2
  227. package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts +1 -0
  228. package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts.map +1 -1
  229. package/dist/components/segmentedcontrol/SegmentedControl.stories.js +1 -0
  230. package/dist/components/select/Select.js +3 -3
  231. package/dist/components/select/Select.js.map +1 -1
  232. package/dist/components/select/Select.stories.d.ts +1 -0
  233. package/dist/components/select/Select.stories.d.ts.map +1 -1
  234. package/dist/components/select/Select.stories.js +1 -0
  235. package/dist/components/select/Select.svelte +7 -5
  236. package/dist/components/select/Select.svelte.d.ts.map +1 -1
  237. package/dist/components/starrating/README.md +22 -0
  238. package/dist/components/starrating/StarRating.js +4 -0
  239. package/dist/components/starrating/StarRating.js.map +1 -0
  240. package/dist/components/starrating/StarRating.spec.js +108 -0
  241. package/dist/components/starrating/StarRating.stories.d.ts +13 -0
  242. package/dist/components/starrating/StarRating.stories.d.ts.map +1 -0
  243. package/dist/components/starrating/StarRating.stories.js +82 -0
  244. package/dist/components/starrating/StarRating.svelte +227 -0
  245. package/dist/components/starrating/StarRating.svelte.d.ts +46 -0
  246. package/dist/components/starrating/StarRating.svelte.d.ts.map +1 -0
  247. package/dist/components/statusbadge/StatusBadge.js +2 -2
  248. package/dist/components/statusbadge/StatusBadge.js.map +1 -1
  249. package/dist/components/statusbadge/StatusBadge.stories.d.ts +1 -0
  250. package/dist/components/statusbadge/StatusBadge.stories.d.ts.map +1 -1
  251. package/dist/components/statusbadge/StatusBadge.stories.js +1 -0
  252. package/dist/components/statusbadge/StatusBadge.svelte +11 -11
  253. package/dist/components/statusdot/StatusDot.js +2 -2
  254. package/dist/components/statusdot/StatusDot.js.map +1 -1
  255. package/dist/components/statusdot/StatusDot.stories.d.ts +1 -0
  256. package/dist/components/statusdot/StatusDot.stories.d.ts.map +1 -1
  257. package/dist/components/statusdot/StatusDot.stories.js +1 -0
  258. package/dist/components/statusdot/StatusDot.svelte +7 -4
  259. package/dist/components/statusmessage/README.md +11 -0
  260. package/dist/components/statusmessage/StatusMessage.js +4 -0
  261. package/dist/components/statusmessage/StatusMessage.js.map +1 -0
  262. package/dist/components/statusmessage/StatusMessage.spec.js +47 -0
  263. package/dist/components/statusmessage/StatusMessage.stories.d.ts +12 -0
  264. package/dist/components/statusmessage/StatusMessage.stories.d.ts.map +1 -0
  265. package/dist/components/statusmessage/StatusMessage.stories.js +38 -0
  266. package/dist/components/statusmessage/StatusMessage.svelte +84 -0
  267. package/dist/components/statusmessage/StatusMessage.svelte.d.ts +17 -0
  268. package/dist/components/statusmessage/StatusMessage.svelte.d.ts.map +1 -0
  269. package/dist/components/statusnotification/StatusNotification.js +2 -2
  270. package/dist/components/statusnotification/StatusNotification.js.map +1 -1
  271. package/dist/components/statusnotification/StatusNotification.stories.d.ts +4 -0
  272. package/dist/components/statusnotification/StatusNotification.stories.d.ts.map +1 -1
  273. package/dist/components/statusnotification/StatusNotification.stories.js +4 -0
  274. package/dist/components/statusnotification/StatusNotification.svelte +14 -13
  275. package/dist/components/steppercompact/README.md +13 -0
  276. package/dist/components/steppercompact/StepperCompact.js +4 -0
  277. package/dist/components/steppercompact/StepperCompact.js.map +1 -0
  278. package/dist/components/steppercompact/StepperCompact.spec.js +119 -0
  279. package/dist/components/steppercompact/StepperCompact.stories.d.ts +7 -0
  280. package/dist/components/steppercompact/StepperCompact.stories.d.ts.map +1 -0
  281. package/dist/components/steppercompact/StepperCompact.stories.js +29 -0
  282. package/dist/components/steppercompact/StepperCompact.svelte +123 -0
  283. package/dist/components/steppercompact/StepperCompact.svelte.d.ts +25 -0
  284. package/dist/components/steppercompact/StepperCompact.svelte.d.ts.map +1 -0
  285. package/dist/components/tab/Tab.js +2 -2
  286. package/dist/components/tab/Tab.js.map +1 -1
  287. package/dist/components/tab/Tab.svelte +1 -2
  288. package/dist/components/tab/Tab.svelte.d.ts +0 -1
  289. package/dist/components/tab/Tab.svelte.d.ts.map +1 -1
  290. package/dist/components/tabs/Tabs.js +2 -2
  291. package/dist/components/tabs/Tabs.stories.d.ts +3 -0
  292. package/dist/components/tabs/Tabs.stories.d.ts.map +1 -1
  293. package/dist/components/tabs/Tabs.stories.js +3 -0
  294. package/dist/components/tabs/Tabs.svelte +1 -1
  295. package/dist/components/tag/README.md +30 -0
  296. package/dist/components/tag/Tag.js +4 -0
  297. package/dist/components/tag/Tag.js.map +1 -0
  298. package/dist/components/tag/Tag.stories.d.ts +13 -0
  299. package/dist/components/tag/Tag.stories.d.ts.map +1 -0
  300. package/dist/components/tag/Tag.stories.js +71 -0
  301. package/dist/components/{tags/TagRemovable.svelte → tag/Tag.svelte} +122 -26
  302. package/dist/components/tag/Tag.svelte.d.ts +65 -0
  303. package/dist/components/tag/Tag.svelte.d.ts.map +1 -0
  304. package/dist/components/textarea/Textarea.js +2 -2
  305. package/dist/components/textarea/Textarea.js.map +1 -1
  306. package/dist/components/textarea/Textarea.stories.d.ts +1 -0
  307. package/dist/components/textarea/Textarea.stories.d.ts.map +1 -1
  308. package/dist/components/textarea/Textarea.stories.js +1 -0
  309. package/dist/components/textarea/Textarea.svelte +7 -5
  310. package/dist/components/textarea/Textarea.svelte.d.ts.map +1 -1
  311. package/dist/components/textinput/Textinput.js +5 -5
  312. package/dist/components/textinput/Textinput.js.map +1 -1
  313. package/dist/components/textinput/Textinput.stories.d.ts +1 -0
  314. package/dist/components/textinput/Textinput.stories.d.ts.map +1 -1
  315. package/dist/components/textinput/Textinput.stories.js +1 -0
  316. package/dist/components/textinput/Textinput.svelte +8 -6
  317. package/dist/components/textinput/Textinput.svelte.d.ts.map +1 -1
  318. package/dist/components/toaster/Toaster.js +3 -3
  319. package/dist/components/toaster/Toaster.js.map +1 -1
  320. package/dist/components/toaster/Toaster.stories.d.ts +3 -0
  321. package/dist/components/toaster/Toaster.stories.d.ts.map +1 -1
  322. package/dist/components/toaster/Toaster.stories.js +3 -0
  323. package/dist/components/toaster/Toaster.svelte +13 -11
  324. package/dist/components/toaster/Toaster.svelte.d.ts.map +1 -1
  325. package/dist/components/toggle/Toggle.js +2 -2
  326. package/dist/components/toggle/Toggle.js.map +1 -1
  327. package/dist/components/toggle/Toggle.stories.d.ts +1 -0
  328. package/dist/components/toggle/Toggle.stories.d.ts.map +1 -1
  329. package/dist/components/toggle/Toggle.stories.js +1 -0
  330. package/dist/components/toggle/Toggle.svelte +20 -4
  331. package/dist/components/toggle/Toggle.svelte.d.ts.map +1 -1
  332. package/dist/components/togglegroup/ToggleGroup.js +2 -2
  333. package/dist/components/togglegroup/ToggleGroup.js.map +1 -1
  334. package/dist/components/togglegroup/ToggleGroup.stories.d.ts +1 -0
  335. package/dist/components/togglegroup/ToggleGroup.stories.d.ts.map +1 -1
  336. package/dist/components/togglegroup/ToggleGroup.stories.js +1 -0
  337. package/dist/components/togglegroup/ToggleGroup.svelte +2 -2
  338. package/dist/components/tooltip/Tooltip.js +3 -3
  339. package/dist/components/tooltip/Tooltip.js.map +1 -1
  340. package/dist/components/tooltip/Tooltip.stories.d.ts +1 -0
  341. package/dist/components/tooltip/Tooltip.stories.d.ts.map +1 -1
  342. package/dist/components/tooltip/Tooltip.stories.js +1 -0
  343. package/dist/components/tooltip/Tooltip.svelte +4 -3
  344. package/dist/custom-element-forward-events.js +1 -1
  345. package/dist/custom-element-forward-events.js.map +1 -1
  346. package/dist/custom-element.js +3 -3
  347. package/dist/custom-element.js.map +1 -1
  348. package/dist/documentation/Svelte/usingPresets.mdx +2 -3
  349. package/dist/documentation/WebComponents/usingPresets.mdx +2 -3
  350. package/dist/each.js +1 -1
  351. package/dist/each.js.map +1 -1
  352. package/dist/if.js +1 -1
  353. package/dist/if.js.map +1 -1
  354. package/dist/input.js +1 -1
  355. package/dist/input.js.map +1 -1
  356. package/dist/legacy.js +1 -1
  357. package/dist/main.d.ts +10 -6
  358. package/dist/main.d.ts.map +1 -1
  359. package/dist/main.js +10 -6
  360. package/dist/slot.js +1 -1
  361. package/dist/slot.js.map +1 -1
  362. package/dist/svelte-component.js +2 -0
  363. package/dist/svelte-component.js.map +1 -0
  364. package/dist/this.js +1 -1
  365. package/dist/this.js.map +1 -1
  366. package/package.json +16 -18
  367. package/dist/components/tags/README.md +0 -9
  368. package/dist/components/tags/Tag.js +0 -4
  369. package/dist/components/tags/Tag.js.map +0 -1
  370. package/dist/components/tags/Tag.svelte +0 -218
  371. package/dist/components/tags/Tag.svelte.d.ts +0 -9
  372. package/dist/components/tags/Tag.svelte.d.ts.map +0 -1
  373. package/dist/components/tags/TagContextualised.js +0 -4
  374. package/dist/components/tags/TagContextualised.js.map +0 -1
  375. package/dist/components/tags/TagContextualised.svelte +0 -235
  376. package/dist/components/tags/TagContextualised.svelte.d.ts +0 -11
  377. package/dist/components/tags/TagContextualised.svelte.d.ts.map +0 -1
  378. package/dist/components/tags/TagInteractive.js +0 -4
  379. package/dist/components/tags/TagInteractive.js.map +0 -1
  380. package/dist/components/tags/TagInteractive.svelte +0 -223
  381. package/dist/components/tags/TagInteractive.svelte.d.ts +0 -10
  382. package/dist/components/tags/TagInteractive.svelte.d.ts.map +0 -1
  383. package/dist/components/tags/TagRemovable.js +0 -4
  384. package/dist/components/tags/TagRemovable.js.map +0 -1
  385. package/dist/components/tags/TagRemovable.svelte.d.ts +0 -11
  386. package/dist/components/tags/TagRemovable.svelte.d.ts.map +0 -1
  387. package/dist/components/tags/TagSelectable.js +0 -4
  388. package/dist/components/tags/TagSelectable.js.map +0 -1
  389. package/dist/components/tags/TagSelectable.svelte +0 -243
  390. package/dist/components/tags/TagSelectable.svelte.d.ts +0 -13
  391. package/dist/components/tags/TagSelectable.svelte.d.ts.map +0 -1
  392. package/dist/components/tags/Tags.stories.d.ts +0 -5
  393. package/dist/components/tags/Tags.stories.d.ts.map +0 -1
  394. package/dist/components/tags/Tags.stories.js +0 -41
  395. package/dist/components/tags/TagsContextualised.stories.d.ts +0 -5
  396. package/dist/components/tags/TagsContextualised.stories.d.ts.map +0 -1
  397. package/dist/components/tags/TagsContextualised.stories.js +0 -57
  398. package/dist/components/tags/TagsInteractive.stories.d.ts +0 -5
  399. package/dist/components/tags/TagsInteractive.stories.d.ts.map +0 -1
  400. package/dist/components/tags/TagsInteractive.stories.js +0 -61
  401. package/dist/components/tags/TagsRemovable.stories.d.ts +0 -5
  402. package/dist/components/tags/TagsRemovable.stories.d.ts.map +0 -1
  403. package/dist/components/tags/TagsRemovable.stories.js +0 -60
  404. package/dist/components/tags/TagsSelectable.stories.d.ts +0 -5
  405. package/dist/components/tags/TagsSelectable.stories.d.ts.map +0 -1
  406. package/dist/components/tags/TagsSelectable.stories.js +0 -76
@@ -1,6 +1,6 @@
1
- import{n as k,o as Y,u as Z,q as V,v as $,c as oo,p as to,a as ro,b as a,w as j,l as eo,f as E,s as f,t as M,i as U,j as ao,k as n,x as S,m as v,d as s,r as l,e as no,g as co,h as so}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as lo}from"../../slot.js";import{c as uo,I as io,C as bo,W as vo,a as mo,b as go}from"../../Cross20.js";import{a as ho,s as q}from"../../attributes.js";import{b as fo}from"../../this.js";import"../../legacy.js";function A(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function B(e){k===null&&A(),Y&&k.l!==null?po(k).m.push(e):Z(()=>{const t=V(e);if(typeof t=="function")return t})}function ko(e){k===null&&A(),B(()=>()=>V(e))}function po(e){var t=e.l;return t.u??(t.u={a:[],b:[],m:[]})}var _o=E('<button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost svelte-h1mguv" type="button" aria-label="Close"><!></button>'),wo=E('<div class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m svelte-h1mguv"><div class="mc-linear-progressbar-buffer__indicator svelte-h1mguv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>'),xo=E('<section role="status" tabindex="-1"><span class="mc-toaster__icon svelte-h1mguv" aria-hidden="true"><!></span> <div class="mc-toaster__content svelte-h1mguv"><p class="mc-toaster__message svelte-h1mguv"> </p> <div class="mc-toaster__action svelte-h1mguv"><!></div></div> <!> <!></section>');const yo={hash:"svelte-h1mguv",code:`/**
1
+ import{o as p,q as Y,u as Z,v as q,w as $,c as oo,p as to,a as ro,b as a,x as j,k as eo,f as E,r as ao,s as h,t as M,h as D,i as no,j as n,y as S,n as v,d as s,e as l,g as co}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as so}from"../../slot.js";import{c as lo}from"../../svelte-component.js";import{a as uo,b as io,s as bo}from"../../attributes.js";import{b as vo}from"../../this.js";import{I as go,C as mo,W as fo,a as ho,b as po}from"../../Cross20.js";import"../../legacy.js";function V(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function A(e){p===null&&V(),Y&&p.l!==null?_o(p).m.push(e):Z(()=>{const t=q(e);if(typeof t=="function")return t})}function ko(e){p===null&&V(),A(()=>()=>q(e))}function _o(e){var t=e.l;return t.u??={a:[],b:[],m:[]}}var wo=E('<button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost svelte-h1mguv" type="button" aria-label="Close"><!></button>'),xo=E('<div class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m svelte-h1mguv"><div class="mc-linear-progressbar-buffer__indicator svelte-h1mguv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>'),yo=E('<section><span class="mc-toaster__icon svelte-h1mguv" aria-hidden="true"><!></span> <div class="mc-toaster__content svelte-h1mguv"><p class="mc-toaster__message svelte-h1mguv"> </p> <div class="mc-toaster__action svelte-h1mguv"><!></div></div> <!> <!></section>');const Co={hash:"svelte-h1mguv",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
- */.mc-button.svelte-h1mguv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-h1mguv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-h1mguv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-h1mguv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-h1mguv {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-h1mguv {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-h1mguv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-h1mguv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-h1mguv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-h1mguv {padding:0.25rem;}.mc-button--outlined.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-h1mguv {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-h1mguv {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-h1mguv {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-h1mguv {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-h1mguv {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-h1mguv {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-h1mguv {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-h1mguv {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-h1mguv {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-h1mguv {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-linear-progressbar-buffer.svelte-h1mguv {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-h1mguv {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-h1mguv {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-h1mguv {height:0.5rem;}.mc-toaster.svelte-h1mguv {border-radius:var(--radius-m, 0.5rem);background:var(--toaster-color-background-information, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translateX(25%);transition:visibility 0s linear 0.4s, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}.mc-toaster.is-open.svelte-h1mguv {opacity:1;visibility:visible;transform:translateX(0);}.mc-toaster__icon.svelte-h1mguv {width:2rem;height:2rem;margin:0.75rem;fill:var(--toaster-color-icon-information, #3facd7);}.mc-toaster__content.svelte-h1mguv {flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:0.75rem 1rem 0.75rem 0;}
3
+ */.mc-button.svelte-h1mguv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-h1mguv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-h1mguv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-h1mguv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-h1mguv {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-h1mguv {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-h1mguv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-h1mguv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-h1mguv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-h1mguv {padding:0.25rem;}.mc-button--outlined.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-h1mguv {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-h1mguv {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-h1mguv {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-h1mguv {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-h1mguv {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-h1mguv {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-h1mguv {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-h1mguv {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-h1mguv {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-h1mguv {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-linear-progressbar-buffer.svelte-h1mguv {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-h1mguv {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-h1mguv {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-h1mguv {height:0.5rem;}.mc-toaster.svelte-h1mguv {border-radius:var(--border-radius-m, 0.5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translateX(25%);transition:visibility 0s linear 0.4s, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}.mc-toaster.is-open.svelte-h1mguv {opacity:1;visibility:visible;transform:translateX(0);}.mc-toaster__icon.svelte-h1mguv {width:2rem;height:2rem;margin:0.75rem;fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster__content.svelte-h1mguv {flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:0.75rem 1rem 0.75rem 0;}
4
4
  @media (width >= 680px) {.mc-toaster__content.svelte-h1mguv {flex-direction:row;align-items:center;}
5
- }.mc-toaster__message.svelte-h1mguv {flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);}.mc-toaster--information.svelte-h1mguv {background:var(--toaster-color-background-information, #002a41);}.mc-toaster--information.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-information, #3facd7);}.mc-toaster--information.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);}.mc-toaster--success.svelte-h1mguv {background:var(--toaster-color-background-success, #023618);}.mc-toaster--success.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-success, #78be20);}.mc-toaster--success.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20);}.mc-toaster--warning.svelte-h1mguv {background:var(--toaster-color-background-warning, #360e00);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--error.svelte-h1mguv {background:var(--toaster-color-background-error, #2d0000);}.mc-toaster--error.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--error.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--bottom.svelte-h1mguv {top:inherit;bottom:1.5rem;right:1.5rem;}.mc-toaster--top-center.svelte-h1mguv {top:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster--bottom-center.svelte-h1mguv {top:inherit;bottom:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster__indicator.svelte-h1mguv {width:100%;margin:0.5rem;--progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff);}.mc-toaster__close.svelte-h1mguv {margin:0.25rem;}.mc-toaster__action.svelte-h1mguv:empty {display:none;}`};function Co(e,t){to(t,!0),ro(e,yo);let c=a(t,"open",7),p=a(t,"position",7,"top"),_=a(t,"description",7),m=a(t,"status",7,"info"),w=a(t,"closable",7,!0),g=a(t,"progress",7),b=a(t,"timeout",7),x=a(t,"onUpdateOpen",7),y;const F=[{status:"info",component:io},{status:"success",component:bo},{status:"warning",component:vo},{status:"error",component:mo}];function G(o){return F.find(r=>r.status===o)||F[0]}let H=j(eo(G(m()))),u=j(0),h=null,C=null;const z=()=>{var r;c(!1),(r=x())==null||r(c());const o=new CustomEvent("update:open",{detail:c(),bubbles:!0,composed:!0});y.dispatchEvent(o)};B(()=>{if(b())if(g()){const i=100/(b()/100);h=setInterval(()=>{S(u,v(u)+i),v(u)>=100&&(S(u,100),clearInterval(h),z())},100)}else C=setTimeout(()=>{z()},b())}),ko(()=>{h&&clearInterval(h),C&&clearTimeout(C)});var J={get open(){return c()},set open(o){c(o),n()},get position(){return p()},set position(o="top"){p(o),n()},get description(){return _()},set description(o){_(o),n()},get status(){return m()},set status(o="info"){m(o),n()},get closable(){return w()},set closable(o=!0){w(o),n()},get progress(){return g()},set progress(o){g(o),n()},get timeout(){return b()},set timeout(o){b(o),n()},get onUpdateOpen(){return x()},set onUpdateOpen(o){x(o),n()}},d=xo(),I=s(d),K=s(I);uo(K,()=>v(H).component,(o,r)=>{r(o,{})}),l(I);var D=f(I,2),O=s(D),L=s(O,!0);l(O);var X=f(O,2),N=s(X);lo(N,t,"action",{}),l(X),l(D);var T=f(D,2);{var P=o=>{var r=_o();r.__click=z;var i=s(r);go(i,{class:"mc-button__icon",slot:"icon","aria-hidden":"true"}),l(r),U(o,r)};W(T,o=>{w()&&o(P)})}var Q=f(T,2);{var R=o=>{var r=wo(),i=s(r);l(r),M(()=>{ho(i,`--progress-value: ${v(u)};`),q(i,"aria-valuenow",v(u))}),U(o,r)};W(Q,o=>{g()&&o(R)})}return l(d),fo(d,o=>y=o,()=>y),M(()=>{no(d,1,co(["mc-toaster",c()&&"is-open",`mc-toaster--${m()}`,`mc-toaster--${p()}`]),"svelte-h1mguv"),q(d,"aria-hidden",!c()),so(L,_())}),U(e,d),ao(J)}$(["click"]);customElements.define("m-toaster",oo(Co,{open:{},position:{},description:{},status:{},closable:{},progress:{},timeout:{},onUpdateOpen:{}},["action"],[],!0));
5
+ }.mc-toaster__message.svelte-h1mguv {flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);}.mc-toaster--information.svelte-h1mguv {background:var(--toaster-color-background-info, #002a41);}.mc-toaster--information.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster--information.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);}.mc-toaster--success.svelte-h1mguv {background:var(--toaster-color-background-success, #023618);}.mc-toaster--success.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-success, #78be20);}.mc-toaster--success.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20);}.mc-toaster--warning.svelte-h1mguv {background:var(--toaster-color-background-warning, #360e00);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--error.svelte-h1mguv {background:var(--toaster-color-background-error, #2d0000);}.mc-toaster--error.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--error.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--bottom.svelte-h1mguv {top:inherit;bottom:1.5rem;right:1.5rem;}.mc-toaster--top-center.svelte-h1mguv {top:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster--bottom-center.svelte-h1mguv {top:inherit;bottom:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster__indicator.svelte-h1mguv {width:100%;margin:0.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff);}.mc-toaster__close.svelte-h1mguv {margin:0.25rem;}.mc-toaster__action.svelte-h1mguv:empty {display:none;}`};function zo(e,t){to(t,!0),ro(e,Co);let c=a(t,"open",7),k=a(t,"position",7,"top"),_=a(t,"description",7),g=a(t,"status",7,"info"),w=a(t,"closable",7,!0),m=a(t,"progress",7),i=a(t,"timeout",7),x=a(t,"onUpdateOpen",7),B=ao(t,["$$slots","$$events","$$legacy","$$host","open","position","description","status","closable","progress","timeout","onUpdateOpen"]),y;const F=[{status:"info",component:go},{status:"success",component:mo},{status:"warning",component:fo},{status:"error",component:ho}];function G(o){return F.find(r=>r.status===o)||F[0]}let H=j(eo(G(g()))),u=j(0),f=null,C=null;const z=()=>{c(!1),x()?.(c());const o=new CustomEvent("update:open",{detail:c(),bubbles:!0,composed:!0});y.dispatchEvent(o)};A(()=>{if(i())if(m()){const d=100/(i()/100);f=setInterval(()=>{S(u,v(u)+d),v(u)>=100&&(S(u,100),clearInterval(f),z())},100)}else C=setTimeout(()=>{z()},i())}),ko(()=>{f&&clearInterval(f),C&&clearTimeout(C)});var J={get open(){return c()},set open(o){c(o),n()},get position(){return k()},set position(o="top"){k(o),n()},get description(){return _()},set description(o){_(o),n()},get status(){return g()},set status(o="info"){g(o),n()},get closable(){return w()},set closable(o=!0){w(o),n()},get progress(){return m()},set progress(o){m(o),n()},get timeout(){return i()},set timeout(o){i(o),n()},get onUpdateOpen(){return x()},set onUpdateOpen(o){x(o),n()}},b=yo();uo(b,()=>({class:["mc-toaster",c()&&"is-open",`mc-toaster--${g()}`,`mc-toaster--${k()}`],role:"status",tabindex:"-1","aria-hidden":!c(),...B}),void 0,void 0,void 0,"svelte-h1mguv");var I=s(b),K=s(I);lo(K,()=>v(H).component,(o,r)=>{r(o,{})}),l(I);var O=h(I,2),U=s(O),L=s(U,!0);l(U);var X=h(U,2),N=s(X);so(N,t,"action",{}),l(X),l(O);var T=h(O,2);{var P=o=>{var r=wo();r.__click=z;var d=s(r);po(d,{class:"mc-button__icon",slot:"icon","aria-hidden":"true"}),l(r),D(o,r)};W(T,o=>{w()&&o(P)})}var Q=h(T,2);{var R=o=>{var r=xo(),d=s(r);l(r),M(()=>{io(d,`--progress-value: ${v(u)};`),bo(d,"aria-valuenow",v(u))}),D(o,r)};W(Q,o=>{m()&&o(R)})}return l(b),vo(b,o=>y=o,()=>y),M(()=>co(L,_())),D(e,b),no(J)}$(["click"]);customElements.define("m-toaster",oo(zo,{open:{},position:{},description:{},status:{},closable:{},progress:{},timeout:{},onUpdateOpen:{}},["action"],[],!0));
6
6
  //# sourceMappingURL=Toaster.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.js","sources":["../../../node_modules/svelte/src/internal/shared/errors.js","../../../node_modules/svelte/src/index-client.js","../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\nimport { DEV } from 'esm-env';\n\n/**\n * Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n * @returns {never}\n */\nexport function invalid_default_snippet() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_default_snippet\\nCannot use \\`{@render children(...)}\\` if the parent component uses \\`let:\\` directives. Consider using a named snippet instead\\nhttps://svelte.dev/e/invalid_default_snippet`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_default_snippet`);\n\t}\n}\n\n/**\n * A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n * @returns {never}\n */\nexport function invalid_snippet_arguments() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_snippet_arguments\\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \\`{@render ...}\\`\\nhttps://svelte.dev/e/invalid_snippet_arguments`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_snippet_arguments`);\n\t}\n}\n\n/**\n * `%name%(...)` can only be used during component initialisation\n * @param {string} name\n * @returns {never}\n */\nexport function lifecycle_outside_component(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`lifecycle_outside_component\\n\\`${name}(...)\\` can only be used during component initialisation\\nhttps://svelte.dev/e/lifecycle_outside_component`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/lifecycle_outside_component`);\n\t}\n}\n\n/**\n * Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n * @returns {never}\n */\nexport function snippet_without_render_tag() {\n\tif (DEV) {\n\t\tconst error = new Error(`snippet_without_render_tag\\nAttempted to render a snippet without a \\`{@render}\\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \\`{snippet}\\` to \\`{@render snippet()}\\`.\\nhttps://svelte.dev/e/snippet_without_render_tag`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/snippet_without_render_tag`);\n\t}\n}\n\n/**\n * `%name%` is not a store with a `subscribe` method\n * @param {string} name\n * @returns {never}\n */\nexport function store_invalid_shape(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`store_invalid_shape\\n\\`${name}\\` is not a store with a \\`subscribe\\` method\\nhttps://svelte.dev/e/store_invalid_shape`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/store_invalid_shape`);\n\t}\n}\n\n/**\n * The `this` prop on `<svelte:element>` must be a string, if defined\n * @returns {never}\n */\nexport function svelte_element_invalid_this_value() {\n\tif (DEV) {\n\t\tconst error = new Error(`svelte_element_invalid_this_value\\nThe \\`this\\` prop on \\`<svelte:element>\\` must be a string, if defined\\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);\n\t}\n}","/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n *\n * Must be called while a derived or effect is running.\n *\n * ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n *\n * \tlet { id } = $props();\n *\n * \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n *\n * \t\treturn await response.json();\n * \t}\n *\n * \tconst data = $derived(await getData(id));\n * </script>\n * ```\n */\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n * loaded: null; // does not take a detail argument\n * change: string; // takes a detail argument of type string, which is required\n * optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\t/**\n\t * @param [detail]\n\t * @param [options]\n\t */\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {string} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/reactivity/batch.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement={{ tag: 'm-toaster' }} />\n\n<script lang=\"ts\">\n import { onMount, onDestroy } from 'svelte';\n import InfoCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n import WarningCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n import CrossCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n import CheckCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n /**\n * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.\n *\n * @slot action - Use this slot to insert a button or a link in the toaster\n * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n */\n interface Props {\n /**\n * If `true`, display the Toaster.\n */\n open?: boolean;\n /**\n * Position of the toaster.\n */\n position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';\n /**\n * Description of the toaster.\n */\n description: string;\n /**\n * Allows to define the toaster style.\n */\n status?: 'info' | 'success' | 'warning' | 'error';\n /**\n * If `true`, display the close button.\n */\n closable?: boolean;\n /**\n * If `true`, display the progress bar of the duration.\n */\n progress?: boolean;\n /**\n * Duration of the toaster\n */\n timeout?: number;\n /**\n * Callback fired when the toaster open state changes.\n */\n onUpdateOpen?: (open: boolean) => void;\n }\n\n let {\n open,\n position = 'top',\n description,\n status = 'info',\n closable = true,\n progress,\n timeout,\n onUpdateOpen,\n }: Props = $props();\n let element: HTMLElement;\n\n const iconMap = [\n { status: 'info', component: InfoCircleFilled32 },\n { status: 'success', component: CheckCircleFilled32 },\n { status: 'warning', component: WarningCircleFilled32 },\n { status: 'error', component: CrossCircleFilled32 },\n ];\n\n function getSelected(status: string) {\n return iconMap.find((icon) => icon.status === status) || iconMap[0];\n }\n\n let selected = $state(getSelected(status));\n\n let progressValue = $state(0);\n let intervalId: ReturnType<typeof setInterval> | null = null;\n let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n const onClose = () => {\n open = false;\n\n onUpdateOpen?.(open);\n\n const event = new CustomEvent('update:open', {\n detail: open,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n\n onMount(() => {\n if (timeout) {\n if (progress) {\n const intervalDuration = 100;\n const steps = timeout / intervalDuration;\n const increment = 100 / steps;\n\n intervalId = setInterval(() => {\n progressValue += increment;\n if (progressValue >= 100) {\n progressValue = 100;\n clearInterval(intervalId!);\n onClose();\n }\n }, intervalDuration);\n } else {\n timeoutId = setTimeout(() => {\n onClose();\n }, timeout);\n }\n }\n });\n\n onDestroy(() => {\n if (intervalId) clearInterval(intervalId);\n if (timeoutId) clearTimeout(timeoutId);\n });\n</script>\n\n<section\n class={['mc-toaster', open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]}\n role=\"status\"\n tabindex=\"-1\"\n aria-hidden={!open}\n bind:this={element}\n>\n <span class=\"mc-toaster__icon\" aria-hidden=\"true\">\n <selected.component />\n </span>\n\n <div class=\"mc-toaster__content\">\n <p class=\"mc-toaster__message\">{description}</p>\n\n <div class=\"mc-toaster__action\">\n <slot name=\"action\" />\n </div>\n </div>\n\n {#if closable}\n <button\n class=\"mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross20 class=\"mc-button__icon\" slot=\"icon\" aria-hidden=\"true\" />\n </button>\n {/if}\n\n {#if progress}\n <div class=\"mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m\">\n <div\n class=\"mc-linear-progressbar-buffer__indicator\"\n role=\"progressbar\"\n style={`--progress-value: ${progressValue};`}\n aria-valuenow={progressValue}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n ></div>\n </div>\n {/if}\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/button';\n @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n @use '@mozaic-ds/styles/components/toaster';\n\n .mc-toaster__action:empty {\n display: none;\n }\n</style>\n"],"names":["lifecycle_outside_component","name","onMount","fn","component_context","e.lifecycle_outside_component","legacy_mode_flag","init_update_callbacks","user_effect","cleanup","untrack","onDestroy","context","l","open","$.prop","$$props","position","description","status","closable","progress","timeout","onUpdateOpen","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.state","$.proxy","progressValue","intervalId","timeoutId","onClose","_a","event","increment","$.get","$.set","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":"idAyCO,SAASA,EAA4BC,EAAM,CAQhD,MAAM,IAAI,MAAM,kDAAkD,CAEpE,CCuCO,SAASC,EAAQC,EAAI,CACvBC,IAAsB,MACzBC,EAAuC,EAGpCC,GAAoBF,EAAkB,IAAM,KAC/CG,GAAsBH,CAAiB,EAAE,EAAE,KAAKD,CAAE,EAElDK,EAAY,IAAM,CACjB,MAAMC,EAAUC,EAAQP,CAAE,EAC1B,GAAI,OAAOM,GAAY,WAAY,OAAkCA,CACtE,CAAC,CAEH,CAWO,SAASE,GAAUR,EAAI,CACzBC,IAAsB,MACzBC,EAAyC,EAG1CH,EAAQ,IAAM,IAAMQ,EAAQP,CAAE,CAAC,CAChC,CAsHA,SAASI,GAAsBK,EAAS,CACvC,IAAIC,EAA2CD,EAAS,EACxD,OAAQC,EAAE,IAAFA,EAAE,EAAM,CAAE,EAAG,CAAA,EAAI,EAAG,CAAA,EAAI,EAAG,EAAE,EACtC;;;;6uECjPA,uBAmDIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,mBAAW,KAAK,EAChBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,iBAAS,MAAM,EACfC,mBAAW,EAAI,EACfC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAAYR,EAAAC,EAAA,eAAA,CAAA,EAEVQ,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,EAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,EAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,EAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,EAAmB,YAG1CC,EAAYX,EAAgB,CAC5B,OAAAM,EAAQ,KAAMM,GAASA,EAAK,SAAWZ,CAAM,GAAKM,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,GAAUJ,EAAYX,EAAM,CAAA,CAAA,CAAA,EAEpCgB,IAAuB,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAO,IAAS,OACpBxB,EAAO,EAAK,GAEZyB,EAAAhB,EAAY,IAAZ,MAAAgB,EAAezB,KAET,MAAA0B,EAAK,IAAO,YAAY,eAC5B,OAAQ1B,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBU,EAAQ,cAAcgB,CAAK,CAC7B,EAEAtC,EAAO,IAAO,CACR,GAAAoB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNoB,EAAY,KADJnB,EAAO,EAAG,KAGxBc,EAAa,YAAkB,IAAA,GAC7BD,EAAaO,EAAbP,CAAa,EAAIM,CAAS,IACtBN,CAAa,GAAI,MACnBQ,EAAAR,EAAgB,GAAG,EACnB,cAAcC,CAAU,EACxBE,EAAO,EAEX,EAAG,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACT,EAAGhB,EAAO,EAGhB,CAAC,EAEDX,GAAS,IAAO,CACVyB,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,CACvC,CAAC,gGAlEY,MAAK,4GAEP,OAAM,qDACJ,GAAI,uXA0FJC,mGALRlB,EAAQ,GAAAwB,EAAAC,CAAA,sFAgBqBV,CAAa,CAAA,GAAA,wBAC1BA,CAAa,CAAA,oBAN7Bd,EAAQ,GAAAuB,EAAAE,CAAA,gBAzBFC,GAAAC,EAAAC,GAAAzB,QAAAA,CAAO,oBAJV,aAAcV,EAAI,GAAI,yBAA0BK,EAAM,CAAA,kBAAmBF,GAAQ,yCAG3EH,EAAI,CAAA,OAQgBI,GAAW,gBAd/C","x_google_ignoreList":[0,1]}
1
+ {"version":3,"file":"Toaster.js","sources":["../../../node_modules/svelte/src/internal/shared/errors.js","../../../node_modules/svelte/src/index-client.js","../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\nimport { DEV } from 'esm-env';\n\n/**\n * Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n * @returns {never}\n */\nexport function invalid_default_snippet() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_default_snippet\\nCannot use \\`{@render children(...)}\\` if the parent component uses \\`let:\\` directives. Consider using a named snippet instead\\nhttps://svelte.dev/e/invalid_default_snippet`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_default_snippet`);\n\t}\n}\n\n/**\n * A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n * @returns {never}\n */\nexport function invalid_snippet_arguments() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_snippet_arguments\\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \\`{@render ...}\\`\\nhttps://svelte.dev/e/invalid_snippet_arguments`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_snippet_arguments`);\n\t}\n}\n\n/**\n * `%name%(...)` can only be used during component initialisation\n * @param {string} name\n * @returns {never}\n */\nexport function lifecycle_outside_component(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`lifecycle_outside_component\\n\\`${name}(...)\\` can only be used during component initialisation\\nhttps://svelte.dev/e/lifecycle_outside_component`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/lifecycle_outside_component`);\n\t}\n}\n\n/**\n * Context was not set in a parent component\n * @returns {never}\n */\nexport function missing_context() {\n\tif (DEV) {\n\t\tconst error = new Error(`missing_context\\nContext was not set in a parent component\\nhttps://svelte.dev/e/missing_context`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/missing_context`);\n\t}\n}\n\n/**\n * Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n * @returns {never}\n */\nexport function snippet_without_render_tag() {\n\tif (DEV) {\n\t\tconst error = new Error(`snippet_without_render_tag\\nAttempted to render a snippet without a \\`{@render}\\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \\`{snippet}\\` to \\`{@render snippet()}\\`.\\nhttps://svelte.dev/e/snippet_without_render_tag`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/snippet_without_render_tag`);\n\t}\n}\n\n/**\n * `%name%` is not a store with a `subscribe` method\n * @param {string} name\n * @returns {never}\n */\nexport function store_invalid_shape(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`store_invalid_shape\\n\\`${name}\\` is not a store with a \\`subscribe\\` method\\nhttps://svelte.dev/e/store_invalid_shape`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/store_invalid_shape`);\n\t}\n}\n\n/**\n * The `this` prop on `<svelte:element>` must be a string, if defined\n * @returns {never}\n */\nexport function svelte_element_invalid_this_value() {\n\tif (DEV) {\n\t\tconst error = new Error(`svelte_element_invalid_this_value\\nThe \\`this\\` prop on \\`<svelte:element>\\` must be a string, if defined\\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);\n\t}\n}","/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n *\n * Must be called while a derived or effect is running.\n *\n * ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n *\n * \tlet { id } = $props();\n *\n * \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n *\n * \t\treturn await response.json();\n * \t}\n *\n * \tconst data = $derived(await getData(id));\n * </script>\n * ```\n */\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n * loaded: null; // does not take a detail argument\n * change: string; // takes a detail argument of type string, which is required\n * optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\t/**\n\t * @param [detail]\n\t * @param [options]\n\t */\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {string} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync, fork } from './internal/client/reactivity/batch.js';\nexport {\n\tcreateContext,\n\tgetContext,\n\tgetAllContexts,\n\thasContext,\n\tsetContext\n} from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement={{ tag: 'm-toaster' }} />\n\n<script lang=\"ts\">\n import { onMount, onDestroy } from 'svelte';\n import InfoCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n import WarningCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n import CrossCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n import CheckCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n /**\n * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.\n *\n * @slot action - Use this slot to insert a button or a link in the toaster\n * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n */\n interface Props {\n /**\n * If `true`, display the Toaster.\n */\n open?: boolean;\n /**\n * Position of the toaster.\n */\n position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';\n /**\n * Description of the toaster.\n */\n description: string;\n /**\n * Allows to define the toaster style.\n */\n status?: 'info' | 'success' | 'warning' | 'error';\n /**\n * If `true`, display the close button.\n */\n closable?: boolean;\n /**\n * If `true`, display the progress bar of the duration.\n */\n progress?: boolean;\n /**\n * Duration of the toaster\n */\n timeout?: number;\n /**\n * Callback fired when the toaster open state changes.\n */\n onUpdateOpen?: (open: boolean) => void;\n }\n\n let {\n open,\n position = 'top',\n description,\n status = 'info',\n closable = true,\n progress,\n timeout,\n onUpdateOpen,\n ...attrs\n }: Props = $props();\n let element: HTMLElement;\n\n const iconMap = [\n { status: 'info', component: InfoCircleFilled32 },\n { status: 'success', component: CheckCircleFilled32 },\n { status: 'warning', component: WarningCircleFilled32 },\n { status: 'error', component: CrossCircleFilled32 },\n ];\n\n function getSelected(status: string) {\n return iconMap.find((icon) => icon.status === status) || iconMap[0];\n }\n\n let selected = $state(getSelected(status));\n\n let progressValue = $state(0);\n let intervalId: ReturnType<typeof setInterval> | null = null;\n let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n const onClose = () => {\n open = false;\n\n onUpdateOpen?.(open);\n\n const event = new CustomEvent('update:open', {\n detail: open,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n\n onMount(() => {\n if (timeout) {\n if (progress) {\n const intervalDuration = 100;\n const steps = timeout / intervalDuration;\n const increment = 100 / steps;\n\n intervalId = setInterval(() => {\n progressValue += increment;\n if (progressValue >= 100) {\n progressValue = 100;\n clearInterval(intervalId!);\n onClose();\n }\n }, intervalDuration);\n } else {\n timeoutId = setTimeout(() => {\n onClose();\n }, timeout);\n }\n }\n });\n\n onDestroy(() => {\n if (intervalId) clearInterval(intervalId);\n if (timeoutId) clearTimeout(timeoutId);\n });\n</script>\n\n<section\n class={['mc-toaster', open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]}\n role=\"status\"\n tabindex=\"-1\"\n aria-hidden={!open}\n bind:this={element}\n {...attrs}\n>\n <span class=\"mc-toaster__icon\" aria-hidden=\"true\">\n <selected.component />\n </span>\n\n <div class=\"mc-toaster__content\">\n <p class=\"mc-toaster__message\">{description}</p>\n\n <div class=\"mc-toaster__action\">\n <slot name=\"action\" />\n </div>\n </div>\n\n {#if closable}\n <button\n class=\"mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross20 class=\"mc-button__icon\" slot=\"icon\" aria-hidden=\"true\" />\n </button>\n {/if}\n\n {#if progress}\n <div class=\"mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m\">\n <div\n class=\"mc-linear-progressbar-buffer__indicator\"\n role=\"progressbar\"\n style={`--progress-value: ${progressValue};`}\n aria-valuenow={progressValue}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n ></div>\n </div>\n {/if}\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/button';\n @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n @use '@mozaic-ds/styles/components/toaster';\n\n .mc-toaster__action:empty {\n display: none;\n }\n</style>\n"],"names":["lifecycle_outside_component","name","onMount","fn","component_context","e.lifecycle_outside_component","legacy_mode_flag","init_update_callbacks","user_effect","cleanup","untrack","onDestroy","context","l","open","$.prop","$$props","position","description","status","closable","progress","timeout","onUpdateOpen","attrs","$.rest_props","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.state","$.proxy","progressValue","intervalId","timeoutId","onClose","event","increment","$.get","$.set","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":"yfAyCO,SAASA,EAA4BC,EAAM,CAQhD,MAAM,IAAI,MAAM,kDAAkD,CAEpE,CCuCO,SAASC,EAAQC,EAAI,CACvBC,IAAsB,MACzBC,EAAuC,EAGpCC,GAAoBF,EAAkB,IAAM,KAC/CG,GAAsBH,CAAiB,EAAE,EAAE,KAAKD,CAAE,EAElDK,EAAY,IAAM,CACjB,MAAMC,EAAUC,EAAQP,CAAE,EAC1B,GAAI,OAAOM,GAAY,WAAY,OAAkCA,CACtE,CAAC,CAEH,CAWO,SAASE,GAAUR,EAAI,CACzBC,IAAsB,MACzBC,EAAyC,EAG1CH,EAAQ,IAAM,IAAMQ,EAAQP,CAAE,CAAC,CAChC,CAsHA,SAASI,GAAsBK,EAAS,CACvC,IAAIC,EAA2CD,EAAS,EACxD,OAAQC,EAAE,IAAM,CAAE,EAAG,CAAA,EAAI,EAAG,CAAA,EAAI,EAAG,EAAE,CACtC;;;;itECjPA,uBAmDIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,mBAAW,KAAK,EAChBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,iBAAS,MAAM,EACfC,mBAAW,EAAI,EACfC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAAYR,EAAAC,EAAA,eAAA,CAAA,EACTQ,EAAAC,GAAAT,EAAA,oIAEDU,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,EAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,EAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,EAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,EAAmB,YAG1CC,EAAYb,EAAgB,CAC5B,OAAAQ,EAAQ,KAAMM,GAASA,EAAK,SAAWd,CAAM,GAAKQ,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,GAAUJ,EAAYb,EAAM,CAAA,CAAA,CAAA,EAEpCkB,IAAuB,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAO,IAAS,CACpB1B,EAAO,EAAK,EAEZS,EAAY,IAAGT,GAAI,EAEb,MAAA2B,EAAK,IAAO,YAAY,eAC5B,OAAQ3B,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAce,CAAK,CAC7B,EAEAvC,EAAO,IAAO,CACR,GAAAoB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNqB,EAAY,KADJpB,EAAO,EAAG,KAGxBgB,EAAa,YAAkB,IAAA,GAC7BD,EAAaM,EAAbN,CAAa,EAAIK,CAAS,IACtBL,CAAa,GAAI,MACnBO,EAAAP,EAAgB,GAAG,EACnB,cAAcC,CAAU,EACxBE,EAAO,EAEX,EAAG,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACT,EAAGlB,EAAO,EAGhB,CAAC,EAEDX,GAAS,IAAO,CACV2B,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,CACvC,CAAC,gGAnEY,MAAK,4GAEP,OAAM,qDACJ,GAAI,0MAoET,aAAczB,EAAI,GAAI,yBAA0BK,EAAM,CAAA,kBAAmBF,GAAQ,+CAG3EH,EAAI,KAEdU,6OAmBSgB,mGALRpB,EAAQ,GAAAyB,EAAAC,CAAA,sFAgBqBT,CAAa,CAAA,GAAA,yBAC1BA,CAAa,CAAA,oBAN7BhB,EAAQ,GAAAwB,EAAAE,CAAA,gBA1BFC,GAAAC,EAAAC,GAAAxB,QAAAA,CAAO,aAQgBR,EAAW,CAAA,CAAA,cAf/C","x_google_ignoreList":[0,1]}
@@ -1,4 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/web-components-vite';
2
+ import './Toaster.svelte';
3
+ import '../button/Button.svelte';
4
+ import '../link/Link.svelte';
2
5
  declare const meta: Meta;
3
6
  export default meta;
4
7
  type Story = StoryObj;
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IAsDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAQpB,CAAC"}
1
+ {"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAsDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAQpB,CAAC"}
@@ -2,6 +2,9 @@ import { html } from 'lit';
2
2
  import { ifDefined } from 'lit-html/directives/if-defined.js';
3
3
  import { unsafeHTML } from 'lit/directives/unsafe-html.js';
4
4
  import { action } from 'storybook/actions';
5
+ import './Toaster.svelte';
6
+ import '../button/Button.svelte';
7
+ import '../link/Link.svelte';
5
8
  const meta = {
6
9
  title: 'Overlay/Toaster',
7
10
  component: 'm-toaster',
@@ -57,6 +57,7 @@
57
57
  progress,
58
58
  timeout,
59
59
  onUpdateOpen,
60
+ ...attrs
60
61
  }: Props = $props();
61
62
  let element: HTMLElement;
62
63
 
@@ -125,6 +126,7 @@
125
126
  tabindex="-1"
126
127
  aria-hidden={!open}
127
128
  bind:this={element}
129
+ {...attrs}
128
130
  >
129
131
  <span class="mc-toaster__icon" aria-hidden="true">
130
132
  <selected.component />
@@ -197,7 +199,7 @@
197
199
  vertical-align: middle;
198
200
  text-align: center;
199
201
  border: 2px solid transparent;
200
- border-radius: var(--button-radius, 0.25rem);
202
+ border-radius: var(--button-border-radius-s, 0.25rem);
201
203
  transition: all ease 200ms;
202
204
  transition: box-shadow 200ms ease;
203
205
  align-items: center;
@@ -361,7 +363,7 @@
361
363
  cursor: not-allowed;
362
364
  }
363
365
  .mc-button--icon-button {
364
- border-radius: var(--radius-full, 100%);
366
+ border-radius: var(--border-radius-full, 100%);
365
367
  padding: 0;
366
368
  }
367
369
  .mc-button--loading .mc-button__loader {
@@ -511,14 +513,14 @@
511
513
  height: 0.25rem;
512
514
  position: relative;
513
515
  min-width: 6rem;
514
- border-radius: var(--radius-l, 1rem);
516
+ border-radius: var(--border-radius-l, 1rem);
515
517
  }
516
518
  .mc-linear-progressbar-buffer__indicator {
517
519
  background-color: var(--progressbar-color-indicator, #464e63);
518
520
  height: 100%;
519
521
  transition: width 0.4s ease;
520
522
  overflow: hidden;
521
- border-radius: var(--radius-l, 1rem);
523
+ border-radius: var(--border-radius-l, 1rem);
522
524
  box-sizing: border-box;
523
525
  width: calc(var(--progress-value) * 1%);
524
526
  }
@@ -530,8 +532,8 @@
530
532
  }
531
533
 
532
534
  .mc-toaster {
533
- border-radius: var(--radius-m, 0.5rem);
534
- background: var(--toaster-color-background-information, #002a41);
535
+ border-radius: var(--border-radius-m, 0.5rem);
536
+ background: var(--toaster-color-background-info, #002a41);
535
537
  display: flex;
536
538
  flex-flow: row wrap;
537
539
  align-items: flex-start;
@@ -558,7 +560,7 @@
558
560
  width: 2rem;
559
561
  height: 2rem;
560
562
  margin: 0.75rem;
561
- fill: var(--toaster-color-icon-information, #3facd7);
563
+ fill: var(--toaster-color-icon-info, #3facd7);
562
564
  }
563
565
  .mc-toaster__content {
564
566
  flex: 1 1 0;
@@ -582,13 +584,13 @@
582
584
  line-height: var(--line-height-s, 1.3);
583
585
  }
584
586
  .mc-toaster--information {
585
- background: var(--toaster-color-background-information, #002a41);
587
+ background: var(--toaster-color-background-info, #002a41);
586
588
  }
587
589
  .mc-toaster--information .mc-toaster__icon {
588
- fill: var(--toaster-color-icon-information, #3facd7);
590
+ fill: var(--toaster-color-icon-info, #3facd7);
589
591
  }
590
592
  .mc-toaster--information .mc-toaster__indicator {
591
- --progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);
593
+ --progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);
592
594
  }
593
595
  .mc-toaster--success {
594
596
  background: var(--toaster-color-background-success, #023618);
@@ -636,7 +638,7 @@
636
638
  .mc-toaster__indicator {
637
639
  width: 100%;
638
640
  margin: 0.5rem;
639
- --progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);
641
+ --progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);
640
642
  --progressbar-color-background: var(--color-background-primary, #ffffff);
641
643
  }
642
644
  .mc-toaster__close {
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAUE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAiHH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAUE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAkHH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
@@ -1,4 +1,4 @@
1
- import{c as z,p as L,a as M,b as l,f as C,t as p,i as E,j as P,d as f,k as r,s as B,r as v,e as H,g as y,h as j}from"../../custom-element.js";import{i as D}from"../../if.js";import{r as F,s as w}from"../../attributes.js";import{a as S}from"../../input.js";import{c as T}from"../../custom-element-forward-events.js";var Y=C('<span class="mc-toggle__label svelte-26wadt"> </span>'),q=C('<div><label class="mc-toggle__container svelte-26wadt"><input type="checkbox" class="mc-toggle__input svelte-26wadt"/> <!></label></div>');const A={hash:"svelte-26wadt",code:`/**
1
+ import{c as z,p as L,a as M,b as a,f as b,t as u,h as p,i as P,d as v,j as l,r as B,s as H,e as f,l as y,m as j,g as D}from"../../custom-element.js";import{i as F}from"../../if.js";import{a as S,s as T}from"../../attributes.js";import{a as Y}from"../../input.js";import{c as q}from"../../custom-element-forward-events.js";var A=b('<span class="mc-toggle__label svelte-26wadt"> </span>'),G=b('<div><label class="mc-toggle__container svelte-26wadt"><input/> <!></label></div>');const I={hash:"svelte-26wadt",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
- */.mc-toggle.svelte-26wadt {width:fit-content;}.mc-toggle__container.svelte-26wadt {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-26wadt::before, .mc-toggle__container.svelte-26wadt::after {content:"";}.mc-toggle__container.svelte-26wadt::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-26wadt::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-26wadt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-26wadt {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt) {cursor:not-allowed;}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__label:where(.svelte-26wadt) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):focus-visible) .mc-toggle__container:where(.svelte-26wadt)::before {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-26wadt .mc-toggle__label:where(.svelte-26wadt) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function G(u,t){L(t,!0),M(u,A);let d=l(t,"id",7),i=l(t,"name",7),o=l(t,"label",7),g=l(t,"checked",15,!1),c=l(t,"disabled",7),h=l(t,"size",7,"s");var b={get id(){return d()},set id(e){d(e),r()},get name(){return i()},set name(e){i(e),r()},get label(){return o()},set label(e){o(e),r()},get checked(){return g()},set checked(e=!1){g(e),r()},get disabled(){return c()},set disabled(e){c(e),r()},get size(){return h()},set size(e="s"){h(e),r()}},s=q(),n=f(s),a=f(n);F(a);var _=B(a,2);{var k=e=>{var m=Y(),x=f(m,!0);v(m),p(()=>j(x,o())),E(e,m)};D(_,e=>{o()&&e(k)})}return v(n),v(s),p(()=>{H(s,1,y(["mc-toggle",`mc-toggle--${h()}`]),"svelte-26wadt"),w(n,"for",d()),w(a,"id",d()),w(a,"name",i()),a.disabled=c()}),S(a,g),E(u,s),P(b)}customElements.define("m-toggle",z(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},size:{}},[],[],!0,T));
3
+ */.mc-toggle.svelte-26wadt {width:fit-content;}.mc-toggle__container.svelte-26wadt {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-26wadt::before, .mc-toggle__container.svelte-26wadt::after {content:"";}.mc-toggle__container.svelte-26wadt::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-26wadt::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--border-radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-26wadt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-26wadt {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt) {cursor:not-allowed;}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__label:where(.svelte-26wadt) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):focus-visible) .mc-toggle__container:where(.svelte-26wadt)::before {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-26wadt .mc-toggle__label:where(.svelte-26wadt) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function J(w,t){L(t,!0),M(w,I);let r=a(t,"id",7),s=a(t,"name",7),d=a(t,"label",7),i=a(t,"checked",15,!1),c=a(t,"disabled",7),g=a(t,"size",7,"s"),E=B(t,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","size"]);var C={get id(){return r()},set id(e){r(e),l()},get name(){return s()},set name(e){s(e),l()},get label(){return d()},set label(e){d(e),l()},get checked(){return i()},set checked(e=!1){i(e),l()},get disabled(){return c()},set disabled(e){c(e),l()},get size(){return g()},set size(e="s"){g(e),l()}},o=G(),h=v(o),n=v(h);S(n,()=>({id:r(),type:"checkbox",class:"mc-toggle__input",name:s(),disabled:c(),...E}),void 0,void 0,void 0,"svelte-26wadt",!0);var _=H(n,2);{var k=e=>{var m=A(),x=v(m,!0);f(m),u(()=>D(x,d())),p(e,m)};F(_,e=>{d()&&e(k)})}return f(h),f(o),u(()=>{y(o,1,j(["mc-toggle",`mc-toggle--${g()}`]),"svelte-26wadt"),T(h,"for",r())}),Y(n,i),p(w,o),P(C)}customElements.define("m-toggle",z(J,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},size:{}},[],[],!0,q));
4
4
  //# sourceMappingURL=Toggle.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle',\n props: {\n checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /**\n * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.\n */\n interface Props {\n /**\n * A unique identifier for the toggle, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the toggle element, typically used for form submission.\n */\n name?: string;\n /**\n * The text label displayed next to the toggle.\n */\n label?: string;\n /**\n * The toggle's checked state.\n */\n checked?: boolean;\n /**\n * Determines the size of the toggle.\n */\n size?: 's' | 'm';\n /**\n * If `true`, disables the toggle, making it non-interactive.\n */\n disabled?: boolean;\n }\n\n let { id, name, label, checked = $bindable(false), disabled, size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-toggle', `mc-toggle--${size}`]}>\n <label class=\"mc-toggle__container\" for={id}>\n <input {id} type=\"checkbox\" class=\"mc-toggle__input\" {name} {disabled} bind:checked />\n {#if label}\n <span class=\"mc-toggle__label\">{label}</span>\n {/if}\n </label>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","size","$$render","consequent","$.set_class","div","$.clsx","customElementForwardEvents"],"mappings":";;srPAAA,oBA0CQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,mBAAoB,EAAK,EAAGC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EAAEK,eAAO,GAAG,sLAA5B,GAAK,kGAAoB,IAAG,gGAOnCH,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAI,EAAAC,CAAA,4BAHDC,EAAAC,EAAA,EAAAC,EAAA,CAAA,0BAA2BL,EAAI,CAAA,EAAA,CAAA,EAAA,eAAA,YACDP,GAAE,mEAH7C,oJArCYa"}
1
+ {"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle',\n props: {\n checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /**\n * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.\n */\n interface Props {\n /**\n * A unique identifier for the toggle, used to associate the label with the form element.\n */\n id: string;\n /**\n * The name attribute for the toggle element, typically used for form submission.\n */\n name?: string;\n /**\n * The text label displayed next to the toggle.\n */\n label?: string;\n /**\n * The toggle's checked state.\n */\n checked?: boolean;\n /**\n * Determines the size of the toggle.\n */\n size?: 's' | 'm';\n /**\n * If `true`, disables the toggle, making it non-interactive.\n */\n disabled?: boolean;\n }\n\n let {\n id,\n name,\n label,\n checked = $bindable(false),\n disabled,\n size = 's',\n ...attrs\n }: Props = $props();\n</script>\n\n<div class={['mc-toggle', `mc-toggle--${size}`]}>\n <label class=\"mc-toggle__container\" for={id}>\n <input\n {id}\n type=\"checkbox\"\n class=\"mc-toggle__input\"\n {name}\n {disabled}\n bind:checked\n {...attrs}\n />\n {#if label}\n <span class=\"mc-toggle__label\">{label}</span>\n {/if}\n </label>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","size","attrs","$.rest_props","$$render","consequent","$.set_class","div","$.clsx","customElementForwardEvents"],"mappings":";;osPAAA,oBA2CIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,eAAO,GAAG,EACPC,EAAAC,EAAAP,EAAA,gRAHiB,GAAK,kGAElB,IAAG,mHAcJM,wGAG4BJ,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAM,EAAAC,CAAA,4BAXDC,EAAAC,EAAA,EAAAC,EAAA,CAAA,0BAA2BP,EAAI,CAAA,EAAA,CAAA,EAAA,eAAA,YACDP,GAAE,sBAH7C,oJA7CYe"}
@@ -1,4 +1,5 @@
1
1
  import type { Meta, StoryObj } from '@storybook/web-components-vite';
2
+ import './Toggle.svelte';
2
3
  declare const meta: Meta;
3
4
  export default meta;
4
5
  type Story = StoryObj;
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAsCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}
1
+ {"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAsCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}
@@ -1,6 +1,7 @@
1
1
  import { html } from 'lit';
2
2
  import { ifDefined } from 'lit-html/directives/if-defined.js';
3
3
  import { action } from 'storybook/actions';
4
+ import './Toggle.svelte';
4
5
  const meta = {
5
6
  title: 'Form Elements/Toggle',
6
7
  component: 'm-toggle',
@@ -40,12 +40,28 @@
40
40
  disabled?: boolean;
41
41
  }
42
42
 
43
- let { id, name, label, checked = $bindable(false), disabled, size = 's' }: Props = $props();
43
+ let {
44
+ id,
45
+ name,
46
+ label,
47
+ checked = $bindable(false),
48
+ disabled,
49
+ size = 's',
50
+ ...attrs
51
+ }: Props = $props();
44
52
  </script>
45
53
 
46
54
  <div class={['mc-toggle', `mc-toggle--${size}`]}>
47
55
  <label class="mc-toggle__container" for={id}>
48
- <input {id} type="checkbox" class="mc-toggle__input" {name} {disabled} bind:checked />
56
+ <input
57
+ {id}
58
+ type="checkbox"
59
+ class="mc-toggle__input"
60
+ {name}
61
+ {disabled}
62
+ bind:checked
63
+ {...attrs}
64
+ />
49
65
  {#if label}
50
66
  <span class="mc-toggle__label">{label}</span>
51
67
  {/if}
@@ -74,7 +90,7 @@
74
90
  height: 1.5rem;
75
91
  width: 2.5rem;
76
92
  background-color: var(--forms-color-background-unchecked, #666666);
77
- border-radius: var(--radius-l, 1rem);
93
+ border-radius: var(--border-radius-l, 1rem);
78
94
  flex-shrink: 0;
79
95
  }
80
96
  .mc-toggle__container::after {
@@ -82,7 +98,7 @@
82
98
  width: 1.25rem;
83
99
  background-color: var(--forms-color-icon-inverse, #ffffff);
84
100
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
85
- border-radius: var(--radius-full, 100%);
101
+ border-radius: var(--border-radius-full, 100%);
86
102
  background-position: center;
87
103
  left: 0.375rem;
88
104
  position: absolute;
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqCH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
@@ -1,7 +1,7 @@
1
- import{c as B,a as H,b as h,f as E,t as v,i as u,j,p as A,l as D,r as d,e as z,g as F,k as g,d as w,s as G,m as t,h as S}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as Y}from"../../each.js";import{r as q,s as x}from"../../attributes.js";import{b as I}from"../../input.js";import{c as J}from"../../custom-element-forward-events.js";var K=E('<span class="mc-toggle__label svelte-1p7hz9f"> </span>'),N=E('<div><label class="mc-toggle__container svelte-1p7hz9f"><input class="mc-toggle__input svelte-1p7hz9f" type="checkbox"/> <!></label></div>'),O=E("<div></div>");const Q={hash:"svelte-1p7hz9f",code:`/**
1
+ import{c as B,a as H,b as h,f as E,t as v,h as u,i as j,p as A,k as D,e as d,l as z,m as F,j as g,d as w,s as G,n as t,g as S}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as Y}from"../../each.js";import{r as q,s as x}from"../../attributes.js";import{b as I}from"../../input.js";import{c as J}from"../../custom-element-forward-events.js";var K=E('<span class="mc-toggle__label svelte-1p7hz9f"> </span>'),N=E('<div><label class="mc-toggle__container svelte-1p7hz9f"><input class="mc-toggle__input svelte-1p7hz9f" type="checkbox"/> <!></label></div>'),O=E("<div></div>");const Q={hash:"svelte-1p7hz9f",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
  /* stylelint-disable string-no-newline */.mc-field__content.svelte-1p7hz9f {margin-top:0.5rem;}
5
5
 
6
- /* stylelint-enable string-no-newline */.mc-toggle.svelte-1p7hz9f {width:fit-content;}.mc-toggle__container.svelte-1p7hz9f {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-1p7hz9f::before, .mc-toggle__container.svelte-1p7hz9f::after {content:"";}.mc-toggle__container.svelte-1p7hz9f::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-1p7hz9f::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-1p7hz9f {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-1p7hz9f {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f) {cursor:not-allowed;}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__label:where(.svelte-1p7hz9f) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):focus-visible) .mc-toggle__container:where(.svelte-1p7hz9f)::before {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-1p7hz9f .mc-toggle__label:where(.svelte-1p7hz9f) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-field__content.svelte-1p7hz9f:where(.mc-field__content--inline:where(.svelte-1p7hz9f)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function R(C,r){A(r,!0),H(C,Q);const k=[];let f=h(r,"name",7),i=h(r,"value",31,()=>D([])),c=h(r,"options",7),n=h(r,"inline",7);var L={get name(){return f()},set name(e){f(e),g()},get value(){return i()},set value(e=[]){i(e),g()},get options(){return c()},set options(e){c(e),g()},get inline(){return n()},set inline(e){n(e),g()}},o=O();return Y(o,21,c,e=>e.id,(e,l)=>{var s=N(),_=w(s),a=w(_);q(a);var b,M=G(a,2);{var P=m=>{var p=K(),y=w(p,!0);d(p),v(()=>S(y,t(l).label)),u(m,p)};T(M,m=>{t(l).label&&m(P)})}d(_),d(s),v(()=>{z(s,1,`mc-toggle mc-field__item ${t(l).label?"":" mc-toggle--hide-label"} ${t(l).size==="m"?" mc-toggle--m":""}`,"svelte-1p7hz9f"),x(a,"id",t(l).id),x(a,"name",f()),a.disabled=t(l).disabled,b!==(b=t(l).value)&&(a.value=(a.__value=t(l).value)??"")}),I(k,[],a,()=>(t(l).value,i()),i),u(e,s)}),d(o),v(()=>z(o,1,F(["mc-field__content",n()&&"mc-field__content--inline"]),"svelte-1p7hz9f")),u(C,o),j(L)}customElements.define("m-toggle-group",B(R,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{}},[],[],!0,J));
6
+ /* stylelint-enable string-no-newline */.mc-toggle.svelte-1p7hz9f {width:fit-content;}.mc-toggle__container.svelte-1p7hz9f {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-1p7hz9f::before, .mc-toggle__container.svelte-1p7hz9f::after {content:"";}.mc-toggle__container.svelte-1p7hz9f::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-1p7hz9f::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--border-radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-1p7hz9f {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-1p7hz9f {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f) {cursor:not-allowed;}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__label:where(.svelte-1p7hz9f) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):focus-visible) .mc-toggle__container:where(.svelte-1p7hz9f)::before {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-1p7hz9f .mc-toggle__label:where(.svelte-1p7hz9f) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-field__content.svelte-1p7hz9f:where(.mc-field__content--inline:where(.svelte-1p7hz9f)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function R(b,r){A(r,!0),H(b,Q);const k=[];let f=h(r,"name",7),i=h(r,"value",31,()=>D([])),n=h(r,"options",7),c=h(r,"inline",7);var L={get name(){return f()},set name(e){f(e),g()},get value(){return i()},set value(e=[]){i(e),g()},get options(){return n()},set options(e){n(e),g()},get inline(){return c()},set inline(e){c(e),g()}},o=O();return Y(o,21,n,e=>e.id,(e,l)=>{var s=N(),C=w(s),a=w(C);q(a);var _,M=G(a,2);{var P=m=>{var p=K(),y=w(p,!0);d(p),v(()=>S(y,t(l).label)),u(m,p)};T(M,m=>{t(l).label&&m(P)})}d(C),d(s),v(()=>{z(s,1,`mc-toggle mc-field__item ${t(l).label?"":" mc-toggle--hide-label"} ${t(l).size==="m"?" mc-toggle--m":""}`,"svelte-1p7hz9f"),x(a,"id",t(l).id),x(a,"name",f()),a.disabled=t(l).disabled,_!==(_=t(l).value)&&(a.value=(a.__value=t(l).value)??"")}),I(k,[],a,()=>(t(l).value,i()),i),u(e,s)}),d(o),v(()=>z(o,1,F(["mc-field__content",c()&&"mc-field__content--inline"]),"svelte-1p7hz9f")),u(b,o),j(L)}customElements.define("m-toggle-group",B(R,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{}},[],[],!0,J));
7
7
  //# sourceMappingURL=ToggleGroup.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle-group',\n props: {\n options: { reflect: true, type: 'Array', attribute: 'options' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /**\n * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.\n */\n interface Props {\n /**\n * The name attribute for the toggle element, typically used for form submission.\n */\n name: string;\n /**\n * The current value of the toggle group.\n */\n value?: Array<string>;\n /**\n * List of properties of each toggle of the toggle group.\n */\n options: Array<{\n id: string;\n label: string;\n value: string;\n disabled?: boolean;\n size?: 's' | 'm';\n }>;\n /**\n * If `true`, make the form element of the group inline.\n */\n inline?: boolean;\n }\n\n let { name, value = $bindable([]), options, inline }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n {#each options as option (option.id)}\n <div\n class=\"mc-toggle mc-field__item {!option.label\n ? ' mc-toggle--hide-label'\n : ''} {option.size === 'm' ? ' mc-toggle--m' : ''}\"\n >\n <label class=\"mc-toggle__container\">\n <input\n class=\"mc-toggle__input\"\n id={option.id}\n {name}\n type=\"checkbox\"\n bind:group={value}\n value={option.value}\n disabled={option.disabled}\n />\n {#if option.label}\n <span class=\"mc-toggle__label\">{option.label}</span>\n {/if}\n </label>\n </div>\n {/each}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/field';\n @use '@mozaic-ds/styles/components/toggle';\n\n .mc-field__content:where(.mc-field__content--inline) {\n display: flex;\n flex-flow: row wrap;\n gap: 0.25rem 1rem;\n }\n</style>\n"],"names":["name","$.prop","$$props","value","$.proxy","options","inline","$.each","div","option","$.template_effect","$.set_text","text","$.get","$$render","consequent","$.set_class","div_1","$.set_attribute","input","input_value","customElementForwardEvents"],"mappings":";;;;;w5PAAA,+BAwCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,GAAA,IAAAE,EAAA,CAAA,CAAA,CAAA,EAAkBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAAEI,EAAML,EAAAC,EAAA,SAAA,CAAA,mNAI3CK,OAAAA,EAAAC,EAAA,GAAAH,EAAWI,GAAQA,EAAO,MAAfA,IAAM,iFAiBgBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAM,EAAC,KAAK,CAAA,kBADzCI,EAAAJ,CAAM,EAAC,OAAKK,EAAAC,CAAA,qBAdeC,EAAAC,EAAA,EAAA,4BAAAJ,EAAAJ,CAAM,EAAC,MAErC,GADA,wBACE,IAAAI,EAAGJ,CAAM,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,gBAAA,EAK3CS,EAAAC,EAAA,KAAAN,EAAAJ,CAAM,EAAC,EAAE,kBAKHU,EAAA,SAAAN,EAAAJ,CAAM,EAAC,SADVW,KAAAA,EAAAP,EAAAJ,CAAM,EAAC,SAAPU,EAAA,OAAAA,EAAA,QAAAN,EAAAJ,CAAM,EAAC,QAAK,oBAAZI,EAAAJ,CAAM,EAAC,MADFN,EAAK,GAALA,gCAbT,oBAAqBG,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,wIAnCYe"}
1
+ {"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle-group',\n props: {\n options: { reflect: true, type: 'Array', attribute: 'options' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /**\n * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.\n */\n interface Props {\n /**\n * The name attribute for the toggle element, typically used for form submission.\n */\n name: string;\n /**\n * The current value of the toggle group.\n */\n value?: Array<string>;\n /**\n * List of properties of each toggle of the toggle group.\n */\n options: Array<{\n id: string;\n label: string;\n value: string;\n disabled?: boolean;\n size?: 's' | 'm';\n }>;\n /**\n * If `true`, make the form element of the group inline.\n */\n inline?: boolean;\n }\n\n let { name, value = $bindable([]), options, inline }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n {#each options as option (option.id)}\n <div\n class=\"mc-toggle mc-field__item {!option.label\n ? ' mc-toggle--hide-label'\n : ''} {option.size === 'm' ? ' mc-toggle--m' : ''}\"\n >\n <label class=\"mc-toggle__container\">\n <input\n class=\"mc-toggle__input\"\n id={option.id}\n {name}\n type=\"checkbox\"\n bind:group={value}\n value={option.value}\n disabled={option.disabled}\n />\n {#if option.label}\n <span class=\"mc-toggle__label\">{option.label}</span>\n {/if}\n </label>\n </div>\n {/each}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/field';\n @use '@mozaic-ds/styles/components/toggle';\n\n .mc-field__content:where(.mc-field__content--inline) {\n display: flex;\n flex-flow: row wrap;\n gap: 0.25rem 1rem;\n }\n</style>\n"],"names":["name","$.prop","$$props","value","$.proxy","options","inline","$.each","div","option","$.template_effect","$.set_text","text","$.get","$$render","consequent","$.set_class","div_1","$.set_attribute","input","input_value","customElementForwardEvents"],"mappings":";;;;;s6PAAA,+BAwCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,GAAA,IAAAE,EAAA,CAAA,CAAA,CAAA,EAAkBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAAEI,EAAML,EAAAC,EAAA,SAAA,CAAA,mNAI3CK,OAAAA,EAAAC,EAAA,GAAAH,EAAWI,GAAQA,EAAO,MAAfA,IAAM,iFAiBgBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAM,EAAC,KAAK,CAAA,kBADzCI,EAAAJ,CAAM,EAAC,OAAKK,EAAAC,CAAA,qBAdeC,EAAAC,EAAA,EAAA,4BAAAJ,EAAAJ,CAAM,EAAC,MAErC,GADA,wBACE,IAAAI,EAAGJ,CAAM,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,gBAAA,EAK3CS,EAAAC,EAAA,KAAAN,EAAAJ,CAAM,EAAC,EAAE,kBAKHU,EAAA,SAAAN,EAAAJ,CAAM,EAAC,SADVW,KAAAA,EAAAP,EAAAJ,CAAM,EAAC,SAAPU,EAAA,OAAAA,EAAA,QAAAN,EAAAJ,CAAM,EAAC,QAAK,oBAAZI,EAAAJ,CAAM,EAAC,MADFN,EAAK,GAALA,gCAbT,oBAAqBG,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,wIAnCYe"}
@@ -1,4 +1,5 @@
1
1
  import type { Meta, StoryObj } from '@storybook/web-components-vite';
2
+ import './ToggleGroup.svelte';
2
3
  declare const meta: Meta;
3
4
  export default meta;
4
5
  type Story = StoryObj;