@primer/view-components 0.45.1-rc.015a120e → 0.45.2

package/app/components/primer/alpha/layout.css

@@ -1 +1,374 @@
-.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));grid-gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--borderColor-default);display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-lg,:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-md,:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
+/* Layout */
+
+.Layout {
+  display: grid;
+
+  --Layout-sidebar-width: 220px;
+  --Layout-gutter: 16px;
+}
+
+@media (max-width: calc(544px - 0.02px)) {
+
+.Layout {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr !important;
+}
+    .Layout .Layout-sidebar,.Layout .Layout-divider,.Layout .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+    .Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout.Layout--sidebarPosition-flowRow-start .Layout-main {
+      grid-row: 2 / span 2;
+    }
+    .Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout.Layout--sidebarPosition-flowRow-end .Layout-main {
+      grid-row: 1;
+    }
+    .Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
+      display: none;
+    }
+    .Layout.Layout--divided {
+    --Layout-gutter: 0;
+  }
+    .Layout.Layout--divided .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+  }
+
+    .Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider) {
+      display: none;
+    }
+
+    .Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider) {
+      height: 8px;
+      margin-right: 0;
+      background: var(--bgColor-inset);
+      border-color: var(--borderColor-default);
+      border-style: solid;
+      border-width: var(--borderWidth-thin) 0;
+    }
+
+    .Layout.Layout--divided .Layout-main {
+      grid-row: 3 / span 1;
+    }
+      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
+        grid-row: 1;
+      }
+  }
+
+@media (max-width: calc(768px - 0.02px)) {
+
+.Layout.Layout--flowRow-until-md {
+      grid-auto-flow: row;
+      grid-template-columns: 1fr !important;
+  }
+      .Layout.Layout--flowRow-until-md .Layout-sidebar,.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main {
+      grid-row: 2 / span 2;
+    }
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main {
+      grid-row: 1;
+    }
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
+      display: none;
+    }
+      .Layout.Layout--flowRow-until-md.Layout--divided {
+    --Layout-gutter: 0;
+  }
+    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+  }
+
+    .Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider) {
+      display: none;
+    }
+
+    .Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider) {
+      height: 8px;
+      margin-right: 0;
+      background: var(--bgColor-inset);
+      border-color: var(--borderColor-default);
+      border-style: solid;
+      border-width: var(--borderWidth-thin) 0;
+    }
+
+    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-main {
+      grid-row: 3 / span 1;
+    }
+      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
+        grid-row: 1;
+      }
+    }
+
+@media (max-width: calc(1012px - 0.02px)) {
+
+.Layout.Layout--flowRow-until-lg {
+      grid-auto-flow: row;
+      grid-template-columns: 1fr !important;
+  }
+      .Layout.Layout--flowRow-until-lg .Layout-sidebar,.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main {
+      grid-row: 2 / span 2;
+    }
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main {
+      grid-row: 1;
+    }
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
+      display: none;
+    }
+      .Layout.Layout--flowRow-until-lg.Layout--divided {
+    --Layout-gutter: 0;
+  }
+    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+  }
+
+    .Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider) {
+      display: none;
+    }
+
+    .Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider) {
+      height: 8px;
+      margin-right: 0;
+      background: var(--bgColor-inset);
+      border-color: var(--borderColor-default);
+      border-style: solid;
+      border-width: var(--borderWidth-thin) 0;
+    }
+
+    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main {
+      grid-row: 3 / span 1;
+    }
+      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
+        grid-row: 1;
+      }
+    }
+
+.Layout {
+
+  /* Flow as column */
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
+  grid-gap: var(--Layout-gutter);
+}
+
+.Layout .Layout-sidebar {
+    grid-column: 1;
+  }
+
+.Layout .Layout-divider {
+    display: none;
+  }
+
+.Layout .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+/* Gutter spacing */
+
+@media (min-width: 1012px) {
+
+.Layout {
+    --Layout-gutter: 24px;
+}
+  }
+
+.Layout.Layout--gutter-none {
+    --Layout-gutter: 0px;
+  }
+
+.Layout.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--gutter-spacious {
+      --Layout-gutter: 32px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--gutter-spacious {
+      --Layout-gutter: 40px;
+  }
+    }
+
+/* Sidebar width */
+
+@media (min-width: 544px) {
+
+.Layout {
+    --Layout-sidebar-width: 220px;
+}
+  }
+
+@media (min-width: 768px) {
+
+.Layout {
+    --Layout-sidebar-width: 256px;
+}
+  }
+
+@media (min-width: 1012px) {
+
+.Layout {
+    --Layout-sidebar-width: 296px;
+}
+  }
+
+@media (min-width: 768px) {
+
+.Layout.Layout--sidebar-narrow {
+      --Layout-sidebar-width: 240px;
+  }
+    }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-narrow {
+      --Layout-sidebar-width: 256px;
+  }
+    }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-wide {
+      --Layout-sidebar-width: 320px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--sidebar-wide {
+      --Layout-sidebar-width: 336px;
+  }
+    }
+
+/* Sidebar position */
+
+.Layout.Layout--sidebarPosition-start .Layout-sidebar {
+      grid-column: 1;
+    }
+
+.Layout.Layout--sidebarPosition-start .Layout-main {
+      grid-column: 2 / span 2;
+    }
+
+.Layout.Layout--sidebarPosition-end {
+    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
+  }
+
+.Layout.Layout--sidebarPosition-end .Layout-main {
+      grid-column: 1;
+    }
+
+.Layout.Layout--sidebarPosition-end .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+
+/* Sidebar divider */
+
+.Layout.Layout--divided .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      /* stylelint-disable-next-line primer/spacing */
+      margin-right: -1px;
+      /* stylelint-disable-next-line primer/colors */
+      background: var(--borderColor-default);
+    }
+
+.Layout.Layout--divided .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
+        grid-column: 1;
+      }
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  /* Centered main column
+  ** FIXME: right-aligned sidebar */
+}
+
+.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-md,:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-lg,:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-xl {
+      margin-left: 0;
+    }
+
+.Layout-main .Layout-main-centered-md {
+    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+.Layout-main .Layout-main-centered-lg {
+    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+.Layout-main .Layout-main-centered-xl {
+    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }

package/app/components/primer/alpha/layout.css.json

@@ -2,12 +2,12 @@
   "name": "alpha/layout",
   "selectors": [
     ".Layout",
+    ".Layout .Layout-sidebar",
     ".Layout .Layout-divider",
     ".Layout .Layout-main",
-    ".Layout .Layout-sidebar",
     ".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
-    ".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",
     ".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
     ".Layout.Layout--divided",
@@ -18,12 +18,12 @@
     ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
     ".Layout.Layout--flowRow-until-md",
+    ".Layout.Layout--flowRow-until-md .Layout-sidebar",
     ".Layout.Layout--flowRow-until-md .Layout-divider",
     ".Layout.Layout--flowRow-until-md .Layout-main",
-    ".Layout.Layout--flowRow-until-md .Layout-sidebar",
     ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
-    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",
     ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
     ".Layout.Layout--flowRow-until-md.Layout--divided",
@@ -34,12 +34,12 @@
     ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
     ".Layout.Layout--flowRow-until-lg",
+    ".Layout.Layout--flowRow-until-lg .Layout-sidebar",
     ".Layout.Layout--flowRow-until-lg .Layout-divider",
     ".Layout.Layout--flowRow-until-lg .Layout-main",
-    ".Layout.Layout--flowRow-until-lg .Layout-sidebar",
     ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
-    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
     ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",
     ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
     ".Layout.Layout--flowRow-until-lg.Layout--divided",
@@ -64,11 +64,11 @@
     ".Layout-divider",
     ".Layout-sidebar",
     ".Layout-main",
-    ".Layout-main .Layout-main-centered-lg",
     ".Layout-main .Layout-main-centered-md",
+    ".Layout-main .Layout-main-centered-lg",
     ".Layout-main .Layout-main-centered-xl",
-    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-lg",
-    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-md",
-    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>.container-xl"
+    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-md",
+    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-lg",
+    ":is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl) > .container-xl"
   ]
 }

package/app/components/primer/alpha/menu.css

@@ -1 +1,124 @@
-.menu{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);list-style:none;margin-bottom:var(--stack-gap-normal)}.menu-item{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);color:var(--fgColor-default);display:block;padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium)}.menu-item:hover{background-color:var(--bgColor-neutral-muted);-webkit-text-decoration:none;text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active);cursor:default}:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before{background-color:var(--underlineNav-borderColor-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--fgColor-muted);margin-right:var(--control-medium-gap);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap)}.menu-item .menu-warning{color:var(--fgColor-attention);float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap)}.menu-item.alert .Counter{color:var(--fgColor-danger)}.menu-heading{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);color:var(--fgColor-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious)}.menu-heading:hover{-webkit-text-decoration:none;text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium)}
+/* menu */
+
+/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
+
+.menu {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: var(--stack-gap-normal);
+  list-style: none;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.menu-item:first-child {
+    border-top: 0;
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+  }
+
+.menu-item:first-child::before {
+      border-top-left-radius: var(--borderRadius-medium);
+    }
+
+.menu-item:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+.menu-item:last-child::before {
+      border-bottom-left-radius: var(--borderRadius-medium);
+    }
+
+.menu-item:hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    background-color: var(--bgColor-neutral-muted);
+  }
+
+.menu-item:active {
+    background-color: var(--bgColor-muted);
+  }
+
+.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']) {
+    cursor: default;
+    background-color: var(--menu-bgColor-active);
+  }
+
+:is(.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']))::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: '';
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--underlineNav-borderColor-active);
+    }
+
+.menu-item .octicon {
+    width: 16px;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: var(--control-medium-gap);
+    color: var(--fgColor-muted);
+    text-align: center;
+  }
+
+.menu-item .Counter {
+    float: right;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: var(--control-small-gap);
+  }
+
+.menu-item .menu-warning {
+    float: right;
+    color: var(--fgColor-attention);
+  }
+
+.menu-item .avatar {
+    float: left;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: var(--control-small-gap);
+  }
+
+.menu-item.alert .Counter {
+      color: var(--fgColor-danger);
+    }
+
+.menu-heading {
+  display: block;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.menu-heading:hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+  }
+
+.menu-heading:first-child {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+  }
+
+.menu-heading:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }

package/app/components/primer/alpha/menu.css.json

@@ -4,15 +4,15 @@
     ".menu",
     ".menu-item",
     ".menu-item:first-child",
-    ".menu-item:first-child:before",
+    ".menu-item:first-child::before",
     ".menu-item:last-child",
-    ".menu-item:last-child:before",
+    ".menu-item:last-child::before",
     ".menu-item:hover",
     ".menu-item:active",
     ".menu-item.selected",
-    ".menu-item[aria-current]:not([aria-current=false])",
-    ".menu-item[aria-selected=true]",
-    ":is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before",
+    ".menu-item[aria-selected='true']",
+    ".menu-item[aria-current]:not([aria-current='false'])",
+    ":is(.menu-item.selected,.menu-item[aria-selected='true'],.menu-item[aria-current]:not([aria-current='false']))::before",
     ".menu-item .octicon",
     ".menu-item .Counter",
     ".menu-item .menu-warning",

package/app/components/primer/alpha/overlay.css

@@ -1 +1,25 @@
-anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}anchored-position:not(.Overlay){background:none}.Overlay[popover]:not(:popover-open){display:none}anchored-position.not-anchored::backdrop,dialog::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}select-panel dialog::backdrop{background:none}@media (forced-colors:active){.Overlay{outline:1px solid #0000}}
+/* stylelint-disable selector-max-type, selector-no-qualifying-type */
+anchored-position[popover] {
+  position: absolute;
+  min-width: 192px;
+  padding: 0;
+  overflow: visible;
+  border-width: 0;
+}
+anchored-position:not(.Overlay) {
+  background: none;
+}
+.Overlay[popover]:not(:popover-open) {
+  display: none
+}
+anchored-position.not-anchored::backdrop, dialog::backdrop {
+  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
+}
+select-panel dialog::backdrop {
+  background: none;
+}
+@media (forced-colors: active) {
+  .Overlay {
+    outline: solid 1px transparent;
+  }
+}