@mozaic-ds/web-components 1.0.0-beta.7 → 1.0.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 (467) hide show
  1. package/README.md +36 -68
  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/attributes.js +1 -1
  7. package/dist/attributes.js.map +1 -1
  8. package/dist/bundle.d.ts +24 -23
  9. package/dist/bundle.d.ts.map +1 -1
  10. package/dist/bundle.js +24 -23
  11. package/dist/components/avatar/Avatar.js +2 -2
  12. package/dist/components/avatar/Avatar.js.map +1 -1
  13. package/dist/components/avatar/Avatar.spec.js +17 -0
  14. package/dist/components/avatar/Avatar.stories.d.ts.map +1 -1
  15. package/dist/components/avatar/Avatar.stories.js +3 -29
  16. package/dist/components/avatar/Avatar.svelte +2 -0
  17. package/dist/components/avatar/Avatar.svelte.d.ts +2 -0
  18. package/dist/components/avatar/Avatar.svelte.d.ts.map +1 -1
  19. package/dist/components/avatar/README.md +16 -0
  20. package/dist/components/breadcrumb/Breadcrumb.js +2 -2
  21. package/dist/components/breadcrumb/Breadcrumb.js.map +1 -1
  22. package/dist/components/breadcrumb/Breadcrumb.spec.js +42 -0
  23. package/dist/components/breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
  24. package/dist/components/breadcrumb/Breadcrumb.stories.js +6 -35
  25. package/dist/components/breadcrumb/Breadcrumb.svelte +11 -16
  26. package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
  27. package/dist/components/breadcrumb/README.md +11 -0
  28. package/dist/components/button/Button.js +2 -2
  29. package/dist/components/button/Button.js.map +1 -1
  30. package/dist/components/button/Button.spec.js +74 -0
  31. package/dist/components/button/Button.stories.d.ts +9 -13
  32. package/dist/components/button/Button.stories.d.ts.map +1 -1
  33. package/dist/components/button/Button.stories.js +46 -146
  34. package/dist/components/button/Button.svelte +70 -53
  35. package/dist/components/button/Button.svelte.d.ts +36 -8
  36. package/dist/components/button/Button.svelte.d.ts.map +1 -1
  37. package/dist/components/button/README.md +26 -0
  38. package/dist/components/callout/Callout.js +1 -1
  39. package/dist/components/callout/Callout.js.map +1 -1
  40. package/dist/components/callout/Callout.spec.js +33 -0
  41. package/dist/components/callout/Callout.stories.d.ts.map +1 -1
  42. package/dist/components/callout/Callout.stories.js +2 -55
  43. package/dist/components/callout/Callout.svelte +4 -0
  44. package/dist/components/callout/Callout.svelte.d.ts +4 -0
  45. package/dist/components/callout/Callout.svelte.d.ts.map +1 -1
  46. package/dist/components/callout/README.md +20 -0
  47. package/dist/components/checkbox/Checkbox.js +3 -3
  48. package/dist/components/checkbox/Checkbox.js.map +1 -1
  49. package/dist/components/checkbox/Checkbox.spec.js +70 -0
  50. package/dist/components/checkbox/Checkbox.stories.d.ts +11 -16
  51. package/dist/components/checkbox/Checkbox.stories.d.ts.map +1 -1
  52. package/dist/components/checkbox/Checkbox.stories.js +67 -124
  53. package/dist/components/checkbox/Checkbox.svelte +42 -22
  54. package/dist/components/checkbox/Checkbox.svelte.d.ts +31 -6
  55. package/dist/components/checkbox/Checkbox.svelte.d.ts.map +1 -1
  56. package/dist/components/checkbox/README.md +17 -0
  57. package/dist/components/checkboxgroup/CheckboxGroup.js +3 -3
  58. package/dist/components/checkboxgroup/CheckboxGroup.js.map +1 -1
  59. package/dist/components/checkboxgroup/CheckboxGroup.spec.js +113 -0
  60. package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts +5 -13
  61. package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts.map +1 -1
  62. package/dist/components/checkboxgroup/CheckboxGroup.stories.js +56 -140
  63. package/dist/components/checkboxgroup/CheckboxGroup.svelte +56 -45
  64. package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts +30 -6
  65. package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts.map +1 -1
  66. package/dist/components/checkboxgroup/README.md +14 -0
  67. package/dist/components/circularprogressbar/CircularProgressbar.js +2 -2
  68. package/dist/components/circularprogressbar/CircularProgressbar.js.map +1 -1
  69. package/dist/components/circularprogressbar/CircularProgressbar.spec.js +74 -0
  70. package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts +6 -6
  71. package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts.map +1 -1
  72. package/dist/components/circularprogressbar/CircularProgressbar.stories.js +29 -68
  73. package/dist/components/circularprogressbar/CircularProgressbar.svelte +25 -6
  74. package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts +18 -0
  75. package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts.map +1 -1
  76. package/dist/components/circularprogressbar/README.md +14 -0
  77. package/dist/components/datepicker/Datepicker.js +3 -3
  78. package/dist/components/datepicker/Datepicker.js.map +1 -1
  79. package/dist/components/datepicker/Datepicker.spec.js +95 -0
  80. package/dist/components/datepicker/Datepicker.stories.d.ts +7 -6
  81. package/dist/components/datepicker/Datepicker.stories.d.ts.map +1 -1
  82. package/dist/components/datepicker/Datepicker.stories.js +58 -75
  83. package/dist/components/datepicker/Datepicker.svelte +48 -25
  84. package/dist/components/datepicker/Datepicker.svelte.d.ts +30 -1
  85. package/dist/components/datepicker/Datepicker.svelte.d.ts.map +1 -1
  86. package/dist/components/datepicker/README.md +18 -0
  87. package/dist/components/drawer/Drawer.js +2 -2
  88. package/dist/components/drawer/Drawer.js.map +1 -1
  89. package/dist/components/drawer/Drawer.spec.js +101 -0
  90. package/dist/components/drawer/Drawer.stories.d.ts +29 -8
  91. package/dist/components/drawer/Drawer.stories.d.ts.map +1 -1
  92. package/dist/components/drawer/Drawer.stories.js +86 -87
  93. package/dist/components/drawer/Drawer.svelte +61 -38
  94. package/dist/components/drawer/Drawer.svelte.d.ts +26 -3
  95. package/dist/components/drawer/Drawer.svelte.d.ts.map +1 -1
  96. package/dist/components/drawer/README.md +29 -0
  97. package/dist/components/field/Field.js +2 -2
  98. package/dist/components/field/Field.js.map +1 -1
  99. package/dist/components/field/Field.spec.js +51 -0
  100. package/dist/components/field/Field.stories.d.ts +9 -15
  101. package/dist/components/field/Field.stories.d.ts.map +1 -1
  102. package/dist/components/field/Field.stories.js +86 -142
  103. package/dist/components/field/Field.svelte +48 -12
  104. package/dist/components/field/Field.svelte.d.ts +38 -7
  105. package/dist/components/field/Field.svelte.d.ts.map +1 -1
  106. package/dist/components/field/README.md +24 -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.spec.js +30 -0
  110. package/dist/components/flag/Flag.stories.d.ts +8 -18
  111. package/dist/components/flag/Flag.stories.d.ts.map +1 -1
  112. package/dist/components/flag/Flag.stories.js +28 -106
  113. package/dist/components/flag/Flag.svelte +11 -9
  114. package/dist/components/flag/Flag.svelte.d.ts +10 -28
  115. package/dist/components/flag/Flag.svelte.d.ts.map +1 -1
  116. package/dist/components/flag/README.md +11 -0
  117. package/dist/components/iconbutton/IconButton.js +2 -2
  118. package/dist/components/iconbutton/IconButton.js.map +1 -1
  119. package/dist/components/iconbutton/IconButton.stories.d.ts +11 -11
  120. package/dist/components/iconbutton/IconButton.stories.d.ts.map +1 -1
  121. package/dist/components/iconbutton/IconButton.stories.js +51 -67
  122. package/dist/components/iconbutton/IconButton.svelte +41 -37
  123. package/dist/components/iconbutton/IconButton.svelte.d.ts +28 -7
  124. package/dist/components/iconbutton/IconButton.svelte.d.ts.map +1 -1
  125. package/dist/components/iconbutton/README.md +21 -0
  126. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js +2 -2
  127. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js.map +1 -1
  128. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.spec.js +28 -0
  129. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts +5 -7
  130. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts.map +1 -1
  131. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.js +18 -49
  132. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte +15 -5
  133. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts +10 -1
  134. package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts.map +1 -1
  135. package/dist/components/linearprogressbarbuffer/README.md +11 -0
  136. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js +2 -2
  137. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map +1 -1
  138. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.spec.js +26 -0
  139. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts +4 -5
  140. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts.map +1 -1
  141. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.js +15 -33
  142. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte +6 -0
  143. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts +6 -0
  144. package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts.map +1 -1
  145. package/dist/components/linearprogressbarpercentage/README.md +10 -0
  146. package/dist/components/link/Link.js +2 -2
  147. package/dist/components/link/Link.js.map +1 -1
  148. package/dist/components/link/Link.spec.js +51 -0
  149. package/dist/components/link/Link.stories.d.ts +12 -12
  150. package/dist/components/link/Link.stories.d.ts.map +1 -1
  151. package/dist/components/link/Link.stories.js +61 -74
  152. package/dist/components/link/Link.svelte +45 -40
  153. package/dist/components/link/Link.svelte.d.ts +29 -8
  154. package/dist/components/link/Link.svelte.d.ts.map +1 -1
  155. package/dist/components/link/README.md +23 -0
  156. package/dist/components/loader/Loader.js +2 -2
  157. package/dist/components/loader/Loader.js.map +1 -1
  158. package/dist/components/loader/Loader.spec.js +54 -0
  159. package/dist/components/loader/Loader.stories.d.ts +8 -10
  160. package/dist/components/loader/Loader.stories.d.ts.map +1 -1
  161. package/dist/components/loader/Loader.stories.js +27 -43
  162. package/dist/components/loader/Loader.svelte +31 -31
  163. package/dist/components/loader/Loader.svelte.d.ts +14 -3
  164. package/dist/components/loader/Loader.svelte.d.ts.map +1 -1
  165. package/dist/components/loader/README.md +12 -0
  166. package/dist/components/loadingoverlay/LoadingOverlay.js +4 -0
  167. package/dist/components/loadingoverlay/LoadingOverlay.js.map +1 -0
  168. package/dist/components/loadingoverlay/LoadingOverlay.spec.js +38 -0
  169. package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts +7 -0
  170. package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts.map +1 -0
  171. package/dist/components/loadingoverlay/LoadingOverlay.stories.js +39 -0
  172. package/dist/components/loadingoverlay/LoadingOverlay.svelte +50 -0
  173. package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts +17 -0
  174. package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts.map +1 -0
  175. package/dist/components/loadingoverlay/README.md +11 -0
  176. package/dist/components/modal/Modal.js +2 -2
  177. package/dist/components/modal/Modal.js.map +1 -1
  178. package/dist/components/modal/Modal.spec.js +50 -0
  179. package/dist/components/modal/Modal.stories.d.ts +36 -9
  180. package/dist/components/modal/Modal.stories.d.ts.map +1 -1
  181. package/dist/components/modal/Modal.stories.js +54 -83
  182. package/dist/components/modal/Modal.svelte +42 -41
  183. package/dist/components/modal/Modal.svelte.d.ts +22 -5
  184. package/dist/components/modal/Modal.svelte.d.ts.map +1 -1
  185. package/dist/components/modal/README.md +28 -0
  186. package/dist/components/numberbadge/NumberBadge.js +2 -2
  187. package/dist/components/numberbadge/NumberBadge.js.map +1 -1
  188. package/dist/components/numberbadge/NumberBadge.spec.js +28 -0
  189. package/dist/components/numberbadge/NumberBadge.stories.d.ts +9 -13
  190. package/dist/components/numberbadge/NumberBadge.stories.d.ts.map +1 -1
  191. package/dist/components/numberbadge/NumberBadge.stories.js +28 -56
  192. package/dist/components/numberbadge/NumberBadge.svelte +24 -20
  193. package/dist/components/numberbadge/NumberBadge.svelte.d.ts +15 -4
  194. package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map +1 -1
  195. package/dist/components/numberbadge/README.md +12 -0
  196. package/dist/components/overlay/Overlay.js +2 -2
  197. package/dist/components/overlay/Overlay.js.map +1 -1
  198. package/dist/components/overlay/Overlay.spec.js +29 -0
  199. package/dist/components/overlay/Overlay.stories.d.ts +5 -7
  200. package/dist/components/overlay/Overlay.stories.d.ts.map +1 -1
  201. package/dist/components/overlay/Overlay.stories.js +32 -40
  202. package/dist/components/overlay/Overlay.svelte +14 -4
  203. package/dist/components/overlay/Overlay.svelte.d.ts +11 -0
  204. package/dist/components/overlay/Overlay.svelte.d.ts.map +1 -1
  205. package/dist/components/overlay/README.md +17 -0
  206. package/dist/components/pagination/Pagination.js +6 -6
  207. package/dist/components/pagination/Pagination.js.map +1 -1
  208. package/dist/components/pagination/Pagination.spec.js +65 -0
  209. package/dist/components/pagination/Pagination.stories.d.ts +8 -11
  210. package/dist/components/pagination/Pagination.stories.d.ts.map +1 -1
  211. package/dist/components/pagination/Pagination.stories.js +37 -91
  212. package/dist/components/pagination/Pagination.svelte +33 -12
  213. package/dist/components/pagination/Pagination.svelte.d.ts +27 -4
  214. package/dist/components/pagination/Pagination.svelte.d.ts.map +1 -1
  215. package/dist/components/pagination/README.md +16 -0
  216. package/dist/components/passwordinput/PasswordInput.js +3 -4
  217. package/dist/components/passwordinput/PasswordInput.js.map +1 -1
  218. package/dist/components/passwordinput/PasswordInput.spec.js +84 -0
  219. package/dist/components/passwordinput/PasswordInput.stories.d.ts +10 -13
  220. package/dist/components/passwordinput/PasswordInput.stories.d.ts.map +1 -1
  221. package/dist/components/passwordinput/PasswordInput.stories.js +67 -124
  222. package/dist/components/passwordinput/PasswordInput.svelte +387 -24
  223. package/dist/components/passwordinput/PasswordInput.svelte.d.ts +34 -2
  224. package/dist/components/passwordinput/PasswordInput.svelte.d.ts.map +1 -1
  225. package/dist/components/passwordinput/README.md +19 -0
  226. package/dist/components/pincode/Pincode.js +2 -2
  227. package/dist/components/pincode/Pincode.js.map +1 -1
  228. package/dist/components/pincode/Pincode.spec.js +99 -0
  229. package/dist/components/pincode/Pincode.stories.d.ts +9 -13
  230. package/dist/components/pincode/Pincode.stories.d.ts.map +1 -1
  231. package/dist/components/pincode/Pincode.stories.js +62 -127
  232. package/dist/components/pincode/Pincode.svelte +56 -41
  233. package/dist/components/pincode/Pincode.svelte.d.ts +30 -24
  234. package/dist/components/pincode/Pincode.svelte.d.ts.map +1 -1
  235. package/dist/components/pincode/README.md +22 -0
  236. package/dist/components/quantityselector/QuantitySelector.js +2 -2
  237. package/dist/components/quantityselector/QuantitySelector.js.map +1 -1
  238. package/dist/components/quantityselector/QuantitySelector.spec.js +104 -0
  239. package/dist/components/quantityselector/QuantitySelector.stories.d.ts +11 -15
  240. package/dist/components/quantityselector/QuantitySelector.stories.d.ts.map +1 -1
  241. package/dist/components/quantityselector/QuantitySelector.stories.js +77 -145
  242. package/dist/components/quantityselector/QuantitySelector.svelte +100 -77
  243. package/dist/components/quantityselector/QuantitySelector.svelte.d.ts +49 -17
  244. package/dist/components/quantityselector/QuantitySelector.svelte.d.ts.map +1 -1
  245. package/dist/components/quantityselector/README.md +21 -0
  246. package/dist/components/radio/README.md +15 -0
  247. package/dist/components/radio/Radio.js +2 -2
  248. package/dist/components/radio/Radio.js.map +1 -1
  249. package/dist/components/radio/Radio.spec.js +60 -0
  250. package/dist/components/radio/Radio.stories.d.ts +9 -13
  251. package/dist/components/radio/Radio.stories.d.ts.map +1 -1
  252. package/dist/components/radio/Radio.stories.js +54 -70
  253. package/dist/components/radio/Radio.svelte +42 -20
  254. package/dist/components/radio/Radio.svelte.d.ts +27 -5
  255. package/dist/components/radio/Radio.svelte.d.ts.map +1 -1
  256. package/dist/components/radiogroup/README.md +14 -0
  257. package/dist/components/radiogroup/RadioGroup.js +3 -3
  258. package/dist/components/radiogroup/RadioGroup.js.map +1 -1
  259. package/dist/components/radiogroup/RadioGroup.spec.js +65 -0
  260. package/dist/components/radiogroup/RadioGroup.stories.d.ts +5 -12
  261. package/dist/components/radiogroup/RadioGroup.stories.d.ts.map +1 -1
  262. package/dist/components/radiogroup/RadioGroup.stories.js +56 -151
  263. package/dist/components/radiogroup/RadioGroup.svelte +50 -43
  264. package/dist/components/radiogroup/RadioGroup.svelte.d.ts +28 -9
  265. package/dist/components/radiogroup/RadioGroup.svelte.d.ts.map +1 -1
  266. package/dist/components/select/README.md +18 -0
  267. package/dist/components/select/Select.js +2 -2
  268. package/dist/components/select/Select.js.map +1 -1
  269. package/dist/components/select/Select.spec.js +76 -0
  270. package/dist/components/select/Select.stories.d.ts +10 -14
  271. package/dist/components/select/Select.stories.d.ts.map +1 -1
  272. package/dist/components/select/Select.stories.js +87 -92
  273. package/dist/components/select/Select.svelte +57 -44
  274. package/dist/components/select/Select.svelte.d.ts +41 -10
  275. package/dist/components/select/Select.svelte.d.ts.map +1 -1
  276. package/dist/components/statusbadge/README.md +11 -0
  277. package/dist/components/statusbadge/StatusBadge.js +2 -2
  278. package/dist/components/statusbadge/StatusBadge.js.map +1 -1
  279. package/dist/components/statusbadge/StatusBadge.spec.js +31 -0
  280. package/dist/components/statusbadge/StatusBadge.stories.d.ts +9 -12
  281. package/dist/components/statusbadge/StatusBadge.stories.d.ts.map +1 -1
  282. package/dist/components/statusbadge/StatusBadge.stories.js +21 -44
  283. package/dist/components/statusbadge/StatusBadge.svelte +14 -6
  284. package/dist/components/statusbadge/StatusBadge.svelte.d.ts +13 -28
  285. package/dist/components/statusbadge/StatusBadge.svelte.d.ts.map +1 -1
  286. package/dist/components/statusdot/README.md +11 -0
  287. package/dist/components/statusdot/StatusDot.js +2 -2
  288. package/dist/components/statusdot/StatusDot.js.map +1 -1
  289. package/dist/components/statusdot/StatusDot.spec.js +42 -0
  290. package/dist/components/statusdot/StatusDot.stories.d.ts.map +1 -1
  291. package/dist/components/statusdot/StatusDot.stories.js +9 -37
  292. package/dist/components/statusdot/StatusDot.svelte +9 -7
  293. package/dist/components/statusdot/StatusDot.svelte.d.ts +2 -2
  294. package/dist/components/statusdot/StatusDot.svelte.d.ts.map +1 -1
  295. package/dist/components/statusnotification/README.md +25 -0
  296. package/dist/components/statusnotification/StatusNotification.js +3 -3
  297. package/dist/components/statusnotification/StatusNotification.js.map +1 -1
  298. package/dist/components/statusnotification/StatusNotification.spec.js +54 -0
  299. package/dist/components/statusnotification/StatusNotification.stories.d.ts +16 -14
  300. package/dist/components/statusnotification/StatusNotification.stories.d.ts.map +1 -1
  301. package/dist/components/statusnotification/StatusNotification.stories.js +53 -86
  302. package/dist/components/statusnotification/StatusNotification.svelte +49 -51
  303. package/dist/components/statusnotification/StatusNotification.svelte.d.ts +21 -18
  304. package/dist/components/statusnotification/StatusNotification.svelte.d.ts.map +1 -1
  305. package/dist/components/tab/README.md +20 -0
  306. package/dist/components/tab/Tab.js +4 -0
  307. package/dist/components/tab/Tab.js.map +1 -0
  308. package/dist/components/tab/Tab.spec.js +58 -0
  309. package/dist/components/{tabs → tab}/Tab.svelte +46 -26
  310. package/dist/components/{tabs → tab}/Tab.svelte.d.ts +20 -3
  311. package/dist/components/tab/Tab.svelte.d.ts.map +1 -0
  312. package/dist/components/tabs/README.md +18 -0
  313. package/dist/components/tabs/Tabs.js +2 -2
  314. package/dist/components/tabs/Tabs.js.map +1 -1
  315. package/dist/components/tabs/Tabs.spec.js +51 -0
  316. package/dist/components/tabs/Tabs.stories.d.ts +9 -6
  317. package/dist/components/tabs/Tabs.stories.d.ts.map +1 -1
  318. package/dist/components/tabs/Tabs.stories.js +59 -115
  319. package/dist/components/tabs/Tabs.svelte +27 -7
  320. package/dist/components/tabs/Tabs.svelte.d.ts +21 -7
  321. package/dist/components/tabs/Tabs.svelte.d.ts.map +1 -1
  322. package/dist/components/tags/README.md +9 -0
  323. package/dist/components/tags/Tag.js +1 -1
  324. package/dist/components/tags/TagContextualised.js +2 -2
  325. package/dist/components/tags/TagInteractive.js +1 -1
  326. package/dist/components/tags/TagRemovable.js +2 -2
  327. package/dist/components/tags/TagSelectable.js +2 -2
  328. package/dist/components/tags/Tags.stories.d.ts.map +1 -1
  329. package/dist/components/tags/Tags.stories.js +7 -1
  330. package/dist/components/tags/TagsContextualised.stories.d.ts.map +1 -1
  331. package/dist/components/tags/TagsContextualised.stories.js +7 -1
  332. package/dist/components/tags/TagsInteractive.stories.d.ts.map +1 -1
  333. package/dist/components/tags/TagsInteractive.stories.js +7 -1
  334. package/dist/components/tags/TagsRemovable.stories.d.ts.map +1 -1
  335. package/dist/components/tags/TagsRemovable.stories.js +7 -1
  336. package/dist/components/tags/TagsSelectable.stories.d.ts.map +1 -1
  337. package/dist/components/tags/TagsSelectable.stories.js +7 -1
  338. package/dist/components/textarea/README.md +19 -0
  339. package/dist/components/textarea/Textarea.js +2 -5
  340. package/dist/components/textarea/Textarea.js.map +1 -1
  341. package/dist/components/textarea/Textarea.spec.js +67 -0
  342. package/dist/components/textarea/Textarea.stories.d.ts +9 -13
  343. package/dist/components/textarea/Textarea.stories.d.ts.map +1 -1
  344. package/dist/components/textarea/Textarea.stories.js +61 -92
  345. package/dist/components/textarea/Textarea.svelte +53 -97
  346. package/dist/components/textarea/Textarea.svelte.d.ts +43 -13
  347. package/dist/components/textarea/Textarea.svelte.d.ts.map +1 -1
  348. package/dist/components/textinput/README.md +26 -0
  349. package/dist/components/textinput/Textinput.js +2 -2
  350. package/dist/components/textinput/Textinput.js.map +1 -1
  351. package/dist/components/textinput/Textinput.spec.js +89 -0
  352. package/dist/components/textinput/Textinput.stories.d.ts +11 -12
  353. package/dist/components/textinput/Textinput.stories.d.ts.map +1 -1
  354. package/dist/components/textinput/Textinput.stories.js +78 -137
  355. package/dist/components/textinput/Textinput.svelte +70 -112
  356. package/dist/components/textinput/Textinput.svelte.d.ts +46 -22
  357. package/dist/components/textinput/Textinput.svelte.d.ts.map +1 -1
  358. package/dist/components/toaster/README.md +28 -0
  359. package/dist/components/toaster/Toaster.js +2 -2
  360. package/dist/components/toaster/Toaster.js.map +1 -1
  361. package/dist/components/toaster/Toaster.spec.js +100 -0
  362. package/dist/components/toaster/Toaster.stories.d.ts.map +1 -1
  363. package/dist/components/toaster/Toaster.stories.js +5 -73
  364. package/dist/components/toaster/Toaster.svelte +17 -7
  365. package/dist/components/toaster/Toaster.svelte.d.ts +3 -0
  366. package/dist/components/toaster/Toaster.svelte.d.ts.map +1 -1
  367. package/dist/components/toggle/README.md +15 -0
  368. package/dist/components/toggle/Toggle.js +2 -2
  369. package/dist/components/toggle/Toggle.js.map +1 -1
  370. package/dist/components/toggle/Toggle.spec.js +69 -0
  371. package/dist/components/toggle/Toggle.stories.d.ts +9 -14
  372. package/dist/components/toggle/Toggle.stories.d.ts.map +1 -1
  373. package/dist/components/toggle/Toggle.stories.js +55 -64
  374. package/dist/components/toggle/Toggle.svelte +38 -24
  375. package/dist/components/toggle/Toggle.svelte.d.ts +26 -7
  376. package/dist/components/toggle/Toggle.svelte.d.ts.map +1 -1
  377. package/dist/components/togglegroup/README.md +13 -0
  378. package/dist/components/togglegroup/ToggleGroup.js +3 -3
  379. package/dist/components/togglegroup/ToggleGroup.js.map +1 -1
  380. package/dist/components/togglegroup/ToggleGroup.spec.js +50 -0
  381. package/dist/components/togglegroup/ToggleGroup.stories.d.ts +5 -13
  382. package/dist/components/togglegroup/ToggleGroup.stories.d.ts.map +1 -1
  383. package/dist/components/togglegroup/ToggleGroup.stories.js +56 -104
  384. package/dist/components/togglegroup/ToggleGroup.svelte +55 -58
  385. package/dist/components/togglegroup/ToggleGroup.svelte.d.ts +25 -14
  386. package/dist/components/togglegroup/ToggleGroup.svelte.d.ts.map +1 -1
  387. package/dist/components/tooltip/README.md +19 -0
  388. package/dist/components/tooltip/Tooltip.js +2 -2
  389. package/dist/components/tooltip/Tooltip.js.map +1 -1
  390. package/dist/components/tooltip/Tooltip.spec.js +38 -0
  391. package/dist/components/tooltip/Tooltip.stories.d.ts +6 -7
  392. package/dist/components/tooltip/Tooltip.stories.d.ts.map +1 -1
  393. package/dist/components/tooltip/Tooltip.stories.js +45 -59
  394. package/dist/components/tooltip/Tooltip.svelte +23 -14
  395. package/dist/components/tooltip/Tooltip.svelte.d.ts +17 -0
  396. package/dist/components/tooltip/Tooltip.svelte.d.ts.map +1 -1
  397. package/dist/custom-element.js +3 -3
  398. package/dist/custom-element.js.map +1 -1
  399. package/dist/documentation/Contributing.mdx +1 -1
  400. package/dist/documentation/Introduction.mdx +45 -11
  401. package/dist/documentation/SupportAndOnboarding.mdx +2 -2
  402. package/dist/each.js +1 -1
  403. package/dist/each.js.map +1 -1
  404. package/dist/if.js +1 -1
  405. package/dist/if.js.map +1 -1
  406. package/dist/input.js +1 -1
  407. package/dist/input.js.map +1 -1
  408. package/dist/legacy.js +1 -1
  409. package/dist/main.d.ts +24 -23
  410. package/dist/main.d.ts.map +1 -1
  411. package/dist/main.js +24 -23
  412. package/dist/slot.js +1 -1
  413. package/dist/slot.js.map +1 -1
  414. package/dist/this.js +2 -0
  415. package/dist/this.js.map +1 -0
  416. package/package.json +11 -3
  417. package/dist/components/button/button.types.d.ts +0 -13
  418. package/dist/components/button/button.types.d.ts.map +0 -1
  419. package/dist/components/button/button.types.js +0 -1
  420. package/dist/components/checkboxgroup/checkboxgroup.types.d.ts +0 -9
  421. package/dist/components/checkboxgroup/checkboxgroup.types.d.ts.map +0 -1
  422. package/dist/components/checkboxgroup/checkboxgroup.types.js +0 -1
  423. package/dist/components/link/link.types.d.ts +0 -4
  424. package/dist/components/link/link.types.d.ts.map +0 -1
  425. package/dist/components/link/link.types.js +0 -1
  426. package/dist/components/loader/loader.types.d.ts +0 -3
  427. package/dist/components/loader/loader.types.d.ts.map +0 -1
  428. package/dist/components/loader/loader.types.js +0 -1
  429. package/dist/components/numberbadge/NumberBadge.types.d.ts +0 -3
  430. package/dist/components/numberbadge/NumberBadge.types.d.ts.map +0 -1
  431. package/dist/components/numberbadge/NumberBadge.types.js +0 -1
  432. package/dist/components/overlayloader/OverlayLoader.js +0 -27
  433. package/dist/components/overlayloader/OverlayLoader.js.map +0 -1
  434. package/dist/components/overlayloader/OverlayLoader.stories.d.ts +0 -8
  435. package/dist/components/overlayloader/OverlayLoader.stories.d.ts.map +0 -1
  436. package/dist/components/overlayloader/OverlayLoader.stories.js +0 -50
  437. package/dist/components/overlayloader/OverlayLoader.svelte +0 -160
  438. package/dist/components/overlayloader/OverlayLoader.svelte.d.ts +0 -9
  439. package/dist/components/overlayloader/OverlayLoader.svelte.d.ts.map +0 -1
  440. package/dist/components/quantityselector/quantitySelector.types.d.ts +0 -2
  441. package/dist/components/quantityselector/quantitySelector.types.d.ts.map +0 -1
  442. package/dist/components/quantityselector/quantitySelector.types.js +0 -1
  443. package/dist/components/radiogroup/radioGroup.types.d.ts +0 -9
  444. package/dist/components/radiogroup/radioGroup.types.d.ts.map +0 -1
  445. package/dist/components/radiogroup/radioGroup.types.js +0 -1
  446. package/dist/components/select/select.types.d.ts +0 -9
  447. package/dist/components/select/select.types.d.ts.map +0 -1
  448. package/dist/components/select/select.types.js +0 -1
  449. package/dist/components/statusbadge/StatusBadge.types.d.ts +0 -2
  450. package/dist/components/statusbadge/StatusBadge.types.d.ts.map +0 -1
  451. package/dist/components/statusbadge/StatusBadge.types.js +0 -1
  452. package/dist/components/statusdot/StatusDot.types.d.ts +0 -3
  453. package/dist/components/statusdot/StatusDot.types.d.ts.map +0 -1
  454. package/dist/components/statusdot/StatusDot.types.js +0 -1
  455. package/dist/components/tabs/Tab.js +0 -4
  456. package/dist/components/tabs/Tab.js.map +0 -1
  457. package/dist/components/tabs/Tab.svelte.d.ts.map +0 -1
  458. package/dist/components/textinput/textinput.types.d.ts +0 -3
  459. package/dist/components/textinput/textinput.types.d.ts.map +0 -1
  460. package/dist/components/textinput/textinput.types.js +0 -1
  461. package/dist/components/toggle/toggle.types.d.ts +0 -2
  462. package/dist/components/toggle/toggle.types.d.ts.map +0 -1
  463. package/dist/components/toggle/toggle.types.js +0 -1
  464. package/dist/index-client.js +0 -2
  465. package/dist/index-client.js.map +0 -1
  466. package/dist/snippet.js +0 -2
  467. package/dist/snippet.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tabs' }} />\n\n<script lang=\"ts\">\n let { activeindex, centered } = $props();\n\n let active = $state(activeindex ?? 0);\n</script>\n\n<nav class=\"mc-tabs\" class:mc-tabs--centered={centered}>\n <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label=\"Tabs default\">\n <slot name=\"tab\" {active} />\n </ul>\n <div class=\"mc-divider-horizontal\"></div>\n</nav>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/tabs';\n @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["activeindex","$.prop","$$props","centered","active","$.state","$.proxy"],"mappings":";;yeAAA,oBAGQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAEvBE,EAAMC,EAAAC,EAAUN,EAAW,GAAI,CAAC,CAAA,iSAGQG,EAAQ,CAAA,EAAA,CAAA,aAFtD"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tabs' }} />\n\n<script lang=\"ts\">\n /**\n * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n *\n * @slot tab - use this slot to insert `m-tab` components.\n */\n interface Props {\n /**\n * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.\n */\n description?: string;\n /**\n * If `true`, the divider will appear.\n */\n divider?: boolean;\n /**\n * If `true`, the tabs of the component will be centered.\n */\n centered?: boolean;\n }\n\n let { description, divider = true, centered }: Props = $props();\n</script>\n\n<nav class={['mc-tabs', centered && 'mc-tabs--centered']}>\n <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label={description}>\n <slot name=\"tab\" />\n </ul>\n {#if divider}\n <div class=\"mc-divider-horizontal\"></div>\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/tabs';\n @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["description","$.prop","$$props","divider","centered","$$render","consequent"],"mappings":";;yeAAA,oBAuBQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,kBAAU,EAAI,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,4GAAd,GAAI,4JAO5BC,EAAO,GAAAE,EAAAC,CAAA,gCAJD,UAAWF,KAAY,mBAAmB,CAAA,EAAA,eAAA,mBACAJ,GAAW,eAHlE"}
