@fluentui/react-switch 0.0.0-nightly-20220502-0420.1 → 0.0.0-nightly-20220505-0419.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-switch",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 02 May 2022 04:31:14 GMT",
6
- "tag": "@fluentui/react-switch_v0.0.0-nightly-20220502-0420.1",
7
- "version": "0.0.0-nightly-20220502-0420.1",
5
+ "date": "Thu, 05 May 2022 04:32:05 GMT",
6
+ "tag": "@fluentui/react-switch_v0.0.0-nightly-20220505-0419.1",
7
+ "version": "0.0.0-nightly-20220505-0419.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,32 +16,79 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-switch",
19
- "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220502-0420.1",
20
- "commit": "07bac225f1b18ce4fad5464b46f9cb4f09fcd702"
19
+ "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220505-0419.1",
20
+ "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-switch",
25
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220502-0420.1",
26
- "commit": "07bac225f1b18ce4fad5464b46f9cb4f09fcd702"
25
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220505-0419.1",
26
+ "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-switch",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220502-0420.1",
32
- "commit": "07bac225f1b18ce4fad5464b46f9cb4f09fcd702"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220505-0419.1",
32
+ "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-switch",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220502-0420.1",
38
- "commit": "07bac225f1b18ce4fad5464b46f9cb4f09fcd702"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220505-0419.1",
38
+ "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
39
39
  },
40
40
  {
41
41
  "author": "beachball",
42
42
  "package": "@fluentui/react-switch",
43
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220502-0420.1",
44
- "commit": "07bac225f1b18ce4fad5464b46f9cb4f09fcd702"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220505-0419.1",
44
+ "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
45
+ }
46
+ ],
47
+ "none": [
48
+ {
49
+ "author": "tristan.watanabe@gmail.com",
50
+ "package": "@fluentui/react-switch",
51
+ "commit": "ad3dfcc6d85a8dba3c183612fe552280cd33c20e",
52
+ "comment": "react-switch: Move to new common folder."
53
+ }
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "date": "Wed, 04 May 2022 13:26:51 GMT",
59
+ "tag": "@fluentui/react-switch_v9.0.0-rc.8",
60
+ "version": "9.0.0-rc.8",
61
+ "comments": {
62
+ "prerelease": [
63
+ {
64
+ "author": "humberto_makoto@hotmail.com",
65
+ "package": "@fluentui/react-switch",
66
+ "commit": "daf5a7692bce6794dbacf7470cc48e48e1c67252",
67
+ "comment": "Switch: Fixing disabled styles in high contrast mode."
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-switch",
72
+ "comment": "Bump @fluentui/react-label to v9.0.0-beta.11",
73
+ "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
74
+ },
75
+ {
76
+ "author": "beachball",
77
+ "package": "@fluentui/react-switch",
78
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.8",
79
+ "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
80
+ },
81
+ {
82
+ "author": "beachball",
83
+ "package": "@fluentui/react-switch",
84
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
85
+ "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
86
+ },
87
+ {
88
+ "author": "beachball",
89
+ "package": "@fluentui/react-switch",
90
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
91
+ "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
45
92
  }
46
93
  ]
47
94
  }
package/CHANGELOG.md CHANGED
@@ -1,26 +1,39 @@
1
1
  # Change Log - @fluentui/react-switch
2
2
 
3
- This log was last generated on Mon, 02 May 2022 04:31:14 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 05 May 2022 04:32:05 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220502-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20220502-0420.1)
7
+ ## [0.0.0-nightly-20220505-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20220505-0419.1)
8
8
 
