@primer/react 38.0.0-rc.1 → 38.0.0-rc.2

package/dist/components.css

@@ -3774,6 +3774,222 @@ span wrapping svg or text */
   }
 }
 
+.prc_Banner_IR8eJ {
+  display: grid;
+  padding: var(--base-size-8);
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--banner-bgColor);
+  /* stylelint-disable-next-line primer/colors */
+  border: var(--borderWidth-thin) solid var(--banner-borderColor);
+  border-radius: var(--borderRadius-medium);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+
+  @supports (container-type: inline-size) {
+    container: banner / inline-size;
+  }
+
+  &[data-variant='critical'] {
+    --banner-bgColor: var(--bgColor-danger-muted);
+    --banner-borderColor: var(--borderColor-danger-muted);
+    --banner-icon-fgColor: var(--fgColor-danger);
+  }
+
+  &[data-variant='info'] {
+    --banner-bgColor: var(--bgColor-accent-muted);
+    --banner-borderColor: var(--borderColor-accent-muted);
+    --banner-icon-fgColor: var(--fgColor-accent);
+  }
+
+  &[data-variant='success'] {
+    --banner-bgColor: var(--bgColor-success-muted);
+    --banner-borderColor: var(--borderColor-success-muted);
+    --banner-icon-fgColor: var(--fgColor-success);
+  }
+
+  &[data-variant='upsell'] {
+    --banner-bgColor: var(--bgColor-upsell-muted);
+    --banner-borderColor: var(--borderColor-upsell-muted);
+    --banner-icon-fgColor: var(--fgColor-upsell);
+  }
+
+  &[data-variant='warning'] {
+    --banner-bgColor: var(--bgColor-attention-muted);
+    --banner-borderColor: var(--borderColor-attention-muted);
+    --banner-icon-fgColor: var(--fgColor-attention);
+  }
+}
+
+/* BannerContainer -------------------------------------------------------- */
+
+.prc_BannerContainer_lbx3d {
+  font-size: var(--text-body-size-medium);
+  align-items: start;
+  line-height: var(--text-body-lineHeight-medium);
+  row-gap: var(--base-size-4);
+  column-gap: var(--base-size-4);
+}
+
+.prc_Banner_IR8eJ :where(.prc_BannerContainer_lbx3d) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.prc_Banner_IR8eJ[data-dismissible]:not([data-title-hidden='']) .prc_BannerContainer_lbx3d {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+}
+
+/* BannerContent ---------------------------------------------------------- */
+
+.prc_BannerContent_zTITK {
+  display: grid;
+  row-gap: var(--base-size-4);
+  grid-column-start: 1;
+  margin-block: var(--base-size-8);
+}
+
+.prc_Banner_IR8eJ[data-title-hidden]:not(:has(.prc_BannerActions_XCfHL)) .prc_BannerContent_zTITK {
+  margin-block: var(--base-size-6);
+}
+
+@media screen and (min-width: 544px) {
+  .prc_BannerContent_zTITK {
+    flex: 1 1 0%;
+  }
+}
+
+.prc_BannerTitle_TcuJl {
+  margin: 0;
+  font-size: inherit;
+  font-weight: var(--base-text-weight-semibold);
+}
+
+/* BannerIcon ------------------------------------------------------------- */
+
+.prc_BannerIcon_WuOyf {
+  display: grid;
+  place-items: center;
+  padding: var(--base-size-8);
+}
+
+.prc_BannerIcon_WuOyf svg {
+  /* 20px is the line box height of the trailing action buttons */
+  height: var(--base-size-20);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--banner-icon-fgColor);
+  /* stylelint-disable-next-line primer/colors */
+  fill: var(--banner-icon-fgColor);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.prc_Banner_IR8eJ[data-title-hidden]:not(:has(.prc_BannerActions_XCfHL)) .prc_BannerIcon_WuOyf svg {
+  height: var(--base-size-16);
+}
+
+/* BannerDismiss ---------------------------------------------------------- */
+
+.prc_BannerDismiss_uBZVm {
+  display: grid;
+  place-items: center;
+  padding: var(--base-size-8);
+  margin-inline-start: var(--base-size-4);
+}
+
+:where(.prc_Banner_IR8eJ):has(.prc_BannerActions_XCfHL) .prc_BannerDismiss_uBZVm {
+  margin-block: var(--base-size-2);
+}
+
+.prc_BannerDismiss_uBZVm svg {
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--banner-icon-fgColor);
+}
+
+/* BannerActions ---------------------------------------------------------- */
+
+.prc_BannerActionsContainer_ukGMH {
+  display: flex;
+  column-gap: var(--base-size-12);
+  align-items: center;
+  margin-block: var(--base-size-2);
+}
+
+.prc_BannerActions_XCfHL :where([data-primary-action='trailing']) {
+  display: none;
+}
+
+@media screen and (--viewportRange-regular) {
+  .prc_BannerActions_XCfHL :where([data-primary-action='trailing']) {
+    display: flex;
+  }
+
+  .prc_BannerActions_XCfHL :where([data-primary-action='leading']) {
+    display: none;
+  }
+}
+
+.prc_Banner_IR8eJ[data-dismissible]:not([data-title-hidden]) .prc_BannerActions_XCfHL {
+  margin-block-end: var(--base-size-6);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.prc_Banner_IR8eJ[data-dismissible]:not([data-title-hidden]) .prc_BannerActionsContainer_ukGMH[data-primary-action='trailing'] {
+  display: none;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.prc_Banner_IR8eJ[data-dismissible]:not([data-title-hidden]) .prc_BannerActionsContainer_ukGMH[data-primary-action='leading'] {
+  display: flex;
+}
+
+/* Layout ------------------------------------------------------------------- */
+
+@container banner (max-width: 500px) {
+  .prc_BannerContainer_lbx3d {
+    display: grid;
+  }
+
+  .prc_BannerContainer_lbx3d:has(.prc_BannerActionsContainer_ukGMH) {
+    grid-template-rows: auto auto;
+  }
+
+  .prc_BannerActions_XCfHL {
+    margin-block-end: var(--base-size-6);
+  }
+
+  .prc_BannerActions_XCfHL [data-primary-action='trailing'] {
+    display: none;
+  }
+
+  .prc_BannerActions_XCfHL [data-primary-action='leading'] {
+    display: flex;
+  }
+}
+
+@container banner (min-width: 500px) {
+  .prc_BannerContainer_lbx3d {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  :where(.prc_Banner_IR8eJ):not([data-dismissible])
+    :where(.prc_BannerActionsContainer_ukGMH[data-primary-action='trailing'])
+    :where([data-variant='link']:only-child) {
+    padding-inline: 0 var(--base-size-12);
+  }
+
+  .prc_BannerActions_XCfHL [data-primary-action='trailing'] {
+    display: flex;
+    min-height: var(--base-size-32, 2rem);
+  }
+
+  .prc_BannerActions_XCfHL [data-primary-action='leading'] {
+    display: none;
+  }
+}
+
 .prc_BranchName_jFtg- {
   display: inline-block;
   padding: var(--base-size-2) var(--base-size-6);
@@ -4301,6 +4517,8 @@ span wrapping svg or text */
 }
 
 .prc_FilteredActionList_wzS7m {
+  /* inheriting height and maxHeight ensures that the FilteredActionList is never taller
+     than the Overlay (which would break scrolling the items) */
   height: inherit;
   max-height: inherit;
 }
@@ -4441,6 +4659,10 @@ span wrapping svg or text */
   background-color: var(--overlay-backdrop-bgColor);
 }
 
+.prc_TextInput_TjXuJ {
+  margin: var(--base-size-8);
+}
+
 .prc_TokenBase_PfQzJ {
   position: relative;
   display: inline-flex;
@@ -5165,6 +5387,23 @@ span wrapping svg or text */
   }
 }
 
+.prc_Caret_PNu-B {
+  pointer-events: none;
+  position: absolute;
+}
+
+.prc_CaretTriangle_Iu0GY {
+  /* stylelint-disable-next-line primer/colors */
+  fill: var(--caret-bg, var(--bgColor-default));
+}
+
+.prc_CaretBorder_o3vP2 {
+  fill: none;
+  /* stylelint-disable-next-line primer/colors */
+  stroke: var(--caret-border-color, var(--borderColor-default));
+  stroke-width: var(--caret-border-width, var(--borderWidth-thin));
+}
+
 .prc_Popover_v1ShS {
   position: absolute;
   z-index: 100;
@@ -5489,6 +5728,15 @@ span wrapping svg or text */
   &:where([data-progress-bar-size='large']) {
     height: 10px;
   }
+
+  /* Width support for containers */
+  &:where([data-width='auto']) {
+    width: auto;
+  }
+
+  &:where([data-width='full']) {
+    width: 100%;
+  }
 }
 
 .prc_SegmentedControl_e7570 {
@@ -5810,6 +6058,101 @@ span wrapping svg or text */
   justify-content: space-between;
 }
 
+.prc_StateLabel_ukDwa {
+  display: inline-flex;
+  align-items: center;
+  font-weight: var(--base-text-weight-semibold);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 16px;
+  color: var(--fgColor-onEmphasis);
+  text-align: center;
+  border-radius: var(--borderRadius-full);
+}
+
+/* Size variants */
+.prc_StateLabel_ukDwa:where([data-variant='small']) {
+  padding: var(--base-size-4) var(--base-size-8);
+  font-size: var(--text-body-size-small);
+}
+
+.prc_StateLabel_ukDwa:where([data-variant='normal']) {
+  padding: var(--base-size-8) var(--base-size-12);
+  font-size: var(--text-body-size-medium);
+}
+
+/* Status color variants */
+.prc_StateLabel_ukDwa:where([data-status='issueClosed']) {
+  background-color: var(--bgColor-done-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='issueClosedNotPlanned']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='pullClosed']) {
+  background-color: var(--bgColor-closed-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='pullMerged']) {
+  background-color: var(--bgColor-done-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='pullQueued']) {
+  background-color: var(--bgColor-attention-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='issueOpened']) {
+  background-color: var(--bgColor-open-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='pullOpened']) {
+  background-color: var(--bgColor-open-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='draft']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='issueDraft']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='unavailable']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='open']) {
+  background-color: var(--bgColor-open-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);
+}
+
+.prc_StateLabel_ukDwa:where([data-status='closed']) {
+  background-color: var(--bgColor-done-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);
+}
+
 .prc_Icon_NuDm4 {
   margin-right: var(--base-size-4);
 }