@@ -0,0 +1,51 @@
1
+ import { describe, it, expect } from 'vitest';
2
+ import { render } from '@testing-library/svelte';
3
+ import Tabs from './Tabs.svelte';
4
+ describe('mc-tabs component', () => {
5
+ it('renders <nav> with the base class', () => {
6
+ const { container } = render(Tabs);
7
+ const nav = container.querySelector('nav');
8
+ expect(nav).toBeTruthy();
9
+ expect(nav?.classList.contains('mc-tabs')).toBe(true);
10
+ });
11
+ it('adds the "mc-tabs--centered" class when centered is true', () => {
12
+ const { container } = render(Tabs, {
13
+ props: { centered: true },
14
+ });
15
+ const nav = container.querySelector('nav');
16
+ expect(nav?.classList.contains('mc-tabs--centered')).toBe(true);
17
+ });
18
+ it('renders a <ul> with role="tablist"', () => {
19
+ const { container } = render(Tabs);
20
+ const ul = container.querySelector('ul.mc-tabs__list');
21
+ expect(ul).toBeTruthy();
22
+ expect(ul?.getAttribute('role')).toBe('tablist');
23
+ });
24
+ it('sets aria-label on the tablist when description is provided', () => {
25
+ const description = 'My tab description';
26
+ const { container } = render(Tabs, {
27
+ props: { description },
28
+ });
29
+ const ul = container.querySelector('ul.mc-tabs__list');
30
+ expect(ul?.getAttribute('aria-label')).toBe(description);
31
+ });
32
+ it('renders a divider by default', () => {
33
+ const { container } = render(Tabs);
34
+ const divider = container.querySelector('.mc-divider-horizontal');
35
+ expect(divider).toBeTruthy();
36
+ });
37
+ it('does not render divider when divider is false', () => {
38
+ const { container } = render(Tabs, {
39
+ props: { divider: false },
40
+ });
41
+ const divider = container.querySelector('.mc-divider-horizontal');
42
+ expect(divider).toBeNull();
43
+ });
44
+ it('renders without crashing when value prop is provided', () => {
45
+ const { container } = render(Tabs, {
46
+ props: { value: 2 },
47
+ });
48
+ const nav = container.querySelector('nav');
49
+ expect(nav).toBeTruthy();
50
+ });
51
+ });
@@ -1,7 +1,10 @@
1
- import type { Meta } from '@storybook/html-vite';
2
- declare const _default: Meta;
3
- export default _default;
4
- export declare const Default: any;
5
- export declare const Centered: any;
6
- export declare const WithIcons: any;
1
+ import type { Meta, StoryObj } from '@storybook/web-components-vite';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
6
+ export declare const Icons: Story;
7
+ export declare const Centered: Story;
8
+ export declare const NoDivider: Story;
9
+ export declare const Disabled: Story;
7
10
  //# sourceMappingURL=Tabs.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AArBT,wBAqBU;AAsCV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAoD1C,eAAO,MAAM,SAAS,KAAwB,CAAC"}