9
- Mon, 02 May 2022 04:31:14 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.7..@fluentui/react-switch_v0.0.0-nightly-20220502-0420.1)
9
+ Thu, 05 May 2022 04:32:05 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.8..@fluentui/react-switch_v0.0.0-nightly-20220505-0419.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
15
- - Bump @fluentui/react-label to v0.0.0-nightly-20220502-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/07bac225f1b18ce4fad5464b46f9cb4f09fcd702) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20220502-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/07bac225f1b18ce4fad5464b46f9cb4f09fcd702) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220502-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/07bac225f1b18ce4fad5464b46f9cb4f09fcd702) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220502-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/07bac225f1b18ce4fad5464b46f9cb4f09fcd702) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220502-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/07bac225f1b18ce4fad5464b46f9cb4f09fcd702) by beachball)
15
+ - Bump @fluentui/react-label to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
16
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
20
+
21
+ ## [9.0.0-rc.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.8)
22
+
23
+ Wed, 04 May 2022 13:26:51 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.7..@fluentui/react-switch_v9.0.0-rc.8)
25
+
26
+ ### Changes
27
+
28
+ - Switch: Fixing disabled styles in high contrast mode. ([PR #22817](https://github.com/microsoft/fluentui/pull/22817) by humberto_makoto@hotmail.com)
29
+ - Bump @fluentui/react-label to v9.0.0-beta.11 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
30
+ - Bump @fluentui/react-tabster to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
31
+ - Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
32
+ - Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
20
33
 
21
34
  ## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.7)
22
35
 
23
- Mon, 25 Apr 2022 09:32:19 GMT
36
+ Mon, 25 Apr 2022 09:32:19 GMT
24
37
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.6..@fluentui/react-switch_v9.0.0-rc.7)
25
38
 
26
39
  ### Changes
@@ -29,7 +42,7 @@ Mon, 25 Apr 2022 09:32:19 GMT
29
42
 
30
43
  ## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.6)
31
44
 
32
- Tue, 19 Apr 2022 19:16:54 GMT
45
+ Tue, 19 Apr 2022 19:16:54 GMT
33
46
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.5..@fluentui/react-switch_v9.0.0-rc.6)
34
47
 
35
48
  ### Changes
@@ -47,7 +60,7 @@ Tue, 19 Apr 2022 19:16:54 GMT
47
60
 
48
61
  ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.5)
49
62
 
50
- Fri, 04 Mar 2022 05:17:30 GMT
63
+ Fri, 04 Mar 2022 05:17:30 GMT
51
64
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.4..@fluentui/react-switch_v9.0.0-rc.5)
52
65
 
53
66
  ### Changes
@@ -61,7 +74,7 @@ Fri, 04 Mar 2022 05:17:30 GMT
61
74
 
62
75
  ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.4)
63
76
 
64
- Tue, 01 Mar 2022 02:17:38 GMT
77
+ Tue, 01 Mar 2022 02:17:38 GMT
65
78
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.3..@fluentui/react-switch_v9.0.0-rc.4)
66
79
 
67
80
  ### Changes
@@ -74,7 +87,7 @@ Tue, 01 Mar 2022 02:17:38 GMT
74
87
 
75
88
  ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.3)
76
89
 
77
- Fri, 18 Feb 2022 13:35:34 GMT
90
+ Fri, 18 Feb 2022 13:35:34 GMT
78
91
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.1..@fluentui/react-switch_v9.0.0-rc.3)
79
92
 
80
93
  ### Changes
@@ -88,7 +101,7 @@ Fri, 18 Feb 2022 13:35:34 GMT
88
101
 
89
102
  ## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.1)
90
103
 
91
- Thu, 10 Feb 2022 08:50:51 GMT
104
+ Thu, 10 Feb 2022 08:50:51 GMT
92
105
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-beta.5..@fluentui/react-switch_v9.0.0-rc.1)
93
106
 
94
107
  ### Changes
@@ -110,7 +123,7 @@ Thu, 10 Feb 2022 08:50:51 GMT
110
123
 
111
124
  ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-beta.5)
112
125
 
113
- Thu, 25 Nov 2021 08:34:17 GMT
126
+ Thu, 25 Nov 2021 08:34:17 GMT
114
127
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-beta.4..@fluentui/react-switch_v9.0.0-beta.5)
115
128
 
116
129
  ### Changes
@@ -125,7 +138,7 @@ Thu, 25 Nov 2021 08:34:17 GMT
125
138
 
