@primer/view-components 0.3.0-rc.d9da539f → 0.3.0

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

@@ -19,15 +19,15 @@
     ".FormControl-input[invalid]:not(:focus)",
     ".FormControl-select[invalid]:not(:focus)",
     ".FormControl-textarea[invalid]:not(:focus)",
-    ".FormControl-input:not([type=checkbox],[type=radio]):focus",
-    ".FormControl-select:not([type=checkbox],[type=radio]):focus",
-    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus",
-    ".FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
-    ".FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
-    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
-    ".FormControl-input:not([type=checkbox],[type=radio]):focus-visible",
-    ".FormControl-select:not([type=checkbox],[type=radio]):focus-visible",
-    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-input:not([type='checkbox'], [type='radio']):focus",
+    ".FormControl-select:not([type='checkbox'], [type='radio']):focus",
+    ".FormControl-textarea:not([type='checkbox'], [type='radio']):focus",
+    ".FormControl-input:not([type='checkbox'], [type='radio']):focus:not(:focus-visible)",
+    ".FormControl-select:not([type='checkbox'], [type='radio']):focus:not(:focus-visible)",
+    ".FormControl-textarea:not([type='checkbox'], [type='radio']):focus:not(:focus-visible)",
+    ".FormControl-input:not([type='checkbox'], [type='radio']):focus-visible",
+    ".FormControl-select:not([type='checkbox'], [type='radio']):focus-visible",
+    ".FormControl-textarea:not([type='checkbox'], [type='radio']):focus-visible",
     ".FormControl-input[disabled]::placeholder",
     ".FormControl-select[disabled]::placeholder",
     ".FormControl-textarea[disabled]::placeholder",
@@ -49,12 +49,12 @@
     ".FormControl-input.FormControl-inset",
     ".FormControl-select.FormControl-inset",
     ".FormControl-textarea.FormControl-inset",
-    ".FormControl-input.FormControl-inset:focus",
     ".FormControl-input.FormControl-inset:focus-visible",
-    ".FormControl-select.FormControl-inset:focus",
     ".FormControl-select.FormControl-inset:focus-visible",
-    ".FormControl-textarea.FormControl-inset:focus",
     ".FormControl-textarea.FormControl-inset:focus-visible",
+    ".FormControl-input.FormControl-inset:focus",
+    ".FormControl-select.FormControl-inset:focus",
+    ".FormControl-textarea.FormControl-inset:focus",
     ".FormControl-input.FormControl-monospace",
     ".FormControl-select.FormControl-monospace",
     ".FormControl-textarea.FormControl-monospace",
@@ -76,8 +76,8 @@
     ".FormControl-input-wrap .FormControl-input-trailingAction[disabled]",
     ".FormControl-input-wrap .FormControl-input-trailingAction:hover",
     ".FormControl-input-wrap .FormControl-input-trailingAction:active",
-    ".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before",
-    ".FormControl-input-wrap .FormControl-input-trailingAction:after",
+    ".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider::before",
+    ".FormControl-input-wrap .FormControl-input-trailingAction::after",
     ".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .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",
@@ -85,51 +85,51 @@
     ".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",
-    ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before",
+    ".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-wrap--leadingVisual .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",
-    ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before",
+    ".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-checkbox-wrap",
     ".FormControl-radio-wrap",
     ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
-    ".FormControl-checkbox-wrap .FormControl-radio-labelWrap",
     ".FormControl-radio-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-checkbox-wrap .FormControl-radio-labelWrap",
     ".FormControl-radio-wrap .FormControl-radio-labelWrap",
     ".FormControl-checkbox-wrap .FormControl-label",
     ".FormControl-radio-wrap .FormControl-label",
-    ".FormControl-check-group-wrap fieldset",
     ".FormControl-radio-group-wrap fieldset",
