primer_view_components 0.1.5 → 0.1.7

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

@@ -1 +1 @@
-{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,4CAA6C,CAD7C,YAEF,CAEA,wGAEE,4CAA6C,CAD7C,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,6CAA8C,CAD9C,WAEF,CAEA,qGAEE,6CAA8C,CAD9C,WAEF,CAOA,qGAEE,8CAA+C,CAD/C,UAEF,CAEA,kGAEE,8CAA+C,CAD/C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,4CAA8C,CAJ9C,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,wEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--color-canvas-overlay);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    border: 8px solid transparent;\n    border-bottom-color: var(--color-border-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    border: 7px solid transparent;\n    border-bottom-color: var(--color-canvas-overlay);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--color-border-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    border-top-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: 20px;\n  }\n\n  &::after {\n    right: 21px;\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: 24px;\n    margin-left: 0;\n  }\n\n  &::after {\n    left: 25px;\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--color-border-default);\n  }\n\n  &::after {\n    right: -14px;\n    border-left-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--color-border-default);\n  }\n\n  &::after {\n    left: -14px;\n    border-right-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: 24px;\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: 16px;\n  }\n\n  &::after {\n    bottom: 17px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--primer-stack-gap-condensed, 8px);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}
+{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,4CAA6C,CAC7C,oEAAsE,CACtE,4CAA8C,CAH9C,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,4CAA6C,CAD7C,YAEF,CAEA,wGAEE,4CAA6C,CAD7C,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,6CAA8C,CAD9C,WAEF,CAEA,qGAEE,6CAA8C,CAD9C,WAEF,CAOA,qGAEE,8CAA+C,CAD/C,UAEF,CAEA,kGAEE,8CAA+C,CAD/C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,qCAAuC,CAJvC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,iEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--color-canvas-overlay);\n  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--borderRadius-medium, 6px);\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    border: 8px solid transparent;\n    border-bottom-color: var(--color-border-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    border: 7px solid transparent;\n    border-bottom-color: var(--color-canvas-overlay);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--color-border-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    border-top-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: 20px;\n  }\n\n  &::after {\n    right: 21px;\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: 24px;\n    margin-left: 0;\n  }\n\n  &::after {\n    left: 25px;\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--color-border-default);\n  }\n\n  &::after {\n    right: -14px;\n    border-left-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--color-border-default);\n  }\n\n  &::after {\n    left: -14px;\n    border-right-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: 24px;\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: 16px;\n  }\n\n  &::after {\n    bottom: 17px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--stack-gap-condensed, 8px);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--control-medium-paddingInline-normal, 12px) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}

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

@@ -11,8 +11,8 @@
   margin-right: auto;
   margin-left: auto;
   background-color: var(--color-canvas-overlay);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium, 6px);
 
   /* Carets */
   &::before,
@@ -209,12 +209,12 @@
     bottom: auto;
     left: auto;
     width: auto !important;
-    margin: var(--primer-stack-gap-condensed, 8px);
+    margin: var(--stack-gap-condensed, 8px);
   }
 
   /* Increase tap area for touch input */
   .Popover-message > .btn-octicon {
-    padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;
+    padding: var(--control-medium-paddingInline-normal, 12px) !important;
   }
 
   /* Remove caret */

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

