Add missing ToggleSwitch--checked styles (#2094)

* Add missing ToggleSwitch--checked styles

* Add rule to override Catalyst's display: block

Author: camertron

.changeset/dirty-mails-stare.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add missing ToggleSwitch--checked styles

src/toggle-switch/toggle-switch.scss

@@ -1,3 +1,9 @@
+// Catalyst in dotcom applies a display: block to all web component elements. This
+// rule overrides it so the status label and toggle switch are laid out correctly.
+.ToggleSwitch.ToggleSwitch {
+  display: inline-flex;
+}
+
 .ToggleSwitch {
   align-items: center;
   display: inline-flex;
@@ -16,6 +22,18 @@
   }
 }
 
+.ToggleSwitch--checked {
+  .ToggleSwitch-statusOn {
+    height: auto;
+    visibility: visible;
+  }
+
+  .ToggleSwitch-statusOff {
+    height: 0;
+    visibility: hidden;
+  }
+}
+
 .ToggleSwitch-track {
   position: relative;
   display: block;