@fluentui/react-switch 9.0.6 → 9.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.json +30 -3
  2. package/CHANGELOG.md +15 -4
  3. package/lib/components/Switch/useSwitchStyles.js +73 -47
  4. package/lib/components/Switch/useSwitchStyles.js.map +1 -1
  5. package/lib-commonjs/components/Switch/useSwitchStyles.js +73 -47
  6. package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
  7. package/package.json +2 -2
package/CHANGELOG.json CHANGED
@@ -2,7 +2,34 @@
2
2
  "name": "@fluentui/react-switch",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 20 Sep 2022 20:54:08 GMT",
5
+ "date": "Mon, 03 Oct 2022 22:22:51 GMT",
6
+ "tag": "@fluentui/react-switch_v9.0.7",
7
+ "version": "9.0.7",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "makotom@microsoft.com",
12
+ "package": "@fluentui/react-switch",
13
+ "commit": "e44263f522e3e690c49ac69e5eef8e522e6e0a4a",
14
+ "comment": "fix: Making the hidden input only cover the indicator and not also the label."
15
+ },
16
+ {
17
+ "author": "behowell@microsoft.com",
18
+ "package": "@fluentui/react-switch",
19
+ "commit": "6a60b17a2e1ef2709a76c5b209d3b579e437feba",
20
+ "comment": "fix: Switch's label shouldn't have a pointer cursor when disabled"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-switch",
25
+ "comment": "Bump @fluentui/react-tabster to v9.1.2",
26
+ "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Tue, 20 Sep 2022 20:55:45 GMT",
6
33
  "tag": "@fluentui/react-switch_v9.0.6",
7
34
  "version": "9.0.6",
8
35
  "comments": {
@@ -11,13 +38,13 @@
11
38
  "author": "beachball",
12
39
  "package": "@fluentui/react-switch",
13
40
  "comment": "Bump @fluentui/react-label to v9.0.6",
14
- "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
41
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
15
42
  },
16
43
  {
17
44
  "author": "beachball",
18
45
  "package": "@fluentui/react-switch",
19
46
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
20
- "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
47
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
21
48
  }
22
49
  ]
23
50
  }
package/CHANGELOG.md CHANGED
@@ -1,18 +1,29 @@
1
1
  # Change Log - @fluentui/react-switch
2
2
 
