primer_view_components 0.34.0 → 0.35.0

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

@@ -1 +1 @@
-{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,oBA+IF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,4EACE,YACF,CAEA,6EAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,qGACE,YACF,CAEA,sGAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,qGACE,YACF,CAEA,sGAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QAwBE,qBAAsB,CACtB,sGAAwG,CACxG,6BAyHF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,qCAAsC,CAJtC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,+YAGE,aACF,CAGF,sCACE,6FACF,CAEA,sCACE,4FACF,CAEA,sCACE,6FACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--bgColor-inset);\n      border-color: var(--borderColor-default);\n      border-style: solid;\n      border-width: var(--borderWidth-thin) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--borderColor-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}
+{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,oBAgJF,CA9IE,wCANF,QA7EE,kBAAmB,CACnB,mCAgOF,CA9NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,4EACE,YACF,CAEA,6EAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,qGACE,YACF,CAEA,sGAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,qGACE,YACF,CAEA,sGAGE,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QAwBE,qBAAsB,CACtB,sGAAwG,CACxG,6BA0HF,CAxHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAyGJ,CAxGE,CAEA,4BACE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAjEF,QAkEI,4BAkFJ,CAjFE,CAEA,yBArEF,QAsEI,4BA8EJ,CA7EE,CAEA,0BAzEF,QA0EI,4BA0EJ,CAzEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAOE,qCAAsC,CANtC,aAAc,CACd,aAAc,CAGd,iBAAkB,CAFlB,SAKF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,+YAGE,aACF,CAGF,sCACE,6FACF,CAEA,sCACE,4FACF,CAEA,sCACE,6FACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--bgColor-inset);\n      border-color: var(--borderColor-default);\n      border-style: solid;\n      border-width: var(--borderWidth-thin) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    --Layout-gutter: 0px;\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      /* stylelint-disable-next-line primer/spacing */\n      margin-right: -1px;\n      /* stylelint-disable-next-line primer/colors */\n      background: var(--borderColor-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}

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

@@ -125,8 +125,7 @@
   }
 
   &.Layout--gutter-none {
-    /* stylelint-disable-next-line length-zero-no-unit */
-    --Layout-gutter: 0px; /* Neds px in value */
+    --Layout-gutter: 0px;
   }
 
   &.Layout--gutter-condensed {
@@ -207,7 +206,9 @@
       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);
     }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAHzC,eAAgB,CADhB,qCAKF,CAEA,WAKE,sEAAuE,CADvE,4BAA6B,CAF7B,aAAc,CACd,kGAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,kDAKF,CAHE,qDAHA,iDAKA,CAGF,sBACE,eAAgB,CAChB,qDAMF,CAHE,mDAFA,oDAIA,CAGF,iBAEE,6CAA8C,CAD9C,4BAAqB,CAArB,oBAEF,CAEA,kBACE,qCACF,CAEA,sGAIE,2CAA4C,CAD5C,cAYF,CATE,kHAOE,uDAAwD,CAJxD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,0BAA2B,CAD3B,sCAAuC,CAEvC,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,oCACF,CAEA,yBAEE,8BAA+B,CAD/B,WAEF,CAEA,mBACE,UAAW,CACX,qCACF,CAGE,0BACE,2BACF,CAIJ,cAQE,sEAAuE,CADvE,4BAA6B,CAN7B,aAAc,CAId,iBAAkB,CAClB,4CAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,kGAsBF,CAdE,oBACE,4BAAqB,CAArB,oBACF,CAEA,0BACE,iDAAkD,CAClD,kDACF,CAEA,yBACE,eAAgB,CAEhB,oDAAqD,CADrD,qDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--stack-gap-normal);\n  list-style: none;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-top-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--bgColor-neutral-muted);\n  }\n\n  &:active {\n    background-color: var(--bgColor-muted);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--menu-bgColor-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--underlineNav-borderColor-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--control-medium-gap);\n    color: var(--fgColor-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--control-small-gap);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--fgColor-attention);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--control-small-gap);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--fgColor-danger);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n"]}
