primer_view_components 0.1.6 → 0.1.7

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 = 6
+      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/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,10 +9,12 @@ 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")
           menu.with_item(label: "Quote reply")
@@ -46,6 +48,23 @@ module Primer
         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
@@ -166,9 +185,28 @@ module Primer
           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
@@ -206,6 +244,12 @@ module Primer
         end
       end
 
+      # @label [Item] Submitting Forms
+      #
+      def submitting_forms
+        render_with_template(locals: {})
+      end
+
       # @label [Item] Inline description
       #
       def inline_description

data/static/arguments.json

@@ -43,6 +43,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an [ActionMenu](/components/alpha/actionmenu) instead of using this feature directly."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -73,6 +79,17 @@
       }
     ]
   },
+  {
+    "component": "ActionList::FormWrapper",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionListFormWrapper",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/form_wrapper.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/form_wrapper/default/",
+    "parameters": [
+
+    ]
+  },
   {
     "component": "ActionList::Heading",
     "status": "alpha",
@@ -169,6 +186,12 @@
         "default": "`{}`",
         "description": "[System arguments](/system-arguments) used to construct the item's anchor or button tag."
       },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows the item to submit a form on click. The URL passed in the `href:` option will be used as the form action. Pass the `method:` option to this hash to control what kind of request is made, One of `:delete`, `:get`, `:head`, `:patch`, `:post`, or `:put`. The `name:` option is required and specifies the desired name of the field that will be included in the params sent to the server on form submission. Specify the `value:` option to send a custom value to the server; otherwise the value of `name:` is sent."
+      },
       {
         "name": "truncate_label",
         "type": "Boolean",
@@ -263,6 +286,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
       },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`.."
+      },
       {
         "name": "src",
         "type": "String",
@@ -291,7 +320,13 @@
         "name": "select_variant",
         "type": "Symbol",
         "default": "`:none`",
-        "description": ". One of `:multiple`, `:none`, or `:single`.."
+        "description": "One of `:multiple`, `:none`, or `:single`."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
       },
       {
         "name": "system_arguments",
@@ -319,7 +354,7 @@
         "name": "system_arguments",
         "type": "Hash",
         "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)"
       }
     ]
   },

data/static/audited_at.json

@@ -1,6 +1,7 @@
 {
   "Primer::Alpha::ActionList": "",
   "Primer::Alpha::ActionList::Divider": "",
+  "Primer::Alpha::ActionList::FormWrapper": "",
   "Primer::Alpha::ActionList::Heading": "",
   "Primer::Alpha::ActionList::Item": "",
   "Primer::Alpha::ActionMenu": "",

data/static/constants.json

@@ -5,6 +5,7 @@
     "DEFAULT_SCHEME": "full",
     "DEFAULT_SELECT_VARIANT": "none",
     "Divider": "Primer::Alpha::ActionList::Divider",
+    "FormWrapper": "Primer::Alpha::ActionList::FormWrapper",
     "Heading": "Primer::Alpha::ActionList::Heading",
     "Item": "Primer::Alpha::ActionList::Item",
     "MENU_ROLE": "menu",
@@ -39,6 +40,17 @@
       "filled"
     ]
   },
+  "Primer::Alpha::ActionList::FormWrapper": {
+    "DEFAULT_HTTP_METHOD": "get",
+    "HTTP_METHOD_OPTIONS": [
+      "get",
+      "post",
+      "patch",
+      "put",
+      "delete",
+      "head"
+    ]
+  },
   "Primer::Alpha::ActionList::Heading": {
     "DEFAULT_SCHEME": "subtle",
     "HEADING_LEVELS": [
@@ -623,7 +635,12 @@
     ]
   },
   "Primer::Beta::AutoComplete::Item": {
-    "ALLOWED_DESCRIPTION_VARIANTS": [
+    "DEFAULT_DESCRIPTION_VARIANT": "block",
+    "DESCRIPTION_VARIANT_MAPPINGS": {
+      "inline": "ActionListItem-descriptionWrap--inline",
+      "block": "ActionListItem-descriptionWrap"
+    },
+    "DESCRIPTION_VARIANT_OPTIONS": [
       "inline",
       "block"
     ]