3
- This log was last generated on Tue, 20 Sep 2022 20:54:08 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 03 Oct 2022 22:22:51 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.7)
8
+
9
+ Mon, 03 Oct 2022 22:22:51 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.6..@fluentui/react-switch_v9.0.7)
11
+
12
+ ### Patches
13
+
14
+ - fix: Making the hidden input only cover the indicator and not also the label. ([PR #24638](https://github.com/microsoft/fluentui/pull/24638) by makotom@microsoft.com)
15
+ - fix: Switch's label shouldn't have a pointer cursor when disabled ([PR #25026](https://github.com/microsoft/fluentui/pull/25026) by behowell@microsoft.com)
16
+ - Bump @fluentui/react-tabster to v9.1.2 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
17
+
7
18
  ## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.6)
8
19
 
9
- Tue, 20 Sep 2022 20:54:08 GMT
20
+ Tue, 20 Sep 2022 20:55:45 GMT
10
21
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.5..@fluentui/react-switch_v9.0.6)
11
22
 
12
23
  ### Patches
13
24
 
14
- - Bump @fluentui/react-label to v9.0.6 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
15
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
25
+ - Bump @fluentui/react-label to v9.0.6 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
26
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
16
27
 
17
28
  ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.5)
18
29
 
package/lib/components/Switch/useSwitchStyles.js CHANGED
@@ -23,48 +23,43 @@ const useRootStyles = /*#__PURE__*/__styles({
23
23
  "Bt984gj": "f6jr5hl",
24
24
  "B7ck84d": "f1ewtqcl",
25
25
  "mc9l5x": "ftuwxu6",
26
- "z8tnut": "f1kwiid1",
27
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
28
- "Byoj8tv": "f5b47ha",
29
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
30
26
  "qhf8xq": "f10pi13n",
31
27
  "Brovlpu": "ftqa4ok",
32
28
  "B486eqv": "f2hkw1w",
33
- "Brlowmp": "fck78tx",
34
- "Fxwv4m": ["f8gneoz", "f14g6lul"],
35
- "Bkrqzay": "f1tc23yq",
36
- "Bg2fdrq": ["f14g6lul", "f8gneoz"],
37
- "Bhpuztq": "ffjpq3d",
38
- "Hxt1dp": "fo0h4cx",
39
- "Fwynku": "f1vef9e5",
40
- "nwv0sh": "fob2zhe",
41
- "sewbek": "ftqc7yw",
42
- "Bmcqtu5": ["fbod6wy", "f4eroa4"],
43
- "Iuyy0o": "flecwt7",
44
- "B1jyaxe": ["f4eroa4", "fbod6wy"],
45
- "Gic0m5": "fzb327l",
46
- "B8s345i": ["f1s2knrb", "f6wuwpp"],
47
- "Btrf9ny": "f1g8ecfq",
48
- "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
49
- "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
50
- "zit2e2": ["fk9eigt", "f1hnqdjl"],
51
- "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
52
- "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
53
- "Bdlkd80": "ffthsbc",
54
- "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
55
- "Byzfkqq": "f1naw2e2",
56
- "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
57
- "r9zwrz": "fmtt8yl",
58
- "B4yg94n": "fr8phvc",
59
- "glb4xk": ["f5m5r8m", "f1bizo4j"],
60
- "mla9w6": ["f1bizo4j", "f5m5r8m"]
29
+ "n9p9qa": "f1fu8s9w",
30
+ "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
31
+ "r10ruj": "f1c1apvh",
32
+ "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
33
+ "gjlbkn": "fyrlc8h",
34
+ "B1kt0iq": "f28z38y",
35
+ "Boi8ppg": "f1edqc4x",
36
+ "Btfhvw2": "f19bnj08",
37
+ "B55xfkk": "f17wg1r9",
38
+ "i1dkbe": ["fgiioun", "fnx45sh"],
39
+ "Bozs2tv": "f1ljqnps",
40
+ "snkem8": ["fnx45sh", "fgiioun"],
41
+ "Bjilewg": "fsacsau",
42
+ "wht04d": ["flcxmxr", "f138axrn"],
43
+ "vikdft": "f1f4bc3q",
44
+ "Bwdhxlo": ["f138axrn", "flcxmxr"],
45
+ "B167d6d": ["f5m7f7q", "f175edhc"],
46
+ "Bpdw69r": ["f175edhc", "f5m7f7q"],
47
+ "Bsdv7io": ["fhfahiz", "fnreirl"],
48
+ "Bd353ur": ["fnreirl", "fhfahiz"],
49
+ "Bcnuwmc": "fn9i64i",
50
+ "dyfsa2": ["f1pylbqb", "f3dy9ja"],
51
+ "Bdcx1rh": "f1v06qdr",
52
+ "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
53
+ "Bbretkc": "fm1yk70",
54
+ "rnyfg7": "f1itvegt",
55
+ "Bg18gms": ["f17e4q3j", "foxjjqz"],
56
+ "Bym00rn": ["foxjjqz", "f17e4q3j"]
61
57
  },
62
58
  "vertical": {
63
- "Beiy3e4": "f1vx9l62",
64
- "z8tnut": "f1ywm7hm"
59
+ "Beiy3e4": "f1vx9l62"
65
60
  }
66
61
  }, {
67
- "d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", ".fck78tx.fui-focus-within:focus-within{border-top-color:transparent;}", ".f8gneoz.fui-focus-within:focus-within{border-right-color:transparent;}", ".f14g6lul.fui-focus-within:focus-within{border-left-color:transparent;}", ".f1tc23yq.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".ffjpq3d.fui-focus-within:focus-within::after{content:\"\";}", ".fo0h4cx.fui-focus-within:focus-within::after{position:absolute;}", ".f1vef9e5.fui-focus-within:focus-within::after{pointer-events:none;}", ".fob2zhe.fui-focus-within:focus-within::after{z-index:1;}", ".ftqc7yw.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fbod6wy.fui-focus-within:focus-within::after{border-right-style:solid;}", ".f4eroa4.fui-focus-within:focus-within::after{border-left-style:solid;}", ".flecwt7.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fzb327l.fui-focus-within:focus-within::after{border-top-width:2px;}", ".f1s2knrb.fui-focus-within:focus-within::after{border-right-width:2px;}", ".f6wuwpp.fui-focus-within:focus-within::after{border-left-width:2px;}", ".f1g8ecfq.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".f1hnqdjl.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fk9eigt.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1g8yfuc.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1kv2i3z.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffthsbc.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1nq9gk1.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f1pmlwz5.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1naw2e2.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fmtt8yl.fui-focus-within:focus-within::after{top:-2px;}", ".fr8phvc.fui-focus-within:focus-within::after{bottom:-2px;}", ".f5m5r8m.fui-focus-within:focus-within::after{left:-2px;}", ".f1bizo4j.fui-focus-within:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
62
+ "d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
68
63
  "f": [".ftqa4ok:focus{outline-style:none;}"],
69
64
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
70
65
  });
@@ -88,6 +83,10 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
88
83
  "Bnnss6s": "fi64zpg",
89
84
  "Be2twd7": "fg38ndl",
90
85
  "Bqenvij": "fjamq6b",
86
+ "B6of3ja": "frnwi6n",
87
+ "t21cq0": ["f1vcna3q", "foyynoy"],
88
+ "jrapky": "fqcjy3b",
89
+ "Frg6f3": ["foyynoy", "f1vcna3q"],
91
90
  "Bkecrkj": "f1aehjj5",
92
91
  "B3o57yi": "f1bnoopa",
93
92
  "Bkqvd7p": "f1e1a42z",
@@ -98,9 +97,12 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
98
97
  "Bgrs90m": "f17f8g0y",
99
98
  "B0zx559": "f1uwej41",
100
99
  "c0im90": "fpz7fqq"
100
+ },
101
+ "labelAbove": {
102
+ "B6of3ja": "f1hu3pq6"
101
103
  }
102
104
  }, {
103
- "d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"],
105
+ "d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}", ".f1hu3pq6{margin-top:0;}"],
104
106
  "m": [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
105
107
  "m": "screen and (prefers-reduced-motion: reduce)"
106
108
  }], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
