openproject-primer_view_components 0.89.2 → 0.90.1

data/app/components/primer/alpha/action_bar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WACE,iBAAkB,CAClB,sBAAwB,CACxB,4CAA+C,CAC/C,kBAAmB,CACnB,WAAY,CACZ,aAAc,CACd,kBAAuB,CACvB,eAAgB,CAChB,wBACF,CAEA,0BACE,iCAAkC,CAClC,kBAAuB,CACvB,eACF,CAEA,gBACE,iBAAkB,CAClB,UACF,CAEA,qBACE,UACF,CAEA,kBACE,2CACF,CAEA,kBACE,2CACF,CAIA,mBACE,OAAQ,CACR,UAAW,CACX,UAAW,CACX,yCAA4C,CAE5C,iDAAkD,CAClD,kEAAmE,CACnE,0BACF,CAEA,qCAEE,gDACF,CAEA,qCAEE,gDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar  */\n.ActionBar {\n  position: relative;\n  display: flex !important;\n  min-width: calc(var(--control-medium-size) * 3);\n  align-items: center;\n  flex-grow: 1;\n  flex-shrink: 1;\n  box-sizing: content-box;\n  overflow: hidden;\n  justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n  height: var(--control-medium-size);\n  box-sizing: content-box;\n  overflow: hidden;\n}\n\n.ActionBar-item {\n  position: relative;\n  float: left;\n}\n\n.ActionBar-more-menu {\n  float: left;\n}\n\n.ActionBar--small {\n  min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n  min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n  top: 50%;\n  bottom: 50%;\n  float: left;\n  height: calc(var(--control-medium-size) / 2);\n  /* stylelint-disable-next-line primer/spacing */\n  margin: 0 var(--controlStack-medium-gap-condensed);\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  transform: translateY(-50%);\n}\n\n.ActionBar--small .ActionBar-divider {\n  /* stylelint-disable-next-line primer/spacing */\n  margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n  /* stylelint-disable-next-line primer/spacing */\n  margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}
+{"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WACE,iBAAkB,CAClB,sBAAwB,CACxB,4CAA+C,CAC/C,kBAAmB,CACnB,WAAY,CACZ,aAAc,CACd,kBAAuB,CACvB,eAAgB,CAChB,wBACF,CAEA,0BACE,iCAAkC,CAClC,kBAAuB,CACvB,eACF,CAEA,gBACE,iBAAkB,CAClB,UACF,CAEA,qBACE,UACF,CAEA,kBACE,2CACF,CAEA,kBACE,2CACF,CAIA,mBACE,OAAQ,CACR,UAAW,CACX,UAAW,CACX,yCAA4C,CAC5C,iDAAkD,CAClD,kEAAmE,CACnE,0BACF,CAEA,qCACE,gDACF,CAEA,qCACE,gDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar  */\n.ActionBar {\n  position: relative;\n  display: flex !important;\n  min-width: calc(var(--control-medium-size) * 3);\n  align-items: center;\n  flex-grow: 1;\n  flex-shrink: 1;\n  box-sizing: content-box;\n  overflow: hidden;\n  justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n  height: var(--control-medium-size);\n  box-sizing: content-box;\n  overflow: hidden;\n}\n\n.ActionBar-item {\n  position: relative;\n  float: left;\n}\n\n.ActionBar-more-menu {\n  float: left;\n}\n\n.ActionBar--small {\n  min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n  min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n  top: 50%;\n  bottom: 50%;\n  float: left;\n  height: calc(var(--control-medium-size) / 2);\n  margin: 0 var(--controlStack-medium-gap-condensed);\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  transform: translateY(-50%);\n}\n\n.ActionBar--small .ActionBar-divider {\n  margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n  margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}

data/app/components/primer/alpha/action_bar.pcss

@@ -41,18 +41,15 @@
   bottom: 50%;
   float: left;
   height: calc(var(--control-medium-size) / 2);
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-medium-gap-condensed);
   border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
   transform: translateY(-50%);
 }
 
 .ActionBar--small .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-small-gap-condensed);
 }
 
 .ActionBar--large .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-large-gap-condensed);
 }

data/app/components/primer/alpha/action_list.css.map