1
+ {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAqBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}
@@ -1,122 +1,66 @@
1
- import ChevronRight32 from '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
2
- import { within, expect } from 'storybook/test';
3
- export default {
1
+ import { html } from 'lit';
2
+ import { ifDefined } from 'lit-html/directives/if-defined.js';
3
+ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
4
+ const meta = {
4
5
  title: 'Navigation/Tabs',
5
- tags: ['autodocs', 'new'],
6
- parameters: {
7
- docs: {
8
- description: {
9
- component: 'Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.',
10
- },
11
- },
6
+ component: 'm-tabs',
7
+ subcomponents: { 'm-tab': 'm-tab' },
8
+ args: {
9
+ tab: `
10
+ <m-tab slot="tab" selected="true">label</m-tab>
11
+ <m-tab slot="tab">label</m-tab>
12
+ <m-tab slot="tab">label</m-tab>
13
+ <m-tab slot="tab">label</m-tab>
14
+ `,
12
15
  },
13
- argTypes: {
14
- activeindex: {
15
- description: 'Index of the currently selected tab',
16
- control: { type: 'number', min: 0 },
17
- },
18
- centered: {
19
- description: 'centered tab element',
20
- control: { type: 'boolean' },
21
- },
22
- },
23
- };
24
- // --- Template Function
25
- const Template = ({ activeindex = 0, centered = 'false' }) => {
26
- const wrapper = document.createElement('div');
27
- const tabs = document.createElement('mc-tabs');
28
- tabs.setAttribute('activeindex', String(activeindex));
29
- tabs.setAttribute('centered', centered || '');
30
- for (let i = 0; i < 4; i++) {
31
- const tab = document.createElement('mc-tab');
32
- tab.setAttribute('slot', 'tab');
33
- tab.setAttribute('index', String(i));
34
- tab.setAttribute('tag', 'button');
35
- tab.innerText = `Tab ${i + 1}`;
36
- if (String(i) === String(3))
37
- tab.setAttribute('disabled', 'true');
38
- if (i === activeindex)
39
- tab.setAttribute('selected', 'true');
40
- tab.addEventListener('click', () => {
41
- tabs.setAttribute('activeindex', String(i));
42
- // Update other tab selection
43
- const allTabs = tabs.querySelectorAll('mc-tab');
44
- allTabs.forEach((el, idx) => {
45
- if (i === idx) {
46
- el.setAttribute('selected', 'true');
47
- }
48
- else {
49
- el.removeAttribute('selected');
50
- }
51
- });
52
- });
53
- tabs.appendChild(tab);
54
- }
55
- wrapper.appendChild(tabs);
56
- return wrapper;
57
- };
58
- // --- Default story
59
- export const Default = Template.bind({});
60
- Default.args = {
61
- activeIndex: 0,
62
- centered: false,
16
+ render: (args) => html `
17
+ <m-tabs
18
+ description=${ifDefined(args.description)}
19
+ centered=${ifDefined(args.centered)}
20
+ divider=${ifDefined(args.divider)}
21
+ value=${ifDefined(args.value)}
22
+ >
23
+ ${unsafeHTML(ifDefined(args.tab))}
24
+ </m-tabs>
25
+ `,
63
26
  };
64
- Default.play = async ({ canvasElement }) => {
65
- const tabs = canvasElement.querySelector('mc-tabs');
66
- const tabItems = tabs?.querySelectorAll('mc-tab');
67
- expect(tabItems?.length).toBe(4);
68
- const selected = Array.from(tabItems).filter((tab) => tab.getAttribute('selected') === 'true');
69
- expect(selected.length).toBe(1);
70
- expect(selected[0].innerText).toBe('Tab 1');
27
+ export default meta;
28
+ export const Default = {};
29
+ export const Icons = {
30
+ args: {
31
+ tab: `
32
+ <m-tab slot="tab" selected="true">
33
+ <chevron-right-24 slot="icon"></chevron-right-24>
34
+ label
35
+ </m-tab>
36
+ <m-tab slot="tab">
37
+ <chevron-right-24 slot="icon"></chevron-right-24>
38
+ label
39
+ </m-tab>
40
+ <m-tab slot="tab">
41
+ <chevron-right-24 slot="icon"></chevron-right-24>
42
+ label
43
+ </m-tab>
44
+ <m-tab slot="tab">
45
+ <chevron-right-24 slot="icon"></chevron-right-24>
46
+ label
47
+ </m-tab>
48
+ `,
49
+ },
71
50
  };
72
- // --- Centered story
73
- export const Centered = Template.bind({});
74
- Centered.args = {
75
- activeIndex: 1,
76
- centered: true,
51
+ export const Centered = {
52
+ args: { centered: true },
77
53
  };
78
- const IconTemplate = ({ activeindex = 0, centered = 'false' }) => {
79
- const wrapper = document.createElement('div');
80
- const tabs = document.createElement('mc-tabs');
81
- tabs.setAttribute('activeindex', String(activeindex));
82
- tabs.setAttribute('centered', centered || '');
83
- for (let i = 0; i < 4; i++) {
84
- const tab = document.createElement('mc-tab');
85
- tab.setAttribute('slot', 'tab');
86
- tab.setAttribute('index', String(i));
87
- tab.setAttribute('tag', 'button');
88
- tab.setAttribute('hasiconslot', 'true');
89
- if (i === 3)
90
- tab.setAttribute('disabled', 'true');
91
- if (i === activeindex)
92
- tab.setAttribute('selected', 'true');
93
- const icon = document.createElement('chevron-right-32');
94
- icon.setAttribute('slot', 'icon');
95
- icon.setAttribute('style', 'height: 100%');
96
- tab.appendChild(icon);
97
- const label = document.createElement('span');
98
- label.innerText = `Tab ${i + 1}`;
99
- tab.appendChild(icon);
100
- tab.appendChild(label);
101
- tab.addEventListener('click', () => {
102
- tabs.setAttribute('activeindex', String(i));
103
- const allTabs = tabs.querySelectorAll('mc-tab');
104
- allTabs.forEach((el, idx) => {
105
- if (i === idx) {
106
- el.setAttribute('selected', 'true');
107
- }
108
- else {
109
- el.removeAttribute('selected');
110
- }
111
- });
112
- });
113
- tabs.appendChild(tab);
114
- }
115
- wrapper.appendChild(tabs);
116
- return wrapper;
54
+ export const NoDivider = {
55
+ args: { divider: false },
117
56
  };
118
- export const WithIcons = IconTemplate.bind({});
119
- WithIcons.args = {
120
- activeIndex: 0,
121
- centered: false,
57
+ export const Disabled = {
58
+ args: {
59
+ tab: `
60
+ <m-tab slot="tab" selected="true">label</m-tab>
61
+ <m-tab slot="tab">label</m-tab>
62
+ <m-tab slot="tab" disabled="true">label</m-tab>
63
+ <m-tab slot="tab" disabled="true">label</m-tab>
64
+ `,
65
+ },
122
66
  };
@@ -1,16 +1,36 @@
1
- <svelte:options customElement={{ tag: 'mc-tabs' }} />
1
+ <svelte:options customElement={{ tag: 'm-tabs' }} />
2
2
 
3
3
  <script lang="ts">
4
- let { activeindex, centered } = $props();
4
+ /**
5
+ * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
6
+ *
7
+ * @slot tab - use this slot to insert `m-tab` components.
8
+ */
9
+ interface Props {
10
+ /**
11
+ * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
12
+ */
13
+ description?: string;
14
+ /**
15
+ * If `true`, the divider will appear.
16
+ */
17
+ divider?: boolean;
18
+ /**
19
+ * If `true`, the tabs of the component will be centered.
20
+ */
21
+ centered?: boolean;
22
+ }
5
23
 
6
- let active = $state(activeindex ?? 0);
24
+ let { description, divider = true, centered }: Props = $props();
7
25
  </script>
8
26
 
9
- <nav class="mc-tabs" class:mc-tabs--centered={centered}>
10
- <ul class="mc-tabs__list" role="tablist" aria-label="Tabs default">
11
- <slot name="tab" {active} />
27
+ <nav class={['mc-tabs', centered && 'mc-tabs--centered']}>
28
+ <ul class="mc-tabs__list" role="tablist" aria-label={description}>
29
+ <slot name="tab" />
12
30
  </ul>
13
- <div class="mc-divider-horizontal"></div>
31
+ {#if divider}
32
+ <div class="mc-divider-horizontal"></div>
33
+ {/if}
14
34
  </nav>
15
35
 
16
36
  <style>/**
@@ -1,3 +1,22 @@
1
+ /**
2
+ * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
3
+ *
4
+ * @slot tab - use this slot to insert `m-tab` components.
5
+ */
6
+ interface Props {
7
+ /**
8
+ * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
9
+ */
10
+ description?: string;
11
+ /**
12
+ * If `true`, the divider will appear.
13
+ */
14
+ divider?: boolean;
15
+ /**
16
+ * If `true`, the tabs of the component will be centered.
17
+ */
18
+ centered?: boolean;
19
+ }
1
20
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
21
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
22
  $$bindings?: Bindings;
@@ -11,15 +30,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
30
  };
12
31
  z_$$bindings?: Bindings;
13
32
  }
14
- declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
15
- activeindex: any;
16
- centered: any;
17
- }, {
33
+ declare const Tabs: $$__sveltets_2_IsomorphicComponent<Props, {
18
34
  [evt: string]: CustomEvent<any>;
19
35
  }, {
20
- tab: {
21
- active: any;
22
- };
36
+ tab: {};
23
37
  }, {}, "">;
24
38
  type Tabs = InstanceType<typeof Tabs>;
25
39
  export default Tabs;
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAsBA,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,IAAI;iBAjCgD,GAAG;cAAY,GAAG;;;;;;;UAiCmB,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBH,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,IAAI;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
@@ -0,0 +1,9 @@
1
+ # `mc-tag`
2
+
3
+ ## Props
4
+
5
+ | Name | Description | Type | Default |
6
+ |------|-------------|------|---------|
7
+ | `label*` | | `string` | |
8
+ | `size` | | `'s'` `'m'` `'l'` | `m` |
9
+
@@ -1,4 +1,4 @@
1
- import{c as m,p as f,a as b,b as c,f as h,D as p,t as w,h as x,i as j,j as i,d,r as n,g as k}from"../../custom-element.js";import{b as _}from"../../attributes.js";var E=h('<span><span class="mc-tag__label svelte-ajo7cu"> </span></span>');const C={hash:"svelte-ajo7cu",code:`/**
1
+ import{c as m,p as f,a as b,b as c,f as h,z as p,t as w,i as x,j,k as i,d,r as n,h as k}from"../../custom-element.js";import{b as _}from"../../attributes.js";var E=h('<span><span class="mc-tag__label svelte-ajo7cu"> </span></span>');const C={hash:"svelte-ajo7cu",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */.mc-tag.svelte-ajo7cu {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ajo7cu {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ajo7cu {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ajo7cu, .mc-tag.svelte-ajo7cu:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-ajo7cu {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ajo7cu:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ajo7cu: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-tag-contextualised.svelte-ajo7cu {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-ajo7cu:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ajo7cu: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-tag-contextualised.mc-tag--s.svelte-ajo7cu {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ajo7cu {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-ajo7cu {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ajo7cu:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ajo7cu: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-tag-removable__icon.svelte-ajo7cu {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ajo7cu {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-ajo7cu {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ajo7cu {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ajo7cu:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-ajo7cu .mc-tag__label:where(.svelte-ajo7cu) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ajo7cu {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ajo7cu {padding-inline-start:0.75rem;}`};function z(l,e){f(e,!0),b(l,C);let r=c(e,"label",7),o=c(e,"size",7,"m"),u=p(e,["$$slots","$$events","$$legacy","$$host","label","size"]);var v={get label(){return r()},set label(t){r(t),i()},get size(){return o()},set size(t="m"){o(t),i()}},a=E();_(a,()=>({class:`mc-tag ${o()!=="m"?`mc-tag--${o()}`:""}`,...u}),void 0,void 0,"svelte-ajo7cu");var s=d(a),g=d(s,!0);return n(s),n(a),w(()=>k(g,r())),x(l,a),j(v)}customElements.define("mc-tag",m(z,{label:{},size:{}},[],[],!0));
4
4
  //# sourceMappingURL=Tag.js.map
@@ -1,4 +1,4 @@
1
- import{c as w,p,a as x,b as o,f as k,D as _,d as m,s as C,t as E,h as z,i as N,j as l,r as v,g as y}from"../../custom-element.js";import{b as M}from"../../attributes.js";import{N as P}from"../numberbadge/NumberBadge.js";var B=k('<button><!> <span class="mc-tag__label svelte-ra288w"> </span></button>');const D={hash:"svelte-ra288w",code:`/**
1
+ import{c as w,p,a as x,b as o,f as k,z as _,d as g,s as C,t as E,i as z,j as N,k as l,r as v,h as y}from"../../custom-element.js";import{b as M}from"../../attributes.js";import{N as P}from"../numberbadge/NumberBadge.js";var B=k('<button><!> <span class="mc-tag__label svelte-ra288w"> </span></button>');const H={hash:"svelte-ra288w",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
- */.mc-tag.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ra288w {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ra288w, .mc-tag.svelte-ra288w:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-ra288w {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ra288w:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ra288w: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-tag-contextualised.svelte-ra288w {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-ra288w:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ra288w: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-tag-contextualised.mc-tag--s.svelte-ra288w {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ra288w {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-ra288w {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ra288w:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ra288w: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-tag-removable__icon.svelte-ra288w {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ra288w {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-ra288w {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ra288w {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ra288w:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-ra288w .mc-tag__label:where(.svelte-ra288w) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ra288w {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ra288w {padding-inline-start:0.75rem;}`};function H(c,r){p(r,!0),x(c,D);let s=o(r,"label",7),i=o(r,"contextualisedNumber",7,"99"),a=o(r,"size",7,"m"),d=o(r,"disabled",7,!1),f=_(r,["$$slots","$$events","$$legacy","$$host","label","contextualisedNumber","size","disabled"]);const u=a()==="l"?"m":"s";var b={get label(){return s()},set label(e){s(e),l()},get contextualisedNumber(){return i()},set contextualisedNumber(e="99"){i(e),l()},get size(){return a()},set size(e="m"){a(e),l()},get disabled(){return d()},set disabled(e=!1){d(e),l()}},t=B();M(t,()=>({class:`mc-tag mc-tag-contextualised ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:d(),...f}),void 0,void 0,"svelte-ra288w");var n=m(t);P(n,{appearance:"inverse",get label(){return i()},get size(){return u}});var g=C(n,2),h=m(g,!0);return v(g),v(t),E(()=>y(h,s())),z(c,t),N(b)}customElements.define("mc-tag-contextualised",w(H,{label:{},contextualisedNumber:{},size:{},disabled:{}},[],[],!0));
3
+ */.mc-tag.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ra288w {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ra288w, .mc-tag.svelte-ra288w:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-ra288w {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ra288w:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ra288w: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-tag-contextualised.svelte-ra288w {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-ra288w:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ra288w: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-tag-contextualised.mc-tag--s.svelte-ra288w {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ra288w {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-ra288w {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ra288w:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ra288w: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-tag-removable__icon.svelte-ra288w {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ra288w {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-ra288w {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ra288w {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ra288w:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-ra288w .mc-tag__label:where(.svelte-ra288w) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ra288w {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ra288w {padding-inline-start:0.75rem;}`};function S(c,r){p(r,!0),x(c,H);let s=o(r,"label",7),i=o(r,"contextualisedNumber",7,"99"),a=o(r,"size",7,"m"),d=o(r,"disabled",7,!1),f=_(r,["$$slots","$$events","$$legacy","$$host","label","contextualisedNumber","size","disabled"]);const u=a()==="l"?"m":"s";var b={get label(){return s()},set label(e){s(e),l()},get contextualisedNumber(){return i()},set contextualisedNumber(e="99"){i(e),l()},get size(){return a()},set size(e="m"){a(e),l()},get disabled(){return d()},set disabled(e=!1){d(e),l()}},t=B();M(t,()=>({class:`mc-tag mc-tag-contextualised ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:d(),...f}),void 0,void 0,"svelte-ra288w");var n=g(t);P(n,{appearance:"inverse",get label(){return i()},get size(){return u}});var m=C(n,2),h=g(m,!0);return v(m),v(t),E(()=>y(h,s())),z(c,t),N(b)}customElements.define("mc-tag-contextualised",w(S,{label:{},contextualisedNumber:{},size:{},disabled:{}},[],[],!0));
4
4
  //# sourceMappingURL=TagContextualised.js.map
@@ -1,4 +1,4 @@
1
- import{c as b,p as u,a as h,b as s,f as p,D as y,t as w,h as x,i as k,j as i,d as n,r as v,g as _}from"../../custom-element.js";import{b as E}from"../../attributes.js";var C=p('<button><span class="mc-tag__label svelte-re604y"> </span></button>');const z={hash:"svelte-re604y",code:`/**
1
+ import{c as b,p as u,a as h,b as s,f as p,z as y,t as w,i as x,j as k,k as i,d as n,r as v,h as _}from"../../custom-element.js";import{b as E}from"../../attributes.js";var C=p('<button><span class="mc-tag__label svelte-re604y"> </span></button>');const z={hash:"svelte-re604y",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */.mc-tag.svelte-re604y {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-re604y {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-re604y {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-re604y, .mc-tag.svelte-re604y:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-re604y {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-re604y:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-re604y: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-tag-contextualised.svelte-re604y {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-re604y:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-re604y: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-tag-contextualised.mc-tag--s.svelte-re604y {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-re604y {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-re604y {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-re604y:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-re604y: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-tag-removable__icon.svelte-re604y {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-re604y {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-re604y {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-re604y {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-re604y:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):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-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-re604y .mc-tag__label:where(.svelte-re604y) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-re604y {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-re604y {padding-inline-start:0.75rem;}`};function M(d,e){u(e,!0),h(d,z);let o=s(e,"label",7),l=s(e,"disabled",7,!1),t=s(e,"size",7,"m"),g=y(e,["$$slots","$$events","$$legacy","$$host","label","disabled","size"]);var m={get label(){return o()},set label(r){o(r),i()},get disabled(){return l()},set disabled(r=!1){l(r),i()},get size(){return t()},set size(r="m"){t(r),i()}},a=C();E(a,()=>({class:`mc-tag mc-tag-interactive ${t()!=="m"?`mc-tag--${t()}`:""}`,disabled:l(),...g}),void 0,void 0,"svelte-re604y");var c=n(a),f=n(c,!0);return v(c),v(a),w(()=>_(f,o())),x(d,a),k(m)}customElements.define("mc-tag-interactive",b(M,{label:{},disabled:{},size:{}},[],[],!0));
4
4
  //# sourceMappingURL=TagInteractive.js.map
@@ -1,4 +1,4 @@
1
- import{c as j,p as _,b as l,q as R,t as k,h as C,i as E,j as s,e as B,u as D,n as F,a as H,f as q,D as S,s as p,d as g,r as m,g as w}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as x,a as A,b as G}from"../../attributes.js";import{C as I}from"../../CrossCircleFilled24.js";import"../../legacy.js";var J=R('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function z(n,e){_(e,!1);let c=l(e,"id",12,void 0),i=l(e,"style",12,void 0),d=l(e,"className",12,void 0),o=l(e,"fill",12,void 0),v=l(e,"size",12,"1.25rem");var f={get id(){return c()},set id(a){c(a),s()},get style(){return i()},set style(a){i(a),s()},get className(){return d()},set className(a){d(a),s()},get fill(){return o()},set fill(a){o(a),s()},get size(){return v()},set size(a){v(a),s()}},r=J();return k(()=>{x(r,"id",c()),A(r,i()),B(r,0,D(d())),x(r,"fill",o())}),C(n,r),E(f)}customElements.define("cross-circle-filled-20",j(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function K(n,e){dispatchEvent(new CustomEvent("remove-tag",{detail:e()}))}var O=q('<span><span class="mc-tag__label svelte-14ecgj3"> </span> <button class="mc-tag-removable__remove svelte-14ecgj3" type="button"><span class="mc-tag-removable__icon svelte-14ecgj3"><!></span> <span class="mc-tag-removable__text svelte-14ecgj3"> </span></button></span>');const Q={hash:"svelte-14ecgj3",code:`/**
1
+ import{c as j,p as _,b as l,A as R,t as k,i as C,j as E,k as s,e as B,g as F,v as H,a as A,f as D,z as S,s as p,d as g,r as m,h as w}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as x,a as q,b as G}from"../../attributes.js";import{C as I}from"../../CrossCircleFilled24.js";import"../../legacy.js";var J=R('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function z(n,e){_(e,!1);let c=l(e,"id",12,void 0),i=l(e,"style",12,void 0),d=l(e,"className",12,void 0),o=l(e,"fill",12,void 0),v=l(e,"size",12,"1.25rem");var f={get id(){return c()},set id(a){c(a),s()},get style(){return i()},set style(a){i(a),s()},get className(){return d()},set className(a){d(a),s()},get fill(){return o()},set fill(a){o(a),s()},get size(){return v()},set size(a){v(a),s()}},r=J();return k(()=>{x(r,"id",c()),q(r,i()),B(r,0,F(d())),x(r,"fill",o())}),C(n,r),E(f)}customElements.define("cross-circle-filled-20",j(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function K(n,e){dispatchEvent(new CustomEvent("remove-tag",{detail:e()}))}var O=D('<span><span class="mc-tag__label svelte-14ecgj3"> </span> <button class="mc-tag-removable__remove svelte-14ecgj3" type="button"><span class="mc-tag-removable__icon svelte-14ecgj3"><!></span> <span class="mc-tag-removable__text svelte-14ecgj3"> </span></button></span>');const Q={hash:"svelte-14ecgj3",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
- */.mc-tag.svelte-14ecgj3 {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-14ecgj3 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-14ecgj3 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-14ecgj3, .mc-tag.svelte-14ecgj3:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-14ecgj3 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-14ecgj3:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-14ecgj3: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-tag-contextualised.svelte-14ecgj3 {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-14ecgj3:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-14ecgj3: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-tag-contextualised.mc-tag--s.svelte-14ecgj3 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-14ecgj3 {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-14ecgj3 {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-14ecgj3:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-14ecgj3: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-tag-removable__icon.svelte-14ecgj3 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-14ecgj3 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-14ecgj3 {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-14ecgj3:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-14ecgj3 .mc-tag__label:where(.svelte-14ecgj3) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-14ecgj3 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-14ecgj3 {padding-inline-start:0.75rem;}`};function U(n,e){_(e,!0),H(n,Q);let c=l(e,"id",7),i=l(e,"label",7),d=l(e,"removableLabel",7,"Remove"),o=l(e,"size",7,"m"),v=S(e,["$$slots","$$events","$$legacy","$$host","id","label","removableLabel","size"]);var f={get id(){return c()},set id(t){c(t),s()},get label(){return i()},set label(t){i(t),s()},get removableLabel(){return d()},set removableLabel(t="Remove"){d(t),s()},get size(){return o()},set size(t="m"){o(t),s()}},r=O();G(r,()=>({class:`mc-tag mc-tag-removable ${o()!=="m"?`mc-tag--${o()}`:""}`,id:c(),...v}),void 0,void 0,"svelte-14ecgj3");var a=g(r),y=g(a,!0);m(a);var b=p(a,2);b.__click=[K,c];var u=g(b),L=g(u);{var M=t=>{z(t,{"aria-hidden":"true"})},N=t=>{I(t,{"aria-hidden":"true"})};T(L,t=>{o()==="s"?t(M):t(N,!1)})}m(u);var h=p(u,2),P=g(h,!0);return m(h),m(b),m(r),k(()=>{w(y,i()),w(P,d())}),C(n,r),E(f)}F(["click"]);customElements.define("mc-tag-removable",j(U,{id:{},label:{},removableLabel:{},size:{}},[],[],!0));
3
+ */.mc-tag.svelte-14ecgj3 {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-14ecgj3 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-14ecgj3 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-14ecgj3, .mc-tag.svelte-14ecgj3:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-14ecgj3 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-14ecgj3:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-14ecgj3: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-tag-contextualised.svelte-14ecgj3 {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-14ecgj3:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-14ecgj3: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-tag-contextualised.mc-tag--s.svelte-14ecgj3 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-14ecgj3 {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-14ecgj3 {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-14ecgj3:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-14ecgj3: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-tag-removable__icon.svelte-14ecgj3 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-14ecgj3 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-14ecgj3 {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-14ecgj3:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-14ecgj3 .mc-tag__label:where(.svelte-14ecgj3) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-14ecgj3 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-14ecgj3 {padding-inline-start:0.75rem;}`};function U(n,e){_(e,!0),A(n,Q);let c=l(e,"id",7),i=l(e,"label",7),d=l(e,"removableLabel",7,"Remove"),o=l(e,"size",7,"m"),v=S(e,["$$slots","$$events","$$legacy","$$host","id","label","removableLabel","size"]);var f={get id(){return c()},set id(t){c(t),s()},get label(){return i()},set label(t){i(t),s()},get removableLabel(){return d()},set removableLabel(t="Remove"){d(t),s()},get size(){return o()},set size(t="m"){o(t),s()}},r=O();G(r,()=>({class:`mc-tag mc-tag-removable ${o()!=="m"?`mc-tag--${o()}`:""}`,id:c(),...v}),void 0,void 0,"svelte-14ecgj3");var a=g(r),y=g(a,!0);m(a);var b=p(a,2);b.__click=[K,c];var u=g(b),L=g(u);{var M=t=>{z(t,{"aria-hidden":"true"})},N=t=>{I(t,{"aria-hidden":"true"})};T(L,t=>{o()==="s"?t(M):t(N,!1)})}m(u);var h=p(u,2),P=g(h,!0);return m(h),m(b),m(r),k(()=>{w(y,i()),w(P,d())}),C(n,r),E(f)}H(["click"]);customElements.define("mc-tag-removable",j(U,{id:{},label:{},removableLabel:{},size:{}},[],[],!0));
4
4
  //# sourceMappingURL=TagRemovable.js.map
@@ -1,4 +1,4 @@
1
- import{n as x,c as w,p as y,a as k,b as t,f as _,D as C,d as f,t as E,h as M,i as P,j as o,s as B,r as b,g as D}from"../../custom-element.js";import{b as H,r as S,s as u,c as j}from"../../attributes.js";function T(l,a){a(l.target.checked)}var q=_('<label><input type="checkbox" class="mc-tag__input svelte-1myzar6"/> <span class="mc-tag__label svelte-1myzar6"> </span></label>');const A={hash:"svelte-1myzar6",code:`/**
1
+ import{v as x,c as w,p as y,a as k,b as t,f as _,d as f,s as C,t as E,i as M,j as P,k as o,z as B,r as b,h as H}from"../../custom-element.js";import{b as S,r as j,s as u,c as D}from"../../attributes.js";function T(l,a){a(l.target.checked)}var q=_('<label><input type="checkbox" class="mc-tag__input svelte-1myzar6"/> <span class="mc-tag__label svelte-1myzar6"> </span></label>');const A={hash:"svelte-1myzar6",code:`/**
2
2
  * Do not edit directly, this file was auto-generated.
3
- */.mc-tag.svelte-1myzar6 {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-1myzar6 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-1myzar6 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-1myzar6, .mc-tag.svelte-1myzar6:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-1myzar6 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-1myzar6:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-1myzar6: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-tag-contextualised.svelte-1myzar6 {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-1myzar6:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-1myzar6: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-tag-contextualised.mc-tag--s.svelte-1myzar6 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-1myzar6 {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-1myzar6 {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-1myzar6:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-1myzar6: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-tag-removable__icon.svelte-1myzar6 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-1myzar6 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-1myzar6 {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-1myzar6 {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-1myzar6:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):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-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-1myzar6 .mc-tag__input:where(.svelte-1myzar6) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-selectable.svelte-1myzar6 .mc-tag__label:where(.svelte-1myzar6) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-1myzar6 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-1myzar6 {padding-inline-start:0.75rem;}`};function F(l,a){y(a,!0),k(l,A);let s=t(a,"id",7),n=t(a,"name",7),m=t(a,"label",7),i=t(a,"checked",15,!1),g=t(a,"disabled",7,!1),d=t(a,"size",7,"m"),h=C(a,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","size"]);var p={get id(){return s()},set id(e){s(e),o()},get name(){return n()},set name(e){n(e),o()},get label(){return m()},set label(e){m(e),o()},get checked(){return i()},set checked(e=!1){i(e),o()},get disabled(){return g()},set disabled(e=!1){g(e),o()},get size(){return d()},set size(e="m"){d(e),o()}},c=q();H(c,()=>({class:`mc-tag mc-tag-selectable ${d()!=="m"?`mc-tag--${d()}`:""}`,id:s(),...h}),void 0,void 0,"svelte-1myzar6");var r=f(c);S(r),r.__change=[T,i];var v=B(r,2),z=f(v,!0);return b(v),b(c),E(()=>{u(r,"id",s()),u(r,"name",n()),j(r,i()),r.disabled=g(),D(z,m())}),M(l,c),P(p)}x(["change"]);customElements.define("mc-tag-selectable",w(F,{id:{},name:{},label:{},checked:{},disabled:{},size:{}},[],[],!0));
3
+ */.mc-tag.svelte-1myzar6 {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-1myzar6 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-1myzar6 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-1myzar6, .mc-tag.svelte-1myzar6:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-1myzar6 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-1myzar6:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-1myzar6: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-tag-contextualised.svelte-1myzar6 {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-1myzar6:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-1myzar6: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-tag-contextualised.mc-tag--s.svelte-1myzar6 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-1myzar6 {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-1myzar6 {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-1myzar6:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-1myzar6: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-tag-removable__icon.svelte-1myzar6 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-1myzar6 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-1myzar6 {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-1myzar6 {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-1myzar6:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):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-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-1myzar6 .mc-tag__input:where(.svelte-1myzar6) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-selectable.svelte-1myzar6 .mc-tag__label:where(.svelte-1myzar6) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-1myzar6 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-1myzar6 {padding-inline-start:0.75rem;}`};function F(l,a){y(a,!0),k(l,A);let s=t(a,"id",7),n=t(a,"name",7),m=t(a,"label",7),i=t(a,"checked",15,!1),g=t(a,"disabled",7,!1),d=t(a,"size",7,"m"),h=B(a,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","size"]);var p={get id(){return s()},set id(e){s(e),o()},get name(){return n()},set name(e){n(e),o()},get label(){return m()},set label(e){m(e),o()},get checked(){return i()},set checked(e=!1){i(e),o()},get disabled(){return g()},set disabled(e=!1){g(e),o()},get size(){return d()},set size(e="m"){d(e),o()}},c=q();S(c,()=>({class:`mc-tag mc-tag-selectable ${d()!=="m"?`mc-tag--${d()}`:""}`,id:s(),...h}),void 0,void 0,"svelte-1myzar6");var r=f(c);j(r),r.__change=[T,i];var v=C(r,2),z=f(v,!0);return b(v),b(c),E(()=>{u(r,"id",s()),u(r,"name",n()),D(r,i()),r.disabled=g(),H(z,m())}),M(l,c),P(p)}x(["change"]);customElements.define("mc-tag-selectable",w(F,{id:{},name:{},label:{},checked:{},disabled:{},size:{}},[],[],!0));
4
4
  //# sourceMappingURL=TagSelectable.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/Tags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAoBrD,IAAI;AAlBT,wBAkBU;AAYV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}
1
+ {"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/Tags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA2BrD,IAAI;AAzBT,wBAyBU;AAYV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}
@@ -1,6 +1,12 @@
1
1
  export default {
2
2
  title: 'Indicators/Tag/Informative',
3
- tags: ['autodocs', 'beta'],
3
+ parameters: {
4
+ docs: {
5
+ description: {
6
+ component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
7
+ },
8
+ },
9
+ },
4
10
  argTypes: {
5
11
  label: {
6
12
  control: 'text',
@@ -1 +1 @@
1
- {"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AAtBT,wBAsBU;AAiBV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}
1
+ {"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAgCrD,IAAI;AA7BT,wBA6BU;AAiBV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}
@@ -1,7 +1,13 @@
1
1
  import { expect, waitFor } from 'storybook/test';
2
2
  export default {
3
3
  title: 'Indicators/Tag/Contextualised',
4
- tags: ['autodocs', 'beta'],
4
+ parameters: {
5
+ docs: {
6
+ description: {
7
+ component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
8
+ },
9
+ },
10
+ },
5
11
  argTypes: {
6
12
  label: {
7
13
  control: 'text',
@@ -1 +1 @@
1
- {"version":3,"file":"TagsInteractive.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsInteractive.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAeV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}
1
+ {"version":3,"file":"TagsInteractive.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsInteractive.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAeV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}