primer_view_components 0.33.0 → 0.35.0

data/app/components/primer/alpha/stack.css

@@ -0,0 +1 @@
+.Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}}

data/app/components/primer/alpha/stack.css.json

@@ -0,0 +1,90 @@
+{
+  "name": "alpha/stack",
+  "selectors": [
+    ".Stack",
+    ".Stack[data-padding-narrow=none]",
+    ".Stack[data-padding=none]",
+    ".Stack[data-padding-narrow=condensed]",
+    ".Stack[data-padding=condensed]",
+    ".Stack[data-padding-narrow=normal]",
+    ".Stack[data-padding=normal]",
+    ".Stack[data-padding-narrow=spacious]",
+    ".Stack[data-padding=spacious]",
+    ".Stack[data-direction-narrow=horizontal]",
+    ".Stack[data-direction=horizontal]",
+    ".Stack[data-direction-narrow=vertical]",
+    ".Stack[data-direction=vertical]",
+    ".Stack[data-gap-narrow=none]",
+    ".Stack[data-gap=none]",
+    ".Stack[data-gap-narrow=condensed]",
+    ".Stack[data-gap=condensed]",
+    ".Stack[data-gap-narrow=normal]",
+    ".Stack[data-gap=normal]",
+    ".Stack[data-gap-narrow=spacious]",
+    ".Stack[data-gap=spacious]",
+    ".Stack[data-align-narrow=start]",
+    ".Stack[data-align=start]",
+    ".Stack[data-align-narrow=center]",
+    ".Stack[data-align=center]",
+    ".Stack[data-align-narrow=end]",
+    ".Stack[data-align=end]",
+    ".Stack[data-align-narrow=baseline]",
+    ".Stack[data-align=baseline]",
+    ".Stack[data-justify-narrow=start]",
+    ".Stack[data-justify=start]",
+    ".Stack[data-justify-narrow=center]",
+    ".Stack[data-justify=center]",
+    ".Stack[data-justify-narrow=end]",
+    ".Stack[data-justify=end]",
+    ".Stack[data-justify-narrow=space-between]",
+    ".Stack[data-justify=space-between]",
+    ".Stack[data-justify-narrow=space-evenly]",
+    ".Stack[data-justify=space-evenly]",
+    ".Stack[data-wrap-narrow=wrap]",
+    ".Stack[data-wrap=wrap]",
+    ".Stack[data-wrap-narrow=nowrap]",
+    ".Stack[data-wrap=nowrap]",
+    ".Stack[data-padding-regular=none]",
+    ".Stack[data-padding-regular=condensed]",
+    ".Stack[data-padding-regular=normal]",
+    ".Stack[data-padding-regular=spacious]",
+    ".Stack[data-direction-regular=horizontal]",
+    ".Stack[data-direction-regular=vertical]",
+    ".Stack[data-gap-regular=none]",
+    ".Stack[data-gap-regular=condensed]",
+    ".Stack[data-gap-regular=normal]",
+    ".Stack[data-gap-regular=spacious]",
+    ".Stack[data-align-regular=start]",
+    ".Stack[data-align-regular=center]",
+    ".Stack[data-align-regular=end]",
+    ".Stack[data-align-regular=baseline]",
+    ".Stack[data-justify-regular=start]",
+    ".Stack[data-justify-regular=center]",
+    ".Stack[data-justify-regular=end]",
+    ".Stack[data-justify-regular=space-between]",
+    ".Stack[data-justify-regular=space-evenly]",
+    ".Stack[data-wrap-regular=wrap]",
+    ".Stack[data-wrap-regular=nowrap]",
+    ".Stack[data-padding-wide=none]",
+    ".Stack[data-padding-wide=condensed]",
+    ".Stack[data-padding-wide=normal]",
+    ".Stack[data-padding-wide=spacious]",
+    ".Stack[data-direction-wide=horizontal]",
+    ".Stack[data-direction-wide=vertical]",
+    ".Stack[data-gap-wide=none]",
+    ".Stack[data-gap-wide=condensed]",
+    ".Stack[data-gap-wide=normal]",
+    ".Stack[data-gap-wide=spacious]",
+    ".Stack[data-align-wide=start]",
+    ".Stack[data-align-wide=center]",
+    ".Stack[data-align-wide=end]",
+    ".Stack[data-align-wide=baseline]",
+    ".Stack[data-justify-wide=start]",
+    ".Stack[data-justify-wide=center]",
+    ".Stack[data-justify-wide=end]",
+    ".Stack[data-justify-wide=space-between]",
+    ".Stack[data-justify-wide=space-evenly]",
+    ".Stack[data-wrap-wide=wrap]",
+    ".Stack[data-wrap-wide=nowrap]"
+  ]
+}