@@ -1 +1 @@
-{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"AAGA,MACE,mEACF,CAUA,qBACE,aACF,CAEA,kBACE,iCAAkC,CAClC,8BACF,CAGA,gBACE,eACF,CAEA,uDAEE,0BACF,CAKE,sDAME,UAIF,CAIE,mIAbA,iBAAkB,CAElB,kDAAqD,CACrD,aAAc,CACd,UAAW,CAEX,UAAW,CAEX,mCAeA,CAVA,6EAME,8BAIF,CAGA,mGACE,aACF,CAmBJ,seAEE,iBACF,CAIA,gBACE,iBAAkB,CAClB,eAAgB,CAChB,wDAAyD,CACzD,wCAsMF,CAlME,6CAEE,cACF,CAGA,qBAOI,gRAEE,iBACF,CAEJ,CAGA,mDACE,YACF,CAKE,8DACE,SAWF,CATE,qBACE,yEACE,yDACF,CACF,CAEA,0EACE,0DACF,CAQF,qBACE,0HACE,cAAe,CACf,yDAQF,CANE,yKAEE,2CAAkD,CAClD,+CAAkD,CAClD,8EACF,CAEJ,CAEA,2HACE,oDAaF,CAXE,2JAEE,2CAAkD,CAClD,+CAAkD,CAClD,8EACF,CAEA,gUAEE,iBACF,CAMJ,oCACE,0CAA2C,CAC3C,sDAkBF,CAhBE,qBACE,0CACE,yDACF,CACF,CAEA,sGAEE,iBACF,CAIA,0CCnMF,iBAAkB,CAClB,oBAAqB,CACrB,gCAAmB,CACnB,wBAAyB,CACzB,0BAA2B,CAC3B,UAAW,CACX,6CAA8C,CAC9C,wCD8LE,CAKF,0CAEE,uBA2BF,CAxBI,8FACE,4CACF,CAGF,uEACE,sDAiBF,CAfE,qBACE,6EACE,yDACF,CACF,CAEA,4KAEE,iBACF,CAGA,6ECnOJ,iBAAkB,CAClB,oBAAqB,CACrB,gCAAmB,CACnB,wBAAyB,CACzB,0BAA2B,CAC3B,UAAW,CACX,6CAA8C,CAC9C,wCD8NI,CASA,iKAEE,qCACF,CAEA,iIACE,oCACF,CAGF,qBACE,wFACE,kBAAmB,CACnB,wBACF,CACF,CAWA,2HACE,wCACF,CAEA,qBACE,6CACE,8CAOF,CALE,2HAGE,yCACF,CAEJ,CAGE,sEACE,+CAOF,CALE,oJAGE,yCACF,CAOR,mBACE,iBAAkB,CAClB,YAAa,CACb,UAAW,CAEX,mDAAoD,CAEpD,4DAA6D,CAC7D,iCAAkC,CAClC,eAAgB,CAChB,wBAAiB,CAAjB,gBAAiB,CACjB,wBAA6B,CAC7B,WAAY,CACZ,wCAAyC,CACzC,qCAAsC,CACtC,yBAA0B,CAC1B,uCAAwC,CACxC,8BAA+B,CAC/B,qFAAsF,CACtF,oFAAsF,CACtF,iBAqLF,CAlLE,qCAEE,sCACF,CAIA,yBACE,4BAAqB,CAArB,oBACF,CAIE,8FAEE,qCACF,CAEA,8DACE,oCACF,CAEA,qBACE,6CACE,kBAAmB,CACnB,wBACF,CACF,CASE,yDADF,wDAEI,wFAQJ,CALE,CAEA,gFACE,gCACF,CAKA,4GACE,gCACF,CAKA,4GACE,gCACF,CAKA,4GACE,gCACF,CAKF,oEACE,gCAAkC,CAClC,oBACF,CAEA,6DACE,WAAY,CACZ,gBAAiB,CACjB,kBAAmB,CACnB,SAAU,CACV,uBACF,CAGE,iGACE,4CACF,CAKF,qEACE,gCAAkC,CAClC,mBACF,CAEA,8DACE,QAAS,CACT,eAAgB,CAChB,iBAAkB,CAClB,SAAU,CACV,kDACF,CAGA,4EACE,sDAeF,CAbE,kGACE,4CACF,CAEA,sLAEE,iBACF,CAGA,kFCpbJ,iBAAkB,CAClB,oBAAqB,CACrB,gCAAmB,CACnB,wBAAyB,CACzB,0BAA2B,CAC3B,UAAW,CACX,6CAA8C,CAC9C,wCD+aI,CAUF,wGACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EAOF,CALE,oHACE,kBAAmB,CACnB,kCAAmC,CACnC,kEACF,CAIF,wHACE,kBACF,CAMA,0HACE,iBAAkB,CAClB,mCACF,CAKF,gDACE,kEACF,CAEA,iDACE,mEACF,CAGA,wBA/LF,mBAgMI,kEASJ,CARE,CAIE,8EACE,gBACF,CAMJ,gCACE,uBACF,CAEA,gCACE,uBACF,CAEA,iCACE,wBACF,CAEA,iCACE,wBACF,CAKA,oCACE,iBACF,CAIA,gCACE,eAAgB,CAChB,YAAa,CACb,qBAAsB,CACtB,sBAKF,CAHE,sDACE,4CACF,CAIF,wCACE,iBAAkB,CAClB,kBAAmB,CACnB,oBAAqB,CACrB,sBACF,CAGA,4BACE,qCAAsC,CACtC,0CAA2C,CAC3C,6CAA8C,CAC9C,0BACF,CAIA,8CAEE,YAAa,CACb,8BAA+B,CAC/B,0BAA2B,CAC3B,mBAAoB,CACpB,yBAA0B,CAC1B,kBACF,CAGA,sBACE,iBAAkB,CAClB,sCAAuC,CACvC,0CAA2C,CAC3C,8CAA+C,CAC/C,4BAA6B,CAC7B,eACF,CAEA,gCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAKA,kEACE,qCAAsC,CACtC,6CACF,CAIA,6BACE,YAAa,CACb,gBAAiB,CACjB,kBACF,CAEA,+BACE,wBAAyB,CACzB,2BACF,CAKE,oEACE,iBACF,CAIE,iIACE,kBACF,CAQF,uCACE,YAAa,CACb,qCAAsC,CACtC,4CAA6C,CAC7C,6CAA8C,CAC9C,0BAA2B,CAC3B,qBAAsB,CAEtB,oDAAqD,CACrD,gCACF,CAGA,iCACE,aAAc,CACd,8BAA+B,CAC/B,SAAU,CAEV,qEAAsE,CACtE,mCAAoC,CACpC,yCAA4C,CAC5C,eAAgB,CAEhB,mCAAoC,CACpC,QACF,CAEA,4DACE,qCAAsC,CACtC,4CAA6C,CAC7C,0BAA2B,CAC3B,qBACF,CAGF,mCAEE,qEAAsE,CACtE,mCAAoC,CACpC,yCAA4C,CAC5C,+BAAgC,CAChC,8GAAgH,CAChH,iHAWF,CARE,yCACE,yBAA0B,CAC1B,qBACF,CAEA,+CACE,oBACF","file":"action_list.css","sourcesContent":["/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable selector-max-specificity */\n/* stylelint-disable max-nesting-depth */\n:root {\n  --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n/* stylelint-disable-next-line selector-max-type */\naction-list {\n  display: block;\n}\n\n/* stylelint-disable-next-line selector-max-type */\nnav-list {\n  display: block;\n}\n\n.ActionListHeader {\n  margin-bottom: var(--base-size-16);\n  margin-left: var(--base-size-8);\n}\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset,\n.ActionListWrap--inset[popover] {\n  padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n  & .ActionListItem-label::before {\n    position: absolute;\n    /* stylelint-disable-next-line primer/spacing */\n    top: calc(-1 * var(--actionListContent-paddingBlock));\n    display: block;\n    width: 100%;\n    height: 1px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n  }\n\n  /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n  & .ActionListItem-descriptionWrap--inline {\n    &::before {\n      position: absolute;\n      /* stylelint-disable-next-line primer/spacing */\n      top: calc(-1 * var(--actionListContent-paddingBlock));\n      display: block;\n      width: 100%;\n      height: var(--borderWidth-thin);\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background: var(--borderColor-muted);\n    }\n\n    /* unset the default label pseudo */\n    & .ActionListItem-label::before {\n      content: unset;\n    }\n  }\n\n  /* hide divider if item is active */\n  & .ActionListItem--navActive {\n    & .ActionListItem-label::before,\n    & + .ActionListItem .ActionListItem-label::before {\n      visibility: hidden;\n    }\n  }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n  visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n  visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n  position: relative;\n  list-style: none;\n  background-color: var(--control-transparent-bgColor-rest);\n  border-radius: var(--borderRadius-medium);\n\n  /* state */\n\n  &:hover,\n  &:active {\n    cursor: pointer;\n  }\n\n  /* hide dividers  */\n  @media (hover: hover) {\n    &:hover {\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n\n      & .ActionListItem-descriptionWrap--inline::before,\n      & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Make sure that the first visible item isn't a divider */\n  &[hidden] + .ActionList-sectionDivider {\n    display: none;\n  }\n\n  /* collapse styles here */\n  &.ActionListItem--hasSubItem {\n    /* first child */\n    & > .ActionListContent {\n      z-index: 1;\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &:active {\n        background-color: var(--control-transparent-bgColor-active);\n      }\n    }\n  }\n\n  /* only hover li without list as children */\n  &:not(.ActionListItem--hasSubItem),\n   /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n  &.ActionListItem--hasSubItem > .ActionListContent {\n    @media (hover: hover) {\n      &:hover {\n        cursor: pointer;\n        background-color: var(--control-transparent-bgColor-hover);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--borderWidth-thin) transparent;\n          outline-offset: calc(-1 * var(--borderWidth-thin));\n          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--control-transparent-bgColor-active);\n\n      &:not(.ActionListItem--navActive) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--borderWidth-thin) transparent;\n        outline-offset: calc(-1 * var(--borderWidth-thin));\n        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal);\n    background: var(--control-transparent-bgColor-selected);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--control-transparent-bgColor-hover);\n      }\n    }\n\n    &::before,\n    & + .ActionListItem::before {\n      visibility: hidden;\n    }\n\n    /* blue accent line */\n\n    &::after {\n      @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    /* provides a visual indication of the current item for Windows high-contrast mode */\n    outline: 2px solid transparent;\n\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--control-transparent-bgColor-selected);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* disabled */\n\n  &.ActionListItem--disabled,\n  &[aria-disabled='true'] {\n    & .ActionListContent {\n      & .ActionListItem-label,\n      & .ActionListItem-description {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--control-fgColor-disabled);\n      }\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* variants */\n\n  /* danger */\n  &.ActionListItem--danger {\n    & .ActionListItem-label {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--control-danger-bgColor-hover);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--control-danger-bgColor-active);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n  }\n}\n\n/* button or a href */\n.ActionListContent {\n  position: relative;\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-block: var(--actionListContent-paddingBlock);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--control-medium-paddingInline-condensed);\n  color: var(--control-fgColor-rest);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--borderRadius-medium);\n  transition: background 33.333ms linear;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  grid-template-rows: min-content;\n  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-medium-gap);\n  }\n\n  /* state */\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  /* disabled */\n  &[aria-disabled='true'] {\n    & .ActionListItem-label,\n    & .ActionListItem-description {\n      color: var(--control-fgColor-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--control-fgColor-disabled);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* collapsible item [aria-expanded] */\n\n  /* nesting (single level)\n   target items inside expanded subgroups */\n  &[aria-expanded] {\n    & + .ActionList--subGroup {\n      @media screen and (prefers-reduced-motion: no-preference) {\n        transition:\n          opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),\n          transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\n      & .ActionListContent {\n        padding-left: var(--base-size-24);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40);\n      }\n    }\n  }\n\n  &[aria-expanded='true'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(-1);\n    }\n\n    & + .ActionList--subGroup {\n      height: auto;\n      overflow: visible;\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &.ActionListContent--hasActiveSubItem {\n      & > .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n  }\n\n  &[aria-expanded='false'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(1);\n    }\n\n    & + .ActionList--subGroup {\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--base-size-16)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--control-transparent-bgColor-selected);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /*\n  * checkbox item [aria-checked]\n  * listbox [aria-selected]\n  */\n  &[aria-checked='true'],\n  &[aria-selected='true'] {\n    & .FormControl-checkbox {\n      background: var(--control-checked-bgColor-rest);\n      border-color: var(--control-checked-borderColor-rest);\n      transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n      &::before {\n        visibility: visible;\n        transition: visibility 0s linear 0s;\n        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n      }\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: visible;\n    }\n  }\n\n  &[aria-checked='false'],\n  &[aria-selected='false'] {\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: hidden;\n      transition: visibility 0s linear 200ms;\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--blockDescription {\n    /* if leading/trailing visual, align with first line of content */\n    & .ActionListItem-visual {\n      place-self: start;\n    }\n  }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n  grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n  grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n  grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n  grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\n/* stylelint-disable-next-line selector-max-type */\n.ActionListItem-visual--leading svg {\n  fill: currentcolor;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n  grid-area: label;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold);\n  }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n  position: relative;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--base-size-8);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-small);\n  color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n  display: flex;\n  min-height: var(--base-size-20);\n  color: var(--fgColor-muted);\n  pointer-events: none;\n  fill: var(--fgColor-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium);\n  color: var(--fgColor-default);\n  grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n  font-size: var(--text-body-size-small);\n  line-height: var(--text-body-lineHeight-small);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n.ActionListItem-trailingAction {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n  & .ActionListItem-trailingAction {\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    & .ActionListItem-trailingAction {\n      visibility: visible;\n    }\n  }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n  /* with children */\n  &:not(:empty) {\n    display: flex;\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    line-height: var(--text-body-lineHeight-small);\n    color: var(--fgColor-muted);\n    flex-direction: column;\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: var(--actionListContent-paddingBlock);\n    padding-block: var(--base-size-8);\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--borderWidth-thin);\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    margin-inline: calc(-1 * var(--base-size-8));\n    list-style: none;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n    align-self: flex-start;\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n  margin-block-end: var(--base-size-8);\n  margin-inline: calc(-1 * var(--base-size-8));\n  background: var(--bgColor-muted);\n  border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8);\n    box-sizing: border-box;\n  }\n\n  &:first-child {\n    margin-block-start: 0;\n  }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4);\n  height: var(--base-size-24);\n  content: '';\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}
+{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":["/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable selector-max-specificity */\n/* stylelint-disable max-nesting-depth */\n:root {\n  --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n/* stylelint-disable-next-line selector-max-type */\naction-list {\n  display: block;\n}\n\n/* stylelint-disable-next-line selector-max-type */\nnav-list {\n  display: block;\n}\n\n.ActionListHeader {\n  margin-bottom: var(--base-size-16);\n  margin-left: var(--base-size-8);\n}\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset,\n.ActionListWrap--inset[popover] {\n  padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n  & .ActionListItem-label::before {\n    position: absolute;\n    /* stylelint-disable-next-line primer/spacing */\n    top: calc(-1 * var(--actionListContent-paddingBlock));\n    display: block;\n    width: 100%;\n    height: 1px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n  }\n\n  /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n  & .ActionListItem-descriptionWrap--inline {\n    &::before {\n      position: absolute;\n      /* stylelint-disable-next-line primer/spacing */\n      top: calc(-1 * var(--actionListContent-paddingBlock));\n      display: block;\n      width: 100%;\n      height: var(--borderWidth-thin);\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background: var(--borderColor-muted);\n    }\n\n    /* unset the default label pseudo */\n    & .ActionListItem-label::before {\n      content: unset;\n    }\n  }\n\n  /* hide divider if item is active */\n  & .ActionListItem--navActive {\n    & .ActionListItem-label::before,\n    & + .ActionListItem .ActionListItem-label::before {\n      visibility: hidden;\n    }\n  }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n  visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n  visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n  position: relative;\n  list-style: none;\n  background-color: var(--control-transparent-bgColor-rest);\n  border-radius: var(--borderRadius-medium);\n\n  /* state */\n\n  &:hover,\n  &:active {\n    cursor: pointer;\n  }\n\n  /* hide dividers  */\n  @media (hover: hover) {\n    &:hover {\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n\n      & .ActionListItem-descriptionWrap--inline::before,\n      & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Make sure that the first visible item isn't a divider */\n  &[hidden] + .ActionList-sectionDivider {\n    display: none;\n  }\n\n  /* collapse styles here */\n  &.ActionListItem--hasSubItem {\n    /* first child */\n    & > .ActionListContent {\n      z-index: 1;\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &:active {\n        background-color: var(--control-transparent-bgColor-active);\n      }\n    }\n  }\n\n  /* only hover li without list as children */\n  &:not(.ActionListItem--hasSubItem),\n   /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n  &.ActionListItem--hasSubItem > .ActionListContent {\n    @media (hover: hover) {\n      &:hover {\n        cursor: pointer;\n        background-color: var(--control-transparent-bgColor-hover);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--borderWidth-thin) transparent;\n          outline-offset: calc(-1 * var(--borderWidth-thin));\n          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--control-transparent-bgColor-active);\n\n      &:not(.ActionListItem--navActive) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--borderWidth-thin) transparent;\n        outline-offset: calc(-1 * var(--borderWidth-thin));\n        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal);\n    background: var(--control-transparent-bgColor-selected);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--control-transparent-bgColor-hover);\n      }\n    }\n\n    &::before,\n    & + .ActionListItem::before {\n      visibility: hidden;\n    }\n\n    /* blue accent line */\n\n    &::after {\n      @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    /* provides a visual indication of the current item for Windows high-contrast mode */\n    outline: 2px solid transparent;\n\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--control-transparent-bgColor-selected);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* disabled */\n\n  &.ActionListItem--disabled,\n  &[aria-disabled='true'] {\n    & .ActionListContent {\n      & .ActionListItem-label,\n      & .ActionListItem-description {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--control-fgColor-disabled);\n      }\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* variants */\n\n  /* danger */\n  &.ActionListItem--danger {\n    & .ActionListItem-label {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--control-danger-bgColor-hover);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--control-danger-bgColor-active);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n  }\n}\n\n/* button or a href */\n.ActionListContent {\n  position: relative;\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-block: var(--actionListContent-paddingBlock);\n  padding-inline: var(--control-medium-paddingInline-condensed);\n  color: var(--control-fgColor-rest);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--borderRadius-medium);\n  transition: background 33.333ms linear;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  grid-template-rows: min-content;\n  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n\n  /* state */\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  /* disabled */\n  &[aria-disabled='true'] {\n    & .ActionListItem-label,\n    & .ActionListItem-description {\n      color: var(--control-fgColor-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--control-fgColor-disabled);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* collapsible item [aria-expanded] */\n\n  /* nesting (single level)\n   target items inside expanded subgroups */\n  &[aria-expanded] {\n    & + .ActionList--subGroup {\n      @media screen and (prefers-reduced-motion: no-preference) {\n        transition:\n          opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),\n          transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\n      & .ActionListContent {\n        padding-left: var(--base-size-24);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40);\n      }\n    }\n  }\n\n  &[aria-expanded='true'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(-1);\n    }\n\n    & + .ActionList--subGroup {\n      height: auto;\n      overflow: visible;\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &.ActionListContent--hasActiveSubItem {\n      & > .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n  }\n\n  &[aria-expanded='false'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(1);\n    }\n\n    & + .ActionList--subGroup {\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--base-size-16)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--control-transparent-bgColor-selected);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /*\n  * checkbox item [aria-checked]\n  * listbox [aria-selected]\n  */\n  &[aria-checked='true'],\n  &[aria-selected='true'] {\n    & .FormControl-checkbox {\n      background: var(--control-checked-bgColor-rest);\n      border-color: var(--control-checked-borderColor-rest);\n      transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n      &::before {\n        visibility: visible;\n        transition: visibility 0s linear 0s;\n        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n      }\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: visible;\n    }\n  }\n\n  &[aria-checked='false'],\n  &[aria-selected='false'] {\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: hidden;\n      transition: visibility 0s linear 200ms;\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--blockDescription {\n    /* if leading/trailing visual, align with first line of content */\n    & .ActionListItem-visual {\n      place-self: start;\n    }\n  }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n  grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n  grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n  grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n  grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\n/* stylelint-disable-next-line selector-max-type */\n.ActionListItem-visual--leading svg {\n  fill: currentcolor;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n  grid-area: label;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold);\n  }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n  position: relative;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--base-size-8);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-small);\n  color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n  display: flex;\n  min-height: var(--base-size-20);\n  color: var(--fgColor-muted);\n  pointer-events: none;\n  fill: var(--fgColor-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium);\n  color: var(--fgColor-default);\n  grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n  font-size: var(--text-body-size-small);\n  line-height: var(--text-body-lineHeight-small);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n.ActionListItem-trailingAction {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n  & .ActionListItem-trailingAction {\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    & .ActionListItem-trailingAction {\n      visibility: visible;\n    }\n  }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n  /* with children */\n  &:not(:empty) {\n    display: flex;\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    line-height: var(--text-body-lineHeight-small);\n    color: var(--fgColor-muted);\n    flex-direction: column;\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: var(--actionListContent-paddingBlock);\n    padding-block: var(--base-size-8);\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--borderWidth-thin);\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    margin-inline: calc(-1 * var(--base-size-8));\n    list-style: none;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n    align-self: flex-start;\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n  margin-block-end: var(--base-size-8);\n  margin-inline: calc(-1 * var(--base-size-8));\n  background: var(--bgColor-muted);\n  border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8);\n    box-sizing: border-box;\n  }\n\n  &:first-child {\n    margin-block-start: 0;\n  }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4);\n  height: var(--base-size-24);\n  content: '';\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}

data/app/components/primer/alpha/action_list.pcss

@@ -301,7 +301,6 @@ nav-list {
   width: 100%;
   /* stylelint-disable-next-line primer/spacing */
   padding-block: var(--actionListContent-paddingBlock);
-  /* stylelint-disable-next-line primer/spacing */
   padding-inline: var(--control-medium-paddingInline-condensed);
   color: var(--control-fgColor-rest);
   text-align: left;
@@ -319,7 +318,6 @@ nav-list {
 
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
   & > :not(:last-child) {
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
   }
 

data/app/components/primer/alpha/auto_complete.css

@@ -1 +1 @@
-.autocomplete-label-stacked{display:block;margin-bottom:var(--base-size-6)}.autocomplete-label-inline{display:inline;margin-right:var(--base-size-6)}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:var(--base-size-6)}}.autocomplete-body{position:relative;display:inline}.autocomplete-embedded-icon-wrap{display:inline-flex;padding:var(--base-size-4) var(--base-size-8);align-items:center}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.autocomplete-embedded-icon-wrap .form-control{padding:0;margin-left:var(--base-size-8);border:none;box-shadow:none}:is(.autocomplete-embedded-icon-wrap .form-control):focus,:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible{box-shadow:none}.autocomplete-results{position:absolute;left:0;z-index:99;width:max-content;min-width:100%;max-height:20em;overflow-y:auto;font-size:var(--text-codeBlock-size);list-style:none;background:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-resting-medium)}.autocomplete-item{display:block;width:100%;padding:var(--base-size-4) var(--base-size-8);overflow:hidden;font-weight:var(--base-text-weight-semibold);color:var(--fgColor-default);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:var(--overlay-bgColor);border:0}.autocomplete-item,.autocomplete-item:hover{-webkit-text-decoration:none;text-decoration:none}.autocomplete-item:hover{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-accent-emphasis)}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none;background-color:var(--bgColor-accent-emphasis)}:is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *{color:inherit!important}
+.autocomplete-label-stacked{display:block;margin-bottom:var(--base-size-6)}.autocomplete-label-inline{display:inline;margin-right:var(--base-size-6)}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:var(--base-size-6)}}.autocomplete-body{position:relative;display:inline}.autocomplete-embedded-icon-wrap{display:inline-flex;padding:var(--base-size-4) var(--base-size-8);align-items:center}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.autocomplete-embedded-icon-wrap .form-control{padding:0;margin-left:var(--base-size-8);border:none;box-shadow:none}:is(.autocomplete-embedded-icon-wrap .form-control):focus,:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible{box-shadow:none}.autocomplete-results{position:absolute;left:0;z-index:99;width:max-content;min-width:100%;max-height:20em;overflow-y:auto;font-size:var(--text-codeBlock-size);list-style:none;background:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-resting-medium)}.autocomplete-item{display:block;width:100%;padding:var(--base-size-4) var(--base-size-8);overflow:hidden;font-weight:var(--base-text-weight-semibold);color:var(--fgColor-default);text-align:left;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:var(--overlay-bgColor);border:0}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item:hover,.autocomplete-item[aria-selected=true]{color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none;background-color:var(--bgColor-accent-emphasis)}

data/app/components/primer/alpha/auto_complete.css.json

@@ -11,11 +11,9 @@
     ":is(.autocomplete-embedded-icon-wrap .form-control):focus-visible",
     ".autocomplete-results",
     ".autocomplete-item",
-    ".autocomplete-item:hover",
-    ".autocomplete-item:hover *",
     ".autocomplete-item.navigation-focus",
     ".autocomplete-item.selected",
-    ".autocomplete-item[aria-selected=true]",
-    ":is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *"
+    ".autocomplete-item:hover",
+    ".autocomplete-item[aria-selected=true]"
   ]
 }

