openproject-primer_view_components 0.89.2 → 0.91.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 -- 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/state.css.map

@@ -1 +1 @@
-{"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"]}
+{"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.map

@@ -1 +1 @@
-{"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"]}
+{"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.map

@@ -1 +1 @@
-{"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"]}
+{"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.map

@@ -1 +1 @@
-{"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"]}
+{"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/open_project/border_box/collapsible_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["collapsible_header.pcss"],"names":[],"mappings":"AAEA,mBACE,aAAc,CACd,2CAA4C,CAC5C,0BACF,CAEA,wCACE,2BAA4B,CAC5B,4BAA6B,CAC7B,8CAOF,CALE,6EAGE,YACF,CAGF,+BACE,cAAe,CACf,wBAAiB,CAAjB,gBAAiB,CACjB,YAAa,CACb,gBAAiB,CACjB,kBAAmB,CACnB,kCAAmC,CACnC,0BAA2B,CAC3B,eAKF,CAHE,kDACE,MACF,CAGF,wDACE,+BACE,qBAAsB,CACtB,sBACF,CAEA,kEACE,YACF,CAEA,+BACE,UACF,CACF,CAGE,8DACE,qBAAsB,CACtB,sBACF,CAEA,gGACE,YACF,CAEA,8DACE,gBAAiB,CACjB,kBAAsB,CACtB,kBAAmB,CACnB,UACF,CAGF,8BACE,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,8BAA+B,CAC/B,eAAgB,CAChB,cACF,CAEA,+BACE,MAAO,CACP,WAAY,CACZ,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CACnB,wBAAiB,CAAjB,gBACF","file":"collapsible_header.css","sourcesContent":["/* CSS for BorderBox::CollapsibleHeader  */\n\n.CollapsibleHeader {\n  display: block;\n  container-name: collapsible-header-container;\n  container-type: inline-size;\n}\n\n.Box:has(.CollapsibleHeader--collapsed) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-bottom-width: var(--borderWidth-thicker);\n\n  & .Box-list,\n  & .Box-body,\n  & .Box-footer {\n    display: none;\n  }\n}\n\n.CollapsibleHeader-triggerArea {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  column-gap: var(--stack-gap-normal);\n  row-gap: var(--base-size-4);\n  overflow: hidden;\n\n  .CollapsibleHeader > & {\n    flex: 1;\n  }\n}\n\n@container collapsible-header-container (width < 544px) {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader--multi-line {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    overflow: visible;\n    text-overflow: initial;\n    white-space: normal;\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader-title-line {\n  flex-basis: 66%;\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n.CollapsibleHeader-description {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: text;\n}\n"]}
+{"version":3,"sources":["collapsible_header.pcss"],"names":[],"mappings":"AAIA,mBACE,aAAc,CACd,2CAA4C,CAC5C,0BACF,CAEA,wCACE,2BAA4B,CAC5B,4BAA6B,CAC7B,8CAOF,CALE,6EAGE,YACF,CAGF,+BACE,cAAe,CACf,wBAAiB,CAAjB,gBAAiB,CACjB,YAAa,CACb,gBAAiB,CACjB,kBAAmB,CACnB,kCAAmC,CACnC,0BAA2B,CAC3B,eAKF,CAHE,kDACE,MACF,CAGF,wDACE,+BACE,qBAAsB,CACtB,sBACF,CAEA,kEACE,YACF,CAEA,+BACE,UACF,CACF,CAGE,8DACE,qBAAsB,CACtB,sBACF,CAEA,gGACE,YACF,CAEA,8DACE,gBAAiB,CACjB,kBAAmB,CACnB,kBAAmB,CACnB,UACF,CAGF,8BACE,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,8BAA+B,CAC/B,eAAgB,CAChB,cACF,CAEA,+BACE,MAAO,CACP,WAAY,CACZ,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CACnB,wBAAiB,CAAjB,gBACF","file":"collapsible_header.css","sourcesContent":["/* CSS for BorderBox::CollapsibleHeader  */\n\n/* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */\n\n.CollapsibleHeader {\n  display: block;\n  container-name: collapsible-header-container;\n  container-type: inline-size;\n}\n\n.Box:has(.CollapsibleHeader--collapsed) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-bottom-width: var(--borderWidth-thicker);\n\n  & .Box-list,\n  & .Box-body,\n  & .Box-footer {\n    display: none;\n  }\n}\n\n.CollapsibleHeader-triggerArea {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  column-gap: var(--stack-gap-normal);\n  row-gap: var(--base-size-4);\n  overflow: hidden;\n\n  .CollapsibleHeader > & {\n    flex: 1;\n  }\n}\n\n@container collapsible-header-container (width < 544px) {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader--multi-line {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader-title-line {\n  flex-basis: 66%;\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n.CollapsibleHeader-description {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: text;\n}\n"]}

data/app/components/primer/open_project/border_box/collapsible_header.html.erb

@@ -5,7 +5,7 @@
       <% if count? %>
         <%= count %>
       <% end %>
-      <%= render(Primer::BaseComponent.new(tag: :div)) do %>
+      <%= render(Primer::Beta::Button.new(**@toggle_button_arguments)) do %>
         <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", hidden: @collapsed, data: { target: "collapsible-header.arrowUp" })) %>
         <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: !@collapsed, data: { target: "collapsible-header.arrowDown" })) %>
       <% end %>

data/app/components/primer/open_project/border_box/collapsible_header.pcss

@@ -1,5 +1,7 @@
 /* CSS for BorderBox::CollapsibleHeader  */
 
+/* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */
+
 .CollapsibleHeader {
   display: block;
   container-name: collapsible-header-container;
@@ -60,7 +62,7 @@
 
   .CollapsibleHeader-description {
     overflow: visible;
-    text-overflow: initial;
+    text-overflow: clip;
     white-space: normal;
     width: 100%;
   }

data/app/components/primer/open_project/border_box/collapsible_header.rb

@@ -16,6 +16,7 @@ module Primer
         # @param tag [Symbol] <%= one_of(Primer::OpenProject::BorderBox::CollapsibleHeader::TITLE_TAG_OPTIONS) %>
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :title, lambda { |tag: TITLE_TAG_DEFAULT, **system_arguments|
+          system_arguments[:id] ||= @heading_id
           system_arguments[:classes] = class_names(
             system_arguments[:classes],
             "CollapsibleHeader-title",
@@ -29,7 +30,6 @@ module Primer
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :count, lambda { |**system_arguments|
-          system_arguments[:mr] ||= 2
           system_arguments[:scheme] ||= :primary
           system_arguments[:classes] = class_names(
             system_arguments[:classes],
@@ -65,6 +65,7 @@ module Primer
 
           @collapsed = collapsed
           @collapsible_id = collapsible_id
+          @heading_id = "#{id}-heading"
 
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :"collapsible-header"
@@ -87,16 +88,16 @@ module Primer
           end
 
           @trigger_area_arguments = { tag: :div }
-          @trigger_area_arguments[:role] = "button"
-          @trigger_area_arguments[:tabindex] = 0
           @trigger_area_arguments[:classes] = "CollapsibleHeader-triggerArea"
-          @trigger_area_arguments[:aria] = {
-            controls: @collapsible_id,
-            expanded: !@collapsed
-          }
           @trigger_area_arguments[:data] = {
-            target: "collapsible-header.triggerElement",
-            action: "click:collapsible-header#toggle keydown:collapsible-header#toggleViaKeyboard"
+            action: "click:collapsible-header#toggle"
+          }
+
+          @toggle_button_arguments = {
+            scheme: :invisible,
+            type: :button,
+            data: { target: "collapsible-header.triggerElement", "collapsible-toggle": "" },
+            aria: { expanded: !@collapsed, controls: @collapsible_id, labelledby: @heading_id }
           }
         end
 

data/app/components/primer/open_project/border_grid.css

@@ -1 +1 @@
-.BorderGrid{display:table;width:100%;margin-top:-16px;margin-bottom:-16px;table-layout:fixed;border-collapse:collapse;border-style:hidden}.BorderGrid .BorderGrid-cell{padding-top:16px;padding-bottom:16px}.BorderGrid--spacious{margin-top:-24px;margin-bottom:-24px}.BorderGrid--spacious .BorderGrid-cell{padding-top:24px;padding-bottom:24px}.BorderGrid-row{display:table-row}.BorderGrid-cell{display:table-cell;border:1px solid var(--borderColor-muted)}
+.BorderGrid{display:table;width:100%;margin-top:calc(var(--base-size-16)*-1);margin-bottom:calc(var(--base-size-16)*-1);table-layout:fixed;border-collapse:collapse;border-style:hidden}.BorderGrid .BorderGrid-cell{padding-top:var(--base-size-16);padding-bottom:var(--base-size-16)}.BorderGrid--spacious{margin-top:calc(var(--base-size-24)*-1);margin-bottom:calc(var(--base-size-24)*-1)}.BorderGrid--spacious .BorderGrid-cell{padding-top:var(--base-size-24);padding-bottom:var(--base-size-24)}.BorderGrid-row{display:table-row}.BorderGrid-cell{display:table-cell;border:var(--borderWidth-thin) solid var(--borderColor-muted)}

data/app/components/primer/open_project/border_grid.css.map

@@ -1 +1 @@
-{"version":3,"sources":["border_grid.pcss"],"names":[],"mappings":"AAEA,YACI,aAAc,CACd,UAAW,CACX,gBAAiB,CACjB,mBAAoB,CACpB,kBAAmB,CACnB,wBAAyB,CACzB,mBACJ,CAEA,6BACI,gBAAiB,CACjB,mBACJ,CAEA,sBACI,gBAAiB,CACjB,mBACJ,CAEA,uCACI,gBAAiB,CACjB,mBACJ,CAEA,gBACI,iBACJ,CAEA,iBACI,kBAAmB,CACnB,yCACJ","file":"border_grid.css","sourcesContent":["/* CSS for BorderGrid  */\n\n.BorderGrid {\n    display: table;\n    width: 100%;\n    margin-top: -16px;\n    margin-bottom: -16px;\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-style: hidden\n}\n\n.BorderGrid .BorderGrid-cell {\n    padding-top: 16px;\n    padding-bottom: 16px\n}\n\n.BorderGrid--spacious {\n    margin-top: -24px;\n    margin-bottom: -24px\n}\n\n.BorderGrid--spacious .BorderGrid-cell {\n    padding-top: 24px;\n    padding-bottom: 24px\n}\n\n.BorderGrid-row {\n    display: table-row\n}\n\n.BorderGrid-cell {\n    display: table-cell;\n    border: 1px solid var(--borderColor-muted)\n}\n"]}
+{"version":3,"sources":["border_grid.pcss"],"names":[],"mappings":"AAEA,YACI,aAAc,CACd,UAAW,CACX,uCAA0C,CAC1C,0CAA6C,CAC7C,kBAAmB,CAEnB,wBAAyB,CAEzB,mBACJ,CAEA,6BACI,+BAAgC,CAChC,kCACJ,CAEA,sBACI,uCAA0C,CAC1C,0CACJ,CAEA,uCACI,+BAAgC,CAChC,kCACJ,CAEA,gBACI,iBACJ,CAEA,iBACI,kBAAmB,CACnB,6DACJ","file":"border_grid.css","sourcesContent":["/* CSS for BorderGrid  */\n\n.BorderGrid {\n    display: table;\n    width: 100%;\n    margin-top: calc(-1 * var(--base-size-16));\n    margin-bottom: calc(-1 * var(--base-size-16));\n    table-layout: fixed;\n    /* stylelint-disable-next-line primer/borders -- table border-collapse keyword, not a border size */\n    border-collapse: collapse;\n    /* stylelint-disable-next-line primer/borders -- table border-style keyword, not a border size */\n    border-style: hidden\n}\n\n.BorderGrid .BorderGrid-cell {\n    padding-top: var(--base-size-16);\n    padding-bottom: var(--base-size-16)\n}\n\n.BorderGrid--spacious {\n    margin-top: calc(-1 * var(--base-size-24));\n    margin-bottom: calc(-1 * var(--base-size-24))\n}\n\n.BorderGrid--spacious .BorderGrid-cell {\n    padding-top: var(--base-size-24);\n    padding-bottom: var(--base-size-24)\n}\n\n.BorderGrid-row {\n    display: table-row\n}\n\n.BorderGrid-cell {\n    display: table-cell;\n    border: var(--borderWidth-thin) solid var(--borderColor-muted)\n}\n"]}

data/app/components/primer/open_project/border_grid.pcss

@@ -3,26 +3,28 @@
 .BorderGrid {
     display: table;
     width: 100%;
-    margin-top: -16px;
-    margin-bottom: -16px;
+    margin-top: calc(-1 * var(--base-size-16));
+    margin-bottom: calc(-1 * var(--base-size-16));
     table-layout: fixed;
+    /* stylelint-disable-next-line primer/borders -- table border-collapse keyword, not a border size */
     border-collapse: collapse;
+    /* stylelint-disable-next-line primer/borders -- table border-style keyword, not a border size */
     border-style: hidden
 }
 
 .BorderGrid .BorderGrid-cell {
-    padding-top: 16px;
-    padding-bottom: 16px
+    padding-top: var(--base-size-16);
+    padding-bottom: var(--base-size-16)
 }
 
 .BorderGrid--spacious {
-    margin-top: -24px;
-    margin-bottom: -24px
+    margin-top: calc(-1 * var(--base-size-24));
+    margin-bottom: calc(-1 * var(--base-size-24))
 }
 
 .BorderGrid--spacious .BorderGrid-cell {
-    padding-top: 24px;
-    padding-bottom: 24px
+    padding-top: var(--base-size-24);
+    padding-bottom: var(--base-size-24)
 }
 
 .BorderGrid-row {
@@ -31,5 +33,5 @@
 
 .BorderGrid-cell {
     display: table-cell;
-    border: 1px solid var(--borderColor-muted)
+    border: var(--borderWidth-thin) solid var(--borderColor-muted)
 }

data/app/components/primer/open_project/collapsible.d.ts

@@ -5,7 +5,7 @@ export declare abstract class CollapsibleElement extends HTMLElement {
     collapsibleElements: HTMLElement[];
     collapsed: boolean;
     toggleViaKeyboard(event: KeyboardEvent): void;
-    toggle(): void;
+    toggle(event?: Event): void;
     attributeChangedCallback(name: string): void;
     hideAll(): void;
     expandAll(): void;

data/app/components/primer/open_project/collapsible.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { attr, target, targets } from '@github/catalyst';
-// eslint-disable-next-line custom-elements/expose-class-on-global
 export class CollapsibleElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -13,11 +12,16 @@ export class CollapsibleElement extends HTMLElement {
     }
     toggleViaKeyboard(event) {
         if (event.code === 'Enter' || event.code === 'Space') {
-            event.preventDefault();
-            this.toggle();
+            this.toggle(event);
         }
     }
-    toggle() {
+    toggle(event) {
+        if (event &&
+            event.target instanceof Element &&
+            !event.target.closest('[data-collapsible-toggle]') &&
+            event.target.closest('a, button'))
+            return;
+        event?.preventDefault();
         this.collapsed = !this.collapsed;
     }
     attributeChangedCallback(name) {