@@ -113,18 +115,17 @@ const useInputStyles = /*#__PURE__*/__styles({
113
115
  "B7ck84d": "f1ewtqcl",
114
116
  "Bceei9c": "f1k6fduh",
115
117
  "Bqenvij": "f1l02sjl",
116
- "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
117
118
  "B6of3ja": "f1hu3pq6",
118
119
  "t21cq0": ["f11qmguv", "f1tyq0we"],
119
120
  "jrapky": "f19f4twv",
120
121
  "Frg6f3": ["f1tyq0we", "f11qmguv"],
121
122
  "abs64n": "fk73vx1",
122
123
  "qhf8xq": "f1euv43f",
123
- "Bhzewxz": "f15twtuk",
124
- "a9b677": "fly5x3f",
124
+ "a9b677": "f1ry1bn9",
125
125
  "fv8x6k": ["f3l1kk6", "f1kez0x4"],
126
126
  "ezr58z": "fvxnmui",
127
127
  "Blezdol": "f1cxq9o1",
128
+ "k28iui": "f1q9yyk5",
128
129
  "B8f96ig": "f1ks1zsm",
129
130
  "po7uxr": "fiqfi0i",
130
131
  "inq7wv": "f9aagkg",
@@ -175,9 +176,22 @@ const useInputStyles = /*#__PURE__*/__styles({
175
176
  "o89t22": "f15xfkur",
176
177
  "B7qxyha": ["f1ud47z9", "f72m8yo"],
177
178
  "Bhmcd6p": "f1jaqqzs"
179
+ },
180
+ "before": {
181
+ "j35jbq": ["f1e31b4d", "f1vgc2s3"],
182
+ "Bhzewxz": "f15twtuk"
183
+ },
184
+ "after": {
185
+ "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
186
+ "Bhzewxz": "f15twtuk"
187
+ },
188
+ "above": {
189
+ "B5kzvoi": "f1yab3r1",
190
+ "Bqenvij": "f1aar7gd",
191
+ "a9b677": "fly5x3f"
178
192
  }
179
193
  }, {
180
- "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%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".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);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".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);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".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);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".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);}"],
194
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f1ry1bn9{width:calc(40px + 2 * var(--spacingHorizontalS));}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1q9yyk5:disabled~.fui-Switch__label{cursor:default;}", ".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);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".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);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".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);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".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);}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"],
181
195
  "m": [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
182
196
  "m": "(forced-colors: active)"
183
197
  }], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