126
139
  ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-beta.4)
127
140
 
128
- Fri, 12 Nov 2021 13:25:33 GMT
141
+ Fri, 12 Nov 2021 13:25:33 GMT
129
142
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-beta.3..@fluentui/react-switch_v9.0.0-beta.4)
130
143
 
131
144
  ### Changes
@@ -141,7 +154,7 @@ Fri, 12 Nov 2021 13:25:33 GMT
141
154
 
142
155
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-beta.3)
143
156
 
144
- Wed, 27 Oct 2021 12:14:22 GMT
157
+ Wed, 27 Oct 2021 12:14:22 GMT
145
158
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-beta.2..@fluentui/react-switch_v9.0.0-beta.3)
146
159
 
147
160
  ### Changes
@@ -161,7 +174,7 @@ Wed, 27 Oct 2021 12:14:22 GMT
161
174
 
162
175
  ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-beta.2)
163
176
 
164
- Tue, 12 Oct 2021 19:45:58 GMT
177
+ Tue, 12 Oct 2021 19:45:58 GMT
165
178
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-beta.1..@fluentui/react-switch_v9.0.0-beta.2)
166
179
 
167
180
  ### Changes
@@ -171,7 +184,7 @@ Tue, 12 Oct 2021 19:45:58 GMT
171
184
 
172
185
  ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-beta.1)
173
186
 
174
- Wed, 06 Oct 2021 10:37:22 GMT
187
+ Wed, 06 Oct 2021 10:37:22 GMT
175
188
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.17..@fluentui/react-switch_v9.0.0-beta.1)
176
189
 
177
190
  ### Changes
@@ -190,7 +203,7 @@ Wed, 06 Oct 2021 10:37:22 GMT
190
203
 
191
204
  ## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.17)
192
205
 
193
- Tue, 05 Oct 2021 12:47:58 GMT
206
+ Tue, 05 Oct 2021 12:47:58 GMT
194
207
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.16..@fluentui/react-switch_v9.0.0-alpha.17)
195
208
 
196
209
  ### Changes
@@ -205,7 +218,7 @@ Tue, 05 Oct 2021 12:47:58 GMT
205
218
 
206
219
  ## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.16)
207
220
 
208
- Tue, 05 Oct 2021 09:28:07 GMT
221
+ Tue, 05 Oct 2021 09:28:07 GMT
209
222
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.15..@fluentui/react-switch_v9.0.0-alpha.16)
210
223
 
211
224
  ### Changes
@@ -222,7 +235,7 @@ Tue, 05 Oct 2021 09:28:07 GMT
222
235
 
223
236
  ## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.15)
224
237
 
225
- Fri, 01 Oct 2021 14:13:08 GMT
238
+ Fri, 01 Oct 2021 14:13:08 GMT
226
239
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.13..@fluentui/react-switch_v9.0.0-alpha.15)
227
240
 
228
241
  ### Changes
@@ -241,7 +254,7 @@ Fri, 01 Oct 2021 14:13:08 GMT
241
254
 
242
255
  ## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.13)
243
256
 
244
- Fri, 01 Oct 2021 09:44:56 GMT
257
+ Fri, 01 Oct 2021 09:44:56 GMT
245
258
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.12..@fluentui/react-switch_v9.0.0-alpha.13)
246
259
 
247
260
  ### Changes
@@ -252,7 +265,7 @@ Fri, 01 Oct 2021 09:44:56 GMT
252
265
 
253
266
  ## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.12)
254
267
 
255
- Wed, 29 Sep 2021 08:06:11 GMT
268
+ Wed, 29 Sep 2021 08:06:11 GMT
256
269
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.11..@fluentui/react-switch_v9.0.0-alpha.12)
257
270
 
258
271
  ### Changes
@@ -269,7 +282,7 @@ Wed, 29 Sep 2021 08:06:11 GMT
269
282
 
270
283
  ## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.11)
271
284
 