+{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAIE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAHzC,eAAgB,CADhB,qCAKF,CAEA,WAME,sEAAuE,CADvE,4BAA6B,CAH7B,aAAc,CAEd,kGAAmG,CAHnG,iBAoFF,CA7EE,uBACE,YAAa,CAEb,kDAKF,CAHE,qDAHA,iDAKA,CAGF,sBACE,eAAgB,CAChB,qDAMF,CAHE,mDAFA,oDAIA,CAGF,iBAEE,6CAA8C,CAD9C,4BAAqB,CAArB,oBAEF,CAEA,kBACE,qCACF,CAEA,sGAIE,2CAA4C,CAD5C,cAaF,CAVE,kHAQE,uDAAwD,CALxD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAIF,CAGF,oBAIE,0BAA2B,CAD3B,sCAAuC,CAEvC,iBAAkB,CAJlB,UAKF,CAEA,oBACE,WAAY,CAEZ,oCACF,CAEA,yBAEE,8BAA+B,CAD/B,WAEF,CAEA,mBACE,UAAW,CAEX,qCACF,CAGE,0BACE,2BACF,CAIJ,cASE,sEAAuE,CADvE,4BAA6B,CAP7B,aAAc,CAKd,iBAAkB,CAClB,4CAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,kGAsBF,CAdE,oBACE,4BAAqB,CAArB,oBACF,CAEA,0BACE,iDAAkD,CAClD,kDACF,CAEA,yBACE,eAAgB,CAEhB,oDAAqD,CADrD,qDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  list-style: none;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-top-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--bgColor-neutral-muted);\n  }\n\n  &:active {\n    background-color: var(--bgColor-muted);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--menu-bgColor-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--underlineNav-borderColor-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-medium-gap);\n    color: var(--fgColor-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--control-small-gap);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--fgColor-attention);\n  }\n\n  & .avatar {\n    float: left;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--fgColor-danger);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n"]}

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

