@material/web 1.1.2-nightly.c97362c.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/button/internal/button.d.ts +8 -0
  2. package/button/internal/button.js +9 -1
  3. package/button/internal/button.js.map +1 -1
  4. package/dialog/internal/_dialog.scss +50 -42
  5. package/dialog/internal/dialog-styles.css.js +1 -1
  6. package/dialog/internal/dialog-styles.css.js.map +1 -1
  7. package/divider/internal/_divider.scss +6 -6
  8. package/divider/internal/divider-styles.css.js +1 -1
  9. package/divider/internal/divider-styles.css.js.map +1 -1
  10. package/elevation/internal/_elevation.scss +10 -4
  11. package/elevation/internal/elevation-styles.css.js +1 -1
  12. package/elevation/internal/elevation-styles.css.js.map +1 -1
  13. package/iconbutton/internal/icon-button.d.ts +8 -0
  14. package/iconbutton/internal/icon-button.js +9 -1
  15. package/iconbutton/internal/icon-button.js.map +1 -1
  16. package/menu/internal/menuitem/_menu-item.scss +31 -52
  17. package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
  18. package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
  19. package/package.json +5 -3
  20. package/radio/internal/_radio.scss +34 -34
  21. package/radio/internal/radio-styles.css.js +1 -1
  22. package/radio/internal/radio-styles.css.js.map +1 -1
  23. package/ripple/internal/_ripple.scss +8 -9
  24. package/ripple/internal/ripple-styles.css.js +1 -1
  25. package/ripple/internal/ripple-styles.css.js.map +1 -1
  26. package/switch/internal/_handle.scss +42 -37
  27. package/switch/internal/_icon.scss +17 -17
  28. package/switch/internal/_switch.scss +52 -52
  29. package/switch/internal/_track.scss +18 -18
  30. package/switch/internal/switch-styles.css.js +1 -1
  31. package/switch/internal/switch-styles.css.js.map +1 -1
  32. package/testing/harness.d.ts +371 -0
  33. package/testing/harness.js +737 -0
  34. package/testing/harness.js.map +1 -0
  35. package/testing/transform-pseudo-classes.d.ts +39 -0
  36. package/testing/transform-pseudo-classes.js +172 -0
  37. package/testing/transform-pseudo-classes.js.map +1 -0
  38. package/tokens/_index.scss +0 -1
  39. package/tokens/_md-comp-list-item.scss +2 -2
  40. package/tokens/_md-comp-menu-item.scss +63 -7
  41. package/tokens/_md-comp-menu-list-item.scss +0 -162
package/switch/internal/_handle.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  $_md-sys-motion: tokens.md-sys-motion-values();
15
15
  $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
16
16
 