272
- Mon, 27 Sep 2021 08:06:00 GMT
285
+ Mon, 27 Sep 2021 08:06:00 GMT
273
286
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.10..@fluentui/react-switch_v9.0.0-alpha.11)
274
287
 
275
288
  ### Changes
@@ -285,7 +298,7 @@ Mon, 27 Sep 2021 08:06:00 GMT
285
298
 
286
299
  ## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.10)
287
300
 
288
- Fri, 24 Sep 2021 09:17:17 GMT
301
+ Fri, 24 Sep 2021 09:17:17 GMT
289
302
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.9..@fluentui/react-switch_v9.0.0-alpha.10)
290
303
 
291
304
  ### Changes
@@ -301,7 +314,7 @@ Fri, 24 Sep 2021 09:17:17 GMT
301
314
 
302
315
  ## [9.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.9)
303
316
 
304
- Thu, 23 Sep 2021 08:21:34 GMT
317
+ Thu, 23 Sep 2021 08:21:34 GMT
305
318
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.8..@fluentui/react-switch_v9.0.0-alpha.9)
306
319
 
307
320
  ### Changes
@@ -318,7 +331,7 @@ Thu, 23 Sep 2021 08:21:34 GMT
318
331
 
319
332
  ## [9.0.0-alpha.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.8)
320
333
 
321
- Wed, 22 Sep 2021 10:10:07 GMT
334
+ Wed, 22 Sep 2021 10:10:07 GMT
322
335
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.7..@fluentui/react-switch_v9.0.0-alpha.8)
323
336
 
324
337
  ### Changes
@@ -335,7 +348,7 @@ Wed, 22 Sep 2021 10:10:07 GMT
335
348
 
336
349
  ## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.7)
337
350
 
338
- Tue, 21 Sep 2021 07:42:34 GMT
351
+ Tue, 21 Sep 2021 07:42:34 GMT
339
352
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.6..@fluentui/react-switch_v9.0.0-alpha.7)
340
353
 
341
354
  ### Changes
@@ -352,7 +365,7 @@ Tue, 21 Sep 2021 07:42:34 GMT
352
365
 
353
366
  ## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.6)
354
367
 
355
- Mon, 20 Sep 2021 07:36:26 GMT
368
+ Mon, 20 Sep 2021 07:36:26 GMT
356
369
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.5..@fluentui/react-switch_v9.0.0-alpha.6)
357
370
 
358
371
  ### Changes
@@ -361,7 +374,7 @@ Mon, 20 Sep 2021 07:36:26 GMT
361
374
 
362
375
  ## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.5)
363
376
 
364
- Fri, 17 Sep 2021 07:35:26 GMT
377
+ Fri, 17 Sep 2021 07:35:26 GMT
365
378
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.4..@fluentui/react-switch_v9.0.0-alpha.5)
366
379
 
367
380
  ### Changes
@@ -370,7 +383,7 @@ Fri, 17 Sep 2021 07:35:26 GMT
370
383
 
371
384
  ## [9.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.4)
372
385
 
373
- Thu, 16 Sep 2021 07:38:39 GMT
386
+ Thu, 16 Sep 2021 07:38:39 GMT
374
387
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.3..@fluentui/react-switch_v9.0.0-alpha.4)
375
388
 
376
389
  ### Changes
@@ -380,7 +393,7 @@ Thu, 16 Sep 2021 07:38:39 GMT
380
393
 
381
394
  ## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.3)
382
395
 
383
- Tue, 14 Sep 2021 20:09:02 GMT
396
+ Tue, 14 Sep 2021 20:09:02 GMT
384
397
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.2..@fluentui/react-switch_v9.0.0-alpha.3)
385
398
 
386
399
  ### Changes
@@ -389,7 +402,7 @@ Tue, 14 Sep 2021 20:09:02 GMT
389
402
 
390
403
  ## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.2)
391
404
 
392
- Fri, 10 Sep 2021 16:31:53 GMT
405
+ Fri, 10 Sep 2021 16:31:53 GMT
393
406
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.1..@fluentui/react-switch_v9.0.0-alpha.2)
394
407
 