data/app/components/primer/alpha/auto_complete.css.map

@@ -1 +1 @@
-{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,gCACF,CAGA,2BACE,cAAe,CACf,+BACF,CAGA,4BACE,2BACE,aAAc,CACd,gCACF,CACF,CAGA,mBACE,iBAAkB,CAClB,cACF,CAGA,iCACE,mBAAoB,CACpB,6CAA8C,CAC9C,kBAsBF,CApBE,8CCnCA,sCAAuC,CACvC,YAAa,CACb,oDDqCA,CAEA,+CACE,SAAU,CACV,8BAA+B,CAC/B,WAAY,CACZ,eASF,CAHE,4HACE,eACF,CAKJ,sBACE,iBAAkB,CAClB,MAAO,CACP,UAAW,CACX,iBAAkB,CAClB,cAAe,CACf,eAAgB,CAChB,eAAgB,CAChB,oCAAqC,CACrC,eAAgB,CAChB,iCAAkC,CAClC,+DAAgE,CAChE,wCAAyC,CACzC,uCACF,CAKA,mBACE,aAAc,CACd,UAAW,CACX,6CAA8C,CAC9C,eAAgB,CAChB,4CAA6C,CAC7C,4BAA6B,CAC7B,eAAgB,CAEhB,sBAAuB,CACvB,kBAAmB,CACnB,cAAe,CACf,uCAAwC,CACxC,QAyBF,CAvBE,4CAPA,4BAAqB,CAArB,oBAgBA,CATA,yBACE,+BAAgC,CAEhC,+CAMF,CAHE,2BACE,uBACF,CAGF,uGAGE,+BAAgC,CAChC,4BAAqB,CAArB,oBAAqB,CACrB,+CAMF,CAHE,8GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: var(--base-size-6);\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: var(--base-size-6);\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: var(--base-size-6);\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: var(--base-size-4) var(--base-size-8);\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--borderColor-accent-emphasis);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: var(--base-size-8);\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: var(--text-codeBlock-size);\n  list-style: none;\n  background: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: var(--base-size-4) var(--base-size-8);\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n  border-color: var(--focus-outlineColor);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
+{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,gCACF,CAGA,2BACE,cAAe,CACf,+BACF,CAGA,4BACE,2BACE,aAAc,CACd,gCACF,CACF,CAGA,mBACE,iBAAkB,CAClB,cACF,CAGA,iCACE,mBAAoB,CACpB,6CAA8C,CAC9C,kBAsBF,CApBE,8CCnCA,sCAAuC,CACvC,YAAa,CACb,oDDqCA,CAEA,+CACE,SAAU,CACV,8BAA+B,CAC/B,WAAY,CACZ,eASF,CAHE,4HACE,eACF,CAKJ,sBACE,iBAAkB,CAClB,MAAO,CACP,UAAW,CACX,iBAAkB,CAClB,cAAe,CACf,eAAgB,CAChB,eAAgB,CAChB,oCAAqC,CACrC,eAAgB,CAChB,iCAAkC,CAClC,+DAAgE,CAChE,wCAAyC,CACzC,uCACF,CAKA,mBACE,aAAc,CACd,UAAW,CACX,6CAA8C,CAC9C,eAAgB,CAChB,4CAA6C,CAC7C,4BAA6B,CAC7B,eAAgB,CAChB,4BAAqB,CAArB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CACnB,cAAe,CACf,uCAAwC,CACxC,QAkBF,CAPE,gIALE,+BAAgC,CAChC,4BAAqB,CAArB,oBAAqB,CACrB,+CASF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: var(--base-size-6);\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: var(--base-size-6);\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: var(--base-size-6);\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: var(--base-size-4) var(--base-size-8);\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--borderColor-accent-emphasis);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: var(--base-size-8);\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: var(--text-codeBlock-size);\n  list-style: none;\n  background: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: var(--base-size-4) var(--base-size-8);\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n\n  /* `color` is inherited, so setting it on the item recolors descendants\n  ** without a universal `… *` descendant rule (which forces a slow\n  ** style-recalc match attempt against every element on the page). */\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n  border-color: var(--focus-outlineColor);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}

