@mozaic-ds/web-components 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -104
- 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/Less24.js +2 -0
- package/dist/Less24.js.map +1 -0
- package/dist/attributes.js +1 -1
- package/dist/attributes.js.map +1 -1
- package/dist/bundle.d.ts +8 -5
- package/dist/bundle.d.ts.map +1 -1
- package/dist/bundle.js +8 -5
- package/dist/components/avatar/Avatar.js +2 -2
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/Avatar.stories.d.ts +2 -1
- package/dist/components/avatar/Avatar.stories.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.stories.js +2 -1
- package/dist/components/avatar/Avatar.svelte +3 -3
- package/dist/components/breadcrumb/Breadcrumb.js +2 -2
- package/dist/components/breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.stories.d.ts +1 -0
- package/dist/components/breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.stories.js +1 -0
- package/dist/components/breadcrumb/Breadcrumb.svelte +3 -3
- package/dist/components/button/Button.js +3 -3
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/Button.stories.d.ts +2 -0
- package/dist/components/button/Button.stories.d.ts.map +1 -1
- package/dist/components/button/Button.stories.js +2 -0
- package/dist/components/button/Button.svelte +2 -3
- package/dist/components/button/Button.svelte.d.ts +0 -1
- package/dist/components/button/Button.svelte.d.ts.map +1 -1
- package/dist/components/callout/Callout.js +2 -2
- package/dist/components/callout/Callout.js.map +1 -1
- package/dist/components/callout/Callout.stories.d.ts +5 -2
- package/dist/components/callout/Callout.stories.d.ts.map +1 -1
- package/dist/components/callout/Callout.stories.js +5 -2
- package/dist/components/callout/Callout.svelte +3 -3
- package/dist/components/carousel/Carousel.js +4 -0
- package/dist/components/carousel/Carousel.js.map +1 -0
- package/dist/components/carousel/Carousel.spec.js +49 -0
- package/dist/components/carousel/Carousel.stories.d.ts +9 -0
- package/dist/components/carousel/Carousel.stories.d.ts.map +1 -0
- package/dist/components/carousel/Carousel.stories.js +72 -0
- package/dist/components/carousel/Carousel.svelte +187 -0
- package/dist/components/carousel/Carousel.svelte.d.ts +46 -0
- package/dist/components/carousel/Carousel.svelte.d.ts.map +1 -0
- package/dist/components/carousel/README.md +18 -0
- package/dist/components/checkbox/Checkbox.js +4 -4
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/checkbox/Checkbox.stories.d.ts +1 -0
- package/dist/components/checkbox/Checkbox.stories.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.stories.js +1 -0
- package/dist/components/checkbox/Checkbox.svelte +4 -2
- package/dist/components/checkbox/Checkbox.svelte.d.ts.map +1 -1
- package/dist/components/checkboxgroup/CheckboxGroup.js +4 -4
- package/dist/components/checkboxgroup/CheckboxGroup.js.map +1 -1
- package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts +1 -0
- package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts.map +1 -1
- package/dist/components/checkboxgroup/CheckboxGroup.stories.js +1 -0
- package/dist/components/checkboxgroup/CheckboxGroup.svelte +4 -4
- package/dist/components/circularprogressbar/CircularProgressbar.js +2 -2
- package/dist/components/circularprogressbar/CircularProgressbar.js.map +1 -1
- package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts +1 -0
- package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts.map +1 -1
- package/dist/components/circularprogressbar/CircularProgressbar.stories.js +3 -2
- package/dist/components/circularprogressbar/CircularProgressbar.svelte +9 -1
- package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts.map +1 -1
- package/dist/components/container/Container.js +14 -0
- package/dist/components/container/Container.js.map +1 -0
- package/dist/components/container/Container.spec.js +26 -0
- package/dist/components/container/Container.stories.d.ts +8 -0
- package/dist/components/container/Container.stories.d.ts.map +1 -0
- package/dist/components/container/Container.stories.js +24 -0
- package/dist/components/container/Container.svelte +60 -0
- package/dist/components/container/Container.svelte.d.ts +39 -0
- package/dist/components/container/Container.svelte.d.ts.map +1 -0
- package/dist/components/container/README.md +16 -0
- package/dist/components/datepicker/Datepicker.js +3 -3
- package/dist/components/datepicker/Datepicker.js.map +1 -1
- package/dist/components/datepicker/Datepicker.stories.d.ts +1 -0
- package/dist/components/datepicker/Datepicker.stories.d.ts.map +1 -1
- package/dist/components/datepicker/Datepicker.stories.js +1 -0
- package/dist/components/datepicker/Datepicker.svelte +11 -9
- package/dist/components/datepicker/Datepicker.svelte.d.ts.map +1 -1
- package/dist/components/divider/Divider.js +4 -0
- package/dist/components/divider/Divider.js.map +1 -0
- package/dist/components/divider/Divider.spec.js +50 -0
- package/dist/components/divider/Divider.stories.d.ts +10 -0
- package/dist/components/divider/Divider.stories.d.ts.map +1 -0
- package/dist/components/divider/Divider.stories.js +58 -0
- package/dist/components/divider/Divider.svelte +90 -0
- package/dist/components/divider/Divider.svelte.d.ts +47 -0
- package/dist/components/divider/Divider.svelte.d.ts.map +1 -0
- package/dist/components/divider/README.md +18 -0
- package/dist/components/drawer/Drawer.js +4 -4
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/drawer/Drawer.stories.d.ts +2 -0
- package/dist/components/drawer/Drawer.stories.d.ts.map +1 -1
- package/dist/components/drawer/Drawer.stories.js +2 -0
- package/dist/components/drawer/Drawer.svelte +16 -6
- package/dist/components/drawer/Drawer.svelte.d.ts.map +1 -1
- package/dist/components/field/Field.js +2 -2
- package/dist/components/field/Field.stories.d.ts +2 -0
- package/dist/components/field/Field.stories.d.ts.map +1 -1
- package/dist/components/field/Field.stories.js +2 -0
- package/dist/components/flag/Flag.js +2 -2
- package/dist/components/flag/Flag.js.map +1 -1
- package/dist/components/flag/Flag.stories.d.ts +1 -0
- package/dist/components/flag/Flag.stories.d.ts.map +1 -1
- package/dist/components/flag/Flag.stories.js +1 -0
- package/dist/components/flag/Flag.svelte +3 -3
- 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 +4 -2
- package/dist/components/iconbutton/IconButton.stories.d.ts.map +1 -1
- package/dist/components/iconbutton/IconButton.stories.js +4 -2
- package/dist/components/iconbutton/IconButton.svelte +2 -3
- package/dist/components/iconbutton/IconButton.svelte.d.ts +0 -1
- package/dist/components/iconbutton/IconButton.svelte.d.ts.map +1 -1
- package/dist/components/kpiitem/KpiItem.js +5 -0
- package/dist/components/kpiitem/KpiItem.js.map +1 -0
- package/dist/components/kpiitem/KpiItem.spec.js +60 -0
- package/dist/components/kpiitem/KpiItem.stories.d.ts +9 -0
- package/dist/components/kpiitem/KpiItem.stories.d.ts.map +1 -0
- package/dist/components/kpiitem/KpiItem.stories.js +57 -0
- package/dist/components/kpiitem/KpiItem.svelte +231 -0
- package/dist/components/kpiitem/KpiItem.svelte.d.ts +34 -0
- package/dist/components/kpiitem/KpiItem.svelte.d.ts.map +1 -0
- package/dist/components/kpiitem/README.md +15 -0
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js +2 -2
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js.map +1 -1
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts +1 -0
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts.map +1 -1
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.js +1 -0
- package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte +4 -3
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js +2 -2
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map +1 -1
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts +1 -0
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts.map +1 -1
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.js +1 -0
- package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte +5 -4
- package/dist/components/link/Link.js +2 -2
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/link/Link.stories.d.ts +3 -0
- package/dist/components/link/Link.stories.d.ts.map +1 -1
- package/dist/components/link/Link.stories.js +3 -0
- package/dist/components/link/Link.svelte +3 -1
- package/dist/components/link/Link.svelte.d.ts.map +1 -1
- package/dist/components/loader/Loader.js +2 -2
- package/dist/components/loader/Loader.js.map +1 -1
- package/dist/components/loader/Loader.stories.d.ts +1 -0
- package/dist/components/loader/Loader.stories.d.ts.map +1 -1
- package/dist/components/loader/Loader.stories.js +1 -0
- package/dist/components/loader/Loader.svelte +2 -1
- package/dist/components/loadingoverlay/LoadingOverlay.js +2 -2
- package/dist/components/loadingoverlay/LoadingOverlay.js.map +1 -1
- package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts +1 -0
- package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts.map +1 -1
- package/dist/components/loadingoverlay/LoadingOverlay.stories.js +1 -0
- package/dist/components/loadingoverlay/LoadingOverlay.svelte +2 -2
- package/dist/components/modal/Modal.js +4 -4
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/Modal.stories.d.ts +5 -2
- package/dist/components/modal/Modal.stories.d.ts.map +1 -1
- package/dist/components/modal/Modal.stories.js +5 -2
- package/dist/components/modal/Modal.svelte +6 -5
- package/dist/components/numberbadge/NumberBadge.js +2 -2
- package/dist/components/numberbadge/NumberBadge.js.map +1 -1
- package/dist/components/numberbadge/NumberBadge.stories.d.ts +1 -0
- package/dist/components/numberbadge/NumberBadge.stories.d.ts.map +1 -1
- package/dist/components/numberbadge/NumberBadge.stories.js +1 -0
- package/dist/components/numberbadge/NumberBadge.svelte +6 -3
- package/dist/components/overlay/Overlay.js +2 -2
- package/dist/components/overlay/Overlay.stories.d.ts +1 -0
- package/dist/components/overlay/Overlay.stories.d.ts.map +1 -1
- package/dist/components/overlay/Overlay.stories.js +1 -0
- package/dist/components/pagination/Pagination.js +6 -6
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/Pagination.stories.d.ts +1 -0
- package/dist/components/pagination/Pagination.stories.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.stories.js +1 -0
- package/dist/components/pagination/Pagination.svelte +5 -5
- package/dist/components/passwordinput/PasswordInput.js +4 -3
- package/dist/components/passwordinput/PasswordInput.js.map +1 -1
- package/dist/components/passwordinput/PasswordInput.stories.d.ts +1 -0
- package/dist/components/passwordinput/PasswordInput.stories.d.ts.map +1 -1
- package/dist/components/passwordinput/PasswordInput.stories.js +1 -0
- package/dist/components/passwordinput/PasswordInput.svelte +10 -8
- package/dist/components/passwordinput/PasswordInput.svelte.d.ts.map +1 -1
- package/dist/components/phonenumber/PhoneNumber.js +22 -0
- package/dist/components/phonenumber/PhoneNumber.js.map +1 -0
- package/dist/components/phonenumber/PhoneNumber.spec.js +103 -0
- package/dist/components/phonenumber/PhoneNumber.stories.d.ts +14 -0
- package/dist/components/phonenumber/PhoneNumber.stories.d.ts.map +1 -0
- package/dist/components/phonenumber/PhoneNumber.stories.js +116 -0
- package/dist/components/phonenumber/PhoneNumber.svelte +896 -0
- package/dist/components/phonenumber/PhoneNumber.svelte.d.ts +60 -0
- package/dist/components/phonenumber/PhoneNumber.svelte.d.ts.map +1 -0
- package/dist/components/phonenumber/README.md +27 -0
- package/dist/components/pincode/Pincode.js +2 -2
- package/dist/components/pincode/Pincode.js.map +1 -1
- package/dist/components/pincode/Pincode.stories.d.ts +1 -0
- package/dist/components/pincode/Pincode.stories.d.ts.map +1 -1
- package/dist/components/pincode/Pincode.stories.js +1 -0
- package/dist/components/pincode/Pincode.svelte +5 -5
- package/dist/components/quantityselector/QuantitySelector.js +3 -3
- package/dist/components/quantityselector/QuantitySelector.js.map +1 -1
- package/dist/components/quantityselector/QuantitySelector.stories.d.ts +1 -0
- package/dist/components/quantityselector/QuantitySelector.stories.d.ts.map +1 -1
- package/dist/components/quantityselector/QuantitySelector.stories.js +1 -0
- package/dist/components/quantityselector/QuantitySelector.svelte +11 -9
- package/dist/components/quantityselector/QuantitySelector.svelte.d.ts.map +1 -1
- package/dist/components/radio/Radio.js +2 -2
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/radio/Radio.stories.d.ts +1 -0
- package/dist/components/radio/Radio.stories.d.ts.map +1 -1
- package/dist/components/radio/Radio.stories.js +1 -0
- package/dist/components/radio/Radio.svelte +12 -3
- package/dist/components/radio/Radio.svelte.d.ts.map +1 -1
- package/dist/components/radiogroup/RadioGroup.js +2 -2
- package/dist/components/radiogroup/RadioGroup.stories.d.ts +1 -0
- package/dist/components/radiogroup/RadioGroup.stories.d.ts.map +1 -1
- package/dist/components/radiogroup/RadioGroup.stories.js +1 -0
- package/dist/components/radiogroup/RadioGroup.svelte +2 -2
- package/dist/components/segmentedcontrol/SegmentedControl.js +2 -2
- package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts +1 -0
- package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts.map +1 -1
- package/dist/components/segmentedcontrol/SegmentedControl.stories.js +1 -0
- package/dist/components/select/Select.js +3 -3
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select/Select.stories.d.ts +1 -0
- package/dist/components/select/Select.stories.d.ts.map +1 -1
- package/dist/components/select/Select.stories.js +1 -0
- package/dist/components/select/Select.svelte +7 -5
- package/dist/components/select/Select.svelte.d.ts.map +1 -1
- package/dist/components/starrating/README.md +22 -0
- package/dist/components/starrating/StarRating.js +4 -0
- package/dist/components/starrating/StarRating.js.map +1 -0
- package/dist/components/starrating/StarRating.spec.js +108 -0
- package/dist/components/starrating/StarRating.stories.d.ts +13 -0
- package/dist/components/starrating/StarRating.stories.d.ts.map +1 -0
- package/dist/components/starrating/StarRating.stories.js +82 -0
- package/dist/components/starrating/StarRating.svelte +227 -0
- package/dist/components/starrating/StarRating.svelte.d.ts +46 -0
- package/dist/components/starrating/StarRating.svelte.d.ts.map +1 -0
- package/dist/components/statusbadge/StatusBadge.js +2 -2
- package/dist/components/statusbadge/StatusBadge.js.map +1 -1
- package/dist/components/statusbadge/StatusBadge.stories.d.ts +1 -0
- package/dist/components/statusbadge/StatusBadge.stories.d.ts.map +1 -1
- package/dist/components/statusbadge/StatusBadge.stories.js +1 -0
- package/dist/components/statusbadge/StatusBadge.svelte +11 -11
- package/dist/components/statusdot/StatusDot.js +2 -2
- package/dist/components/statusdot/StatusDot.js.map +1 -1
- package/dist/components/statusdot/StatusDot.stories.d.ts +1 -0
- package/dist/components/statusdot/StatusDot.stories.d.ts.map +1 -1
- package/dist/components/statusdot/StatusDot.stories.js +1 -0
- package/dist/components/statusdot/StatusDot.svelte +7 -4
- package/dist/components/statusmessage/README.md +11 -0
- package/dist/components/statusmessage/StatusMessage.js +4 -0
- package/dist/components/statusmessage/StatusMessage.js.map +1 -0
- package/dist/components/statusmessage/StatusMessage.spec.js +47 -0
- package/dist/components/statusmessage/StatusMessage.stories.d.ts +12 -0
- package/dist/components/statusmessage/StatusMessage.stories.d.ts.map +1 -0
- package/dist/components/statusmessage/StatusMessage.stories.js +38 -0
- package/dist/components/statusmessage/StatusMessage.svelte +84 -0
- package/dist/components/statusmessage/StatusMessage.svelte.d.ts +17 -0
- package/dist/components/statusmessage/StatusMessage.svelte.d.ts.map +1 -0
- package/dist/components/statusnotification/StatusNotification.js +2 -2
- package/dist/components/statusnotification/StatusNotification.js.map +1 -1
- package/dist/components/statusnotification/StatusNotification.stories.d.ts +4 -0
- package/dist/components/statusnotification/StatusNotification.stories.d.ts.map +1 -1
- package/dist/components/statusnotification/StatusNotification.stories.js +4 -0
- package/dist/components/statusnotification/StatusNotification.svelte +14 -13
- package/dist/components/steppercompact/README.md +13 -0
- package/dist/components/steppercompact/StepperCompact.js +4 -0
- package/dist/components/steppercompact/StepperCompact.js.map +1 -0
- package/dist/components/steppercompact/StepperCompact.spec.js +119 -0
- package/dist/components/steppercompact/StepperCompact.stories.d.ts +7 -0
- package/dist/components/steppercompact/StepperCompact.stories.d.ts.map +1 -0
- package/dist/components/steppercompact/StepperCompact.stories.js +29 -0
- package/dist/components/steppercompact/StepperCompact.svelte +123 -0
- package/dist/components/steppercompact/StepperCompact.svelte.d.ts +25 -0
- package/dist/components/steppercompact/StepperCompact.svelte.d.ts.map +1 -0
- package/dist/components/tab/Tab.js +2 -2
- package/dist/components/tab/Tab.js.map +1 -1
- package/dist/components/tab/Tab.svelte +1 -2
- package/dist/components/tab/Tab.svelte.d.ts +0 -1
- package/dist/components/tab/Tab.svelte.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +2 -2
- package/dist/components/tabs/Tabs.stories.d.ts +3 -0
- package/dist/components/tabs/Tabs.stories.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.stories.js +3 -0
- package/dist/components/tabs/Tabs.svelte +1 -1
- package/dist/components/tag/README.md +30 -0
- package/dist/components/tag/Tag.js +4 -0
- package/dist/components/tag/Tag.js.map +1 -0
- package/dist/components/tag/Tag.stories.d.ts +13 -0
- package/dist/components/tag/Tag.stories.d.ts.map +1 -0
- package/dist/components/tag/Tag.stories.js +71 -0
- package/dist/components/{tags/TagRemovable.svelte → tag/Tag.svelte} +122 -26
- package/dist/components/tag/Tag.svelte.d.ts +65 -0
- package/dist/components/tag/Tag.svelte.d.ts.map +1 -0
- package/dist/components/textarea/Textarea.js +2 -2
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/textarea/Textarea.stories.d.ts +1 -0
- package/dist/components/textarea/Textarea.stories.d.ts.map +1 -1
- package/dist/components/textarea/Textarea.stories.js +1 -0
- package/dist/components/textarea/Textarea.svelte +7 -5
- package/dist/components/textarea/Textarea.svelte.d.ts.map +1 -1
- package/dist/components/textinput/Textinput.js +5 -5
- package/dist/components/textinput/Textinput.js.map +1 -1
- package/dist/components/textinput/Textinput.stories.d.ts +1 -0
- package/dist/components/textinput/Textinput.stories.d.ts.map +1 -1
- package/dist/components/textinput/Textinput.stories.js +1 -0
- package/dist/components/textinput/Textinput.svelte +8 -6
- package/dist/components/textinput/Textinput.svelte.d.ts.map +1 -1
- package/dist/components/toaster/Toaster.js +3 -3
- package/dist/components/toaster/Toaster.js.map +1 -1
- package/dist/components/toaster/Toaster.stories.d.ts +3 -0
- package/dist/components/toaster/Toaster.stories.d.ts.map +1 -1
- package/dist/components/toaster/Toaster.stories.js +3 -0
- package/dist/components/toaster/Toaster.svelte +13 -11
- package/dist/components/toaster/Toaster.svelte.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.js +2 -2
- package/dist/components/toggle/Toggle.js.map +1 -1
- package/dist/components/toggle/Toggle.stories.d.ts +1 -0
- package/dist/components/toggle/Toggle.stories.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.stories.js +1 -0
- package/dist/components/toggle/Toggle.svelte +20 -4
- package/dist/components/toggle/Toggle.svelte.d.ts.map +1 -1
- package/dist/components/togglegroup/ToggleGroup.js +2 -2
- package/dist/components/togglegroup/ToggleGroup.js.map +1 -1
- package/dist/components/togglegroup/ToggleGroup.stories.d.ts +1 -0
- package/dist/components/togglegroup/ToggleGroup.stories.d.ts.map +1 -1
- package/dist/components/togglegroup/ToggleGroup.stories.js +1 -0
- package/dist/components/togglegroup/ToggleGroup.svelte +2 -2
- package/dist/components/tooltip/Tooltip.js +3 -3
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/tooltip/Tooltip.stories.d.ts +1 -0
- package/dist/components/tooltip/Tooltip.stories.d.ts.map +1 -1
- package/dist/components/tooltip/Tooltip.stories.js +1 -0
- package/dist/components/tooltip/Tooltip.svelte +4 -3
- package/dist/custom-element-forward-events.js +1 -1
- package/dist/custom-element-forward-events.js.map +1 -1
- package/dist/custom-element.js +3 -3
- package/dist/custom-element.js.map +1 -1
- package/dist/documentation/Svelte/usingPresets.mdx +2 -3
- package/dist/documentation/WebComponents/usingPresets.mdx +2 -3
- 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 +10 -6
- package/dist/main.d.ts.map +1 -1
- package/dist/main.js +10 -6
- package/dist/slot.js +1 -1
- package/dist/slot.js.map +1 -1
- package/dist/svelte-component.js +2 -0
- package/dist/svelte-component.js.map +1 -0
- package/dist/this.js +1 -1
- package/dist/this.js.map +1 -1
- package/package.json +16 -18
- package/dist/components/tags/README.md +0 -9
- package/dist/components/tags/Tag.js +0 -4
- package/dist/components/tags/Tag.js.map +0 -1
- package/dist/components/tags/Tag.svelte +0 -218
- package/dist/components/tags/Tag.svelte.d.ts +0 -9
- package/dist/components/tags/Tag.svelte.d.ts.map +0 -1
- package/dist/components/tags/TagContextualised.js +0 -4
- package/dist/components/tags/TagContextualised.js.map +0 -1
- package/dist/components/tags/TagContextualised.svelte +0 -235
- package/dist/components/tags/TagContextualised.svelte.d.ts +0 -11
- package/dist/components/tags/TagContextualised.svelte.d.ts.map +0 -1
- package/dist/components/tags/TagInteractive.js +0 -4
- package/dist/components/tags/TagInteractive.js.map +0 -1
- package/dist/components/tags/TagInteractive.svelte +0 -223
- package/dist/components/tags/TagInteractive.svelte.d.ts +0 -10
- package/dist/components/tags/TagInteractive.svelte.d.ts.map +0 -1
- package/dist/components/tags/TagRemovable.js +0 -4
- package/dist/components/tags/TagRemovable.js.map +0 -1
- package/dist/components/tags/TagRemovable.svelte.d.ts +0 -11
- package/dist/components/tags/TagRemovable.svelte.d.ts.map +0 -1
- package/dist/components/tags/TagSelectable.js +0 -4
- package/dist/components/tags/TagSelectable.js.map +0 -1
- package/dist/components/tags/TagSelectable.svelte +0 -243
- package/dist/components/tags/TagSelectable.svelte.d.ts +0 -13
- package/dist/components/tags/TagSelectable.svelte.d.ts.map +0 -1
- package/dist/components/tags/Tags.stories.d.ts +0 -5
- package/dist/components/tags/Tags.stories.d.ts.map +0 -1
- package/dist/components/tags/Tags.stories.js +0 -41
- package/dist/components/tags/TagsContextualised.stories.d.ts +0 -5
- package/dist/components/tags/TagsContextualised.stories.d.ts.map +0 -1
- package/dist/components/tags/TagsContextualised.stories.js +0 -57
- package/dist/components/tags/TagsInteractive.stories.d.ts +0 -5
- package/dist/components/tags/TagsInteractive.stories.d.ts.map +0 -1
- package/dist/components/tags/TagsInteractive.stories.js +0 -61
- package/dist/components/tags/TagsRemovable.stories.d.ts +0 -5
- package/dist/components/tags/TagsRemovable.stories.d.ts.map +0 -1
- package/dist/components/tags/TagsRemovable.stories.js +0 -60
- package/dist/components/tags/TagsSelectable.stories.d.ts +0 -5
- package/dist/components/tags/TagsSelectable.stories.d.ts.map +0 -1
- package/dist/components/tags/TagsSelectable.stories.js +0 -76
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mozaic-ds/web-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Web component Mozaic DS implementation",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
"docs": "node generate-docs.js",
|
|
46
46
|
"lint-staged": "lint-staged",
|
|
47
47
|
"start:wc": "npx serve dist",
|
|
48
|
-
"chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
|
|
49
48
|
"release": "release-it",
|
|
50
49
|
"release:beta": "release-it --preRelease=beta --npm.tag=beta --github.preRelease",
|
|
51
50
|
"release:alpha": "release-it --preRelease=alpha --npm.tag=alpha --github.preRelease",
|
|
@@ -56,53 +55,52 @@
|
|
|
56
55
|
},
|
|
57
56
|
"dependencies": {
|
|
58
57
|
"@mozaic-ds/icons-svelte": "1.1.0",
|
|
59
|
-
"@mozaic-ds/styles": "^2.0
|
|
60
|
-
"@mozaic-ds/tokens": "^2.0
|
|
58
|
+
"@mozaic-ds/styles": "^2.5.0",
|
|
59
|
+
"@mozaic-ds/tokens": "^2.5.0",
|
|
61
60
|
"@mozaic-ds/web-fonts": "1.65.0",
|
|
62
61
|
"svelte": "^5.38.0"
|
|
63
62
|
},
|
|
64
63
|
"devDependencies": {
|
|
65
|
-
"@
|
|
66
|
-
"@commitlint/
|
|
67
|
-
"@commitlint/config-conventional": "^19.8.0",
|
|
64
|
+
"@commitlint/cli": "^20.1.0",
|
|
65
|
+
"@commitlint/config-conventional": "^20.0.0",
|
|
68
66
|
"@eslint/compat": "^1.4.0",
|
|
69
67
|
"@eslint/js": "^9.38.0",
|
|
70
|
-
"@release-it/conventional-changelog": "^
|
|
68
|
+
"@release-it/conventional-changelog": "^10.0.1",
|
|
71
69
|
"@storybook/addon-a11y": "^9.1.5",
|
|
72
70
|
"@storybook/addon-docs": "^9.1.5",
|
|
73
|
-
"@storybook/addon-links": "^9.1.5",
|
|
74
71
|
"@storybook/addon-themes": "^9.1.13",
|
|
75
72
|
"@storybook/web-components-vite": "^9.1.5",
|
|
76
73
|
"@sveltejs/kit": "^2.20.8",
|
|
77
74
|
"@sveltejs/package": "^2.5.0",
|
|
78
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
75
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
79
76
|
"@testing-library/jest-dom": "^6.9.1",
|
|
80
77
|
"@testing-library/svelte": "^5.2.8",
|
|
81
78
|
"@tsconfig/svelte": "^5.0.4",
|
|
82
|
-
"@vitest/coverage-v8": "^
|
|
83
|
-
"chromatic": "^6.3.3",
|
|
79
|
+
"@vitest/coverage-v8": "^4.0.7",
|
|
84
80
|
"eslint": "^9.38.0",
|
|
85
81
|
"eslint-config-prettier": "^10.1.8",
|
|
86
82
|
"eslint-plugin-storybook": "^9.1.13",
|
|
87
83
|
"eslint-plugin-svelte": "^3.12.5",
|
|
88
|
-
"
|
|
84
|
+
"glob": "^11.0.3",
|
|
85
|
+
"husky": "^9.1.7",
|
|
89
86
|
"jsdom": "^27.0.0",
|
|
90
|
-
"
|
|
87
|
+
"libphonenumber-js": "^1.12.29",
|
|
88
|
+
"lint-staged": "^16.2.6",
|
|
91
89
|
"mdx-mermaid": "^2.0.3",
|
|
92
90
|
"mermaid": "^11.12.0",
|
|
93
91
|
"npm-run-all": "^4.1.5",
|
|
94
92
|
"prettier": "^3.6.2",
|
|
95
93
|
"prettier-plugin-svelte": "^3.4.0",
|
|
96
|
-
"release-it": "^
|
|
97
|
-
"sass": "^1.
|
|
94
|
+
"release-it": "^19.0.5",
|
|
95
|
+
"sass": "^1.86.0",
|
|
98
96
|
"storybook": "^9.1.5",
|
|
99
97
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
100
98
|
"svelte-check": "^4.1.4",
|
|
101
99
|
"svelte-loader": "^3.2.3",
|
|
102
100
|
"typescript": "^5.5.0",
|
|
103
101
|
"typescript-eslint": "^8.46.2",
|
|
104
|
-
"vite": "^
|
|
105
|
-
"vitest": "^
|
|
102
|
+
"vite": "^7.1.12",
|
|
103
|
+
"vitest": "^4.0.7"
|
|
106
104
|
},
|
|
107
105
|
"lint-staged": {
|
|
108
106
|
"src/**/*.{js,ts,svelte}": [
|
|
@@ -1,4 +0,0 @@
|
|
|
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
|
-
* Do not edit directly, this file was auto-generated.
|
|
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
|
-
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../src/components/tags/Tag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag' }} />\n\n<script lang=\"ts\">\n interface Props {\n label: string;\n size?: 's' | 'm' | 'l';\n [key: string]: any;\n }\n\n let { label, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<span class={`mc-tag ${size !== 'm' ? `mc-tag--${size}` : ''}`} {...attrs}>\n <span class=\"mc-tag__label\">{label}</span>\n</span>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/tag';\n @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["label","$.prop","$$props","size","attrs","$.rest_props"],"mappings":";;oiMAAA,oBASQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAH,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,QAAA,MAAA,CAAA,0FAAb,IAAG,4BAGD,MAAA,WAAAC,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,MAAQC,mFACtCJ,EAAK,CAAA,CAAA,aAHpC"}
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
<svelte:options customElement={{ tag: 'mc-tag' }} />
|
|
2
|
-
|
|
3
|
-
<script lang="ts">
|
|
4
|
-
interface Props {
|
|
5
|
-
label: string;
|
|
6
|
-
size?: 's' | 'm' | 'l';
|
|
7
|
-
[key: string]: any;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
let { label, size = 'm', ...attrs }: Props = $props();
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<span class={`mc-tag ${size !== 'm' ? `mc-tag--${size}` : ''}`} {...attrs}>
|
|
14
|
-
<span class="mc-tag__label">{label}</span>
|
|
15
|
-
</span>
|
|
16
|
-
|
|
17
|
-
<style>/**
|
|
18
|
-
* Do not edit directly, this file was auto-generated.
|
|
19
|
-
*/
|
|
20
|
-
.mc-tag {
|
|
21
|
-
font-size: var(--font-size-100, 0.875rem);
|
|
22
|
-
border-radius: 2rem;
|
|
23
|
-
height: 2rem;
|
|
24
|
-
padding-inline: 0.75rem;
|
|
25
|
-
box-sizing: border-box;
|
|
26
|
-
display: inline-flex;
|
|
27
|
-
align-items: center;
|
|
28
|
-
background: var(--tag-color-background-standard, #ffffff);
|
|
29
|
-
color: var(--tag-color-text-standard, #242938);
|
|
30
|
-
border: var(--border-s, 1px) solid var(--tag-color-border, #999999);
|
|
31
|
-
}
|
|
32
|
-
.mc-tag--s {
|
|
33
|
-
font-size: var(--font-size-50, 0.75rem);
|
|
34
|
-
border-radius: 1.5rem;
|
|
35
|
-
height: 1.5rem;
|
|
36
|
-
padding-inline: 0.5rem;
|
|
37
|
-
}
|
|
38
|
-
.mc-tag--l {
|
|
39
|
-
font-size: var(--font-size-100, 0.875rem);
|
|
40
|
-
border-radius: 2.5rem;
|
|
41
|
-
height: 2.5rem;
|
|
42
|
-
padding-inline: 1rem;
|
|
43
|
-
}
|
|
44
|
-
.mc-tag.is-disabled, .mc-tag:disabled {
|
|
45
|
-
cursor: not-allowed;
|
|
46
|
-
background: var(--color-background-disabled, #d9d9d9);
|
|
47
|
-
color: var(--color-text-disabled, #737373);
|
|
48
|
-
border-color: var(--color-background-disabled, #d9d9d9);
|
|
49
|
-
box-shadow: none;
|
|
50
|
-
}
|
|
51
|
-
.mc-tag.is-disabled .mc-badge, .mc-tag:disabled .mc-badge {
|
|
52
|
-
color: currentColor;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.mc-tag-interactive {
|
|
56
|
-
text-decoration: none;
|
|
57
|
-
outline: none;
|
|
58
|
-
cursor: pointer;
|
|
59
|
-
font-weight: var(--font-weight-semi-bold, 600);
|
|
60
|
-
}
|
|
61
|
-
.mc-tag-interactive:not(:disabled):hover {
|
|
62
|
-
box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
|
|
63
|
-
}
|
|
64
|
-
.mc-tag-interactive:focus-visible {
|
|
65
|
-
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));
|
|
66
|
-
outline: 0.125rem solid transparent;
|
|
67
|
-
outline-offset: 0.125rem;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.mc-tag-contextualised {
|
|
71
|
-
gap: 0.25rem;
|
|
72
|
-
text-decoration: none;
|
|
73
|
-
outline: none;
|
|
74
|
-
color: var(--tag-color-text-inverse, #ffffff);
|
|
75
|
-
border: none;
|
|
76
|
-
background: var(--tag-color-background-selected, #117f03);
|
|
77
|
-
cursor: pointer;
|
|
78
|
-
font-weight: var(--font-weight-semi-bold, 600);
|
|
79
|
-
padding-inline-end: 1rem;
|
|
80
|
-
padding-inline-start: 0.5rem;
|
|
81
|
-
}
|
|
82
|
-
.mc-tag-contextualised:not(:disabled):hover {
|
|
83
|
-
background: var(--tag-color-background-selected-hover, #006902);
|
|
84
|
-
}
|
|
85
|
-
.mc-tag-contextualised:focus-visible {
|
|
86
|
-
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));
|
|
87
|
-
outline: 0.125rem solid transparent;
|
|
88
|
-
outline-offset: 0.125rem;
|
|
89
|
-
}
|
|
90
|
-
.mc-tag-contextualised.mc-tag--s {
|
|
91
|
-
padding-inline-end: 0.5rem;
|
|
92
|
-
padding-inline-start: 0.25rem;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.mc-tag-removable {
|
|
96
|
-
padding: 0 0 0 1rem;
|
|
97
|
-
background: var(--tag-color-background-inverse, #242938);
|
|
98
|
-
color: var(--tag-color-text-inverse, #ffffff);
|
|
99
|
-
border: none;
|
|
100
|
-
}
|
|
101
|
-
.mc-tag-removable__remove {
|
|
102
|
-
width: 2rem;
|
|
103
|
-
height: 2rem;
|
|
104
|
-
background-size: 1.5rem;
|
|
105
|
-
background: transparent;
|
|
106
|
-
border: none;
|
|
107
|
-
margin: 0 0 0 0.125rem;
|
|
108
|
-
padding: 0.25rem;
|
|
109
|
-
display: block;
|
|
110
|
-
cursor: pointer;
|
|
111
|
-
border-radius: var(--radius-full, 100%);
|
|
112
|
-
}
|
|
113
|
-
.mc-tag-removable__remove:hover {
|
|
114
|
-
background: var(--tag-color-background-inverse-hover, #343b4c);
|
|
115
|
-
}
|
|
116
|
-
.mc-tag-removable__remove:focus-visible {
|
|
117
|
-
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));
|
|
118
|
-
outline: 0.125rem solid transparent;
|
|
119
|
-
outline-offset: 0.125rem;
|
|
120
|
-
}
|
|
121
|
-
.mc-tag-removable__icon {
|
|
122
|
-
fill: var(--tag-color-delete-icon, #c9d0de);
|
|
123
|
-
width: 1.5rem;
|
|
124
|
-
height: 1.5rem;
|
|
125
|
-
}
|
|
126
|
-
.mc-tag-removable__text {
|
|
127
|
-
clip-path: inset(100%);
|
|
128
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
129
|
-
height: 1px;
|
|
130
|
-
overflow: hidden;
|
|
131
|
-
position: absolute;
|
|
132
|
-
white-space: nowrap;
|
|
133
|
-
padding: 0;
|
|
134
|
-
width: 1px;
|
|
135
|
-
}
|
|
136
|
-
.mc-tag-removable.mc-tag--s {
|
|
137
|
-
padding: 0 0 0 0.5rem;
|
|
138
|
-
}
|
|
139
|
-
.mc-tag-removable.mc-tag--s .mc-tag-removable__remove {
|
|
140
|
-
width: 1.5rem;
|
|
141
|
-
height: 1.5rem;
|
|
142
|
-
padding: 0.125rem;
|
|
143
|
-
}
|
|
144
|
-
.mc-tag-removable.mc-tag--s .mc-tag-removable__icon {
|
|
145
|
-
width: 1.25rem;
|
|
146
|
-
height: 1.25rem;
|
|
147
|
-
}
|
|
148
|
-
.mc-tag-removable.mc-tag--l .mc-tag-removable__remove {
|
|
149
|
-
width: 2.5rem;
|
|
150
|
-
height: 2.5rem;
|
|
151
|
-
}
|
|
152
|
-
.mc-tag-removable.mc-tag--l .mc-tag-removable__icon {
|
|
153
|
-
width: 2rem;
|
|
154
|
-
height: 2rem;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.mc-tag-selectable {
|
|
158
|
-
gap: 0.25rem;
|
|
159
|
-
white-space: nowrap;
|
|
160
|
-
cursor: pointer;
|
|
161
|
-
padding-inline-start: 0.5rem;
|
|
162
|
-
font-weight: var(--font-weight-semi-bold, 600);
|
|
163
|
-
}
|
|
164
|
-
.mc-tag-selectable:hover {
|
|
165
|
-
box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
|
|
166
|
-
}
|
|
167
|
-
.mc-tag-selectable:has(:focus-visible) {
|
|
168
|
-
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));
|
|
169
|
-
outline: 0.125rem solid transparent;
|
|
170
|
-
outline-offset: 0.125rem;
|
|
171
|
-
}
|
|
172
|
-
.mc-tag-selectable:has(:checked) {
|
|
173
|
-
background: var(--tag-color-background-selected, #117f03);
|
|
174
|
-
color: var(--tag-color-text-inverse, #ffffff);
|
|
175
|
-
border: none;
|
|
176
|
-
}
|
|
177
|
-
.mc-tag-selectable:has(:checked)::before {
|
|
178
|
-
display: inline-block;
|
|
179
|
-
content: "";
|
|
180
|
-
height: 1.25rem;
|
|
181
|
-
width: 1.25rem;
|
|
182
|
-
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");
|
|
183
|
-
}
|
|
184
|
-
.mc-tag-selectable:has(:checked):not(:has(:disabled)):hover {
|
|
185
|
-
background: var(--tag-color-background-selected-hover, #006902);
|
|
186
|
-
border-color: var(--tag-color-background-selected-hover, #006902);
|
|
187
|
-
box-shadow: none;
|
|
188
|
-
}
|
|
189
|
-
.mc-tag-selectable:has(:disabled) {
|
|
190
|
-
cursor: not-allowed;
|
|
191
|
-
background: var(--color-background-disabled, #d9d9d9);
|
|
192
|
-
color: var(--color-text-disabled, #737373);
|
|
193
|
-
border-color: var(--color-background-disabled, #d9d9d9);
|
|
194
|
-
box-shadow: none;
|
|
195
|
-
}
|
|
196
|
-
.mc-tag-selectable:has(:disabled)::before {
|
|
197
|
-
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");
|
|
198
|
-
}
|
|
199
|
-
.mc-tag-selectable .mc-tag__input {
|
|
200
|
-
clip-path: inset(100%);
|
|
201
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
202
|
-
height: 1px;
|
|
203
|
-
overflow: hidden;
|
|
204
|
-
position: absolute;
|
|
205
|
-
white-space: nowrap;
|
|
206
|
-
padding: 0;
|
|
207
|
-
width: 1px;
|
|
208
|
-
}
|
|
209
|
-
.mc-tag-selectable .mc-tag__label {
|
|
210
|
-
user-select: none;
|
|
211
|
-
}
|
|
212
|
-
.mc-tag-selectable.mc-tag--s {
|
|
213
|
-
padding-inline-start: 0.25rem;
|
|
214
|
-
gap: 0.125rem;
|
|
215
|
-
}
|
|
216
|
-
.mc-tag-selectable.mc-tag--l {
|
|
217
|
-
padding-inline-start: 0.75rem;
|
|
218
|
-
}</style>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/Tag.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiBH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
|
|
@@ -1,4 +0,0 @@
|
|
|
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
|
-
* 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 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
|
-
//# sourceMappingURL=TagContextualised.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n interface Props {\n label: string;\n contextualisedNumber?: string;\n size?: 's' | 'm' | 'l' | undefined;\n disabled?: boolean;\n [key: string]: any;\n }\n\n let {\n label,\n contextualisedNumber = '99',\n size = 'm',\n disabled = false,\n ...attrs\n }: Props = $props();\n\n const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n {disabled}\n {...attrs}\n>\n <NumberBadge appearance=\"inverse\" label={contextualisedNumber} size={badgeSize} />\n <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;oiMAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,4HANd,KAAI,6CACpB,IAAG,qDACC,GAAK,4BAQqB,MAAA,gCAAAA,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAExEE,2FAEqCH,EAAoB,qBAAQK,uDACxCR,EAAK,CAAA,CAAA,aARpC"}
|
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />
|
|
2
|
-
|
|
3
|
-
<script lang="ts">
|
|
4
|
-
import NumberBadge from '../numberbadge/NumberBadge.svelte';
|
|
5
|
-
|
|
6
|
-
interface Props {
|
|
7
|
-
label: string;
|
|
8
|
-
contextualisedNumber?: string;
|
|
9
|
-
size?: 's' | 'm' | 'l' | undefined;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
[key: string]: any;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
let {
|
|
15
|
-
label,
|
|
16
|
-
contextualisedNumber = '99',
|
|
17
|
-
size = 'm',
|
|
18
|
-
disabled = false,
|
|
19
|
-
...attrs
|
|
20
|
-
}: Props = $props();
|
|
21
|
-
|
|
22
|
-
const badgeSize = size === 'l' ? 'm' : 's';
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<button
|
|
26
|
-
class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}
|
|
27
|
-
{disabled}
|
|
28
|
-
{...attrs}
|
|
29
|
-
>
|
|
30
|
-
<NumberBadge appearance="inverse" label={contextualisedNumber} size={badgeSize} />
|
|
31
|
-
<span class="mc-tag__label">{label}</span>
|
|
32
|
-
</button>
|
|
33
|
-
|
|
34
|
-
<style>/**
|
|
35
|
-
* Do not edit directly, this file was auto-generated.
|
|
36
|
-
*/
|
|
37
|
-
.mc-tag {
|
|
38
|
-
font-size: var(--font-size-100, 0.875rem);
|
|
39
|
-
border-radius: 2rem;
|
|
40
|
-
height: 2rem;
|
|
41
|
-
padding-inline: 0.75rem;
|
|
42
|
-
box-sizing: border-box;
|
|
43
|
-
display: inline-flex;
|
|
44
|
-
align-items: center;
|
|
45
|
-
background: var(--tag-color-background-standard, #ffffff);
|
|
46
|
-
color: var(--tag-color-text-standard, #242938);
|
|
47
|
-
border: var(--border-s, 1px) solid var(--tag-color-border, #999999);
|
|
48
|
-
}
|
|
49
|
-
.mc-tag--s {
|
|
50
|
-
font-size: var(--font-size-50, 0.75rem);
|
|
51
|
-
border-radius: 1.5rem;
|
|
52
|
-
height: 1.5rem;
|
|
53
|
-
padding-inline: 0.5rem;
|
|
54
|
-
}
|
|
55
|
-
.mc-tag--l {
|
|
56
|
-
font-size: var(--font-size-100, 0.875rem);
|
|
57
|
-
border-radius: 2.5rem;
|
|
58
|
-
height: 2.5rem;
|
|
59
|
-
padding-inline: 1rem;
|
|
60
|
-
}
|
|
61
|
-
.mc-tag.is-disabled, .mc-tag:disabled {
|
|
62
|
-
cursor: not-allowed;
|
|
63
|
-
background: var(--color-background-disabled, #d9d9d9);
|
|
64
|
-
color: var(--color-text-disabled, #737373);
|
|
65
|
-
border-color: var(--color-background-disabled, #d9d9d9);
|
|
66
|
-
box-shadow: none;
|
|
67
|
-
}
|
|
68
|
-
.mc-tag.is-disabled .mc-badge, .mc-tag:disabled .mc-badge {
|
|
69
|
-
color: currentColor;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.mc-tag-interactive {
|
|
73
|
-
text-decoration: none;
|
|
74
|
-
outline: none;
|
|
75
|
-
cursor: pointer;
|
|
76
|
-
font-weight: var(--font-weight-semi-bold, 600);
|
|
77
|
-
}
|
|
78
|
-
.mc-tag-interactive:not(:disabled):hover {
|
|
79
|
-
box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
|
|
80
|
-
}
|
|
81
|
-
.mc-tag-interactive:focus-visible {
|
|
82
|
-
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));
|
|
83
|
-
outline: 0.125rem solid transparent;
|
|
84
|
-
outline-offset: 0.125rem;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.mc-tag-contextualised {
|
|
88
|
-
gap: 0.25rem;
|
|
89
|
-
text-decoration: none;
|
|
90
|
-
outline: none;
|
|
91
|
-
color: var(--tag-color-text-inverse, #ffffff);
|
|
92
|
-
border: none;
|
|
93
|
-
background: var(--tag-color-background-selected, #117f03);
|
|
94
|
-
cursor: pointer;
|
|
95
|
-
font-weight: var(--font-weight-semi-bold, 600);
|
|
96
|
-
padding-inline-end: 1rem;
|
|
97
|
-
padding-inline-start: 0.5rem;
|
|
98
|
-
}
|
|
99
|
-
.mc-tag-contextualised:not(:disabled):hover {
|
|
100
|
-
background: var(--tag-color-background-selected-hover, #006902);
|
|
101
|
-
}
|
|
102
|
-
.mc-tag-contextualised:focus-visible {
|
|
103
|
-
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));
|
|
104
|
-
outline: 0.125rem solid transparent;
|
|
105
|
-
outline-offset: 0.125rem;
|
|
106
|
-
}
|
|
107
|
-
.mc-tag-contextualised.mc-tag--s {
|
|
108
|
-
padding-inline-end: 0.5rem;
|
|
109
|
-
padding-inline-start: 0.25rem;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.mc-tag-removable {
|
|
113
|
-
padding: 0 0 0 1rem;
|
|
114
|
-
background: var(--tag-color-background-inverse, #242938);
|
|
115
|
-
color: var(--tag-color-text-inverse, #ffffff);
|
|
116
|
-
border: none;
|
|
117
|
-
}
|
|
118
|
-
.mc-tag-removable__remove {
|
|
119
|
-
width: 2rem;
|
|
120
|
-
height: 2rem;
|
|
121
|
-
background-size: 1.5rem;
|
|
122
|
-
background: transparent;
|
|
123
|
-
border: none;
|
|
124
|
-
margin: 0 0 0 0.125rem;
|
|
125
|
-
padding: 0.25rem;
|
|
126
|
-
display: block;
|
|
127
|
-
cursor: pointer;
|
|
128
|
-
border-radius: var(--radius-full, 100%);
|
|
129
|
-
}
|
|
130
|
-
.mc-tag-removable__remove:hover {
|
|
131
|
-
background: var(--tag-color-background-inverse-hover, #343b4c);
|
|
132
|
-
}
|
|
133
|
-
.mc-tag-removable__remove:focus-visible {
|
|
134
|
-
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));
|
|
135
|
-
outline: 0.125rem solid transparent;
|
|
136
|
-
outline-offset: 0.125rem;
|
|
137
|
-
}
|
|
138
|
-
.mc-tag-removable__icon {
|
|
139
|
-
fill: var(--tag-color-delete-icon, #c9d0de);
|
|
140
|
-
width: 1.5rem;
|
|
141
|
-
height: 1.5rem;
|
|
142
|
-
}
|
|
143
|
-
.mc-tag-removable__text {
|
|
144
|
-
clip-path: inset(100%);
|
|
145
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
146
|
-
height: 1px;
|
|
147
|
-
overflow: hidden;
|
|
148
|
-
position: absolute;
|
|
149
|
-
white-space: nowrap;
|
|
150
|
-
padding: 0;
|
|
151
|
-
width: 1px;
|
|
152
|
-
}
|
|
153
|
-
.mc-tag-removable.mc-tag--s {
|
|
154
|
-
padding: 0 0 0 0.5rem;
|
|
155
|
-
}
|
|
156
|
-
.mc-tag-removable.mc-tag--s .mc-tag-removable__remove {
|
|
157
|
-
width: 1.5rem;
|
|
158
|
-
height: 1.5rem;
|
|
159
|
-
padding: 0.125rem;
|
|
160
|
-
}
|
|
161
|
-
.mc-tag-removable.mc-tag--s .mc-tag-removable__icon {
|
|
162
|
-
width: 1.25rem;
|
|
163
|
-
height: 1.25rem;
|
|
164
|
-
}
|
|
165
|
-
.mc-tag-removable.mc-tag--l .mc-tag-removable__remove {
|
|
166
|
-
width: 2.5rem;
|
|
167
|
-
height: 2.5rem;
|
|
168
|
-
}
|
|
169
|
-
.mc-tag-removable.mc-tag--l .mc-tag-removable__icon {
|
|
170
|
-
width: 2rem;
|
|
171
|
-
height: 2rem;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.mc-tag-selectable {
|
|
175
|
-
gap: 0.25rem;
|
|
176
|
-
white-space: nowrap;
|
|
177
|
-
cursor: pointer;
|
|
178
|
-
padding-inline-start: 0.5rem;
|
|
179
|
-
font-weight: var(--font-weight-semi-bold, 600);
|
|
180
|
-
}
|
|
181
|
-
.mc-tag-selectable:hover {
|
|
182
|
-
box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
|
|
183
|
-
}
|
|
184
|
-
.mc-tag-selectable:has(:focus-visible) {
|
|
185
|
-
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));
|
|
186
|
-
outline: 0.125rem solid transparent;
|
|
187
|
-
outline-offset: 0.125rem;
|
|
188
|
-
}
|
|
189
|
-
.mc-tag-selectable:has(:checked) {
|
|
190
|
-
background: var(--tag-color-background-selected, #117f03);
|
|
191
|
-
color: var(--tag-color-text-inverse, #ffffff);
|
|
192
|
-
border: none;
|
|
193
|
-
}
|
|
194
|
-
.mc-tag-selectable:has(:checked)::before {
|
|
195
|
-
display: inline-block;
|
|
196
|
-
content: "";
|
|
197
|
-
height: 1.25rem;
|
|
198
|
-
width: 1.25rem;
|
|
199
|
-
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");
|
|
200
|
-
}
|
|
201
|
-
.mc-tag-selectable:has(:checked):not(:has(:disabled)):hover {
|
|
202
|
-
background: var(--tag-color-background-selected-hover, #006902);
|
|
203
|
-
border-color: var(--tag-color-background-selected-hover, #006902);
|
|
204
|
-
box-shadow: none;
|
|
205
|
-
}
|
|
206
|
-
.mc-tag-selectable:has(:disabled) {
|
|
207
|
-
cursor: not-allowed;
|
|
208
|
-
background: var(--color-background-disabled, #d9d9d9);
|
|
209
|
-
color: var(--color-text-disabled, #737373);
|
|
210
|
-
border-color: var(--color-background-disabled, #d9d9d9);
|
|
211
|
-
box-shadow: none;
|
|
212
|
-
}
|
|
213
|
-
.mc-tag-selectable:has(:disabled)::before {
|
|
214
|
-
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");
|
|
215
|
-
}
|
|
216
|
-
.mc-tag-selectable .mc-tag__input {
|
|
217
|
-
clip-path: inset(100%);
|
|
218
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
219
|
-
height: 1px;
|
|
220
|
-
overflow: hidden;
|
|
221
|
-
position: absolute;
|
|
222
|
-
white-space: nowrap;
|
|
223
|
-
padding: 0;
|
|
224
|
-
width: 1px;
|
|
225
|
-
}
|
|
226
|
-
.mc-tag-selectable .mc-tag__label {
|
|
227
|
-
user-select: none;
|
|
228
|
-
}
|
|
229
|
-
.mc-tag-selectable.mc-tag--s {
|
|
230
|
-
padding-inline-start: 0.25rem;
|
|
231
|
-
gap: 0.125rem;
|
|
232
|
-
}
|
|
233
|
-
.mc-tag-selectable.mc-tag--l {
|
|
234
|
-
padding-inline-start: 0.75rem;
|
|
235
|
-
}</style>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
interface Props {
|
|
2
|
-
label: string;
|
|
3
|
-
contextualisedNumber?: string;
|
|
4
|
-
size?: 's' | 'm' | 'l' | undefined;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
[key: string]: any;
|
|
7
|
-
}
|
|
8
|
-
declare const TagContextualised: import("svelte").Component<Props, {}, "">;
|
|
9
|
-
type TagContextualised = ReturnType<typeof TagContextualised>;
|
|
10
|
-
export default TagContextualised;
|
|
11
|
-
//# sourceMappingURL=TagContextualised.svelte.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TagContextualised.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagContextualised.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA2BH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,4 +0,0 @@
|
|
|
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
|
-
* Do not edit directly, this file was auto-generated.
|
|
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
|
-
//# sourceMappingURL=TagInteractive.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TagInteractive.js","sources":["../../../src/components/tags/TagInteractive.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-interactive' }} />\n\n<script lang=\"ts\">\n interface Props {\n label: string;\n disabled?: boolean;\n size?: 's' | 'm' | 'l';\n [key: string]: any;\n }\n\n let { label, disabled = false, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<button\n class={`mc-tag mc-tag-interactive ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n {disabled}\n {...attrs}\n>\n <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/tag';\n @use '@mozaic-ds/styles/components/tag/c.tag-interactive';\n</style>\n"],"names":["label","$.prop","$$props","disabled","size","attrs","$.rest_props"],"mappings":";;oiMAAA,oBAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,mBAAW,EAAK,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAJ,EAAA,sKAA3B,GAAK,6CAAS,IAAG,4BAIL,MAAA,6BAAAE,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAErEC,mFAEyBL,EAAK,CAAA,CAAA,aAPpC"}
|