395
408
  ### Changes
@@ -399,7 +412,7 @@ Fri, 10 Sep 2021 16:31:53 GMT
399
412
 
400
413
  ## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.1)
401
414
 
402
- Fri, 10 Sep 2021 07:39:51 GMT
415
+ Fri, 10 Sep 2021 07:39:51 GMT
403
416
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.1)
404
417
 
405
418
  ### Changes
@@ -408,7 +421,7 @@ Fri, 10 Sep 2021 07:39:51 GMT
408
421
 
409
422
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
410
423
 
411
- Mon, 06 Sep 2021 07:34:53 GMT
424
+ Mon, 06 Sep 2021 07:34:53 GMT
412
425
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
413
426
 
414
427
  ### Changes
@@ -417,7 +430,7 @@ Mon, 06 Sep 2021 07:34:53 GMT
417
430
 
418
431
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
419
432
 
420
- Thu, 02 Sep 2021 07:36:46 GMT
433
+ Thu, 02 Sep 2021 07:36:46 GMT
421
434
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
422
435
 
423
436
  ### Patches
@@ -430,7 +443,7 @@ Thu, 02 Sep 2021 07:36:46 GMT
430
443
 
431
444
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
432
445
 
433
- Wed, 01 Sep 2021 07:39:56 GMT
446
+ Wed, 01 Sep 2021 07:39:56 GMT
434
447
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
435
448
 
436
449
  ### Changes
@@ -439,7 +452,7 @@ Wed, 01 Sep 2021 07:39:56 GMT
439
452
 
440
453
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
441
454
 
442
- Tue, 31 Aug 2021 07:37:47 GMT
455
+ Tue, 31 Aug 2021 07:37:47 GMT
443
456
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
444
457
 
445
458
  ### Changes
@@ -448,7 +461,7 @@ Tue, 31 Aug 2021 07:37:47 GMT
448
461
 
449
462
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
450
463
 
451
- Fri, 27 Aug 2021 07:33:32 GMT
464
+ Fri, 27 Aug 2021 07:33:32 GMT
452
465
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
453
466
 
454
467
  ### Changes
@@ -457,7 +470,7 @@ Fri, 27 Aug 2021 07:33:32 GMT
457
470
 
458
471
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
459
472
 
460
- Thu, 26 Aug 2021 07:35:43 GMT
473
+ Thu, 26 Aug 2021 07:35:43 GMT
461
474
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
462
475
 
463
476
  ### Changes
@@ -466,7 +479,7 @@ Thu, 26 Aug 2021 07:35:43 GMT
466
479
 
467
480
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
468
481
 
469
- Fri, 20 Aug 2021 07:37:28 GMT
482
+ Fri, 20 Aug 2021 07:37:28 GMT
470
483
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
471
484
 
472
485
  ### Changes
@@ -475,7 +488,7 @@ Fri, 20 Aug 2021 07:37:28 GMT
475
488
 
476
489
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.0)
477
490
 
478
- Thu, 19 Aug 2021 07:41:35 GMT
491
+ Thu, 19 Aug 2021 07:41:35 GMT
479
492
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.0..@fluentui/react-switch_v9.0.0-alpha.0)
480
493
 
481
494
  ### Changes
@@ -173,9 +173,18 @@ const useInputStyles = /*#__PURE__*/__styles({
173
173
  "u4vbwo": ["fipwscc", "fab39iv"],
174
174
  "Bfjga03": "f1th5z1l",
175
175
  "F0s3py": ["fab39iv", "fipwscc"]
176
+ },
177
+ "highContrast": {
178
+ "Bskmvfo": "f19h63kc",
179
+ "zhypoe": "ffutfdj",
180
+ "Bb6xxwe": ["f72m8yo", "f1ud47z9"],
181
+ "o89t22": "f15xfkur",
182
+ "B7qxyha": ["f1ud47z9", "f72m8yo"],
183
+ "Bhmcd6p": "f1jaqqzs"
176
184
  }
177
185
  }, {
178
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1owqbgs:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(22px);-moz-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px);}", ".f1a7g3i4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-22px);-moz-transform:translateX(-22px);-ms-transform:translateX(-22px);transform:translateX(-22px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"]
186
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1owqbgs:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(22px);-moz-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px);}", ".f1a7g3i4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-22px);-moz-transform:translateX(-22px);-ms-transform:translateX(-22px);transform:translateX(-22px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
187
+ "t": ["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", "@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", "@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", "@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", "@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}"]
179
188
  });