data/app/components/primer/alpha/auto_complete.pcss

@@ -92,15 +92,13 @@
   background-color: var(--overlay-bgColor);
   border: 0;
 
+  /* `color` is inherited, so setting it on the item recolors descendants
+  ** without a universal `… *` descendant rule (which forces a slow
+  ** style-recalc match attempt against every element on the page). */
   &:hover {
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
 
   &.selected,
@@ -109,10 +107,5 @@
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
 }

data/app/components/primer/alpha/banner.css.map

@@ -1 +1 @@
-{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QACE,iBAAkB,CAClB,YAAa,CACb,0BAA2B,CAC3B,4BAA6B,CAC7B,yFAA2F,CAC3F,oEAAqE,CACrE,wCAAyC,CACzC,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BA8HF,CA3HE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAsHJ,CApHI,wBACE,gDACF,CACF,CAIA,uBACE,YAAa,CACb,6CAA8C,CAC9C,gBAAiB,CACjB,gBASF,CAPE,qCACE,uCACF,CAEA,8BACE,iBACF,CAGF,wBACE,6CAA8C,CAC9C,iBAAkB,CAClB,iBAWF,CARE,0CACE,eACF,CAEA,4DACE,eAAgB,CAChB,4CACF,CAGF,wBACE,iBAKF,CAHE,wCACE,iBACF,CAIF,sBACE,eAAgB,CAEhB,oDACF,CAEA,gCACE,2BACF,CAEA,wBACE,4BAA6B,CAC7B,+FAAiG,CACjG,+CAKF,CAHE,gDACE,8BACF,CAGF,sBACE,4BAA6B,CAC7B,yFAA2F,CAC3F,4CAKF,CAHE,8CACE,2BACF,CAGF,wBACE,4BAA6B,CAC7B,2FAA6F,CAC7F,6CAKF,CAHE,gDACE,4BACF,CAGF,uBACE,4BAA6B,CAC7B,qFAAuF,CACvF,0CAKF,CAHE,+CACE,yBACF,CAKF,qBAEE,2CAA8C,CAC9C,cAAe,CACf,aAAc,CACd,eACF,CAEA,4BACE,gCAEE,2CAA8C,CAC9C,cAAe,CACf,aAAc,CACd,eACF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n  border-radius: var(--borderRadius-medium);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variation */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n      margin: var(--base-size-8) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: var(--base-size-6) var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: var(--base-size-6) var(--base-size-8);\n    grid-area: message;\n    align-self: center;\n\n    /* stylelint-disable-next-line selector-max-type */\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--fgColor-accent);\n  }\n\n  &.Banner--warning {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n    border-color: var(--borderColor-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-attention);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n    border-color: var(--borderColor-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-danger);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n    border-color: var(--borderColor-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-success);\n    }\n  }\n\n  &.Banner--upsell {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-done-muted), var(--bgColor-done-muted));\n    border-color: var(--borderColor-done-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-done);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc(var(--borderWidth-thin) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QACE,iBAAkB,CAClB,YAAa,CACb,0BAA2B,CAC3B,4BAA6B,CAC7B,yFAA2F,CAC3F,oEAAqE,CACrE,wCAAyC,CACzC,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BA6HF,CA1HE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAqHJ,CAnHI,wBACE,gDACF,CACF,CAIA,uBACE,YAAa,CACb,6CAA8C,CAC9C,gBAAiB,CACjB,gBASF,CAPE,qCACE,uCACF,CAEA,8BACE,iBACF,CAGF,wBACE,6CAA8C,CAC9C,iBAAkB,CAClB,iBAWF,CARE,0CACE,eACF,CAEA,4DACE,eAAgB,CAChB,4CACF,CAGF,wBACE,iBAKF,CAHE,wCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,oDACF,CAEA,gCACE,2BACF,CAEA,wBACE,4BAA6B,CAC7B,+FAAiG,CACjG,+CAKF,CAHE,gDACE,8BACF,CAGF,sBACE,4BAA6B,CAC7B,yFAA2F,CAC3F,4CAKF,CAHE,8CACE,2BACF,CAGF,wBACE,4BAA6B,CAC7B,2FAA6F,CAC7F,6CAKF,CAHE,gDACE,4BACF,CAGF,uBACE,4BAA6B,CAC7B,qFAAuF,CACvF,0CAKF,CAHE,+CACE,yBACF,CAKF,qBAEE,2CAA8C,CAC9C,cAAe,CACf,aAAc,CACd,eACF,CAEA,4BACE,gCAEE,2CAA8C,CAC9C,cAAe,CACf,aAAc,CACd,eACF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n  border-radius: var(--borderRadius-medium);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variation */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n      margin: var(--base-size-8) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: var(--base-size-6) var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: var(--base-size-6) var(--base-size-8);\n    grid-area: message;\n    align-self: center;\n\n    /* stylelint-disable-next-line selector-max-type */\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--fgColor-accent);\n  }\n\n  &.Banner--warning {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n    border-color: var(--borderColor-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-attention);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n    border-color: var(--borderColor-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-danger);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n    border-color: var(--borderColor-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-success);\n    }\n  }\n\n  &.Banner--upsell {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-done-muted), var(--bgColor-done-muted));\n    border-color: var(--borderColor-done-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-done);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc(var(--borderWidth-thin) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}

