primer_view_components 0.51.5 → 0.52.0

data/app/components/primer/beta/popover.pcss

@@ -17,6 +17,7 @@
   border-radius: var(--borderRadius-medium);
 
   /* adding !important to override utility classes used in dotcom */
+  /* stylelint-disable-next-line primer/box-shadow */
   box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
 
   /* Carets */
@@ -54,26 +55,36 @@
   }
 }
 
+/* The caret variants below are authored as expanded per-class selectors
+** (rather than nesting `&::before`/`&::after` under a selector list) so each
+** rule's subject buckets by its own class during style recalc. The merged
+** `:is(.Popover-message--…, …)::before` form cannot be fast-rejected by Blink
+** and shows up as pure slow-path selector matching. */
+
 /* Bottom-oriented carets */
-.Popover-message--bottom,
-.Popover-message--bottom-right,
-.Popover-message--bottom-left {
-  &::before,
-  &::after {
-    top: auto;
-    border-bottom-color: transparent;
-  }
+.Popover-message--bottom::before,
+.Popover-message--bottom::after,
+.Popover-message--bottom-right::before,
+.Popover-message--bottom-right::after,
+.Popover-message--bottom-left::before,
+.Popover-message--bottom-left::after {
+  top: auto;
+  border-bottom-color: transparent;
+}
 
-  &::before {
-    bottom: -16px;
-    border-top-color: var(--borderColor-default);
-  }
+.Popover-message--bottom::before,
+.Popover-message--bottom-right::before,
+.Popover-message--bottom-left::before {
+  bottom: -16px;
+  border-top-color: var(--borderColor-default);
+}
 
-  &::after {
-    bottom: -14px;
-    /* stylelint-disable-next-line primer/colors */
-    border-top-color: var(--overlay-bgColor);
-  }
+.Popover-message--bottom::after,
+.Popover-message--bottom-right::after,
+.Popover-message--bottom-left::after {
+  bottom: -14px;
+  /* stylelint-disable-next-line primer/colors */
+  border-top-color: var(--overlay-bgColor);
 }
 
 /* Top and Bottom: Right-oriented carets */
@@ -81,21 +92,25 @@
 .Popover-message--bottom-right {
   right: -9px;
   margin-right: 0;
+}
 
-  &::before,
-  &::after {
-    left: auto;
-    margin-left: 0;
-  }
+.Popover-message--top-right::before,
+.Popover-message--top-right::after,
+.Popover-message--bottom-right::before,
+.Popover-message--bottom-right::after {
+  left: auto;
+  margin-left: 0;
+}
 
-  &::before {
-    right: var(--base-size-20);
-  }
+.Popover-message--top-right::before,
+.Popover-message--bottom-right::before {
+  right: var(--base-size-20);
+}
 
-  &::after {
-    right: var(--base-size-20);
-    margin-right: 1px;
-  }
+.Popover-message--top-right::after,
+.Popover-message--bottom-right::after {
+  right: var(--base-size-20);
+  margin-right: 1px;
 }
 
 /* Top and Bottom: Left-oriented carets */
@@ -103,101 +118,117 @@
 .Popover-message--bottom-left {
   left: -9px;
   margin-left: 0;
+}
 
-  &::before,
-  &::after {
-    left: var(--base-size-24);
-    margin-left: 0;
-  }
+.Popover-message--top-left::before,
+.Popover-message--top-left::after,
+.Popover-message--bottom-left::before,
+.Popover-message--bottom-left::after {
+  left: var(--base-size-24);
+  margin-left: 0;
+}
 
-  &::after {
-    left: var(--base-size-24);
-    margin-left: 1px;
-  }
+.Popover-message--top-left::after,
+.Popover-message--bottom-left::after {
+  left: var(--base-size-24);
+  margin-left: 1px;
 }
 
 /* Right- and Left-oriented carets */
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom,
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: 50%;
-    left: auto;
-    margin-left: 0;
-    border-bottom-color: transparent;
-  }
+.Popover-message--right::before,
+.Popover-message--right::after,
+.Popover-message--right-top::before,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::before,
+.Popover-message--right-bottom::after,
+.Popover-message--left::before,
+.Popover-message--left::after,
+.Popover-message--left-top::before,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::before,
+.Popover-message--left-bottom::after {
+  top: 50%;
+  left: auto;
+  margin-left: 0;
+  border-bottom-color: transparent;
+}
 