@@ -194,17 +208,28 @@ const useInputStyles = /*#__PURE__*/__styles({
194
208
  });
195
209
 
196
210
  const useLabelStyles = /*#__PURE__*/__styles({
211
+ "base": {
212
+ "Bceei9c": "f1k6fduh",
213
+ "jrapky": "f49ad5g",
214
+ "B6of3ja": "f1xlvstr",
215
+ "z8tnut": "f1kwiid1",
216
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
217
+ "Byoj8tv": "f5b47ha",
218
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
219
+ },
197
220
  "above": {
198
- "jrapky": "f8l5zjj"
221
+ "z8tnut": "f1ywm7hm",
222
+ "Byoj8tv": "f14wxoun",
223
+ "a9b677": "fly5x3f"
199
224
  },
200
225
  "after": {
201
- "Frg6f3": ["f199hnxi", "fkujibs"]
226
+ "uwmqm3": ["fruq291", "f7x41pl"]
202
227
  },
203
228
  "before": {
204
- "t21cq0": ["fkujibs", "f199hnxi"]
229
+ "z189sj": ["f7x41pl", "fruq291"]
205
230
  }
206
231
  }, {
207
- "d": [".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}"]
232
+ "d": [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
208
233
  });
209
234
  /**
210
235
  * Apply styling to the Switch slots based on the state
@@ -217,14 +242,15 @@ export const useSwitchStyles_unstable = state => {
217
242
  const inputStyles = useInputStyles();
218
243
  const labelStyles = useLabelStyles();
219
244
  const {
245
+ label,
220
246
  labelPosition
221
247
  } = state;
222
248
  state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
223
- state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
224
- state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
249
+ state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
250
+ state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, inputStyles.highContrast, label && inputStyles[labelPosition], state.input.className);
225
251
 
226
252
  if (state.label) {
227
- state.label.className = mergeClasses(switchClassNames.label, labelStyles[labelPosition], state.label.className);
253
+ state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
228
254
  }
229
255
 
230
256
  return state;
package/lib/components/Switch/useSwitchStyles.js.map CHANGED
@@ -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// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: tokens.spacingVerticalXS,\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}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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\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}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.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\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 above: {\n marginBottom: tokens.spacingVerticalXS,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n before: {\n marginRight: tokens.spacingHorizontalM,\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 labelPosition === 'above' && rootStyles.vertical,\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[labelPosition], 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// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\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}px`,\n height: `${trackHeight}px`,\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n },\n\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}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 cursor: 'default',\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.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\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 before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\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 { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorStyles.base,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n label && inputStyles[labelPosition],\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Switch/useSwitchStyles.js CHANGED
@@ -33,48 +33,43 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
33
33
  "Bt984gj": "f6jr5hl",
34
34
  "B7ck84d": "f1ewtqcl",
35
35
  "mc9l5x": "ftuwxu6",
36
- "z8tnut": "f1kwiid1",
37
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
38
- "Byoj8tv": "f5b47ha",
39
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
40
36
  "qhf8xq": "f10pi13n",
41
37
  "Brovlpu": "ftqa4ok",
42
38
  "B486eqv": "f2hkw1w",
43
- "Brlowmp": "fck78tx",
44
- "Fxwv4m": ["f8gneoz", "f14g6lul"],
45
- "Bkrqzay": "f1tc23yq",
46
- "Bg2fdrq": ["f14g6lul", "f8gneoz"],
47
- "Bhpuztq": "ffjpq3d",
48
- "Hxt1dp": "fo0h4cx",
49
- "Fwynku": "f1vef9e5",
50
- "nwv0sh": "fob2zhe",
51
- "sewbek": "ftqc7yw",
52
- "Bmcqtu5": ["fbod6wy", "f4eroa4"],
53
- "Iuyy0o": "flecwt7",
54
- "B1jyaxe": ["f4eroa4", "fbod6wy"],
55
- "Gic0m5": "fzb327l",
56
- "B8s345i": ["f1s2knrb", "f6wuwpp"],
57
- "Btrf9ny": "f1g8ecfq",
58
- "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
59
- "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
60
- "zit2e2": ["fk9eigt", "f1hnqdjl"],
61
- "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
62
- "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
63
- "Bdlkd80": "ffthsbc",
64
- "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
65
- "Byzfkqq": "f1naw2e2",
66
- "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
67
- "r9zwrz": "fmtt8yl",
68
- "B4yg94n": "fr8phvc",
69
- "glb4xk": ["f5m5r8m", "f1bizo4j"],
70
- "mla9w6": ["f1bizo4j", "f5m5r8m"]
39
+ "n9p9qa": "f1fu8s9w",
40
+ "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
41
+ "r10ruj": "f1c1apvh",
42
+ "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
43
+ "gjlbkn": "fyrlc8h",
44
+ "B1kt0iq": "f28z38y",
45
+ "Boi8ppg": "f1edqc4x",
46
+ "Btfhvw2": "f19bnj08",
47
+ "B55xfkk": "f17wg1r9",
48
+ "i1dkbe": ["fgiioun", "fnx45sh"],
49
+ "Bozs2tv": "f1ljqnps",
50
+ "snkem8": ["fnx45sh", "fgiioun"],
51
+ "Bjilewg": "fsacsau",
52
+ "wht04d": ["flcxmxr", "f138axrn"],
53
+ "vikdft": "f1f4bc3q",
54
+ "Bwdhxlo": ["f138axrn", "flcxmxr"],
55
+ "B167d6d": ["f5m7f7q", "f175edhc"],
56
+ "Bpdw69r": ["f175edhc", "f5m7f7q"],
57
+ "Bsdv7io": ["fhfahiz", "fnreirl"],
58
+ "Bd353ur": ["fnreirl", "fhfahiz"],
59
+ "Bcnuwmc": "fn9i64i",
60
+ "dyfsa2": ["f1pylbqb", "f3dy9ja"],
61
+ "Bdcx1rh": "f1v06qdr",
62
+ "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
63
+ "Bbretkc": "fm1yk70",
64
+ "rnyfg7": "f1itvegt",
65
+ "Bg18gms": ["f17e4q3j", "foxjjqz"],
66
+ "Bym00rn": ["foxjjqz", "f17e4q3j"]
71
67
  },
72
68
  "vertical": {
73
- "Beiy3e4": "f1vx9l62",
74
- "z8tnut": "f1ywm7hm"
69
+ "Beiy3e4": "f1vx9l62"
75
70
  }
76
71
  }, {
77
- "d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", ".fck78tx.fui-focus-within:focus-within{border-top-color:transparent;}", ".f8gneoz.fui-focus-within:focus-within{border-right-color:transparent;}", ".f14g6lul.fui-focus-within:focus-within{border-left-color:transparent;}", ".f1tc23yq.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".ffjpq3d.fui-focus-within:focus-within::after{content:\"\";}", ".fo0h4cx.fui-focus-within:focus-within::after{position:absolute;}", ".f1vef9e5.fui-focus-within:focus-within::after{pointer-events:none;}", ".fob2zhe.fui-focus-within:focus-within::after{z-index:1;}", ".ftqc7yw.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fbod6wy.fui-focus-within:focus-within::after{border-right-style:solid;}", ".f4eroa4.fui-focus-within:focus-within::after{border-left-style:solid;}", ".flecwt7.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fzb327l.fui-focus-within:focus-within::after{border-top-width:2px;}", ".f1s2knrb.fui-focus-within:focus-within::after{border-right-width:2px;}", ".f6wuwpp.fui-focus-within:focus-within::after{border-left-width:2px;}", ".f1g8ecfq.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".f1hnqdjl.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fk9eigt.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1g8yfuc.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1kv2i3z.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffthsbc.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1nq9gk1.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f1pmlwz5.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1naw2e2.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fmtt8yl.fui-focus-within:focus-within::after{top:-2px;}", ".fr8phvc.fui-focus-within:focus-within::after{bottom:-2px;}", ".f5m5r8m.fui-focus-within:focus-within::after{left:-2px;}", ".f1bizo4j.fui-focus-within:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
72
+ "d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
78
73
  "f": [".ftqa4ok:focus{outline-style:none;}"],
79
74
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
80
75
  });
@@ -98,6 +93,10 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
98
93
  "Bnnss6s": "fi64zpg",
99
94
  "Be2twd7": "fg38ndl",
100
95
  "Bqenvij": "fjamq6b",
96
+ "B6of3ja": "frnwi6n",
97
+ "t21cq0": ["f1vcna3q", "foyynoy"],
98
+ "jrapky": "fqcjy3b",
99
+ "Frg6f3": ["foyynoy", "f1vcna3q"],
101
100
  "Bkecrkj": "f1aehjj5",
102
101
  "B3o57yi": "f1bnoopa",
103
102
  "Bkqvd7p": "f1e1a42z",
@@ -108,9 +107,12 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
108
107
  "Bgrs90m": "f17f8g0y",
109
108
  "B0zx559": "f1uwej41",
110
109
  "c0im90": "fpz7fqq"
110
+ },
111
+ "labelAbove": {
112
+ "B6of3ja": "f1hu3pq6"
111
113
  }
112
114
  }, {
113
- "d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"],
115
+ "d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}", ".f1hu3pq6{margin-top:0;}"],
114
116
  "m": [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
115
117
  "m": "screen and (prefers-reduced-motion: reduce)"
116
118
  }], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
@@ -123,18 +125,17 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
123
125
  "B7ck84d": "f1ewtqcl",
124
126
  "Bceei9c": "f1k6fduh",
125
127
  "Bqenvij": "f1l02sjl",
126
- "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
127
128
  "B6of3ja": "f1hu3pq6",
128
129
  "t21cq0": ["f11qmguv", "f1tyq0we"],
129
130
  "jrapky": "f19f4twv",
130
131
  "Frg6f3": ["f1tyq0we", "f11qmguv"],
131
132
  "abs64n": "fk73vx1",
132
133
  "qhf8xq": "f1euv43f",
133
- "Bhzewxz": "f15twtuk",
134
- "a9b677": "fly5x3f",
134
+ "a9b677": "f1ry1bn9",
135
135
  "fv8x6k": ["f3l1kk6", "f1kez0x4"],
136
136
  "ezr58z": "fvxnmui",
137
137
  "Blezdol": "f1cxq9o1",
138
+ "k28iui": "f1q9yyk5",
138
139
  "B8f96ig": "f1ks1zsm",
139
140
  "po7uxr": "fiqfi0i",
140
141
  "inq7wv": "f9aagkg",
@@ -185,9 +186,22 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
185
186
  "o89t22": "f15xfkur",
186
187
  "B7qxyha": ["f1ud47z9", "f72m8yo"],
187
188
  "Bhmcd6p": "f1jaqqzs"
189
+ },
190
+ "before": {
191
+ "j35jbq": ["f1e31b4d", "f1vgc2s3"],
192
+ "Bhzewxz": "f15twtuk"
193
+ },
194
+ "after": {
195
+ "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
196
+ "Bhzewxz": "f15twtuk"
197
+ },
198
+ "above": {
199
+ "B5kzvoi": "f1yab3r1",
200
+ "Bqenvij": "f1aar7gd",
201
+ "a9b677": "fly5x3f"
188
202
  }
189
203
  }, {
190
- "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%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".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);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".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);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".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);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".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);}"],
204
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f1ry1bn9{width:calc(40px + 2 * var(--spacingHorizontalS));}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1q9yyk5:disabled~.fui-Switch__label{cursor:default;}", ".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);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".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);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".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);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".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);}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"],
191
205
  "m": [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
192
206
  "m": "(forced-colors: active)"
193
207
  }], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
@@ -204,17 +218,28 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
204
218
  });
205
219
 
206
220
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
221
+ "base": {
222
+ "Bceei9c": "f1k6fduh",
223
+ "jrapky": "f49ad5g",
224
+ "B6of3ja": "f1xlvstr",
225
+ "z8tnut": "f1kwiid1",
226
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
227
+ "Byoj8tv": "f5b47ha",
228
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
229
+ },
207
230
  "above": {
208
- "jrapky": "f8l5zjj"
231
+ "z8tnut": "f1ywm7hm",
232
+ "Byoj8tv": "f14wxoun",
233
+ "a9b677": "fly5x3f"
209
234
  },
210
235
  "after": {
211
- "Frg6f3": ["f199hnxi", "fkujibs"]
236
+ "uwmqm3": ["fruq291", "f7x41pl"]
212
237
  },
213
238
  "before": {
214
- "t21cq0": ["fkujibs", "f199hnxi"]
239
+ "z189sj": ["f7x41pl", "fruq291"]
215
240
  }
216
241
  }, {
217
- "d": [".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}"]
242
+ "d": [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
218
243
  });
219
244
  /**
220
245
  * Apply styling to the Switch slots based on the state
@@ -227,14 +252,15 @@ const useSwitchStyles_unstable = state => {
227
252
  const inputStyles = useInputStyles();
228
253
  const labelStyles = useLabelStyles();
229
254
  const {
255
+ label,
230
256
  labelPosition
231
257
  } = state;
232
258
  state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
233
- state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
234
- state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
259
+ state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
260
+ state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, label && inputStyles[labelPosition], state.input.className);
235
261
 
236
262
  if (state.label) {
237
- state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles[labelPosition], state.label.className);
263
+ state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
238
264
  }
239
265
 
240
266
  return state;
package/lib-commonjs/components/Switch/useSwitchStyles.js.map CHANGED
@@ -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// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: tokens.spacingVerticalXS,\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}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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\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}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.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\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 above: {\n marginBottom: tokens.spacingVerticalXS,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n before: {\n marginRight: tokens.spacingHorizontalM,\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 labelPosition === 'above' && rootStyles.vertical,\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[labelPosition], 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// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\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}px`,\n height: `${trackHeight}px`,\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n },\n\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}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 cursor: 'default',\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.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\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 before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\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 { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorStyles.base,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n label && inputStyles[labelPosition],\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\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": "9.0.6",
3
+ "version": "9.0.7",
4
4
  "description": "Fluent UI React Switch component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -34,7 +34,7 @@
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.175",
36
36
  "@fluentui/react-label": "^9.0.6",
37
- "@fluentui/react-tabster": "^9.1.1",
37
+ "@fluentui/react-tabster": "^9.1.2",
38
38
  "@fluentui/react-theme": "^9.1.0",
39
39
  "@fluentui/react-utilities": "^9.1.0",
40
40
  "@griffel/react": "^1.3.0",