-    "input[type=checkbox].FormControl-checkbox",
-    "input.FormControl-checkbox[type=checkbox][disabled]",
-    "input.FormControl-checkbox[type=checkbox][invalid]:not(:focus)",
-    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus",
-    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
-    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible",
-    "input.FormControl-checkbox[type=checkbox]:before",
-    "input.FormControl-checkbox[type=checkbox]:after",
-    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label",
-    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label",
-    "input.FormControl-checkbox[type=checkbox]:checked",
-    "input.FormControl-checkbox[type=checkbox]:checked:before",
-    "input.FormControl-checkbox[type=checkbox]:checked:disabled",
-    "input.FormControl-checkbox[type=checkbox]:checked:disabled:before",
-    "input.FormControl-checkbox[type=checkbox]:focus-visible",
-    "input.FormControl-checkbox[type=checkbox]:indeterminate:before",
-    "input[type=radio].FormControl-radio",
-    "input.FormControl-radio[type=radio][disabled]",
-    "input.FormControl-radio[type=radio][invalid]:not(:focus)",
-    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus",
-    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
-    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible",
-    "input.FormControl-radio[type=radio]:after",
-    "input.FormControl-radio[type=radio]:checked",
-    "input.FormControl-radio[type=radio]:checked:disabled",
-    "input.FormControl-radio[type=radio]:focus-visible"
+    ".FormControl-check-group-wrap fieldset",
+    "input[type='checkbox'].FormControl-checkbox",
+    "input.FormControl-checkbox[type='checkbox'][disabled]",
+    "input.FormControl-checkbox[type='checkbox'][invalid]:not(:focus)",
+    "input.FormControl-checkbox[type='checkbox']:not([type='checkbox'], [type='radio']):focus",
+    "input.FormControl-checkbox[type='checkbox']:not([type='checkbox'], [type='radio']):focus:not(:focus-visible)",
+    "input.FormControl-checkbox[type='checkbox']:not([type='checkbox'], [type='radio']):focus-visible",
+    "input.FormControl-checkbox[type='checkbox']::before",
+    "input.FormControl-checkbox[type='checkbox']::after",
+    "input.FormControl-checkbox[type='checkbox'][disabled] ~ .FormControl-checkbox-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type='checkbox'][disabled] ~ .FormControl-radio-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type='checkbox']:checked",
+    "input.FormControl-checkbox[type='checkbox']:checked::before",
+    "input.FormControl-checkbox[type='checkbox']:checked:disabled",
+    "input.FormControl-checkbox[type='checkbox']:checked:disabled::before",
+    "input.FormControl-checkbox[type='checkbox']:focus-visible",
+    "input.FormControl-checkbox[type='checkbox']:indeterminate::before",
+    "input[type='radio'].FormControl-radio",
+    "input.FormControl-radio[type='radio'][disabled]",
+    "input.FormControl-radio[type='radio'][invalid]:not(:focus)",
+    "input.FormControl-radio[type='radio']:not([type='checkbox'], [type='radio']):focus",
+    "input.FormControl-radio[type='radio']:not([type='checkbox'], [type='radio']):focus:not(:focus-visible)",
+    "input.FormControl-radio[type='radio']:not([type='checkbox'], [type='radio']):focus-visible",
+    "input.FormControl-radio[type='radio']::after",
+    "input.FormControl-radio[type='radio']:checked",
+    "input.FormControl-radio[type='radio']:checked:disabled",
+    "input.FormControl-radio[type='radio']:focus-visible"
   ]
 }

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