-  &::before {
-    margin-top: -9px;
-  }
+.Popover-message--right::before,
+.Popover-message--right-top::before,
+.Popover-message--right-bottom::before,
+.Popover-message--left::before,
+.Popover-message--left-top::before,
+.Popover-message--left-bottom::before {
+  margin-top: -9px;
+}
 
-  &::after {
-    margin-top: -8px;
-  }
+.Popover-message--right::after,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::after,
+.Popover-message--left::after,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::after {
+  margin-top: -8px;
 }
 
 /* Right-oriented carets */
-.Popover-message--right,
-.Popover-message--right-top,
-.Popover-message--right-bottom {
-  &::before {
-    right: -16px;
-    border-left-color: var(--borderColor-default);
-  }
+.Popover-message--right::before,
+.Popover-message--right-top::before,
+.Popover-message--right-bottom::before {
+  right: -16px;
+  border-left-color: var(--borderColor-default);
+}
 
-  &::after {
-    right: -14px;
-    /* stylelint-disable-next-line primer/colors */
-    border-left-color: var(--overlay-bgColor);
-  }
+.Popover-message--right::after,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::after {
+  right: -14px;
+  /* stylelint-disable-next-line primer/colors */
+  border-left-color: var(--overlay-bgColor);
 }
 
 /* Left-oriented carets */
-.Popover-message--left,
-.Popover-message--left-top,
-.Popover-message--left-bottom {
-  &::before {
-    left: -16px;
-    border-right-color: var(--borderColor-default);
-  }
+.Popover-message--left::before,
+.Popover-message--left-top::before,
+.Popover-message--left-bottom::before {
+  left: -16px;
+  border-right-color: var(--borderColor-default);
+}
 
-  &::after {
-    left: -14px;
-    margin-bottom: 1px;
-    /* stylelint-disable-next-line primer/colors */
-    border-right-color: var(--overlay-bgColor);
-  }
+.Popover-message--left::after,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::after {
+  left: -14px;
+  margin-bottom: 1px;
+  /* stylelint-disable-next-line primer/colors */
+  border-right-color: var(--overlay-bgColor);
 }
 
 /* Right and Left: Top-oriented carets */
-.Popover-message--right-top,
-.Popover-message--left-top {
-  &::before,
-  &::after {
-    top: var(--base-size-24);
-  }
+.Popover-message--right-top::before,
+.Popover-message--right-top::after,
+.Popover-message--left-top::before,
+.Popover-message--left-top::after {
+  top: var(--base-size-24);
 }
 
 /* Right and Left: Bottom-oriented carets */
-.Popover-message--right-bottom,
-.Popover-message--left-bottom {
-  &::before,
-  &::after {
-    top: auto;
-  }
+.Popover-message--right-bottom::before,
+.Popover-message--right-bottom::after,
+.Popover-message--left-bottom::before,
+.Popover-message--left-bottom::after {
+  top: auto;
+}
 
-  &::before {
-    bottom: var(--base-size-16);
-  }
+.Popover-message--right-bottom::before,
+.Popover-message--left-bottom::before {
+  bottom: var(--base-size-16);
+}
 
-  &::after {
-    bottom: var(--base-size-16);
-    margin-bottom: 1px;
-  }
+.Popover-message--right-bottom::after,
+.Popover-message--left-bottom::after {
+  bottom: var(--base-size-16);
+  margin-bottom: 1px;
 }
 
 @media (min-width: 544px) {

data/app/components/primer/beta/progress_bar.css

@@ -1 +1 @@
-.Progress{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{background:LinkText;outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}@media (forced-colors:active){:root{--progressBar-track-bgColor:CanvasText}.Progress,.Progress-item{forced-color-adjust:none}}
+.Progress{display:flex;height:8px;overflow:hidden;background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000;background:LinkText}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}@media (forced-colors:active){:root{--progressBar-track-bgColor:CanvasText}.Progress,.Progress-item{forced-color-adjust:none}}

data/app/components/primer/beta/progress_bar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,iDAAkD,CAClD,wCAAyC,CAJzC,YAAa,CACb,UAAW,CAIX,sDAAuD,CACvD,mBAAoB,CAJpB,eAKF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eAEE,mBAAoB,CADpB,uBAEF,CAEA,8BACE,8BACF,CAEA,8BACE,MACE,sCACF,CAEA,yBACE,wBACF,CACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--progressBar-track-bgColor);\n  border-radius: var(--borderRadius-medium);\n  outline: solid 1px var(--progressBar-track-borderColor);\n  outline-offset: -1px;\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n  background: LinkText;\n}\n\n.Progress-item + .Progress-item {\n  margin-left: var(--base-size-2);\n}\n\n@media (forced-colors: active) {\n  :root {\n    --progressBar-track-bgColor: CanvasText;\n  }\n\n  .Progress, .Progress-item {\n    forced-color-adjust: none;\n  }\n}\n"]}
+{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UACE,YAAa,CACb,UAAW,CACX,eAAgB,CAChB,iDAAkD,CAClD,wCAAyC,CACzC,sDAAuD,CACvD,mBACF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBAA8B,CAC9B,mBACF,CAEA,8BACE,8BACF,CAEA,8BACE,MACE,sCACF,CAEA,yBACE,wBACF,CACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--progressBar-track-bgColor);\n  border-radius: var(--borderRadius-medium);\n  outline: solid 1px var(--progressBar-track-borderColor);\n  outline-offset: -1px;\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n  background: LinkText;\n}\n\n.Progress-item + .Progress-item {\n  margin-left: var(--base-size-2);\n}\n\n@media (forced-colors: active) {\n  :root {\n    --progressBar-track-bgColor: CanvasText;\n  }\n\n  .Progress, .Progress-item {\n    forced-color-adjust: none;\n  }\n}\n"]}

data/app/components/primer/beta/state.css

@@ -1 +1 @@
-.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--base-size-20);padding:var(--base-size-4) var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis));border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis));color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
+.State,.state{display:inline-block;padding:var(--base-size-4) var(--control-medium-paddingInline-normal);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--base-size-20);text-align:center;white-space:nowrap;border-radius:2em}.State,.State--draft,.state{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis));border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis)}.State--small{padding:0 10px;font-size:var(--text-body-size-small);line-height:var(--base-size-24)}.State--small .octicon{width:1em}