@@ -5885,15 +6228,30 @@ span wrapping svg or text */
 }
 
 .prc_ToggleSwitch_E4lp0 {
+  --toggleSwitch-transition-duration: 80ms;
+  --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1);
+
   display: inline-flex;
   align-items: center;
-  flex-direction: row-reverse;
 }
 
-.prc_ToggleSwitch_E4lp0[data-status-label-position='start'] {
+.prc_ToggleSwitch_E4lp0:where([data-status-label-position='start']) {
   flex-direction: row;
 }
 
+.prc_ToggleSwitch_E4lp0:where([data-status-label-position='end']) {
+  flex-direction: row-reverse;
+}
+
+.prc_LoadingSpinner_jCYtC {
+  display: inline-flex;
+}
+
+.prc_LoadingSpinner_jCYtC:where([data-status-label-position='end']) {
+  margin-right: 0;
+  margin-left: var(--base-size-8);
+}
+
 .prc_StatusText_hWpj2 {
   margin-left: var(--base-size-8);
   margin-right: var(--base-size-8);
@@ -5903,25 +6261,138 @@ span wrapping svg or text */
   cursor: pointer;
 }
 
-.prc_StatusText_hWpj2[data-size='small'] {
+.prc_StatusText_hWpj2:where([data-disabled='true']) {
+  cursor: not-allowed;
+  color: var(--fgColor-muted);
+}
+
+.prc_StatusText_hWpj2:where([data-size='small']) {
   font-size: var(--text-body-size-small);
 }
 
-.prc_StatusText_hWpj2[data-disabled='true'] {
-  color: var(--fgColor-muted);
-  cursor: not-allowed;
+.prc_StatusText_hWpj2:where([data-size='medium']) {
+  font-size: var(--text-body-size-medium);
 }
 
 .prc_StatusTextItem_fvvXa {
+  display: block;
   text-align: right;
 }
 
-.prc_StatusTextItem_fvvXa[data-hidden='true'] {
+.prc_StatusTextItem_fvvXa:where([data-hidden='true']) {
   visibility: hidden;
   height: 0;
 }
 
-.prc_IconContainer_zLC02 {
+.prc_SwitchButton_5LRHX {
+  cursor: pointer;
+  user-select: none;
+  appearance: none;
+  text-decoration: none;
+  padding: 0;
+  transition-property: background-color, border-color;
+  transition-duration: var(--toggleSwitch-transition-duration);
+  transition-timing-function: var(--toggleSwitch-transition-easing);
+  border-radius: var(--borderRadius-medium);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  display: block;
+  position: relative;
+  overflow: hidden;
+
+  /* Default medium size */
+  height: 32px;
+  width: 64px;
+
+  /* Focus styles */
+  &:focus-visible {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: 3px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: solid 1px transparent;
+  }
+
+  /* Touch device support */
+  @media (pointer: coarse) {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+      top: 50%;
+      min-height: 44px;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion) {
+    transition: none;
+
+    * {
+      transition: none;
+    }
+  }
+}
+
+/* Size variants */
+.prc_SwitchButton_5LRHX:where([data-size='small']) {
+  height: 24px;
+  width: 48px;
+}
+
+/* State variants */
+.prc_SwitchButton_5LRHX:where([data-disabled='true']) {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));
+  border-color: transparent;
+  cursor: not-allowed;
+  transition-property: none;
+
+  @media (forced-colors: active) {
+    border-color: GrayText;
+  }
+}
+
+.prc_SwitchButton_5LRHX:where([data-checked='false']:not([data-disabled='true'])) {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2));
+  border-color: var(--controlTrack-borderColor-rest);
+}
+
+.prc_SwitchButton_5LRHX:where([data-checked='false']:not([data-disabled='true']):hover),
+.prc_SwitchButton_5LRHX:where([data-checked='false']:not([data-disabled='true']):focus-visible) {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210deg, 24%, 90%, 1)));
+}
+
+.prc_SwitchButton_5LRHX:where([data-checked='false']:not([data-disabled='true']):active),
+.prc_SwitchButton_5LRHX:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210deg, 24%, 88%, 1)));
+}
+
+.prc_SwitchButton_5LRHX:where([data-checked='true']:not([data-disabled='true'])) {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da));
+  border-color: var(--control-checked-borderColor-rest, transparent);
+}
+
+.prc_SwitchButton_5LRHX:where([data-checked='true']:not([data-disabled='true']):hover),
+.prc_SwitchButton_5LRHX:where([data-checked='true']:not([data-disabled='true']):focus-visible) {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca));
+}
+
+.prc_SwitchButton_5LRHX:where([data-checked='true']:not([data-disabled='true']):active),
+.prc_SwitchButton_5LRHX:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba));
+}
+
+.prc_SwitchButtonContent_nv4lE {
   display: flex;
   align-items: center;
   width: 100%;
@@ -5929,43 +6400,98 @@ span wrapping svg or text */
   overflow: hidden;
 }
 
