@primer/view-components 0.45.2 → 0.46.0-rc.4285adec

package/app/components/primer/alpha/text_field.css.json

@@ -15,11 +15,11 @@
     ".FormControl-select",
     ".FormControl-textarea",
     "[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
-    "[invalid='true']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
-    "[invalid='false']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
-    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus",
-    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus:not(:focus-visible)",
-    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus-visible",
+    "[invalid=true]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
+    "[invalid=false]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
+    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus",
+    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible",
     "[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder",
     "[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
     ":is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder",
@@ -27,8 +27,8 @@
     ".FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
     ".FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
     ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
-    ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible",
     ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus",
+    ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible",
     ".FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
     ".FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
     ".FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
@@ -38,21 +38,21 @@
     ".FormControl-input-wrap .FormControl-input-leadingVisualWrap",
     ":is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual",
     ".FormControl-input-wrap .FormControl-input-trailingVisualWrap",
-    ":is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText)",
     ":is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel)",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText)",
     ":is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel",
     ".FormControl-input-wrap .FormControl-input-trailingAction",
     ":is(.FormControl-input-wrap .FormControl-input-trailingAction) svg",
     "[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction)",
     ":is(.FormControl-input-wrap .FormControl-input-trailingAction):hover",
     ":is(.FormControl-input-wrap .FormControl-input-trailingAction):active",
-    ".FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction)::before",
-    ":is(:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after)",
-    ":is(.FormControl-input-wrap .FormControl-input-trailingAction)::after",
+    ".FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction):before",
+    ":is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after)",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingAction):after",
     ".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",
     ".FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input",
-    ".FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input",
     ".FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input",
     ".FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input",
     ".FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input",
     ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap",
@@ -60,60 +60,60 @@
     ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small",
     ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small",
     ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction",
-    ":is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction)::before",
+    ":is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction):before",
     ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap",
     ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap",
     ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large",
     ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input",
-    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input",
-    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input",
-    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large",
     ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input",
     ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large",
     ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large",
     ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction",
-    ":is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction)::before",
+    ":is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before",
     ".FormControl-select-wrap",
-    ".FormControl-select-wrap::after",
+    ".FormControl-select-wrap:after",
     ".FormControl-select-wrap .FormControl-select",
-    ".FormControl-select-wrap[data-multiple]::after",
+    ".FormControl-select-wrap[data-multiple]:after",
     ".FormControl-select-wrap[data-multiple] .FormControl-select",
     ".FormControl-checkbox-wrap",
     ".FormControl-radio-wrap",
     ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap",
     ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap",
     ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label",
-    ".FormControl-radio-group-wrap fieldset",
     ".FormControl-check-group-wrap fieldset",
+    ".FormControl-radio-group-wrap fieldset",
     ".FormControl-checkbox",
     ".FormControl-checkbox[disabled]",
-    ".FormControl-checkbox[invalid='true']:not(:focus)",
-    ".FormControl-checkbox[invalid='false']:not(:focus)",
-    ".FormControl-checkbox:not([type='checkbox'],[type='radio']):focus",
-    ".FormControl-checkbox:not([type='checkbox'],[type='radio']):focus:not(:focus-visible)",
-    ".FormControl-checkbox:not([type='checkbox'],[type='radio']):focus-visible",
-    ".FormControl-checkbox::before",
-    ":is(.FormControl-checkbox::after)",
-    ":is(.FormControl-checkbox[disabled] ~ .FormControl-checkbox-labelWrap) .FormControl-label",
+    ".FormControl-checkbox[invalid=true]:not(:focus)",
+    ".FormControl-checkbox[invalid=false]:not(:focus)",
+    ".FormControl-checkbox:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-checkbox:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-checkbox:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-checkbox:before",
+    ":is(.FormControl-checkbox:after)",
+    ":is(.FormControl-checkbox[disabled]~.FormControl-checkbox-labelWrap) .FormControl-label",
     ".FormControl-checkbox:checked",
-    ".FormControl-checkbox:checked::before",
+    ".FormControl-checkbox:checked:before",
     ".FormControl-checkbox:checked:disabled",
-    ".FormControl-checkbox:checked:disabled::before",
+    ".FormControl-checkbox:checked:disabled:before",
     ".FormControl-checkbox:focus-visible",
-    ".FormControl-checkbox:indeterminate::before",
+    ".FormControl-checkbox:indeterminate:before",
     ".FormControl-radio",
     ".FormControl-radio[disabled]",