data/app/components/primer/beta/state.css.map

@@ -1 +1 @@
-{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cAYE,iBAAkB,CAVlB,oBAAqB,CAGrB,sCAAuC,CACvC,0CAA2C,CAE3C,+BAAgC,CAJhC,qEAAsE,CAKtE,iBAAkB,CAClB,kBAGF,CAEA,4BAIE,8EAAgF,CAChF,0CAAiD,CACjD,sGAAwG,CAHxG,+BAIF,CAEA,aAEE,wEAA0E,CAC1E,iEACF,CAEA,4BALE,+BASF,CAJA,eAEE,wEAA0E,CAC1E,iEACF,CAEA,eAEE,4EAA8E,CAC9E,mEAAoE,CAFpE,+BAGF,CAIA,cAGE,qCAAsC,CAEtC,+BAAgC,CAHhC,cAQF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-4) var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-20);\n  text-align: center;\n  white-space: nowrap;\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n  border: var(--borderWidth-thin) solid transparent;\n  box-shadow: var(--boxShadow-thin) var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis));\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}
+{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cAEE,oBAAqB,CAErB,qEAAsE,CACtE,sCAAuC,CACvC,0CAA2C,CAE3C,+BAAgC,CAChC,iBAAkB,CAClB,kBAAmB,CAEnB,iBACF,CAEA,4BAGE,+BAAgC,CAChC,8EAAgF,CAChF,0CAAiD,CACjD,sGACF,CAEA,aAEE,wEAA0E,CAC1E,iEACF,CAEA,4BALE,+BASF,CAJA,eAEE,wEAA0E,CAC1E,iEACF,CAEA,eACE,+BAAgC,CAChC,4EAA8E,CAC9E,mEACF,CAIA,cAEE,cAAe,CACf,qCAAsC,CAEtC,+BAKF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-4) var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-20);\n  text-align: center;\n  white-space: nowrap;\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n  border: var(--borderWidth-thin) solid transparent;\n  box-shadow: var(--boxShadow-thin) var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis));\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}