-.prc_IconBox_NNOYG {
+.prc_IconContainer_zLC02 {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 50%;
   /* stylelint-disable-next-line primer/typography */
   line-height: 0;
   transition-property: transform;
-  transition-duration: 80ms;
+  transition-duration: var(--toggleSwitch-transition-duration);
+  transition-timing-function: var(--toggleSwitch-transition-easing);
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
 }
 
-.prc_IconBox_NNOYG[data-type='on'] {
-  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, var(--fgColor-onEmphasis)));
+.prc_LineIconContainer_7sQm8 {
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff));
+}
+
+.prc_LineIconContainer_7sQm8:where([data-disabled='true']) {
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff));
+}
+
+.prc_LineIconContainer_7sQm8:where([data-checked='true']) {
   transform: translateX(0);
 }
 
-.prc_IconBox_NNOYG[data-type='on'][data-checked='false'] {
+.prc_LineIconContainer_7sQm8:where([data-checked='false']) {
   transform: translateX(-100%);
 }
 
-.prc_IconBox_NNOYG[data-type='on'][data-disabled='true'] {
-  color: var(
-    --control-checked-fgColor-disabled,
-    var(--color-switch-track-checked-disabled-fg, var(--fgColor-onEmphasis))
-  );
+.prc_CircleIconContainer_gHYvi {
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76));
 }
 