data/app/components/primer/alpha/banner.pcss

@@ -70,7 +70,6 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--controlStack-medium-gap-condensed);
   }
 

data/app/components/primer/alpha/button_marketing.css.map

@@ -1 +1 @@
-{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UACE,iBAAkB,CAClB,SAAU,CACV,oBAAqB,CAGrB,2BAA6B,CAG7B,cAAe,CACf,4CAA6C,CAE7C,aAAc,CAEd,4BAA6B,CAC7B,iBAAkB,CAClB,kBAAmB,CACnB,qBAAsB,CACtB,wBAAiB,CAAjB,gBAAiB,CAEjB,4FACqC,CACrC,QAAS,CAGT,qBAAuB,CACvB,0CAA8C,CAC9C,yBA8DF,CA5DE,iBACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,UAAW,CACX,UAAW,CAGX,4DAAyG,CACzG,qBAAsB,CACtB,SAAU,CACV,sBAAwB,CACxB,4BACF,CAEA,gBACE,4BAAqB,CAArB,oBAAqB,CAErB,uDACF,CAME,oFACE,SACF,CAIF,gBC7DA,2CAAgC,CAChC,kBAA8B,CAC9B,eDmEA,CAJE,oCACE,uBAA8B,CAC9B,eACF,CAIF,wBCxEA,2CAAgC,CAChC,kBAA8B,CAC9B,eDwEA,CAGE,wBACE,oBACF,CAGF,uCAEE,mBAAoB,CACpB,cAAe,CACf,UACF,CAGF,gBACE,sCAAwC,CACxC,yBAA2B,CAE3B,+CAoBF,CAlBE,uBACE,YACF,CAEA,sBAEE,6DACF,CAEA,uBAEE,2DACF,CAEA,yBAEE,2DACF,CAGF,iBACE,sCAAwC,CAExC,yBAUF,CARE,yCAHA,yBAKA,CAEA,uBAEE,6DACF,CAGF,iBAEE,UAAW,CAGX,wEAsBF,CApBE,wBAEE,gEACF,CAGA,uBChJA,2CAAgC,CAChC,kBAA8B,CAC9B,eDsJA,CAJE,2CACE,uBAA8B,CAC9B,eACF,CAIF,+BC3JA,2CAAgC,CAChC,kBAA8B,CAC9B,eD2JA,CAKF,gBAEE,6BACF,CAEA,gBAEE,gCAAkC,CAGlC,iBACF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--bgColor-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  /* stylelint-disable-next-line primer/colors */\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--fgColor-default) !important;\n  background: none !important;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--fgColor-default) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--fgColor-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n  /* stylelint-disable-next-line primer/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line primer/colors */\n  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}
+{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UACE,iBAAkB,CAClB,SAAU,CACV,oBAAqB,CAGrB,2BAA6B,CAG7B,cAAe,CACf,4CAA6C,CAE7C,aAAc,CAEd,4BAA6B,CAC7B,iBAAkB,CAClB,kBAAmB,CACnB,qBAAsB,CACtB,wBAAiB,CAAjB,gBAAiB,CAEjB,4FACqC,CACrC,QAAS,CAGT,qBAAuB,CACvB,0CAA8C,CAC9C,yBA8DF,CA5DE,iBACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,UAAW,CACX,UAAW,CAGX,4DAAuG,CACvG,qBAAsB,CACtB,SAAU,CACV,sBAAwB,CACxB,4BACF,CAEA,gBACE,4BAAqB,CAArB,oBAAqB,CAErB,uDACF,CAME,oFACE,SACF,CAIF,gBC7DA,2CAAgC,CAChC,kBAA8B,CAC9B,eDmEA,CAJE,oCACE,uBAA8B,CAC9B,eACF,CAIF,wBCxEA,2CAAgC,CAChC,kBAA8B,CAC9B,eDwEA,CAGE,wBACE,oBACF,CAGF,uCAEE,mBAAoB,CACpB,cAAe,CACf,UACF,CAGF,gBACE,sCAAwC,CACxC,yBAA2B,CAE3B,+CAoBF,CAlBE,uBACE,YACF,CAEA,sBAEE,6DACF,CAEA,uBAEE,2DACF,CAEA,yBAEE,2DACF,CAGF,iBACE,sCAAwC,CAExC,yBAUF,CARE,yCAHA,yBAKA,CAEA,uBAEE,6DACF,CAGF,iBAEE,UAAW,CAGX,wEAsBF,CApBE,wBAEE,gEACF,CAGA,uBChJA,2CAAgC,CAChC,kBAA8B,CAC9B,eDsJA,CAJE,2CACE,uBAA8B,CAC9B,eACF,CAIF,+BC3JA,2CAAgC,CAChC,kBAA8B,CAC9B,eD2JA,CAKF,gBAEE,6BACF,CAEA,gBAEE,gCAAkC,CAGlC,iBACF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--bgColor-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  /* stylelint-disable-next-line primer/colors */\n  background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--fgColor-default) !important;\n  background: none !important;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--fgColor-default) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--fgColor-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n  /* stylelint-disable-next-line primer/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line primer/colors */\n  background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}