@@ -1 +1,228 @@
-.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,.5rem)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--controlTrack-borderColor-rest,var(--color-switch-track-border));border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,2rem);overflow:hidden;padding:0;position:relative;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,4rem)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}@media (pointer:coarse){.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,var(--color-switch-track-disabled-bg));border-color:#0000;color:var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg))}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));border-color:var(--controlTrack-borderColor-rest,var(--color-switch-track-border))}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover,var(--color-switch-track-checked-hover-bg))}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active,var(--color-switch-track-checked-active-bg))}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked,var(--color-switch-knob-checked-bg));border-color:var(--controlKnob-borderColor-checked,var(--color-switch-knob-checked-border));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,var(--color-switch-track-disabled-bg));border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--controlKnob-borderColor-disabled,var(--color-btn-bg));box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg))}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));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,var(--color-switch-track-fg));transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--borderRadius-medium,6px);bottom:0;box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));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,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,1rem)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,.75rem)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,1.5rem);width:var(--base-size-48,3rem)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted,var(--color-fg-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,0.5rem);
+}
+
+.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,4rem);
+  height: var(--control-medium-size,2rem);
+  padding: 0;
+  overflow: hidden;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--controlTrack-borderColor-rest,var(--color-switch-track-border));
+  border-radius: var(--borderRadius-medium,6px);
+  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+  transition-duration: 80ms;
+  transition-property: background-color, border-color;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.ToggleSwitch-track:focus,
+  .ToggleSwitch-track:focus-visible {
+    outline-offset: 1px;
+  }
+
+.ToggleSwitch-track:hover {
+    background-color: var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg));
+  }
+
+.ToggleSwitch-track:active {
+    background-color: var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg));
+  }
+
+@media (pointer: coarse) {
+      .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] {
+  background-color: var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg));
+  color: var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg));
+  border-color: transparent;
+}
+
+.ToggleSwitch-track[aria-pressed='true'] {
+  background-color: var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));
+  border-color: var(--controlTrack-borderColor-rest,var(--color-switch-track-border));
+}
+
+.ToggleSwitch-track[aria-pressed='true']:not([disabled]):hover {
+      background-color: var(--control-checked-bgColor-hover,var(--color-switch-track-checked-hover-bg));
+    }
+
+.ToggleSwitch-track[aria-pressed='true']:not([disabled]):active {
+      background-color: var(--control-checked-bgColor-active,var(--color-switch-track-checked-active-bg));
+    }
+
+.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob {
+    background-color: var(--controlKnob-bgColor-checked,var(--color-switch-knob-checked-bg));
+    border-color: var(--controlKnob-borderColor-checked,var(--color-switch-knob-checked-border));
+    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,var(--color-switch-track-disabled-bg));
+  border-color: transparent;
+  transition-property: none;
+}
+
+.ToggleSwitch-track[disabled] .ToggleSwitch-knob {
+    border-color: var(--controlKnob-borderColor-disabled,var(--color-btn-bg));
+    box-shadow: none;
+  }
+
+.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon {
+    color: var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg));
+  }
+
+.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon {
+    color: var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg));
+  }
+
+.ToggleSwitch-icons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ToggleSwitch-lineIcon {
+  line-height: 0;
+  color: var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(-100%);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-circleIcon {
+  line-height: 0;
+  color: var(--controlTrack-fgColor-rest,var(--color-switch-track-fg));
+  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,var(--color-switch-knob-bg));
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));
+  border-radius: var(--borderRadius-medium,6px);
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium)), var(--button-default-shadow-inset,var(--color-btn-inset-shadow));
+  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,0.875rem);
+  line-height: 1.5;
+  color: var(--fgColor-default,var(--color-fg-default));
+  text-align: right;
+}
+
+.ToggleSwitch-statusIcon {
+  width: var(--base-size-16,1rem);
+  display: flex;
+  margin-top: 0.063rem;
+}
+
+.ToggleSwitch--small .ToggleSwitch-status {
+    font-size: var(--text-body-size-small,0.75rem);
+  }
+
+.ToggleSwitch--small .ToggleSwitch-track {
+    width: var(--base-size-48,3rem);
+    height: var(--control-xsmall-size,1.5rem);
+  }
+
+.ToggleSwitch--disabled .ToggleSwitch-status {
+    color: var(--fgColor-muted,var(--color-fg-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",
-    ".ToggleSwitch-track:before",
+    ".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",

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

@@ -1 +1,149 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-neutral-muted));display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}
+/* UnderlineNav */
+
+.UnderlineNav {
+  display: flex;
+  min-height: var(--base-size-48,3rem);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted,var(--color-neutral-muted));
+  -webkit-overflow-scrolling: auto;
+  justify-content: space-between;
+}
+
+.UnderlineNav .Counter {
+    margin-left: var(--control-medium-gap,0.5rem);
+    color: var(--fgColor-default,var(--color-fg-default));
+    background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted));
+  }
+
+.UnderlineNav .Counter--primary {
+    color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-neutral-emphasis,var(--color-fg-subtle));
+  }
+
+.UnderlineNav-body {
+  display: flex;
+  align-items: center;
+  gap: var(--control-medium-gap,0.5rem);
+  list-style: none;
+}
+
+.UnderlineNav-item {
+  position: relative;
+  display: flex;
+  padding: 0 var(--control-medium-paddingInline-condensed,0.5rem);
+  font-size: var(--text-body-size-medium,0.875rem);
+  line-height: 30px;
+  color: var(--fgColor-default,var(--color-fg-default));
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--borderRadius-medium,6px);
+  align-items: center;
+}
+
+.UnderlineNav-item:hover,
+  .UnderlineNav-item:focus,
+  .UnderlineNav-item:focus-visible {
+    color: var(--fgColor-default,var(--color-fg-default));
+    text-decoration: none;
+    border-bottom-color: var(--borderColor-neutral-muted,var(--color-neutral-muted));
+    outline-offset: -2px;
+    transition: border-bottom-color 0.12s ease-out;
+  }
+
+/* renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected */
+
+.UnderlineNav-item [data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold,600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+/* increase touch target area */
+
+.UnderlineNav-item::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: 48px;
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+}
+
+/* hover state was "sticking" on mobile after click */
+
+@media (pointer: fine) {
+    .UnderlineNav-item:hover {
+      color: var(--fgColor-default,var(--color-fg-default));
+      text-decoration: none;
+      background: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));
+      transition: background 0.12s ease-out;
+    }
+  }
+
+.UnderlineNav-item.selected,
+  .UnderlineNav-item[role='tab'][aria-selected='true'],
+  .UnderlineNav-item[aria-current]:not([aria-current='false']) {
+    font-weight: var(--base-text-weight-semibold,600);
+    color: var(--fgColor-default,var(--color-fg-default));
+    border-bottom-color: var(--underlineNav-borderColor-active,var(--color-primer-border-active));
+
+    /* current/selected underline */
+  }
+
+.UnderlineNav-item.selected::after, .UnderlineNav-item[role='tab'][aria-selected='true']::after, .UnderlineNav-item[aria-current]:not([aria-current='false'])::after {
+      position: absolute;
+      z-index: 1; /* raise above full-width flash banner */
+      right: 50%;
+      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
+      width: 100%;
+      height: 2px;
+      content: '';
+      background: var(--underlineNav-borderColor-active,var(--color-primer-border-active));
+      border-radius: var(--borderRadius-medium,6px);
+      transform: translate(50%, -50%);
+    }
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+}
+
+.UnderlineNav--right .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+
+  /* required for underline to align with additional wrapper element */
+}
+
+.UnderlineNav--full .UnderlineNav-body {
+    min-height: var(--base-size-48,3rem);
+  }
+
+.UnderlineNav-octicon {
+  display: inline !important;
+}
+
+.UnderlineNav-octicon {
+  margin-right: var(--control-medium-gap,0.5rem);
+  color: var(--fgColor-muted,var(--color-fg-muted));
+  fill: var(--fgColor-muted,var(--color-fg-muted));
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -6,17 +6,17 @@
     ".UnderlineNav .Counter--primary",
     ".UnderlineNav-body",
     ".UnderlineNav-item",
+    ".UnderlineNav-item:hover",
     ".UnderlineNav-item:focus",
     ".UnderlineNav-item:focus-visible",
-    ".UnderlineNav-item:hover",
-    ".UnderlineNav-item [data-content]:before",
-    ".UnderlineNav-item:before",
+    ".UnderlineNav-item [data-content]::before",
+    ".UnderlineNav-item::before",
     ".UnderlineNav-item.selected",
-    ".UnderlineNav-item[aria-current]:not([aria-current=false])",
-    ".UnderlineNav-item[role=tab][aria-selected=true]",
-    ".UnderlineNav-item.selected:after",
-    ".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
-    ".UnderlineNav-item[role=tab][aria-selected=true]:after",
+    ".UnderlineNav-item[role='tab'][aria-selected='true']",
+    ".UnderlineNav-item[aria-current]:not([aria-current='false'])",
+    ".UnderlineNav-item.selected::after",
+    ".UnderlineNav-item[role='tab'][aria-selected='true']::after",
+    ".UnderlineNav-item[aria-current]:not([aria-current='false'])::after",
     ".UnderlineNav--right",
     ".UnderlineNav--right .UnderlineNav-actions",
     ".UnderlineNav-actions",

package/app/components/primer/anchored_position.js

@@ -133,11 +133,9 @@ export default class AnchoredPositionElement extends HTMLElement {
             const anchor = this.anchorElement;
             if (!anchor)
                 return;
-            const { left, top, anchorSide, anchorAlign } = getAnchoredPosition(this, anchor, this);
+            const { left, top } = getAnchoredPosition(this, anchor, this);
             this.style.top = `${top}px`;
             this.style.left = `${left}px`;
-            this.classList.remove('Overlay--anchorAlign-start', 'Overlay--anchorAlign-center', 'Overlay--anchorAlign-end', 'Overlay--anchorSide-insideTop', 'Overlay--anchorSide-insideBottom', 'Overlay--anchorSide-insideLeft', 'Overlay--anchorSide-insideRight', 'Overlay--anchorSide-insideCenter', 'Overlay--anchorSide-outsideTop', 'Overlay--anchorSide-outsideLeft', 'Overlay--anchorSide-outsideRight');
-            this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`);
         }), "f");
     }
 }