-    ".FormControl-radio[invalid='true']:not(:focus)",
-    ".FormControl-radio[invalid='false']:not(:focus)",
-    ".FormControl-radio:not([type='checkbox'],[type='radio']):focus",
-    ".FormControl-radio:not([type='checkbox'],[type='radio']):focus:not(:focus-visible)",
-    ".FormControl-radio:not([type='checkbox'],[type='radio']):focus-visible",
-    ":is(.FormControl-radio::after)",
-    ":is(.FormControl-radio[disabled] ~ .FormControl-radio-labelWrap) .FormControl-label",
+    ".FormControl-radio[invalid=true]:not(:focus)",
+    ".FormControl-radio[invalid=false]:not(:focus)",
+    ".FormControl-radio:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-radio:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-radio:not([type=checkbox],[type=radio]):focus-visible",
+    ":is(.FormControl-radio:after)",
+    ":is(.FormControl-radio[disabled]~.FormControl-radio-labelWrap) .FormControl-label",
     ".FormControl-radio:checked",
-    ".FormControl-radio[disabled]:checked",
     ".FormControl-radio:checked:disabled",
-    ":is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled) ~ .FormControl-radio-labelWrap) .FormControl-label",
+    ".FormControl-radio[disabled]:checked",
+    ":is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label",
     ".FormControl-radio:focus-visible"
   ]
 }

package/app/components/primer/alpha/toggle_switch.css