data/app/components/primer/alpha/stack.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["stack.pcss"],"names":[],"mappings":"AAAA,OAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDAmSF,CA/RE,2DAEE,SACF,CAEA,qEAGE,0CACF,CAEA,+DAGE,wCACF,CAEA,mEAGE,0CACF,CAEA,2EAEE,aACF,CAEA,uEAEE,gBACF,CAEA,mDAEE,mCACF,CAEA,6DAEE,6CACF,CAEA,uDAEE,wCACF,CAEA,2DAEE,4CACF,CAEA,yDAEE,sBACF,CAEA,2DAEE,kBACF,CAEA,qDAEE,oBACF,CAEA,+DAEE,oBACF,CAEA,6DAEE,0BACF,CAEA,+DAEE,sBACF,CAEA,yDAEE,wBACF,CAEA,6EAEE,6BACF,CAEA,2EAEE,4BACF,CAEA,qDAEE,cACF,CAEA,yDAEE,gBACF,CAGA,yBACE,kCACE,SACF,CAEA,uCAEE,0CACF,CAEA,oCAEE,wCACF,CAEA,sCAEE,0CACF,CAEA,0CACE,aACF,CAEA,wCACE,gBACF,CAEA,8BACE,mCACF,CAEA,mCACE,6CACF,CAEA,gCACE,wCACF,CAEA,kCACE,4CACF,CAEA,iCACE,sBACF,CAEA,kCACE,kBACF,CAEA,+BACE,oBACF,CAEA,oCACE,oBACF,CAEA,mCACE,0BACF,CAEA,oCACE,sBACF,CAEA,iCACE,wBACF,CAEA,2CACE,6BACF,CAEA,0CACE,4BACF,CAEA,+BACE,cACF,CAEA,iCACE,gBACF,CACF,CAGA,2BACE,+BACE,SACF,CAEA,oCAEE,0CACF,CAEA,iCAEE,wCACF,CAEA,mCAEE,0CACF,CAEA,uCACE,aACF,CAEA,qCACE,gBACF,CAEA,2BACE,mCACF,CAEA,gCACE,6CACF,CAEA,6BACE,wCACF,CAEA,+BACE,4CACF,CAEA,8BACE,sBACF,CAEA,+BACE,kBACF,CAEA,4BACE,oBACF,CAEA,iCACE,oBACF,CAEA,gCACE,0BACF,CAEA,iCACE,sBACF,CAEA,8BACE,wBACF,CAEA,wCACE,6BACF,CAEA,uCACE,4BACF,CAEA,4BACE,cACF,CAEA,8BACE,gBACF,CACF","file":"stack.css","sourcesContent":[".Stack {\n  display: flex;\n  flex-flow: column;\n  align-items: stretch;\n  align-content: flex-start;\n  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));\n\n  /* non-responsive values */\n\n  &[data-padding='none'],\n  &[data-padding-narrow='none'] {\n    padding: 0;\n  }\n\n  &[data-padding='condensed'],\n  &[data-padding-narrow='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed, 8px);\n  }\n\n  &[data-padding='normal'],\n  &[data-padding-narrow='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-normal, 16px);\n  }\n\n  &[data-padding='spacious'],\n  &[data-padding-narrow='spacious'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious, 24px);\n  }\n\n  &[data-direction='horizontal'],\n  &[data-direction-narrow='horizontal'] {\n    flex-flow: row;\n  }\n\n  &[data-direction='vertical'],\n  &[data-direction-narrow='vertical'] {\n    flex-flow: column;\n  }\n\n  &[data-gap='none'],\n  &[data-gap-narrow='none'] {\n    --stack-gap: var(--stack-gap-none, 0);\n  }\n\n  &[data-gap='condensed'],\n  &[data-gap-narrow='condensed'] {\n    --stack-gap: var(--stack-gap-condensed, 0.5rem);\n  }\n\n  &[data-gap='normal'],\n  &[data-gap-narrow='normal'] {\n    --stack-gap: var(--stack-gap-normal, 1rem);\n  }\n\n  &[data-gap='spacious'],\n  &[data-gap-narrow='spacious'] {\n    --stack-gap: var(--stack-gap-spacious, 1.5rem);\n  }\n\n  &[data-align='start'],\n  &[data-align-narrow='start'] {\n    align-items: flex-start;\n  }\n\n  &[data-align='center'],\n  &[data-align-narrow='center'] {\n    align-items: center;\n  }\n\n  &[data-align='end'],\n  &[data-align-narrow='end'] {\n    align-items: flex-end;\n  }\n\n  &[data-align='baseline'],\n  &[data-align-narrow='baseline'] {\n    align-items: baseline;\n  }\n\n  &[data-justify='start'],\n  &[data-justify-narrow='start'] {\n    justify-content: flex-start;\n  }\n\n  &[data-justify='center'],\n  &[data-justify-narrow='center'] {\n    justify-content: center;\n  }\n\n  &[data-justify='end'],\n  &[data-justify-narrow='end'] {\n    justify-content: flex-end;\n  }\n\n  &[data-justify='space-between'],\n  &[data-justify-narrow='space-between'] {\n    justify-content: space-between;\n  }\n\n  &[data-justify='space-evenly'],\n  &[data-justify-narrow='space-evenly'] {\n    justify-content: space-evenly;\n  }\n\n  &[data-wrap='wrap'],\n  &[data-wrap-narrow='wrap'] {\n    flex-wrap: wrap;\n  }\n\n  &[data-wrap='nowrap'],\n  &[data-wrap-narrow='nowrap'] {\n    flex-wrap: nowrap;\n  }\n\n  /* @custom-media --veiwportRange-regular */\n  @media (min-width: 48rem) {\n    &[data-padding-regular='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-regular='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed, 8px);\n    }\n\n    &[data-padding-regular='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal, 16px);\n    }\n\n    &[data-padding-regular='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious, 24px);\n    }\n\n    &[data-direction-regular='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-regular='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-regular='none'] {\n      --stack-gap: var(--stack-gap-none, 0);\n    }\n\n    &[data-gap-regular='condensed'] {\n      --stack-gap: var(--stack-gap-condensed, 0.5rem);\n    }\n\n    &[data-gap-regular='normal'] {\n      --stack-gap: var(--stack-gap-normal, 1rem);\n    }\n\n    &[data-gap-regular='spacious'] {\n      --stack-gap: var(--stack-gap-spacious, 1.5rem);\n    }\n\n    &[data-align-regular='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-regular='center'] {\n      align-items: center;\n    }\n\n    &[data-align-regular='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-regular='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-regular='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-regular='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-regular='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-regular='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-regular='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-regular='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-regular='nowrap'] {\n      flex-wrap: nowrap;\n    }\n  }\n\n  /* @custom-media --viewportRange-wide */\n  @media (min-width: 87.5rem) {\n    &[data-padding-wide='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-wide='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed, 8px);\n    }\n\n    &[data-padding-wide='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal, 16px);\n    }\n\n    &[data-padding-wide='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious, 24px);\n    }\n\n    &[data-direction-wide='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-wide='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-wide='none'] {\n      --stack-gap: var(--stack-gap-none, 0);\n    }\n\n    &[data-gap-wide='condensed'] {\n      --stack-gap: var(--stack-gap-condensed, 0.5rem);\n    }\n\n    &[data-gap-wide='normal'] {\n      --stack-gap: var(--stack-gap-normal, 1rem);\n    }\n\n    &[data-gap-wide='spacious'] {\n      --stack-gap: var(--stack-gap-spacious, 1.5rem);\n    }\n\n    &[data-align-wide='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-wide='center'] {\n      align-items: center;\n    }\n\n    &[data-align-wide='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-wide='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-wide='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-wide='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-wide='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-wide='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-wide='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-wide='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-wide='nowrap'] {\n      flex-wrap: nowrap;\n    }\n  }\n}\n"]}

