@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.
- package/README.md +36 -68
- package/dist/Cross20.js +1 -1
- package/dist/Cross20.js.map +1 -1
- package/dist/Cross24.js +1 -1
- package/dist/CrossCircleFilled24.js +1 -1
- package/dist/attributes.js +1 -1
- package/dist/attributes.js.map +1 -1
- package/dist/bundle.d.ts +24 -23
- package/dist/bundle.d.ts.map +1 -1
- package/dist/bundle.js +24 -23
- package/dist/components/avatar/Avatar.js +2 -2
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/Avatar.spec.js +17 -0
- package/dist/components/avatar/Avatar.stories.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.stories.js +3 -29
- package/dist/components/avatar/Avatar.svelte +2 -0
- package/dist/components/avatar/Avatar.svelte.d.ts +2 -0
- package/dist/components/avatar/Avatar.svelte.d.ts.map +1 -1
- package/dist/components/avatar/README.md +16 -0
- package/dist/components/breadcrumb/Breadcrumb.js +2 -2
- package/dist/components/breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.spec.js +42 -0
- package/dist/components/breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.stories.js +6 -35
- package/dist/components/breadcrumb/Breadcrumb.svelte +11 -16
- package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
- package/dist/components/breadcrumb/README.md +11 -0
- package/dist/components/button/Button.js +2 -2
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/Button.spec.js +74 -0
- package/dist/components/button/Button.stories.d.ts +9 -13
- package/dist/components/button/Button.stories.d.ts.map +1 -1
- package/dist/components/button/Button.stories.js +46 -146
- package/dist/components/button/Button.svelte +70 -53
- package/dist/components/button/Button.svelte.d.ts +36 -8
- package/dist/components/button/Button.svelte.d.ts.map +1 -1
- package/dist/components/button/README.md +26 -0
- package/dist/components/callout/Callout.js +1 -1
- package/dist/components/callout/Callout.js.map +1 -1
- package/dist/components/callout/Callout.spec.js +33 -0
- package/dist/components/callout/Callout.stories.d.ts.map +1 -1
- package/dist/components/callout/Callout.stories.js +2 -55
- package/dist/components/callout/Callout.svelte +4 -0
- package/dist/components/callout/Callout.svelte.d.ts +4 -0
- package/dist/components/callout/Callout.svelte.d.ts.map +1 -1
- package/dist/components/callout/README.md +20 -0
- package/dist/components/checkbox/Checkbox.js +3 -3
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/checkbox/Checkbox.spec.js +70 -0
- package/dist/components/checkbox/Checkbox.stories.d.ts +11 -16
- package/dist/components/checkbox/Checkbox.stories.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.stories.js +67 -124
- package/dist/components/checkbox/Checkbox.svelte +42 -22
- package/dist/components/checkbox/Checkbox.svelte.d.ts +31 -6
- package/dist/components/checkbox/Checkbox.svelte.d.ts.map +1 -1
- package/dist/components/checkbox/README.md +17 -0
- package/dist/components/checkboxgroup/CheckboxGroup.js +3 -3
- package/dist/components/checkboxgroup/CheckboxGroup.js.map +1 -1
- package/dist/components/checkboxgroup/CheckboxGroup.spec.js +113 -0
- package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts +5 -13
- package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts.map +1 -1
- package/dist/components/checkboxgroup/CheckboxGroup.stories.js +56 -140
- package/dist/components/checkboxgroup/CheckboxGroup.svelte +56 -45
- package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts +30 -6
- package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts.map +1 -1
- package/dist/components/checkboxgroup/README.md +14 -0
- package/dist/components/circularprogressbar/CircularProgressbar.js +2 -2
- package/dist/components/circularprogressbar/CircularProgressbar.js.map +1 -1
- package/dist/components/circularprogressbar/CircularProgressbar.spec.js +74 -0
- package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts +6 -6
- package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts.map +1 -1
- package/dist/components/circularprogressbar/CircularProgressbar.stories.js +29 -68
- package/dist/components/circularprogressbar/CircularProgressbar.svelte +25 -6
- package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts +18 -0
- package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts.map +1 -1
- package/dist/components/circularprogressbar/README.md +14 -0
- package/dist/components/datepicker/Datepicker.js +3 -3
- package/dist/components/datepicker/Datepicker.js.map +1 -1
- package/dist/components/datepicker/Datepicker.spec.js +95 -0
- package/dist/components/datepicker/Datepicker.stories.d.ts +7 -6
- package/dist/components/datepicker/Datepicker.stories.d.ts.map +1 -1
- package/dist/components/datepicker/Datepicker.stories.js +58 -75
- package/dist/components/datepicker/Datepicker.svelte +48 -25
- package/dist/components/datepicker/Datepicker.svelte.d.ts +30 -1
- package/dist/components/datepicker/Datepicker.svelte.d.ts.map +1 -1
- package/dist/components/datepicker/README.md +18 -0
- package/dist/components/drawer/Drawer.js +2 -2
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/drawer/Drawer.spec.js +101 -0
- package/dist/components/drawer/Drawer.stories.d.ts +29 -8
- package/dist/components/drawer/Drawer.stories.d.ts.map +1 -1
- package/dist/components/drawer/Drawer.stories.js +86 -87
- package/dist/components/drawer/Drawer.svelte +61 -38
- package/dist/components/drawer/Drawer.svelte.d.ts +26 -3
- package/dist/components/drawer/Drawer.svelte.d.ts.map +1 -1
- package/dist/components/drawer/README.md +29 -0
- package/dist/components/field/Field.js +2 -2
- package/dist/components/field/Field.js.map +1 -1
- package/dist/components/field/Field.spec.js +51 -0
- package/dist/components/field/Field.stories.d.ts +9 -15
- package/dist/components/field/Field.stories.d.ts.map +1 -1
- package/dist/components/field/Field.stories.js +86 -142
- package/dist/components/field/Field.svelte +48 -12
- package/dist/components/field/Field.svelte.d.ts +38 -7
- package/dist/components/field/Field.svelte.d.ts.map +1 -1
- package/dist/components/field/README.md +24 -0
- package/dist/components/flag/Flag.js +2 -2
- package/dist/components/flag/Flag.js.map +1 -1
- package/dist/components/flag/Flag.spec.js +30 -0
- package/dist/components/flag/Flag.stories.d.ts +8 -18
- package/dist/components/flag/Flag.stories.d.ts.map +1 -1
- package/dist/components/flag/Flag.stories.js +28 -106
- package/dist/components/flag/Flag.svelte +11 -9
- package/dist/components/flag/Flag.svelte.d.ts +10 -28
- package/dist/components/flag/Flag.svelte.d.ts.map +1 -1
- package/dist/components/flag/README.md +11 -0
- package/dist/components/iconbutton/IconButton.js +2 -2
- package/dist/components/iconbutton/IconButton.js.map +1 -1
- package/dist/components/iconbutton/IconButton.stories.d.ts +11 -11
- package/dist/components/iconbutton/IconButton.stories.d.ts.map +1 -1
- package/dist/components/iconbutton/IconButton.stories.js +51 -67
- package/dist/components/iconbutton/IconButton.svelte +41 -37
- package/dist/components/iconbutton/IconButton.svelte.d.ts +28 -7
- package/dist/components/iconbutton/IconButton.svelte.d.ts.map +1 -1
- package/dist/components/iconbutton/README.md +21 -0
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js +2 -2
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js.map +1 -1
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.spec.js +28 -0
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts +5 -7
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts.map +1 -1
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.js +18 -49
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte +15 -5
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts +10 -1
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts.map +1 -1
- package/dist/components/linearprogressbarbuffer/README.md +11 -0
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js +2 -2
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map +1 -1
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.spec.js +26 -0
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts +4 -5
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts.map +1 -1
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.js +15 -33
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte +6 -0
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts +6 -0
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts.map +1 -1
- package/dist/components/linearprogressbarpercentage/README.md +10 -0
- package/dist/components/link/Link.js +2 -2
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/link/Link.spec.js +51 -0
- package/dist/components/link/Link.stories.d.ts +12 -12
- package/dist/components/link/Link.stories.d.ts.map +1 -1
- package/dist/components/link/Link.stories.js +61 -74
- package/dist/components/link/Link.svelte +45 -40
- package/dist/components/link/Link.svelte.d.ts +29 -8
- package/dist/components/link/Link.svelte.d.ts.map +1 -1
- package/dist/components/link/README.md +23 -0
- package/dist/components/loader/Loader.js +2 -2
- package/dist/components/loader/Loader.js.map +1 -1
- package/dist/components/loader/Loader.spec.js +54 -0
- package/dist/components/loader/Loader.stories.d.ts +8 -10
- package/dist/components/loader/Loader.stories.d.ts.map +1 -1
- package/dist/components/loader/Loader.stories.js +27 -43
- package/dist/components/loader/Loader.svelte +31 -31
- package/dist/components/loader/Loader.svelte.d.ts +14 -3
- package/dist/components/loader/Loader.svelte.d.ts.map +1 -1
- package/dist/components/loader/README.md +12 -0
- package/dist/components/loadingoverlay/LoadingOverlay.js +4 -0
- package/dist/components/loadingoverlay/LoadingOverlay.js.map +1 -0
- package/dist/components/loadingoverlay/LoadingOverlay.spec.js +38 -0
- package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts +7 -0
- package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts.map +1 -0
- package/dist/components/loadingoverlay/LoadingOverlay.stories.js +39 -0
- package/dist/components/loadingoverlay/LoadingOverlay.svelte +50 -0
- package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts +17 -0
- package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts.map +1 -0
- package/dist/components/loadingoverlay/README.md +11 -0
- package/dist/components/modal/Modal.js +2 -2
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/Modal.spec.js +50 -0
- package/dist/components/modal/Modal.stories.d.ts +36 -9
- package/dist/components/modal/Modal.stories.d.ts.map +1 -1
- package/dist/components/modal/Modal.stories.js +54 -83
- package/dist/components/modal/Modal.svelte +42 -41
- package/dist/components/modal/Modal.svelte.d.ts +22 -5
- package/dist/components/modal/Modal.svelte.d.ts.map +1 -1
- package/dist/components/modal/README.md +28 -0
- package/dist/components/numberbadge/NumberBadge.js +2 -2
- package/dist/components/numberbadge/NumberBadge.js.map +1 -1
- package/dist/components/numberbadge/NumberBadge.spec.js +28 -0
- package/dist/components/numberbadge/NumberBadge.stories.d.ts +9 -13
- package/dist/components/numberbadge/NumberBadge.stories.d.ts.map +1 -1
- package/dist/components/numberbadge/NumberBadge.stories.js +28 -56
- package/dist/components/numberbadge/NumberBadge.svelte +24 -20
- package/dist/components/numberbadge/NumberBadge.svelte.d.ts +15 -4
- package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map +1 -1
- package/dist/components/numberbadge/README.md +12 -0
- package/dist/components/overlay/Overlay.js +2 -2
- package/dist/components/overlay/Overlay.js.map +1 -1
- package/dist/components/overlay/Overlay.spec.js +29 -0
- package/dist/components/overlay/Overlay.stories.d.ts +5 -7
- package/dist/components/overlay/Overlay.stories.d.ts.map +1 -1
- package/dist/components/overlay/Overlay.stories.js +32 -40
- package/dist/components/overlay/Overlay.svelte +14 -4
- package/dist/components/overlay/Overlay.svelte.d.ts +11 -0
- package/dist/components/overlay/Overlay.svelte.d.ts.map +1 -1
- package/dist/components/overlay/README.md +17 -0
- package/dist/components/pagination/Pagination.js +6 -6
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/Pagination.spec.js +65 -0
- package/dist/components/pagination/Pagination.stories.d.ts +8 -11
- package/dist/components/pagination/Pagination.stories.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.stories.js +37 -91
- package/dist/components/pagination/Pagination.svelte +33 -12
- package/dist/components/pagination/Pagination.svelte.d.ts +27 -4
- package/dist/components/pagination/Pagination.svelte.d.ts.map +1 -1
- package/dist/components/pagination/README.md +16 -0
- package/dist/components/passwordinput/PasswordInput.js +3 -4
- package/dist/components/passwordinput/PasswordInput.js.map +1 -1
- package/dist/components/passwordinput/PasswordInput.spec.js +84 -0
- package/dist/components/passwordinput/PasswordInput.stories.d.ts +10 -13
- package/dist/components/passwordinput/PasswordInput.stories.d.ts.map +1 -1
- package/dist/components/passwordinput/PasswordInput.stories.js +67 -124
- package/dist/components/passwordinput/PasswordInput.svelte +387 -24
- package/dist/components/passwordinput/PasswordInput.svelte.d.ts +34 -2
- package/dist/components/passwordinput/PasswordInput.svelte.d.ts.map +1 -1
- package/dist/components/passwordinput/README.md +19 -0
- package/dist/components/pincode/Pincode.js +2 -2
- package/dist/components/pincode/Pincode.js.map +1 -1
- package/dist/components/pincode/Pincode.spec.js +99 -0
- package/dist/components/pincode/Pincode.stories.d.ts +9 -13
- package/dist/components/pincode/Pincode.stories.d.ts.map +1 -1
- package/dist/components/pincode/Pincode.stories.js +62 -127
- package/dist/components/pincode/Pincode.svelte +56 -41
- package/dist/components/pincode/Pincode.svelte.d.ts +30 -24
- package/dist/components/pincode/Pincode.svelte.d.ts.map +1 -1
- package/dist/components/pincode/README.md +22 -0
- package/dist/components/quantityselector/QuantitySelector.js +2 -2
- package/dist/components/quantityselector/QuantitySelector.js.map +1 -1
- package/dist/components/quantityselector/QuantitySelector.spec.js +104 -0
- package/dist/components/quantityselector/QuantitySelector.stories.d.ts +11 -15
- package/dist/components/quantityselector/QuantitySelector.stories.d.ts.map +1 -1
- package/dist/components/quantityselector/QuantitySelector.stories.js +77 -145
- package/dist/components/quantityselector/QuantitySelector.svelte +100 -77
- package/dist/components/quantityselector/QuantitySelector.svelte.d.ts +49 -17
- package/dist/components/quantityselector/QuantitySelector.svelte.d.ts.map +1 -1
- package/dist/components/quantityselector/README.md +21 -0
- package/dist/components/radio/README.md +15 -0
- package/dist/components/radio/Radio.js +2 -2
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/radio/Radio.spec.js +60 -0
- package/dist/components/radio/Radio.stories.d.ts +9 -13
- package/dist/components/radio/Radio.stories.d.ts.map +1 -1
- package/dist/components/radio/Radio.stories.js +54 -70
- package/dist/components/radio/Radio.svelte +42 -20
- package/dist/components/radio/Radio.svelte.d.ts +27 -5
- package/dist/components/radio/Radio.svelte.d.ts.map +1 -1
- package/dist/components/radiogroup/README.md +14 -0
- package/dist/components/radiogroup/RadioGroup.js +3 -3
- package/dist/components/radiogroup/RadioGroup.js.map +1 -1
- package/dist/components/radiogroup/RadioGroup.spec.js +65 -0
- package/dist/components/radiogroup/RadioGroup.stories.d.ts +5 -12
- package/dist/components/radiogroup/RadioGroup.stories.d.ts.map +1 -1
- package/dist/components/radiogroup/RadioGroup.stories.js +56 -151
- package/dist/components/radiogroup/RadioGroup.svelte +50 -43
- package/dist/components/radiogroup/RadioGroup.svelte.d.ts +28 -9
- package/dist/components/radiogroup/RadioGroup.svelte.d.ts.map +1 -1
- package/dist/components/select/README.md +18 -0
- package/dist/components/select/Select.js +2 -2
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select/Select.spec.js +76 -0
- package/dist/components/select/Select.stories.d.ts +10 -14
- package/dist/components/select/Select.stories.d.ts.map +1 -1
- package/dist/components/select/Select.stories.js +87 -92
- package/dist/components/select/Select.svelte +57 -44
- package/dist/components/select/Select.svelte.d.ts +41 -10
- package/dist/components/select/Select.svelte.d.ts.map +1 -1
- package/dist/components/statusbadge/README.md +11 -0
- package/dist/components/statusbadge/StatusBadge.js +2 -2
- package/dist/components/statusbadge/StatusBadge.js.map +1 -1
- package/dist/components/statusbadge/StatusBadge.spec.js +31 -0
- package/dist/components/statusbadge/StatusBadge.stories.d.ts +9 -12
- package/dist/components/statusbadge/StatusBadge.stories.d.ts.map +1 -1
- package/dist/components/statusbadge/StatusBadge.stories.js +21 -44
- package/dist/components/statusbadge/StatusBadge.svelte +14 -6
- package/dist/components/statusbadge/StatusBadge.svelte.d.ts +13 -28
- package/dist/components/statusbadge/StatusBadge.svelte.d.ts.map +1 -1
- package/dist/components/statusdot/README.md +11 -0
- package/dist/components/statusdot/StatusDot.js +2 -2
- package/dist/components/statusdot/StatusDot.js.map +1 -1
- package/dist/components/statusdot/StatusDot.spec.js +42 -0
- package/dist/components/statusdot/StatusDot.stories.d.ts.map +1 -1
- package/dist/components/statusdot/StatusDot.stories.js +9 -37
- package/dist/components/statusdot/StatusDot.svelte +9 -7
- package/dist/components/statusdot/StatusDot.svelte.d.ts +2 -2
- package/dist/components/statusdot/StatusDot.svelte.d.ts.map +1 -1
- package/dist/components/statusnotification/README.md +25 -0
- package/dist/components/statusnotification/StatusNotification.js +3 -3
- package/dist/components/statusnotification/StatusNotification.js.map +1 -1
- package/dist/components/statusnotification/StatusNotification.spec.js +54 -0
- package/dist/components/statusnotification/StatusNotification.stories.d.ts +16 -14
- package/dist/components/statusnotification/StatusNotification.stories.d.ts.map +1 -1
- package/dist/components/statusnotification/StatusNotification.stories.js +53 -86
- package/dist/components/statusnotification/StatusNotification.svelte +49 -51
- package/dist/components/statusnotification/StatusNotification.svelte.d.ts +21 -18
- package/dist/components/statusnotification/StatusNotification.svelte.d.ts.map +1 -1
- package/dist/components/tab/README.md +20 -0
- package/dist/components/tab/Tab.js +4 -0
- package/dist/components/tab/Tab.js.map +1 -0
- package/dist/components/tab/Tab.spec.js +58 -0
- package/dist/components/{tabs → tab}/Tab.svelte +46 -26
- package/dist/components/{tabs → tab}/Tab.svelte.d.ts +20 -3
- package/dist/components/tab/Tab.svelte.d.ts.map +1 -0
- package/dist/components/tabs/README.md +18 -0
- package/dist/components/tabs/Tabs.js +2 -2
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/Tabs.spec.js +51 -0
- package/dist/components/tabs/Tabs.stories.d.ts +9 -6
- package/dist/components/tabs/Tabs.stories.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.stories.js +59 -115
- package/dist/components/tabs/Tabs.svelte +27 -7
- package/dist/components/tabs/Tabs.svelte.d.ts +21 -7
- package/dist/components/tabs/Tabs.svelte.d.ts.map +1 -1
- package/dist/components/tags/README.md +9 -0
- package/dist/components/tags/Tag.js +1 -1
- package/dist/components/tags/TagContextualised.js +2 -2
- package/dist/components/tags/TagInteractive.js +1 -1
- package/dist/components/tags/TagRemovable.js +2 -2
- package/dist/components/tags/TagSelectable.js +2 -2
- package/dist/components/tags/Tags.stories.d.ts.map +1 -1
- package/dist/components/tags/Tags.stories.js +7 -1
- package/dist/components/tags/TagsContextualised.stories.d.ts.map +1 -1
- package/dist/components/tags/TagsContextualised.stories.js +7 -1
- package/dist/components/tags/TagsInteractive.stories.d.ts.map +1 -1
- package/dist/components/tags/TagsInteractive.stories.js +7 -1
- package/dist/components/tags/TagsRemovable.stories.d.ts.map +1 -1
- package/dist/components/tags/TagsRemovable.stories.js +7 -1
- package/dist/components/tags/TagsSelectable.stories.d.ts.map +1 -1
- package/dist/components/tags/TagsSelectable.stories.js +7 -1
- package/dist/components/textarea/README.md +19 -0
- package/dist/components/textarea/Textarea.js +2 -5
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/textarea/Textarea.spec.js +67 -0
- package/dist/components/textarea/Textarea.stories.d.ts +9 -13
- package/dist/components/textarea/Textarea.stories.d.ts.map +1 -1
- package/dist/components/textarea/Textarea.stories.js +61 -92
- package/dist/components/textarea/Textarea.svelte +53 -97
- package/dist/components/textarea/Textarea.svelte.d.ts +43 -13
- package/dist/components/textarea/Textarea.svelte.d.ts.map +1 -1
- package/dist/components/textinput/README.md +26 -0
- package/dist/components/textinput/Textinput.js +2 -2
- package/dist/components/textinput/Textinput.js.map +1 -1
- package/dist/components/textinput/Textinput.spec.js +89 -0
- package/dist/components/textinput/Textinput.stories.d.ts +11 -12
- package/dist/components/textinput/Textinput.stories.d.ts.map +1 -1
- package/dist/components/textinput/Textinput.stories.js +78 -137
- package/dist/components/textinput/Textinput.svelte +70 -112
- package/dist/components/textinput/Textinput.svelte.d.ts +46 -22
- package/dist/components/textinput/Textinput.svelte.d.ts.map +1 -1
- package/dist/components/toaster/README.md +28 -0
- package/dist/components/toaster/Toaster.js +2 -2
- package/dist/components/toaster/Toaster.js.map +1 -1
- package/dist/components/toaster/Toaster.spec.js +100 -0
- package/dist/components/toaster/Toaster.stories.d.ts.map +1 -1
- package/dist/components/toaster/Toaster.stories.js +5 -73
- package/dist/components/toaster/Toaster.svelte +17 -7
- package/dist/components/toaster/Toaster.svelte.d.ts +3 -0
- package/dist/components/toaster/Toaster.svelte.d.ts.map +1 -1
- package/dist/components/toggle/README.md +15 -0
- package/dist/components/toggle/Toggle.js +2 -2
- package/dist/components/toggle/Toggle.js.map +1 -1
- package/dist/components/toggle/Toggle.spec.js +69 -0
- package/dist/components/toggle/Toggle.stories.d.ts +9 -14
- package/dist/components/toggle/Toggle.stories.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.stories.js +55 -64
- package/dist/components/toggle/Toggle.svelte +38 -24
- package/dist/components/toggle/Toggle.svelte.d.ts +26 -7
- package/dist/components/toggle/Toggle.svelte.d.ts.map +1 -1
- package/dist/components/togglegroup/README.md +13 -0
- package/dist/components/togglegroup/ToggleGroup.js +3 -3
- package/dist/components/togglegroup/ToggleGroup.js.map +1 -1
- package/dist/components/togglegroup/ToggleGroup.spec.js +50 -0
- package/dist/components/togglegroup/ToggleGroup.stories.d.ts +5 -13
- package/dist/components/togglegroup/ToggleGroup.stories.d.ts.map +1 -1
- package/dist/components/togglegroup/ToggleGroup.stories.js +56 -104
- package/dist/components/togglegroup/ToggleGroup.svelte +55 -58
- package/dist/components/togglegroup/ToggleGroup.svelte.d.ts +25 -14
- package/dist/components/togglegroup/ToggleGroup.svelte.d.ts.map +1 -1
- package/dist/components/tooltip/README.md +19 -0
- package/dist/components/tooltip/Tooltip.js +2 -2
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/tooltip/Tooltip.spec.js +38 -0
- package/dist/components/tooltip/Tooltip.stories.d.ts +6 -7
- package/dist/components/tooltip/Tooltip.stories.d.ts.map +1 -1
- package/dist/components/tooltip/Tooltip.stories.js +45 -59
- package/dist/components/tooltip/Tooltip.svelte +23 -14
- package/dist/components/tooltip/Tooltip.svelte.d.ts +17 -0
- package/dist/components/tooltip/Tooltip.svelte.d.ts.map +1 -1
- package/dist/custom-element.js +3 -3
- package/dist/custom-element.js.map +1 -1
- package/dist/documentation/Contributing.mdx +1 -1
- package/dist/documentation/Introduction.mdx +45 -11
- package/dist/documentation/SupportAndOnboarding.mdx +2 -2
- package/dist/each.js +1 -1
- package/dist/each.js.map +1 -1
- package/dist/if.js +1 -1
- package/dist/if.js.map +1 -1
- package/dist/input.js +1 -1
- package/dist/input.js.map +1 -1
- package/dist/legacy.js +1 -1
- package/dist/main.d.ts +24 -23
- package/dist/main.d.ts.map +1 -1
- package/dist/main.js +24 -23
- package/dist/slot.js +1 -1
- package/dist/slot.js.map +1 -1
- package/dist/this.js +2 -0
- package/dist/this.js.map +1 -0
- package/package.json +11 -3
- package/dist/components/button/button.types.d.ts +0 -13
- package/dist/components/button/button.types.d.ts.map +0 -1
- package/dist/components/button/button.types.js +0 -1
- package/dist/components/checkboxgroup/checkboxgroup.types.d.ts +0 -9
- package/dist/components/checkboxgroup/checkboxgroup.types.d.ts.map +0 -1
- package/dist/components/checkboxgroup/checkboxgroup.types.js +0 -1
- package/dist/components/link/link.types.d.ts +0 -4
- package/dist/components/link/link.types.d.ts.map +0 -1
- package/dist/components/link/link.types.js +0 -1
- package/dist/components/loader/loader.types.d.ts +0 -3
- package/dist/components/loader/loader.types.d.ts.map +0 -1
- package/dist/components/loader/loader.types.js +0 -1
- package/dist/components/numberbadge/NumberBadge.types.d.ts +0 -3
- package/dist/components/numberbadge/NumberBadge.types.d.ts.map +0 -1
- package/dist/components/numberbadge/NumberBadge.types.js +0 -1
- package/dist/components/overlayloader/OverlayLoader.js +0 -27
- package/dist/components/overlayloader/OverlayLoader.js.map +0 -1
- package/dist/components/overlayloader/OverlayLoader.stories.d.ts +0 -8
- package/dist/components/overlayloader/OverlayLoader.stories.d.ts.map +0 -1
- package/dist/components/overlayloader/OverlayLoader.stories.js +0 -50
- package/dist/components/overlayloader/OverlayLoader.svelte +0 -160
- package/dist/components/overlayloader/OverlayLoader.svelte.d.ts +0 -9
- package/dist/components/overlayloader/OverlayLoader.svelte.d.ts.map +0 -1
- package/dist/components/quantityselector/quantitySelector.types.d.ts +0 -2
- package/dist/components/quantityselector/quantitySelector.types.d.ts.map +0 -1
- package/dist/components/quantityselector/quantitySelector.types.js +0 -1
- package/dist/components/radiogroup/radioGroup.types.d.ts +0 -9
- package/dist/components/radiogroup/radioGroup.types.d.ts.map +0 -1
- package/dist/components/radiogroup/radioGroup.types.js +0 -1
- package/dist/components/select/select.types.d.ts +0 -9
- package/dist/components/select/select.types.d.ts.map +0 -1
- package/dist/components/select/select.types.js +0 -1
- package/dist/components/statusbadge/StatusBadge.types.d.ts +0 -2
- package/dist/components/statusbadge/StatusBadge.types.d.ts.map +0 -1
- package/dist/components/statusbadge/StatusBadge.types.js +0 -1
- package/dist/components/statusdot/StatusDot.types.d.ts +0 -3
- package/dist/components/statusdot/StatusDot.types.d.ts.map +0 -1
- package/dist/components/statusdot/StatusDot.types.js +0 -1
- package/dist/components/tabs/Tab.js +0 -4
- package/dist/components/tabs/Tab.js.map +0 -1
- package/dist/components/tabs/Tab.svelte.d.ts.map +0 -1
- package/dist/components/textinput/textinput.types.d.ts +0 -3
- package/dist/components/textinput/textinput.types.d.ts.map +0 -1
- package/dist/components/textinput/textinput.types.js +0 -1
- package/dist/components/toggle/toggle.types.d.ts +0 -2
- package/dist/components/toggle/toggle.types.d.ts.map +0 -1
- package/dist/components/toggle/toggle.types.js +0 -1
- package/dist/index-client.js +0 -2
- package/dist/index-client.js.map +0 -1
- package/dist/snippet.js +0 -2
- 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: '
|
|
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/
|
|
2
|
-
declare const
|
|
3
|
-
export default
|
|
4
|
-
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const
|
|
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,
|
|
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
|
|
2
|
-
import {
|
|
3
|
-
|
|
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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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
|
-
|
|
73
|
-
|
|
74
|
-
Centered.args = {
|
|
75
|
-
activeIndex: 1,
|
|
76
|
-
centered: true,
|
|
51
|
+
export const Centered = {
|
|
52
|
+
args: { centered: true },
|
|
77
53
|
};
|
|
78
|
-
const
|
|
79
|
-
|
|
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
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
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: '
|
|
1
|
+
<svelte:options customElement={{ tag: 'm-tabs' }} />
|
|
2
2
|
|
|
3
3
|
<script lang="ts">
|
|
4
|
-
|
|
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
|
|
24
|
+
let { description, divider = true, centered }: Props = $props();
|
|
7
25
|
</script>
|
|
8
26
|
|
|
9
|
-
<nav class=
|
|
10
|
-
<ul class="mc-tabs__list" role="tablist" aria-label=
|
|
11
|
-
<slot name="tab"
|
|
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
|
-
|
|
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":"
|
|
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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{c as m,p as f,a as b,b as c,f as h,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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),
|
|
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{
|
|
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=
|
|
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;
|
|
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
|
-
|
|
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;
|
|
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
|
-
|
|
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;
|
|
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"}
|