openproject-primer_view_components 0.89.1 → 0.90.1

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 -- intentional legacy shadow var with fallback, kept for dotcom compatibility */
   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,CACrB,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  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/state.pcss

@@ -5,7 +5,6 @@
 .state, /* TODO: Deprecate */
 .State {
   display: inline-block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--base-size-4) var(--control-medium-paddingInline-normal);
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-medium);

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,CACb,6CAA8C,CAC9C,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  padding-bottom: var(--stack-padding-condensed);\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/subhead.pcss

@@ -2,9 +2,7 @@
 
 .Subhead {
   display: flex;
-  /* stylelint-disable-next-line primer/spacing */
   padding-bottom: var(--stack-padding-condensed);
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;

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,CACb,qCAAsC,CACtC,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,CAClC,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,CACT,8CAAiD,CAEjD,iBAAkB,CAClB,uCAAwC,CACxC,QAAS,CACT,sEACF,CAEA,yBACE,8BAA+B,CAC/B,gBAeF,CAZE,oCACE,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  padding: var(--stack-padding-normal) 0;\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  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  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    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/timeline_item.pcss

@@ -3,9 +3,7 @@
 .TimelineItem {
   position: relative;
   display: flex;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--stack-padding-normal) 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--stack-gap-normal);
 
   /* The Timeline */
@@ -34,7 +32,6 @@
   display: flex;
   width: var(--control-medium-size);
   height: var(--control-medium-size);
-  /* stylelint-disable-next-line primer/spacing */
   margin-right: var(--controlStack-medium-gap-condensed);
   /* stylelint-disable-next-line primer/spacing */
   margin-left: calc(var(--control-medium-size) / -2 + 1px);
@@ -75,7 +72,6 @@
   z-index: 1;
   height: var(--stack-gap-spacious);
   margin: 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--stack-gap-normal) * -1);
   /* stylelint-disable-next-line primer/spacing */
   margin-left: -56px;
@@ -90,7 +86,6 @@
 
   /* TimelineItem--condensed is often grouped. (commits) */
   &:last-child {
-    /* stylelint-disable-next-line primer/spacing */
     padding-bottom: var(--stack-gap-normal);
   }
 

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,cAyBF,CAvBE,yBACE,aAAc,CACd,qBAAsB,CACtB,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,6CACE,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      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/beta/truncate.pcss

@@ -13,7 +13,6 @@
     white-space: nowrap;
 
     & + .Truncate-text {
-      /* stylelint-disable-next-line primer/spacing */
       margin-left: var(--control-small-gap);
     }
 

data/app/components/primer/component.rb

@@ -22,6 +22,7 @@ module Primer
     include AttributesHelper
     include ClassNameHelper
     include FetchOrFallbackHelper
+    include SafeHrefHelper
     include TestSelectorHelper
     include JoinStyleArgumentsHelper
     include ViewHelper
@@ -137,6 +138,21 @@ module Primer
       deny_single_argument(:tag, "This component has a fixed tag.", **arguments)
     end
 
+    # Removes `href` values that point at disallowed URI schemes (`javascript:`,
+    # `vbscript:`). Raises in non-production environments so the offending call
+    # site gets fixed; in production we silently drop the attribute so the link
+    # is rendered inert rather than crashing the page.
+    def sanitize_href!(arguments)
+      return unless arguments.key?(:href)
+      return unless Primer::SafeHrefHelper.unsafe_href?(arguments[:href])
+
+      if should_raise_error?
+        raise ArgumentError, "Rejected dangerous URI scheme in `href`: #{arguments[:href].inspect}"
+      end
+
+      arguments[:href] = nil
+    end
+
     def should_raise_error?
       !Rails.env.production? && raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end

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/components/primer/open_project/border_box/collapsible_header.css

@@ -1 +1 @@
-.CollapsibleHeader{container-name:collapsible-header-container;container-type:inline-size;display:block}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer,.Box:has(.CollapsibleHeader--collapsed) .Box-list{display:none}.CollapsibleHeader-triggerArea{align-items:center;column-gap:var(--stack-gap-normal);cursor:pointer;display:flex;flex-wrap:nowrap;overflow:hidden;row-gap:var(--base-size-4);-webkit-user-select:none;user-select:none}.CollapsibleHeader>.CollapsibleHeader-triggerArea{flex:1}@container collapsible-header-container (width < 544px){.CollapsibleHeader-triggerArea{align-items:flex-start;flex-direction:column}.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description{display:none}.CollapsibleHeader-description{width:100%}}.CollapsibleHeader--multi-line .CollapsibleHeader-triggerArea{align-items:flex-start;flex-direction:column}.CollapsibleHeader--multi-line.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description{display:none}.CollapsibleHeader--multi-line .CollapsibleHeader-description{overflow:visible;text-overflow:clip;white-space:normal;width:100%}.CollapsibleHeader-title-line{align-items:center;display:flex;flex-basis:66%;gap:var(--stack-gap-condensed);max-width:100%;overflow:hidden}.CollapsibleHeader-description{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;white-space:nowrap}
+.CollapsibleHeader{display:block;container-name:collapsible-header-container;container-type:inline-size}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) :is(.Box-body,.Box-footer,.Box-list){display:none}.CollapsibleHeader-triggerArea{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;flex-wrap:nowrap;align-items:center;column-gap:var(--stack-gap-normal);row-gap:var(--base-size-4);overflow:hidden}.CollapsibleHeader>.CollapsibleHeader-triggerArea{flex:1}@container collapsible-header-container (width < 544px){.CollapsibleHeader-triggerArea{flex-direction:column;align-items:flex-start}.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description{display:none}.CollapsibleHeader-description{width:100%}}.CollapsibleHeader--multi-line .CollapsibleHeader-triggerArea{flex-direction:column;align-items:flex-start}.CollapsibleHeader--multi-line.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description{display:none}.CollapsibleHeader--multi-line .CollapsibleHeader-description{overflow:visible;text-overflow:clip;white-space:normal;width:100%}.CollapsibleHeader-title-line{flex-basis:66%;display:flex;align-items:center;gap:var(--stack-gap-condensed);overflow:hidden;max-width:100%}.CollapsibleHeader-description{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text}

data/app/components/primer/open_project/border_box/collapsible_header.css.json

@@ -3,9 +3,7 @@
   "selectors": [
     ".CollapsibleHeader",
     ".Box:has(.CollapsibleHeader--collapsed)",
-    ".Box:has(.CollapsibleHeader--collapsed) .Box-body",
-    ".Box:has(.CollapsibleHeader--collapsed) .Box-footer",
-    ".Box:has(.CollapsibleHeader--collapsed) .Box-list",
+    ".Box:has(.CollapsibleHeader--collapsed) :is(.Box-body,.Box-footer,.Box-list)",
     ".CollapsibleHeader-triggerArea",
     ".CollapsibleHeader>.CollapsibleHeader-triggerArea",
     ".CollapsibleHeader[data-collapsed] .CollapsibleHeader-description",