@primer/view-components 0.45.2 → 0.46.0-rc.4285adec

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

@@ -1,374 +1 @@
-/* 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));
-  }
+.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))}

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-start .Layout-main",
     ".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",
     ".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-start .Layout-main",
     ".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-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-start .Layout-main",
     ".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-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-md",
     ".Layout-main .Layout-main-centered-lg",
+    ".Layout-main .Layout-main-centered-md",
     ".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-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"
+    ":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"
   ]
 }

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

@@ -1,124 +1 @@
-/* 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);
-  }
+.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)}

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-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[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 .octicon",
     ".menu-item .Counter",
     ".menu-item .menu-warning",

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

@@ -1,25 +1 @@
-/* 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;
-  }
-}
+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}}