data/app/components/primer/beta/subhead.css

@@ -1 +1 @@
-.Subhead{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.Subhead--spacious{margin-top:var(--base-size-40)}.Subhead-heading{flex:1 1 auto;font-weight:var(--base-text-weight-normal);order:0}.Subhead-heading--large{font-size:var(--base-size-24)}.Subhead-heading--medium{font-size:var(--text-title-size-medium)}.Subhead-heading--danger{color:var(--fgColor-danger);font-weight:var(--base-text-weight-semibold)}.Subhead-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4)}
+.Subhead{display:flex;padding-bottom:var(--stack-padding-condensed);margin-bottom:var(--stack-gap-normal);border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);flex-flow:row wrap;justify-content:flex-end}.Subhead--spacious{margin-top:var(--base-size-40)}.Subhead-heading{font-weight:var(--base-text-weight-normal);flex:1 1 auto;order:0}.Subhead-heading--large{font-size:var(--base-size-24)}.Subhead-heading--medium{font-size:var(--text-title-size-medium)}.Subhead-heading--danger{font-weight:var(--base-text-weight-semibold);color:var(--fgColor-danger)}.Subhead-description{font-size:var(--text-body-size-medium);color:var(--fgColor-muted);flex:1 100%;order:2}.Subhead-actions{margin:var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);align-self:center;justify-content:flex-end;order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4)}

data/app/components/primer/beta/subhead.css.map