data/app/components/primer/alpha/stack.html.erb

@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= content %>
+<% end %>

data/app/components/primer/alpha/stack.pcss

@@ -0,0 +1,297 @@
+.Stack {
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
+
+  /* non-responsive values */
+
+  &[data-padding='none'],
+  &[data-padding-narrow='none'] {
+    padding: 0;
+  }
+
+  &[data-padding='condensed'],
+  &[data-padding-narrow='condensed'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-condensed, 8px);
+  }
+
+  &[data-padding='normal'],
+  &[data-padding-narrow='normal'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-normal, 16px);
+  }
+
+  &[data-padding='spacious'],
+  &[data-padding-narrow='spacious'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-spacious, 24px);
+  }
+
+  &[data-direction='horizontal'],
+  &[data-direction-narrow='horizontal'] {
+    flex-flow: row;
+  }
+
+  &[data-direction='vertical'],
+  &[data-direction-narrow='vertical'] {
+    flex-flow: column;
+  }
+
+  &[data-gap='none'],
+  &[data-gap-narrow='none'] {
+    --stack-gap: var(--stack-gap-none, 0);
+  }
+
+  &[data-gap='condensed'],
+  &[data-gap-narrow='condensed'] {
+    --stack-gap: var(--stack-gap-condensed, 0.5rem);
+  }
+
+  &[data-gap='normal'],
+  &[data-gap-narrow='normal'] {
+    --stack-gap: var(--stack-gap-normal, 1rem);
+  }
+
+  &[data-gap='spacious'],
+  &[data-gap-narrow='spacious'] {
+    --stack-gap: var(--stack-gap-spacious, 1.5rem);
+  }
+
+  &[data-align='start'],
+  &[data-align-narrow='start'] {
+    align-items: flex-start;
+  }
+
+  &[data-align='center'],
+  &[data-align-narrow='center'] {
+    align-items: center;
+  }
+
+  &[data-align='end'],
+  &[data-align-narrow='end'] {
+    align-items: flex-end;
+  }
+
+  &[data-align='baseline'],
+  &[data-align-narrow='baseline'] {
+    align-items: baseline;
+  }
+
+  &[data-justify='start'],
+  &[data-justify-narrow='start'] {
+    justify-content: flex-start;
+  }
+
+  &[data-justify='center'],
+  &[data-justify-narrow='center'] {
+    justify-content: center;
+  }
+
+  &[data-justify='end'],
+  &[data-justify-narrow='end'] {
+    justify-content: flex-end;
+  }
+
+  &[data-justify='space-between'],
+  &[data-justify-narrow='space-between'] {
+    justify-content: space-between;
+  }
+
+  &[data-justify='space-evenly'],
+  &[data-justify-narrow='space-evenly'] {
+    justify-content: space-evenly;
+  }
+
+  &[data-wrap='wrap'],
+  &[data-wrap-narrow='wrap'] {
+    flex-wrap: wrap;
+  }
+
+  &[data-wrap='nowrap'],
+  &[data-wrap-narrow='nowrap'] {
+    flex-wrap: nowrap;
+  }
+
+  /* @custom-media --veiwportRange-regular */
+  @media (min-width: 48rem) {
+    &[data-padding-regular='none'] {
+      padding: 0;
+    }
+
+    &[data-padding-regular='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    &[data-padding-regular='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    &[data-padding-regular='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    &[data-direction-regular='horizontal'] {
+      flex-flow: row;
+    }
+
+    &[data-direction-regular='vertical'] {
+      flex-flow: column;
+    }
+
+    &[data-gap-regular='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    &[data-gap-regular='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    &[data-gap-regular='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    &[data-gap-regular='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    &[data-align-regular='start'] {
+      align-items: flex-start;
+    }
+
+    &[data-align-regular='center'] {
+      align-items: center;
+    }
+
+    &[data-align-regular='end'] {
+      align-items: flex-end;
+    }
+
+    &[data-align-regular='baseline'] {
+      align-items: baseline;
+    }
+
+    &[data-justify-regular='start'] {
+      justify-content: flex-start;
+    }
+
+    &[data-justify-regular='center'] {
+      justify-content: center;
+    }
+
+    &[data-justify-regular='end'] {
+      justify-content: flex-end;
+    }
+
+    &[data-justify-regular='space-between'] {
+      justify-content: space-between;
+    }
+
+    &[data-justify-regular='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    &[data-wrap-regular='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-regular='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }
+
+  /* @custom-media --viewportRange-wide */
+  @media (min-width: 87.5rem) {
+    &[data-padding-wide='none'] {
+      padding: 0;
+    }
+
+    &[data-padding-wide='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    &[data-padding-wide='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    &[data-padding-wide='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    &[data-direction-wide='horizontal'] {
+      flex-flow: row;
+    }
+
+    &[data-direction-wide='vertical'] {
+      flex-flow: column;
+    }
+
+    &[data-gap-wide='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    &[data-gap-wide='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    &[data-gap-wide='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    &[data-gap-wide='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    &[data-align-wide='start'] {
+      align-items: flex-start;
+    }
+
+    &[data-align-wide='center'] {
+      align-items: center;
+    }
+
+    &[data-align-wide='end'] {
+      align-items: flex-end;
+    }
+
+    &[data-align-wide='baseline'] {
+      align-items: baseline;
+    }
+
+    &[data-justify-wide='start'] {
+      justify-content: flex-start;
+    }
+
+    &[data-justify-wide='center'] {
+      justify-content: center;
+    }
+
+    &[data-justify-wide='end'] {
+      justify-content: flex-end;
+    }
+
+    &[data-justify-wide='space-between'] {
+      justify-content: space-between;
+    }
+
+    &[data-justify-wide='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    &[data-wrap-wide='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-wide='nowrap'] {
+      flex-wrap: nowrap;
+    }
+  }
+}

data/app/components/primer/alpha/stack.rb

@@ -0,0 +1,185 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Stack is a layout component that creates responsive horizontal and vertical flows.
+    class Stack < Primer::Component
+      DEFAULT_TAG = :div
+
+      # Stack's justify argument. Used internally.
+      class JustifyArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :start
+        MAPPING = {
+          DEFAULT => "start",
+          :center => "center",
+          :end => "end",
+          :space_between => "space-between",
+          :space_evenly => "space-evenly"
+        }.freeze
+        OPTIONS = [nil, *MAPPING.keys.freeze]
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT) do |value|
+            MAPPING[value]
+          end
+        end
+
+        def self.arg_name
+          :justify
+        end
+      end
+
+      # Stack's direction argument. Used internally.
+      class DirectionArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :vertical
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :horizontal
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :direction
+        end
+      end
+
+      # Stack's align argument. Used internally.
+      class AlignArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :stretch
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :start,
+          :center,
+          :end,
+          :baseline
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :align
+        end
+      end
+
+      # Stack's wrap argument. Used internally.
+      class WrapArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :nowrap
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :wrap
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :wrap
+        end
+      end
+
+      # Stack's padding argument. Used internally.
+      class PaddingArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = :none
+        OPTIONS = [
+          nil,
+          DEFAULT,
+          :condensed,
+          :normal,
+          :spacious
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :padding
+        end
+      end
+
+      # Stack's gap argument. Used internally.
+      class GapArg < Primer::ResponsiveArg
+        attr_reader :values
+        DEFAULT = nil
+        OPTIONS = [
+          DEFAULT,
+          :condensed,
+          :normal,
+          :spacious
+        ].freeze
+
+        def initialize(values)
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
+        end
+
+        def self.arg_name
+          :gap
+        end
+      end
+
+      ARG_CLASSES = [
+        JustifyArg,
+        DirectionArg,
+        AlignArg,
+        WrapArg,
+        PaddingArg,
+        GapArg
+      ].freeze
+
+
+      # @param tag [Symbol] Customize the element type of the rendered container.
+      # @param gap [Symbol] Specify the gap between children elements in the stack. <%= one_of(Primer::Alpha::Stack::GapArg::OPTIONS) %>
+      # @param direction [Symbol] Specify the direction for the stack container. <%= one_of(Primer::Alpha::Stack::DirectionArg::OPTIONS) %>
+      # @param align [Symbol] Specify the alignment between items in the cross-axis of the direction. <%= one_of(Primer::Alpha::Stack::AlignArg::OPTIONS) %>
+      # @param wrap [Symbol] Specify whether items are forced onto one line or can wrap onto multiple lines. <%= one_of(Primer::Alpha::Stack::WrapArg::OPTIONS) %>
+      # @param justify [Symbol] Specify how items will be distributed in the stacking direction. <%= one_of(Primer::Alpha::Stack::JustifyArg::OPTIONS) %>
+      # @param padding [Symbol] Specify the padding of the stack container. <%= one_of(Primer::Alpha::Stack::PaddingArg::OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        tag: DEFAULT_TAG,
+        justify: JustifyArg::DEFAULT,
+        gap: GapArg::DEFAULT,
+        direction: DirectionArg::DEFAULT,
+        align: AlignArg::DEFAULT,
+        wrap: WrapArg::DEFAULT,
+        padding: PaddingArg::DEFAULT,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+
+        @system_arguments[:tag] = tag
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "Stack"
+        )
+
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: {
+              **JustifyArg.for(justify).to_data_attributes,
+              **GapArg.for(gap).to_data_attributes,
+              **DirectionArg.for(direction).to_data_attributes,
+              **AlignArg.for(align).to_data_attributes,
+              **WrapArg.for(wrap).to_data_attributes,
+              **PaddingArg.for(padding).to_data_attributes,
+            }
+          }
+        )
+      end
+    end
+  end
+end

data/app/components/primer/alpha/stack_item.css

@@ -0,0 +1 @@
+.StackItem{flex:0 1 auto;min-inline-size:0}.StackItem[data-grow-narrow=true],.StackItem[data-grow=true]{flex-grow:1}@media (min-width:48rem){.StackItem[data-grow-regular=true]{flex-grow:1}.StackItem[data-grow-regular=false]{flex-grow:0}}@media (min-width:87.5rem){.StackItem[data-grow-wide=true]{flex-grow:1}.StackItem[data-grow-wide=false]{flex-grow:0}}

data/app/components/primer/alpha/stack_item.css.json

@@ -0,0 +1,12 @@
+{
+  "name": "alpha/stack_item",
+  "selectors": [
+    ".StackItem",
+    ".StackItem[data-grow-narrow=true]",
+    ".StackItem[data-grow=true]",
+    ".StackItem[data-grow-regular=true]",
+    ".StackItem[data-grow-regular=false]",
+    ".StackItem[data-grow-wide=true]",
+    ".StackItem[data-grow-wide=false]"
+  ]
+}

data/app/components/primer/alpha/stack_item.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["stack_item.pcss"],"names":[],"mappings":"AAAA,WACE,aAAc,CACd,iBA4BF,CA1BE,6DAEE,WACF,CAGA,yBACE,mCACE,WACF,CAEA,oCACE,WACF,CACF,CAGA,2BACE,gCACE,WACF,CAEA,iCACE,WACF,CACF","file":"stack_item.css","sourcesContent":[".StackItem {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n\n  &[data-grow='true'],\n  &[data-grow-narrow='true'] {\n    flex-grow: 1;\n  }\n\n  /* @custom-media --veiwportRange-regular */\n  @media (min-width: 48rem) {\n    &[data-grow-regular='true'] {\n      flex-grow: 1;\n    }\n\n    &[data-grow-regular='false'] {\n      flex-grow: 0;\n    }\n  }\n\n  /* @custom-media --viewportRange-wide */\n  @media (min-width: 87.5rem) {\n    &[data-grow-wide='true'] {\n      flex-grow: 1;\n    }\n\n    &[data-grow-wide='false'] {\n      flex-grow: 0;\n    }\n  }\n}\n"]}

data/app/components/primer/alpha/stack_item.html.erb

@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= content %>
+<% end %>

data/app/components/primer/alpha/stack_item.pcss

@@ -0,0 +1,31 @@
+.StackItem {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+
+  &[data-grow='true'],
+  &[data-grow-narrow='true'] {
+    flex-grow: 1;
+  }
+
+  /* @custom-media --veiwportRange-regular */
+  @media (min-width: 48rem) {
+    &[data-grow-regular='true'] {
+      flex-grow: 1;
+    }
+
+    &[data-grow-regular='false'] {
+      flex-grow: 0;
+    }
+  }
+
+  /* @custom-media --viewportRange-wide */
+  @media (min-width: 87.5rem) {
+    &[data-grow-wide='true'] {
+      flex-grow: 1;
+    }
+
+    &[data-grow-wide='false'] {
+      flex-grow: 0;
+    }
+  }
+}