@@ -1 +1 @@
-.State,.state{border-radius:2em;display:inline-block;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);line-height:var(--primer-control-medium-lineBoxHeight,20px);padding:5px var(--primer-control-medium-paddingInline-normal,12px);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--color-neutral-emphasis);border:var(--primer-borderWidth-thin,1px) solid #0000;color:var(--color-fg-on-emphasis)}.State--open{background-color:var(--color-open-emphasis)}.State--merged,.State--open{color:var(--color-fg-on-emphasis)}.State--merged{background-color:var(--color-done-emphasis)}.State--closed{background-color:var(--color-closed-emphasis);color:var(--color-fg-on-emphasis)}.State--small{font-size:var(--primer-text-body-size-small,12px);line-height:var(--base-size-24,24px);padding:0 10px}.State--small .octicon{width:1em}
+.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,20px);padding:5px var(--control-medium-paddingInline-normal,12px);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--color-neutral-emphasis);border:var(--borderWidth-thin,1px) solid #0000;color:var(--color-fg-on-emphasis)}.State--open{background-color:var(--color-open-emphasis)}.State--merged,.State--open{color:var(--color-fg-on-emphasis)}.State--merged{background-color:var(--color-done-emphasis)}.State--closed{background-color:var(--color-closed-emphasis);color:var(--color-fg-on-emphasis)}.State--small{font-size:var(--text-body-size-small,12px);line-height:var(--base-size-24,24px);padding:0 10px}.State--small .octicon{width:1em}

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

@@ -1 +1 @@
-{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,kDAAoD,CACpD,8CAAgD,CAChD,2DAA6D,CAH7D,kEAAoE,CAIpE,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,aAEE,2CACF,CAEA,4BAJE,iCAOF,CAHA,eAEE,2CACF,CAEA,eAEE,6CAA8C,CAD9C,iCAEF,CAIA,cAEE,iDAAmD,CACnD,oCAAsC,CAFtC,cAOF,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: 5px var(--primer-control-medium-paddingInline-normal, 12px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: var(--primer-control-medium-lineBoxHeight, 20px);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-neutral-emphasis);\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.State--open {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-open-emphasis);\n}\n\n.State--merged {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-done-emphasis);\n}\n\n.State--closed {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--primer-text-body-size-small, 12px);\n  line-height: var(--base-size-24, 24px);\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,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,2CAA6C,CAC7C,8CAAgD,CAChD,oDAAsD,CAHtD,2DAA6D,CAI7D,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,8CAA+C,CAC/C,8CAAsD,CAFtD,iCAGF,CAEA,aAEE,2CACF,CAEA,4BAJE,iCAOF,CAHA,eAEE,2CACF,CAEA,eAEE,6CAA8C,CAD9C,iCAEF,CAIA,cAEE,0CAA4C,CAC5C,oCAAsC,CAFtC,cAOF,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: 5px var(--control-medium-paddingInline-normal, 12px);\n  font-size: var(--text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: var(--control-medium-lineBoxHeight, 20px);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-neutral-emphasis);\n  border: var(--borderWidth-thin, 1px) solid transparent;\n}\n\n.State--open {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-open-emphasis);\n}\n\n.State--merged {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-done-emphasis);\n}\n\n.State--closed {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--text-body-size-small, 12px);\n  line-height: var(--base-size-24, 24px);\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,10 +5,10 @@
 .state, /* TODO: Deprecate */
 .State {
   display: inline-block;
-  padding: 5px var(--primer-control-medium-paddingInline-normal, 12px);
-  font-size: var(--primer-text-body-size-medium, 14px);
+  padding: 5px var(--control-medium-paddingInline-normal, 12px);
+  font-size: var(--text-body-size-medium, 14px);
   font-weight: var(--base-text-weight-medium, 500);
-  line-height: var(--primer-control-medium-lineBoxHeight, 20px);
+  line-height: var(--control-medium-lineBoxHeight, 20px);
   text-align: center;
   white-space: nowrap;
   border-radius: 2em;
@@ -19,7 +19,7 @@
 .State--draft {
   color: var(--color-fg-on-emphasis);
   background-color: var(--color-neutral-emphasis);
-  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin, 1px) solid transparent;
 }
 
 .State--open {
@@ -41,7 +41,7 @@
 
 .State--small {
   padding: 0 10px;
-  font-size: var(--primer-text-body-size-small, 12px);
+  font-size: var(--text-body-size-small, 12px);
   line-height: var(--base-size-24, 24px);
 
   & .octicon {

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gFAAkF,CAHlF,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,iDAAmD,CADnD,wDAKF,CAGA,mBACE,mCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAAgD,CAEhD,OACF,CAGA,yBAEE,4BAA6B,CAD7B,gDAEF,CAGA,qBAEE,2BAA4B,CAC5B,WAAY,CAFZ,kDAAoD,CAGpD,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,6EAAiF,CAGjF,OAKF,CAHE,sCACE,iCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--primer-stack-padding-condensed, 8px);\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-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, 40px);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal, 400);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-danger-fg);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--primer-text-body-size-medium, 14px);\n  color: var(--color-fg-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, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4, 4px);\n  }\n}\n"]}
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,yEAA2E,CAH3E,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAA4C,CAD5C,iDAKF,CAGA,mBACE,mCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAAgD,CAEhD,OACF,CAGA,yBAEE,4BAA6B,CAD7B,gDAEF,CAGA,qBAEE,2BAA4B,CAC5B,WAAY,CAFZ,2CAA6C,CAG7C,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,6EAAiF,CAGjF,OAKF,CAHE,sCACE,iCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed, 8px);\n  margin-bottom: var(--stack-gap-normal, 16px);\n  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-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, 40px);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal, 400);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-danger-fg);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium, 14px);\n  color: var(--color-fg-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, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4, 4px);\n  }\n}\n"]}

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