17
- @mixin styles() {
17
+ @mixin styles($tokens) {
18
18
  @layer styles {
19
19
  .handle-container {
20
20
  display: flex;
@@ -25,7 +25,9 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
25
25
  transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
26
26
  }
27
27
 
28
- $margin: calc(var(--_track-width) - var(--_track-height));
28
+ $margin: calc(
29
+ map.get($tokens, 'track-width') - map.get($tokens, 'track-height')
30
+ );
29
31
 
30
32
  .selected .handle-container {
31
33
  margin-inline-start: $margin;
@@ -41,12 +43,12 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
41
43
 
42
44
  .handle {
43
45
  // Handle shape
44
- border-start-start-radius: var(--_handle-shape-start-start);
45
- border-start-end-radius: var(--_handle-shape-start-end);
46
- border-end-end-radius: var(--_handle-shape-end-end);
47
- border-end-start-radius: var(--_handle-shape-end-start);
48
- height: var(--_handle-height);
49
- width: var(--_handle-width);
46
+ border-start-start-radius: map.get($tokens, 'handle-shape-start-start');
47
+ border-start-end-radius: map.get($tokens, 'handle-shape-start-end');
48
+ border-end-end-radius: map.get($tokens, 'handle-shape-end-end');
49
+ border-end-start-radius: map.get($tokens, 'handle-shape-end-start');
50
+ height: map.get($tokens, 'handle-height');
51
+ width: map.get($tokens, 'handle-width');
50
52
 
51
53
  transform-origin: center;
52
54
  transition-property: height, width;
@@ -71,79 +73,82 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
71
73
  }
72
74
 
73
75
  .selected .handle {
74
- height: var(--_selected-handle-height);
75
- width: var(--_selected-handle-width);
76
+ height: map.get($tokens, 'selected-handle-height');
77
+ width: map.get($tokens, 'selected-handle-width');
76
78
  }
77
79
 
78
80
  .handle.with-icon {
79
- height: var(--_with-icon-handle-height);
80
- width: var(--_with-icon-handle-width);
81
+ height: map.get($tokens, 'with-icon-handle-height');
82
+ width: map.get($tokens, 'with-icon-handle-width');
81
83
  }
82
84
 
83
85
  .selected:not(.disabled):active .handle,
84
86
  .unselected:not(.disabled):active .handle {
85
- height: var(--_pressed-handle-height);
86
- width: var(--_pressed-handle-width);
87
+ height: map.get($tokens, 'pressed-handle-height');
88
+ width: map.get($tokens, 'pressed-handle-width');
87
89
  transition-timing-function: linear;
88
90
  transition-duration: 100ms;
89
91
  }
90
92
 
91
93
  .selected .handle::before {
92
- background-color: var(--_selected-handle-color);
94
+ background-color: map.get($tokens, 'selected-handle-color');
93
95
  }
94
96
 
95
97
  .selected:hover .handle::before {
96
- background-color: var(--_selected-hover-handle-color);
98
+ background-color: map.get($tokens, 'selected-hover-handle-color');
97
99
  }
98
100
 
99
101
  .selected:focus-within .handle::before {
100
- background-color: var(--_selected-focus-handle-color);
102
+ background-color: map.get($tokens, 'selected-focus-handle-color');
101
103
  }
102
104
 
103
105
  .selected:active .handle::before {
104
- background-color: var(--_selected-pressed-handle-color);
106
+ background-color: map.get($tokens, 'selected-pressed-handle-color');
105
107
  }
106
108
 
107
109
  .selected.disabled .handle::before {
108
- background-color: var(--_disabled-selected-handle-color);
109
- opacity: var(--_disabled-selected-handle-opacity);
110
+ background-color: map.get($tokens, 'disabled-selected-handle-color');
111
+ opacity: map.get($tokens, 'disabled-selected-handle-opacity');
110
112
  }
111
113
 
112
114
  .unselected .handle::before {
113
- background-color: var(--_handle-color);
115
+ background-color: map.get($tokens, 'handle-color');
114
116
  }
115
117
 
116
118
  .unselected:hover .handle::before {
117
- background-color: var(--_hover-handle-color);
119
+ background-color: map.get($tokens, 'hover-handle-color');
118
120
  }
119
121
 
120
122
  .unselected:focus-within .handle::before {
121
- background-color: var(--_focus-handle-color);
123
+ background-color: map.get($tokens, 'focus-handle-color');
122
124
  }
123
125
 
124
126
  .unselected:active .handle::before {
125
- background-color: var(--_pressed-handle-color);
127
+ background-color: map.get($tokens, 'pressed-handle-color');
126
128
  }
127
129
 
128
130
  .unselected.disabled .handle::before {
129
- background-color: var(--_disabled-handle-color);
130
- opacity: var(--_disabled-handle-opacity);
131
+ background-color: map.get($tokens, 'disabled-handle-color');
132
+ opacity: map.get($tokens, 'disabled-handle-opacity');
131
133
  }
132
134
 
133
135
  md-ripple {
134
- border-radius: var(--_state-layer-shape);
135
- height: var(--_state-layer-size);
136
+ border-radius: map.get($tokens, 'state-layer-shape');
137
+ height: map.get($tokens, 'state-layer-size');
136
138
  inset: unset;
137
- width: var(--_state-layer-size);
139
+ width: map.get($tokens, 'state-layer-size');
138
140
  }
139
141
 
140
142
  .selected md-ripple {
141
143
  @include ripple.theme(
142
144
  (
143
- 'hover-color': var(--_selected-hover-state-layer-color),
144
- 'pressed-color': var(--_selected-pressed-state-layer-color),
145
- 'hover-opacity': var(--_selected-hover-state-layer-opacity),
146
- 'pressed-opacity': var(--_selected-pressed-state-layer-opacity),
145
+ 'hover-color': map.get($tokens, 'selected-hover-state-layer-color'),
146
+ 'pressed-color':
147
+ map.get($tokens, 'selected-pressed-state-layer-color'),
148
+ 'hover-opacity':
149
+ map.get($tokens, 'selected-hover-state-layer-opacity'),
150
+ 'pressed-opacity':
151
+ map.get($tokens, 'selected-pressed-state-layer-opacity'),
147
152
  )
148
153
  );
149
154
  }
@@ -151,10 +156,10 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
151
156
  .unselected md-ripple {
152
157
  @include ripple.theme(
153
158
  (
154
- 'hover-color': var(--_hover-state-layer-color),
155
- 'pressed-color': var(--_pressed-state-layer-color),
156
- 'hover-opacity': var(--_hover-state-layer-opacity),
157
- 'pressed-opacity': var(--_pressed-state-layer-opacity),
159
+ 'hover-color': map.get($tokens, 'hover-state-layer-color'),
160
+ 'pressed-color': map.get($tokens, 'pressed-state-layer-color'),
161
+ 'hover-opacity': map.get($tokens, 'hover-state-layer-opacity'),
162
+ 'pressed-opacity': map.get($tokens, 'pressed-state-layer-opacity'),
158
163
  )
159
164
  );
160
165
  }
package/switch/internal/_icon.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  $_md-sys-motion: tokens.md-sys-motion-values();
14
14
  $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
15
15
 
16
- @mixin styles() {
16
+ @mixin styles($tokens) {
17
17
  @layer styles {
18
18
  .icons {
19
19
  position: relative;
@@ -50,49 +50,49 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
50
50
  }
51
51
 
52
52
  .icon--off {
53
- width: var(--_icon-size);
54
- height: var(--_icon-size);
55
- color: var(--_icon-color);
53
+ width: map.get($tokens, 'icon-size');
54
+ height: map.get($tokens, 'icon-size');
55
+ color: map.get($tokens, 'icon-color');
56
56
  }
57
57
 
58
58
  .unselected:hover .icon--off {
59
- color: var(--_hover-icon-color);
59
+ color: map.get($tokens, 'hover-icon-color');
60
60
  }
61
61
 
62
62
  .unselected:focus-within .icon--off {
63
- color: var(--_focus-icon-color);
63
+ color: map.get($tokens, 'focus-icon-color');
64
64
  }
65
65
 
66
66
  .unselected:active .icon--off {
67
- color: var(--_pressed-icon-color);
67
+ color: map.get($tokens, 'pressed-icon-color');
68
68
  }
69
69
 
70
70
  .unselected.disabled .icon--off {
71
- color: var(--_disabled-icon-color);
72
- opacity: var(--_disabled-icon-opacity);
71
+ color: map.get($tokens, 'disabled-icon-color');
72
+ opacity: map.get($tokens, 'disabled-icon-opacity');
73
73
  }
74
74
 
75
75
  .icon--on {
76
- width: var(--_selected-icon-size);
77
- height: var(--_selected-icon-size);
78
- color: var(--_selected-icon-color);
76
+ width: map.get($tokens, 'selected-icon-size');
77
+ height: map.get($tokens, 'selected-icon-size');
78
+ color: map.get($tokens, 'selected-icon-color');
79
79
  }
80
80
 
81
81
  .selected:hover .icon--on {
82
- color: var(--_selected-hover-icon-color);
82
+ color: map.get($tokens, 'selected-hover-icon-color');
83
83
  }
84
84
 
85
85
  .selected:focus-within .icon--on {
86
- color: var(--_selected-focus-icon-color);
86
+ color: map.get($tokens, 'selected-focus-icon-color');
87
87
  }
88
88
 
89
89
  .selected:active .icon--on {
90
- color: var(--_selected-pressed-icon-color);
90
+ color: map.get($tokens, 'selected-pressed-icon-color');
91
91
  }
92
92
 
93
93
  .selected.disabled .icon--on {
94
- color: var(--_disabled-selected-icon-color);
95
- opacity: var(--_disabled-selected-icon-opacity);
94
+ color: map.get($tokens, 'disabled-selected-icon-color');
95
+ opacity: map.get($tokens, 'disabled-selected-icon-opacity');
96
96
  }
97
97
  }
98
98
 
package/switch/internal/_switch.scss CHANGED
@@ -43,48 +43,48 @@
43
43
 
44
44
  @mixin styles() {
45
45
  $tokens: tokens.md-comp-switch-values();
46
+ @each $token, $value in $tokens {
47
+ $tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value}));
48
+ }
49
+
50
+ // Support logical shape properties
51
+ $tokens: map.merge(
52
+ $tokens,
53
+ (
54
+ 'handle-shape-start-start':
55
+ var(
56
+ --md-switch-handle-shape-start-start,
57
+ map.get($tokens, 'handle-shape')
58
+ ),
59
+ 'handle-shape-start-end':
60
+ var(
61
+ --md-switch-handle-shape-start-end,
62
+ map.get($tokens, 'handle-shape')
63
+ ),
64
+ 'handle-shape-end-end':
65
+ var(--md-switch-handle-shape-end-end, map.get($tokens, 'handle-shape')),
66
+ 'handle-shape-end-start':
67
+ var(
68
+ --md-switch-handle-shape-end-start,
69
+ map.get($tokens, 'handle-shape')
70
+ ),
71
+ 'track-shape-start-start':
72
+ var(
73
+ --md-switch-track-shape-start-start,
74
+ map.get($tokens, 'track-shape')
75
+ ),
76
+ 'track-shape-start-end':
77
+ var(--md-switch-track-shape-start-end, map.get($tokens, 'track-shape')),
78
+ 'track-shape-end-end':
79
+ var(--md-switch-track-shape-end-end, map.get($tokens, 'track-shape')),
80
+ 'track-shape-end-start':
81
+ var(--md-switch-track-shape-end-start, map.get($tokens, 'track-shape')),
82
+ )
83
+ );
46
84
 
47
85
  @layer styles, hcm;
48
86
  @layer styles {
49
87
  :host {
50
- @each $token, $value in $tokens {
51
- --_#{$token}: var(--md-switch-#{$token}, #{$value});
52
- }
53
-
54
- // Support logical shape properties
55
- --_handle-shape-start-start: var(
56
- --md-switch-handle-shape-start-start,
57
- var(--_handle-shape)
58
- );
59
- --_handle-shape-start-end: var(
60
- --md-switch-handle-shape-start-end,
61
- var(--_handle-shape)
62
- );
63
- --_handle-shape-end-end: var(
64
- --md-switch-handle-shape-end-end,
65
- var(--_handle-shape)
66
- );
67
- --_handle-shape-end-start: var(
68
- --md-switch-handle-shape-end-start,
69
- var(--_handle-shape)
70
- );
71
- --_track-shape-start-start: var(
72
- --md-switch-track-shape-start-start,
73
- var(--_track-shape)
74
- );
75
- --_track-shape-start-end: var(
76
- --md-switch-track-shape-start-end,
77
- var(--_track-shape)
78
- );
79
- --_track-shape-end-end: var(
80
- --md-switch-track-shape-end-end,
81
- var(--_track-shape)
82
- );
83
- --_track-shape-end-start: var(
84
- --md-switch-track-shape-end-start,
85
- var(--_track-shape)
86
- );
87
-
88
88
  display: inline-flex;
89
89
  outline: none;
90
90
  vertical-align: top;
@@ -97,16 +97,16 @@
97
97
  }
98
98
 
99
99
  :host([touch-target='wrapper']) {
100
- margin: max(0px, (48px - var(--_track-height)) / 2) 0px;
100
+ margin: max(0px, (48px - map.get($tokens, 'track-height')) / 2) 0px;
101
101
  }
102
102
 
103
103
  md-focus-ring {
104
104
  @include focus-ring.theme(
105
105
  (
106
- 'shape-start-start': var(--_track-shape-start-start),
107
- 'shape-start-end': var(--_track-shape-start-end),
108
- 'shape-end-end': var(--_track-shape-end-end),
109
- 'shape-end-start': var(--_track-shape-end-start),
106
+ 'shape-start-start': map.get($tokens, 'track-shape-start-start'),
107
+ 'shape-start-end': map.get($tokens, 'track-shape-start-end'),
108
+ 'shape-end-end': map.get($tokens, 'track-shape-end-end'),
109
+ 'shape-end-start': map.get($tokens, 'track-shape-end-start'),
110
110
  )
111
111
  );
112
112
  }
@@ -116,14 +116,14 @@
116
116
  display: inline-flex;
117
117
  flex-shrink: 0; // Stop from collapsing in flex containers
118
118
  position: relative;
119
- width: var(--_track-width);
120
- height: var(--_track-height);
119
+ width: map.get($tokens, 'track-width');
120
+ height: map.get($tokens, 'track-height');
121
121
 
122
122
  // Track shape
123
- border-start-start-radius: var(--_track-shape-start-start);
124
- border-start-end-radius: var(--_track-shape-start-end);
125
- border-end-end-radius: var(--_track-shape-end-end);
126
- border-end-start-radius: var(--_track-shape-end-start);
123
+ border-start-start-radius: map.get($tokens, 'track-shape-start-start');
124
+ border-start-end-radius: map.get($tokens, 'track-shape-start-end');
125
+ border-end-end-radius: map.get($tokens, 'track-shape-end-end');
126
+ border-end-start-radius: map.get($tokens, 'track-shape-end-start');
127
127
  }
128
128
 
129
129
  // Input is also touch target
@@ -143,7 +143,7 @@
143
143
  }
144
144
  }
145
145
 
146
- @include track.styles();
147
- @include handle.styles();
148
- @include icon.styles();
146
+ @include track.styles($tokens);
147
+ @include handle.styles($tokens);
148
+ @include icon.styles($tokens);
149
149
  }
package/switch/internal/_track.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  @use 'sass:map';
8
8
  // go/keep-sorted end
9
9
 
10
- @mixin styles() {
10
+ @mixin styles($tokens) {
11
11
  @layer styles {
12
12
  .track {
13
13
  position: absolute;
@@ -45,7 +45,7 @@
45
45
  .disabled .track::before,
46
46
  .disabled .track::after {
47
47
  transition: none;
48
- opacity: var(--_disabled-track-opacity);
48
+ opacity: map.get($tokens, 'disabled-track-opacity');
49
49
  }
50
50
 
51
51
  .disabled .track::before {
@@ -53,19 +53,19 @@
53
53
  }
54
54
 
55
55
  .selected .track::before {
56
- background-color: var(--_selected-track-color);
56
+ background-color: map.get($tokens, 'selected-track-color');
57
57
  }
58
58
 
59
59
  .selected:hover .track::before {
60
- background-color: var(--_selected-hover-track-color);
60
+ background-color: map.get($tokens, 'selected-hover-track-color');
61
61
  }
62
62
 
63
63
  .selected:focus-within .track::before {
64
- background-color: var(--_selected-focus-track-color);
64
+ background-color: map.get($tokens, 'selected-focus-track-color');
65
65
  }
66
66
 
67
67
  .selected:active .track::before {
68
- background-color: var(--_selected-pressed-track-color);
68
+ background-color: map.get($tokens, 'selected-pressed-track-color');
69
69
  }
70
70
 
71
71
  .selected.disabled .track {
@@ -73,34 +73,34 @@
73
73
  }
74
74
 
75
75
  .selected.disabled .track::before {
76
- background-color: var(--_disabled-selected-track-color);
76
+ background-color: map.get($tokens, 'disabled-selected-track-color');
77
77
  }
78
78
 
79
79
  .unselected .track::before {
80
- background-color: var(--_track-color);
81
- border-color: var(--_track-outline-color);
80
+ background-color: map.get($tokens, 'track-color');
81
+ border-color: map.get($tokens, 'track-outline-color');
82
82
  border-style: solid;
83
- border-width: var(--_track-outline-width);
83
+ border-width: map.get($tokens, 'track-outline-width');
84
84
  }
85
85
 
86
86
  .unselected:hover .track::before {
87
- background-color: var(--_hover-track-color);
88
- border-color: var(--_hover-track-outline-color);
87
+ background-color: map.get($tokens, 'hover-track-color');
88
+ border-color: map.get($tokens, 'hover-track-outline-color');
89
89
  }
90
90
 
91
91
  .unselected:focus-visible .track::before {
92
- background-color: var(--_focus-track-color);
93
- border-color: var(--_focus-track-outline-color);
92
+ background-color: map.get($tokens, 'focus-track-color');
93
+ border-color: map.get($tokens, 'focus-track-outline-color');
94
94
  }
95
95
 
96
96
  .unselected:active .track::before {
97
- background-color: var(--_pressed-track-color);
98
- border-color: var(--_pressed-track-outline-color);
97
+ background-color: map.get($tokens, 'pressed-track-color');
98
+ border-color: map.get($tokens, 'pressed-track-outline-color');
99
99
  }
100
100
 
101
101
  .unselected.disabled .track::before {
102
- background-color: var(--_disabled-track-color);
103
- border-color: var(--_disabled-track-outline-color);
102
+ background-color: map.get($tokens, 'disabled-track-color');
103
+ border-color: map.get($tokens, 'disabled-track-outline-color');
104
104
  }
105
105
  }
106
106
 
package/switch/internal/switch-styles.css.js CHANGED
@@ -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 `@layer styles, hcm;@layer styles{:host{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 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-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);--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_disabled-handle-color: var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-opacity: var(--md-switch-disabled-handle-opacity, 0.38);--_disabled-icon-color: var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-icon-opacity: var(--md-switch-disabled-icon-opacity, 0.38);--_disabled-track-color: var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-track-outline-color: var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-handle-color: var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-color: var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-outline-color: var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e));--_handle-height: var(--md-switch-handle-height, 16px);--_handle-width: var(--md-switch-handle-width, 16px);--_hover-handle-color: var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-state-layer-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--_hover-track-color: var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-track-outline-color: var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_icon-size: var(--md-switch-icon-size, 16px);--_pressed-handle-color: var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-state-layer-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12);--_pressed-track-color: var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-track-outline-color: var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));--_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);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_track-height))/2) 0px}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)}.switch{align-items:center;display:inline-flex;flex-shrink: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)}input{appearance:none;height:48px;outline:none;margin:0;position:absolute;width:100%;z-index:1;cursor:inherit}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--_selected-track-color)}.selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--_disabled-selected-track-color)}.unselected .track::before{background-color:var(--_track-color);border-color:var(--_track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.unselected:hover .track::before{background-color:var(--_hover-track-color);border-color:var(--_hover-track-outline-color)}.unselected:focus-visible .track::before{background-color:var(--_focus-track-color);border-color:var(--_focus-track-outline-color)}.unselected:active .track::before{background-color:var(--_pressed-track-color);border-color:var(--_pressed-track-outline-color)}.unselected.disabled .track::before{background-color:var(--_disabled-track-color);border-color:var(--_disabled-track-outline-color)}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.disabled .handle-container{transition:none}.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(--_handle-height);width:var(--_handle-width);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--_selected-handle-color)}.selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.selected.disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.unselected .handle::before{background-color:var(--_handle-color)}.unselected:hover .handle::before{background-color:var(--_hover-handle-color)}.unselected:focus-within .handle::before{background-color:var(--_focus-handle-color)}.unselected:active .handle::before{background-color:var(--_pressed-handle-color)}.unselected.disabled .handle::before{background-color:var(--_disabled-handle-color);opacity:var(--_disabled-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-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-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.unselected md-ripple{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_icon-size);height:var(--_icon-size);color:var(--_icon-color)}.unselected:hover .icon--off{color:var(--_hover-icon-color)}.unselected:focus-within .icon--off{color:var(--_focus-icon-color)}.unselected:active .icon--off{color:var(--_pressed-icon-color)}.unselected.disabled .icon--off{color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);color:var(--_selected-icon-color)}.selected:hover .icon--on{color:var(--_selected-hover-icon-color)}.selected:focus-within .icon--on{color:var(--_selected-focus-icon-color)}.selected:active .icon--on{color:var(--_selected-pressed-icon-color)}.selected.disabled .icon--on{color:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}/*# sourceMappingURL=switch-styles.css.map */
7
+ export const styles = css `@layer styles, hcm;@layer styles{:host{display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-switch-track-height, 32px))/2) 0px}md-focus-ring{--md-focus-ring-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, 9999px));--md-focus-ring-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, 9999px));--md-focus-ring-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, 9999px));--md-focus-ring-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, 9999px))}.switch{align-items:center;display:inline-flex;flex-shrink:0;position:relative;width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, 9999px));border-start-end-radius:var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, 9999px));border-end-end-radius:var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, 9999px));border-end-start-radius:var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, 9999px))}input{appearance:none;height:48px;outline:none;margin:0;position:absolute;width:100%;z-index:1;cursor:inherit}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--md-switch-disabled-track-opacity, 0.12)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}.selected:hover .track::before{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}.selected:focus-within .track::before{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}.selected:active .track::before{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20))}.unselected .track::before{background-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));border-style:solid;border-width:var(--md-switch-track-outline-width, 2px)}.unselected:hover .track::before{background-color:var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:focus-visible .track::before{background-color:var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:active .track::before{background-color:var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected.disabled .track::before{background-color:var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20))}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.unselected .handle-container{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, 9999px));border-start-end-radius:var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, 9999px));border-end-end-radius:var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, 9999px));border-end-start-radius:var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, 9999px));height:var(--md-switch-handle-height, 16px);width:var(--md-switch-handle-width, 16px);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--md-switch-selected-handle-height, 24px);width:var(--md-switch-selected-handle-width, 24px)}.handle.with-icon{height:var(--md-switch-with-icon-handle-height, 24px);width:var(--md-switch-with-icon-handle-width, 24px)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--md-switch-pressed-handle-height, 28px);width:var(--md-switch-pressed-handle-width, 28px);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}.selected:hover .handle::before{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:focus-within .handle::before{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:active .handle::before{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected.disabled .handle::before{background-color:var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));opacity:var(--md-switch-disabled-selected-handle-opacity, 1)}.unselected .handle::before{background-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e))}.unselected:hover .handle::before{background-color:var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:focus-within .handle::before{background-color:var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:active .handle::before{background-color:var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected.disabled .handle::before{background-color:var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-handle-opacity, 0.38)}md-ripple{border-radius:var(--md-switch-state-layer-shape, 9999px);height:var(--md-switch-state-layer-size, 40px);inset:unset;width:var(--md-switch-state-layer-size, 40px)}.selected md-ripple{--md-ripple-hover-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12)}.unselected md-ripple{--md-ripple-hover-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--md-switch-icon-size, 16px);height:var(--md-switch-icon-size, 16px);color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:hover .icon--off{color:var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:focus-within .icon--off{color:var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:active .icon--off{color:var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected.disabled .icon--off{color:var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));opacity:var(--md-switch-disabled-icon-opacity, 0.38)}.icon--on{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px);color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:hover .icon--on{color:var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:focus-within .icon--on{color:var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:active .icon--on{color:var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected.disabled .icon--on{color:var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}/*# sourceMappingURL=switch-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=switch-styles.css.js.map
package/switch/internal/switch-styles.css.js.map CHANGED
@@ -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`@layer styles, hcm;@layer styles{:host{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 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-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);--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_disabled-handle-color: var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-opacity: var(--md-switch-disabled-handle-opacity, 0.38);--_disabled-icon-color: var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-icon-opacity: var(--md-switch-disabled-icon-opacity, 0.38);--_disabled-track-color: var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-track-outline-color: var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-handle-color: var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-color: var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-outline-color: var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e));--_handle-height: var(--md-switch-handle-height, 16px);--_handle-width: var(--md-switch-handle-width, 16px);--_hover-handle-color: var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-state-layer-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--_hover-track-color: var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-track-outline-color: var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_icon-size: var(--md-switch-icon-size, 16px);--_pressed-handle-color: var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-state-layer-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12);--_pressed-track-color: var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-track-outline-color: var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));--_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);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_track-height))/2) 0px}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)}.switch{align-items:center;display:inline-flex;flex-shrink: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)}input{appearance:none;height:48px;outline:none;margin:0;position:absolute;width:100%;z-index:1;cursor:inherit}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--_selected-track-color)}.selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--_disabled-selected-track-color)}.unselected .track::before{background-color:var(--_track-color);border-color:var(--_track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.unselected:hover .track::before{background-color:var(--_hover-track-color);border-color:var(--_hover-track-outline-color)}.unselected:focus-visible .track::before{background-color:var(--_focus-track-color);border-color:var(--_focus-track-outline-color)}.unselected:active .track::before{background-color:var(--_pressed-track-color);border-color:var(--_pressed-track-outline-color)}.unselected.disabled .track::before{background-color:var(--_disabled-track-color);border-color:var(--_disabled-track-outline-color)}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.disabled .handle-container{transition:none}.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(--_handle-height);width:var(--_handle-width);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:\"\";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--_selected-handle-color)}.selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.selected.disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.unselected .handle::before{background-color:var(--_handle-color)}.unselected:hover .handle::before{background-color:var(--_hover-handle-color)}.unselected:focus-within .handle::before{background-color:var(--_focus-handle-color)}.unselected:active .handle::before{background-color:var(--_pressed-handle-color)}.unselected.disabled .handle::before{background-color:var(--_disabled-handle-color);opacity:var(--_disabled-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-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-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.unselected md-ripple{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_icon-size);height:var(--_icon-size);color:var(--_icon-color)}.unselected:hover .icon--off{color:var(--_hover-icon-color)}.unselected:focus-within .icon--off{color:var(--_focus-icon-color)}.unselected:active .icon--off{color:var(--_pressed-icon-color)}.unselected.disabled .icon--off{color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);color:var(--_selected-icon-color)}.selected:hover .icon--on{color:var(--_selected-hover-icon-color)}.selected:focus-within .icon--on{color:var(--_selected-focus-icon-color)}.selected:active .icon--on{color:var(--_selected-pressed-icon-color)}.selected.disabled .icon--on{color:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}/*# 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`@layer styles, hcm;@layer styles{:host{display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-switch-track-height, 32px))/2) 0px}md-focus-ring{--md-focus-ring-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, 9999px));--md-focus-ring-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, 9999px));--md-focus-ring-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, 9999px));--md-focus-ring-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, 9999px))}.switch{align-items:center;display:inline-flex;flex-shrink:0;position:relative;width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, 9999px));border-start-end-radius:var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, 9999px));border-end-end-radius:var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, 9999px));border-end-start-radius:var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, 9999px))}input{appearance:none;height:48px;outline:none;margin:0;position:absolute;width:100%;z-index:1;cursor:inherit}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--md-switch-disabled-track-opacity, 0.12)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}.selected:hover .track::before{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}.selected:focus-within .track::before{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}.selected:active .track::before{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20))}.unselected .track::before{background-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));border-style:solid;border-width:var(--md-switch-track-outline-width, 2px)}.unselected:hover .track::before{background-color:var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:focus-visible .track::before{background-color:var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:active .track::before{background-color:var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected.disabled .track::before{background-color:var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20))}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.unselected .handle-container{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, 9999px));border-start-end-radius:var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, 9999px));border-end-end-radius:var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, 9999px));border-end-start-radius:var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, 9999px));height:var(--md-switch-handle-height, 16px);width:var(--md-switch-handle-width, 16px);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:\"\";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--md-switch-selected-handle-height, 24px);width:var(--md-switch-selected-handle-width, 24px)}.handle.with-icon{height:var(--md-switch-with-icon-handle-height, 24px);width:var(--md-switch-with-icon-handle-width, 24px)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--md-switch-pressed-handle-height, 28px);width:var(--md-switch-pressed-handle-width, 28px);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}.selected:hover .handle::before{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:focus-within .handle::before{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:active .handle::before{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected.disabled .handle::before{background-color:var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));opacity:var(--md-switch-disabled-selected-handle-opacity, 1)}.unselected .handle::before{background-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e))}.unselected:hover .handle::before{background-color:var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:focus-within .handle::before{background-color:var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:active .handle::before{background-color:var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected.disabled .handle::before{background-color:var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-handle-opacity, 0.38)}md-ripple{border-radius:var(--md-switch-state-layer-shape, 9999px);height:var(--md-switch-state-layer-size, 40px);inset:unset;width:var(--md-switch-state-layer-size, 40px)}.selected md-ripple{--md-ripple-hover-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12)}.unselected md-ripple{--md-ripple-hover-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--md-switch-icon-size, 16px);height:var(--md-switch-icon-size, 16px);color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:hover .icon--off{color:var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:focus-within .icon--off{color:var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:active .icon--off{color:var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected.disabled .icon--off{color:var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));opacity:var(--md-switch-disabled-icon-opacity, 0.38)}.icon--on{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px);color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:hover .icon--on{color:var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:focus-within .icon--on{color:var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:active .icon--on{color:var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected.disabled .icon--on{color:var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}/*# sourceMappingURL=switch-styles.css.map */\n`;\n "]}