-.prc_IconBox_NNOYG[data-type='off'] {
-  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, var(--fgColor-muted)));
+.prc_CircleIconContainer_gHYvi:where([data-disabled='true']) {
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff));
+}
+
+.prc_CircleIconContainer_gHYvi:where([data-checked='true']) {
   transform: translateX(100%);
 }
 
-.prc_IconBox_NNOYG[data-type='off'][data-checked='false'] {
+.prc_CircleIconContainer_gHYvi:where([data-checked='false']) {
+  transform: translateX(0);
+}
+
+.prc_ToggleKnob_2e7Rm {
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff));
+  border-width: var(--borderWidth-thin);
+  border-style: solid;
+  /* stylelint-disable-next-line primer/colors */
+  border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99));
+  /* Use calc to account for 1px border around the control */
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thin));
+  width: 50%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  transition-property: transform;
+  transition-duration: var(--toggleSwitch-transition-duration);
+  transition-timing-function: var(--toggleSwitch-transition-easing);
+  z-index: 1;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+}
+
+.prc_ToggleKnob_2e7Rm:where([data-checked='false']) {
   transform: translateX(0);
 }
 
-.prc_IconBox_NNOYG[data-type='off'][data-disabled='true'] {
-  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, var(--fgColor-onEmphasis)));
+.prc_ToggleKnob_2e7Rm:where([data-checked='true']) {
+  transform: translateX(100%);
+  /* stylelint-disable-next-line primer/colors */
+  border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da));
+}
+
+.prc_ToggleKnob_2e7Rm:where([data-disabled='true']) {
+  /* stylelint-disable-next-line primer/colors */
+  border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));
+
+  @media (forced-colors: active) {
+    color: GrayText;
+  }
 }
 
 .prc_Timeline_iQjcc {
@@ -6068,6 +6594,117 @@ span wrapping svg or text */
   border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
 }
 