@@ -2,9 +2,9 @@
 
 .Subhead {
   display: flex;
-  padding-bottom: var(--primer-stack-padding-condensed, 8px);
-  margin-bottom: var(--primer-stack-gap-normal, 16px);
-  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+  padding-bottom: var(--stack-padding-condensed, 8px);
+  margin-bottom: var(--stack-gap-normal, 16px);
+  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
 }
@@ -30,7 +30,7 @@
 
 /* One-liner of supporting text */
 .Subhead-description {
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   color: var(--color-fg-muted);
   flex: 1 100%;
   order: 2;

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,+CAAiD,CADjD,iDAAmD,CAFnD,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,yCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,4EAA8E,CAC9E,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,6CAA+C,CAQ/C,sBAAuB,CANvB,kEAAqE,CADrE,gEAAkE,CALlE,iBAAkB,CAGlB,4CAA8C,CAF9C,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,kFAAoF,CANpF,4CAA8C,CAC9C,QAAS,CACT,2DAA8D,CAC9D,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,kDACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--primer-stack-padding-normal, 16px) 0;\n  margin-left: var(--primer-stack-gap-normal, 16px);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--primer-borderWidth-thick, 2px);\n    content: '';\n    background-color: var(--color-border-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--color-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--color-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--primer-control-medium-size, 32px);\n  height: var(--primer-control-medium-size, 32px);\n  margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);\n  margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);\n  color: var(--color-fg-muted);\n  align-items: center;\n  background-color: var(--color-timeline-badge-bg);\n  border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-success-emphasis);\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4, 4px);\n  color: var(--color-fg-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--primer-stack-gap-spacious, 24px);\n  margin: 0;\n  margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);\n  margin-left: -56px;\n  background-color: var(--color-canvas-default);\n  border: 0;\n  border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4, 4px);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--primer-stack-gap-normal, 16px);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16, 16px);\n    margin-top: var(--base-size-8, 8px);\n    margin-bottom: var(--base-size-8, 8px);\n    color: var(--color-fg-muted);\n    background-color: var(--color-canvas-default);\n    border: 0;\n  }\n}\n"]}
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAA0C,CAD1C,0CAA4C,CAF5C,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,kCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,qEAAuE,CACvE,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,sCAAwC,CAQxC,sBAAuB,CANvB,2DAA8D,CAD9D,yDAA2D,CAL3D,iBAAkB,CAGlB,qCAAuC,CAFvC,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,8CAAsD,CAFtD,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,2EAA6E,CAN7E,qCAAuC,CACvC,QAAS,CACT,oDAAuD,CACvD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--stack-padding-normal, 16px) 0;\n  margin-left: var(--stack-gap-normal, 16px);\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, 2px);\n    content: '';\n    background-color: var(--color-border-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--color-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--color-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size, 32px);\n  height: var(--control-medium-size, 32px);\n  margin-right: var(--controlStack-medium-gap-condensed, 8px);\n  margin-left: calc(var(--control-medium-size, 32px) / -2 + 1px);\n  color: var(--color-fg-muted);\n  align-items: center;\n  background-color: var(--color-timeline-badge-bg);\n  border: var(--borderWidth-thick, 2px) solid var(--color-canvas-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-success-emphasis);\n  border: var(--borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4, 4px);\n  color: var(--color-fg-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\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, 24px);\n  margin: 0;\n  margin-bottom: calc(var(--stack-gap-normal, 16px) * -1);\n  margin-left: -56px;\n  background-color: var(--color-canvas-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4, 4px);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--stack-gap-normal, 16px);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16, 16px);\n    margin-top: var(--base-size-8, 8px);\n    margin-bottom: var(--base-size-8, 8px);\n    color: var(--color-fg-muted);\n    background-color: var(--color-canvas-default);\n    border: 0;\n  }\n}\n"]}

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

