igniteui-webcomponents 4.3.1 → 4.4.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/CHANGELOG.md +49 -0
- package/animations/presets/fade/index.d.ts +2 -2
- package/animations/presets/fade/index.js +4 -6
- package/animations/presets/fade/index.js.map +1 -1
- package/animations/presets/grow/index.d.ts +2 -2
- package/animations/presets/grow/index.js +8 -10
- package/animations/presets/grow/index.js.map +1 -1
- package/animations/presets/index.d.ts +1 -0
- package/animations/presets/index.js +1 -0
- package/animations/presets/index.js.map +1 -1
- package/animations/presets/slide/index.d.ts +3 -0
- package/animations/presets/slide/index.js +16 -0
- package/animations/presets/slide/index.js.map +1 -0
- package/components/avatar/avatar.js +5 -2
- package/components/avatar/avatar.js.map +1 -1
- package/components/avatar/themes/{light/avatar.base.css.js → avatar.base.css.js} +2 -20
- package/components/avatar/themes/avatar.base.css.js.map +1 -0
- package/components/avatar/themes/dark/{avatar.base.bootstrap.css.js → avatar.bootstrap.css.js} +1 -1
- package/components/avatar/themes/dark/avatar.bootstrap.css.js.map +1 -0
- package/components/avatar/themes/dark/avatar.fluent.css.d.ts +1 -0
- package/components/avatar/themes/dark/avatar.fluent.css.js +3 -0
- package/components/avatar/themes/dark/avatar.fluent.css.js.map +1 -0
- package/components/avatar/themes/dark/avatar.indigo.css.d.ts +1 -0
- package/components/avatar/themes/dark/avatar.indigo.css.js +3 -0
- package/components/avatar/themes/dark/avatar.indigo.css.js.map +1 -0
- package/components/avatar/themes/dark/avatar.material.css.d.ts +1 -0
- package/components/avatar/themes/dark/avatar.material.css.js +3 -0
- package/components/avatar/themes/dark/avatar.material.css.js.map +1 -0
- package/components/avatar/themes/light/avatar.bootstrap.css.js +17 -3
- package/components/avatar/themes/light/avatar.bootstrap.css.js.map +1 -1
- package/components/avatar/themes/light/avatar.fluent.css.d.ts +1 -0
- package/components/avatar/themes/light/avatar.fluent.css.js +27 -0
- package/components/avatar/themes/light/avatar.fluent.css.js.map +1 -0
- package/components/avatar/themes/light/avatar.indigo.css.d.ts +1 -0
- package/components/avatar/themes/light/avatar.indigo.css.js +27 -0
- package/components/avatar/themes/light/avatar.indigo.css.js.map +1 -0
- package/components/avatar/themes/light/avatar.material.css.d.ts +1 -0
- package/components/avatar/themes/light/avatar.material.css.js +27 -0
- package/components/avatar/themes/light/avatar.material.css.js.map +1 -0
- package/components/button/button-base.d.ts +14 -6
- package/components/button/button-base.js +51 -18
- package/components/button/button-base.js.map +1 -1
- package/components/button/themes/button/light/button.base.css.js +4 -4
- package/components/button/themes/button/light/button.base.css.js.map +1 -1
- package/components/button/themes/button/light/button.bootstrap.css.js +64 -32
- package/components/button/themes/button/light/button.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/light/button.fluent.css.js +75 -40
- package/components/button/themes/button/light/button.fluent.css.js.map +1 -1
- package/components/button/themes/button/light/button.indigo.css.js +86 -42
- package/components/button/themes/button/light/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/light/button.material.css.js +88 -38
- package/components/button/themes/button/light/button.material.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.base.css.js +2 -1
- package/components/button/themes/icon-button/light/icon-button.base.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js +12 -7
- package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.fluent.css.js +4 -3
- package/components/button/themes/icon-button/light/icon-button.fluent.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.indigo.css.js +6 -4
- package/components/button/themes/icon-button/light/icon-button.indigo.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.material.css.js +7 -4
- package/components/button/themes/icon-button/light/icon-button.material.css.js.map +1 -1
- package/components/calendar/themes/bootstrap/days-view.bootstrap.css.js +2 -2
- package/components/calendar/themes/bootstrap/days-view.bootstrap.css.js.map +1 -1
- package/components/calendar/themes/bootstrap/year-month-view.bootstrap.css.js +2 -2
- package/components/calendar/themes/bootstrap/year-month-view.bootstrap.css.js.map +1 -1
- package/components/calendar/themes/calendar.base.css.js +1 -0
- package/components/calendar/themes/calendar.base.css.js.map +1 -1
- package/components/calendar/themes/fluent/calendar.fluent.css.js +2 -1
- package/components/calendar/themes/fluent/calendar.fluent.css.js.map +1 -1
- package/components/checkbox/checkbox-base.d.ts +8 -35
- package/components/checkbox/checkbox-base.js +28 -41
- package/components/checkbox/checkbox-base.js.map +1 -1
- package/components/checkbox/checkbox.d.ts +0 -1
- package/components/checkbox/checkbox.js +5 -16
- package/components/checkbox/checkbox.js.map +1 -1
- package/components/checkbox/switch.d.ts +0 -2
- package/components/checkbox/switch.js +4 -16
- package/components/checkbox/switch.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.base.css.js +2 -1
- package/components/checkbox/themes/light/checkbox.base.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.bootstrap.css.js +26 -9
- package/components/checkbox/themes/light/checkbox.bootstrap.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.fluent.css.js +31 -15
- package/components/checkbox/themes/light/checkbox.fluent.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.indigo.css.js +31 -13
- package/components/checkbox/themes/light/checkbox.indigo.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.material.css.js +24 -12
- package/components/checkbox/themes/light/checkbox.material.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.base.css.js +2 -1
- package/components/checkbox/themes/light/switch.base.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.bootstrap.css.js +12 -4
- package/components/checkbox/themes/light/switch.bootstrap.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.fluent.css.js +33 -15
- package/components/checkbox/themes/light/switch.fluent.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.indigo.css.js +26 -11
- package/components/checkbox/themes/light/switch.indigo.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.material.css.js +14 -7
- package/components/checkbox/themes/light/switch.material.css.js.map +1 -1
- package/components/chip/themes/chip.base.css.js +0 -2
- package/components/chip/themes/chip.base.css.js.map +1 -1
- package/components/chip/themes/chip.bootstrap.css.js +2 -2
- package/components/chip/themes/chip.bootstrap.css.js.map +1 -1
- package/components/chip/themes/chip.fluent.css.js +2 -2
- package/components/chip/themes/chip.fluent.css.js.map +1 -1
- package/components/chip/themes/chip.indigo.css.js +2 -2
- package/components/chip/themes/chip.indigo.css.js.map +1 -1
- package/components/chip/themes/chip.material.css.js +2 -2
- package/components/chip/themes/chip.material.css.js.map +1 -1
- package/components/combo/combo.d.ts +7 -32
- package/components/combo/combo.js +57 -49
- package/components/combo/combo.js.map +1 -1
- package/components/combo/controllers/selection.js +1 -3
- package/components/combo/controllers/selection.js.map +1 -1
- package/components/combo/themes/light/combo.bootstrap.css.js +27 -24
- package/components/combo/themes/light/combo.bootstrap.css.js.map +1 -1
- package/components/combo/themes/light/combo.fluent.css.js +27 -24
- package/components/combo/themes/light/combo.fluent.css.js.map +1 -1
- package/components/combo/themes/light/combo.indigo.css.js +26 -23
- package/components/combo/themes/light/combo.indigo.css.js.map +1 -1
- package/components/combo/themes/light/combo.material.css.js +32 -23
- package/components/combo/themes/light/combo.material.css.js.map +1 -1
- package/components/combo/themes/light/item/combo-item.base.css.js +0 -1
- package/components/combo/themes/light/item/combo-item.base.css.js.map +1 -1
- package/components/common/localization/validation-en.d.ts +10 -0
- package/components/common/localization/validation-en.js +10 -0
- package/components/common/localization/validation-en.js.map +1 -0
- package/components/common/mixins/form-associated-required.d.ts +16 -0
- package/components/common/mixins/form-associated-required.js +29 -0
- package/components/common/mixins/form-associated-required.js.map +1 -0
- package/components/common/mixins/form-associated.d.ts +92 -0
- package/components/common/mixins/form-associated.js +151 -0
- package/components/common/mixins/form-associated.js.map +1 -0
- package/components/common/util.d.ts +38 -0
- package/components/common/util.js +34 -0
- package/components/common/util.js.map +1 -1
- package/components/common/validators.d.ts +45 -0
- package/components/common/validators.js +54 -0
- package/components/common/validators.js.map +1 -0
- package/components/date-time-input/date-time-input.d.ts +30 -11
- package/components/date-time-input/date-time-input.js +147 -135
- package/components/date-time-input/date-time-input.js.map +1 -1
- package/components/date-time-input/date-util.d.ts +1 -0
- package/components/date-time-input/date-util.js +6 -3
- package/components/date-time-input/date-util.js.map +1 -1
- package/components/dialog/dialog.js +1 -1
- package/components/dialog/dialog.js.map +1 -1
- package/components/dialog/themes/light/dialog.base.css.js +1 -1
- package/components/dialog/themes/light/dialog.base.css.js.map +1 -1
- package/components/dropdown/dropdown-item.js +2 -6
- package/components/dropdown/dropdown-item.js.map +1 -1
- package/components/dropdown/themes/light/dropdown.bootstrap.css.js +1 -1
- package/components/dropdown/themes/light/dropdown.bootstrap.css.js.map +1 -1
- package/components/dropdown/themes/light/dropdown.fluent.css.js +1 -1
- package/components/dropdown/themes/light/dropdown.fluent.css.js.map +1 -1
- package/components/dropdown/themes/light/dropdown.indigo.css.js +1 -1
- package/components/dropdown/themes/light/dropdown.indigo.css.js.map +1 -1
- package/components/dropdown/themes/light/dropdown.material.css.js +1 -1
- package/components/dropdown/themes/light/dropdown.material.css.js.map +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.js +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.js.map +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.fluent.css.js +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.fluent.css.js.map +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.indigo.css.js +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.indigo.css.js.map +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.material.css.js +1 -1
- package/components/dropdown/themes/light/group/dropdown-group.material.css.js.map +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.js +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.js.map +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.fluent.css.js +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.fluent.css.js.map +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.indigo.css.js +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.indigo.css.js.map +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.material.css.js +1 -1
- package/components/dropdown/themes/light/header/dropdown-header.material.css.js.map +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.js +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.js.map +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.fluent.css.js +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.fluent.css.js.map +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.indigo.css.js +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.indigo.css.js.map +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.material.css.js +1 -1
- package/components/dropdown/themes/light/item/dropdown-item.material.css.js.map +1 -1
- package/components/expansion-panel/expansion-panel.js +1 -1
- package/components/expansion-panel/expansion-panel.js.map +1 -1
- package/components/form/form.d.ts +3 -0
- package/components/form/form.js.map +1 -1
- package/components/icon/icon.base.css.js +0 -8
- package/components/icon/icon.base.css.js.map +1 -1
- package/components/icon/light/icon.bootstrap.css.js +7 -1
- package/components/icon/light/icon.bootstrap.css.js.map +1 -1
- package/components/icon/light/icon.fluent.css.js +7 -1
- package/components/icon/light/icon.fluent.css.js.map +1 -1
- package/components/icon/light/icon.indigo.css.js +7 -1
- package/components/icon/light/icon.indigo.css.js.map +1 -1
- package/components/icon/light/icon.material.css.js +7 -1
- package/components/icon/light/icon.material.css.js.map +1 -1
- package/components/input/input-base.d.ts +10 -20
- package/components/input/input-base.js +19 -20
- package/components/input/input-base.js.map +1 -1
- package/components/input/input.d.ts +24 -15
- package/components/input/input.js +106 -48
- package/components/input/input.js.map +1 -1
- package/components/input/themes/light/input.base.css.js +0 -3
- package/components/input/themes/light/input.base.css.js.map +1 -1
- package/components/input/themes/light/input.bootstrap.css.js +7 -17
- package/components/input/themes/light/input.bootstrap.css.js.map +1 -1
- package/components/input/themes/light/input.fluent.css.js +6 -19
- package/components/input/themes/light/input.fluent.css.js.map +1 -1
- package/components/input/themes/light/input.indigo.css.js +16 -1
- package/components/input/themes/light/input.indigo.css.js.map +1 -1
- package/components/input/themes/light/input.material.css.js +30 -11
- package/components/input/themes/light/input.material.css.js.map +1 -1
- package/components/list/themes/light/list-header.base.css.js +0 -32
- package/components/list/themes/light/list-header.base.css.js.map +1 -1
- package/components/list/themes/light/list-item.base.css.js +1 -33
- package/components/list/themes/light/list-item.base.css.js.map +1 -1
- package/components/list/themes/light/list-item.bootstrap.css.js +1 -1
- package/components/list/themes/light/list-item.bootstrap.css.js.map +1 -1
- package/components/list/themes/light/list-item.fluent.css.js +1 -1
- package/components/list/themes/light/list-item.fluent.css.js.map +1 -1
- package/components/list/themes/light/list-item.indigo.css.js +1 -1
- package/components/list/themes/light/list-item.indigo.css.js.map +1 -1
- package/components/list/themes/light/list.base.css.js +1 -1
- package/components/list/themes/light/list.base.css.js.map +1 -1
- package/components/list/themes/light/list.bootstrap.css.js +1 -1
- package/components/list/themes/light/list.bootstrap.css.js.map +1 -1
- package/components/mask-input/mask-input-base.d.ts +2 -9
- package/components/mask-input/mask-input-base.js +7 -12
- package/components/mask-input/mask-input-base.js.map +1 -1
- package/components/mask-input/mask-input.d.ts +5 -6
- package/components/mask-input/mask-input.js +42 -51
- package/components/mask-input/mask-input.js.map +1 -1
- package/components/mask-input/mask-parser.js +1 -0
- package/components/mask-input/mask-parser.js.map +1 -1
- package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js +2 -2
- package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js.map +1 -1
- package/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.js +2 -2
- package/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.js.map +1 -1
- package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js +0 -32
- package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js.map +1 -1
- package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js +1 -34
- package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js.map +1 -1
- package/components/nav-drawer/themes/light/nav-drawer.base.css.js +1 -1
- package/components/nav-drawer/themes/light/nav-drawer.base.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.bootstrap.css.js +0 -32
- package/components/navbar/themes/light/navbar.bootstrap.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.fluent.css.js +0 -32
- package/components/navbar/themes/light/navbar.fluent.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.indigo.css.js +0 -32
- package/components/navbar/themes/light/navbar.indigo.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.material.css.js +0 -32
- package/components/navbar/themes/light/navbar.material.css.js.map +1 -1
- package/components/progress/themes/linear/linear.progress.base.css.js +1 -0
- package/components/progress/themes/linear/linear.progress.base.css.js.map +1 -1
- package/components/progress/themes/linear/linear.progress.indigo.css.js +0 -32
- package/components/progress/themes/linear/linear.progress.indigo.css.js.map +1 -1
- package/components/radio/radio.d.ts +13 -37
- package/components/radio/radio.js +135 -97
- package/components/radio/radio.js.map +1 -1
- package/components/radio/themes/light/radio.bootstrap.css.js +8 -36
- package/components/radio/themes/light/radio.bootstrap.css.js.map +1 -1
- package/components/radio/themes/light/radio.fluent.css.js +0 -32
- package/components/radio/themes/light/radio.fluent.css.js.map +1 -1
- package/components/radio/themes/light/radio.indigo.css.js +11 -37
- package/components/radio/themes/light/radio.indigo.css.js.map +1 -1
- package/components/radio/themes/light/radio.material.css.js +1 -33
- package/components/radio/themes/light/radio.material.css.js.map +1 -1
- package/components/radio-group/radio-group.d.ts +0 -4
- package/components/radio-group/radio-group.js +3 -54
- package/components/radio-group/radio-group.js.map +1 -1
- package/components/rating/dark/rating.fluent.css.d.ts +1 -0
- package/components/rating/dark/rating.fluent.css.js +3 -0
- package/components/rating/dark/rating.fluent.css.js.map +1 -0
- package/components/rating/rating-symbol.base.css.js +1 -1
- package/components/rating/rating-symbol.base.css.js.map +1 -1
- package/components/rating/rating.base.css.js +8 -4
- package/components/rating/rating.base.css.js.map +1 -1
- package/components/rating/rating.d.ts +10 -11
- package/components/rating/rating.fluent.css.js +13 -7
- package/components/rating/rating.fluent.css.js.map +1 -1
- package/components/rating/rating.js +19 -15
- package/components/rating/rating.js.map +1 -1
- package/components/select/select-item.d.ts +0 -2
- package/components/select/select-item.js +0 -3
- package/components/select/select-item.js.map +1 -1
- package/components/select/select.d.ts +7 -34
- package/components/select/select.js +27 -37
- package/components/select/select.js.map +1 -1
- package/components/select/themes/light/select.base.css.js +1 -0
- package/components/select/themes/light/select.base.css.js.map +1 -1
- package/components/select/themes/light/select.bootstrap.css.js +5 -37
- package/components/select/themes/light/select.bootstrap.css.js.map +1 -1
- package/components/select/themes/light/select.fluent.css.js +5 -37
- package/components/select/themes/light/select.fluent.css.js.map +1 -1
- package/components/select/themes/light/select.indigo.css.js +4 -36
- package/components/select/themes/light/select.indigo.css.js.map +1 -1
- package/components/select/themes/light/select.material.css.js +14 -46
- package/components/select/themes/light/select.material.css.js.map +1 -1
- package/components/slider/slider.d.ts +4 -12
- package/components/slider/slider.js +16 -25
- package/components/slider/slider.js.map +1 -1
- package/components/slider/themes/light/slider.base.css.js +17 -8
- package/components/slider/themes/light/slider.base.css.js.map +1 -1
- package/components/slider/themes/light/slider.fluent.css.js +6 -3
- package/components/slider/themes/light/slider.fluent.css.js.map +1 -1
- package/components/slider/themes/light/slider.indigo.css.js +4 -1
- package/components/slider/themes/light/slider.indigo.css.js.map +1 -1
- package/components/snackbar/snackbar.js +1 -1
- package/components/snackbar/snackbar.js.map +1 -1
- package/components/stepper/animations.d.ts +2 -0
- package/components/stepper/animations.js +22 -0
- package/components/stepper/animations.js.map +1 -0
- package/components/stepper/step.d.ts +17 -8
- package/components/stepper/step.js +29 -0
- package/components/stepper/step.js.map +1 -1
- package/components/stepper/stepper.d.ts +19 -3
- package/components/stepper/stepper.js +58 -7
- package/components/stepper/stepper.js.map +1 -1
- package/components/stepper/themes/step/light/step.base.css.js +44 -165
- package/components/stepper/themes/step/light/step.base.css.js.map +1 -1
- package/components/stepper/themes/step/light/step.bootstrap.css.js +116 -19
- package/components/stepper/themes/step/light/step.bootstrap.css.js.map +1 -1
- package/components/stepper/themes/step/light/step.fluent.css.js +112 -12
- package/components/stepper/themes/step/light/step.fluent.css.js.map +1 -1
- package/components/stepper/themes/step/light/step.indigo.css.js +112 -25
- package/components/stepper/themes/step/light/step.indigo.css.js.map +1 -1
- package/components/stepper/themes/step/light/step.material.css.js +112 -4
- package/components/stepper/themes/step/light/step.material.css.js.map +1 -1
- package/components/stepper/themes/stepper/stepper.base.css.js +2 -0
- package/components/stepper/themes/stepper/stepper.base.css.js.map +1 -1
- package/components/toast/toast.js +1 -1
- package/components/toast/toast.js.map +1 -1
- package/components/tree/themes/light/tree-item.base.css.js +0 -3
- package/components/tree/themes/light/tree-item.base.css.js.map +1 -1
- package/components/tree/themes/light/tree-item.bootstrap.css.js +60 -3
- package/components/tree/themes/light/tree-item.bootstrap.css.js.map +1 -1
- package/components/tree/themes/light/tree-item.fluent.css.js +58 -1
- package/components/tree/themes/light/tree-item.fluent.css.js.map +1 -1
- package/components/tree/themes/light/tree-item.indigo.css.js +58 -1
- package/components/tree/themes/light/tree-item.indigo.css.js.map +1 -1
- package/components/tree/themes/light/tree-item.material.css.d.ts +1 -0
- package/components/tree/themes/light/tree-item.material.css.js +58 -0
- package/components/tree/themes/light/tree-item.material.css.js.map +1 -0
- package/components/tree/tree-item.js +8 -6
- package/components/tree/tree-item.js.map +1 -1
- package/components/tree/tree.d.ts +0 -6
- package/components/tree/tree.js +0 -4
- package/components/tree/tree.js.map +1 -1
- package/components/tree/tree.navigation.js +3 -2
- package/components/tree/tree.navigation.js.map +1 -1
- package/custom-elements.json +798 -525
- package/package.json +3 -3
- package/themes/dark/bootstrap.css +274 -61
- package/themes/dark/fluent.css +291 -60
- package/themes/dark/indigo.css +508 -3
- package/themes/dark/material.css +244 -54
- package/themes/light/bootstrap.css +5 -2
- package/themes/light/fluent.css +5 -2
- package/themes/light/indigo.css +229 -2
- package/themes/light/material.css +5 -2
- package/vscode-html-custom-data.json +239 -286
- package/components/avatar/themes/dark/avatar.base.bootstrap.css.js.map +0 -1
- package/components/avatar/themes/light/avatar.base.css.js.map +0 -1
- package/components/common/types.d.ts +0 -1
- package/components/common/types.js +0 -2
- package/components/common/types.js.map +0 -1
- /package/components/avatar/themes/{light/avatar.base.css.d.ts → avatar.base.css.d.ts} +0 -0
- /package/components/avatar/themes/dark/{avatar.base.bootstrap.css.d.ts → avatar.bootstrap.css.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/checkbox.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoQvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n:host {\n --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-primary-900), var(--ig-primary-a)));\n --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-900), var(--ig-error-a)));\n --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 0.625rem), 0.625rem));\n --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.125rem, 0rem, 1.5rem);\n --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n}\n\n[part~=control] {\n width: var(--size, 1.25rem);\n height: var(--size, 1.25rem);\n min-width: var(--size, 1.25rem);\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n[part~=control]::after {\n border-radius: var(--border-radius);\n background: transparent;\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--empty-color);\n box-shadow: inset 0 0 0 0.0625rem var(--empty-color);\n}\n\n[part=\"control checked\"]::after {\n background: var(--fill-color);\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n}\n\n[part~=label] {\n font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n color: var(--label-color);\n}\n\n[part~=indicator] {\n stroke: var(--tick-color);\n stroke-width: 1.5;\n -webkit-transform: scale(0.8);\n -ms-transform: scale(0.8);\n transform: scale(0.8);\n}\n\n:host(:hover) [part~=indicator] {\n opacity: 1;\n stroke: var(--tick-color-hover);\n stroke-dashoffset: 0;\n -webkit-transition: opacity 0.1s ease-out;\n transition: opacity 0.1s ease-out;\n}\n:host(:hover) [part=\"indicator checked\"] {\n stroke: var(--tick-color);\n}\n\n:host(:hover) [part=\"control checked\"]::after,\n:host(:focus-within) [part=\"control checked\"]::after {\n background: var(--fill-color-hover);\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n}\n\n:host([indeterminate]) [part~=indicator] {\n display: none;\n}\n:host([indeterminate]) [part~=control]::before {\n border-radius: var(--border-radius);\n display: block;\n width: inherit;\n height: inherit;\n content: \"\";\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n -webkit-transition-duration: 0.1s;\n transition-duration: 0.1s;\n background: var(--fill-color);\n z-index: 1;\n}\n:host([indeterminate]) [part=\"control checked\"]::after {\n background: transparent;\n}\n:host([indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n}\n\n:host([indeterminate]:hover) [part~=control]::before,\n:host([indeterminate]:focus-within) [part~=control]::before {\n background: var(--fill-color-hover);\n}\n:host([indeterminate]:hover) [part~=control]::after,\n:host([indeterminate]:focus-within) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n}\n:host([indeterminate]:hover) [part~=control] [part=\"control checked\"]::after,\n:host([indeterminate]:focus-within) [part~=control] [part=\"control checked\"]::after {\n background: transparent;\n}\n\n:host([invalid]:not([disabled])) [part~=label] {\n color: var(--error-color);\n}\n:host([invalid]:not([disabled])) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n}\n:host([invalid]:not([disabled])) [part=\"control checked\"]::after {\n background: var(--error-color);\n}\n\n:host([invalid]:focus-within) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n}\n:host([invalid]:focus-within) [part=\"control checked\"]::after {\n background: var(--error-color-hover);\n}\n\n:host([invalid]:hover) [part~=indicator] {\n stroke: var(--error-color);\n}\n:host([invalid]:hover) [part=\"indicator checked\"] {\n stroke: var(--tick-color);\n}\n:host([invalid]:hover) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n}\n:host([invalid]:hover) [part=\"control checked\"]::after {\n background: var(--error-color-hover);\n}\n\n:host(:not([disabled])[invalid][indeterminate]) [part~=control]::before {\n background: var(--error-color);\n}\n:host(:not([disabled])[invalid][indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n background: transparent;\n}\n:host(:not([disabled])[invalid][indeterminate]):hover [part~=control]::before {\n background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid][indeterminate]):hover [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n background: transparent;\n}\n:host(:not([disabled])[invalid][indeterminate]):focus-within [part~=control]::before {\n background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid][indeterminate]):focus-within [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n background: transparent;\n}\n\n:host([invalid][checked]) [part=\"control checked\"]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n background: var(--error-color);\n}\n\n[part~=focused] {\n position: relative;\n}\n[part~=focused]::after {\n content: \"\";\n position: absolute;\n top: -0.125rem;\n left: -0.125rem;\n -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n width: calc(100% + (0.125rem * 2));\n height: calc(100% + (0.125rem * 2));\n}\n\n:host([disabled]) [part~=label] {\n color: var(--disabled-color-label);\n}\n:host([disabled]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::after {\n background: var(--disabled-color);\n}\n\n:host([disabled][indeterminate]) [part~=control]::before {\n background: var(--disabled-color);\n}\n:host([disabled][indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n background: transparent;\n}\n\n:host([disabled][invalid]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n}\n:host([disabled][invalid]) [part=\"control checked\"]::after {\n background: var(--disabled-color);\n}\n\n:host([disabled][invalid][indeterminate]) [part~=control]::before {\n background: var(--disabled-color);\n}\n:host([disabled][invalid][indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n background: transparent;\n}`;\n"]}
|
|
1
|
+
{"version":3,"file":"checkbox.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/checkbox.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoRvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n:host {\n --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-primary-900), var(--ig-primary-a)));\n --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-900), var(--ig-error-a)));\n --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 0.625rem), 0.625rem));\n --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.125rem, 0rem, 1.5rem);\n --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.0833333333) * 1.5rem), 1.5rem));\n}\n\n[part~=control] {\n width: var(--size, 1.25rem);\n height: var(--size, 1.25rem);\n min-width: var(--size, 1.25rem);\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n[part~=control]::after {\n border-radius: var(--border-radius);\n background: transparent;\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--empty-color);\n box-shadow: inset 0 0 0 0.0625rem var(--empty-color);\n}\n\n[part=\"control checked\"]::after {\n background: var(--fill-color);\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n}\n\n[part~=label] {\n font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n color: var(--label-color);\n}\n\n[part~=indicator] {\n stroke: var(--tick-color);\n stroke-width: 1.5;\n -webkit-transform: scale(0.8);\n -ms-transform: scale(0.8);\n transform: scale(0.8);\n}\n\n:host(:hover) [part~=indicator] {\n opacity: 1;\n stroke: var(--tick-color-hover);\n stroke-dashoffset: 0;\n -webkit-transition: opacity 0.1s ease-out;\n transition: opacity 0.1s ease-out;\n}\n:host(:hover) [part=\"indicator checked\"] {\n stroke: var(--tick-color);\n}\n\n:host(:hover) [part=\"control checked\"]::after,\n:host(:focus-within) [part=\"control checked\"]::after {\n background: var(--fill-color-hover);\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n}\n\n:host([indeterminate]) [part~=indicator] {\n display: none;\n}\n:host([indeterminate]) [part~=control]::before {\n border-radius: var(--border-radius);\n display: block;\n width: inherit;\n height: inherit;\n content: \"\";\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n -webkit-transition-duration: 0.1s;\n transition-duration: 0.1s;\n background: var(--fill-color);\n z-index: 1;\n}\n:host([indeterminate]) [part=\"control checked\"]::after {\n background: transparent;\n}\n:host([indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color);\n}\n\n:host([indeterminate]:hover) [part~=control]::before,\n:host([indeterminate]:focus-within) [part~=control]::before {\n background: var(--fill-color-hover);\n}\n:host([indeterminate]:hover) [part~=control]::after,\n:host([indeterminate]:focus-within) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--fill-color-hover);\n}\n:host([indeterminate]:hover) [part~=control] [part=\"control checked\"]::after,\n:host([indeterminate]:focus-within) [part~=control] [part=\"control checked\"]::after {\n background: transparent;\n}\n\n:host([invalid]:not([disabled])) [part~=label] {\n color: var(--error-color);\n}\n:host([invalid]:not([disabled])) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n}\n:host([invalid]:not([disabled])) [part=\"control checked\"]::after {\n background: var(--error-color);\n}\n\n:host([invalid]:focus-within) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n}\n:host([invalid]:focus-within) [part=\"control checked\"]::after {\n background: var(--error-color-hover);\n}\n\n:host([invalid]:hover) [part~=indicator] {\n stroke: var(--error-color);\n}\n:host([invalid]:hover) [part=\"indicator checked\"] {\n stroke: var(--tick-color);\n}\n:host([invalid]:hover) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n}\n:host([invalid]:hover) [part=\"control checked\"]::after {\n background: var(--error-color-hover);\n}\n\n:host(:not([disabled])[invalid][indeterminate]) [part~=control]::before,\n:host(:not(:disabled)[invalid][indeterminate]) [part~=control]::before {\n background: var(--error-color);\n}\n:host(:not([disabled])[invalid][indeterminate]) [part~=control]::after,\n:host(:not(:disabled)[invalid][indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n background: transparent;\n}\n:host(:not([disabled])[invalid][indeterminate]):hover [part~=control]::before,\n:host(:not(:disabled)[invalid][indeterminate]):hover [part~=control]::before {\n background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid][indeterminate]):hover [part~=control]::after,\n:host(:not(:disabled)[invalid][indeterminate]):hover [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n background: transparent;\n}\n:host(:not([disabled])[invalid][indeterminate]):focus-within [part~=control]::before,\n:host(:not(:disabled)[invalid][indeterminate]):focus-within [part~=control]::before {\n background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid][indeterminate]):focus-within [part~=control]::after,\n:host(:not(:disabled)[invalid][indeterminate]):focus-within [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color-hover);\n background: transparent;\n}\n\n:host([invalid][checked]) [part=\"control checked\"]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n box-shadow: inset 0 0 0 0.0625rem var(--error-color);\n background: var(--error-color);\n}\n\n[part~=focused] {\n position: relative;\n}\n[part~=focused]::after {\n content: \"\";\n position: absolute;\n top: -0.125rem;\n left: -0.125rem;\n -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n width: calc(100% + (0.125rem * 2));\n height: calc(100% + (0.125rem * 2));\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n color: var(--disabled-color-label);\n}\n:host([disabled]) [part~=control]::after,\n:host(:disabled) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::after,\n:host(:disabled) [part=\"control checked\"]::after {\n background: var(--disabled-color);\n}\n\n:host([disabled][indeterminate]) [part~=control]::before,\n:host(:disabled[indeterminate]) [part~=control]::before {\n background: var(--disabled-color);\n}\n:host([disabled][indeterminate]) [part~=control]::after,\n:host(:disabled[indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n background: transparent;\n}\n\n:host([disabled][invalid]) [part~=control]::after,\n:host(:disabled[invalid]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n}\n:host([disabled][invalid]) [part=\"control checked\"]::after,\n:host(:disabled[invalid]) [part=\"control checked\"]::after {\n background: var(--disabled-color);\n}\n\n:host([disabled][invalid][indeterminate]) [part~=control]::before,\n:host(:disabled[invalid][indeterminate]) [part~=control]::before {\n background: var(--disabled-color);\n}\n:host([disabled][invalid][indeterminate]) [part~=control]::after,\n:host(:disabled[invalid][indeterminate]) [part~=control]::after {\n -webkit-box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n box-shadow: inset 0 0 0 0.0625rem var(--disabled-color);\n background: transparent;\n}`;\n"]}
|
|
@@ -118,63 +118,81 @@ export const styles = css `:host {
|
|
|
118
118
|
box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-200), 0.87);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
:host(:not([disabled])[invalid]) [part~=label]
|
|
121
|
+
:host(:not([disabled])[invalid]) [part~=label],
|
|
122
|
+
:host(:not(:disabled)[invalid]) [part~=label] {
|
|
122
123
|
color: var(--error-color);
|
|
123
124
|
}
|
|
124
|
-
:host(:not([disabled])[invalid]) [part~=control]::after
|
|
125
|
+
:host(:not([disabled])[invalid]) [part~=control]::after,
|
|
126
|
+
:host(:not(:disabled)[invalid]) [part~=control]::after {
|
|
125
127
|
border-color: var(--error-color);
|
|
126
128
|
}
|
|
127
|
-
:host(:not([disabled])[invalid]) [part="control checked"]
|
|
129
|
+
:host(:not([disabled])[invalid]) [part="control checked"],
|
|
130
|
+
:host(:not(:disabled)[invalid]) [part="control checked"] {
|
|
128
131
|
-webkit-box-shadow: inset 0 0 0 0.25rem var(--error-color);
|
|
129
132
|
box-shadow: inset 0 0 0 0.25rem var(--error-color);
|
|
130
133
|
background: var(--error-color);
|
|
131
134
|
}
|
|
132
|
-
:host(:not([disabled])[invalid]) [part="control checked"]::after
|
|
135
|
+
:host(:not([disabled])[invalid]) [part="control checked"]::after,
|
|
136
|
+
:host(:not(:disabled)[invalid]) [part="control checked"]::after {
|
|
133
137
|
background: var(--error-color);
|
|
134
138
|
}
|
|
135
139
|
|
|
136
140
|
:host(:hover:not([disabled])[invalid]) [part~=control],
|
|
137
|
-
:host(:hover:not([disabled])[invalid]) [part="control checked"]
|
|
141
|
+
:host(:hover:not([disabled])[invalid]) [part="control checked"],
|
|
142
|
+
:host(:hover:not(:disabled)[invalid]) [part~=control],
|
|
143
|
+
:host(:hover:not(:disabled)[invalid]) [part="control checked"] {
|
|
138
144
|
-webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
139
145
|
box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
140
146
|
}
|
|
141
147
|
|
|
142
148
|
:host(:focus-within:not([disabled])[invalid]) [part~=control],
|
|
143
|
-
:host(:focus-within:not([disabled])[invalid]) [part="control checked"]
|
|
149
|
+
:host(:focus-within:not([disabled])[invalid]) [part="control checked"],
|
|
150
|
+
:host(:focus-within:not(:disabled)[invalid]) [part~=control],
|
|
151
|
+
:host(:focus-within:not(:disabled)[invalid]) [part="control checked"] {
|
|
144
152
|
-webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
145
153
|
box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
146
154
|
}
|
|
147
155
|
|
|
148
|
-
:host(:not([disabled])[invalid][indeterminate]) [part~=control]
|
|
156
|
+
:host(:not([disabled])[invalid][indeterminate]) [part~=control],
|
|
157
|
+
:host(:not(:disabled)[invalid][indeterminate]) [part~=control] {
|
|
149
158
|
-webkit-box-shadow: inset 0 0 0 0.25rem var(--error-color);
|
|
150
159
|
box-shadow: inset 0 0 0 0.25rem var(--error-color);
|
|
151
160
|
background: var(--error-color);
|
|
152
161
|
}
|
|
153
162
|
|
|
154
|
-
:host(:hover:not([disabled])[invalid][indeterminate]) [part~=control]
|
|
163
|
+
:host(:hover:not([disabled])[invalid][indeterminate]) [part~=control],
|
|
164
|
+
:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=control] {
|
|
155
165
|
-webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
156
166
|
box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
157
167
|
}
|
|
158
168
|
|
|
159
|
-
:host(:focus-within:not([disabled])[invalid][indeterminate]) [part~=control]
|
|
169
|
+
:host(:focus-within:not([disabled])[invalid][indeterminate]) [part~=control],
|
|
170
|
+
:host(:focus-within:not(:disabled)[invalid][indeterminate]) [part~=control] {
|
|
160
171
|
-webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
161
172
|
box-shadow: 0 0 0 0.25rem var(--error-color-hover);
|
|
162
173
|
}
|
|
163
174
|
|
|
164
175
|
:host([disabled]) [part~=control]::after,
|
|
165
|
-
:host(
|
|
176
|
+
:host(:disabled) [part~=control]::after,
|
|
177
|
+
:host([disabled][invalid]) [part~=control]::after,
|
|
178
|
+
:host(:disabled[invalid]) [part~=control]::after {
|
|
166
179
|
border-color: var(--disabled-color);
|
|
167
180
|
}
|
|
168
181
|
:host([disabled]) [part="control checked"]::after,
|
|
169
|
-
:host(
|
|
182
|
+
:host(:disabled) [part="control checked"]::after,
|
|
183
|
+
:host([disabled][invalid]) [part="control checked"]::after,
|
|
184
|
+
:host(:disabled[invalid]) [part="control checked"]::after {
|
|
170
185
|
background: var(--disabled-color);
|
|
171
186
|
}
|
|
172
187
|
:host([disabled]) [part~=label],
|
|
173
|
-
:host(
|
|
188
|
+
:host(:disabled) [part~=label],
|
|
189
|
+
:host([disabled][invalid]) [part~=label],
|
|
190
|
+
:host(:disabled[invalid]) [part~=label] {
|
|
174
191
|
color: var(--disabled-color);
|
|
175
192
|
}
|
|
176
193
|
|
|
177
|
-
:host([disabled][indeterminate]) [part~=control]::after
|
|
194
|
+
:host([disabled][indeterminate]) [part~=control]::after,
|
|
195
|
+
:host(:disabled[indeterminate]) [part~=control]::after {
|
|
178
196
|
background: var(--disabled-color);
|
|
179
197
|
border-color: var(--disabled-color);
|
|
180
198
|
}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/checkbox.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"checkbox.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/checkbox.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoMvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n:host {\n --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-200), var(--ig-error-a)));\n --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.3) * 0.625rem), 0.625rem));\n --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.1875rem, 0rem, 1.5rem);\n --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --focus-outline-color-focused: var(--ig-checkbox-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.125) * 1.5rem), 1.5rem));\n font-weight: 600;\n}\n\n[part~=label] {\n font-family: var(--ig-body-1-font-family, var(--ig-font-family));\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n color: var(--label-color);\n}\n\n[part~=control] {\n border-radius: var(--ripple-radius);\n width: var(--size, 1.25rem);\n height: var(--size, 1.25rem);\n min-width: var(--size, 1.25rem);\n}\n[part~=control]::after {\n border-radius: var(--border-radius);\n border: 0.125rem solid var(--empty-color);\n}\n\n[part=\"control checked\"]::after {\n border-color: var(--fill-color);\n background: var(--fill-color);\n}\n\n[part~=indicator] {\n stroke: var(--tick-color);\n -webkit-transform: scale(0.8);\n -ms-transform: scale(0.8);\n transform: scale(0.8);\n}\n\n:host(:focus-within) [part~=control] {\n -webkit-box-shadow: 0 0 0 0.1875rem var(--focus-outline-color);\n box-shadow: 0 0 0 0.1875rem var(--focus-outline-color);\n}\n:host(:focus-within) [part=\"control checked\"] {\n -webkit-box-shadow: 0 0 0 0.1875rem var(--focus-outline-color-focused);\n box-shadow: 0 0 0 0.1875rem var(--focus-outline-color-focused);\n}\n\n:host([indeterminate]) [part~=indicator] {\n -webkit-transform: rotate(45deg) translateX(-0.125rem) scale(0.8);\n -ms-transform: rotate(45deg) translateX(-0.125rem) scale(0.8);\n transform: rotate(45deg) translateX(-0.125rem) scale(0.8);\n}\n:host([indeterminate]) [part~=control] {\n background: var(--fill-color);\n}\n:host([indeterminate]) [part~=control]::after {\n border-color: var(--fill-color);\n}\n\n:host([indeterminate]:hover) [part~=control] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-100), 0.87);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-100), 0.87);\n}\n\n:host([indeterminate]:focus-within) [part~=control] {\n -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-200), 0.87);\n box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-200), 0.87);\n}\n\n:host(:not([disabled])[invalid]) [part~=label],\n:host(:not(:disabled)[invalid]) [part~=label] {\n color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after,\n:host(:not(:disabled)[invalid]) [part~=control]::after {\n border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"],\n:host(:not(:disabled)[invalid]) [part=\"control checked\"] {\n -webkit-box-shadow: inset 0 0 0 0.25rem var(--error-color);\n box-shadow: inset 0 0 0 0.25rem var(--error-color);\n background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::after,\n:host(:not(:disabled)[invalid]) [part=\"control checked\"]::after {\n background: var(--error-color);\n}\n\n:host(:hover:not([disabled])[invalid]) [part~=control],\n:host(:hover:not([disabled])[invalid]) [part=\"control checked\"],\n:host(:hover:not(:disabled)[invalid]) [part~=control],\n:host(:hover:not(:disabled)[invalid]) [part=\"control checked\"] {\n -webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n}\n\n:host(:focus-within:not([disabled])[invalid]) [part~=control],\n:host(:focus-within:not([disabled])[invalid]) [part=\"control checked\"],\n:host(:focus-within:not(:disabled)[invalid]) [part~=control],\n:host(:focus-within:not(:disabled)[invalid]) [part=\"control checked\"] {\n -webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n}\n\n:host(:not([disabled])[invalid][indeterminate]) [part~=control],\n:host(:not(:disabled)[invalid][indeterminate]) [part~=control] {\n -webkit-box-shadow: inset 0 0 0 0.25rem var(--error-color);\n box-shadow: inset 0 0 0 0.25rem var(--error-color);\n background: var(--error-color);\n}\n\n:host(:hover:not([disabled])[invalid][indeterminate]) [part~=control],\n:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=control] {\n -webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n}\n\n:host(:focus-within:not([disabled])[invalid][indeterminate]) [part~=control],\n:host(:focus-within:not(:disabled)[invalid][indeterminate]) [part~=control] {\n -webkit-box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n box-shadow: 0 0 0 0.25rem var(--error-color-hover);\n}\n\n:host([disabled]) [part~=control]::after,\n:host(:disabled) [part~=control]::after,\n:host([disabled][invalid]) [part~=control]::after,\n:host(:disabled[invalid]) [part~=control]::after {\n border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::after,\n:host(:disabled) [part=\"control checked\"]::after,\n:host([disabled][invalid]) [part=\"control checked\"]::after,\n:host(:disabled[invalid]) [part=\"control checked\"]::after {\n background: var(--disabled-color);\n}\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label],\n:host([disabled][invalid]) [part~=label],\n:host(:disabled[invalid]) [part~=label] {\n color: var(--disabled-color);\n}\n\n:host([disabled][indeterminate]) [part~=control]::after,\n:host(:disabled[indeterminate]) [part~=control]::after {\n background: var(--disabled-color);\n border-color: var(--disabled-color);\n}`;\n"]}
|
|
@@ -132,44 +132,56 @@ export const styles = css `:host {
|
|
|
132
132
|
opacity: 0.12;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
-
:host(:not([disabled])[invalid]) [part~=label]
|
|
135
|
+
:host(:not([disabled])[invalid]) [part~=label],
|
|
136
|
+
:host(:not(:disabled)[invalid]) [part~=label] {
|
|
136
137
|
color: var(--error-color);
|
|
137
138
|
}
|
|
138
|
-
:host(:not([disabled])[invalid]) [part~=control]::after
|
|
139
|
+
:host(:not([disabled])[invalid]) [part~=control]::after,
|
|
140
|
+
:host(:not(:disabled)[invalid]) [part~=control]::after {
|
|
139
141
|
border-color: var(--error-color);
|
|
140
142
|
}
|
|
141
|
-
:host(:not([disabled])[invalid]) [part="control checked"]::after
|
|
143
|
+
:host(:not([disabled])[invalid]) [part="control checked"]::after,
|
|
144
|
+
:host(:not(:disabled)[invalid]) [part="control checked"]::after {
|
|
142
145
|
background: var(--error-color);
|
|
143
146
|
}
|
|
144
|
-
:host(:not([disabled])[invalid]) [part~=base]:hover [part~=control]::before
|
|
147
|
+
:host(:not([disabled])[invalid]) [part~=base]:hover [part~=control]::before,
|
|
148
|
+
:host(:not(:disabled)[invalid]) [part~=base]:hover [part~=control]::before {
|
|
145
149
|
background: var(--error-color-hover);
|
|
146
150
|
}
|
|
147
|
-
:host(:not([disabled])[invalid]) [part="base focused"] [part~=control]::before
|
|
151
|
+
:host(:not([disabled])[invalid]) [part="base focused"] [part~=control]::before,
|
|
152
|
+
:host(:not(:disabled)[invalid]) [part="base focused"] [part~=control]::before {
|
|
148
153
|
background: var(--error-color-hover);
|
|
149
154
|
}
|
|
150
155
|
|
|
151
|
-
:host(:not([disabled])[invalid][indeterminate]) [part~=control]::after
|
|
156
|
+
:host(:not([disabled])[invalid][indeterminate]) [part~=control]::after,
|
|
157
|
+
:host(:not(:disabled)[invalid][indeterminate]) [part~=control]::after {
|
|
152
158
|
border-color: var(--error-color);
|
|
153
159
|
background: var(--error-color);
|
|
154
160
|
}
|
|
155
|
-
:host(:not([disabled])[invalid][indeterminate]) [part~=base]:hover [part~=control]::before
|
|
161
|
+
:host(:not([disabled])[invalid][indeterminate]) [part~=base]:hover [part~=control]::before,
|
|
162
|
+
:host(:not(:disabled)[invalid][indeterminate]) [part~=base]:hover [part~=control]::before {
|
|
156
163
|
background: var(--error-color-hover);
|
|
157
164
|
}
|
|
158
|
-
:host(:not([disabled])[invalid][indeterminate]) [part="base focused"] [part~=control]::before
|
|
165
|
+
:host(:not([disabled])[invalid][indeterminate]) [part="base focused"] [part~=control]::before,
|
|
166
|
+
:host(:not(:disabled)[invalid][indeterminate]) [part="base focused"] [part~=control]::before {
|
|
159
167
|
background: var(--error-color-hover);
|
|
160
168
|
}
|
|
161
169
|
|
|
162
|
-
:host([disabled]) [part~=label]
|
|
170
|
+
:host([disabled]) [part~=label],
|
|
171
|
+
:host(:disabled) [part~=label] {
|
|
163
172
|
color: var(--disabled-color-label);
|
|
164
173
|
}
|
|
165
|
-
:host([disabled]) [part~=control]::after
|
|
174
|
+
:host([disabled]) [part~=control]::after,
|
|
175
|
+
:host(:disabled) [part~=control]::after {
|
|
166
176
|
border-color: var(--disabled-color);
|
|
167
177
|
}
|
|
168
|
-
:host([disabled]) [part="control checked"]::after
|
|
178
|
+
:host([disabled]) [part="control checked"]::after,
|
|
179
|
+
:host(:disabled) [part="control checked"]::after {
|
|
169
180
|
background: var(--disabled-color);
|
|
170
181
|
}
|
|
171
182
|
|
|
172
|
-
:host([disabled][indeterminate]) [part~=control]::after
|
|
183
|
+
:host([disabled][indeterminate]) [part~=control]::after,
|
|
184
|
+
:host(:disabled[indeterminate]) [part~=control]::after {
|
|
173
185
|
background: var(--disabled-indeterminate-color);
|
|
174
186
|
border-color: var(--disabled-indeterminate-color);
|
|
175
187
|
}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.material.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/checkbox.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"checkbox.material.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/checkbox.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n:host {\n --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-500), var(--ig-error-a)));\n --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 0.625rem), 0.625rem));\n --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 1.5rem, 0rem, 1.5rem);\n --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n\n[part~=label] {\n font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n font-size: var(--ig-subtitle-1-font-size);\n font-weight: var(--ig-subtitle-1-font-weight);\n font-style: var(--ig-subtitle-1-font-style);\n line-height: var(--ig-subtitle-1-line-height);\n letter-spacing: var(--ig-subtitle-1-letter-spacing);\n text-transform: var(--ig-subtitle-1-text-transform);\n margin-top: var(--ig-subtitle-1-margin-top);\n margin-bottom: var(--ig-subtitle-1-margin-bottom);\n color: var(--label-color);\n}\n\n[part~=indicator] {\n stroke: var(--tick-color);\n}\n\n[part~=control] {\n --size: 1.25rem;\n width: calc(var(--size) * 2);\n height: calc(var(--size) * 2);\n min-width: calc(var(--size) * 2);\n -webkit-transition: background 0.15s ease-in;\n transition: background 0.15s ease-in;\n}\n[part~=control]::after {\n border-radius: var(--border-radius);\n border: 0.125rem solid var(--empty-color);\n}\n[part~=control]::before {\n content: \"\";\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n border-radius: var(--ripple-radius);\n}\n\n[part=\"control checked\"]::after {\n border-color: var(--fill-color);\n background: var(--fill-color);\n}\n\n[part~=base]:hover [part~=control]::before {\n background: var(--empty-color);\n opacity: 0.06;\n}\n\n[part=\"base checked\"]:hover [part~=control]::before {\n background: var(--fill-color);\n opacity: 0.06;\n}\n\n[part=base]:focus-within:hover [part~=control]::before,\n[part=base]:focus-within [part~=control]::before,\n[part=\"base focused\"]:hover [part~=control]::before,\n[part=\"base focused\"] [part~=control]::before {\n background: var(--empty-color);\n opacity: 0.12;\n}\n\n[part=\"base checked\"]:focus-within:hover [part~=control]::before,\n[part=\"base checked\"]:focus-within [part~=control]::before,\n[part=\"base checked focused\"]:hover [part~=control]::before,\n[part=\"base checked focused\"] [part~=control]::before {\n background: var(--fill-color);\n opacity: 0.12;\n}\n\n:host([indeterminate]) [part~=control]::after {\n border-color: var(--fill-color);\n background: var(--fill-color);\n}\n:host([indeterminate]) [part=base]:hover [part~=control]::before {\n background: var(--fill-color);\n opacity: 0.12;\n}\n:host([indeterminate]) [part=base]:focus-within [part~=control]::before,\n:host([indeterminate]) [part=\"base focused\"] [part~=control]::before {\n background: var(--fill-color);\n opacity: 0.12;\n}\n\n:host(:not([disabled])[invalid]) [part~=label],\n:host(:not(:disabled)[invalid]) [part~=label] {\n color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after,\n:host(:not(:disabled)[invalid]) [part~=control]::after {\n border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::after,\n:host(:not(:disabled)[invalid]) [part=\"control checked\"]::after {\n background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=base]:hover [part~=control]::before,\n:host(:not(:disabled)[invalid]) [part~=base]:hover [part~=control]::before {\n background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]) [part=\"base focused\"] [part~=control]::before,\n:host(:not(:disabled)[invalid]) [part=\"base focused\"] [part~=control]::before {\n background: var(--error-color-hover);\n}\n\n:host(:not([disabled])[invalid][indeterminate]) [part~=control]::after,\n:host(:not(:disabled)[invalid][indeterminate]) [part~=control]::after {\n border-color: var(--error-color);\n background: var(--error-color);\n}\n:host(:not([disabled])[invalid][indeterminate]) [part~=base]:hover [part~=control]::before,\n:host(:not(:disabled)[invalid][indeterminate]) [part~=base]:hover [part~=control]::before {\n background: var(--error-color-hover);\n}\n:host(:not([disabled])[invalid][indeterminate]) [part=\"base focused\"] [part~=control]::before,\n:host(:not(:disabled)[invalid][indeterminate]) [part=\"base focused\"] [part~=control]::before {\n background: var(--error-color-hover);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n color: var(--disabled-color-label);\n}\n:host([disabled]) [part~=control]::after,\n:host(:disabled) [part~=control]::after {\n border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::after,\n:host(:disabled) [part=\"control checked\"]::after {\n background: var(--disabled-color);\n}\n\n:host([disabled][indeterminate]) [part~=control]::after,\n:host(:disabled[indeterminate]) [part~=control]::after {\n background: var(--disabled-indeterminate-color);\n border-color: var(--disabled-indeterminate-color);\n}`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.base.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/switch.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"switch.base.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/switch.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2KvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n:host {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-family: var(--ig-font-family);\n}\n\ninput[type=checkbox] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: none;\n clip: rect(0, 0, 0, 0);\n outline: 0;\n pointer-events: none;\n overflow: hidden;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n[part~=base] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row nowrap;\n flex-flow: row nowrap;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n cursor: pointer;\n gap: var(--label-gap);\n}\n\n[part~=control] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part~=thumb] {\n position: relative;\n -webkit-animation-duration: 0.2s;\n animation-duration: 0.2s;\n -webkit-animation-fill-mode: none;\n animation-fill-mode: none;\n}\n\n[part~=control],\n[part~=thumb] {\n -webkit-transition: all 0.2s ease-in-out;\n transition: all 0.2s ease-in-out;\n}\n\n[part~=thumb][part~=checked] {\n -webkit-animation-duration: 0.2s;\n animation-duration: 0.2s;\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n}\n\n[part~=label] {\n display: inline-block;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n word-wrap: break-word;\n}\n\n:host([disabled]),\n:host(:disabled) {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: none;\n cursor: initial;\n}\n\n:host([label-position=before]) [part~=label] {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n@-webkit-keyframes thumb-on {\n from {\n -webkit-margin-start: var(--thumb-offset);\n margin-inline-start: var(--thumb-offset);\n }\n to {\n -webkit-margin-start: calc(var(--size) - var(--thumb-size));\n margin-inline-start: calc(var(--size) - var(--thumb-size));\n }\n}\n\n@keyframes thumb-on {\n from {\n -webkit-margin-start: var(--thumb-offset);\n margin-inline-start: var(--thumb-offset);\n }\n to {\n -webkit-margin-start: calc(var(--size) - var(--thumb-size));\n margin-inline-start: calc(var(--size) - var(--thumb-size));\n }\n}\n@-webkit-keyframes thumb-off {\n from {\n -webkit-margin-start: calc(var(--size) - var(--thumb-size));\n margin-inline-start: calc(var(--size) - var(--thumb-size));\n }\n to {\n -webkit-margin-start: var(--thumb-offset);\n margin-inline-start: var(--thumb-offset);\n }\n}\n@keyframes thumb-off {\n from {\n -webkit-margin-start: calc(var(--size) - var(--thumb-size));\n margin-inline-start: calc(var(--size) - var(--thumb-size));\n }\n to {\n -webkit-margin-start: var(--thumb-offset);\n margin-inline-start: var(--thumb-offset);\n }\n}`;\n"]}
|
|
@@ -66,6 +66,7 @@ export const styles = css `:host {
|
|
|
66
66
|
--focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
|
|
67
67
|
--track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
|
|
68
68
|
--focus-fill-color: var(--ig-switch-focus-fill-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
|
|
69
|
+
--ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
[part~=focused] [part~=thumb]:not([part~=checked]) {
|
|
@@ -128,19 +129,26 @@ export const styles = css `:host {
|
|
|
128
129
|
}
|
|
129
130
|
|
|
130
131
|
:host(:not([disabled])[invalid]) [part~=control],
|
|
131
|
-
:host(:not([disabled])[invalid]) [part~=control][part~=checked]
|
|
132
|
+
:host(:not([disabled])[invalid]) [part~=control][part~=checked],
|
|
133
|
+
:host(:not(:disabled)[invalid]) [part~=control],
|
|
134
|
+
:host(:not(:disabled)[invalid]) [part~=control][part~=checked] {
|
|
132
135
|
border-color: var(--error-color);
|
|
133
136
|
}
|
|
134
137
|
:host(:not([disabled])[invalid]) [part~=control][part~=checked],
|
|
135
|
-
:host(:not([disabled])[invalid]) [part~=thumb]:not([part~=checked])
|
|
138
|
+
:host(:not([disabled])[invalid]) [part~=thumb]:not([part~=checked]),
|
|
139
|
+
:host(:not(:disabled)[invalid]) [part~=control][part~=checked],
|
|
140
|
+
:host(:not(:disabled)[invalid]) [part~=thumb]:not([part~=checked]) {
|
|
136
141
|
background: var(--error-color);
|
|
137
142
|
}
|
|
138
143
|
:host(:not([disabled])[invalid]) [part=focused][part~=control],
|
|
139
|
-
:host(:not([disabled])[invalid]) [part=focused][part~=control][part~=checked]
|
|
144
|
+
:host(:not([disabled])[invalid]) [part=focused][part~=control][part~=checked],
|
|
145
|
+
:host(:not(:disabled)[invalid]) [part=focused][part~=control],
|
|
146
|
+
:host(:not(:disabled)[invalid]) [part=focused][part~=control][part~=checked] {
|
|
140
147
|
-webkit-box-shadow: 0 0 0 0.125rem var(--error-color-hover);
|
|
141
148
|
box-shadow: 0 0 0 0.125rem var(--error-color-hover);
|
|
142
149
|
}
|
|
143
|
-
:host(:not([disabled])[invalid]) [part~=label]
|
|
150
|
+
:host(:not([disabled])[invalid]) [part~=label],
|
|
151
|
+
:host(:not(:disabled)[invalid]) [part~=label] {
|
|
144
152
|
color: var(--label-invalid-color);
|
|
145
153
|
}
|
|
146
154
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/switch.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"switch.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/switch.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n:host {\n --size: 2rem;\n --thumb-size: 0.625rem;\n --border-size: 0.0625rem;\n --thumb-offset: 0.125rem;\n --label-gap: 0.5rem;\n --resting-elevation: var(--ig-switch-resting-elevation, var(--ig-elevation-2));\n --hover-elevation: var(--ig-switch-hover-elevation, var(--ig-elevation-3));\n --disabled-elevation: var(--ig-switch-disabled-elevation, var(--ig-elevation-1));\n --border-color: var(--ig-switch-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-hover-color: var(--ig-switch-border-hover-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --border-disabled-color: var(--ig-switch-border-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-on-color: var(--ig-switch-border-on-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --border-on-hover-color: var(--ig-switch-border-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n --thumb-on-color: var(--ig-switch-thumb-on-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --track-on-color: var(--ig-switch-track-on-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --thumb-off-color: var(--ig-switch-thumb-off-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --track-disabled-color: var(--ig-switch-track-disabled-color, transparent);\n --track-on-disabled-color: var(--ig-switch-track-on-disabled-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n --track-off-color: var(--ig-switch-track-off-color, transparent);\n --thumb-disabled-color: var(--ig-switch-thumb-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --thumb-on-disabled-color: var(--ig-switch-thumb-on-disabled-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --label-color: var(--ig-switch-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --label-disabled-color: var(--ig-switch-label-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --label-invalid-color: var(--ig-switch-label-invalid-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --track-error-color: var(--ig-switch-track-error-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --thumb-on-error-color: var(--ig-switch-thumb-on-error-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n --border-radius-track: var(--ig-switch-border-radius-track, clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem));\n --border-radius-thumb: var(--ig-switch-border-radius-thumb, clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem));\n --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem, 0rem, 1.5rem);\n --focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));\n --track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n --focus-fill-color: var(--ig-switch-focus-fill-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n --ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n\n[part~=focused] [part~=thumb]:not([part~=checked]) {\n background: var(--focus-fill-color);\n}\n\n[part~=focused][part~=control] {\n -webkit-box-shadow: 0 0 0 0.125rem hsla(var(--ig-primary-100), var(--ig-primary-a));\n box-shadow: 0 0 0 0.125rem hsla(var(--ig-primary-100), var(--ig-primary-a));\n border-color: var(--focus-fill-color);\n}\n\n[part~=focused][part~=control][part~=checked] {\n -webkit-box-shadow: 0 0 0 0.125rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n box-shadow: 0 0 0 0.125rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n}\n\n[part~=control] {\n border-radius: var(--border-radius-track);\n width: var(--size);\n height: 1rem;\n border: var(--border-size) solid var(--border-color);\n background: var(--track-off-color);\n -webkit-transition: all 0.2s ease-in-out;\n transition: all 0.2s ease-in-out;\n}\n\n[part~=control][part~=checked] {\n background: var(--track-on-color);\n border-color: var(--border-on-color);\n}\n\n[part~=thumb] {\n border-radius: var(--border-radius-thumb);\n width: var(--thumb-size);\n height: var(--thumb-size);\n min-width: var(--thumb-size);\n -webkit-margin-start: var(--thumb-offset);\n margin-inline-start: var(--thumb-offset);\n background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n[part~=thumb][part~=checked] {\n background: var(--thumb-on-color);\n -webkit-margin-start: calc(var(--size) - var(--thumb-size) - var(--thumb-offset) - var(--border-size) * 2);\n margin-inline-start: calc(var(--size) - var(--thumb-size) - var(--thumb-offset) - var(--border-size) * 2);\n}\n\n[part~=label] {\n font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n font-size: var(--ig-subtitle-1-font-size);\n font-weight: var(--ig-subtitle-1-font-weight);\n font-style: var(--ig-subtitle-1-font-style);\n line-height: var(--ig-subtitle-1-line-height);\n letter-spacing: var(--ig-subtitle-1-letter-spacing);\n text-transform: var(--ig-subtitle-1-text-transform);\n margin-top: var(--ig-subtitle-1-margin-top);\n margin-bottom: var(--ig-subtitle-1-margin-bottom);\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n:host(:not([disabled])[invalid]) [part~=control],\n:host(:not([disabled])[invalid]) [part~=control][part~=checked],\n:host(:not(:disabled)[invalid]) [part~=control],\n:host(:not(:disabled)[invalid]) [part~=control][part~=checked] {\n border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control][part~=checked],\n:host(:not([disabled])[invalid]) [part~=thumb]:not([part~=checked]),\n:host(:not(:disabled)[invalid]) [part~=control][part~=checked],\n:host(:not(:disabled)[invalid]) [part~=thumb]:not([part~=checked]) {\n background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=focused][part~=control],\n:host(:not([disabled])[invalid]) [part=focused][part~=control][part~=checked],\n:host(:not(:disabled)[invalid]) [part=focused][part~=control],\n:host(:not(:disabled)[invalid]) [part=focused][part~=control][part~=checked] {\n -webkit-box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]) [part~=label],\n:host(:not(:disabled)[invalid]) [part~=label] {\n color: var(--label-invalid-color);\n}\n\n:host([disabled]) [part~=control] {\n background: var(--track-disabled-color);\n border-color: var(--border-disabled-color);\n}\n:host([disabled]) [part~=control][part~=checked] {\n background: var(--track-on-disabled-color);\n border-color: var(--track-on-disabled-color);\n}\n:host([disabled]) [part~=thumb] {\n background: var(--thumb-disabled-color);\n}\n:host([disabled]) [part~=thumb][part~=checked] {\n background: var(--thumb-on-disabled-color);\n}\n:host([disabled]) [part~=label] {\n color: var(--label-disabled-color);\n}`;\n"]}
|
|
@@ -65,6 +65,7 @@ export const styles = css `:host {
|
|
|
65
65
|
--border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem, 0rem, 1.5rem);
|
|
66
66
|
--focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
|
|
67
67
|
--track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
|
|
68
|
+
--ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
[part~=control] {
|
|
@@ -125,56 +126,73 @@ export const styles = css `:host {
|
|
|
125
126
|
height: calc(100% + (0.125rem * 2));
|
|
126
127
|
}
|
|
127
128
|
|
|
128
|
-
:host(:not([disabled]):hover) [part~=control]
|
|
129
|
+
:host(:not([disabled]):hover) [part~=control],
|
|
130
|
+
:host(:not(:disabled):hover) [part~=control] {
|
|
129
131
|
border-color: var(--border-hover-color);
|
|
130
132
|
}
|
|
131
|
-
:host(:not([disabled]):hover) [part~=control][part~=checked]
|
|
133
|
+
:host(:not([disabled]):hover) [part~=control][part~=checked],
|
|
134
|
+
:host(:not(:disabled):hover) [part~=control][part~=checked] {
|
|
132
135
|
background: var(--track-on-hover-color);
|
|
133
136
|
border-color: var(--border-on-hover-color);
|
|
134
137
|
}
|
|
135
|
-
:host(:not([disabled]):hover) [part~=thumb]
|
|
138
|
+
:host(:not([disabled]):hover) [part~=thumb],
|
|
139
|
+
:host(:not(:disabled):hover) [part~=thumb] {
|
|
136
140
|
background: var(--border-hover-color);
|
|
137
141
|
}
|
|
138
|
-
:host(:not([disabled]):hover) [part~=thumb][part~=checked]
|
|
142
|
+
:host(:not([disabled]):hover) [part~=thumb][part~=checked],
|
|
143
|
+
:host(:not(:disabled):hover) [part~=thumb][part~=checked] {
|
|
139
144
|
background: var(--thumb-on-color);
|
|
140
145
|
}
|
|
141
146
|
|
|
142
|
-
:host(:not([disabled])[invalid]) [part~=control][part~=checked]
|
|
147
|
+
:host(:not([disabled])[invalid]) [part~=control][part~=checked],
|
|
148
|
+
:host(:not(:disabled)[invalid]) [part~=control][part~=checked] {
|
|
143
149
|
background: var(--track-error-color);
|
|
144
150
|
}
|
|
145
151
|
:host(:not([disabled])[invalid]) [part~=control],
|
|
146
|
-
:host(:not([disabled])[invalid]) [part~=control][part~=checked]
|
|
152
|
+
:host(:not([disabled])[invalid]) [part~=control][part~=checked],
|
|
153
|
+
:host(:not(:disabled)[invalid]) [part~=control],
|
|
154
|
+
:host(:not(:disabled)[invalid]) [part~=control][part~=checked] {
|
|
147
155
|
border-color: var(--error-color);
|
|
148
156
|
}
|
|
149
|
-
:host(:not([disabled])[invalid]) [part~=thumb]
|
|
157
|
+
:host(:not([disabled])[invalid]) [part~=thumb],
|
|
158
|
+
:host(:not(:disabled)[invalid]) [part~=thumb] {
|
|
150
159
|
background: var(--error-color);
|
|
151
160
|
}
|
|
152
161
|
:host(:not([disabled])[invalid]) [part~=control][part~=focused],
|
|
153
|
-
:host(:not([disabled])[invalid]) [part~=control][part~=checked][part~=focused]
|
|
162
|
+
:host(:not([disabled])[invalid]) [part~=control][part~=checked][part~=focused],
|
|
163
|
+
:host(:not(:disabled)[invalid]) [part~=control][part~=focused],
|
|
164
|
+
:host(:not(:disabled)[invalid]) [part~=control][part~=checked][part~=focused] {
|
|
154
165
|
-webkit-box-shadow: 0 0 0 0.125rem var(--error-color-hover);
|
|
155
166
|
box-shadow: 0 0 0 0.125rem var(--error-color-hover);
|
|
156
167
|
}
|
|
157
|
-
:host(:not([disabled])[invalid]) [part~=thumb][part~=checked]
|
|
168
|
+
:host(:not([disabled])[invalid]) [part~=thumb][part~=checked],
|
|
169
|
+
:host(:not(:disabled)[invalid]) [part~=thumb][part~=checked] {
|
|
158
170
|
background: var(--thumb-on-error-color);
|
|
159
171
|
}
|
|
160
|
-
:host(:not([disabled])[invalid]) [part~=label]
|
|
172
|
+
:host(:not([disabled])[invalid]) [part~=label],
|
|
173
|
+
:host(:not(:disabled)[invalid]) [part~=label] {
|
|
161
174
|
color: var(--label-invalid-color);
|
|
162
175
|
}
|
|
163
176
|
|
|
164
|
-
:host([disabled]) [part~=label]
|
|
177
|
+
:host([disabled]) [part~=label],
|
|
178
|
+
:host(:disabled) [part~=label] {
|
|
165
179
|
color: var(--label-disabled-color);
|
|
166
180
|
}
|
|
167
|
-
:host([disabled]) [part~=control]
|
|
181
|
+
:host([disabled]) [part~=control],
|
|
182
|
+
:host(:disabled) [part~=control] {
|
|
168
183
|
background: var(--track-disabled-color);
|
|
169
184
|
border-color: var(--border-disabled-color);
|
|
170
185
|
}
|
|
171
|
-
:host([disabled]) [part~=control][part~=checked]
|
|
186
|
+
:host([disabled]) [part~=control][part~=checked],
|
|
187
|
+
:host(:disabled) [part~=control][part~=checked] {
|
|
172
188
|
background: var(--track-on-disabled-color);
|
|
173
189
|
}
|
|
174
|
-
:host([disabled]) [part~=thumb]
|
|
190
|
+
:host([disabled]) [part~=thumb],
|
|
191
|
+
:host(:disabled) [part~=thumb] {
|
|
175
192
|
background: var(--thumb-disabled-color);
|
|
176
193
|
}
|
|
177
|
-
:host([disabled]) [part~=thumb][part~=checked]
|
|
194
|
+
:host([disabled]) [part~=thumb][part~=checked],
|
|
195
|
+
:host(:disabled) [part~=thumb][part~=checked] {
|
|
178
196
|
background: var(--thumb-on-disabled-color);
|
|
179
197
|
}`;
|
|
180
198
|
//# sourceMappingURL=switch.fluent.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/switch.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"switch.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/checkbox/themes/light/switch.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmMvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n:host {\n --size: 2.5rem;\n --thumb-size: 0.75rem;\n --border-size: 0.125rem;\n --thumb-offset: calc(var(--thumb-size) / 2 - 0.125rem);\n --label-gap: 0.5rem;\n --resting-elevation: var(--ig-switch-resting-elevation, var(--ig-elevation-2));\n --hover-elevation: var(--ig-switch-hover-elevation, var(--ig-elevation-3));\n --disabled-elevation: var(--ig-switch-disabled-elevation, var(--ig-elevation-1));\n --border-color: var(--ig-switch-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --border-hover-color: var(--ig-switch-border-hover-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --border-disabled-color: var(--ig-switch-border-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-on-color: var(--ig-switch-border-on-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --border-on-hover-color: var(--ig-switch-border-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n --thumb-on-color: var(--ig-switch-thumb-on-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --track-on-color: var(--ig-switch-track-on-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --thumb-off-color: var(--ig-switch-thumb-off-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --track-disabled-color: var(--ig-switch-track-disabled-color, transparent);\n --track-on-disabled-color: var(--ig-switch-track-on-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --track-off-color: var(--ig-switch-track-off-color, transparent);\n --thumb-disabled-color: var(--ig-switch-thumb-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --thumb-on-disabled-color: var(--ig-switch-thumb-on-disabled-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --label-color: var(--ig-switch-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --label-disabled-color: var(--ig-switch-label-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --label-invalid-color: var(--ig-switch-label-invalid-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n --track-error-color: var(--ig-switch-track-error-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n --thumb-on-error-color: var(--ig-switch-thumb-on-error-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --border-radius-track: var(--ig-switch-border-radius-track, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.625rem), 0.625rem));\n --border-radius-thumb: var(--ig-switch-border-radius-thumb, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.625rem), 0.625rem));\n --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem, 0rem, 1.5rem);\n --focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n --ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n\n[part~=control] {\n border-radius: var(--border-radius-track);\n width: var(--size);\n height: 1.25rem;\n background: var(--track-off-color);\n border: 0.0625rem solid var(--border-color);\n}\n\n[part~=control][part~=checked] {\n background: var(--track-on-color);\n border-color: var(--border-on-color);\n}\n\n[part~=thumb] {\n border-radius: var(--border-radius-thumb);\n width: var(--thumb-size);\n height: var(--thumb-size);\n min-width: var(--thumb-size);\n -webkit-margin-start: var(--thumb-offset);\n margin-inline-start: var(--thumb-offset);\n background: var(--thumb-off-color);\n}\n\n[part~=thumb][part~=checked] {\n -webkit-margin-start: calc(100% - var(--thumb-size) - var(--thumb-offset));\n margin-inline-start: calc(100% - var(--thumb-size) - var(--thumb-offset));\n background: var(--thumb-on-color);\n}\n\n[part~=label] {\n font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n color: var(--label-color);\n -webkit-transition: all 0.2s ease-in-out;\n transition: all 0.2s ease-in-out;\n}\n\n[part~=focused] {\n position: relative;\n}\n[part~=focused]::after {\n content: \"\";\n position: absolute;\n top: -0.125rem;\n left: -0.125rem;\n -webkit-box-shadow: 0 0 0 0.0625rem var(--focus-outline-color);\n box-shadow: 0 0 0 0.0625rem var(--focus-outline-color);\n width: calc(100% + (0.125rem * 2));\n height: calc(100% + (0.125rem * 2));\n}\n\n:host(:not([disabled]):hover) [part~=control],\n:host(:not(:disabled):hover) [part~=control] {\n border-color: var(--border-hover-color);\n}\n:host(:not([disabled]):hover) [part~=control][part~=checked],\n:host(:not(:disabled):hover) [part~=control][part~=checked] {\n background: var(--track-on-hover-color);\n border-color: var(--border-on-hover-color);\n}\n:host(:not([disabled]):hover) [part~=thumb],\n:host(:not(:disabled):hover) [part~=thumb] {\n background: var(--border-hover-color);\n}\n:host(:not([disabled]):hover) [part~=thumb][part~=checked],\n:host(:not(:disabled):hover) [part~=thumb][part~=checked] {\n background: var(--thumb-on-color);\n}\n\n:host(:not([disabled])[invalid]) [part~=control][part~=checked],\n:host(:not(:disabled)[invalid]) [part~=control][part~=checked] {\n background: var(--track-error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control],\n:host(:not([disabled])[invalid]) [part~=control][part~=checked],\n:host(:not(:disabled)[invalid]) [part~=control],\n:host(:not(:disabled)[invalid]) [part~=control][part~=checked] {\n border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=thumb],\n:host(:not(:disabled)[invalid]) [part~=thumb] {\n background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control][part~=focused],\n:host(:not([disabled])[invalid]) [part~=control][part~=checked][part~=focused],\n:host(:not(:disabled)[invalid]) [part~=control][part~=focused],\n:host(:not(:disabled)[invalid]) [part~=control][part~=checked][part~=focused] {\n -webkit-box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n box-shadow: 0 0 0 0.125rem var(--error-color-hover);\n}\n:host(:not([disabled])[invalid]) [part~=thumb][part~=checked],\n:host(:not(:disabled)[invalid]) [part~=thumb][part~=checked] {\n background: var(--thumb-on-error-color);\n}\n:host(:not([disabled])[invalid]) [part~=label],\n:host(:not(:disabled)[invalid]) [part~=label] {\n color: var(--label-invalid-color);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n color: var(--label-disabled-color);\n}\n:host([disabled]) [part~=control],\n:host(:disabled) [part~=control] {\n background: var(--track-disabled-color);\n border-color: var(--border-disabled-color);\n}\n:host([disabled]) [part~=control][part~=checked],\n:host(:disabled) [part~=control][part~=checked] {\n background: var(--track-on-disabled-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n background: var(--thumb-disabled-color);\n}\n:host([disabled]) [part~=thumb][part~=checked],\n:host(:disabled) [part~=thumb][part~=checked] {\n background: var(--thumb-on-disabled-color);\n}`;\n"]}
|