@@ -1,230 +1 @@
-/* ToggleSwitch */
-
-/* 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;
-  gap: var(--controlStack-medium-gap-condensed);
-}
-
-.ToggleSwitch--checked .ToggleSwitch-statusOn {
-    height: auto;
-    visibility: visible;
-  }
-
-.ToggleSwitch--checked .ToggleSwitch-statusOff {
-    height: 0;
-    visibility: hidden;
-  }
-
-.ToggleSwitch-track {
-  position: relative;
-  display: block;
-  width: var(--base-size-64);
-  height: var(--control-medium-size);
-  padding: 0;
-  overflow: hidden;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-          user-select: none;
-  background-color: var(--controlTrack-bgColor-rest);
-  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);
-  border-radius: var(--borderRadius-medium);
-  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
-  transition-duration: 80ms;
-  transition-property: background-color, border-color;
-  appearance: none;
-}
-
-.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible {
-    outline-offset: 1px;
-  }
-
-.ToggleSwitch-track:hover {
-    background-color: var(--controlTrack-bgColor-hover);
-  }
-
-.ToggleSwitch-track:active {
-    background-color: var(--controlTrack-bgColor-active);
-  }
-
-@media (pointer: coarse) {
-      :is(.ToggleSwitch-track::before) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    min-height: 44px;
-    content: "";
-    transform: translateX(-50%) translateY(-50%);
-  }
-  }
-
-@media (prefers-reduced-motion) {
-
-.ToggleSwitch-track {
-    transition: none;
-}
-
-    .ToggleSwitch-track * {
-      transition: none;
-    }
-  }
-
-.ToggleSwitch-track[aria-pressed='true'][disabled] {
-  color: var(--control-checked-fgColor-disabled);
-  background-color: var(--controlTrack-bgColor-disabled);
-  border-color: transparent;
-}
-
-.ToggleSwitch-track[aria-pressed='true'] {
-  background-color: var(--control-checked-bgColor-rest);
-  border-color: var(--borderColor-transparent);
-}
-
-.ToggleSwitch-track[aria-pressed='true']:not([disabled]):hover {
-      background-color: var(--control-checked-bgColor-hover);
-    }
-
-.ToggleSwitch-track[aria-pressed='true']:not([disabled]):active {
-      background-color: var(--control-checked-bgColor-active);
-    }
-
-.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob {
-    background-color: var(--controlKnob-bgColor-checked);
-    border-color: var(--controlKnob-borderColor-checked);
-    transform: translateX(100%);
-  }
-
-.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-lineIcon {
-    transform: translateX(0%);
-  }
-
-.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-circleIcon {
-    transform: translateX(100%);
-  }
-
-.ToggleSwitch-track[disabled] {
-  cursor: not-allowed;
-  background-color: var(--controlTrack-bgColor-disabled);
-  border-color: transparent;
-  transition-property: none;
-}
-
-.ToggleSwitch-track[disabled] .ToggleSwitch-knob {
-    border-color: var(--borderColor-default);
-    box-shadow: none;
-  }
-
-.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon {
-    color: var(--controlTrack-fgColor-disabled);
-  }
-
-.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon {
-    color: var(--controlTrack-fgColor-disabled);
-  }
-
-.ToggleSwitch-icons {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.ToggleSwitch-lineIcon {
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 0;
-  color: var(--control-checked-fgColor-rest);
-  transition-duration: 80ms;
-  transition-property: transform;
-  transform: translateX(-100%);
-  flex: 1 0 50%;
-}
-
-.ToggleSwitch-circleIcon {
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 0;
-  color: var(--controlTrack-fgColor-rest);
-  transition-duration: 80ms;
-  transition-property: transform;
-  transform: translateX(0);
-  flex: 1 0 50%;
-}
-
-.ToggleSwitch-knob {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 50%;
-  background-color: var(--controlKnob-bgColor-rest);
-  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
-  border-radius: var(--borderRadius-medium);
-  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);
-  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
-  transition-duration: 80ms;
-  transition-property: transform;
-}
-
-@media (prefers-reduced-motion) {
-
-.ToggleSwitch-knob {
-    transition: none;
-}
-  }
-
-.ToggleSwitch-status {
-  position: relative;
-  font-size: var(--text-body-size-medium);
-  line-height: var(--text-title-lineHeight-large);
-  color: var(--fgColor-default);
-  text-align: right;
-}
-
-.ToggleSwitch-statusIcon {
-  display: flex;
-  width: var(--base-size-16);
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: 0.063rem;
-}
-
-.ToggleSwitch--small .ToggleSwitch-status {
-    font-size: var(--text-body-size-small);
-  }
-
-.ToggleSwitch--small .ToggleSwitch-track {
-    width: var(--base-size-48);
-    height: var(--control-xsmall-size);
-  }
-
-.ToggleSwitch--disabled .ToggleSwitch-status {
-    color: var(--fgColor-muted);
-  }
-
-.ToggleSwitch-statusOn {
-  height: 0;
-  visibility: hidden;
-}
-
-.ToggleSwitch-statusOff {
-  height: auto;
-  visibility: visible;
-}
-
-.ToggleSwitch--statusAtEnd {
-  flex-direction: row-reverse;
-}
-
-.ToggleSwitch--statusAtEnd .ToggleSwitch-status {
-    text-align: left;
-  }
+.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{appearance:none;background-color:var(--controlTrack-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);border-radius:var(--borderRadius-medium);cursor:pointer;display:block;height:var(--control-medium-size);overflow:hidden;padding:0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover)}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active)}@media (pointer:coarse){:is(.ToggleSwitch-track:before){content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{background-color:var(--controlTrack-bgColor-disabled);border-color:#0000;color:var(--control-checked-fgColor-disabled)}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest);border-color:var(--borderColor-transparent)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked);border-color:var(--controlKnob-borderColor-checked);transform:translateX(100%)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{background-color:var(--controlTrack-bgColor-disabled);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default);box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);border-radius:var(--borderRadius-medium);bottom:0;box-shadow:var(--shadow-resting-medium),var(--button-default-shadow-inset);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--fgColor-default);font-size:var(--text-body-size-medium);line-height:var(--text-title-lineHeight-large);position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size);width:var(--base-size-48)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}

package/app/components/primer/alpha/toggle_switch.css.json

@@ -1,8 +1,8 @@
 {
   "name": "alpha/toggle_switch",
   "selectors": [
-    ".ToggleSwitch.ToggleSwitch",
     ".ToggleSwitch",
+    ".ToggleSwitch.ToggleSwitch",
     ".ToggleSwitch--checked .ToggleSwitch-statusOn",
     ".ToggleSwitch--checked .ToggleSwitch-statusOff",
     ".ToggleSwitch-track",
@@ -10,19 +10,19 @@
     ".ToggleSwitch-track:focus-visible",
     ".ToggleSwitch-track:hover",
     ".ToggleSwitch-track:active",
-    ":is(.ToggleSwitch-track::before)",
+    ":is(.ToggleSwitch-track:before)",
     ".ToggleSwitch-track *",
-    ".ToggleSwitch-track[aria-pressed='true'][disabled]",
-    ".ToggleSwitch-track[aria-pressed='true']",
-    ".ToggleSwitch-track[aria-pressed='true']:not([disabled]):hover",
-    ".ToggleSwitch-track[aria-pressed='true']:not([disabled]):active",
-    ".ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob",
-    ".ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-lineIcon",
-    ".ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[aria-pressed=true][disabled]",
+    ".ToggleSwitch-track[aria-pressed=true]",
+    ".ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover",
+    ".ToggleSwitch-track[aria-pressed=true]:not([disabled]):active",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon",
     ".ToggleSwitch-track[disabled]",
     ".ToggleSwitch-track[disabled] .ToggleSwitch-knob",
-    ".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
     ".ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
     ".ToggleSwitch-icons",
     ".ToggleSwitch-lineIcon",
     ".ToggleSwitch-circleIcon",