@@ -3,8 +3,8 @@
 .TimelineItem {
   position: relative;
   display: flex;
-  padding: var(--primer-stack-padding-normal, 16px) 0;
-  margin-left: var(--primer-stack-gap-normal, 16px);
+  padding: var(--stack-padding-normal, 16px) 0;
+  margin-left: var(--stack-gap-normal, 16px);
 
   /* The Timeline */
   &::before {
@@ -13,7 +13,7 @@
     bottom: 0;
     left: 0;
     display: block;
-    width: var(--primer-borderWidth-thick, 2px);
+    width: var(--borderWidth-thick, 2px);
     content: '';
     background-color: var(--color-border-muted);
   }
@@ -28,14 +28,14 @@
   position: relative;
   z-index: 1;
   display: flex;
-  width: var(--primer-control-medium-size, 32px);
-  height: var(--primer-control-medium-size, 32px);
-  margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);
-  margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);
+  width: var(--control-medium-size, 32px);
+  height: var(--control-medium-size, 32px);
+  margin-right: var(--controlStack-medium-gap-condensed, 8px);
+  margin-left: calc(var(--control-medium-size, 32px) / -2 + 1px);
   color: var(--color-fg-muted);
   align-items: center;
   background-color: var(--color-timeline-badge-bg);
-  border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);
+  border: var(--borderWidth-thick, 2px) solid var(--color-canvas-default);
   border-radius: 50%;
   justify-content: center;
   flex-shrink: 0;