@@ -1 +1 @@
-{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAME,oEAAqE,CALrE,YAAa,CAMb,kBAAmB,CACnB,wBAAyB,CAHzB,qCAAsC,CAFtC,6CAMF,CAGA,mBACE,8BACF,CAGA,iBAEE,aAAc,CADd,0CAA2C,CAE3C,OACF,CAEA,wBAEE,6BACF,CAEA,yBACE,uCACF,CAGA,yBAEE,2BAA4B,CAD5B,4CAEF,CAGA,qBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,iEAAkE,CAGlE,OAKF,CAHE,sCACE,6BACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-bottom: var(--stack-padding-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.Subhead-heading--large {\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n  font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SACE,YAAa,CAEb,6CAA8C,CAE9C,qCAAsC,CACtC,oEAAqE,CACrE,kBAAmB,CACnB,wBACF,CAGA,mBACE,8BACF,CAGA,iBACE,0CAA2C,CAC3C,aAAc,CACd,OACF,CAEA,wBAEE,6BACF,CAEA,yBACE,uCACF,CAGA,yBACE,4CAA6C,CAC7C,2BACF,CAGA,qBACE,sCAAuC,CACvC,0BAA2B,CAC3B,WAAY,CACZ,OACF,CAGA,iBACE,iEAAkE,CAClE,iBAAkB,CAClB,wBAAyB,CACzB,OAKF,CAHE,sCACE,6BACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-bottom: var(--stack-padding-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.Subhead-heading--large {\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n  font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/beta/timeline_item.css

@@ -1 +1 @@
-.TimelineItem{display:flex;margin-left:var(--stack-gap-normal);padding:var(--stack-padding-normal) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;color:var(--fgColor-muted);display:flex;flex-shrink:0;height:var(--control-medium-size);justify-content:center;margin-left:calc(var(--control-medium-size)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed);position:relative;width:var(--control-medium-size);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.TimelineItem-body{color:var(--fgColor-muted);flex:auto;margin-top:calc(var(--base-size-4) + 1px);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default);height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default);border:0;color:var(--fgColor-muted);height:var(--base-size-16);margin-bottom:var(--base-size-8);margin-top:var(--base-size-8)}
+.TimelineItem{position:relative;display:flex;padding:var(--stack-padding-normal) 0;margin-left:var(--stack-gap-normal)}.TimelineItem:before{position:absolute;top:0;bottom:0;left:0;display:block;width:var(--borderWidth-thick);content:"";background-color:var(--borderColor-muted)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{position:relative;z-index:1;display:flex;width:var(--control-medium-size);height:var(--control-medium-size);margin-right:var(--controlStack-medium-gap-condensed);margin-left:calc(var(--control-medium-size)/-2 + 1px);color:var(--fgColor-muted);align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;justify-content:center;flex-shrink:0}.TimelineItem-badge--success{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000}.TimelineItem-body{min-width:0;max-width:100%;margin-top:calc(var(--base-size-4) + 1px);color:var(--fgColor-muted);flex:auto}.TimelineItem-avatar{position:absolute;left:-72px;z-index:1}.TimelineItem-break{position:relative;z-index:1;height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default)}.TimelineItem--condensed{padding-top:var(--base-size-4);padding-bottom:0}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{height:var(--base-size-16);margin-top:var(--base-size-8);margin-bottom:var(--base-size-8);color:var(--fgColor-muted);background-color:var(--bgColor-default);border:0}

data/app/components/primer/beta/timeline_item.css.map

@@ -1 +1 @@
-{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAIb,mCAAoC,CAFpC,qCAAsC,CAHtC,iBAyBF,CAjBE,qBASE,yCAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,8BAIF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBAWE,kBAAmB,CACnB,6CAA8C,CAE9C,4DAA6D,CAC7D,iBAAkB,CALlB,0BAA2B,CAP3B,YAAa,CAcb,aAAc,CAZd,iCAAkC,CAWlC,sBAAuB,CAPvB,qDAAwD,CAFxD,qDAAsD,CANtD,iBAAkB,CAGlB,gCAAiC,CAFjC,SAgBF,CAEA,6BAEE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,mBAKE,0BAA2B,CAC3B,SAAU,CAFV,yCAA0C,CAF1C,cAAe,CADf,WAMF,CAEA,qBAGE,UAAW,CAFX,iBAAkB,CAGlB,SACF,CAEA,oBASE,uCAAwC,CACxC,QAAS,CACT,sEAAuE,CARvE,gCAAiC,CACjC,QAAS,CAET,8CAAiD,CAEjD,iBAAkB,CAPlB,iBAAkB,CAClB,SAUF,CAEA,yBAEE,gBAAiB,CADjB,8BAiBF,CAbE,oCAEE,sCACF,CAEA,6CAKE,uCAAwC,CACxC,QAAS,CAFT,0BAA2B,CAH3B,0BAA2B,CAE3B,gCAAiC,CADjC,6BAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--stack-padding-normal) 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--controlStack-medium-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-4) + 1px);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  /* stylelint-disable-next-line primer/spacing */\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\n    margin-top: var(--base-size-8);\n    margin-bottom: var(--base-size-8);\n    color: var(--fgColor-muted);\n    background-color: var(--bgColor-default);\n    border: 0;\n  }\n}\n"]}
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cACE,iBAAkB,CAClB,YAAa,CAEb,qCAAsC,CAEtC,mCAoBF,CAjBE,qBACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,aAAc,CACd,8BAA+B,CAC/B,UAAW,CAEX,yCACF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBACE,iBAAkB,CAClB,SAAU,CACV,YAAa,CACb,gCAAiC,CACjC,iCAAkC,CAElC,qDAAsD,CAEtD,qDAAwD,CACxD,0BAA2B,CAC3B,kBAAmB,CACnB,6CAA8C,CAE9C,4DAA6D,CAC7D,iBAAkB,CAClB,sBAAuB,CACvB,aACF,CAEA,6BACE,+BAAgC,CAChC,gDAAiD,CACjD,0CACF,CAEA,mBACE,WAAY,CACZ,cAAe,CAEf,yCAA0C,CAC1C,0BAA2B,CAC3B,SACF,CAEA,qBACE,iBAAkB,CAElB,UAAW,CACX,SACF,CAEA,oBACE,iBAAkB,CAClB,SAAU,CACV,gCAAiC,CACjC,QAAS,CAET,8CAAiD,CAEjD,iBAAkB,CAClB,uCAAwC,CACxC,QAAS,CACT,sEACF,CAEA,yBACE,8BAA+B,CAC/B,gBAgBF,CAbE,oCAEE,sCACF,CAEA,6CACE,0BAA2B,CAC3B,6BAA8B,CAC9B,gCAAiC,CACjC,0BAA2B,CAC3B,uCAAwC,CACxC,QACF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--stack-padding-normal) 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--controlStack-medium-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-4) + 1px);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  /* stylelint-disable-next-line primer/spacing */\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\n    margin-top: var(--base-size-8);\n    margin-bottom: var(--base-size-8);\n    color: var(--fgColor-muted);\n    background-color: var(--bgColor-default);\n    border: 0;\n  }\n}\n"]}

