@api-client/ui 0.3.3 → 0.3.4
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/build/src/md/button/internals/base.d.ts.map +1 -1
- package/build/src/md/button/internals/base.js +2 -6
- package/build/src/md/button/internals/base.js.map +1 -1
- package/build/src/md/chip/internals/Chip.d.ts +11 -15
- package/build/src/md/chip/internals/Chip.d.ts.map +1 -1
- package/build/src/md/chip/internals/Chip.js +66 -104
- package/build/src/md/chip/internals/Chip.js.map +1 -1
- package/build/src/md/chip/internals/Chip.styles.d.ts.map +1 -1
- package/build/src/md/chip/internals/Chip.styles.js +114 -101
- package/build/src/md/chip/internals/Chip.styles.js.map +1 -1
- package/build/src/md/chip/internals/ChipSet.d.ts +16 -0
- package/build/src/md/chip/internals/ChipSet.d.ts.map +1 -0
- package/build/src/md/chip/internals/ChipSet.js +138 -0
- package/build/src/md/chip/internals/ChipSet.js.map +1 -0
- package/build/src/md/chip/internals/ChipSet.styles.d.ts +3 -0
- package/build/src/md/chip/internals/ChipSet.styles.d.ts.map +1 -0
- package/build/src/md/chip/internals/ChipSet.styles.js +9 -0
- package/build/src/md/chip/internals/ChipSet.styles.js.map +1 -0
- package/build/src/md/chip/ui-chip-set.d.ts +11 -0
- package/build/src/md/chip/ui-chip-set.d.ts.map +1 -0
- package/build/src/md/chip/ui-chip-set.js +27 -0
- package/build/src/md/chip/ui-chip-set.js.map +1 -0
- package/build/src/md/switch/internals/Switch.styles.js +1 -1
- package/build/src/md/switch/internals/Switch.styles.js.map +1 -1
- package/demo/md/chip/chip.html +33 -6
- package/demo/md/chip/chip.ts +111 -56
- package/package.json +1 -1
- package/src/md/button/internals/base.ts +2 -6
- package/src/md/chip/internals/Chip.styles.ts +114 -101
- package/src/md/chip/internals/Chip.ts +58 -88
- package/src/md/chip/internals/ChipSet.styles.ts +9 -0
- package/src/md/chip/internals/ChipSet.ts +142 -0
- package/src/md/chip/ui-chip-set.ts +15 -0
- package/src/md/switch/internals/Switch.styles.ts +1 -1
- package/test/ui/chip/UiChip.test.ts +18 -67
|
@@ -5,167 +5,180 @@ export default css `
|
|
|
5
5
|
vertical-align: middle;
|
|
6
6
|
outline: none;
|
|
7
7
|
-webkit-tap-highlight-color: transparent;
|
|
8
|
-
|
|
8
|
+
position: relative;
|
|
9
|
+
user-select: none;
|
|
9
10
|
|
|
10
11
|
font-family: var(--md-sys-typescale-label-large-font);
|
|
11
12
|
font-size: var(--md-sys-typescale-label-large-size);
|
|
12
13
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
13
14
|
line-height: var(--md-sys-typescale-label-large-height);
|
|
14
15
|
|
|
15
|
-
border-radius: var(--md-sys-shape-corner-small);
|
|
16
|
-
color: var(--md-sys-color-on-surface);
|
|
17
|
-
fill: var(--md-sys-color-primary);
|
|
18
|
-
|
|
19
|
-
user-select: none;
|
|
20
|
-
|
|
21
16
|
--md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
|
|
22
17
|
--md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
|
|
23
18
|
--md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
|
|
24
|
-
}
|
|
25
19
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
20
|
+
--_leading-icon-color: currentColor;
|
|
21
|
+
--_trailing-icon-color: currentColor;
|
|
22
|
+
--_background-color: transparent;
|
|
23
|
+
--_color: inherit;
|
|
24
|
+
--_shadow: var(--md-sys-elevation-0);
|
|
25
|
+
--_outline-color: transparent;
|
|
26
|
+
--_outline-size: 0;
|
|
27
|
+
--_inline-padding-start: 16px;
|
|
28
|
+
--_inline-padding-end: 16px;
|
|
29
|
+
--_avatar-size: 24px;
|
|
30
|
+
--_avatar-shape: 24px;
|
|
31
|
+
--_icon-size: 18px;
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:host([disabled]) .content {
|
|
42
|
-
color: var(--md-sys-color-on-surface);
|
|
43
|
-
opacity: 0.68;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.surface {
|
|
47
|
-
position: relative;
|
|
48
|
-
height: inherit;
|
|
49
|
-
border-radius: inherit;
|
|
33
|
+
height: 32px;
|
|
34
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
35
|
+
box-shadow: var(--_shadow);
|
|
36
|
+
border: var(--_outline-size) solid var(--_outline-color);
|
|
50
37
|
}
|
|
51
38
|
|
|
52
39
|
.ripple {
|
|
53
|
-
z-index: 0;
|
|
54
40
|
border-radius: inherit;
|
|
41
|
+
transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
|
|
55
42
|
}
|
|
56
43
|
|
|
57
|
-
.
|
|
58
|
-
|
|
59
|
-
|
|
44
|
+
.ripple.activated {
|
|
45
|
+
z-index: 1;
|
|
46
|
+
}
|
|
60
47
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
48
|
+
:host([disabled]) {
|
|
49
|
+
--_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
50
|
+
--_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
51
|
+
--_leading-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
52
|
+
--_trailing-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
53
|
+
--_outline-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
54
|
+
box-shadow: none;
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
pointer-events: none;
|
|
65
57
|
}
|
|
66
58
|
|
|
67
|
-
.
|
|
59
|
+
.surface {
|
|
68
60
|
height: inherit;
|
|
69
61
|
display: flex;
|
|
70
62
|
align-items: center;
|
|
71
63
|
justify-content: start;
|
|
72
64
|
box-sizing: border-box;
|
|
73
|
-
padding: 0
|
|
65
|
+
padding: 0 var(--_inline-padding-end) 0 var(--_inline-padding-start);
|
|
74
66
|
border-radius: inherit;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
67
|
+
background-color: var(--_background-color);
|
|
68
|
+
color: var(--_color);
|
|
69
|
+
gap: 0;
|
|
78
70
|
}
|
|
79
71
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
72
|
+
.leading-icon {
|
|
73
|
+
height: var(--_icon-size);
|
|
74
|
+
width: 0px;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
transition: width 230ms var(--md-sys-animation-easing-standard);
|
|
77
|
+
color: var(--_leading-icon-color);
|
|
78
|
+
fill: currentColor;
|
|
84
79
|
}
|
|
85
80
|
|
|
86
|
-
.
|
|
87
|
-
|
|
88
|
-
|
|
81
|
+
.leading-icon::slotted(*) {
|
|
82
|
+
width: var(--_icon-size);
|
|
83
|
+
height: var(--_icon-size);
|
|
84
|
+
margin-right: 8px;
|
|
89
85
|
}
|
|
90
86
|
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
slot[name='avatar']::slotted(*) {
|
|
88
|
+
width: var(--_avatar-size);
|
|
89
|
+
height: var(--_avatar-size);
|
|
90
|
+
border-radius: var(--_avatar-shape);
|
|
91
|
+
flex-shrink: 0;
|
|
92
|
+
flex-grow: 0;
|
|
93
|
+
margin-right: 8px;
|
|
93
94
|
}
|
|
94
95
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
.check-mark.checked {
|
|
97
|
+
width: 18px;
|
|
98
|
+
margin-right: 8px;
|
|
98
99
|
}
|
|
99
100
|
|
|
100
|
-
.
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
.trailing-icon {
|
|
102
|
+
margin-left: 8px;
|
|
103
|
+
width: 18px;
|
|
104
|
+
height: 18px;
|
|
105
|
+
color: var(--_trailing-icon-color);
|
|
106
|
+
fill: currentColor;
|
|
103
107
|
}
|
|
104
108
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
109
|
+
:host([elevated]) {
|
|
110
|
+
--_shadow: var(--md-sys-elevation-1);
|
|
111
|
+
border: none;
|
|
112
|
+
--_background-color: var(--md-sys-color-surface-container-low);
|
|
108
113
|
}
|
|
109
114
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
height: 24px;
|
|
113
|
-
border-radius: var(--md-sys-shape-corner-medium);
|
|
115
|
+
:host([elevated]:hover:not([disabled])) {
|
|
116
|
+
--_shadow: var(--md-sys-elevation-2);
|
|
114
117
|
}
|
|
115
118
|
|
|
116
|
-
.
|
|
117
|
-
|
|
118
|
-
width: 0px;
|
|
119
|
-
overflow: hidden;
|
|
120
|
-
transition: width 230ms var(--md-sys-animation-easing-standard);
|
|
119
|
+
.surface.has-trailing-icon {
|
|
120
|
+
--_inline-padding-end: 8px;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
123
|
+
:host([type='assist']:not([disabled])) {
|
|
124
|
+
--_outline-color: var(--md-sys-color-outline-variant);
|
|
125
|
+
--_outline-size: 1px;
|
|
126
|
+
--_color: var(--md-sys-color-on-surface);
|
|
127
|
+
--_leading-icon-color: var(--md-sys-color-primary);
|
|
126
128
|
}
|
|
127
129
|
|
|
128
|
-
.
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
130
|
+
:host .has-icon {
|
|
131
|
+
--_inline-padding-start: 8px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
:host .has-avatar {
|
|
135
|
+
--_inline-padding-start: 4px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
:host([checked]) {
|
|
139
|
+
--_inline-padding-start: 8px;
|
|
140
|
+
--_background-color: var(--md-sys-color-secondary-container);
|
|
133
141
|
}
|
|
134
142
|
|
|
135
|
-
:host([
|
|
136
|
-
|
|
137
|
-
|
|
143
|
+
:host([type='filter']:not([disabled])) {
|
|
144
|
+
--_leading-icon-color: var(--md-sys-color-primary);
|
|
145
|
+
--_trailing-icon-color: var(--md-sys-on-surface-variant);
|
|
146
|
+
--_outline-color: var(--md-sys-color-outline-variant);
|
|
147
|
+
--_outline-size: 1px;
|
|
148
|
+
--_color: var(--md-sys-color-on-surface-variant);
|
|
138
149
|
}
|
|
139
150
|
|
|
140
|
-
:host([
|
|
141
|
-
|
|
151
|
+
:host([type='filter'][checked]) {
|
|
152
|
+
--_outline-size: 1px;
|
|
142
153
|
}
|
|
143
154
|
|
|
144
|
-
:host([checked])
|
|
145
|
-
|
|
146
|
-
|
|
155
|
+
:host([type='filter'][checked]:not([disabled])) {
|
|
156
|
+
--_leading-icon-color: var(--md-sys-color-on-secondary-container);
|
|
157
|
+
--_trailing-icon-color: var(--md-sys-on-secondary-container);
|
|
158
|
+
--_outline-color: var(--md-sys-color-secondary-container);
|
|
159
|
+
--_color: var(--md-sys-color-on-secondary-container);
|
|
147
160
|
}
|
|
148
161
|
|
|
149
|
-
:host([type='
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
162
|
+
:host([type='input']:not([disabled])) {
|
|
163
|
+
--_outline-color: var(--md-sys-color-outline-variant);
|
|
164
|
+
--_outline-size: 1px;
|
|
165
|
+
--_leading-icon-color: var(--md-sys-color-primary);
|
|
166
|
+
--_trailing-icon-color: var(--md-sys-color-on-surface-variant);
|
|
167
|
+
--_color: var(--md-sys-color-on-surface-variant);
|
|
153
168
|
}
|
|
154
169
|
|
|
155
|
-
:host([type='
|
|
156
|
-
|
|
157
|
-
color: var(--md-sys-color-on-secondary-container);
|
|
170
|
+
:host([type='input'][checked]) {
|
|
171
|
+
--_outline-size: 0px;
|
|
158
172
|
}
|
|
159
173
|
|
|
160
|
-
:host([type='
|
|
161
|
-
|
|
162
|
-
color: var(--md-sys-color-
|
|
174
|
+
:host([type='suggestion']) {
|
|
175
|
+
--_outline-size: 1px;
|
|
176
|
+
--_outline-color: var(--md-sys-color-outline-variant);
|
|
177
|
+
--_color: var(--md-sys-color-on-surface-variant);
|
|
163
178
|
}
|
|
164
179
|
|
|
165
|
-
:host([type='
|
|
166
|
-
|
|
167
|
-
color: var(--md-sys-color-on-surface-variant);
|
|
168
|
-
fill: var(--md-sys-color-on-surface-variant);
|
|
180
|
+
:host([type='suggestion']:not([disabled])) {
|
|
181
|
+
--_leading-icon-color: var(--md-sys-color-primary);
|
|
169
182
|
}
|
|
170
183
|
`;
|
|
171
184
|
//# sourceMappingURL=Chip.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.styles.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Chip.styles.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n user-select: none;\n\n font-family: var(--md-sys-typescale-label-large-font);\n font-size: var(--md-sys-typescale-label-large-size);\n letter-spacing: var(--md-sys-typescale-label-large-tracking);\n line-height: var(--md-sys-typescale-label-large-height);\n\n --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);\n --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);\n --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n\n --_leading-icon-color: currentColor;\n --_trailing-icon-color: currentColor;\n --_background-color: transparent;\n --_color: inherit;\n --_shadow: var(--md-sys-elevation-0);\n --_outline-color: transparent;\n --_outline-size: 0;\n --_inline-padding-start: 16px;\n --_inline-padding-end: 16px;\n --_avatar-size: 24px;\n --_avatar-shape: 24px;\n --_icon-size: 18px;\n\n height: 32px;\n border-radius: var(--md-sys-shape-corner-small);\n box-shadow: var(--_shadow);\n border: var(--_outline-size) solid var(--_outline-color);\n }\n\n .ripple {\n border-radius: inherit;\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n .ripple.activated {\n z-index: 1;\n }\n\n :host([disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_leading-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_trailing-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_outline-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .surface {\n height: inherit;\n display: flex;\n align-items: center;\n justify-content: start;\n box-sizing: border-box;\n padding: 0 var(--_inline-padding-end) 0 var(--_inline-padding-start);\n border-radius: inherit;\n background-color: var(--_background-color);\n color: var(--_color);\n gap: 0;\n }\n\n .leading-icon {\n height: var(--_icon-size);\n width: 0px;\n overflow: hidden;\n transition: width 230ms var(--md-sys-animation-easing-standard);\n color: var(--_leading-icon-color);\n fill: currentColor;\n }\n\n .leading-icon::slotted(*) {\n width: var(--_icon-size);\n height: var(--_icon-size);\n margin-right: 8px;\n }\n\n slot[name='avatar']::slotted(*) {\n width: var(--_avatar-size);\n height: var(--_avatar-size);\n border-radius: var(--_avatar-shape);\n flex-shrink: 0;\n flex-grow: 0;\n margin-right: 8px;\n }\n\n .check-mark.checked {\n width: 18px;\n margin-right: 8px;\n }\n\n .trailing-icon {\n margin-left: 8px;\n width: 18px;\n height: 18px;\n color: var(--_trailing-icon-color);\n fill: currentColor;\n }\n\n :host([elevated]) {\n --_shadow: var(--md-sys-elevation-1);\n border: none;\n --_background-color: var(--md-sys-color-surface-container-low);\n }\n\n :host([elevated]:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-2);\n }\n\n .surface.has-trailing-icon {\n --_inline-padding-end: 8px;\n }\n\n :host([type='assist']:not([disabled])) {\n --_outline-color: var(--md-sys-color-outline-variant);\n --_outline-size: 1px;\n --_color: var(--md-sys-color-on-surface);\n --_leading-icon-color: var(--md-sys-color-primary);\n }\n\n :host .has-icon {\n --_inline-padding-start: 8px;\n }\n\n :host .has-avatar {\n --_inline-padding-start: 4px;\n }\n\n :host([checked]) {\n --_inline-padding-start: 8px;\n --_background-color: var(--md-sys-color-secondary-container);\n }\n\n :host([type='filter']:not([disabled])) {\n --_leading-icon-color: var(--md-sys-color-primary);\n --_trailing-icon-color: var(--md-sys-on-surface-variant);\n --_outline-color: var(--md-sys-color-outline-variant);\n --_outline-size: 1px;\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([type='filter'][checked]) {\n --_outline-size: 1px;\n }\n\n :host([type='filter'][checked]:not([disabled])) {\n --_leading-icon-color: var(--md-sys-color-on-secondary-container);\n --_trailing-icon-color: var(--md-sys-on-secondary-container);\n --_outline-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([type='input']:not([disabled])) {\n --_outline-color: var(--md-sys-color-outline-variant);\n --_outline-size: 1px;\n --_leading-icon-color: var(--md-sys-color-primary);\n --_trailing-icon-color: var(--md-sys-color-on-surface-variant);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([type='input'][checked]) {\n --_outline-size: 0px;\n }\n\n :host([type='suggestion']) {\n --_outline-size: 1px;\n --_outline-color: var(--md-sys-color-outline-variant);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([type='suggestion']:not([disabled])) {\n --_leading-icon-color: var(--md-sys-color-primary);\n }\n`\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import Chip from './Chip.js';
|
|
3
|
+
/**
|
|
4
|
+
* A chip set component.
|
|
5
|
+
*/
|
|
6
|
+
export default class ChipSet extends LitElement {
|
|
7
|
+
get chips(): Chip[];
|
|
8
|
+
private accessor childElements;
|
|
9
|
+
private readonly internals;
|
|
10
|
+
constructor();
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
13
|
+
private handleKeyDown;
|
|
14
|
+
private updateTabIndices;
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=ChipSet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipSet.d.ts","sourceRoot":"","sources":["../../../../../src/md/chip/internals/ChipSet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAGtC,OAAO,IAAI,MAAM,WAAW,CAAA;AAE5B;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,UAAU;IAC7C,IAAI,KAAK,WAER;IAEwB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgB;IACvE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;;IAU1C,iBAAiB,IAAI,IAAI;cAOf,MAAM;IAIzB,OAAO,CAAC,aAAa;IA0ErB,OAAO,CAAC,gBAAgB;CA4BzB"}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { html, LitElement } from 'lit';
|
|
3
|
+
import { queryAssignedElements } from 'lit/decorators.js';
|
|
4
|
+
import Chip from './Chip.js';
|
|
5
|
+
let ChipSet = (() => {
|
|
6
|
+
let _classSuper = LitElement;
|
|
7
|
+
let _childElements_decorators;
|
|
8
|
+
let _childElements_initializers = [];
|
|
9
|
+
let _childElements_extraInitializers = [];
|
|
10
|
+
return class ChipSet extends _classSuper {
|
|
11
|
+
static {
|
|
12
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
13
|
+
_childElements_decorators = [queryAssignedElements()];
|
|
14
|
+
__esDecorate(this, null, _childElements_decorators, { kind: "accessor", name: "childElements", static: false, private: false, access: { has: obj => "childElements" in obj, get: obj => obj.childElements, set: (obj, value) => { obj.childElements = value; } }, metadata: _metadata }, _childElements_initializers, _childElements_extraInitializers);
|
|
15
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
16
|
+
}
|
|
17
|
+
get chips() {
|
|
18
|
+
return this.childElements.filter((child) => child instanceof Chip);
|
|
19
|
+
}
|
|
20
|
+
#childElements_accessor_storage = __runInitializers(this, _childElements_initializers, void 0);
|
|
21
|
+
get childElements() { return this.#childElements_accessor_storage; }
|
|
22
|
+
set childElements(value) { this.#childElements_accessor_storage = value; }
|
|
23
|
+
internals = (__runInitializers(this, _childElements_extraInitializers), this.attachInternals());
|
|
24
|
+
constructor() {
|
|
25
|
+
super();
|
|
26
|
+
this.addEventListener('focusin', this.updateTabIndices.bind(this));
|
|
27
|
+
this.addEventListener('update-focus', this.updateTabIndices.bind(this));
|
|
28
|
+
this.addEventListener('keydown', this.handleKeyDown.bind(this));
|
|
29
|
+
this.internals.role = 'toolbar';
|
|
30
|
+
}
|
|
31
|
+
connectedCallback() {
|
|
32
|
+
super.connectedCallback();
|
|
33
|
+
if (!this.hasAttribute('role')) {
|
|
34
|
+
this.setAttribute('role', 'toolbar');
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
render() {
|
|
38
|
+
return html `<slot @slotchange=${this.updateTabIndices}></slot>`;
|
|
39
|
+
}
|
|
40
|
+
handleKeyDown(event) {
|
|
41
|
+
const isLeft = event.key === 'ArrowLeft';
|
|
42
|
+
const isRight = event.key === 'ArrowRight';
|
|
43
|
+
const isHome = event.key === 'Home';
|
|
44
|
+
const isEnd = event.key === 'End';
|
|
45
|
+
// Ignore non-navigation keys
|
|
46
|
+
if (!isLeft && !isRight && !isHome && !isEnd) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const { chips } = this;
|
|
50
|
+
// Don't try to select another chip if there aren't any.
|
|
51
|
+
if (chips.length < 2) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
// Prevent default interactions, such as scrolling.
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
if (isHome || isEnd) {
|
|
57
|
+
const index = isHome ? 0 : chips.length - 1;
|
|
58
|
+
chips[index].focus({ trailing: isEnd });
|
|
59
|
+
this.updateTabIndices();
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
// Check if moving forwards or backwards
|
|
63
|
+
const isRtl = getComputedStyle(this).direction === 'rtl';
|
|
64
|
+
const forwards = isRtl ? isLeft : isRight;
|
|
65
|
+
const focusedChip = chips.find((chip) => chip.matches(':focus-within'));
|
|
66
|
+
if (!focusedChip) {
|
|
67
|
+
// If there is not already a chip focused, select the first or last chip
|
|
68
|
+
// based on the direction we're traveling.
|
|
69
|
+
const nextChip = forwards ? chips[0] : chips[chips.length - 1];
|
|
70
|
+
nextChip.focus({ trailing: !forwards });
|
|
71
|
+
this.updateTabIndices();
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const currentIndex = chips.indexOf(focusedChip);
|
|
75
|
+
let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;
|
|
76
|
+
// Search for the next sibling that is not disabled to select.
|
|
77
|
+
// If we return to the host index, there is nothing to select.
|
|
78
|
+
while (nextIndex !== currentIndex) {
|
|
79
|
+
if (nextIndex >= chips.length) {
|
|
80
|
+
// Return to start if moving past the last item.
|
|
81
|
+
nextIndex = 0;
|
|
82
|
+
}
|
|
83
|
+
else if (nextIndex < 0) {
|
|
84
|
+
// Go to end if moving before the first item.
|
|
85
|
+
nextIndex = chips.length - 1;
|
|
86
|
+
}
|
|
87
|
+
// Check if the next sibling is disabled. If so,
|
|
88
|
+
// move the index and continue searching.
|
|
89
|
+
//
|
|
90
|
+
// Some toolbar items may be focusable when disabled for increased
|
|
91
|
+
// visibility.
|
|
92
|
+
const nextChip = chips[nextIndex];
|
|
93
|
+
if (nextChip.disabled) {
|
|
94
|
+
if (forwards) {
|
|
95
|
+
nextIndex++;
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
nextIndex--;
|
|
99
|
+
}
|
|
100
|
+
continue;
|
|
101
|
+
}
|
|
102
|
+
nextChip.focus({ trailing: !forwards });
|
|
103
|
+
this.updateTabIndices();
|
|
104
|
+
break;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
updateTabIndices() {
|
|
108
|
+
// The chip that should be focusable is either the chip that currently has
|
|
109
|
+
// focus or the first chip that can be focused.
|
|
110
|
+
const { chips } = this;
|
|
111
|
+
let chipToFocus;
|
|
112
|
+
for (const chip of chips) {
|
|
113
|
+
const isChipFocusable = !chip.disabled;
|
|
114
|
+
const chipIsFocused = chip.matches(':focus-within');
|
|
115
|
+
if (chipIsFocused && isChipFocusable) {
|
|
116
|
+
// Found the first chip that is actively focused. This overrides the
|
|
117
|
+
// first focusable chip found.
|
|
118
|
+
chipToFocus = chip;
|
|
119
|
+
continue;
|
|
120
|
+
}
|
|
121
|
+
if (isChipFocusable && !chipToFocus) {
|
|
122
|
+
chipToFocus = chip;
|
|
123
|
+
}
|
|
124
|
+
// Disable non-focused chips. If we disable all of them, we'll grant focus
|
|
125
|
+
// to the first focusable child that was found.
|
|
126
|
+
chip.tabIndex = -1;
|
|
127
|
+
}
|
|
128
|
+
if (chipToFocus) {
|
|
129
|
+
chipToFocus.tabIndex = 0;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
})();
|
|
134
|
+
/**
|
|
135
|
+
* A chip set component.
|
|
136
|
+
*/
|
|
137
|
+
export default ChipSet;
|
|
138
|
+
//# sourceMappingURL=ChipSet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipSet.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/ChipSet.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit'\nimport { queryAssignedElements } from 'lit/decorators.js'\n\nimport Chip from './Chip.js'\n\n/**\n * A chip set component.\n */\nexport default class ChipSet extends LitElement {\n get chips() {\n return this.childElements.filter((child): child is Chip => child instanceof Chip)\n }\n\n @queryAssignedElements() private accessor childElements!: HTMLElement[]\n private readonly internals = this.attachInternals()\n\n constructor() {\n super()\n this.addEventListener('focusin', this.updateTabIndices.bind(this))\n this.addEventListener('update-focus', this.updateTabIndices.bind(this))\n this.addEventListener('keydown', this.handleKeyDown.bind(this))\n this.internals.role = 'toolbar'\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'toolbar')\n }\n }\n\n protected override render() {\n return html`<slot @slotchange=${this.updateTabIndices}></slot>`\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const isLeft = event.key === 'ArrowLeft'\n const isRight = event.key === 'ArrowRight'\n const isHome = event.key === 'Home'\n const isEnd = event.key === 'End'\n // Ignore non-navigation keys\n if (!isLeft && !isRight && !isHome && !isEnd) {\n return\n }\n\n const { chips } = this as { chips: MaybeMultiActionChip[] }\n // Don't try to select another chip if there aren't any.\n if (chips.length < 2) {\n return\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault()\n\n if (isHome || isEnd) {\n const index = isHome ? 0 : chips.length - 1\n chips[index].focus({ trailing: isEnd })\n this.updateTabIndices()\n return\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl'\n const forwards = isRtl ? isLeft : isRight\n const focusedChip = chips.find((chip) => chip.matches(':focus-within'))\n if (!focusedChip) {\n // If there is not already a chip focused, select the first or last chip\n // based on the direction we're traveling.\n const nextChip = forwards ? chips[0] : chips[chips.length - 1]\n nextChip.focus({ trailing: !forwards })\n this.updateTabIndices()\n return\n }\n\n const currentIndex = chips.indexOf(focusedChip)\n let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1\n // Search for the next sibling that is not disabled to select.\n // If we return to the host index, there is nothing to select.\n while (nextIndex !== currentIndex) {\n if (nextIndex >= chips.length) {\n // Return to start if moving past the last item.\n nextIndex = 0\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = chips.length - 1\n }\n\n // Check if the next sibling is disabled. If so,\n // move the index and continue searching.\n //\n // Some toolbar items may be focusable when disabled for increased\n // visibility.\n const nextChip = chips[nextIndex]\n if (nextChip.disabled) {\n if (forwards) {\n nextIndex++\n } else {\n nextIndex--\n }\n\n continue\n }\n\n nextChip.focus({ trailing: !forwards })\n this.updateTabIndices()\n break\n }\n }\n\n private updateTabIndices() {\n // The chip that should be focusable is either the chip that currently has\n // focus or the first chip that can be focused.\n const { chips } = this\n let chipToFocus: Chip | undefined\n for (const chip of chips) {\n const isChipFocusable = !chip.disabled\n const chipIsFocused = chip.matches(':focus-within')\n if (chipIsFocused && isChipFocusable) {\n // Found the first chip that is actively focused. This overrides the\n // first focusable chip found.\n chipToFocus = chip\n continue\n }\n\n if (isChipFocusable && !chipToFocus) {\n chipToFocus = chip\n }\n\n // Disable non-focused chips. If we disable all of them, we'll grant focus\n // to the first focusable child that was found.\n chip.tabIndex = -1\n }\n\n if (chipToFocus) {\n chipToFocus.tabIndex = 0\n }\n }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n focus(options?: FocusOptions & { trailing?: boolean }): void\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipSet.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/chip/internals/ChipSet.styles.ts"],"names":[],"mappings":";AAEA,wBAMC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipSet.styles.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/ChipSet.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;CAMjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n`\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { CSSResultOrNative } from 'lit';
|
|
2
|
+
import Element from './internals/ChipSet.js';
|
|
3
|
+
export declare class UiChipSetElement extends Element {
|
|
4
|
+
static styles: CSSResultOrNative[];
|
|
5
|
+
}
|
|
6
|
+
declare global {
|
|
7
|
+
interface HTMLElementTagNameMap {
|
|
8
|
+
'ui-chip-set': UiChipSetElement;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=ui-chip-set.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-chip-set.d.ts","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip-set.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAG5C,qBACa,gBAAiB,SAAQ,OAAO;IAC3C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,gBAAgB,CAAA;KAChC;CACF"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
import Element from './internals/ChipSet.js';
|
|
4
|
+
import styles from './internals/ChipSet.styles.js';
|
|
5
|
+
let UiChipSetElement = (() => {
|
|
6
|
+
let _classDecorators = [customElement('ui-chip-set')];
|
|
7
|
+
let _classDescriptor;
|
|
8
|
+
let _classExtraInitializers = [];
|
|
9
|
+
let _classThis;
|
|
10
|
+
let _classSuper = Element;
|
|
11
|
+
var UiChipSetElement = class extends _classSuper {
|
|
12
|
+
static { _classThis = this; }
|
|
13
|
+
static {
|
|
14
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
15
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
16
|
+
UiChipSetElement = _classThis = _classDescriptor.value;
|
|
17
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
18
|
+
}
|
|
19
|
+
static styles = [styles];
|
|
20
|
+
static {
|
|
21
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return UiChipSetElement = _classThis;
|
|
25
|
+
})();
|
|
26
|
+
export { UiChipSetElement };
|
|
27
|
+
//# sourceMappingURL=ui-chip-set.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-chip-set.js","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip-set.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAC5C,OAAO,MAAM,MAAM,+BAA+B,CAAA;IAGrC,gBAAgB;4BAD5B,aAAa,CAAC,aAAa,CAAC;;;;sBACS,OAAO;gCAAf,SAAQ,WAAO;;;;YAA7C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAgB;;;;;SAAhB,gBAAgB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/ChipSet.js'\nimport styles from './internals/ChipSet.styles.js'\n\n@customElement('ui-chip-set')\nexport class UiChipSetElement extends Element {\n static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ui-chip-set': UiChipSetElement\n }\n}\n"]}
|
|
@@ -34,7 +34,7 @@ export default css `
|
|
|
34
34
|
|
|
35
35
|
border: 2px var(--md-sys-color-outline) solid;
|
|
36
36
|
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
37
|
-
background-color: var(--md-sys-color-surface-
|
|
37
|
+
background-color: var(--md-sys-color-surface-container-highest);
|
|
38
38
|
|
|
39
39
|
transition:
|
|
40
40
|
opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../../../src/md/switch/internals/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n outline: none;\n width: 52px;\n height: 40px;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .surface {\n position: relative;\n width: inherit;\n height: inherit;\n\n display: flex;\n align-items: center;\n }\n\n /* Track */\n .track {\n position: absolute;\n inset: 4px 0 0;\n z-index: 1;\n\n width: inherit;\n height: 32px;\n box-sizing: border-box;\n\n border: 2px var(--md-sys-color-outline) solid;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-
|
|
1
|
+
{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../../../src/md/switch/internals/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n outline: none;\n width: 52px;\n height: 40px;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .surface {\n position: relative;\n width: inherit;\n height: inherit;\n\n display: flex;\n align-items: center;\n }\n\n /* Track */\n .track {\n position: absolute;\n inset: 4px 0 0;\n z-index: 1;\n\n width: inherit;\n height: 32px;\n box-sizing: border-box;\n\n border: 2px var(--md-sys-color-outline) solid;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-container-highest);\n\n transition:\n opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),\n background-color 90ms cubic-bezier(0.4, 0, 0.2, 1),\n border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .track.tracking,\n .thumb.tracking {\n transition: none;\n }\n\n .thumb {\n height: 20px;\n width: 20px;\n border-radius: var(--md-sys-shape-corner-full);\n background-color: var(--md-sys-color-outline);\n transform: translateX(6px) scale(0.8);\n transform-origin: center center;\n transition: transform 75ms cubic-bezier(0.4, 0, 0.2, 1) 0s;\n cursor: pointer;\n }\n\n :host([checked]) .thumb {\n background-color: var(--md-sys-color-on-primary);\n }\n\n .withIcon .thumb {\n transform: translateX(6px) scale(1.2);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n :host(:active) .thumb,\n .pressed .thumb {\n transform: translateX(6px) scale(1.4);\n }\n\n :host([checked]) .thumb,\n :host([checked]) .withIcon .thumb {\n transform: translateX(26px) scale(1.2);\n }\n\n :host([checked]:active) .thumb,\n :host([checked]) .pressed .thumb {\n transform: translateX(26px) scale(1.4);\n }\n\n .state {\n position: absolute;\n inset: 0;\n z-index: 2;\n width: 40px;\n height: 40px;\n border-radius: var(--md-sys-shape-corner-full);\n transform: translateX(-5px);\n transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host([checked]) .state {\n transform: translateX(18px);\n cursor: pointer;\n }\n\n .content {\n z-index: 3;\n position: relative;\n }\n\n .icon {\n fill: var(--md-sys-color-surface-variant);\n width: 16px;\n height: 16px;\n }\n\n :host([checked]) .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n :host([checked]) .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n /* Hover state */\n\n :host(:hover) .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-outline);\n }\n\n :host(:hover) .state {\n background-color: var(--md-sys-color-on-surface);\n opacity: var(--md-sys-state-hover-state-layer-opacity);\n }\n\n :host([checked]:hover) .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n :host([checked]:hover) .state {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-hover-state-layer-opacity);\n }\n\n :host(:hover) .thumb {\n background-color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([checked]:hover) .thumb {\n background-color: var(--md-sys-color-primary-container);\n }\n\n :host(:hover) .icon {\n fill: var(--md-sys-color-surface-variant);\n }\n\n :host([checked]:hover) .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n /* Focus state */\n\n :host(:focus) .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-outline);\n }\n\n :host([checked]:focus) .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n :host(:focus) .state {\n background-color: var(--md-sys-color-on-surface);\n opacity: var(--md-sys-state-focus-state-layer-opacity);\n }\n\n :host([checked]:focus) .state {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-focus-state-layer-opacity);\n }\n\n :host(:focus) .thumb {\n background-color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([checked]:focus) .thumb {\n background-color: var(--md-sys-color-primary-container);\n }\n\n :host(:focus) .icon {\n fill: var(--md-sys-color-surface-variant);\n }\n\n :host([checked]:focus) .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n /* Pressed state */\n\n :host(:active) .track,\n .pressed .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-outline);\n }\n\n :host([checked]:active) .track,\n :host([checked]) .pressed .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n :host(:active) .state,\n .pressed .state {\n background-color: var(--md-sys-color-on-surface);\n opacity: var(--md-sys-state-pressed-state-layer-opacity);\n }\n\n :host([checked]:active) .state,\n :host([checked]) .pressed .state {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-pressed-state-layer-opacity);\n }\n\n :host(:active) .thumb,\n .pressed .thumb {\n background-color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([checked]:active) .thumb,\n :host([checked]) .pressed .thumb {\n background-color: var(--md-sys-color-primary-container);\n }\n\n :host(:active) .icon,\n .pressed .icon {\n fill: var(--md-sys-color-surface-variant);\n }\n\n :host([checked]:active) .icon,\n :host([checked]) .pressed .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n /* Disabled state */\n\n :host([disabled]) .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-on-surface);\n opacity: 0.12;\n }\n\n :host([disabled][checked]) .track {\n background-color: var(--md-sys-color-on-surface);\n border-width: 0;\n }\n\n :host([disabled]) .thumb {\n background-color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n }\n\n :host([disabled][checked]) .thumb {\n background-color: var(--md-sys-color-surface);\n opacity: 1;\n }\n\n :host([disabled]) .icon {\n fill: var(--md-sys-color-surface-variant);\n opacity: 0.38;\n }\n\n :host([disabled][checked]) .icon {\n fill: var(--md-sys-color-on-surface);\n opacity: 0.38;\n }\n`\n"]}
|