@@ -44,7 +44,7 @@
 .TimelineItem-badge--success {
   color: var(--color-fg-on-emphasis);
   background-color: var(--color-success-emphasis);
-  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin, 1px) solid transparent;
 }
 
 .TimelineItem-body {
@@ -64,13 +64,13 @@
 .TimelineItem-break {
   position: relative;
   z-index: 1;
-  height: var(--primer-stack-gap-spacious, 24px);
+  height: var(--stack-gap-spacious, 24px);
   margin: 0;
-  margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);
+  margin-bottom: calc(var(--stack-gap-normal, 16px) * -1);
   margin-left: -56px;
   background-color: var(--color-canvas-default);
   border: 0;
-  border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);
+  border-top: var(--borderWidth-thicker, 4px) solid var(--color-border-default);
 }
 
 .TimelineItem--condensed {
@@ -79,7 +79,7 @@
 
   /* TimelineItem--condensed is often grouped. (commits) */
   &:last-child {
-    padding-bottom: var(--primer-stack-gap-normal, 16px);
+    padding-bottom: var(--stack-gap-normal, 16px);
   }
 
   & .TimelineItem-badge {

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,wCACE,+CACF,CAEA,gDACE,eACF,CAEA,4KAKE,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      margin-left: var(--primer-control-small-gap, 4px);\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,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,wCACE,wCACF,CAEA,gDACE,eACF,CAEA,4KAKE,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      margin-left: var(--control-small-gap, 4px);\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,7 @@
     white-space: nowrap;
 
     & + .Truncate-text {
-      margin-left: var(--primer-control-small-gap, 4px);
+      margin-left: var(--control-small-gap, 4px);
     }
 
     &.Truncate-text--primary {

data/lib/postcss_mixins/activeIndicatorLine.pcss

@@ -7,5 +7,5 @@
   height: var(--base-size-24, 24px);
   content: '';
   background: var(--color-accent-fg);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
 }

data/lib/primer/view_components/linters/disallow_component_css_counter.rb

@@ -62,7 +62,7 @@ module ERBLint
       end
 
       def ruby_classes_sentence_string(class_name)
-        CLASSES[class_name].to_sentence(last_word_connector: ", or ", two_words_connector: " or ")
+        CLASSES[class_name].join(" / ")
       end
     end
   end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 1
-      PATCH = 5
+      PATCH = 7
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -23,6 +23,7 @@ module Primer
         Primer::Beta::BaseButton => {},
         Primer::Alpha::Banner => { js: true },
         Primer::Beta::Blankslate => {},
+        Primer::BlankslateComponent => {},
         Primer::Beta::BorderBox => {},
         Primer::Beta::BorderBox::Header => {},
         Primer::Box => {},

data/previews/primer/alpha/action_menu_preview/content_labels.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+  <% menu.with_show_button { "Menu" } %>
+  <% menu.with_item(value: "") do %>
+    <span class="copy-link">Copy link</span>
+  <% end %>
+  <% menu.with_item(value: "") do %>
+    <span class="quote-reply">Quote reply</span>
+  <% end %>
+<% end %>

data/previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb

@@ -0,0 +1,13 @@
+<%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+  <%= render(Primer::Alpha::ActionMenu.new(select_variant: :multiple, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
+    <% menu.with_show_button { "Strategy" } %>
+    <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+    <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+    <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+    <% menu.with_item(label: "Resolve") %>
+  <% end %>
+  <hr>
+  <div>
+    <%= f.submit(class: "Button--secondary Button--medium Button") %>
+  </div>
+<% end %>

data/previews/primer/alpha/action_menu_preview/single_select_form.html.erb

@@ -0,0 +1,13 @@
+<%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+  <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
+    <% menu.with_show_button { "Strategy" } %>
+    <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+    <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+    <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+    <% menu.with_item(label: "Resolve") %>
+  <% end %>
+  <hr>
+  <div>
+    <%= f.submit(class: "Button--secondary Button--medium Button") %>
+  </div>
+<% end %>

data/previews/primer/alpha/action_menu_preview/submitting_forms.html.erb

@@ -0,0 +1,15 @@
+<form method="get" action="?" id="my-form">
+  <input type="hidden" name="time" value="<%= Time.now.iso8601 %>">
+</form>
+<%= render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu| %>
+  <% menu.with_show_button { params["label"] || "Menu" } %>
+  <% menu.with_item(label: "Submit form", tag: "button", content_arguments: {
+    form: "my-form", type: "submit", name: "label", value: "Submitted!"
+  }) do |item| %>
+    <% if params["time"] %>
+      <% item.with_description.with_content("Last submitted at #{params["time"]}") %>
+    <% elsif %>
+      <% item.with_description.with_content("Not yet submitted") %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -9,44 +9,68 @@ module Primer
       # @param select_variant [Symbol] select [single, multiple, none]
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param size [Symbol] select [auto, small, medium, large, xlarge]
       def playground(
-        select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE
+        select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        size: Primer::Alpha::Overlay::DEFAULT_SIZE
       )
-        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side)) do |menu|
+        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, size: size)) do |menu|
           menu.with_show_button { "Menu" }
-          menu.with_item(label: "Copy link", value: "")
-          menu.with_item(label: "Quote reply", value: "")
-          menu.with_item(label: "Reference in new issue", value: "")
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply")
+          menu.with_item(label: "Reference in new issue")
           menu.with_divider