data/app/components/primer/beta/truncate.css

@@ -1 +1 @@
-.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate-text--primary:is(.Truncate>.Truncate-text){flex-basis:200%}.Truncate-text--expandable:is(.Truncate>.Truncate-text):active,.Truncate-text--expandable:is(.Truncate>.Truncate-text):focus,.Truncate-text--expandable:is(.Truncate>.Truncate-text):hover{cursor:pointer;flex-shrink:0;max-width:100%!important}
+.Truncate{display:inline-flex;min-width:0;max-width:100%}.Truncate>.Truncate-text{min-width:1ch;max-width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate-text--primary:is(.Truncate>.Truncate-text){flex-basis:200%}.Truncate-text--expandable:is(.Truncate>.Truncate-text):active,.Truncate-text--expandable:is(.Truncate>.Truncate-text):focus,.Truncate-text--expandable:is(.Truncate>.Truncate-text):hover{max-width:100%!important;flex-shrink:0;cursor:pointer}

data/app/components/primer/beta/truncate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA2BF,CAxBE,yBAEE,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CACpB,WAAY,CACZ,cA0BF,CAxBE,yBACE,aAAc,CACd,qBAAsB,CACtB,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAGE,wBAA0B,CAC1B,aAAc,CACd,cACF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

data/app/components/primer/dialog_helper.js

@@ -15,6 +15,10 @@ function setScrollGutter(doc) {
         return;
     doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
 }
+function updateBodyModalClasses(doc) {
+    doc.body.classList.toggle('has-modal', Boolean(doc.querySelector('dialog[open]')));
+    doc.body.classList.toggle('has-modal-disable-scroll', Boolean(doc.querySelector('dialog[open].Overlay--disableScroll')));
+}
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -75,6 +79,7 @@ function dialogInvokerButtonHandler(event) {
                     }
                 }, { once: true });
             }
+            updateBodyModalClasses(dialog.ownerDocument);
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -82,6 +87,7 @@ function dialogInvokerButtonHandler(event) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement && dialog.open) {
             dialog.close();
+            updateBodyModalClasses(dialog.ownerDocument);
         }
     }
 }