+.prc_IssueLabel_ZuoEW {
+  /* Color variables - dynamically set via inline CSS custom properties */
+  --label-r: 153;
+  --label-g: 153;
+  --label-b: 153;
+  --label-h: 0;
+  --label-s: 0;
+  --label-l: 60;
+  --perceived-lightness: calc(
+    ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255
+  );
+  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));
+
+  position: relative;
+  border-width: var(--borderWidth-thin);
+  border-style: solid;
+}
+
+/* Light mode styles */
+.prc_IssueLabel_ZuoEW:where([data-in-color-mode*='light'], [data-in-color-mode='auto']) {
+  --lightness-threshold: 0.453;
+  --border-threshold: 0.96;
+  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
+  /* stylelint-disable-next-line primer/colors */
+  background: rgb(var(--label-r), var(--label-g), var(--label-b));
+  /* stylelint-disable-next-line primer/colors */
+  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
+  /* stylelint-disable-next-line primer/colors */
+  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
+}
+
+/* Dark mode styles */
+.prc_IssueLabel_ZuoEW:where([data-in-color-mode*='dark']) {
+  --lightness-threshold: 0.6;
+  --background-alpha: 0.18;
+  --border-alpha: 0.3;
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+
+  /* stylelint-disable-next-line primer/colors */
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+  /* stylelint-disable-next-line primer/colors */
+  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+  /* stylelint-disable primer/colors */
+  border-color: hsla(
+    var(--label-h),
+    calc(var(--label-s) * 1%),
+    calc((var(--label-l) + var(--lighten-by)) * 1%),
+    var(--border-alpha)
+  );
+  /* stylelint-enable primer/colors */
+}
+
+/* Selected state */
+.prc_IssueLabel_ZuoEW:where(
+    [data-selected='true'][data-in-color-mode*='light'],
+    [data-selected='true'][data-in-color-mode='auto']
+  ) {
+  /* stylelint-disable-next-line primer/colors */
+  background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
+}
+
+.prc_IssueLabel_ZuoEW:where([data-selected='true']) {
+  outline: none;
+}
+
+.prc_IssueLabel_ZuoEW:where([data-selected='true'])::after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: calc(var(--base-size-2) * -1);
+  right: calc(var(--base-size-2) * -1);
+  bottom: calc(var(--base-size-2) * -1);
+  left: calc(var(--base-size-2) * -1);
+  display: block;
+  pointer-events: none;
+  border-radius: var(--borderRadius-full);
+}
+
+.prc_IssueLabel_ZuoEW:where(
+    [data-selected='true'][data-in-color-mode*='light'],
+    [data-selected='true'][data-in-color-mode='auto']
+  )::after {
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
+}
+
+.prc_IssueLabel_ZuoEW:where([data-selected='true'][data-in-color-mode='dark'])::after {
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: 0 0 0 2px hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+}
+
+/* Interactive hover states */
+.prc_IssueLabel_ZuoEW:where(
+    [data-cursor-is-interactive='true']:hover[data-in-color-mode*='light'],
+    [data-cursor-is-interactive='true']:hover[data-in-color-mode='auto']
+  ) {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
+    linear-gradient(
+      rgb(var(--label-r), var(--label-g), var(--label-b)),
+      rgb(var(--label-r), var(--label-g), var(--label-b))
+    );
+  box-shadow: var(--shadow-resting-medium);
+}
+
+.prc_IssueLabel_ZuoEW:where([data-cursor-is-interactive='true']:hover[data-in-color-mode='dark']) {
+  /* stylelint-disable-next-line primer/colors */
+  background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
+  box-shadow: var(--shadow-resting-medium);
+}
+
+/* Remove button styling */
 .prc_IssueLabel_ZuoEW:where([data-has-remove-button='true']) {
   padding-right: 0;
 }