@@ -3,6 +3,7 @@
 /* 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);
@@ -13,6 +14,7 @@
 .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);
@@ -59,12 +61,14 @@
       left: 0;
       width: 2px;
       content: '';
+      /* stylelint-disable-next-line primer/colors */
       background-color: var(--underlineNav-borderColor-active);
     }
   }
 
   & .octicon {
     width: 16px;
+    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
     color: var(--fgColor-muted);
     text-align: center;
@@ -72,6 +76,7 @@
 
   & .Counter {
     float: right;
+    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
   }
 
@@ -82,6 +87,7 @@
 
   & .avatar {
     float: left;
+    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
   }
 
@@ -94,6 +100,7 @@
 
 .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;

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

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BACE,cAAe,CAGf,eAAgB,CAChB,gBAAiB,CAHjB,SAAU,CACV,iBAGF,CAEA,gCACE,eACF,CAGA,qCACE,YACF,CAEA,0DACE,2EACF,CAEA,8BACE,eACF,CAEA,8BACE,SACE,uBACF,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  overflow: visible;\n}\n\nanchored-position:not(.Overlay) {\n  background: none;\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:popover-open) {\n  display: none\n}\n\nanchored-position.not-anchored::backdrop, dialog::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\nselect-panel dialog::backdrop {\n  background: none;\n}\n\n@media (forced-colors: active) {\n  .Overlay {\n    outline: solid 1px transparent;\n  }\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AACA,2BAKE,cAAe,CAHf,eAAgB,CAEhB,gBAAiB,CADjB,SAAU,CAFV,iBAKF,CAEA,gCACE,eACF,CAEA,qCACE,YACF,CAEA,0DACE,2EACF,CAEA,8BACE,eACF,CAEA,8BACE,SACE,uBACF,CACF","file":"overlay.css","sourcesContent":["/* stylelint-disable selector-max-type, selector-no-qualifying-type */\nanchored-position[popover] {\n  position: absolute;\n  min-width: 192px;\n  padding: 0;\n  overflow: visible;\n  border-width: 0;\n}\n\nanchored-position:not(.Overlay) {\n  background: none;\n}\n\n.Overlay[popover]:not(:popover-open) {\n  display: none\n}\n\nanchored-position.not-anchored::backdrop, dialog::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\nselect-panel dialog::backdrop {\n  background: none;\n}\n\n@media (forced-colors: active) {\n  .Overlay {\n    outline: solid 1px transparent;\n  }\n}\n"]}

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

@@ -1,16 +1,16 @@
+/* stylelint-disable selector-max-type, selector-no-qualifying-type */
 anchored-position[popover] {
-  border-width: 0;
-  padding: 0;
   position: absolute;
   min-width: 192px;
+  padding: 0;
   overflow: visible;
+  border-width: 0;
 }
 
 anchored-position:not(.Overlay) {
   background: none;
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 .Overlay[popover]:not(:popover-open) {
   display: none
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,uDAA+D,CAC/D,wCAAyC,CAJzC,mBAAoB,CACpB,eAIF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAeF,CAbE,gDACE,gCAKF,CAHE,6DACE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBAIE,0CAAiD,CACjD,wCAAyC,CAHzC,mBAAoB,CAIpB,iCAAkC,CAHlC,sBAAuB,CAIvB,4CAA6C,CAN7C,iBA6FF,CAnFI,oEACE,iGACF,CAEA,qEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,0EACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,oEAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,gDAAiD,CADjD,6CAA8C,CAF9C,iBAMF,CAIF,+BAGE,QAAS,CAET,uFAA0F,CAD1F,0CAA2C,CAH3C,WAAY,CAMZ,0BAAsB,CAAtB,qBAAsB,CADtB,sGAAuG,CAJvG,UAWF,CAJE,kDAEE,uFAA0F,CAD1F,mFAEF,CAGF,oFACE,wCACF,CAEA,uCAEE,kBAAmB,CADnB,aAEF,CAGA,qCAEE,eAAgB,CAChB,sBAAuB,CAFvB,kBAGF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-color: var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  height: var(--control-medium-size);\n  padding: var(--segmentedControl-item-padding);\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      margin-top: var(--control-medium-paddingBlock);\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    height: 100%;\n    width: 100%;\n    border: 0;\n    font-weight: var(--base-text-weight-normal);\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n    min-width: fit-content;\n\n    &:focus-visible {\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}
+{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,uDAA+D,CAC/D,wCAAyC,CAJzC,mBAAoB,CACpB,eAIF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAgBF,CAdE,gDACE,gCAMF,CAJE,6DAEE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBAME,0CAAiD,CACjD,wCAAyC,CALzC,mBAAoB,CACpB,iCAAkC,CAKlC,sBAAuB,CAHvB,4CAA6C,CAJ7C,iBAmGF,CAxFI,oEACE,iGACF,CAEA,qEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,0EACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAQE,oEAAqE,CADrE,UAAW,CALX,gBAAiB,CAIjB,gDAAiD,CAFjD,6CAA8C,CAH9C,iBAQF,CAIF,+BAKE,QAAS,CAET,uFAA0F,CAH1F,0CAA2C,CAD3C,WAAY,CADZ,0BAAsB,CAAtB,qBAAsB,CAOtB,sGAAuG,CARvG,UAeF,CALE,kDAEE,uFAA0F,CAC1F,mFACF,CAGF,oFACE,wCACF,CAEA,uCAEE,kBAAmB,CADnB,aAEF,CAGA,qCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-color: var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmentedControl-item-padding);\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  justify-content: center;\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--control-medium-paddingBlock);\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    width: 100%;\n    min-width: fit-content;\n    height: 100%;\n    font-weight: var(--base-text-weight-normal);\n    border: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n    &:focus-visible {\n      /* stylelint-disable-next-line primer/borders */\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}

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

@@ -28,6 +28,7 @@
     height: var(--control-small-size);
 
     & .Button {
+      /* stylelint-disable-next-line primer/spacing */
       padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
     }
   }
@@ -56,11 +57,12 @@
 .SegmentedControl-item {
   position: relative;
   display: inline-flex;
-  justify-content: center;
-  border: var(--borderWidth-thin) solid transparent;
-  border-radius: var(--borderRadius-medium);
   height: var(--control-medium-size);
+  /* stylelint-disable-next-line primer/spacing */
   padding: var(--segmentedControl-item-padding);
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  justify-content: center;
 
   /* button color overrides */
   & .Button--invisible {
@@ -109,7 +111,9 @@
     &::before {
       position: absolute;
       inset: 0 0 0 -1px;
+      /* stylelint-disable-next-line primer/spacing */
       margin-top: var(--control-medium-paddingBlock);
+      /* stylelint-disable-next-line primer/spacing */
       margin-bottom: var(--control-medium-paddingBlock);
       content: '';
       border-left: var(--borderWidth-thin) solid var(--borderColor-default);
@@ -118,17 +122,20 @@
 
   /* Button ----------------------------------------- */
   & .Button {
-    height: 100%;
     width: 100%;
-    border: 0;
+    min-width: fit-content;
+    height: 100%;
     font-weight: var(--base-text-weight-normal);
+    border: 0;
+    /* stylelint-disable-next-line primer/borders */
     border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
+    /* stylelint-disable-next-line primer/spacing */
     padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
-    min-width: fit-content;
 
     &:focus-visible {
-      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
+      /* stylelint-disable-next-line primer/borders */
       border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
+      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
     }
   }
 
@@ -143,9 +150,9 @@
 
   /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */
   & .Button-label {
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 

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

@@ -11,7 +11,7 @@
         <% if show_filter? %>
           <% header.with_filter do %>
             <div data-target="select-panel.bannerErrorElement" hidden>
-              <%= render Primer::Alpha::Banner.new(scheme: :danger, mb: 2) do %>
+              <%= render Primer::Alpha::Banner.new(scheme: @banner_scheme, mb: 2) do %>
                 <% if error_content? %>
                   <%= error_content %>
                 <% else %>
@@ -65,13 +65,16 @@
                     mb: 2,
                     aria: { disabled: true, busy: true },
                     display: :flex,
-                    align_items: :center,
+                    align_items: :flex_start,
                     justify_content: :center,
                     text_align: :center,
                     classes: "SelectPanel-loadingPanel"
                   )) do %>
-                    <div data-hide-on-error>
-                      <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }, data: { target: "select-panel.bodySpinner" }) %>
+                    <div data-hide-on-error class="pt-2">
+                      <%= render Primer::Beta::Spinner.new(aria: { label: @loading_label, describedby: @loading_description_id }, data: { target: "select-panel.bodySpinner" }) %>
+                      <% if @loading_description.present? %>
+                        <div id="<%= @loading_description_id %>" aria-hidden="true"><%= @loading_description %></div>
+                      <% end %>
                     </div>
                     <div data-show-on-error hidden data-target="select-panel.fragmentErrorElement">
                       <% if preload_error_content? %>
@@ -89,7 +92,7 @@
                 <%= render(@list) %>
               <% end %>
             </div>
-            <div data-target="select-panel.noResults" class="color-border-muted text-center d-flex flex-items-center flex-justify-center SelectPanel-emptyPanel" hidden>
+            <div data-target="select-panel.noResults" class="pt-2 color-border-muted text-center d-flex flex-items-start flex-justify-center SelectPanel-emptyPanel" hidden>
               <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
             </div>
           <% end %>

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

@@ -272,12 +272,13 @@ module Primer
         # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>.
         def initialize(**system_arguments)
           raise_if_role_given!(**system_arguments)
-          select_variant = system_arguments[:select_variant] || Primer::Alpha::ActionList::DEFAULT_SELECT_VARIANT
+          select_variant = system_arguments.delete(:select_variant) || Primer::Alpha::ActionList::DEFAULT_SELECT_VARIANT
 
           super(
             p: 2,
             role: "listbox",
             aria_selection_variant: select_variant == :single ? :selected : :checked,
+            select_variant: select_variant == :multiple ? :multiple_checkbox : :single,
             **system_arguments
           )
         end
@@ -311,6 +312,12 @@ module Primer
         :none,
       ].freeze
 