-          menu.with_item(label: "Edit", value: "")
-          menu.with_item(label: "Delete", scheme: :danger, value: "")
+          menu.with_item(label: "Edit")
+          menu.with_item(label: "Delete", scheme: :danger)
         end
       end
 
+      # @label Content labels
+      #
+      def content_labels
+      end
+
       # @label Default
       #
       def default
         render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
-          menu.with_item(label: "Copy link", value: "")
-          menu.with_item(label: "Quote reply", value: "")
-          menu.with_item(label: "Reference in new issue", value: "")
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply")
+          menu.with_item(label: "Reference in new issue")
           menu.with_divider
-          menu.with_item(label: "Edit", value: "") do |item|
+          menu.with_item(label: "Edit") do |item|
             item.with_description.with_content("Change settings")
           end
-          menu.with_item(label: "Delete", scheme: :danger, value: "") do |item|
+          menu.with_item(label: "Delete", scheme: :danger) do |item|
             item.with_description.with_content("Sayonara")
           end
         end
       end
 
+      # @label Wide
+      #
+      def wide
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single, size: :medium)) do |menu|
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "A wider menu" }
+
+          menu.with_item(label: "Default", active: true, value: "default") do |item|
+            item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
+            item.with_description { "This is an example for wide ActionMenus" }
+          end
+
+          menu.with_item(label: "Extended", active: false, value: "extended") do |item|
+            item.with_description { "It allows for extended descriptions with extra afforance for additional visuals" }
+          end
+        end
+      end
+
       # @label With icon button
       #
       def with_icon_button
         render(Primer::Alpha::ActionMenu.new) do |menu|
           menu.with_show_button(icon: :star, "aria-label": "Menu")
-          menu.with_item(label: "Does something", value: "")
+          menu.with_item(label: "Does something")
         end
       end
 
@@ -55,10 +79,10 @@ module Primer
       def single_select
         render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
           menu.with_show_button { "Menu" }
-          menu.with_item(label: "Fast forward", value: "")
-          menu.with_item(label: "Recursive", value: "")
-          menu.with_item(label: "Ours", value: "")
-          menu.with_item(label: "Resolve", value: "")
+          menu.with_item(label: "Fast forward")
+          menu.with_item(label: "Recursive")
+          menu.with_item(label: "Ours")
+          menu.with_item(label: "Resolve")
         end
       end
 
@@ -67,15 +91,15 @@ module Primer
       def multiple_select
         render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
           menu.with_show_button { "Menu" }
-          menu.with_item(label: "langermank", description_scheme: :inline, value: "") do |item|
+          menu.with_item(label: "langermank", description_scheme: :inline) do |item|
             item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/18661030?v=4", alt: "Katie Langerman")
             item.with_description.with_content("Katie Langerman")
           end
-          menu.with_item(label: "jonrohan", description_scheme: :inline, value: "") do |item|
+          menu.with_item(label: "jonrohan", description_scheme: :inline) do |item|
             item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4", alt: "Jon Rohan")
             item.with_description.with_content("Jon Rohan")
           end
-          menu.with_item(label: "broccolinisoup", description_scheme: :inline, value: "") do |item|
+          menu.with_item(label: "broccolinisoup", description_scheme: :inline) do |item|
             item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/1446503?v=4", alt: "Armağan Ersöz")
             item.with_description.with_content("Armağan Ersöz")
           end
@@ -98,9 +122,9 @@ module Primer
       def single_selected_item
         render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
           menu.with_show_button { "Menu" }
-          menu.with_item(label: "Copy link", value: "")
-          menu.with_item(label: "Quote reply", active: true, value: "")
-          menu.with_item(label: "Reference in new issue", value: "")
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply", active: true)
+          menu.with_item(label: "Reference in new issue")
         end
       end
 
@@ -108,10 +132,12 @@ module Primer
       #
       def single_select_with_internal_label
         render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
-          menu.with_show_button { "Menu" }
-          menu.with_item(label: "Copy link", value: "")
-          menu.with_item(label: "Quote reply", active: true, value: "")
-          menu.with_item(label: "Reference in new issue", value: "")
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
+          menu.with_item(label: "Copy link") do |item|
+            item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
+          end
+          menu.with_item(label: "Quote reply", active: true)
+          menu.with_item(label: "Reference in new issue")
         end
       end
 
