@primer/view-components 0.45.1-rc.015a120e → 0.45.2

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",
     ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible",
+    ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus",
     ".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-trailingVisualLabel)",
     ":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) .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-trailingVisualLabel) .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--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--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--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--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-check-group-wrap fieldset",
     ".FormControl-radio-group-wrap fieldset",
+    ".FormControl-check-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:checked:disabled",
     ".FormControl-radio[disabled]:checked",
-    ":is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label",
+    ".FormControl-radio:checked:disabled",
+    ":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 +1,230 @@
-.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}
+/* 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;
+  }

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

@@ -1,8 +1,8 @@
 {
   "name": "alpha/toggle_switch",
   "selectors": [
-    ".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-circleIcon",
     ".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon",
     ".ToggleSwitch-icons",
     ".ToggleSwitch-lineIcon",
     ".ToggleSwitch-circleIcon",