@@ -98,6 +104,7 @@ export class DialogHelperElement extends HTMLElement {
         const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
         document.addEventListener('click', dialogInvokerButtonHandler, true);
         document.addEventListener('click', this, { signal });
+        this.dialog?.addEventListener('close', () => updateBodyModalClasses(this.dialog.ownerDocument), { signal });
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
@@ -132,14 +139,16 @@ export class DialogHelperElement extends HTMLElement {
 _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
     if (!this.dialog)
         return;
+    const { ownerDocument } = this.dialog;
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
         // eslint-disable-next-line no-restricted-syntax
         this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
         this.dialog.close();
-        setScrollGutter(this.dialog.ownerDocument);
+        setScrollGutter(ownerDocument);
         this.dialog.showModal();
     }
+    updateBodyModalClasses(ownerDocument);
 };
 if (!window.customElements.get('dialog-helper')) {
     window.DialogHelperElement = DialogHelperElement;

data/app/components/primer/dialog_helper.ts

@@ -3,6 +3,14 @@ function setScrollGutter(doc: Document) {
   doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`)
 }
 
+function updateBodyModalClasses(doc: Document) {
+  doc.body.classList.toggle('has-modal', Boolean(doc.querySelector('dialog[open]')))
+  doc.body.classList.toggle(
+    'has-modal-disable-scroll',
+    Boolean(doc.querySelector('dialog[open].Overlay--disableScroll')),
+  )
+}
+
 function dialogInvokerButtonHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
@@ -69,6 +77,8 @@ function dialogInvokerButtonHandler(event: Event) {
           {once: true},
         )
       }
+
+      updateBodyModalClasses(dialog.ownerDocument)
     }
   }
 
@@ -77,6 +87,7 @@ function dialogInvokerButtonHandler(event: Event) {
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof HTMLDialogElement && dialog.open) {
       dialog.close()
+      updateBodyModalClasses(dialog.ownerDocument)
     }
   }
 }
@@ -91,6 +102,7 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
+    this.dialog?.addEventListener('close', () => updateBodyModalClasses(this.dialog!.ownerDocument), {signal})
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {
@@ -107,14 +119,17 @@ export class DialogHelperElement extends HTMLElement {
 
   #handleDialogOpenAttribute() {
     if (!this.dialog) return
+    const {ownerDocument} = this.dialog
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
       // eslint-disable-next-line no-restricted-syntax
       this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
       this.dialog.close()
-      setScrollGutter(this.dialog.ownerDocument)
+      setScrollGutter(ownerDocument)
       this.dialog.showModal()
     }
+
+    updateBodyModalClasses(ownerDocument)
   }
 
   handleEvent(event: MouseEvent) {

data/app/lib/primer/forms/acts_as_component.rb

@@ -10,7 +10,7 @@ module Primer
       module InstanceMethods
         delegate :render, :content_tag, :output_buffer, :capture, to: :@view_context
 
-        def render_in(view_context, &block)
+        def render_in(view_context, **_kwargs, &block)
           @view_context = view_context
           before_render
           perform_render(&block)

data/app/lib/primer/forms/toggle_switch_form.rb

@@ -69,7 +69,7 @@ module Primer
       # assumes the presence of a builder so we create our own here. A builder
       # cannot be constructed without a corresponding view context, which is why
       # we have to override render_in and can't create it in the initializer.
-      def render_in(view_context, &block)
+      def render_in(view_context, **_kwargs, &block)
         @builder = Primer::Forms::Builder.new(
           nil, nil, view_context, {}
         )

data/lib/primer/form_components.rb

@@ -16,7 +16,7 @@ module Primer
           @system_arguments = system_arguments
         end
 
-        def render_in(view_context, &block)
+        def render_in(view_context, **_kwargs, &block)
           builder = Primer::Forms::Builder.new(
             nil, nil, view_context, {}
           )

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 51
-      PATCH = 5
+      MINOR = 52
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/static/classes.json

@@ -459,6 +459,9 @@
   "Popover-message": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--bottom": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--bottom-left": [
     "Primer::Beta::Popover"
   ],
@@ -468,9 +471,27 @@
   "Popover-message--large": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--left": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--no-caret": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--right": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--top-left": [
     "Primer::Beta::Popover"
   ],