+      DEFAULT_BANNER_SCHEME = :danger
+      BANNER_SCHEME_OPTIONS = [
+        DEFAULT_BANNER_SCHEME,
+        :warning
+      ].freeze
+
       # The URL to fetch search results from.
       #
       # @return [String]
@@ -331,6 +338,11 @@ module Primer
       # @return [Symbol]
       attr_reader :select_variant
 
+      # <%= one_of(Primer::Alpha::SelectPanel::BANNER_SCHEME_OPTIONS) %>
+      #
+      # @return [Symbol]
+      attr_reader :banner_scheme
+
       # <%= one_of(Primer::Alpha::SelectPanel::FETCH_STRATEGIES) %>
       #
       # @return [Symbol]
@@ -368,6 +380,9 @@ module Primer
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
       # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+      # @param loading_label [String] The aria-label to use when the panel is loading, defaults to 'Loading content...'.
+      # @param loading_description [String] The description to use when the panel is loading. If not provided, no description will be used.
+      # @param banner_scheme [Symbol] The scheme for the error banner <%= one_of(Primer::Alpha::SelectPanel::BANNER_SCHEME_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         src: nil,
@@ -388,6 +403,9 @@ module Primer
         open_on_load: false,
         anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        loading_label: "Loading content...",
+        loading_description: nil,
+        banner_scheme: DEFAULT_BANNER_SCHEME,
         **system_arguments
       )
         raise_if_role_given!(**system_arguments)
