@material/web 1.0.0-pre.6 → 1.0.0-pre.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -8
- package/aria/aria.d.ts +43 -0
- package/aria/aria.js +80 -0
- package/aria/aria.js.map +1 -0
- package/aria/delegate.d.ts +37 -0
- package/aria/delegate.js +53 -0
- package/aria/delegate.js.map +1 -0
- package/badge/badge.d.ts +0 -1
- package/badge/badge.js +0 -1
- package/badge/badge.js.map +1 -1
- package/badge/lib/badge.d.ts +5 -7
- package/badge/lib/badge.js +9 -12
- package/badge/lib/badge.js.map +1 -1
- package/button/lib/_elevated-button.scss +35 -6
- package/button/lib/_elevation.scss +13 -3
- package/button/lib/_filled-button.scss +35 -3
- package/button/lib/_outlined-button.scss +35 -6
- package/button/lib/_shared.scss +4 -2
- package/button/lib/_text-button.scss +35 -6
- package/button/lib/_tonal-button.scss +34 -7
- package/button/lib/button.d.ts +24 -38
- package/button/lib/button.js +40 -89
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-button.d.ts +6 -4
- package/button/lib/elevated-button.js.map +1 -1
- package/button/lib/elevated-styles.css.js +1 -1
- package/button/lib/elevated-styles.css.js.map +1 -1
- package/button/lib/filled-button.d.ts +6 -4
- package/button/lib/filled-button.js.map +1 -1
- package/button/lib/filled-styles.css.js +1 -1
- package/button/lib/filled-styles.css.js.map +1 -1
- package/button/lib/outlined-button.d.ts +6 -4
- package/button/lib/outlined-button.js.map +1 -1
- package/button/lib/outlined-styles.css.js +1 -1
- package/button/lib/outlined-styles.css.js.map +1 -1
- package/button/lib/shared-elevation-styles.css.js +1 -1
- package/button/lib/shared-elevation-styles.css.js.map +1 -1
- package/button/lib/shared-styles.css.js +1 -1
- package/button/lib/shared-styles.css.js.map +1 -1
- package/button/lib/text-button.d.ts +5 -2
- package/button/lib/text-button.js.map +1 -1
- package/button/lib/text-styles.css.js +1 -1
- package/button/lib/text-styles.css.js.map +1 -1
- package/button/lib/tonal-button.d.ts +6 -4
- package/button/lib/tonal-button.js.map +1 -1
- package/button/lib/tonal-styles.css.js +1 -1
- package/button/lib/tonal-styles.css.js.map +1 -1
- package/checkbox/lib/_checkbox.scss +48 -47
- package/checkbox/lib/checkbox-styles.css.js +1 -1
- package/checkbox/lib/checkbox-styles.css.js.map +1 -1
- package/checkbox/lib/checkbox.d.ts +2 -7
- package/checkbox/lib/checkbox.js +35 -62
- package/checkbox/lib/checkbox.js.map +1 -1
- package/checkbox/lib/forced-colors-styles.css.js +1 -1
- package/checkbox/lib/forced-colors-styles.css.js.map +1 -1
- package/chips/_filter-chip.scss +6 -0
- package/chips/assist-chip.js +2 -1
- package/chips/assist-chip.js.map +1 -1
- package/chips/filter-chip.d.ts +20 -0
- package/chips/filter-chip.js +25 -0
- package/chips/filter-chip.js.map +1 -0
- package/chips/lib/_assist-chip.scss +37 -3
- package/chips/lib/_elevated.scss +60 -0
- package/chips/lib/_filter-chip.scss +175 -0
- package/chips/lib/_shared.scss +48 -84
- package/chips/lib/_suggestion-chip.scss +36 -5
- package/chips/lib/assist-chip.d.ts +12 -0
- package/chips/lib/assist-chip.js +64 -0
- package/chips/lib/assist-chip.js.map +1 -1
- package/chips/lib/assist-styles.css.js +1 -1
- package/chips/lib/assist-styles.css.js.map +1 -1
- package/chips/lib/chip.d.ts +24 -16
- package/chips/lib/chip.js +53 -74
- package/chips/lib/chip.js.map +1 -1
- package/chips/lib/elevated-styles.css.js +9 -0
- package/chips/lib/elevated-styles.css.js.map +1 -0
- package/{fab/lib/fab-extended-styles.scss → chips/lib/elevated-styles.scss} +3 -3
- package/chips/lib/filter-chip.d.ts +26 -0
- package/chips/lib/filter-chip.js +80 -0
- package/chips/lib/filter-chip.js.map +1 -0
- package/chips/lib/filter-styles.css.js +9 -0
- package/chips/lib/filter-styles.css.js.map +1 -0
- package/chips/lib/filter-styles.scss +10 -0
- package/chips/lib/shared-styles.css.js +1 -1
- package/chips/lib/shared-styles.css.js.map +1 -1
- package/chips/lib/suggestion-chip.d.ts +2 -2
- package/chips/lib/suggestion-chip.js +4 -2
- package/chips/lib/suggestion-chip.js.map +1 -1
- package/chips/lib/suggestion-styles.css.js +1 -1
- package/chips/lib/suggestion-styles.css.js.map +1 -1
- package/chips/suggestion-chip.js +2 -1
- package/chips/suggestion-chip.js.map +1 -1
- package/circularprogress/harness.d.ts +1 -0
- package/circularprogress/harness.js +4 -0
- package/circularprogress/harness.js.map +1 -1
- package/circularprogress/lib/_circular-progress.scss +13 -7
- package/circularprogress/lib/circular-progress-styles.css.js +1 -1
- package/circularprogress/lib/circular-progress-styles.css.js.map +1 -1
- package/circularprogress/lib/circular-progress.d.ts +5 -7
- package/circularprogress/lib/circular-progress.js +17 -21
- package/circularprogress/lib/circular-progress.js.map +1 -1
- package/dialog/lib/_dialog.scss +8 -9
- package/dialog/lib/_tokens.scss +0 -1
- package/dialog/lib/dialog-styles.css.js +1 -1
- package/dialog/lib/dialog-styles.css.js.map +1 -1
- package/dialog/lib/dialog.d.ts +10 -10
- package/dialog/lib/dialog.js +33 -56
- package/dialog/lib/dialog.js.map +1 -1
- package/divider/lib/divider.js +4 -7
- package/divider/lib/divider.js.map +1 -1
- package/elevation/lib/_elevation.scss +5 -7
- package/elevation/lib/elevation-styles.css.js +1 -1
- package/elevation/lib/elevation-styles.css.js.map +1 -1
- package/elevation/lib/elevation.d.ts +1 -1
- package/elevation/lib/elevation.js.map +1 -1
- package/fab/_fab.scss +1 -0
- package/fab/branded-fab.d.ts +56 -0
- package/fab/branded-fab.js +56 -0
- package/fab/branded-fab.js.map +1 -0
- package/fab/fab.d.ts +25 -5
- package/fab/fab.js +27 -10
- package/fab/fab.js.map +1 -1
- package/fab/harness.d.ts +1 -2
- package/fab/harness.js +1 -1
- package/fab/harness.js.map +1 -1
- package/fab/lib/_fab-branded.scss +81 -0
- package/fab/lib/_fab.scss +221 -19
- package/fab/lib/_shared.scss +161 -131
- package/fab/lib/fab-branded-styles.css.d.ts +1 -0
- package/fab/lib/fab-branded-styles.css.js +9 -0
- package/fab/lib/fab-branded-styles.css.js.map +1 -0
- package/fab/lib/fab-branded-styles.scss +10 -0
- package/fab/lib/fab-styles.css.js +1 -1
- package/fab/lib/fab-styles.css.js.map +1 -1
- package/fab/lib/fab.d.ts +18 -10
- package/fab/lib/fab.js +19 -12
- package/fab/lib/fab.js.map +1 -1
- package/fab/lib/forced-colors-styles.css.d.ts +1 -0
- package/fab/lib/forced-colors-styles.css.js +9 -0
- package/fab/lib/forced-colors-styles.css.js.map +1 -0
- package/fab/lib/forced-colors-styles.scss +26 -0
- package/fab/lib/shared-styles.css.d.ts +1 -0
- package/fab/lib/shared-styles.css.js +9 -0
- package/fab/lib/shared-styles.css.js.map +1 -0
- package/fab/lib/{fab-shared-styles.scss → shared-styles.scss} +1 -1
- package/fab/lib/shared.d.ts +49 -0
- package/fab/lib/shared.js +113 -0
- package/fab/lib/shared.js.map +1 -0
- package/field/lib/_filled-field.scss +47 -12
- package/field/lib/_outlined-field.scss +39 -12
- package/field/lib/field.js +14 -27
- package/field/lib/field.js.map +1 -1
- package/field/lib/filled-styles.css.js +1 -1
- package/field/lib/filled-styles.css.js.map +1 -1
- package/field/lib/outlined-styles.css.js +1 -1
- package/field/lib/outlined-styles.css.js.map +1 -1
- package/focus/focus-ring.d.ts +2 -1
- package/focus/focus-ring.js +2 -1
- package/focus/focus-ring.js.map +1 -1
- package/focus/lib/_focus-ring.scss +49 -34
- package/focus/lib/focus-ring-styles.css.js +1 -1
- package/focus/lib/focus-ring-styles.css.js.map +1 -1
- package/focus/lib/focus-ring.d.ts +59 -12
- package/focus/lib/focus-ring.js +118 -14
- package/focus/lib/focus-ring.js.map +1 -1
- package/icon/icon.d.ts +0 -1
- package/icon/icon.js +0 -1
- package/icon/icon.js.map +1 -1
- package/icon/lib/_icon.scss +2 -0
- package/icon/lib/icon-styles.css.js +1 -1
- package/icon/lib/icon-styles.css.js.map +1 -1
- package/icon/lib/icon.d.ts +5 -4
- package/icon/lib/icon.js +3 -2
- package/icon/lib/icon.js.map +1 -1
- package/iconbutton/filled-icon-button.d.ts +6 -2
- package/iconbutton/filled-icon-button.js.map +1 -1
- package/iconbutton/filled-tonal-icon-button.d.ts +6 -2
- package/iconbutton/filled-tonal-icon-button.js.map +1 -1
- package/iconbutton/harness.d.ts +1 -1
- package/iconbutton/harness.js +4 -1
- package/iconbutton/harness.js.map +1 -1
- package/iconbutton/lib/_filled-icon-button.scss +38 -13
- package/iconbutton/lib/_filled-tonal-icon-button.scss +38 -11
- package/iconbutton/lib/_outlined-icon-button.scss +38 -13
- package/iconbutton/lib/_shared.scss +4 -6
- package/iconbutton/lib/_standard-icon-button.scss +14 -14
- package/iconbutton/lib/filled-styles.css.js +1 -1
- package/iconbutton/lib/filled-styles.css.js.map +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
- package/iconbutton/lib/icon-button.d.ts +17 -25
- package/iconbutton/lib/icon-button.js +37 -73
- package/iconbutton/lib/icon-button.js.map +1 -1
- package/iconbutton/lib/outlined-styles.css.js +1 -1
- package/iconbutton/lib/outlined-styles.css.js.map +1 -1
- package/iconbutton/lib/shared-styles.css.js +1 -1
- package/iconbutton/lib/shared-styles.css.js.map +1 -1
- package/iconbutton/lib/standard-styles.css.js +1 -1
- package/iconbutton/lib/standard-styles.css.js.map +1 -1
- package/iconbutton/outlined-icon-button.d.ts +5 -2
- package/iconbutton/outlined-icon-button.js.map +1 -1
- package/iconbutton/standard-icon-button.d.ts +5 -2
- package/iconbutton/standard-icon-button.js.map +1 -1
- package/linearprogress/_linear-progress.scss +6 -0
- package/linearprogress/harness.d.ts +13 -0
- package/linearprogress/harness.js +18 -0
- package/linearprogress/harness.js.map +1 -0
- package/linearprogress/lib/_linear-progress.scss +386 -0
- package/linearprogress/lib/linear-progress-styles.css.d.ts +1 -0
- package/linearprogress/lib/linear-progress-styles.css.js +9 -0
- package/linearprogress/lib/linear-progress-styles.css.js.map +1 -0
- package/linearprogress/lib/linear-progress-styles.scss +8 -0
- package/linearprogress/lib/linear-progress.d.ts +35 -0
- package/linearprogress/lib/linear-progress.js +127 -0
- package/linearprogress/lib/linear-progress.js.map +1 -0
- package/linearprogress/linear-progress.d.ts +23 -0
- package/linearprogress/linear-progress.js +26 -0
- package/linearprogress/linear-progress.js.map +1 -0
- package/list/lib/_list.scss +9 -50
- package/list/lib/list-styles.css.js +1 -1
- package/list/lib/list-styles.css.js.map +1 -1
- package/list/lib/list.d.ts +8 -15
- package/list/lib/list.js +20 -45
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/_list-item.scss +17 -72
- package/list/lib/listitem/forced-colors-styles.css.js +1 -1
- package/list/lib/listitem/forced-colors-styles.css.js.map +1 -1
- package/list/lib/listitem/list-item-styles.css.js +1 -1
- package/list/lib/listitem/list-item-styles.css.js.map +1 -1
- package/list/lib/listitem/list-item.d.ts +29 -31
- package/list/lib/listitem/list-item.js +26 -80
- package/list/lib/listitem/list-item.js.map +1 -1
- package/list/lib/listitemlink/list-item-link.js +5 -9
- package/list/lib/listitemlink/list-item-link.js.map +1 -1
- package/menu/lib/_menu.scss +9 -29
- package/menu/lib/menu-styles.css.js +1 -1
- package/menu/lib/menu-styles.css.js.map +1 -1
- package/menu/lib/menu.d.ts +32 -41
- package/menu/lib/menu.js +51 -82
- package/menu/lib/menu.js.map +1 -1
- package/menu/lib/menuitem/_menu-item.scss +16 -33
- package/menu/lib/menuitem/menu-item-styles.css.js +1 -1
- package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -1
- package/menu/lib/menuitem/menu-item.d.ts +1 -1
- package/menu/lib/menuitem/menu-item.js +4 -6
- package/menu/lib/menuitem/menu-item.js.map +1 -1
- package/menu/lib/menuitemlink/menu-item-link.d.ts +0 -2
- package/menu/lib/menuitemlink/menu-item-link.js +3 -6
- package/menu/lib/menuitemlink/menu-item-link.js.map +1 -1
- package/menu/lib/shared.d.ts +20 -2
- package/menu/lib/shared.js +18 -0
- package/menu/lib/shared.js.map +1 -1
- package/menu/lib/submenuitem/sub-menu-item.d.ts +16 -13
- package/menu/lib/submenuitem/sub-menu-item.js +27 -18
- package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/lib/typeaheadController.d.ts +9 -9
- package/menu/lib/typeaheadController.js.map +1 -1
- package/navigationbar/lib/_navigation-bar.scss +7 -1
- package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
- package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
- package/navigationbar/lib/navigation-bar.d.ts +6 -6
- package/navigationbar/lib/navigation-bar.js +17 -18
- package/navigationbar/lib/navigation-bar.js.map +1 -1
- package/navigationbar/navigation-bar.d.ts +0 -1
- package/navigationbar/navigation-bar.js +0 -1
- package/navigationbar/navigation-bar.js.map +1 -1
- package/navigationdrawer/lib/_navigation-drawer-modal.scss +0 -3
- package/navigationdrawer/lib/_navigation-drawer.scss +0 -3
- package/navigationdrawer/lib/_shared.scss +1 -4
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal.d.ts +7 -12
- package/navigationdrawer/lib/navigation-drawer-modal.js +19 -41
- package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer.d.ts +6 -10
- package/navigationdrawer/lib/navigation-drawer.js +17 -38
- package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
- package/navigationdrawer/lib/shared-styles.css.js +1 -1
- package/navigationdrawer/lib/shared-styles.css.js.map +1 -1
- package/navigationdrawer/navigation-drawer-modal.d.ts +0 -1
- package/navigationdrawer/navigation-drawer-modal.js +0 -1
- package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
- package/navigationdrawer/navigation-drawer.d.ts +0 -1
- package/navigationdrawer/navigation-drawer.js +0 -1
- package/navigationdrawer/navigation-drawer.js.map +1 -1
- package/navigationtab/lib/_navigation-tab.scss +2 -2
- package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
- package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
- package/navigationtab/lib/navigation-tab.d.ts +16 -29
- package/navigationtab/lib/navigation-tab.js +49 -88
- package/navigationtab/lib/navigation-tab.js.map +1 -1
- package/navigationtab/lib/state.d.ts +1 -1
- package/navigationtab/lib/state.js.map +1 -1
- package/navigationtab/navigation-tab.d.ts +0 -1
- package/navigationtab/navigation-tab.js +0 -1
- package/navigationtab/navigation-tab.js.map +1 -1
- package/package.json +1 -1
- package/radio/lib/_radio.scss +1 -1
- package/radio/lib/radio-styles.css.js +1 -1
- package/radio/lib/radio-styles.css.js.map +1 -1
- package/radio/lib/radio.d.ts +2 -8
- package/radio/lib/radio.js +31 -58
- package/radio/lib/radio.js.map +1 -1
- package/ripple/lib/ripple.js +11 -13
- package/ripple/lib/ripple.js.map +1 -1
- package/segmentedbutton/lib/outlined-segmented-button.d.ts +16 -7
- package/segmentedbutton/lib/outlined-segmented-button.js +3 -3
- package/segmentedbutton/lib/outlined-segmented-button.js.map +1 -1
- package/segmentedbutton/lib/segmented-button.d.ts +28 -40
- package/segmentedbutton/lib/segmented-button.js +42 -96
- package/segmentedbutton/lib/segmented-button.js.map +1 -1
- package/segmentedbutton/outlined-segmented-button.d.ts +0 -1
- package/segmentedbutton/outlined-segmented-button.js +0 -1
- package/segmentedbutton/outlined-segmented-button.js.map +1 -1
- package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +32 -13
- package/segmentedbuttonset/lib/outlined-segmented-button-set.d.ts +6 -4
- package/segmentedbuttonset/lib/outlined-segmented-button-set.js +3 -2
- package/segmentedbuttonset/lib/outlined-segmented-button-set.js.map +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
- package/segmentedbuttonset/lib/segmented-button-set.d.ts +3 -9
- package/segmentedbuttonset/lib/segmented-button-set.js +14 -20
- package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
- package/segmentedbuttonset/outlined-segmented-button-set.d.ts +0 -1
- package/segmentedbuttonset/outlined-segmented-button-set.js +0 -1
- package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
- package/select/_filled-select.scss +6 -0
- package/select/_outlined-select.scss +6 -0
- package/select/filled-select.d.ts +41 -0
- package/select/filled-select.js +46 -0
- package/select/filled-select.js.map +1 -0
- package/select/harness.d.ts +24 -0
- package/select/harness.js +53 -0
- package/select/harness.js.map +1 -0
- package/select/lib/_filled-select.scss +222 -0
- package/select/lib/_outlined-select.scss +180 -0
- package/select/lib/_shared.scss +48 -0
- package/select/lib/filled-forced-colors-styles.css.d.ts +1 -0
- package/select/lib/filled-forced-colors-styles.css.js +9 -0
- package/select/lib/filled-forced-colors-styles.css.js.map +1 -0
- package/select/lib/filled-forced-colors-styles.scss +29 -0
- package/select/lib/filled-select-styles.css.d.ts +1 -0
- package/select/lib/filled-select-styles.css.js +9 -0
- package/select/lib/filled-select-styles.css.js.map +1 -0
- package/select/lib/filled-select-styles.scss +10 -0
- package/select/lib/filled-select.d.ts +10 -0
- package/select/lib/filled-select.js +16 -0
- package/select/lib/filled-select.js.map +1 -0
- package/select/lib/outlined-forced-colors-styles.css.d.ts +1 -0
- package/select/lib/outlined-forced-colors-styles.css.js +9 -0
- package/select/lib/outlined-forced-colors-styles.css.js.map +1 -0
- package/select/lib/outlined-forced-colors-styles.scss +29 -0
- package/select/lib/outlined-select-styles.css.d.ts +1 -0
- package/select/lib/outlined-select-styles.css.js +9 -0
- package/select/lib/outlined-select-styles.css.js.map +1 -0
- package/select/lib/outlined-select-styles.scss +10 -0
- package/select/lib/outlined-select.d.ts +10 -0
- package/select/lib/outlined-select.js +16 -0
- package/select/lib/outlined-select.js.map +1 -0
- package/select/lib/select.d.ts +216 -0
- package/select/lib/select.js +589 -0
- package/select/lib/select.js.map +1 -0
- package/select/lib/selectoption/harness.d.ts +11 -0
- package/select/lib/selectoption/harness.js +12 -0
- package/select/lib/selectoption/harness.js.map +1 -0
- package/select/lib/selectoption/select-option.d.ts +30 -0
- package/select/lib/selectoption/select-option.js +71 -0
- package/select/lib/selectoption/select-option.js.map +1 -0
- package/select/lib/shared-styles.css.d.ts +1 -0
- package/select/lib/shared-styles.css.js +9 -0
- package/select/lib/shared-styles.css.js.map +1 -0
- package/select/lib/shared-styles.scss +10 -0
- package/select/lib/shared.d.ts +52 -0
- package/select/lib/shared.js +41 -0
- package/select/lib/shared.js.map +1 -0
- package/select/outlined-select.d.ts +41 -0
- package/select/outlined-select.js +46 -0
- package/select/outlined-select.js.map +1 -0
- package/select/select-option.d.ts +44 -0
- package/select/select-option.js +51 -0
- package/select/select-option.js.map +1 -0
- package/slider/harness.d.ts +2 -1
- package/slider/harness.js +14 -9
- package/slider/harness.js.map +1 -1
- package/slider/lib/_slider.scss +149 -167
- package/slider/lib/forced-colors-styles.css.js +1 -1
- package/slider/lib/forced-colors-styles.css.js.map +1 -1
- package/slider/lib/forced-colors-styles.scss +2 -2
- package/slider/lib/slider-styles.css.js +1 -1
- package/slider/lib/slider-styles.css.js.map +1 -1
- package/slider/lib/slider.d.ts +23 -57
- package/slider/lib/slider.js +77 -167
- package/slider/lib/slider.js.map +1 -1
- package/switch/lib/_switch.scss +63 -18
- package/switch/lib/switch-styles.css.js +1 -1
- package/switch/lib/switch-styles.css.js.map +1 -1
- package/switch/lib/switch.d.ts +0 -7
- package/switch/lib/switch.js +32 -79
- package/switch/lib/switch.js.map +1 -1
- package/textfield/harness.d.ts +1 -1
- package/textfield/harness.js.map +1 -1
- package/textfield/lib/_filled-text-field.scss +70 -14
- package/textfield/lib/_outlined-text-field.scss +60 -35
- package/textfield/lib/filled-forced-colors-styles.css.js +1 -1
- package/textfield/lib/filled-forced-colors-styles.css.js.map +1 -1
- package/textfield/lib/filled-styles.css.js +1 -1
- package/textfield/lib/filled-styles.css.js.map +1 -1
- package/textfield/lib/outlined-forced-colors-styles.css.js +1 -1
- package/textfield/lib/outlined-forced-colors-styles.css.js.map +1 -1
- package/textfield/lib/outlined-styles.css.js +1 -1
- package/textfield/lib/outlined-styles.css.js.map +1 -1
- package/textfield/lib/text-field.d.ts +1 -11
- package/textfield/lib/text-field.js +45 -115
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_index.scss +5 -18
- package/tokens/_md-comp-assist-chip.scss +25 -29
- package/tokens/_md-comp-checkbox.scss +78 -1
- package/tokens/_md-comp-circular-progress-indicator.scss +39 -13
- package/tokens/_md-comp-elevated-button.scss +0 -10
- package/tokens/_md-comp-elevation.scss +0 -4
- package/tokens/_md-comp-fab-branded.scss +84 -1
- package/tokens/_md-comp-fab.scss +249 -0
- package/tokens/_md-comp-filled-button.scss +0 -10
- package/{field/lib → tokens}/_md-comp-filled-field.scss +91 -9
- package/tokens/_md-comp-filled-icon-button.scss +46 -1
- package/tokens/_md-comp-filled-select.scss +124 -1
- package/tokens/_md-comp-filled-text-field.scss +93 -9
- package/tokens/_md-comp-filled-tonal-button.scss +0 -11
- package/tokens/_md-comp-filled-tonal-icon-button.scss +45 -3
- package/tokens/_md-comp-filter-chip.scss +103 -103
- package/tokens/_md-comp-focus-ring.scss +23 -24
- package/tokens/_md-comp-icon-button.scss +37 -1
- package/tokens/_md-comp-input-chip.scss +77 -95
- package/tokens/_md-comp-linear-progress-indicator.scss +31 -3
- package/tokens/_md-comp-list-item.scss +174 -0
- package/tokens/_md-comp-list.scss +81 -26
- package/tokens/_md-comp-menu-item.scss +50 -0
- package/tokens/_md-comp-menu.scss +29 -2
- package/tokens/_md-comp-outlined-button.scss +0 -10
- package/{field/lib → tokens}/_md-comp-outlined-field.scss +85 -9
- package/tokens/_md-comp-outlined-icon-button.scss +41 -1
- package/tokens/_md-comp-outlined-segmented-button.scss +57 -11
- package/tokens/_md-comp-outlined-select.scss +123 -1
- package/tokens/_md-comp-outlined-text-field.scss +85 -8
- package/tokens/_md-comp-slider.scss +13 -1
- package/tokens/_md-comp-suggestion-chip.scss +29 -30
- package/tokens/_md-comp-switch.scss +81 -1
- package/tokens/_md-comp-text-button.scss +0 -10
- package/tokens/_values.scss +2 -4
- package/types/aria.d.ts +59 -1
- package/actionelement/action-element.d.ts +0 -79
- package/actionelement/action-element.js +0 -97
- package/actionelement/action-element.js.map +0 -1
- package/button/lib/state.d.ts +0 -10
- package/button/lib/state.js +0 -7
- package/button/lib/state.js.map +0 -1
- package/controller/action-controller.d.ts +0 -147
- package/controller/action-controller.js +0 -286
- package/controller/action-controller.js.map +0 -1
- package/decorators/aria-property.d.ts +0 -32
- package/decorators/aria-property.js +0 -99
- package/decorators/aria-property.js.map +0 -1
- package/fab/_fab-extended.scss +0 -6
- package/fab/fab-extended.d.ts +0 -23
- package/fab/fab-extended.js +0 -29
- package/fab/fab-extended.js.map +0 -1
- package/fab/lib/_fab-extended.scss +0 -73
- package/fab/lib/fab-extended-styles.css.js +0 -9
- package/fab/lib/fab-extended-styles.css.js.map +0 -1
- package/fab/lib/fab-extended.d.ts +0 -19
- package/fab/lib/fab-extended.js +0 -28
- package/fab/lib/fab-extended.js.map +0 -1
- package/fab/lib/fab-shared-styles.css.js +0 -9
- package/fab/lib/fab-shared-styles.css.js.map +0 -1
- package/fab/lib/fab-shared.d.ts +0 -44
- package/fab/lib/fab-shared.js +0 -121
- package/fab/lib/fab-shared.js.map +0 -1
- package/focus/strong-focus.d.ts +0 -56
- package/focus/strong-focus.js +0 -96
- package/focus/strong-focus.js.map +0 -1
- package/sass/_shape.scss +0 -154
- package/slider/lib/_tokens.scss +0 -65
- package/tokens/_md-comp-extended-fab-branded.scss +0 -45
- package/tokens/_md-comp-extended-fab-primary.scss +0 -45
- package/tokens/_md-comp-extended-fab-secondary.scss +0 -48
- package/tokens/_md-comp-extended-fab-surface.scss +0 -45
- package/tokens/_md-comp-extended-fab-tertiary.scss +0 -48
- package/tokens/_md-comp-fab-branded-large.scss +0 -23
- package/tokens/_md-comp-fab-primary-large.scss +0 -23
- package/tokens/_md-comp-fab-primary-small.scss +0 -23
- package/tokens/_md-comp-fab-primary.scss +0 -23
- package/tokens/_md-comp-fab-secondary-large.scss +0 -23
- package/tokens/_md-comp-fab-secondary-small.scss +0 -23
- package/tokens/_md-comp-fab-secondary.scss +0 -23
- package/tokens/_md-comp-fab-surface-large.scss +0 -23
- package/tokens/_md-comp-fab-surface-small.scss +0 -23
- package/tokens/_md-comp-fab-surface.scss +0 -23
- package/tokens/_md-comp-fab-tertiary-large.scss +0 -23
- package/tokens/_md-comp-fab-tertiary-small.scss +0 -23
- package/tokens/_md-comp-fab-tertiary.scss +0 -23
- /package/{fab/lib/fab-extended-styles.css.d.ts → chips/lib/elevated-styles.css.d.ts} +0 -0
- /package/{fab/lib/fab-shared-styles.css.d.ts → chips/lib/filter-styles.css.d.ts} +0 -0
package/slider/lib/slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {stringConverter} from '../../controller/string-converter.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n\n\n// This is required for decorators.\n// tslint:disable:no-new-decorators\n\n// Disable warning for classMap with destructuring\n// tslint:disable:quoted-properties-on-dictionary\n\nfunction inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {\n if (!element) {\n return false;\n }\n const {top, left, bottom, right} = element.getBoundingClientRect();\n return x >= left && x <= right && y >= top && y <= bottom;\n}\n\n// parse values like: foo or foo,bar\nfunction tupleConverter(attr: string|null) {\n const [, v, e] =\n attr?.match(/\\s*\\[?\\s*([^,]+)(?:(?:\\s*$)|(?:\\s*,\\s*(.*)\\s*))/) ?? [];\n return e !== undefined ? [v, e] : v;\n}\n\nfunction toNumber(value: string) {\n return Number(value) || 0;\n}\n\nfunction tupleAsString(value: unknown|[unknown, unknown]) {\n return Array.isArray(value) ? value.join() : String(value ?? '');\n}\n\nfunction valueConverter(attr: string|null) {\n const value = tupleConverter(attr);\n return Array.isArray(value) ? value.map(i => toNumber(i)) : toNumber(value);\n}\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.max(min, Math.min(max, value));\n}\n\nfunction isOverlapping(elA: Element, elB: Element) {\n if (!(elA && elB)) {\n return false;\n }\n const a = elA.getBoundingClientRect();\n const b = elB.getBoundingClientRect();\n return !(\n a.top > b.bottom || a.right < b.left || a.bottom < b.top ||\n a.left > b.right);\n}\n\n/**\n * Slider component.\n */\nexport class Slider extends LitElement {\n static override shadowRootOptions:\n ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n /**\n * @nocollapse\n */\n static formAssociated = true;\n\n @ariaProperty // tslint:disable-line:no-new-decorators\n @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n override ariaLabel!: string;\n\n /**\n * Whether or not the slider is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The slider minimum value\n */\n @property({type: Number}) min = 0;\n\n /**\n * The slider maximum value\n */\n @property({type: Number}) max = 10;\n\n /**\n * The slider value, can be a single number, or an array tuple indicating\n * a start and end value.\n */\n @property({converter: valueConverter}) value: number|[number, number] = 0;\n\n /**\n * An optinoal label for the slider's value; if not set, the label is the\n * value itself. This can be a string or string tuple when start and end\n * values are used.\n */\n @property({type: String, converter: tupleConverter})\n valueLabel?: string|[string, string]|undefined;\n\n /**\n * The step between values.\n */\n @property({type: Number}) step = 1;\n\n /**\n * Whether or not to show tick marks.\n */\n @property({type: Boolean}) withTickMarks = false;\n\n /**\n * Whether or not to show a value label when activated.\n */\n @property({type: Boolean}) withLabel = false;\n\n /**\n * The HTML name to use in form submission.\n */\n @property({type: String, reflect: true, converter: stringConverter})\n name = '';\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.closest('form');\n }\n\n\n /**\n * Read only computed value representing the fraction between 0 and 1\n * respresenting the value's position between min and max. This is a\n * single fraction or a tuple if the value specifies start and end values.\n */\n get valueAsFraction() {\n const {lowerFraction, upperFraction} = this.getMetrics();\n return this.allowRange ? [lowerFraction, upperFraction] : upperFraction;\n }\n\n protected getMetrics() {\n const step = Math.max(this.step, 1);\n const range = Math.max(this.max - this.min, step);\n const lower = Math.min(this.valueA, this.valueB);\n const upper = Math.max(this.valueA, this.valueB);\n const lowerFraction = (lower - this.min) / range;\n const upperFraction = (upper - this.min) / range;\n return {\n step,\n range,\n lower,\n upper,\n lowerFraction,\n upperFraction,\n };\n }\n\n @query('input.a') protected readonly inputA!: HTMLInputElement;\n @query('.handle.a') protected readonly handleA!: HTMLDivElement;\n @queryAsync('md-ripple.a')\n protected readonly rippleA!: Promise<MdRipple|null>;\n\n @query('input.b') protected readonly inputB!: HTMLInputElement;\n @query('.handle.b') protected readonly handleB!: HTMLDivElement;\n @queryAsync('md-ripple.b')\n protected readonly rippleB!: Promise<MdRipple|null>;\n\n @state() protected valueA = 0;\n @state() protected valueB = 0;\n\n @state() private focusRingAShowing = false;\n @state() private focusRingBShowing = false;\n // allows for lazy rendering of the focus ring by latchin to true when the\n // focus ring should be rendered.\n private focusRingARequested = false;\n private focusRingBRequested = false;\n\n @state() private rippleAShowing = false;\n @state() private rippleBShowing = false;\n\n // handle hover/pressed states are set manually since the handle\n // does not receive pointer events so that the native inputs are\n // interaction targets.\n @state() private handleAHover = false;\n @state() private handleBHover = false;\n @state() private handleAPressed = false;\n @state() private handleBPressed = false;\n\n @state() private onTopId = 'b';\n @state() private handlesOverlapping = false;\n\n @state() private isInteracting = false;\n\n constructor() {\n super();\n this.addController(new FormController(this));\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.inputB);\n });\n }\n\n override focus() {\n this.inputB?.focus();\n }\n\n get valueAsString() {\n return tupleAsString(this.value);\n }\n\n // value coerced to a string\n [getFormValue]() {\n return this.valueAsString;\n }\n\n // If range should be allowed (detected via value format).\n private allowRange = false;\n\n // indicates input values are crossed over each other from initial rendering.\n private isFlipped() {\n return this.valueA > this.valueB;\n }\n\n protected override willUpdate(changed: PropertyValues) {\n if (changed.has('value') || changed.has('min') || changed.has('max') ||\n changed.has('step')) {\n this.allowRange = Array.isArray(this.value);\n const step = Math.max(this.step, 1);\n let lower =\n this.allowRange ? (this.value as [number, number])[0] : this.min;\n lower = clamp(lower - (lower % step), this.min, this.max);\n let upper = this.allowRange ? (this.value as [number, number])[1] :\n this.value as number;\n upper = clamp(upper - (upper % step), this.min, this.max);\n const isFlipped = this.isFlipped() && this.allowRange;\n this.valueA = isFlipped ? upper : lower;\n this.valueB = isFlipped ? lower : upper;\n }\n\n // manually handle ripple hover state since the handle is pointer events\n // none.\n if (changed.get('handleAHover') !== undefined) {\n this.rippleAShowing = true;\n this.toggleRippleHover(this.rippleA, this.handleAHover);\n } else if (changed.get('handleBHover') !== undefined) {\n this.rippleBShowing = true;\n this.toggleRippleHover(this.rippleB, this.handleBHover);\n }\n\n // facilitates lazy rendering of the focus ring.\n this.focusRingARequested ||= this.focusRingAShowing;\n this.focusRingBRequested ||= this.focusRingBShowing;\n }\n\n protected override async updated(changed: PropertyValues) {\n if (changed.has('value') || changed.has('valueA') ||\n changed.has('valueB')) {\n await this.updateComplete;\n this.handlesOverlapping = isOverlapping(this.handleA, this.handleB);\n }\n }\n\n protected override render() {\n const {step, range, lowerFraction, upperFraction} = this.getMetrics();\n const isFlipped = this.isFlipped();\n const containerStyles = {\n // for clipping inputs and active track.\n '--lowerFraction': String(lowerFraction),\n '--upperFraction': String(upperFraction),\n // for generating tick marks\n '--tickCount': String(range / step)\n };\n const containerClasses = {\n interacting: this.isInteracting,\n ranged: this.allowRange\n };\n\n // optional label values to show in place of the value.\n const labelA = String(this.valueLabel?.[isFlipped ? 1 : 0] ?? this.valueA);\n const labelB = String(\n (this.allowRange ? this.valueLabel?.[isFlipped ? 0 : 1] :\n this.valueLabel) ??\n this.valueB);\n\n const inputAProps = {\n id: 'a',\n lesser: !isFlipped,\n value: this.valueA,\n label: labelA,\n getRipple: this.getRippleA\n };\n\n const inputBProps = {\n id: 'b',\n lesser: isFlipped,\n value: this.valueB,\n label: labelB,\n getRipple: this.getRippleB\n };\n\n const handleAProps = {\n id: 'a',\n lesser: !isFlipped,\n showRipple: this.rippleAShowing,\n focusRequested: this.focusRingARequested,\n showFocus: this.focusRingAShowing,\n hover: this.handleAHover,\n pressed: this.handleAPressed,\n label: labelA\n };\n\n const handleBProps = {\n id: 'b',\n lesser: isFlipped,\n showRipple: this.rippleBShowing,\n focusRequested: this.focusRingBRequested,\n showFocus: this.focusRingBShowing,\n hover: this.handleBHover,\n pressed: this.handleBPressed,\n label: labelB\n };\n\n const handleContainerClasses = {\n hover: this.handleAHover || this.handleBHover\n };\n\n return html`\n <div\n class=\"container ${classMap(containerClasses)}\"\n style=${styleMap(containerStyles)}\n >\n ${when(this.allowRange, () => this.renderInput(inputAProps))}\n ${this.renderInput(inputBProps)}\n ${this.renderTrack()}\n <div class=\"handleContainerPadded\">\n <div class=\"handleContainerBlock\">\n <div class=\"handleContainer ${classMap(handleContainerClasses)}\">\n ${when(this.allowRange, () => this.renderHandle(handleAProps))}\n ${this.renderHandle(handleBProps)}\n </div>\n </div>\n </div>\n </div>`;\n }\n\n protected renderTrack() {\n const trackClasses = {'tickMarks': this.withTickMarks};\n return html`\n <slot name=\"track\">\n <div class=\"track ${classMap(trackClasses)}\"></div>\n </slot>`;\n }\n\n protected renderFocusRing(visible: boolean) {\n return html`<md-focus-ring .visible=${visible}></md-focus-ring>`;\n }\n\n protected renderLabel(value: string) {\n return html`<div class=\"label\">\n <span class=\"labelContent\" part=\"label\">${value}</span>\n </div>`;\n }\n\n protected renderHandle({\n id,\n lesser,\n showRipple,\n focusRequested,\n showFocus,\n hover,\n pressed,\n label\n }: {\n id: string,\n lesser: boolean,\n focusRequested: boolean,\n showRipple: boolean,\n showFocus: boolean,\n hover: boolean,\n pressed: boolean,\n label: string\n }) {\n const onTop = !this.disabled && id === this.onTopId;\n const isOverlapping = !this.disabled && this.handlesOverlapping;\n return html`<div class=\"handle ${classMap({\n [id]: true,\n lesser,\n hover,\n pressed,\n onTop,\n isOverlapping\n })}\">\n <slot name=\"handle${\n this.allowRange ? (lesser ? 'Lesser' : 'Greater') : ''}\">\n <div class=\"handleNub\"><md-elevation></md-elevation></div>\n ${when(this.withLabel, () => this.renderLabel(label))}\n\n </slot>\n ${when(showRipple, () => this.renderRipple(id))}\n ${when(focusRequested, () => this.renderFocusRing(showFocus))}\n </div>`;\n }\n\n protected renderInput({id, lesser, value, label, getRipple}: {\n id: string,\n lesser: boolean,\n value: number,\n label: string,\n getRipple: () => Promise<MdRipple|null>| null\n }) {\n // when ranged, ensure announcement includes value info.\n const ariaLabelDescriptor =\n this.allowRange ? ` - ${lesser ? `start` : `end`} handle` : '';\n return html`<input type=\"range\"\n class=\"${classMap({\n lesser,\n [id]: true\n })}\"\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @pointerdown=${this.handleDown}\n @pointerup=${this.handleUp}\n @pointerenter=${this.handleEnter}\n @pointermove=${this.handleMove}\n @pointerleave=${this.handleLeave}\n @input=${this.handleInput}\n @change=${this.handleChange}\n .disabled=${this.disabled}\n .min=${String(this.min)}\n .max=${String(this.max)}\n .step=${String(this.step)}\n .value=${String(value)}\n .tabIndex=${lesser ? 1 : 0}\n aria-label=${`${this.ariaLabel}${ariaLabelDescriptor}` || nothing}\n aria-valuetext=${label}\n ${ripple(getRipple)}>`;\n }\n\n protected renderRipple = (id: string) => html`<md-ripple class=${\n id} ?disabled=${this.disabled} unbounded></md-ripple>`;\n\n private readonly getRippleA = () => { // bind to this\n if (!this.handleAHover) {\n return null;\n }\n this.rippleAShowing = true;\n return this.rippleA;\n };\n\n\n private readonly getRippleB = () => { // bind to this\n if (!this.handleBHover) {\n return null;\n }\n this.rippleBShowing = true;\n return this.rippleB;\n };\n\n private async toggleRippleHover(\n ripple: Promise<MdRipple|null>, hovering: boolean) {\n const rippleEl = await ripple;\n if (!rippleEl) {\n return;\n }\n // TODO(b/269799771): improve slider ripple connection\n if (hovering) {\n rippleEl.handlePointerenter(\n new PointerEvent('pointerenter', {isPrimary: true, pointerId: 1}));\n } else {\n rippleEl.handlePointerleave(\n new PointerEvent('pointerleave', {isPrimary: true, pointerId: 1}));\n }\n }\n\n protected isEventOnA({target}: Event) {\n return target === this.inputA;\n }\n\n protected updateFocusVisible(e: Event) {\n const isA = this.isEventOnA(e);\n const showFocus = shouldShowStrongFocus();\n this.focusRingAShowing = showFocus && isA;\n this.focusRingBShowing = showFocus && !isA;\n }\n\n protected handleFocus(e: Event) {\n this.updateFocusVisible(e);\n this.updateOnTop(e);\n }\n\n protected handleBlur(e: Event) {\n this.focusRingAShowing = false;\n this.focusRingBShowing = false;\n }\n\n protected handleDown(e: PointerEvent) {\n pointerPress();\n this.isInteracting = true;\n const isA = this.isEventOnA(e);\n const isPrimaryButton = Boolean(e.buttons & 1);\n // Since handle moves to pointer on down and there may not be a move,\n // it needs to be considered hovered..\n this.handleAHover = !this.disabled && isA && Boolean(this.handleA);\n this.handleAPressed = isPrimaryButton && this.handleAHover;\n this.handleBHover = !this.disabled && !isA && Boolean(this.handleB);\n this.handleBPressed = isPrimaryButton && this.handleBHover;\n this.updateFocusVisible(e);\n }\n\n protected handleUp(e: PointerEvent) {\n this.handleAPressed = this.handleBPressed = false;\n // used to remove animations after interactions...\n this.renderRoot.addEventListener('transitionend', () => {\n this.isInteracting = false;\n }, {once: true});\n }\n\n /**\n * The move handler tracks handle hovering to facilitate proper ripple\n * behavior on the slider handle. This is needed because user interaction with\n * the native input is leveraged to position the handle. Because the separate\n * displayed handle element has pointer events disabled (to allow interaction\n * with the input) and the input's handle is a pseudo-element, neither can be\n * the ripple's interactive element. Therefore the input is the ripple's\n * interactive element and has a `ripple` directive; however the ripple\n * is gated on the handle being hovered. In addition, because the ripple\n * hover state is being specially handled, it must be triggered independent\n * of the directive. This is done based on the hover state when the\n * slider is updated.\n */\n protected handleMove(e: PointerEvent) {\n this.handleAHover = !this.disabled && inBounds(e, this.handleA);\n this.handleBHover = !this.disabled && inBounds(e, this.handleB);\n }\n\n protected handleEnter(e: PointerEvent) {\n this.handleMove(e);\n }\n\n protected handleLeave() {\n this.handleAHover = false;\n this.handleBHover = false;\n }\n\n\n private updateOnTop(e: Event) {\n this.onTopId = (e.target as Element).classList.contains('a') ? 'a' : 'b';\n }\n\n protected handleInput(e: InputEvent) {\n if (this.inputA) {\n this.valueA = this.inputA.valueAsNumber ?? 0;\n }\n this.valueB = this.inputB.valueAsNumber;\n this.updateOnTop(e);\n // update value only on interaction\n const lower = Math.min(this.valueA, this.valueB);\n const upper = Math.max(this.valueA, this.valueB);\n this.value = this.allowRange ? [lower, upper] : this.valueB;\n }\n\n protected handleChange(event: Event) {\n redispatchEvent(this, event);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {stringConverter} from '../../controller/string-converter.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n// Disable warning for classMap with destructuring\n// tslint:disable:quoted-properties-on-dictionary\n\nfunction inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {\n if (!element) {\n return false;\n }\n const {top, left, bottom, right} = element.getBoundingClientRect();\n return x >= left && x <= right && y >= top && y <= bottom;\n}\n\n// parse values like: foo or foo,bar\nfunction tupleConverter(attr: string|null) {\n const [, v, e] =\n attr?.match(/\\s*\\[?\\s*([^,]+)(?:(?:\\s*$)|(?:\\s*,\\s*(.*)\\s*))/) ?? [];\n return e !== undefined ? [v, e] : v;\n}\n\nfunction toNumber(value: string) {\n return Number(value) || 0;\n}\n\nfunction tupleAsString(value: unknown|[unknown, unknown]) {\n return Array.isArray(value) ? value.join() : String(value ?? '');\n}\n\nfunction valueConverter(attr: string|null) {\n const value = tupleConverter(attr);\n return Array.isArray(value) ? value.map(i => toNumber(i)) : toNumber(value);\n}\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.max(min, Math.min(max, value));\n}\n\nfunction isOverlapping(elA: Element|null, elB: Element|null) {\n if (!(elA && elB)) {\n return false;\n }\n const a = elA.getBoundingClientRect();\n const b = elB.getBoundingClientRect();\n return !(\n a.top > b.bottom || a.right < b.left || a.bottom < b.top ||\n a.left > b.right);\n}\n\n/**\n * Slider component.\n */\nexport class Slider extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n static override shadowRootOptions:\n ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n /**\n * @nocollapse\n */\n static formAssociated = true;\n\n /**\n * Whether or not the slider is disabled.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The slider minimum value\n */\n @property({type: Number}) min = 0;\n\n /**\n * The slider maximum value\n */\n @property({type: Number}) max = 10;\n\n /**\n * The slider value, can be a single number, or an array tuple indicating\n * a start and end value.\n */\n @property({converter: valueConverter}) value: number|[number, number] = 0;\n\n /**\n * An optinoal label for the slider's value; if not set, the label is the\n * value itself. This can be a string or string tuple when start and end\n * values are used.\n */\n @property({converter: tupleConverter})\n valueLabel?: string|[string, string]|undefined;\n\n /**\n * The step between values.\n */\n @property({type: Number}) step = 1;\n\n /**\n * Whether or not to show tick marks.\n */\n @property({type: Boolean}) withTickMarks = false;\n\n /**\n * Whether or not to show a value label when activated.\n */\n @property({type: Boolean}) withLabel = false;\n\n /**\n * The HTML name to use in form submission.\n */\n @property({reflect: true, converter: stringConverter}) name = '';\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.closest('form');\n }\n\n\n /**\n * Read only computed value representing the fraction between 0 and 1\n * respresenting the value's position between min and max. This is a\n * single fraction or a tuple if the value specifies start and end values.\n */\n get valueAsFraction() {\n const {lowerFraction, upperFraction} = this.getMetrics();\n return this.allowRange ? [lowerFraction, upperFraction] : upperFraction;\n }\n\n private getMetrics() {\n const step = Math.max(this.step, 1);\n const range = Math.max(this.max - this.min, step);\n const lower = Math.min(this.valueA, this.valueB);\n const upper = Math.max(this.valueA, this.valueB);\n const lowerFraction = (lower - this.min) / range;\n const upperFraction = (upper - this.min) / range;\n return {\n step,\n range,\n lower,\n upper,\n lowerFraction,\n upperFraction,\n };\n }\n\n @query('input.a') private readonly inputA!: HTMLInputElement|null;\n @query('.handle.a') private readonly handleA!: HTMLDivElement|null;\n @queryAsync('md-ripple.a') private readonly rippleA!: Promise<MdRipple|null>;\n\n @query('input.b') private readonly inputB!: HTMLInputElement|null;\n @query('.handle.b') private readonly handleB!: HTMLDivElement|null;\n @queryAsync('md-ripple.b') private readonly rippleB!: Promise<MdRipple|null>;\n\n @state() private valueA = 0;\n @state() private valueB = 0;\n\n @state() private rippleAShowing = false;\n @state() private rippleBShowing = false;\n\n // handle hover/pressed states are set manually since the handle\n // does not receive pointer events so that the native inputs are\n // interaction targets.\n @state() private handleAHover = false;\n @state() private handleBHover = false;\n\n @state() private onTopId = 'b';\n @state() private handlesOverlapping = false;\n\n constructor() {\n super();\n this.addController(new FormController(this));\n if (!isServer) {\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event) || !this.inputB) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.inputB);\n });\n }\n }\n\n override focus() {\n this.inputB?.focus();\n }\n\n get valueAsString() {\n return tupleAsString(this.value);\n }\n\n // value coerced to a string\n [getFormValue]() {\n return this.valueAsString;\n }\n\n // If range should be allowed (detected via value format).\n private allowRange = false;\n\n // indicates input values are crossed over each other from initial rendering.\n private isFlipped() {\n return this.valueA > this.valueB;\n }\n\n protected override willUpdate(changed: PropertyValues) {\n if (changed.has('value') || changed.has('min') || changed.has('max') ||\n changed.has('step')) {\n this.allowRange = Array.isArray(this.value);\n const step = Math.max(this.step, 1);\n let lower =\n this.allowRange ? (this.value as [number, number])[0] : this.min;\n lower = clamp(lower - (lower % step), this.min, this.max);\n let upper = this.allowRange ? (this.value as [number, number])[1] :\n this.value as number;\n upper = clamp(upper - (upper % step), this.min, this.max);\n const isFlipped = this.isFlipped() && this.allowRange;\n this.valueA = isFlipped ? upper : lower;\n this.valueB = isFlipped ? lower : upper;\n }\n\n // manually handle ripple hover state since the handle is pointer events\n // none.\n if (changed.get('handleAHover') !== undefined) {\n this.rippleAShowing = true;\n this.toggleRippleHover(this.rippleA, this.handleAHover);\n } else if (changed.get('handleBHover') !== undefined) {\n this.rippleBShowing = true;\n this.toggleRippleHover(this.rippleB, this.handleBHover);\n }\n }\n\n protected override async updated(changed: PropertyValues) {\n if (changed.has('value') || changed.has('valueA') ||\n changed.has('valueB')) {\n await this.updateComplete;\n this.handlesOverlapping = isOverlapping(this.handleA, this.handleB);\n }\n }\n\n protected override render() {\n const {step, range, lowerFraction, upperFraction} = this.getMetrics();\n const isFlipped = this.isFlipped();\n const containerStyles = {\n // for clipping inputs and active track.\n '--slider-lower-fraction': String(lowerFraction),\n '--slider-upper-fraction': String(upperFraction),\n // for generating tick marks\n '--slider-tick-count': String(range / step),\n };\n const containerClasses = {ranged: this.allowRange};\n\n // optional label values to show in place of the value.\n const labelA = String(this.valueLabel?.[isFlipped ? 1 : 0] ?? this.valueA);\n const labelB = String(\n (this.allowRange ? this.valueLabel?.[isFlipped ? 0 : 1] :\n this.valueLabel) ??\n this.valueB);\n\n const inputAProps = {\n id: 'a',\n lesser: !isFlipped,\n value: this.valueA,\n label: labelA,\n getRipple: this.getRippleA\n };\n\n const inputBProps = {\n id: 'b',\n lesser: isFlipped,\n value: this.valueB,\n label: labelB,\n getRipple: this.getRippleB\n };\n\n const handleAProps = {\n id: 'a',\n lesser: !isFlipped,\n showRipple: this.rippleAShowing,\n hover: this.handleAHover,\n label: labelA\n };\n\n const handleBProps = {\n id: 'b',\n lesser: isFlipped,\n showRipple: this.rippleBShowing,\n hover: this.handleBHover,\n label: labelB\n };\n\n const handleContainerClasses = {\n hover: this.handleAHover || this.handleBHover\n };\n\n return html`\n <div\n class=\"container ${classMap(containerClasses)}\"\n style=${styleMap(containerStyles)}\n >\n ${when(this.allowRange, () => this.renderInput(inputAProps))}\n ${this.renderInput(inputBProps)}\n ${this.renderTrack()}\n <div class=\"handleContainerPadded\">\n <div class=\"handleContainerBlock\">\n <div class=\"handleContainer ${classMap(handleContainerClasses)}\">\n ${when(this.allowRange, () => this.renderHandle(handleAProps))}\n ${this.renderHandle(handleBProps)}\n </div>\n </div>\n </div>\n </div>`;\n }\n\n private renderTrack() {\n const trackClasses = {'tickMarks': this.withTickMarks};\n return html`<div class=\"track ${classMap(trackClasses)}\"></div>`;\n }\n\n private renderLabel(value: string) {\n return html`<div class=\"label\">\n <span class=\"labelContent\" part=\"label\">${value}</span>\n </div>`;\n }\n\n private renderHandle({id, lesser, showRipple, hover, label}: {\n id: string,\n lesser: boolean,\n showRipple: boolean,\n hover: boolean,\n label: string\n }) {\n const onTop = !this.disabled && id === this.onTopId;\n const isOverlapping = !this.disabled && this.handlesOverlapping;\n return html`<div class=\"handle ${classMap({\n [id]: true,\n lesser,\n hover,\n onTop,\n isOverlapping\n })}\">\n <div class=\"handleNub\"><md-elevation></md-elevation></div>\n ${when(this.withLabel, () => this.renderLabel(label))}\n ${when(showRipple, () => this.renderRipple(id))}\n <md-focus-ring for=${id}></md-focus-ring>\n </div>`;\n }\n\n private renderInput({id, lesser, value, label, getRipple}: {\n id: string,\n lesser: boolean,\n value: number,\n label: string,\n getRipple: () => Promise<MdRipple|null>| null\n }) {\n // when ranged, ensure announcement includes value info.\n const ariaLabelDescriptor =\n this.allowRange ? ` - ${lesser ? `start` : `end`} handle` : '';\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<input type=\"range\"\n class=\"${classMap({\n lesser,\n [id]: true\n })}\"\n @focus=${this.handleFocus}\n @pointerdown=${this.handleDown}\n @pointerenter=${this.handleEnter}\n @pointermove=${this.handleMove}\n @pointerleave=${this.handleLeave}\n @input=${this.handleInput}\n @change=${this.handleChange}\n id=${id}\n .disabled=${this.disabled}\n .min=${String(this.min)}\n .max=${String(this.max)}\n .step=${String(this.step)}\n .value=${String(value)}\n .tabIndex=${lesser ? 1 : 0}\n aria-label=${`${ariaLabel}${ariaLabelDescriptor}` || nothing}\n aria-valuetext=${label}\n ${ripple(getRipple)}>`;\n }\n\n private readonly renderRipple = (id: string) => html`<md-ripple class=${\n id} ?disabled=${this.disabled} unbounded></md-ripple>`;\n\n private readonly getRippleA = () => { // bind to this\n if (!this.handleAHover) {\n return null;\n }\n this.rippleAShowing = true;\n return this.rippleA;\n };\n\n private readonly getRippleB = () => { // bind to this\n if (!this.handleBHover) {\n return null;\n }\n this.rippleBShowing = true;\n return this.rippleB;\n };\n\n private async toggleRippleHover(\n ripple: Promise<MdRipple|null>, hovering: boolean) {\n const rippleEl = await ripple;\n if (!rippleEl) {\n return;\n }\n // TODO(b/269799771): improve slider ripple connection\n if (hovering) {\n rippleEl.handlePointerenter(new PointerEvent(\n 'pointerenter', {isPrimary: true, pointerId: this.ripplePointerId}));\n } else {\n rippleEl.handlePointerleave(new PointerEvent(\n 'pointerleave', {isPrimary: true, pointerId: this.ripplePointerId}));\n }\n }\n\n private isEventOnA({target}: Event) {\n return target === this.inputA;\n }\n\n private handleFocus(e: Event) {\n this.updateOnTop(e);\n }\n\n // used in synthetic events generated to control ripple hover state.\n private ripplePointerId = 1;\n\n private handleDown(e: PointerEvent) {\n this.ripplePointerId = e.pointerId;\n const isA = this.isEventOnA(e);\n // Since handle moves to pointer on down and there may not be a move,\n // it needs to be considered hovered..\n this.handleAHover = !this.disabled && isA && Boolean(this.handleA);\n this.handleBHover = !this.disabled && !isA && Boolean(this.handleB);\n // Force Safari to focus input so the label stays displayed; note,\n // Macs don't normally focus non-text type inputs.\n const target = (e.target as HTMLElement);\n requestAnimationFrame(() => {\n target.focus();\n });\n }\n\n /**\n * The move handler tracks handle hovering to facilitate proper ripple\n * behavior on the slider handle. This is needed because user interaction with\n * the native input is leveraged to position the handle. Because the separate\n * displayed handle element has pointer events disabled (to allow interaction\n * with the input) and the input's handle is a pseudo-element, neither can be\n * the ripple's interactive element. Therefore the input is the ripple's\n * interactive element and has a `ripple` directive; however the ripple\n * is gated on the handle being hovered. In addition, because the ripple\n * hover state is being specially handled, it must be triggered independent\n * of the directive. This is done based on the hover state when the\n * slider is updated.\n */\n private handleMove(e: PointerEvent) {\n this.handleAHover = !this.disabled && inBounds(e, this.handleA);\n this.handleBHover = !this.disabled && inBounds(e, this.handleB);\n }\n\n private handleEnter(e: PointerEvent) {\n this.handleMove(e);\n }\n\n private handleLeave() {\n this.handleAHover = false;\n this.handleBHover = false;\n }\n\n private updateOnTop(e: Event) {\n this.onTopId = (e.target as Element).classList.contains('a') ? 'a' : 'b';\n }\n\n private handleInput(e: InputEvent) {\n if (this.inputA) {\n this.valueA = this.inputA.valueAsNumber ?? 0;\n }\n this.valueB = this.inputB!.valueAsNumber;\n this.updateOnTop(e);\n // update value only on interaction\n const lower = Math.min(this.valueA, this.valueB);\n const upper = Math.max(this.valueA, this.valueB);\n this.value = this.allowRange ? [lower, upper] : this.valueB;\n }\n\n private handleChange(event: Event) {\n redispatchEvent(this, event);\n }\n}\n"]}
|
package/switch/lib/_switch.scss
CHANGED
|
@@ -6,18 +6,14 @@
|
|
|
6
6
|
// stylelint-disable selector-class-pattern --
|
|
7
7
|
// Selector '.md3-*' should only be used in this project.
|
|
8
8
|
|
|
9
|
-
// PUBLIC PROPERTIES
|
|
10
|
-
|
|
11
9
|
// go/keep-sorted start
|
|
10
|
+
@use 'sass:list';
|
|
12
11
|
@use 'sass:map';
|
|
13
12
|
// go/keep-sorted end
|
|
14
13
|
// go/keep-sorted start
|
|
15
14
|
@use '../../focus/focus-ring';
|
|
16
15
|
@use '../../sass/color';
|
|
17
|
-
@use '../../sass/shape';
|
|
18
|
-
@use '../../sass/theme';
|
|
19
16
|
@use '../../sass/touch-target';
|
|
20
|
-
@use '../../sass/var';
|
|
21
17
|
@use '../../tokens';
|
|
22
18
|
@use './handle';
|
|
23
19
|
@use './icon';
|
|
@@ -46,25 +42,76 @@ $_forced-colors-theme: (
|
|
|
46
42
|
);
|
|
47
43
|
|
|
48
44
|
@mixin theme($tokens) {
|
|
49
|
-
$tokens:
|
|
45
|
+
$supported-tokens: list.join(
|
|
46
|
+
tokens.$md-comp-switch-supported-tokens,
|
|
47
|
+
(
|
|
48
|
+
'handle-shape-start-start',
|
|
49
|
+
'handle-shape-start-end',
|
|
50
|
+
'handle-shape-end-end',
|
|
51
|
+
'handle-shape-end-start',
|
|
52
|
+
'track-shape-start-start',
|
|
53
|
+
'track-shape-start-end',
|
|
54
|
+
'track-shape-end-end',
|
|
55
|
+
'track-shape-end-start'
|
|
56
|
+
)
|
|
57
|
+
);
|
|
58
|
+
|
|
50
59
|
$tokens: _flatten-disable-colors($tokens);
|
|
51
|
-
$tokens: theme.create-theme-vars($tokens, 'switch');
|
|
52
|
-
$tokens: shape.resolve-tokens($tokens, 'track-shape', 'handle-shape');
|
|
53
60
|
|
|
54
|
-
@
|
|
61
|
+
@each $token, $value in $tokens {
|
|
62
|
+
@if list.index($supported-tokens, $token) == null {
|
|
63
|
+
@error 'Token `#{$token}` is not a supported token.';
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@if $value {
|
|
67
|
+
--md-switch-#{$token}: #{$value};
|
|
68
|
+
}
|
|
69
|
+
}
|
|
55
70
|
}
|
|
56
71
|
|
|
57
72
|
@mixin styles() {
|
|
58
73
|
$tokens: tokens.md-comp-switch-values();
|
|
59
74
|
$tokens: _flatten-disable-colors($tokens);
|
|
60
|
-
$tokens: theme.create-theme-vars($tokens, 'switch');
|
|
61
|
-
$tokens: shape.resolve-tokens($tokens, 'track-shape', 'handle-shape');
|
|
62
75
|
|
|
63
76
|
:host {
|
|
64
77
|
@each $token, $value in $tokens {
|
|
65
|
-
--_#{$token}: #{$value};
|
|
78
|
+
--_#{$token}: var(--md-switch-#{$token}, #{$value});
|
|
66
79
|
}
|
|
67
80
|
|
|
81
|
+
// Support logical shape properties
|
|
82
|
+
--_handle-shape-start-start: var(
|
|
83
|
+
--md-switch-handle-shape-start-start,
|
|
84
|
+
var(--_handle-shape)
|
|
85
|
+
);
|
|
86
|
+
--_handle-shape-start-end: var(
|
|
87
|
+
--md-switch-handle-shape-start-end,
|
|
88
|
+
var(--_handle-shape)
|
|
89
|
+
);
|
|
90
|
+
--_handle-shape-end-end: var(
|
|
91
|
+
--md-switch-handle-shape-end-end,
|
|
92
|
+
var(--_handle-shape)
|
|
93
|
+
);
|
|
94
|
+
--_handle-shape-end-start: var(
|
|
95
|
+
--md-switch-handle-shape-end-start,
|
|
96
|
+
var(--_handle-shape)
|
|
97
|
+
);
|
|
98
|
+
--_track-shape-start-start: var(
|
|
99
|
+
--md-switch-track-shape-start-start,
|
|
100
|
+
var(--_track-shape)
|
|
101
|
+
);
|
|
102
|
+
--_track-shape-start-end: var(
|
|
103
|
+
--md-switch-track-shape-start-end,
|
|
104
|
+
var(--_track-shape)
|
|
105
|
+
);
|
|
106
|
+
--_track-shape-end-end: var(
|
|
107
|
+
--md-switch-track-shape-end-end,
|
|
108
|
+
var(--_track-shape)
|
|
109
|
+
);
|
|
110
|
+
--_track-shape-end-start: var(
|
|
111
|
+
--md-switch-track-shape-end-start,
|
|
112
|
+
var(--_track-shape)
|
|
113
|
+
);
|
|
114
|
+
|
|
68
115
|
// TODO(b/230630968): create a forced-colors-mode mixin
|
|
69
116
|
@media screen and (forced-colors: active) {
|
|
70
117
|
@include theme($_forced-colors-theme);
|
|
@@ -79,12 +126,10 @@ $_forced-colors-theme: (
|
|
|
79
126
|
md-focus-ring {
|
|
80
127
|
@include focus-ring.theme(
|
|
81
128
|
(
|
|
82
|
-
shape: (
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
var(--_track-shape-end-end),
|
|
87
|
-
),
|
|
129
|
+
'shape-start-start': var(--_track-shape-start-start),
|
|
130
|
+
'shape-start-end': var(--_track-shape-start-end),
|
|
131
|
+
'shape-end-end': var(--_track-shape-end-end),
|
|
132
|
+
'shape-end-start': var(--_track-shape-end-start),
|
|
88
133
|
)
|
|
89
134
|
);
|
|
90
135
|
}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_handle-shape-start-start: var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, 9999px));--_handle-shape-start-end: var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, 9999px));--_handle-shape-end-end: var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, 9999px));--_handle-shape-end-start: var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, 9999px));--_track-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, 9999px));--_track-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, 9999px));--_track-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, 9999px));--_track-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, 9999px));--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, rgb(var(--md-sys-color-surface-rgb, 254, 247, 255), 1));--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.38));--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.12));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-state-layer-color: var(--md-switch-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-switch-selected-focus-state-layer-opacity, 0.12);--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-width: var(--md-switch-track-width, 52px);--_unselected-focus-handle-color: var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-icon-color: var(--md-switch-unselected-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-state-layer-color: var(--md-switch-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-switch-unselected-focus-state-layer-opacity, 0.12);--_unselected-focus-track-color: var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-outline-color: var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-color: var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-height: var(--md-switch-unselected-handle-height, 16px);--_unselected-handle-width: var(--md-switch-unselected-handle-width, 16px);--_unselected-hover-handle-color: var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-switch-unselected-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-switch-unselected-hover-state-layer-opacity, 0.08);--_unselected-hover-track-color: var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-track-outline-color: var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-icon-color: var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-icon-size: var(--md-switch-unselected-icon-size, 16px);--_unselected-pressed-handle-color: var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-switch-unselected-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-opacity: var(--md-switch-unselected-pressed-state-layer-opacity, 0.12);--_unselected-pressed-track-color: var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-track-outline-color: var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-track-color: var(--md-switch-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-track-outline-color: var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e));--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}@media screen and (forced-colors: active){:host{--md-switch-disabled-selected-icon-color:GrayText;--md-switch-disabled-selected-track-color:GrayText;--md-switch-disabled-unselected-handle-color:GrayText;--md-switch-disabled-unselected-icon-color:Canvas;--md-switch-selected-focus-track-color:ButtonText;--md-switch-selected-hover-track-color:ButtonText;--md-switch-selected-icon-color:ButtonText;--md-switch-selected-pressed-track-color:ButtonText;--md-switch-selected-track-color:ButtonText;--md-switch-unselected-focus-handle-color:ButtonText;--md-switch-unselected-handle-color:ButtonText;--md-switch-unselected-hover-handle-color:ButtonText;--md-switch-unselected-icon-color:Canvas;--md-switch-unselected-pressed-handle-color:ButtonText}}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_track-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_track-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_track-shape-end-start));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_track-shape-end-end)))))}.md3-switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.md3-switch__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-switch:disabled{cursor:default;pointer-events:none}.md3-switch:disabled .md3-switch__track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.md3-switch:disabled .md3-switch__track::before{background-clip:content-box}.md3-switch--selected:disabled .md3-switch__track{background-clip:border-box}.md3-switch__track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center;transition:background-color 67ms linear;background-color:var(--_selected-track-color)}.md3-switch:disabled .md3-switch__track{transition:none}.md3-switch--selected:hover .md3-switch__track{background-color:var(--_selected-hover-track-color)}.md3-switch--selected:focus-visible .md3-switch__track{background-color:var(--_selected-focus-track-color)}.md3-switch--selected:active .md3-switch__track{background-color:var(--_selected-pressed-track-color)}.md3-switch--selected:disabled .md3-switch__track{background-color:var(--_disabled-selected-track-color)}.md3-switch__track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;border-style:solid;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms;border-width:var(--_track-outline-width);background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color)}.md3-switch:disabled .md3-switch__track::before{transition:none}.md3-switch--selected .md3-switch__track::before{opacity:0}.md3-switch--unselected:hover .md3-switch__track::before{background-color:var(--_unselected-hover-track-color);border-color:var(--_unselected-hover-track-outline-color)}.md3-switch--unselected:focus-visible .md3-switch__track::before{background-color:var(--_unselected-focus-track-color);border-color:var(--_unselected-focus-track-outline-color)}.md3-switch--unselected:active .md3-switch__track::before{background-color:var(--_unselected-pressed-track-color);border-color:var(--_unselected-pressed-track-outline-color)}.md3-switch--unselected:disabled .md3-switch__track::before{background-color:var(--_disabled-unselected-track-color);border-color:var(--_disabled-unselected-track-outline-color)}.md3-switch__handle-container{position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);display:flex}.md3-switch--selected .md3-switch__handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.md3-switch--unselected .md3-switch__handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.md3-switch:disabled .md3-switch__handle-container{transition:none}.md3-switch__handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_unselected-handle-height);width:var(--_unselected-handle-width);background-color:var(--_selected-handle-color);transform-origin:center;transition-property:height,width,background-color;transition-duration:250ms,250ms,67ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1),linear;z-index:0}.md3-switch__handle::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition:opacity 67ms linear}.md3-switch--selected .md3-switch__handle::before{opacity:0}.md3-switch:disabled .md3-switch__handle::before{transition:none}.md3-switch:disabled .md3-switch__handle{transition:none}.md3-switch--selected .md3-switch__handle,.md3-switch--unselected .md3-switch__handle.md3-switch__handle--big{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.md3-switch--selected:enabled:active .md3-switch__handle,.md3-switch--unselected:enabled:active .md3-switch__handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.md3-switch--selected:hover .md3-switch__handle{background-color:var(--_selected-hover-handle-color)}.md3-switch--selected:focus-visible .md3-switch__handle{background-color:var(--_selected-focus-handle-color)}.md3-switch--selected:active .md3-switch__handle{background-color:var(--_selected-pressed-handle-color)}.md3-switch--selected:disabled .md3-switch__handle{background-color:var(--_disabled-selected-handle-color)}.md3-switch__handle::before{background-color:var(--_unselected-handle-color)}.md3-switch--unselected:hover .md3-switch__handle::before{background-color:var(--_unselected-hover-handle-color)}.md3-switch--unselected:focus-visible .md3-switch__handle::before{background-color:var(--_unselected-focus-handle-color)}.md3-switch--unselected:active .md3-switch__handle::before{background-color:var(--_unselected-pressed-handle-color)}.md3-switch--unselected:disabled .md3-switch__handle::before{background-color:var(--_disabled-unselected-handle-color)}.md3-switch__ripple{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%, -50%);height:var(--_state-layer-size);width:var(--_state-layer-size)}.md3-switch--selected .md3-switch__ripple{--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.md3-switch--unselected .md3-switch__ripple{--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity)}.md3-switch__icons{position:relative;height:100%;width:100%}.md3-switch__icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.md3-switch:disabled .md3-switch__icon{transition:none}.md3-switch--selected .md3-switch__icon--on,.md3-switch--unselected .md3-switch__icon--off{opacity:1}.md3-switch--unselected .md3-switch__handle:not(.md3-switch__handle--big) .md3-switch__icon--on{transform:rotate(-45deg)}.md3-switch--selected .md3-switch__icon{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.md3-switch--unselected .md3-switch__icon{width:var(--_unselected-icon-size);height:var(--_unselected-icon-size);fill:var(--_unselected-icon-color)}.md3-switch--selected:disabled .md3-switch__icon{fill:var(--_disabled-selected-icon-color)}.md3-switch--unselected:disabled .md3-switch__icon{fill:var(--_disabled-unselected-icon-color)}/*# sourceMappingURL=switch-styles.css.map */
|
|
7
|
+
export const styles = css `:host{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, rgb(var(--md-sys-color-surface-rgb, 254, 247, 255), 1));--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.38));--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.12));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_handle-shape: var(--md-switch-handle-shape, 9999px);--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-state-layer-color: var(--md-switch-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-switch-selected-focus-state-layer-opacity, 0.12);--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-shape: var(--md-switch-track-shape, 9999px);--_track-width: var(--md-switch-track-width, 52px);--_unselected-focus-handle-color: var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-icon-color: var(--md-switch-unselected-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-state-layer-color: var(--md-switch-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-switch-unselected-focus-state-layer-opacity, 0.12);--_unselected-focus-track-color: var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-outline-color: var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-color: var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-height: var(--md-switch-unselected-handle-height, 16px);--_unselected-handle-width: var(--md-switch-unselected-handle-width, 16px);--_unselected-hover-handle-color: var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-switch-unselected-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-switch-unselected-hover-state-layer-opacity, 0.08);--_unselected-hover-track-color: var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-track-outline-color: var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-icon-color: var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-icon-size: var(--md-switch-unselected-icon-size, 16px);--_unselected-pressed-handle-color: var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-switch-unselected-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-opacity: var(--md-switch-unselected-pressed-state-layer-opacity, 0.12);--_unselected-pressed-track-color: var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-track-outline-color: var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-track-color: var(--md-switch-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-track-outline-color: var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e));--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_handle-shape-start-start: var( --md-switch-handle-shape-start-start, var(--_handle-shape) );--_handle-shape-start-end: var( --md-switch-handle-shape-start-end, var(--_handle-shape) );--_handle-shape-end-end: var( --md-switch-handle-shape-end-end, var(--_handle-shape) );--_handle-shape-end-start: var( --md-switch-handle-shape-end-start, var(--_handle-shape) );--_track-shape-start-start: var( --md-switch-track-shape-start-start, var(--_track-shape) );--_track-shape-start-end: var( --md-switch-track-shape-start-end, var(--_track-shape) );--_track-shape-end-end: var( --md-switch-track-shape-end-end, var(--_track-shape) );--_track-shape-end-start: var( --md-switch-track-shape-end-start, var(--_track-shape) );display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}@media screen and (forced-colors: active){:host{--md-switch-disabled-selected-icon-color: GrayText;--md-switch-disabled-selected-track-color: GrayText;--md-switch-disabled-unselected-handle-color: GrayText;--md-switch-disabled-unselected-icon-color: Canvas;--md-switch-selected-focus-track-color: ButtonText;--md-switch-selected-hover-track-color: ButtonText;--md-switch-selected-icon-color: ButtonText;--md-switch-selected-pressed-track-color: ButtonText;--md-switch-selected-track-color: ButtonText;--md-switch-unselected-focus-handle-color: ButtonText;--md-switch-unselected-handle-color: ButtonText;--md-switch-unselected-hover-handle-color: ButtonText;--md-switch-unselected-icon-color: Canvas;--md-switch-unselected-pressed-handle-color: ButtonText}}md-focus-ring{--md-focus-ring-shape-start-start: var(--_track-shape-start-start);--md-focus-ring-shape-start-end: var(--_track-shape-start-end);--md-focus-ring-shape-end-end: var(--_track-shape-end-end);--md-focus-ring-shape-end-start: var(--_track-shape-end-start)}.md3-switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.md3-switch__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-switch:disabled{cursor:default;pointer-events:none}.md3-switch:disabled .md3-switch__track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.md3-switch:disabled .md3-switch__track::before{background-clip:content-box}.md3-switch--selected:disabled .md3-switch__track{background-clip:border-box}.md3-switch__track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center;transition:background-color 67ms linear;background-color:var(--_selected-track-color)}.md3-switch:disabled .md3-switch__track{transition:none}.md3-switch--selected:hover .md3-switch__track{background-color:var(--_selected-hover-track-color)}.md3-switch--selected:focus-visible .md3-switch__track{background-color:var(--_selected-focus-track-color)}.md3-switch--selected:active .md3-switch__track{background-color:var(--_selected-pressed-track-color)}.md3-switch--selected:disabled .md3-switch__track{background-color:var(--_disabled-selected-track-color)}.md3-switch__track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;border-style:solid;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms;border-width:var(--_track-outline-width);background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color)}.md3-switch:disabled .md3-switch__track::before{transition:none}.md3-switch--selected .md3-switch__track::before{opacity:0}.md3-switch--unselected:hover .md3-switch__track::before{background-color:var(--_unselected-hover-track-color);border-color:var(--_unselected-hover-track-outline-color)}.md3-switch--unselected:focus-visible .md3-switch__track::before{background-color:var(--_unselected-focus-track-color);border-color:var(--_unselected-focus-track-outline-color)}.md3-switch--unselected:active .md3-switch__track::before{background-color:var(--_unselected-pressed-track-color);border-color:var(--_unselected-pressed-track-outline-color)}.md3-switch--unselected:disabled .md3-switch__track::before{background-color:var(--_disabled-unselected-track-color);border-color:var(--_disabled-unselected-track-outline-color)}.md3-switch__handle-container{position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);display:flex}.md3-switch--selected .md3-switch__handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.md3-switch--unselected .md3-switch__handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.md3-switch:disabled .md3-switch__handle-container{transition:none}.md3-switch__handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_unselected-handle-height);width:var(--_unselected-handle-width);background-color:var(--_selected-handle-color);transform-origin:center;transition-property:height,width,background-color;transition-duration:250ms,250ms,67ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1),linear;z-index:0}.md3-switch__handle::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition:opacity 67ms linear}.md3-switch--selected .md3-switch__handle::before{opacity:0}.md3-switch:disabled .md3-switch__handle::before{transition:none}.md3-switch:disabled .md3-switch__handle{transition:none}.md3-switch--selected .md3-switch__handle,.md3-switch--unselected .md3-switch__handle.md3-switch__handle--big{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.md3-switch--selected:enabled:active .md3-switch__handle,.md3-switch--unselected:enabled:active .md3-switch__handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.md3-switch--selected:hover .md3-switch__handle{background-color:var(--_selected-hover-handle-color)}.md3-switch--selected:focus-visible .md3-switch__handle{background-color:var(--_selected-focus-handle-color)}.md3-switch--selected:active .md3-switch__handle{background-color:var(--_selected-pressed-handle-color)}.md3-switch--selected:disabled .md3-switch__handle{background-color:var(--_disabled-selected-handle-color)}.md3-switch__handle::before{background-color:var(--_unselected-handle-color)}.md3-switch--unselected:hover .md3-switch__handle::before{background-color:var(--_unselected-hover-handle-color)}.md3-switch--unselected:focus-visible .md3-switch__handle::before{background-color:var(--_unselected-focus-handle-color)}.md3-switch--unselected:active .md3-switch__handle::before{background-color:var(--_unselected-pressed-handle-color)}.md3-switch--unselected:disabled .md3-switch__handle::before{background-color:var(--_disabled-unselected-handle-color)}.md3-switch__ripple{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%, -50%);height:var(--_state-layer-size);width:var(--_state-layer-size)}.md3-switch--selected .md3-switch__ripple{--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.md3-switch--unselected .md3-switch__ripple{--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity)}.md3-switch__icons{position:relative;height:100%;width:100%}.md3-switch__icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.md3-switch:disabled .md3-switch__icon{transition:none}.md3-switch--selected .md3-switch__icon--on,.md3-switch--unselected .md3-switch__icon--off{opacity:1}.md3-switch--unselected .md3-switch__handle:not(.md3-switch__handle--big) .md3-switch__icon--on{transform:rotate(-45deg)}.md3-switch--selected .md3-switch__icon{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.md3-switch--unselected .md3-switch__icon{width:var(--_unselected-icon-size);height:var(--_unselected-icon-size);fill:var(--_unselected-icon-color)}.md3-switch--selected:disabled .md3-switch__icon{fill:var(--_disabled-selected-icon-color)}.md3-switch--unselected:disabled .md3-switch__icon{fill:var(--_disabled-unselected-icon-color)}/*# sourceMappingURL=switch-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=switch-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch-styles.css.js","sourceRoot":"","sources":["switch-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_handle-shape-start-start: var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, 9999px));--_handle-shape-start-end: var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, 9999px));--_handle-shape-end-end: var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, 9999px));--_handle-shape-end-start: var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, 9999px));--_track-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, 9999px));--_track-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, 9999px));--_track-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, 9999px));--_track-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, 9999px));--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, rgb(var(--md-sys-color-surface-rgb, 254, 247, 255), 1));--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.38));--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.12));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-state-layer-color: var(--md-switch-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-switch-selected-focus-state-layer-opacity, 0.12);--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-width: var(--md-switch-track-width, 52px);--_unselected-focus-handle-color: var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-icon-color: var(--md-switch-unselected-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-state-layer-color: var(--md-switch-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-switch-unselected-focus-state-layer-opacity, 0.12);--_unselected-focus-track-color: var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-outline-color: var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-color: var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-height: var(--md-switch-unselected-handle-height, 16px);--_unselected-handle-width: var(--md-switch-unselected-handle-width, 16px);--_unselected-hover-handle-color: var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-switch-unselected-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-switch-unselected-hover-state-layer-opacity, 0.08);--_unselected-hover-track-color: var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-track-outline-color: var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-icon-color: var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-icon-size: var(--md-switch-unselected-icon-size, 16px);--_unselected-pressed-handle-color: var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-switch-unselected-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-opacity: var(--md-switch-unselected-pressed-state-layer-opacity, 0.12);--_unselected-pressed-track-color: var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-track-outline-color: var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-track-color: var(--md-switch-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-track-outline-color: var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e));--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}@media screen and (forced-colors: active){:host{--md-switch-disabled-selected-icon-color:GrayText;--md-switch-disabled-selected-track-color:GrayText;--md-switch-disabled-unselected-handle-color:GrayText;--md-switch-disabled-unselected-icon-color:Canvas;--md-switch-selected-focus-track-color:ButtonText;--md-switch-selected-hover-track-color:ButtonText;--md-switch-selected-icon-color:ButtonText;--md-switch-selected-pressed-track-color:ButtonText;--md-switch-selected-track-color:ButtonText;--md-switch-unselected-focus-handle-color:ButtonText;--md-switch-unselected-handle-color:ButtonText;--md-switch-unselected-hover-handle-color:ButtonText;--md-switch-unselected-icon-color:Canvas;--md-switch-unselected-pressed-handle-color:ButtonText}}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_track-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_track-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_track-shape-end-start));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_track-shape-end-end)))))}.md3-switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.md3-switch__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-switch:disabled{cursor:default;pointer-events:none}.md3-switch:disabled .md3-switch__track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.md3-switch:disabled .md3-switch__track::before{background-clip:content-box}.md3-switch--selected:disabled .md3-switch__track{background-clip:border-box}.md3-switch__track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center;transition:background-color 67ms linear;background-color:var(--_selected-track-color)}.md3-switch:disabled .md3-switch__track{transition:none}.md3-switch--selected:hover .md3-switch__track{background-color:var(--_selected-hover-track-color)}.md3-switch--selected:focus-visible .md3-switch__track{background-color:var(--_selected-focus-track-color)}.md3-switch--selected:active .md3-switch__track{background-color:var(--_selected-pressed-track-color)}.md3-switch--selected:disabled .md3-switch__track{background-color:var(--_disabled-selected-track-color)}.md3-switch__track::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;border-style:solid;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms;border-width:var(--_track-outline-width);background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color)}.md3-switch:disabled .md3-switch__track::before{transition:none}.md3-switch--selected .md3-switch__track::before{opacity:0}.md3-switch--unselected:hover .md3-switch__track::before{background-color:var(--_unselected-hover-track-color);border-color:var(--_unselected-hover-track-outline-color)}.md3-switch--unselected:focus-visible .md3-switch__track::before{background-color:var(--_unselected-focus-track-color);border-color:var(--_unselected-focus-track-outline-color)}.md3-switch--unselected:active .md3-switch__track::before{background-color:var(--_unselected-pressed-track-color);border-color:var(--_unselected-pressed-track-outline-color)}.md3-switch--unselected:disabled .md3-switch__track::before{background-color:var(--_disabled-unselected-track-color);border-color:var(--_disabled-unselected-track-outline-color)}.md3-switch__handle-container{position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);display:flex}.md3-switch--selected .md3-switch__handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.md3-switch--unselected .md3-switch__handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.md3-switch:disabled .md3-switch__handle-container{transition:none}.md3-switch__handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_unselected-handle-height);width:var(--_unselected-handle-width);background-color:var(--_selected-handle-color);transform-origin:center;transition-property:height,width,background-color;transition-duration:250ms,250ms,67ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1),linear;z-index:0}.md3-switch__handle::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition:opacity 67ms linear}.md3-switch--selected .md3-switch__handle::before{opacity:0}.md3-switch:disabled .md3-switch__handle::before{transition:none}.md3-switch:disabled .md3-switch__handle{transition:none}.md3-switch--selected .md3-switch__handle,.md3-switch--unselected .md3-switch__handle.md3-switch__handle--big{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.md3-switch--selected:enabled:active .md3-switch__handle,.md3-switch--unselected:enabled:active .md3-switch__handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.md3-switch--selected:hover .md3-switch__handle{background-color:var(--_selected-hover-handle-color)}.md3-switch--selected:focus-visible .md3-switch__handle{background-color:var(--_selected-focus-handle-color)}.md3-switch--selected:active .md3-switch__handle{background-color:var(--_selected-pressed-handle-color)}.md3-switch--selected:disabled .md3-switch__handle{background-color:var(--_disabled-selected-handle-color)}.md3-switch__handle::before{background-color:var(--_unselected-handle-color)}.md3-switch--unselected:hover .md3-switch__handle::before{background-color:var(--_unselected-hover-handle-color)}.md3-switch--unselected:focus-visible .md3-switch__handle::before{background-color:var(--_unselected-focus-handle-color)}.md3-switch--unselected:active .md3-switch__handle::before{background-color:var(--_unselected-pressed-handle-color)}.md3-switch--unselected:disabled .md3-switch__handle::before{background-color:var(--_disabled-unselected-handle-color)}.md3-switch__ripple{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%, -50%);height:var(--_state-layer-size);width:var(--_state-layer-size)}.md3-switch--selected .md3-switch__ripple{--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.md3-switch--unselected .md3-switch__ripple{--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity)}.md3-switch__icons{position:relative;height:100%;width:100%}.md3-switch__icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.md3-switch:disabled .md3-switch__icon{transition:none}.md3-switch--selected .md3-switch__icon--on,.md3-switch--unselected .md3-switch__icon--off{opacity:1}.md3-switch--unselected .md3-switch__handle:not(.md3-switch__handle--big) .md3-switch__icon--on{transform:rotate(-45deg)}.md3-switch--selected .md3-switch__icon{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.md3-switch--unselected .md3-switch__icon{width:var(--_unselected-icon-size);height:var(--_unselected-icon-size);fill:var(--_unselected-icon-color)}.md3-switch--selected:disabled .md3-switch__icon{fill:var(--_disabled-selected-icon-color)}.md3-switch--unselected:disabled .md3-switch__icon{fill:var(--_disabled-unselected-icon-color)}/*# sourceMappingURL=switch-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"switch-styles.css.js","sourceRoot":"","sources":["switch-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, rgb(var(--md-sys-color-surface-rgb, 254, 247, 255), 1));--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.38));--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.12));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_handle-shape: var(--md-switch-handle-shape, 9999px);--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-state-layer-color: var(--md-switch-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-switch-selected-focus-state-layer-opacity, 0.12);--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-shape: var(--md-switch-track-shape, 9999px);--_track-width: var(--md-switch-track-width, 52px);--_unselected-focus-handle-color: var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-icon-color: var(--md-switch-unselected-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-state-layer-color: var(--md-switch-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-switch-unselected-focus-state-layer-opacity, 0.12);--_unselected-focus-track-color: var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-outline-color: var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-color: var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-height: var(--md-switch-unselected-handle-height, 16px);--_unselected-handle-width: var(--md-switch-unselected-handle-width, 16px);--_unselected-hover-handle-color: var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-switch-unselected-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-switch-unselected-hover-state-layer-opacity, 0.08);--_unselected-hover-track-color: var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-track-outline-color: var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-icon-color: var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-icon-size: var(--md-switch-unselected-icon-size, 16px);--_unselected-pressed-handle-color: var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-switch-unselected-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-opacity: var(--md-switch-unselected-pressed-state-layer-opacity, 0.12);--_unselected-pressed-track-color: var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-track-outline-color: var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-track-color: var(--md-switch-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-track-outline-color: var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e));--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_handle-shape-start-start: var( --md-switch-handle-shape-start-start, var(--_handle-shape) );--_handle-shape-start-end: var( --md-switch-handle-shape-start-end, var(--_handle-shape) );--_handle-shape-end-end: var( --md-switch-handle-shape-end-end, var(--_handle-shape) );--_handle-shape-end-start: var( --md-switch-handle-shape-end-start, var(--_handle-shape) );--_track-shape-start-start: var( --md-switch-track-shape-start-start, var(--_track-shape) );--_track-shape-start-end: var( --md-switch-track-shape-start-end, var(--_track-shape) );--_track-shape-end-end: var( --md-switch-track-shape-end-end, var(--_track-shape) );--_track-shape-end-start: var( --md-switch-track-shape-end-start, var(--_track-shape) );display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}@media screen and (forced-colors: active){:host{--md-switch-disabled-selected-icon-color: GrayText;--md-switch-disabled-selected-track-color: GrayText;--md-switch-disabled-unselected-handle-color: GrayText;--md-switch-disabled-unselected-icon-color: Canvas;--md-switch-selected-focus-track-color: ButtonText;--md-switch-selected-hover-track-color: ButtonText;--md-switch-selected-icon-color: ButtonText;--md-switch-selected-pressed-track-color: ButtonText;--md-switch-selected-track-color: ButtonText;--md-switch-unselected-focus-handle-color: ButtonText;--md-switch-unselected-handle-color: ButtonText;--md-switch-unselected-hover-handle-color: ButtonText;--md-switch-unselected-icon-color: Canvas;--md-switch-unselected-pressed-handle-color: ButtonText}}md-focus-ring{--md-focus-ring-shape-start-start: var(--_track-shape-start-start);--md-focus-ring-shape-start-end: var(--_track-shape-start-end);--md-focus-ring-shape-end-end: var(--_track-shape-end-end);--md-focus-ring-shape-end-start: var(--_track-shape-end-start)}.md3-switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.md3-switch__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-switch:disabled{cursor:default;pointer-events:none}.md3-switch:disabled .md3-switch__track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.md3-switch:disabled .md3-switch__track::before{background-clip:content-box}.md3-switch--selected:disabled .md3-switch__track{background-clip:border-box}.md3-switch__track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center;transition:background-color 67ms linear;background-color:var(--_selected-track-color)}.md3-switch:disabled .md3-switch__track{transition:none}.md3-switch--selected:hover .md3-switch__track{background-color:var(--_selected-hover-track-color)}.md3-switch--selected:focus-visible .md3-switch__track{background-color:var(--_selected-focus-track-color)}.md3-switch--selected:active .md3-switch__track{background-color:var(--_selected-pressed-track-color)}.md3-switch--selected:disabled .md3-switch__track{background-color:var(--_disabled-selected-track-color)}.md3-switch__track::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;border-style:solid;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms;border-width:var(--_track-outline-width);background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color)}.md3-switch:disabled .md3-switch__track::before{transition:none}.md3-switch--selected .md3-switch__track::before{opacity:0}.md3-switch--unselected:hover .md3-switch__track::before{background-color:var(--_unselected-hover-track-color);border-color:var(--_unselected-hover-track-outline-color)}.md3-switch--unselected:focus-visible .md3-switch__track::before{background-color:var(--_unselected-focus-track-color);border-color:var(--_unselected-focus-track-outline-color)}.md3-switch--unselected:active .md3-switch__track::before{background-color:var(--_unselected-pressed-track-color);border-color:var(--_unselected-pressed-track-outline-color)}.md3-switch--unselected:disabled .md3-switch__track::before{background-color:var(--_disabled-unselected-track-color);border-color:var(--_disabled-unselected-track-outline-color)}.md3-switch__handle-container{position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);display:flex}.md3-switch--selected .md3-switch__handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.md3-switch--unselected .md3-switch__handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.md3-switch:disabled .md3-switch__handle-container{transition:none}.md3-switch__handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_unselected-handle-height);width:var(--_unselected-handle-width);background-color:var(--_selected-handle-color);transform-origin:center;transition-property:height,width,background-color;transition-duration:250ms,250ms,67ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1),linear;z-index:0}.md3-switch__handle::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition:opacity 67ms linear}.md3-switch--selected .md3-switch__handle::before{opacity:0}.md3-switch:disabled .md3-switch__handle::before{transition:none}.md3-switch:disabled .md3-switch__handle{transition:none}.md3-switch--selected .md3-switch__handle,.md3-switch--unselected .md3-switch__handle.md3-switch__handle--big{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.md3-switch--selected:enabled:active .md3-switch__handle,.md3-switch--unselected:enabled:active .md3-switch__handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.md3-switch--selected:hover .md3-switch__handle{background-color:var(--_selected-hover-handle-color)}.md3-switch--selected:focus-visible .md3-switch__handle{background-color:var(--_selected-focus-handle-color)}.md3-switch--selected:active .md3-switch__handle{background-color:var(--_selected-pressed-handle-color)}.md3-switch--selected:disabled .md3-switch__handle{background-color:var(--_disabled-selected-handle-color)}.md3-switch__handle::before{background-color:var(--_unselected-handle-color)}.md3-switch--unselected:hover .md3-switch__handle::before{background-color:var(--_unselected-hover-handle-color)}.md3-switch--unselected:focus-visible .md3-switch__handle::before{background-color:var(--_unselected-focus-handle-color)}.md3-switch--unselected:active .md3-switch__handle::before{background-color:var(--_unselected-pressed-handle-color)}.md3-switch--unselected:disabled .md3-switch__handle::before{background-color:var(--_disabled-unselected-handle-color)}.md3-switch__ripple{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%, -50%);height:var(--_state-layer-size);width:var(--_state-layer-size)}.md3-switch--selected .md3-switch__ripple{--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.md3-switch--unselected .md3-switch__ripple{--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity)}.md3-switch__icons{position:relative;height:100%;width:100%}.md3-switch__icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.md3-switch:disabled .md3-switch__icon{transition:none}.md3-switch--selected .md3-switch__icon--on,.md3-switch--unselected .md3-switch__icon--off{opacity:1}.md3-switch--unselected .md3-switch__handle:not(.md3-switch__handle--big) .md3-switch__icon--on{transform:rotate(-45deg)}.md3-switch--selected .md3-switch__icon{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.md3-switch--unselected .md3-switch__icon{width:var(--_unselected-icon-size);height:var(--_unselected-icon-size);fill:var(--_unselected-icon-color)}.md3-switch--selected:disabled .md3-switch__icon{fill:var(--_disabled-selected-icon-color)}.md3-switch--unselected:disabled .md3-switch__icon{fill:var(--_disabled-unselected-icon-color)}/*# sourceMappingURL=switch-styles.css.map */\n`;\n "]}
|
package/switch/lib/switch.d.ts
CHANGED
|
@@ -37,9 +37,6 @@ export declare class Switch extends LitElement {
|
|
|
37
37
|
* overrides the behavior of the `icons` property.
|
|
38
38
|
*/
|
|
39
39
|
showOnlySelectedIcon: boolean;
|
|
40
|
-
ariaLabel: string;
|
|
41
|
-
ariaLabelledBy: string;
|
|
42
|
-
private showFocusRing;
|
|
43
40
|
private showRipple;
|
|
44
41
|
private readonly ripple;
|
|
45
42
|
private readonly button;
|
|
@@ -62,7 +59,6 @@ export declare class Switch extends LitElement {
|
|
|
62
59
|
private getRenderClasses;
|
|
63
60
|
private readonly renderRipple;
|
|
64
61
|
private readonly getRipple;
|
|
65
|
-
private readonly renderFocusRing;
|
|
66
62
|
private renderHandle;
|
|
67
63
|
private renderIcons;
|
|
68
64
|
/**
|
|
@@ -76,7 +72,4 @@ export declare class Switch extends LitElement {
|
|
|
76
72
|
private renderTouchTarget;
|
|
77
73
|
private shouldShowIcons;
|
|
78
74
|
private handleClick;
|
|
79
|
-
private handleFocus;
|
|
80
|
-
private handleBlur;
|
|
81
|
-
private handlePointerDown;
|
|
82
75
|
}
|