data/app/components/primer/alpha/button_marketing.pcss

@@ -18,7 +18,7 @@
   vertical-align: middle;
   user-select: none;
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
 
@@ -37,7 +37,7 @@
     content: '';
 
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%) !important;
     border-radius: inherit;
     opacity: 0;
     transition: opacity 0.2s;
@@ -135,11 +135,11 @@
   color: #fff;
 
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
+  background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
 
   &::before {
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%) !important;
   }
 
   /* fallback :focus state */

data/app/components/primer/alpha/layout.css

@@ -1 +1 @@
-.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));grid-gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{display:block;grid-column:2;width:1px;margin-right:-1px;background:var(--borderColor-default)}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main :is(.Layout-main-centered-lg,.Layout-main-centered-md,.Layout-main-centered-xl){margin-right:auto;margin-left:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>:is(.container-lg,.container-md,.container-xl){margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
+.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{display:block;grid-column:2;width:1px;margin-right:-1px;background:var(--borderColor-default)}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main :is(.Layout-main-centered-lg,.Layout-main-centered-md,.Layout-main-centered-xl){margin-right:auto;margin-left:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>:is(.container-lg,.container-md,.container-xl){margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}

data/app/components/primer/alpha/layout.css.map

@@ -1 +1 @@
-{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,oBAgJF,CA9IE,wCANF,QA7EE,kBAAmB,CACnB,mCAgOF,CA9NE,0DAGE,oBAAsB,CACtB,uBACF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCACE,UAAW,CACX,UAcF,CAZE,4EACE,YACF,CAEA,6EACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,mFAGE,oBAAsB,CACtB,uBACF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEACE,UAAW,CACX,UAcF,CAZE,qGACE,YACF,CAEA,sGACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,mFAGE,oBAAsB,CACtB,uBACF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEACE,UAAW,CACX,UAcF,CAZE,qGACE,YACF,CAEA,sGACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QAwBE,qBAAsB,CACtB,sGAAwG,CACxG,6BA0HF,CAxHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAyGJ,CAxGE,CAEA,4BACE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAjEF,QAkEI,4BAkFJ,CAjFE,CAEA,yBArEF,QAsEI,4BA8EJ,CA7EE,CAEA,0BAzEF,QA0EI,4BA0EJ,CAzEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCACE,aAAc,CACd,aAAc,CACd,SAAU,CAEV,iBAAkB,CAElB,qCACF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,6FAGE,iBAAkB,CAClB,gBAOF,CALE,sKAGE,aACF,CAGF,sCACE,6FACF,CAEA,sCACE,4FACF,CAEA,sCACE,6FACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--bgColor-inset);\n      border-color: var(--borderColor-default);\n      border-style: solid;\n      border-width: var(--borderWidth-thin) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    --Layout-gutter: 0px;\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      /* stylelint-disable-next-line primer/spacing */\n      margin-right: -1px;\n      /* stylelint-disable-next-line primer/colors */\n      background: var(--borderColor-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}
+{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAkFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,oBAgJF,CA9IE,wCANF,QA7EE,kBAAmB,CACnB,mCAgOF,CA9NE,0DAGE,oBAAsB,CACtB,uBACF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCACE,UAAW,CACX,UAcF,CAZE,4EACE,YACF,CAEA,6EACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,mFAGE,oBAAsB,CACtB,uBACF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEACE,UAAW,CACX,UAcF,CAZE,qGACE,YACF,CAEA,sGACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,mFAGE,oBAAsB,CACtB,uBACF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEACE,UAAW,CACX,UAcF,CAZE,qGACE,YACF,CAEA,sGACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QAwBE,qBAAsB,CACtB,sGAAwG,CACxG,wBA0HF,CAxHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAyGJ,CAxGE,CAEA,4BACE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAjEF,QAkEI,4BAkFJ,CAjFE,CAEA,yBArEF,QAsEI,4BA8EJ,CA7EE,CAEA,0BAzEF,QA0EI,4BA0EJ,CAzEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCACE,aAAc,CACd,aAAc,CACd,SAAU,CAEV,iBAAkB,CAElB,qCACF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,6FAGE,iBAAkB,CAClB,gBAOF,CALE,sKAGE,aACF,CAGF,sCACE,6FACF,CAEA,sCACE,4FACF,CAEA,sCACE,6FACF","file":"layout.css","sourcesContent":["/* Layout */\n\n/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--bgColor-inset);\n      border-color: var(--borderColor-default);\n      border-style: solid;\n      border-width: var(--borderWidth-thin) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    --Layout-gutter: 0px;\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      /* stylelint-disable-next-line primer/spacing */\n      margin-right: -1px;\n      /* stylelint-disable-next-line primer/colors */\n      background: var(--borderColor-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}

data/app/components/primer/alpha/layout.pcss

@@ -1,5 +1,7 @@
 /* Layout */
 
+/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */
+
 @define-mixin flow-as-row {
   grid-auto-flow: row;
   grid-template-columns: 1fr !important;
@@ -104,7 +106,7 @@
 
   grid-auto-flow: column;
   grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
-  grid-gap: var(--Layout-gutter);
+  gap: var(--Layout-gutter);
 
   & .Layout-sidebar {
     grid-column: 1;

data/app/components/primer/alpha/menu.css.map

@@ -1 +1 @@
-{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAEE,qCAAsC,CACtC,eAAgB,CAChB,uCAAwC,CACxC,+DAAgE,CAChE,wCACF,CAEA,WACE,iBAAkB,CAClB,aAAc,CAEd,kGAAmG,CACnG,4BAA6B,CAC7B,sEA+EF,CA7EE,uBACE,YAAa,CAEb,kDAKF,CAHE,qDAHA,iDAKA,CAGF,sBACE,eAAgB,CAChB,qDAMF,CAHE,mDAFA,oDAIA,CAGF,iBACE,4BAAqB,CAArB,oBAAqB,CACrB,6CACF,CAEA,kBACE,qCACF,CAEA,sGAGE,cAAe,CACf,2CAYF,CAVE,kHACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,SAAU,CACV,UAAW,CAEX,uDACF,CAGF,oBACE,UAAW,CAEX,sCAAuC,CACvC,0BAA2B,CAC3B,iBACF,CAEA,oBACE,WAAY,CAEZ,oCACF,CAEA,yBACE,WAAY,CACZ,8BACF,CAEA,mBACE,UAAW,CAEX,qCACF,CAGE,0BACE,2BACF,CAIJ,cACE,aAAc,CAEd,kGAAmG,CACnG,YAAa,CACb,eAAgB,CAChB,iBAAkB,CAClB,4CAA6C,CAC7C,4BAA6B,CAC7B,sEAgBF,CAdE,oBACE,4BAAqB,CAArB,oBACF,CAEA,0BACE,iDAAkD,CAClD,kDACF,CAEA,yBACE,eAAgB,CAChB,qDAAsD,CACtD,oDACF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  list-style: none;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-top-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--bgColor-neutral-muted);\n  }\n\n  &:active {\n    background-color: var(--bgColor-muted);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--menu-bgColor-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--underlineNav-borderColor-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-medium-gap);\n    color: var(--fgColor-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--control-small-gap);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--fgColor-attention);\n  }\n\n  & .avatar {\n    float: left;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--fgColor-danger);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n"]}
+{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MACE,qCAAsC,CACtC,eAAgB,CAChB,uCAAwC,CACxC,+DAAgE,CAChE,wCACF,CAEA,WACE,iBAAkB,CAClB,aAAc,CACd,kGAAmG,CACnG,4BAA6B,CAC7B,sEA4EF,CA1EE,uBACE,YAAa,CAEb,kDAKF,CAHE,qDAHA,iDAKA,CAGF,sBACE,eAAgB,CAChB,qDAMF,CAHE,mDAFA,oDAIA,CAGF,iBACE,4BAAqB,CAArB,oBAAqB,CACrB,6CACF,CAEA,kBACE,qCACF,CAEA,sGAGE,cAAe,CACf,2CAYF,CAVE,kHACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,SAAU,CACV,UAAW,CAEX,uDACF,CAGF,oBACE,UAAW,CACX,sCAAuC,CACvC,0BAA2B,CAC3B,iBACF,CAEA,oBACE,WAAY,CACZ,oCACF,CAEA,yBACE,WAAY,CACZ,8BACF,CAEA,mBACE,UAAW,CACX,qCACF,CAGE,0BACE,2BACF,CAIJ,cACE,aAAc,CACd,kGAAmG,CACnG,YAAa,CACb,eAAgB,CAChB,iBAAkB,CAClB,4CAA6C,CAC7C,4BAA6B,CAC7B,sEAgBF,CAdE,oBACE,4BAAqB,CAArB,oBACF,CAEA,0BACE,iDAAkD,CAClD,kDACF,CAEA,yBACE,eAAgB,CAChB,qDAAsD,CACtD,oDACF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--stack-gap-normal);\n  list-style: none;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-top-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--bgColor-neutral-muted);\n  }\n\n  &:active {\n    background-color: var(--bgColor-muted);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--menu-bgColor-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--underlineNav-borderColor-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--control-medium-gap);\n    color: var(--fgColor-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--control-small-gap);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--fgColor-attention);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--control-small-gap);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--fgColor-danger);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n"]}