@@ -409,6 +427,13 @@ module Primer
         @dynamic_label = dynamic_label
         @dynamic_label_prefix = dynamic_label_prefix
         @dynamic_aria_label_prefix = dynamic_aria_label_prefix
+        @loading_label = loading_label
+        @loading_description_id = nil
+        if loading_description.present?
+          @loading_description_id = "#{@panel_id}-loading-description"
+        end
+        @loading_description = loading_description
+        @banner_scheme = fetch_or_fallback(BANNER_SCHEME_OPTIONS, banner_scheme, DEFAULT_BANNER_SCHEME)
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:id] = @panel_id

data/app/components/primer/alpha/select_panel_element.js

@@ -145,7 +145,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
     updateAnchorPosition() {
         // If the selectPanel is removed from the screen on resize close the dialog
         if (this && this.offsetParent === null) {
-            this.dialog.close();
+            this.hide();
         }
         if (this.invokerElement) {
             const { top, left } = getAnchoredPosition(this.dialog, this.invokerElement, {
@@ -254,6 +254,12 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             // Remove data-ready so it can be set the next time the panel is opened
             this.dialog.removeAttribute('data-ready');
             this.invokerElement?.setAttribute('aria-expanded', 'false');
+            // When we close the dialog, clear the filter input
+            const fireSearchEvent = this.filterInputTextField.value.length > 0;
+            this.filterInputTextField.value = '';
+            if (fireSearchEvent) {
+                this.filterInputTextField.dispatchEvent(new Event('input'));
+            }
             this.dispatchEvent(new CustomEvent('panelClosed', {
                 detail: { panel: this },
                 bubbles: true,
@@ -719,8 +725,8 @@ _SelectPanelElement_inErrorState = function _SelectPanelElement_inErrorState() {
 };
 _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(type) {
     let errorElement = this.fragmentErrorElement;
-    if (type === ErrorStateType.BODY) {
-        this.fragmentErrorElement?.removeAttribute('hidden');
+    if (type === ErrorStateType.BODY && this.fragmentErrorElement) {
+        this.fragmentErrorElement.removeAttribute('hidden');
         this.bannerErrorElement.setAttribute('hidden', '');
     }
     else {

data/app/components/primer/alpha/select_panel_element.ts

@@ -2,7 +2,7 @@ import {getAnchoredPosition} from '@primer/behaviors'
 import {controller, target} from '@github/catalyst'
 import {announceFromElement, announce} from '../aria_live'
 import {IncludeFragmentElement} from '@github/include-fragment-element'
-import type {PrimerTextFieldElement} from 'lib/primer/forms/primer_text_field'
+import type {PrimerTextFieldElement} from 'app/lib/primer/forms/primer_text_field'
 import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
 import '@oddbird/popover-polyfill'
 
@@ -165,7 +165,7 @@ export class SelectPanelElement extends HTMLElement {
   updateAnchorPosition() {
     // If the selectPanel is removed from the screen on resize close the dialog
     if (this && this.offsetParent === null) {
-      this.dialog.close()
+      this.hide()
     }
 
     if (this.invokerElement) {
@@ -464,6 +464,12 @@ export class SelectPanelElement extends HTMLElement {
       // Remove data-ready so it can be set the next time the panel is opened
       this.dialog.removeAttribute('data-ready')
       this.invokerElement?.setAttribute('aria-expanded', 'false')
+      // When we close the dialog, clear the filter input
+      const fireSearchEvent = this.filterInputTextField.value.length > 0
+      this.filterInputTextField.value = ''
+      if (fireSearchEvent) {
+        this.filterInputTextField.dispatchEvent(new Event('input'))
+      }
 
       this.dispatchEvent(
         new CustomEvent('panelClosed', {
@@ -746,8 +752,8 @@ export class SelectPanelElement extends HTMLElement {
   #setErrorState(type: ErrorStateType) {
     let errorElement = this.fragmentErrorElement
 
-    if (type === ErrorStateType.BODY) {
-      this.fragmentErrorElement?.removeAttribute('hidden')
+    if (type === ErrorStateType.BODY && this.fragmentErrorElement) {
+      this.fragmentErrorElement.removeAttribute('hidden')
       this.bannerErrorElement.setAttribute('hidden', '')
     } else {
       errorElement = this.bannerErrorElement

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 %>