180
189
 
181
190
  const useLabelStyles = /*#__PURE__*/__styles({
@@ -200,7 +209,7 @@ export const useSwitchStyles_unstable = state => {
200
209
  } = state;
201
210
  state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, rootStyles[labelPosition], state.root.className);
202
211
  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
203
- state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);
212
+ state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
204
213
 
205
214
  if (state.label) {
206
215
  state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -183,9 +183,18 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
183
183
  "u4vbwo": ["fipwscc", "fab39iv"],
184
184
  "Bfjga03": "f1th5z1l",
185
185
  "F0s3py": ["fab39iv", "fipwscc"]
186
+ },
187
+ "highContrast": {
188
+ "Bskmvfo": "f19h63kc",
189
+ "zhypoe": "ffutfdj",
190
+ "Bb6xxwe": ["f72m8yo", "f1ud47z9"],
191
+ "o89t22": "f15xfkur",
192
+ "B7qxyha": ["f1ud47z9", "f72m8yo"],
193
+ "Bhmcd6p": "f1jaqqzs"
186
194
  }
187
195
  }, {
188
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1owqbgs:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(22px);-moz-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px);}", ".f1a7g3i4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-22px);-moz-transform:translateX(-22px);-ms-transform:translateX(-22px);transform:translateX(-22px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"]
196
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1owqbgs:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(22px);-moz-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px);}", ".f1a7g3i4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-22px);-moz-transform:translateX(-22px);-ms-transform:translateX(-22px);transform:translateX(-22px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
197
+ "t": ["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", "@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", "@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", "@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", "@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}"]
189
198
  });
190
199
 
191
200
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
@@ -210,7 +219,7 @@ const useSwitchStyles_unstable = state => {
210
219
  } = state;
211
220
  state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, rootStyles[labelPosition], state.root.className);
212
221
  state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
213
- state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, state.input.className);
222
+ state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
214
223
 
215
224
  if (state.label) {
216
225
  state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, state.label.className);
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-switch",
3
- "version": "0.0.0-nightly-20220502-0420.1",
3
+ "version": "0.0.0-nightly-20220505-0419.1",
4
4
  "description": "Fluent UI React Switch component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,22 +21,22 @@
21
21
  "start": "yarn storybook",
22
22
  "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-switch/src && yarn docs",
25
- "storybook": "node ../../scripts/storybook/runner",
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-switch/src && yarn docs",
25
+ "storybook": "node ../../../scripts/storybook/runner",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220502-0420.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220505-0419.1",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.166-rc.3",
36
- "@fluentui/react-label": "0.0.0-nightly-20220502-0420.1",
37
- "@fluentui/react-tabster": "0.0.0-nightly-20220502-0420.1",
38
- "@fluentui/react-theme": "0.0.0-nightly-20220502-0420.1",
39
- "@fluentui/react-utilities": "0.0.0-nightly-20220502-0420.1",
36
+ "@fluentui/react-label": "0.0.0-nightly-20220505-0419.1",
37
+ "@fluentui/react-tabster": "0.0.0-nightly-20220505-0419.1",
38
+ "@fluentui/react-theme": "0.0.0-nightly-20220505-0419.1",
39
+ "@fluentui/react-utilities": "0.0.0-nightly-20220505-0419.1",
40
40
  "@griffel/react": "1.0.3",
41
41
  "tslib": "^2.1.0"
42
42
  },