@@ -120,15 +146,15 @@ module Primer
       def multiple_selected_items
         render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
           menu.with_show_button { "Menu" }
-          menu.with_item(label: "langermank", description_scheme: :inline, value: "", active: true) do |item|
+          menu.with_item(label: "langermank", description_scheme: :inline, active: true) do |item|
             item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/18661030?v=4", alt: "Katie Langerman")
             item.with_description.with_content("Katie Langerman")
           end
-          menu.with_item(label: "jonrohan", description_scheme: :inline, value: "") do |item|
+          menu.with_item(label: "jonrohan", description_scheme: :inline) do |item|
             item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4", alt: "Jon Rohan")
             item.with_description.with_content("Jon Rohan")
           end
-          menu.with_item(label: "broccolinisoup", description_scheme: :inline, value: "", active: true) do |item|
+          menu.with_item(label: "broccolinisoup", description_scheme: :inline, active: true) do |item|
             item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/1446503?v=4", alt: "Armağan Ersöz")
             item.with_description.with_content("Armağan Ersöz")
           end
@@ -156,18 +182,37 @@ module Primer
       def with_actions
         render(Primer::Alpha::ActionMenu.new) do |component|
           component.with_show_button { "Trigger" }
-          component.with_item(label: "Does something", tag: :button, classes: "do-something-js")
-          component.with_item(label: "Site", tag: :a, href: "/")
-          component.with_item(label: "Copy text", tag: :"clipboard-copy", value: "Text to copy")
+          component.with_item(label: "Alert", tag: :button, content_arguments: { onclick: "alert('Foo')", onkeydown: "if (event.key === 'Enter') { alert(event.key) }" })
+          component.with_item(label: "Navigate", tag: :a, content_arguments: { href: UrlHelpers.action_menu_landing_path })
+          component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" })
+          component.with_item(
+            label: "Submit form",
+            href: UrlHelpers.action_menu_form_action_path,
+            form_arguments: {
+              name: "foo", value: "bar", method: :post
+            }
+          )
         end
       end
 
+      # @label Single select form
+      #
+      def single_select_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
+      # @label Multiple select form
+      #
+      def multiple_select_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
       # @label With disabled items
       #
       def with_disabled_items
         render(Primer::Alpha::ActionMenu.new) do |component|
           component.with_show_button { "Trigger" }
-          component.with_item(label: "Does something", tag: :button, value: "", disabled: true)
+          component.with_item(label: "Does something", tag: :button, disabled: true)
           component.with_item(label: "Site", tag: :a, href: "/", disabled: true)
         end
       end
@@ -193,18 +238,24 @@ module Primer
       def block_description
         render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
-          menu.with_item(label: "Item label", value: "") do |item|
+          menu.with_item(label: "Item label") do |item|
             item.with_description.with_content("Block description")
           end
         end
       end
 
+      # @label [Item] Submitting Forms
+      #
+      def submitting_forms
+        render_with_template(locals: {})
+      end
+
       # @label [Item] Inline description
       #
       def inline_description
         render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
-          menu.with_item(label: "Item label", value: "", description_scheme: :inline) do |item|
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
             item.with_description.with_content("Inline description")
           end
         end
@@ -215,7 +266,7 @@ module Primer
       def leading_visual
         render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
-          menu.with_item(label: "Item label", value: "", description_scheme: :inline) do |item|
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
             item.with_leading_visual_icon(icon: :gear)
             item.with_description.with_content("Inline description")
           end
@@ -227,7 +278,7 @@ module Primer
       def leading_visual_single_select
         render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1", select_variant: :single)) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
-          menu.with_item(label: "Item label", value: "", description_scheme: :inline) do |item|
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
             item.with_leading_visual_icon(icon: :gear)
             item.with_description.with_content("Inline description")
           end