data/app/components/primer/alpha/menu.pcss

@@ -3,7 +3,6 @@
 /* A menu on the side of a page, defaults to left side. e.g. github.com/about */
 
 .menu {
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   list-style: none;
   background-color: var(--bgColor-default);
@@ -14,7 +13,6 @@
 .menu-item {
   position: relative;
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   color: var(--fgColor-default);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
@@ -68,7 +66,6 @@
 
   & .octicon {
     width: 16px;
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
     color: var(--fgColor-muted);
     text-align: center;
@@ -76,7 +73,6 @@
 
   & .Counter {
     float: right;
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
   }
 
@@ -87,7 +83,6 @@
 
   & .avatar {
     float: left;
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
   }
 
@@ -100,7 +95,6 @@
 
 .menu-heading {
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   margin-top: 0;
   margin-bottom: 0;

data/app/components/primer/alpha/segmented_control.css.map

@@ -1 +1 @@
-{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAExB,mBAAoB,CACpB,eAAgB,CAChB,mFAAqF,CACrF,uDAA+D,CAC/D,wCACF,CAGE,kGAEE,UAAW,CACX,0BACF,CAKF,yBACE,kEAgBF,CAdE,gDACE,gCAMF,CAJE,6DAEE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBACE,iBAAkB,CAClB,mBAAoB,CACpB,iCAAkC,CAElC,4CAA6C,CAC7C,0CAAiD,CACjD,wCAAyC,CACzC,sBA4FF,CAxFI,oEACE,iGACF,CAEA,qEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,0EACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DACE,aAAc,CACd,QAAS,CACT,4CAA6C,CAC7C,iBAAkB,CAClB,0BACF,CAIE,gDACE,iBAAkB,CAClB,gBAAiB,CAEjB,6CAA8C,CAE9C,gDAAiD,CACjD,UAAW,CACX,oEACF,CAIF,+BACE,UAAW,CACX,qBAAsB,CACtB,WAAY,CACZ,0CAA2C,CAC3C,QAAS,CAET,uFAA0F,CAE1F,sGAOF,CALE,kDAEE,uFAA0F,CAC1F,mFACF,CAGF,oFACE,wCACF,CAEA,uCACE,aAAc,CACd,kBACF,CAGA,qCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-color: var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmentedControl-item-padding);\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  justify-content: center;\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--control-medium-paddingBlock);\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    width: 100%;\n    min-width: fit-content;\n    height: 100%;\n    font-weight: var(--base-text-weight-normal);\n    border: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n    &:focus-visible {\n      /* stylelint-disable-next-line primer/borders */\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}
+{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAExB,mBAAoB,CACpB,eAAgB,CAChB,mFAAqF,CACrF,uDAA+D,CAC/D,wCACF,CAGE,kGAEE,UAAW,CACX,0BACF,CAKF,yBACE,kEAgBF,CAdE,gDACE,gCAMF,CAJE,6DAEE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBACE,iBAAkB,CAClB,mBAAoB,CACpB,iCAAkC,CAElC,4CAA6C,CAC7C,0CAAiD,CACjD,wCAAyC,CACzC,sBA0FF,CAtFI,oEACE,iGACF,CAEA,qEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,0EACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DACE,aAAc,CACd,QAAS,CACT,4CAA6C,CAC7C,iBAAkB,CAClB,0BACF,CAIE,gDACE,iBAAkB,CAClB,gBAAiB,CACjB,6CAA8C,CAC9C,gDAAiD,CACjD,UAAW,CACX,oEACF,CAIF,+BACE,UAAW,CACX,qBAAsB,CACtB,WAAY,CACZ,0CAA2C,CAC3C,QAAS,CAET,uFAA0F,CAE1F,sGAOF,CALE,kDAEE,uFAA0F,CAC1F,mFACF,CAGF,oFACE,wCACF,CAEA,uCACE,aAAc,CACd,kBACF,CAGA,qCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-color: var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmentedControl-item-padding);\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  justify-content: center;\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    width: 100%;\n    min-width: fit-content;\n    height: 100%;\n    font-weight: var(--base-text-weight-normal);\n    border: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n    &:focus-visible {\n      /* stylelint-disable-next-line primer/borders */\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}

data/app/components/primer/alpha/segmented_control.pcss

@@ -111,9 +111,7 @@
     &::before {
       position: absolute;
       inset: 0 0 0 -1px;
-      /* stylelint-disable-next-line primer/spacing */
       margin-top: var(--control-medium-paddingBlock);
-      /* stylelint-disable-next-line primer/spacing */
       margin-bottom: var(--control-medium-paddingBlock);
       content: '';
       border-left: var(--borderWidth-thin) solid var(--borderColor-default);

data/app/components/primer/alpha/tab_nav.css.map

@@ -1 +1 @@
-{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QACE,YAAa,CAEb,qCAAsC,CACtC,sEACF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eAAgB,CAChB,iBAMF,CAEA,4BAJI,aA2DJ,CAvDA,YACE,oBAAqB,CAGrB,uEAAwE,CACxE,sCAAuC,CAEvC,gBAAiB,CACjB,0BAA2B,CAC3B,4BAAqB,CAArB,oBAAqB,CACrB,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAChB,4CA0CF,CAxCE,yGAGE,4BAA6B,CAC7B,uCAAwC,CACxC,uCAAwC,CACxC,uEAKF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAEE,oCAAqC,CACrC,aACF,CAQF,cACE,oBAAqB,CAErB,gBAAiB,CAEjB,gBAAiB,CACjB,qCAAsC,CACtC,0BAKF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & > li {\n    flex-shrink: 0;\n  }\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 23px;\n  color: var(--fgColor-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--fgColor-muted);\n  }\n\n  & .octicon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--control-small-gap);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-top: 10px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: var(--base-size-2);\n  }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QACE,YAAa,CACb,qCAAsC,CACtC,sEACF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eAAgB,CAChB,iBAMF,CAEA,4BAJI,aAwDJ,CApDA,YACE,oBAAqB,CAErB,uEAAwE,CACxE,sCAAuC,CAEvC,gBAAiB,CACjB,0BAA2B,CAC3B,4BAAqB,CAArB,oBAAqB,CACrB,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAChB,4CAwCF,CAtCE,yGAGE,4BAA6B,CAC7B,uCAAwC,CACxC,uCAAwC,CACxC,uEAKF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAMF,CAHA,qBACE,qCAEF,CAEA,qBACE,oCAAqC,CACrC,aACF,CAQF,cACE,oBAAqB,CAErB,gBAAiB,CAEjB,gBAAiB,CACjB,qCAAsC,CACtC,0BAKF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YACE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & > li {\n    flex-shrink: 0;\n  }\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 23px;\n  color: var(--fgColor-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--fgColor-muted);\n  }\n\n  & .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    margin-left: var(--control-small-gap);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-top: 10px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: var(--base-size-2);\n  }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}

data/app/components/primer/alpha/tab_nav.pcss

@@ -3,7 +3,6 @@
 /* Outer wrapper */
 .tabnav {
   margin-top: 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
 }
@@ -24,7 +23,6 @@
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-medium);
   /* stylelint-disable-next-line primer/typography */
@@ -66,13 +64,11 @@
   }
 
   & .octicon {
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
     color: var(--fgColor-muted);
   }
 
   & .Counter {
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
     color: inherit;
   }
@@ -110,6 +106,5 @@ a.tabnav-extra:hover {
 ** the buttons to be floated or inline-block. */
 
 .tabnav-btn {
-  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--controlStack-medium-gap-condensed);
 }